:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #08111f;
  color: #f6f8fb;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, .button-link {
  border: 0; border-radius: 999px; padding: .8rem 1.2rem; background: #66e3c4; color: #07130f;
  font: inherit; font-weight: 750; cursor: pointer; text-decoration: none;
}
input { margin-top: .4rem; width: 100%; padding: .8rem; border: 1px solid #3d4b60; border-radius: .7rem; background: #111d2e; color: inherit; font: inherit; }
select { margin-top: .4rem; width: 100%; padding: .8rem; border: 1px solid #3d4b60; border-radius: .7rem; background: #111d2e; color: inherit; font: inherit; }
label { display: block; margin: 1rem 0; color: #b7c1d0; }
h1, h2, p { margin-top: 0; }
.eyebrow { color: #66e3c4; font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.muted, small { color: #91a0b5; }
.error { color: #ff9090; min-height: 1.5em; }
.panel { background: rgba(18, 31, 49, .92); border: 1px solid #2a3a50; border-radius: 1.25rem; padding: 2rem; box-shadow: 0 24px 80px rgba(0,0,0,.25); }
.player-page { overflow: hidden; background: #050b14; }
.stage { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; }
.stage.policy-blanked { background: #000; }
.pairing { width: min(52rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; }
.mode-panel { margin: 1rem 0; padding: 1rem; border: 1px solid #3d4b60; border-radius: .8rem; }
.mode-panel[hidden] { display: none; }
.mode-panel legend { padding: 0 .4rem; color: #f6f8fb; font-weight: 750; }
.qr-enrollment { display: grid; grid-template-columns: minmax(14rem, 20rem) 1fr; gap: 2rem; align-items: center; margin: 1rem 0; }
.qr-enrollment[hidden] { display: none; }
.qr-enrollment canvas { display: block; width: 100% !important; height: auto !important; border-radius: .6rem; }
.qr-enrollment p { margin: .35rem 0; color: #b7c1d0; }
.qr-enrollment .enrollment-check { margin-top: 1rem; }
.enrollment-check strong { display: inline-block; margin-left: .35rem; color: #fff; font-size: 1.45rem; letter-spacing: .16em; }
.pairing-divider { display: flex; align-items: center; gap: .75rem; color: #91a0b5; font-size: .8rem; }
.pairing-divider::before, .pairing-divider::after { content: ''; flex: 1; height: 1px; background: #3d4b60; }
.media { width: 100%; height: 100%; object-fit: cover; animation: fade-in .5s ease; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.scene-canvas { position: absolute; transform-origin: top left; isolation: isolate; }
.scene-layer { position: absolute; overflow: hidden; transform-origin: center; }
.scene-layer-media { display: block; width: 100%; height: 100%; }
.scene-layer-text { display: flex; width: 100%; height: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.scene-layer-ticker { display: flex; width: 100%; height: 100%; white-space: pre; will-change: transform; animation-timing-function: linear; animation-iteration-count: infinite; }
.ticker-left { justify-content: flex-start !important; animation-name: ticker-left; }
.ticker-right { justify-content: flex-start !important; animation-name: ticker-right; }
.ticker-up { align-items: flex-start !important; animation-name: ticker-up; }
.ticker-down { align-items: flex-start !important; animation-name: ticker-down; }
.scene-audio-track { display: none; }
.scene-layer-shape { position: relative; width: 100%; height: 100%; }
.scene-layer-slideshow-entry { position: absolute; inset: 0; overflow: hidden; }
.scene-layer-qr-container { display: grid; place-items: center; }
.scene-layer-qr { display: block; image-rendering: pixelated; }
.video-loop-mask { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.player-status { position: fixed; right: 1rem; bottom: 1rem; padding: .5rem .8rem; border-radius: 999px; background: rgba(0,0,0,.55); color: #c7d1df; font-size: .8rem; }
.configuration-button { position: fixed; left: 1rem; bottom: 1rem; opacity: .4; font-size: .75rem; padding: .5rem .8rem; }
.configuration-button:focus, .configuration-button:hover { opacity: 1; }
.cms-page { background: radial-gradient(circle at 90% 0%, #153849, #08111f 42%); padding: clamp(1.2rem, 4vw, 4rem); }
.cms-header { max-width: 70rem; margin: 0 auto 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cms-header h1 { margin-bottom: 0; }
.cms-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; }
.secondary { background: #303e52; color: #f6f8fb; }
.login-view { min-height: 60vh; display: grid; place-items: center; }
.login-view[hidden], .dashboard[hidden] { display: none; }
.login-panel { width: min(28rem, 100%); }
.dashboard { max-width: 70rem; margin: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.5rem; }
.display-row { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-top: 1px solid #2a3a50; }
.display-row small { display: block; margin-top: .3rem; }
.badge { align-self: center; padding: .3rem .6rem; border-radius: 999px; background: #303e52; font-size: .75rem; text-transform: uppercase; }
.badge.online { background: #174d42; color: #8affdf; }
@keyframes fade-in { from { opacity: 0; transform: scale(1.01); } }
@keyframes scene-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes scene-slide-left { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes scene-slide-right { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes scene-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes scene-slide-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes ticker-left { from { transform: translateX(var(--ticker-from)); } to { transform: translateX(var(--ticker-to)); } }
@keyframes ticker-right { from { transform: translateX(var(--ticker-from)); } to { transform: translateX(var(--ticker-to)); } }
@keyframes ticker-up { from { transform: translateY(var(--ticker-from)); } to { transform: translateY(var(--ticker-to)); } }
@keyframes ticker-down { from { transform: translateY(var(--ticker-from)); } to { transform: translateY(var(--ticker-to)); } }
@media (max-width: 550px) {
  .cms-header { align-items: flex-start; flex-direction: column; }
  .pairing { padding: 1.25rem; }
  .qr-enrollment { grid-template-columns: 1fr; gap: .8rem; text-align: center; }
  .qr-enrollment canvas { width: min(100%, 18rem) !important; justify-self: center; }
}