:root{--bg:#f6f7f4;--fg:#181b20;--muted:#6b7280;--panel:#fff;--line:#dde3e8;--accent:#0f766e;--accent2:#115e59}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);margin:0;font-family:Arial,Helvetica,sans-serif}button,input,select{font:inherit}.shell{grid-template-columns:260px 1fr;min-height:100vh;display:grid}.sidebar{border-right:1px solid var(--line);background:#fff;padding:24px}.admin-sidebar{color:#fff;background:#111827}.brand{font-size:20px;font-weight:800}.nav{gap:8px;margin-top:28px;display:grid}.nav a,.sidebar-footer a{color:inherit;border-radius:8px;padding:10px 12px;text-decoration:none}.nav a.active,.nav a:hover{color:var(--accent2);background:#eef7f5}.admin-sidebar .nav a.active,.admin-sidebar .nav a:hover{color:#c7fff4;background:#1f3f3b}.sidebar-footer{border-top:1px solid #ffffff2e;margin-top:24px;padding-top:18px;display:grid}.content{padding:28px}.topbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;display:flex}.title h1,h1{margin:0;font-size:28px}.title p,p.muted,.muted{color:var(--muted)}.button{background:var(--accent);color:#fff;cursor:pointer;border:0;border-radius:8px;align-items:center;gap:8px;padding:10px 14px;display:inline-flex}.button.secondary{color:var(--fg);background:#e8ecef}.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:18px}.mt{margin-top:18px}.metric{margin-top:8px;font-size:32px;font-weight:800}.table{border-collapse:collapse;width:100%}.table th,.table td{text-align:left;border-bottom:1px solid var(--line);padding:12px}.badge{color:var(--accent2);background:#eef7f5;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:700;display:inline-flex}.api-notice{color:#7a4d00;background:#fff8e5;border:1px solid #f0c36d;border-radius:8px;margin-bottom:18px;padding:12px}.form{gap:14px;max-width:980px;display:grid}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.form label,.auth-card label{color:var(--muted);gap:6px;font-size:14px;display:grid}.form input,.form select,.auth-card input{border:1px solid var(--line);background:#fff;border-radius:8px;width:100%;padding:10px}.remote-actions,.approval-row,.security-rules div{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.approval-row{border:1px solid var(--line);border-radius:8px;justify-content:space-between;padding:12px}.security-rules{border-top:1px solid var(--line);gap:8px;padding-top:12px;display:grid}.auth-page{background:#111827;place-items:center;min-height:100vh;padding:24px;display:grid}.auth-card{background:#fff;border-radius:8px;gap:14px;width:min(440px,100%);padding:26px;display:grid}.segmented{background:#eef2f4;border-radius:8px;grid-template-columns:1fr 1fr;gap:8px;padding:4px;display:grid}.segmented button{background:0 0;border:0;border-radius:6px;padding:9px}.segmented button.selected{color:var(--accent2);background:#fff}.player-root{color:#fff;background:#000;min-height:100vh;overflow:hidden}.player-stage{background:#000;place-items:center;width:100vw;height:100vh;display:grid}.player-stage img,.player-stage video{width:100%;height:100%}.player-empty,.pairing-card{text-align:center;color:#d7dde3;padding:24px}.pairing-card{background:#0f172ae6;border:1px solid #ffffff3d;border-radius:8px;width:min(680px,100vw - 32px)}.pairing-card h1{letter-spacing:.08em;font-size:clamp(64px,12vw,140px)}.broadcast-banner{white-space:nowrap;z-index:20;background:#0f172aeb;align-items:center;min-height:74px;padding:0 28px;font-size:clamp(24px,3vw,54px);font-weight:700;display:flex;position:fixed;bottom:0;left:0;right:0;overflow:hidden}.broadcast-banner span{min-width:100%;animation:20s linear infinite bannerSlide;display:inline-block}.pause-indicator{z-index:21;text-transform:uppercase;background:#0f172ad1;border:1px solid #ffffff47;border-radius:8px;padding:8px 12px;font-size:14px;position:fixed;top:18px;right:18px}.slide-animation{animation-duration:var(--animation-duration,.7s);animation-timing-function:var(--animation-easing,ease);will-change:opacity,transform,filter,clip-path;animation-fill-mode:both}.animation-none{animation-name:none}.animation-fade-in,.animation-crossfade{animation-name:fadeIn}.animation-fade-out{animation-name:fadeOutSoft}.animation-zoom-in{animation-name:zoomIn}.animation-zoom-out{animation-name:zoomOut}.animation-slide-left{animation-name:slideLeft}.animation-slide-right{animation-name:slideRight}.animation-slide-up{animation-name:slideUp}.animation-slide-down{animation-name:slideDown}.animation-wipe-left{animation-name:wipeLeft}.animation-wipe-right{animation-name:wipeRight}.animation-flip-x{animation-name:flipX}.animation-flip-y{animation-name:flipY}.animation-rotate-in{animation-name:rotateIn}.animation-blur-in{animation-name:blurIn}.animation-bounce-in{animation-name:bounceIn}.animation-kenburns{animation-name:kenBurns;animation-duration:max(var(--animation-duration,.7s),7s)}.animation-pan-left{animation-name:panLeft;animation-duration:max(var(--animation-duration,.7s),7s)}.animation-pan-right{animation-name:panRight;animation-duration:max(var(--animation-duration,.7s),7s)}@keyframes fadeIn{0%{opacity:0;transform:scale(1.01)}to{opacity:1;transform:scale(1)}}@keyframes fadeOutSoft{0%{opacity:0;transform:scale(1.02)}45%{opacity:1}to{opacity:1;transform:scale(1)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}@keyframes zoomOut{0%{opacity:0;transform:scale(1.14)}to{opacity:1;transform:scale(1)}}@keyframes slideLeft{0%{opacity:0;transform:translate(8%)}to{opacity:1;transform:translate(0)}}@keyframes slideRight{0%{opacity:0;transform:translate(-8%)}to{opacity:1;transform:translate(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(8%)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-8%)}to{opacity:1;transform:translateY(0)}}@keyframes wipeLeft{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes wipeRight{0%{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}@keyframes flipX{0%{opacity:0;transform:perspective(1200px)rotateX(70deg)}to{opacity:1;transform:perspective(1200px)rotateX(0)}}@keyframes flipY{0%{opacity:0;transform:perspective(1200px)rotateY(70deg)}to{opacity:1;transform:perspective(1200px)rotateY(0)}}@keyframes rotateIn{0%{opacity:0;transform:rotate(-4deg)scale(.96)}to{opacity:1;transform:rotate(0)scale(1)}}@keyframes blurIn{0%{opacity:0;filter:blur(18px);transform:scale(1.02)}to{opacity:1;filter:blur();transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.92)}65%{opacity:1;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}@keyframes kenBurns{0%{opacity:0;transform:scale(1)}10%{opacity:1}to{opacity:1;transform:scale(1.08)}}@keyframes panLeft{0%{opacity:0;transform:scale(1.08)translate(3%)}10%{opacity:1}to{opacity:1;transform:scale(1.08)translate(-3%)}}@keyframes panRight{0%{opacity:0;transform:scale(1.08)translate(-3%)}10%{opacity:1}to{opacity:1;transform:scale(1.08)translate(3%)}}@keyframes bannerSlide{0%{transform:translate(100%)}to{transform:translate(-100%)}}@media (max-width:900px){.shell,.grid,.metrics,.form-grid{grid-template-columns:1fr}.sidebar{border-right:0;border-bottom:1px solid var(--line)}}
