:root { --ink:#090909; --panel:#151515; --line:#353535; --orange:#ff7a1a; --amber:#ffb32c; --text:#f7f3ef; --muted:#a5a2a0; font-family: Arial, Helvetica, sans-serif; color:var(--text); background:var(--ink); }
* { box-sizing:border-box; } body { margin:0; background:radial-gradient(circle at 75% 15%, #55220b 0, transparent 28%), var(--ink); } button, input { font:inherit; } button { cursor:pointer; } #app { min-height:100vh; }
.brand { color:#fff; text-decoration:none; font-size:1.45rem; font-weight:900; letter-spacing:-.08em; white-space:nowrap; }.brand span { color:var(--orange); }.eyebrow { color:var(--orange); font-size:.72rem; letter-spacing:.18em; font-weight:800; margin:0 0 .55rem; }.muted, small { color:var(--muted); }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.audience-shell { width:min(100%, 480px); min-height:100vh; margin:auto; padding:1.25rem; background:linear-gradient(180deg, rgba(255,119,24,.09), transparent 34%), #0a0a0a; }.audience-topbar { display:flex; justify-content:space-between; align-items:center; }.round-label { font-size:.73rem; letter-spacing:.18em; color:#ddd; }.stage-hero { height:295px; margin:1rem -1.25rem 0; padding:5rem 1.25rem 0; text-align:center; position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(0,0,0,.35), #0a0a0a), radial-gradient(ellipse at center bottom, #55220b, transparent 61%); }.stage-hero h1 { margin:0; font-size:clamp(2.6rem,13vw,4rem); letter-spacing:-.06em; }.light { position:absolute; top:0; width:20px; height:90%; background:linear-gradient(180deg, transparent, rgba(255,119,24,.55), transparent); filter:blur(5px); }.light-one { left:13%; transform:rotate(13deg); }.light-two { left:48%; }.light-three { right:13%; transform:rotate(-13deg); }.timer-card { display:inline-flex; gap:.55rem; align-items:center; padding:.75rem 1.35rem; margin-top:1.2rem; border:1px solid var(--orange); border-radius:10px; background:#100e0b; color:var(--orange); font-size:1.65rem; font-weight:800; }.rating-card { padding:1.7rem 1.25rem; margin:1.4rem 0; text-align:center; border:1px solid #2c2c2c; border-radius:18px; background:linear-gradient(145deg,#181818,#0d0d0d); }.rating-card h2 { font-size:1.35rem; letter-spacing:.02em; margin:.1rem 0 .2rem; }.stars { display:flex; justify-content:center; gap:.25rem; margin:1.25rem 0; }.star { appearance:none; border:0; background:transparent; padding:.15rem; font-size:2.65rem; line-height:1; color:#4d4d4d; transition:transform .15s,color .15s; }.star:hover, .star.selected { color:var(--amber); transform:translateY(-2px); text-shadow:0 0 20px rgba(255,151,25,.35); }.primary-button { border:0; width:100%; padding:1rem 1.2rem; border-radius:10px; background:linear-gradient(135deg,#ffbf32,#ff6619); color:#100700; font-weight:900; letter-spacing:.1em; }.primary-button:disabled { background:#292929; color:#858585; cursor:not-allowed; }.status { min-height:1.4em; margin:.7rem 0 0; color:#ffd28f; font-size:.88rem; }.notice { display:flex; gap:.6rem; align-items:center; padding:.8rem 0; border-top:1px solid #303030; border-bottom:1px solid #303030; font-size:.82rem; }.notice span:last-child { color:#d8d4d1; }.live-dot { width:.52rem; height:.52rem; display:inline-block; border-radius:50%; background:#ff4e28; box-shadow:0 0 10px #ff4e28; }.comment-box { display:flex; margin-top:1.15rem; padding:.32rem .32rem .32rem 1rem; border:1px solid #373737; border-radius:12px; }.comment-box input { flex:1; background:transparent; border:0; color:white; outline:0; }.comment-box button { border:0; border-radius:8px; background:transparent; color:var(--orange); font-size:1.45rem; }
.production-shell { padding:1.5rem clamp(1rem,4vw,4rem) 3rem; background:#0b0b0b; }.production-header { display:flex; align-items:center; gap:2rem; padding-bottom:1rem; border-bottom:1px solid #302a27; }.production-header nav { flex:1; display:flex; gap:.3rem; overflow:auto; }.role-tab { padding:.7rem .85rem; border:0; border-bottom:2px solid transparent; background:transparent; color:#999; font-size:.72rem; font-weight:800; white-space:nowrap; }.role-tab.active { color:var(--orange); border-color:var(--orange); }.live-chip { color:#eee; font-size:.8rem; white-space:nowrap; }.console-heading { display:flex; justify-content:space-between; align-items:flex-end; margin:2rem 0 1rem; }.console-heading h2 { margin:0; font-size:2rem; }.console-heading > p { color:#bbb; font-variant-numeric:tabular-nums; }.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.metric-card,.cue-list,.stage-preview,.bottom-grid article { border:1px solid #353535; background:linear-gradient(145deg,#151515,#0d0d0d); border-radius:10px; }.metric-card { min-height:135px; padding:1.1rem; }.metric-card p,.cue-list p { color:#aaa; font-size:.75rem; font-weight:700; margin:0 0 .9rem; }.metric-card strong { display:block; color:var(--amber); font-size:clamp(1.45rem,3vw,2.6rem); letter-spacing:-.06em; }.metric-card.warning strong { color:#ff5046; }.metric-card span { color:#aaa; font-size:.7rem; letter-spacing:.08em; }.command-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:1rem; margin-top:1rem; }.stage-preview,.cue-list { padding:1rem; }.stage-art { height:245px; padding:1rem; display:flex; justify-content:space-between; align-items:flex-end; background:linear-gradient(180deg,transparent 30%,rgba(255,105,21,.35)), radial-gradient(ellipse at 50% 90%,#692605, transparent 57%), #0d0d0d; border:1px solid #3d2517; }.stage-art span { color:var(--orange); font-size:.7rem; font-weight:800; }.stage-art b { font-size:1.2rem; }.card-title { display:flex; justify-content:space-between; align-items:center; }.card-title h3 { margin:.1rem 0 1rem; }.card-title span { color:var(--orange); font-size:.65rem; }.cue-list ol { padding:0; margin:0; list-style:none; }.cue-list li { display:grid; grid-template-columns:2.2rem 1fr 3rem; gap:.5rem; padding:.85rem .25rem; border-top:1px solid #302d2b; font-size:.8rem; }.cue-list li.current { color:#ffaf55; background:#27170e; }.cue-list em { color:#aaa; font-style:normal; text-align:right; }.bottom-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem; }.bottom-grid article { padding:1rem; }.bottom-grid h3 { margin:.2rem 0 .7rem; font-size:1rem; }.bar { height:.45rem; background:#333; border-radius:99px; overflow:hidden; margin:.75rem 0; }.bar i { display:block; width:84%; height:100%; background:linear-gradient(90deg,var(--orange),var(--amber)); }.crew-console { width:min(100%,470px); margin:5rem auto; padding:1.6rem; text-align:center; border:1px solid #373737; border-radius:16px; background:#121212; }.crew-console h2 { font-size:1.7rem; margin:.4rem 0; }.crew-state { color:var(--orange); letter-spacing:.15em; }.crew-countdown { font-size:5rem; font-weight:900; color:var(--amber); margin:1.5rem 0; }.up-next,.crew-message { text-align:left; margin-top:1.3rem; padding:1rem; border:1px solid #363636; border-radius:10px; }.up-next p { border-top:1px solid #292929; padding-top:.8rem; }.up-next span { float:right; color:#aaa; }.crew-message b { color:var(--orange); }.acknowledged { background:linear-gradient(135deg,#48a653,#2f7b44) !important; }
@media (max-width:780px) { .production-shell { padding:1rem; }.production-header { gap:1rem; }.metric-grid,.command-grid,.bottom-grid { grid-template-columns:1fr; }.production-header .brand { font-size:1.1rem; }.production-header nav { order:3; flex-basis:100%; }.production-header { flex-wrap:wrap; }.stage-art { height:180px; } }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:1.5rem; background:radial-gradient(circle at 50% 15%,#4e1e08 0,transparent 35%),#090909; }.login-card { width:min(100%,420px); padding:2rem; border:1px solid #3a3029; border-radius:18px; background:linear-gradient(145deg,#181716,#0b0b0b); box-shadow:0 24px 70px #0008; }.login-card .brand { display:block; margin-bottom:3rem; }.login-card h1 { margin:.2rem 0 .5rem; }.login-card form { display:grid; gap:1rem; margin:1.8rem 0; }.login-card label { display:grid; gap:.45rem; color:#cbc6c2; font-size:.82rem; font-weight:700; }.login-card input,.staff-form input,.staff-form select { min-height:46px; border:1px solid #3b3b3b; border-radius:8px; padding:.7rem .8rem; color:#fff; background:#101010; outline-color:var(--orange); }.profile-chip { display:grid; gap:.12rem; min-width:100px; padding:.45rem .65rem; border:1px solid #4a382c; border-radius:8px; color:#fff; text-align:left; background:#191512; }.profile-chip small { color:var(--orange); text-transform:uppercase; font-size:.6rem; }.profile-panel { max-width:620px; margin:1.25rem 0; padding:1.2rem; border:1px solid #49301d; border-radius:12px; background:#15110e; }.panel-title { display:flex; align-items:start; justify-content:space-between; }.panel-title h3 { margin:.1rem 0 1.25rem; }.text-button { border:0; background:transparent; color:var(--orange); font-weight:800; }.staff-form { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:.6rem; }.staff-form .primary-button { width:auto; padding:.7rem .9rem; }.staff-list { display:grid; gap:.4rem; margin-top:.8rem; }.staff-list div { display:flex; justify-content:space-between; padding:.65rem 0; border-top:1px solid #332820; }.staff-list span { color:var(--muted); text-transform:capitalize; }
@media (max-width:780px) { .profile-chip { margin-left:auto; }.staff-form { grid-template-columns:1fr; } }
.show-actions { display:flex; gap:.6rem; align-items:center; margin:0 0 1rem; flex-wrap:wrap; }.show-actions button { width:auto; padding:.7rem 1rem; }.show-status { padding:.45rem .7rem; border:1px solid var(--orange); border-radius:99px; color:var(--orange); font-size:.7rem; font-weight:900; letter-spacing:.12em; }.secondary-button,.danger-button { border:1px solid #555; border-radius:9px; padding:.7rem 1rem; background:#1a1a1a; color:#fff; font-weight:800; letter-spacing:.06em; }.danger-button { border-color:#8b3431; color:#ff9b94; }.production-forms { display:grid; gap:.65rem; margin:0 0 1rem; }.production-forms form { display:flex; gap:.6rem; }.production-forms input { flex:1; min-height:42px; padding:.65rem .8rem; color:#fff; background:#101010; border:1px solid #3b3b3b; border-radius:8px; }.production-forms input[type="number"] { flex:0 0 90px; }.cue-list li.ready { color:#ffcf70; }.cue-list li.go { color:#80d990; background:#122116; }
@media (max-width:780px) { .production-forms form { flex-direction:column; }.production-forms input[type="number"] { flex:auto; } }