:root { --ink:#0b1828; --cream:#f4f1ea; --paper:#fffdf8; --gold:#d6a94a; --blue:#1976d2; --line:#d9d5cb; --muted:#6d7480; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--cream); }
button, input { font:inherit; }
button, .upload-button { cursor:pointer; }
.hidden { display:none !important; }
.eyebrow { font-size:.72rem; letter-spacing:.2em; font-weight:800; color:var(--gold); }
.primary-button { border:0; border-radius:999px; padding:1rem 1.7rem; background:var(--gold); color:#101923; font-weight:800; box-shadow:0 8px 30px #0004; }

.player-page { overflow:hidden; background:#050a11; color:white; }
.stage { position:relative; width:100vw; height:100vh; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 35%, #17304b, #07101b 58%, #03070c); }
.stage::before { content:""; position:absolute; inset:0; opacity:.08; background-image:linear-gradient(90deg, transparent 49.8%, #fff 50%, transparent 50.2%),linear-gradient(transparent 49.8%, #fff 50%, transparent 50.2%); background-size:80px 80px; }
.stage video { width:100%; height:100%; object-fit:contain; background:#000; position:relative; z-index:1; }
.overlay { position:relative; z-index:2; text-align:center; max-width:720px; padding:3rem; }
.start-panel h1 { font-family:Georgia, serif; font-size:clamp(2.6rem, 6vw, 5.5rem); line-height:.95; margin:.45em 0 .25em; font-weight:500; }
.start-panel p { color:#bdc8d5; font-size:clamp(1rem, 2vw, 1.25rem); margin:0 auto 2rem; max-width:560px; }
.start-panel small { display:block; color:#8592a1; margin-top:1rem; }
.message-panel .status-dot { width:12px; height:12px; border-radius:50%; background:var(--gold); box-shadow:0 0 25px var(--gold); margin:0 auto 1.5rem; }
.message-panel h2 { font-family:Georgia, serif; font-size:clamp(2.4rem, 5.5vw, 5rem); font-weight:400; line-height:1; margin:.35em 0 .3em; }
.message-panel p { color:#b9c5d3; font-size:1.15rem; }
.clock { margin-top:2rem; font-variant-numeric:tabular-nums; font-size:1.4rem; letter-spacing:.12em; }
.live-badge { position:absolute; z-index:3; top:24px; left:24px; display:flex; gap:.65rem; align-items:center; padding:.65rem .9rem; border-radius:99px; background:#07101bcc; backdrop-filter:blur(8px); font-size:.72rem; letter-spacing:.12em; }
.live-badge span { width:8px; height:8px; background:#ef4f4f; border-radius:50%; box-shadow:0 0 10px #ef4f4f; }

.dashboard-page { background:var(--cream); }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:1.5rem; background:radial-gradient(circle at top, #203b58, #08111d 65%); }
.login-card { width:min(430px,100%); background:var(--paper); border-radius:24px; padding:2.4rem; box-shadow:0 30px 80px #0007; }
.brand-mark { width:52px; height:52px; display:grid; place-items:center; background:var(--ink); color:var(--gold); border-radius:14px; font-family:Georgia,serif; font-size:1.4rem; margin-bottom:1.8rem; }
.login-card h1 { font-family:Georgia,serif; font-size:2.25rem; font-weight:500; margin:.3rem 0 1.5rem; }
.login-card label { display:grid; gap:.5rem; font-weight:700; font-size:.85rem; }
.login-card input { border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem; background:white; }
.login-card .primary-button { width:100%; margin-top:1rem; box-shadow:none; }
.form-error { min-height:1.2rem; color:#b52d2d; font-size:.85rem; }
.dashboard { max-width:1280px; margin:auto; padding:2.5rem 2rem 5rem; }
.dashboard-header { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; padding-bottom:2rem; border-bottom:1px solid var(--line); }
.dashboard-header h1 { font-family:Georgia,serif; font-size:clamp(2rem,4vw,3.5rem); font-weight:500; margin:.2rem 0 0; }
.header-actions { display:flex; gap:.6rem; }
.ghost-button { border:1px solid var(--line); color:var(--ink); background:transparent; border-radius:99px; padding:.7rem 1rem; text-decoration:none; white-space:nowrap; }
.schedule-banner { margin:2rem 0; border-radius:18px; background:var(--ink); color:white; padding:1.4rem 2rem; display:flex; align-items:center; justify-content:center; gap:2rem; box-shadow:0 14px 34px #0b182820; }
.schedule-banner > div:not(.break-line) { display:grid; gap:.15rem; text-align:center; }
.schedule-banner span,.schedule-banner small { color:#aeb9c7; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; }
.schedule-banner strong { font-family:Georgia,serif; font-size:1.7rem; font-weight:500; }
.break-line { display:flex; align-items:center; gap:.8rem; color:var(--gold); font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; }
.break-line span { display:block; width:35px; height:1px; background:#ffffff33; }
.day-selector { display:flex; align-items:end; justify-content:space-between; gap:1.5rem; margin:2.5rem 0 1rem; }
.day-selector h2 { font-family:Georgia,serif; font-size:1.7rem; font-weight:500; margin:.25rem 0 0; }
.segmented { display:flex; padding:.3rem; background:#e6e1d7; border-radius:99px; }
.segmented button { border:0; background:transparent; border-radius:99px; padding:.65rem 1rem; font-weight:700; color:#656b74; }
.segmented button.active { background:var(--ink); color:white; }
.days-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.day-card { background:#ebe7df; border:1px solid transparent; border-radius:20px; padding:1.1rem; opacity:.78; transition:.2s; }
.day-card.active-day { background:var(--paper); border-color:var(--gold); opacity:1; box-shadow:0 14px 35px #0b182812; }
.day-card > header { min-height:52px; display:flex; align-items:center; justify-content:space-between; padding:.25rem .3rem 1rem; }
.day-card > header div { display:flex; align-items:baseline; gap:.4rem; }
.day-card > header span { font-size:.65rem; letter-spacing:.15em; }
.day-card > header strong { font-family:Georgia,serif; font-size:2rem; }
.on-air { border-radius:99px; padding:.4rem .65rem; color:#176941; background:#dff3e8; font-size:.62rem; letter-spacing:.1em; }
.session-card { background:white; border:1px solid #e3dfd7; border-radius:15px; padding:1rem; margin-top:.75rem; }
.session-top { display:flex; justify-content:space-between; gap:1rem; }
.session-top > div { display:grid; }
.session-top span { font-weight:800; }
.session-top small,.file-state small { color:var(--muted); margin-top:.2rem; }
.switch input { position:absolute; opacity:0; }
.switch i { display:block; width:42px; height:24px; border-radius:99px; background:#c9c9c7; position:relative; transition:.2s; }
.switch i::after { content:""; width:18px; height:18px; border-radius:50%; background:white; position:absolute; top:3px; left:3px; box-shadow:0 1px 4px #0004; transition:.2s; }
.switch input:checked + i { background:#2b8a61; }
.switch input:checked + i::after { transform:translateX(18px); }
.switch input:disabled + i { opacity:.4; }
.file-state { display:flex; gap:.7rem; align-items:center; min-height:70px; margin:1rem 0; padding:.75rem; background:#f6f4ef; border-radius:11px; overflow:hidden; }
.file-icon { flex:0 0 38px; height:38px; display:grid; place-items:center; border:1px dashed #aaa; border-radius:9px; color:#8a8f96; }
.has-file .file-icon { border:0; background:var(--ink); color:var(--gold); }
.file-state > div:last-child { min-width:0; display:grid; }
.file-state strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.85rem; }
.file-state small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.68rem; }
.session-actions { display:flex; gap:.6rem; }
.upload-button,.delete-button { flex:1; text-align:center; border-radius:9px; padding:.65rem; font-weight:750; font-size:.75rem; }
.upload-button { background:var(--ink); color:white; }
.upload-button input { display:none; }
.delete-button { border:1px solid #e4c6c2; color:#a13e35; background:#fff7f5; }
.progress { height:24px; margin-top:.8rem; border-radius:99px; background:#e7e3da; overflow:hidden; position:relative; }
.progress span { display:block; height:100%; width:0; background:var(--gold); transition:.15s; }
.progress b { position:absolute; inset:0; display:grid; place-items:center; font-size:.68rem; }
.toast { position:fixed; right:24px; bottom:24px; padding:.9rem 1.2rem; background:#176941; color:white; border-radius:12px; box-shadow:0 10px 30px #0003; }
.toast-error { background:#a13e35; }
@media (max-width:900px) { .days-grid{grid-template-columns:1fr}.day-card{opacity:1}.schedule-banner{gap:1rem}.dashboard-header{align-items:flex-start;flex-direction:column}.day-selector{align-items:flex-start;flex-direction:column} }
@media (max-width:560px) { .dashboard{padding:1.5rem 1rem 4rem}.schedule-banner{padding:1rem;flex-direction:column}.break-line{width:100%}.break-line span{flex:1}.header-actions{width:100%}.header-actions>*{flex:1;text-align:center}.overlay{padding:1.5rem} }