@font-face { font-family: 'Medeo Sans'; src: url('/app/fonts/MedeoSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
html, body { margin: 0; min-height: 100%; background: #1a1c1e; color: #e3e2e6; font-family: 'Medeo Sans', sans-serif; }
body { line-height: 24px; }
h1 { line-height: 40px; margin: 0 0 16px; }
p { margin: 16px 0; }
main { padding: 24px; }
button, input { font: inherit; margin: 8px; }
button:focus { outline: 3px solid #a8c8ff; }
label { display: block; }
#scene { width: 640px; height: 280px; max-width: 100%; }
video { display: block; width: 640px; max-width: 100%; margin: 24px; }

a { color: #a8c8ff; }
#app-shell { display: none; position: fixed; }
body.app { overflow: hidden; }
body.app #app-shell { display: block; }
body.app #diagnostics, body.app #scene, body.app #video { display: none; }
.movie-player-video { position: absolute; display: block; max-width: none; width: 100%; height: 100%; margin: 0; object-fit: contain; background: #000; }
.movie-player-overlay { position: absolute; inset: 0; pointer-events: none; }
body.app.error #diagnostics { display: block; }
.login-inputs { position: fixed; width: 960px; height: 540px; transform-origin: 0 0; pointer-events: none; }
.login-inputs input { position: absolute; left: 60px; height: 56px; box-sizing: border-box; margin: 0; padding: 12px 20px 12px 50px; font: 14px/20px 'Medeo Sans', sans-serif; color: #e3e2e6; background: #303034; border: 2px solid transparent; border-radius: 4px; pointer-events: auto; outline: none; }
.login-inputs input.tv-focus, .login-inputs input:focus { border: 2px solid #a8c8ff; }
.search-inputs { position: fixed; width: 960px; height: 540px; transform-origin: 0 0; pointer-events: none; }
.search-inputs input { position: absolute; left: 48px; top: 78px; width: 864px; height: 54px; box-sizing: border-box; margin: 0; padding: 10px 28px; font: 14px/20px 'Medeo Sans', sans-serif; color: #e3e2e6; background: #303034; border: 2px solid transparent; border-radius: 5px; pointer-events: auto; outline: none; }
.search-inputs input.tv-focus, .search-inputs input:focus { border-color: #a8c8ff; }
.login-field-icon { position: absolute; left: 80px; width: 24px; height: 24px; pointer-events: none; }
.catalog-progress { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20; pointer-events: none; text-align: center; }
.catalog-progress[hidden] { display: none; }
.catalog-progress-spinner { display: block; width: 64px; height: 64px; border: 2px solid #a8c8ff; border-top-color: transparent; border-radius: 50%; animation: catalog-spin 900ms linear infinite; }
.catalog-progress-error { display: none; max-width: 420px; padding: 12px 20px; border-radius: 6px; background: #1e2124; color: #ffb4ab; font: 18px/24px 'Medeo Sans', sans-serif; }
.catalog-progress[data-state='error'] .catalog-progress-spinner { display: none; }
.catalog-progress[data-state='error'] .catalog-progress-error { display: block; }
@keyframes catalog-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .catalog-progress-spinner { animation-duration: 2s; } }
.movie-player-video::cue { font-family: 'Medeo Sans', sans-serif; line-height: 1.25; }