body,html{height:100%;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.background-container{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(/assets/startPage-wtGIjBp6.png);background-position:center;background-repeat:no-repeat;background-size:cover;z-index:-1}.content{position:absolute;top:20px;right:20px;padding:20px 40px;background-color:#ffffffd9;border-radius:10px;box-shadow:0 4px 6px #0000001a;text-align:center}button{padding:10px 20px;font-size:1rem;font-weight:500;border-radius:8px;border:1px solid #adadad;background-color:#f0f0f0;cursor:pointer;transition:background-color .2s,box-shadow .2s,border-color .2s;min-height:44px;min-width:44px;margin:4px;vertical-align:middle}button:hover:not(:disabled){background-color:#e0e0e0;border-color:#999}button:active:not(:disabled){background-color:#d0d0d0;box-shadow:inset 0 2px 4px #0000001a}button:disabled{cursor:not-allowed;opacity:.5}#start-service-btn{background-color:#3b82f6;color:#fff;border-color:#3b82f6}#start-service-btn:hover:not(:disabled){background-color:#2563eb}#play-btn{background-color:#22c55e;color:#fff;border-color:#22c55e}#play-btn:hover:not(:disabled){background-color:#16a34a}#login-button{padding:15px 30px;font-size:1.2em;color:#fff;background-color:#3b82f6;border:none;border-radius:8px;cursor:pointer;transition:background-color .3s}#login-button:hover{background-color:#2563eb}#end-service-btn{background-color:#ef4444;color:#fff;border-color:#ef4444}#end-service-btn:hover:not(:disabled){background-color:#dc2626}.service-page{display:none}.service-page.visible{display:block}body.service-active{background-color:#f1e9d2}body.service-active .background-container{display:none}#viewer-controls{position:fixed;bottom:0;left:0;padding:25px;z-index:100}#viewer-controls p{display:none}#viewer-controls #logout-button{opacity:0;transition:opacity .3s ease-in-out;pointer-events:none}#viewer-controls:hover #logout-button{opacity:1;pointer-events:auto}.media-container{position:relative;width:100%;height:100%;background-color:#000}.media-container video,.media-container audio{width:100%;height:100%}.media-container.paused:after{content:"▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10vw;color:#fffc;text-shadow:0 0 30px rgba(0,0,0,.5);pointer-events:none;z-index:10}#thumbnail-container{display:none;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:10px;background-color:#f0f0f0;border-radius:8px;margin-top:20px;max-height:400px;overflow-y:auto}#thumbnail-container::-webkit-scrollbar{width:12px}#thumbnail-container::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:6px}.thumbnail{aspect-ratio:16 / 9;position:relative;border:2px solid #ccc;border-radius:4px;padding:8px;cursor:pointer;transition:all .2s ease-in-out;background-color:#fff;overflow:hidden;text-align:center;font-size:.8em;display:flex;flex-direction:column;justify-content:center;align-items:center}.thumbnail:hover{border-color:#3b82f6;transform:scale(1.05)}.thumbnail.active{border-color:#2563eb;border-width:3px;box-shadow:0 0 10px #3b82f680}.thumbnail-controls{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:10px;opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.thumbnail:hover .thumbnail-controls,.thumbnail.active .thumbnail-controls{opacity:1;pointer-events:auto}.thumbnail-controls button{padding:0;margin:0;width:36px;height:36px;font-size:16px;line-height:36px;border-radius:50%;border:1px solid white;color:#fff;background-color:#0009}.thumbnail-controls .thumb-pause-btn{display:none}.thumbnail-controls .thumb-play-btn,.thumbnail.is-playing .thumbnail-controls .thumb-pause-btn{display:inline-block}.thumbnail.is-playing .thumbnail-controls .thumb-play-btn{display:none}