/* Light control surface; dark preview monitors show the true overlay contrast. */
:root{color-scheme:light;--bg:#f4f6fa;--surface:#ffffff;--line:#e2e7ee;--text:#202b3c;--muted:#647186;--accent:#f57147;--green:#198a68}
.topbar{background:#fff;height:78px;border-bottom-color:#e5eaf0}
.brand strong{color:#253047}.brand strong span{color:#768294}.brand-icon{background:#f57147;color:#fff}
.local-badge{color:#5f7385;background:#f0f5f8;border:1px solid #e1e9f0;border-radius:5px;padding:7px 10px;font-size:10px}
main{padding-top:34px}.eyebrow{color:#8792a2;font-size:11px;letter-spacing:.14em}
h1{font-weight:680;color:#1c2a40;font-size:clamp(1.9rem,2.8vw,2.7rem)}
.page-heading{margin-bottom:29px}.status-pill{background:#fff;border-color:#e0e5ec;color:#596779;padding:11px 15px;box-shadow:0 2px 4px #202e4403}
.status-pill[data-state=listening]{background:#eefaf5;border-color:#ccebdd;color:#196c51}
.status-pill[data-state=listening] span{background:#22966f}.status-pill[data-state=error]{background:#fff2f2;border-color:#f4d2d7;color:#ae3346}
.card{box-shadow:0 4px 18px #21345404;border-color:#e1e7ee;border-radius:14px}
.section-heading{margin-bottom:25px}h2{font-weight:650;color:#26354a;font-size:.98rem}.step{color:#da5a34;background:#fff1eb;border-color:#ffe3d7}
.source-card label,.style-card label,.login-card label{color:#4b5a70}
select,input[type=password]{background:#f9fafc;color:#2f405a;border-color:#dce3ed}
.field-note{color:#8190a3}.primary{color:white;background:#f57147;box-shadow:0 3px 7px #f571471a}
.primary:hover{background:#e7633c}.stop{background:#fff7f4;border-color:#eeddd5;color:#b96549}.secondary{background:white;border-color:#dce3ec;color:#344760;box-shadow:0 1px 3px #202b3c04}.secondary:hover{background:#f4f7fb;border-color:#bdcada}
.text-button{color:#66768c}.text-button:hover{color:#df6741;background:#fff3ed}.small-heading{color:#7d8b9e;font-size:10px}.audio-meter{background:#edf1f5}.audio-meter div{background:linear-gradient(90deg,#43ab94,#72c094 70%,#e5b958 90%,#ef794d)}
.meter-labels{color:#99a4b2}.connection-message{color:#6e7f92}.session-info{color:#8290a3}.session-info strong{color:#374c67}.mini-label{color:#95a1b1;font-size:9px;letter-spacing:.06em}
.preview-card{background:#fff}.preview-stage{padding:30px 0;min-height:295px}
.preview-window{background-color:#172331;border-color:#253849;box-shadow:0 7px 16px #172d4917;background-image:linear-gradient(45deg,#ffffff02 25%,transparent 25%),linear-gradient(-45deg,#ffffff02 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ffffff02 75%),linear-gradient(-45deg,transparent 75%,#ffffff02 75%)}
.frame-tag{color:#d5dfed}.frame-tag span{color:#8191a6}.empty-hint{color:#9bacc1}.empty-hint small{color:#71869f}.cc-outline{border-color:#49617b;color:#b1c2d8}.portrait-label{color:#8296b0}
.preview-toolbar>span{color:#8392a6}.preview-toolbar .text-button{color:#617790}.metrics-row span{color:#7c8ba0;font-size:12px}.metrics-row strong{color:#223957;font-weight:520;font-size:32px}.metrics-row strong small{color:#9aabba}.timing-note{color:#8a97a8;font-size:11px}
.theme-picker legend{color:#4b5a70}.style-card .theme-option{border-color:#e4e9ef;background:#fff;padding:10px;color:#65758a;font-size:11px;gap:9px}
.theme-option:has(input:checked){background:#fff7f1;border-color:#f3b59c;color:#713d29}.theme-sample{min-width:76px;min-height:25px;text-align:center;background:#233344;color:white;font-size:10px;padding:6px 4px}.sample-shadow{background:#d9e0e7;text-shadow:0 1px 3px #304253}.sample-broadcast{background:#233344;color:white;border-left:3px solid #f57147}
.color-control input{border-color:#d6dfe9;background:#f5f7fa}.range-heading output{color:#91a0b1}.range-heading{color:#66788e!important}input[type=range]{accent-color:#f57147}
.saved-feedback{color:#8c9cac}.output-card{border-color:#dce4ee;background:linear-gradient(115deg,#fff 0%,#fff 58%,#fafcff 100%)}
.output-intro p{color:#8a98aa}.output-item strong{color:#354d6b}.output-item strong span{color:#98a7b9}.output-item small{color:#8f9caf}
footer{color:#9aa6b5}footer b{color:#71839a}.version{background:#eaf0f6;border-color:#e0e7f0;color:#8a9bb0}
.notification{background:#fff8ed;border-color:#ecd8af;color:#8b652d}
.login-screen{background:radial-gradient(ellipse at 15% 10%,#fff3eb 0,transparent 48%),radial-gradient(ellipse at 90% 90%,#e9f0fd 0,transparent 50%),#f6f8fc}
.login-card{background:white;border-color:#e0e6ef;box-shadow:0 20px 80px #33476012;padding:38px}.login-card h1{font-size:30px}.login-card>p{color:#7d8ba0}.login-card small{color:#91a0b3}
.error-text{color:#bb4457!important}
/* Native selects need room for descenders, including with Windows text scaling. */
body{line-height:1.5}
select{height:auto;min-height:3.15rem;line-height:1.5;padding:.7rem .9rem;font-size:.9375rem}
input[type=password]{height:auto;min-height:3.15rem;line-height:1.5;padding:.7rem .9rem}
button{line-height:1.5}.button{min-height:2.85rem}
.source-card label,.style-card label,.login-card label{line-height:1.5}
.theme-sample{line-height:1.5;min-height:1.8rem;height:auto}
.status-pill,.text-button,.saved-feedback,.field-note{line-height:1.5}
.style-card .theme-option{font-size:13px}.range-heading{font-size:14px!important}.range-heading output{font-size:13px}.metrics-row span{font-size:13px}.output-item strong{font-size:14px}.output-item .button{font-size:14px}.output-intro p,.output-item small{font-size:12px}
@media(max-width:740px){.topbar{height:68px}.page-heading{gap:8px}.status-pill{font-size:10px;padding:8px}.preview-stage{min-height:240px}.metrics-row strong{font-size:29px}.mini-label{font-size:8px}.style-card .theme-option{font-size:13px;padding:12px}.theme-sample{font-size:12px;min-width:98px}.field-note,.timing-note{font-size:12px}}