:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "PingFang SC", sans-serif; background:#0b0e14; color:#eef2ff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 80% 0,#1f2b55 0,transparent 32%),#0b0e14; }
main { width:min(1180px,calc(100% - 32px)); margin:0 auto; padding:44px 0 72px; }
header,.section-title,.row { display:flex; align-items:center; justify-content:space-between; gap:14px; }
h1 { margin:2px 0 24px; font-size:clamp(28px,4vw,46px); letter-spacing:-.04em; }
h2 { margin:0 0 18px; font-size:19px; }
.eyebrow { margin:0; color:#7c98ff; font-size:12px; letter-spacing:.17em; }
.badge { padding:8px 12px; border:1px solid #39425c; border-radius:999px; color:#aeb8d4; }
.badge.online { border-color:#2bd69b; color:#61edbc; }
.card { background:rgba(20,25,37,.92); border:1px solid #293147; border-radius:18px; padding:22px; box-shadow:0 24px 70px rgba(0,0,0,.22); }
.credentials { display:grid; grid-template-columns:1fr 1fr auto; gap:14px; margin-bottom:18px; align-items:end; }
.grid { display:grid; grid-template-columns:minmax(330px,.8fr) minmax(420px,1.2fr); gap:18px; }
label { display:grid; gap:7px; color:#aeb8d4; font-size:13px; }
input,textarea,select { width:100%; border:1px solid #38415a; border-radius:10px; padding:12px; background:#0e121c; color:#f5f7ff; outline:none; font:inherit; }
input:focus,textarea:focus,select:focus { border-color:#708dff; box-shadow:0 0 0 3px rgba(112,141,255,.15); }
input[type="range"] { padding:0; border:0; accent-color:#6c87f7; box-shadow:none; }
.volume-control { display:grid; gap:9px; padding:12px; border:1px solid #303950; border-radius:12px; background:#101521; }
.volume-control label { display:flex; justify-content:space-between; align-items:center; }
.volume-control output { color:#eef2ff; font-weight:700; }
.subsection { display:grid; gap:10px; padding:14px; border:1px solid #303950; border-radius:12px; background:#101521; }
.subsection h3 { margin:0; font-size:15px; color:#eef2ff; }
.hint { margin:0; color:#7f8aa7; font-size:12px; line-height:1.55; }
.schedule-control { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; padding:12px; border:1px solid #303950; border-radius:12px; background:#101521; }
.screen-event { padding:10px 12px; border:1px solid #2bd69b; border-radius:10px; color:#61edbc; background:rgba(43,214,155,.08); }
button { border:0; border-radius:10px; padding:12px 16px; background:#6c87f7; color:white; font-weight:700; cursor:pointer; }
button:hover { background:#8098fa; }
button:disabled { opacity:.55; cursor:wait; }
button.secondary { background:#30394f; }
.controls { display:grid; gap:13px; align-content:start; }
.controls h2 { margin-bottom:2px; }
.row button { flex:1; }
.stage { aspect-ratio:16/10; display:grid; place-items:center; overflow:hidden; border-radius:12px; background:#07090e; color:#6f7891; }
.stage img { width:100%; height:100%; object-fit:contain; display:none; }
.screen-title { margin-top:20px; }
.screen-stage { aspect-ratio:16/9; }
.section-title span,#frameTime { color:#7f8aa7; font-size:12px; }
.status-card { margin-top:18px; }
.voice-card { margin-top:18px; }
.voice-list { display:grid; gap:10px; }
.voice-item { display:grid; gap:8px; padding:12px; border-radius:10px; background:#101521; }
.voice-item audio { width:100%; }
#status { display:grid; gap:8px; }
.device-line { display:grid; grid-template-columns:1fr auto; gap:12px; padding:12px; border-radius:10px; background:#101521; }
.muted { color:#8590aa; font-size:13px; }
.ok { color:#50e3ae; }.warn { color:#ffcc72; }.error { color:#ff7d91; }
@media (max-width:800px) { .credentials,.grid { grid-template-columns:1fr; } header { align-items:flex-start; } .badge { margin-top:10px; } }