/* Shared light/dark palette and language-aware responsive layout. */
html{color-scheme:dark}html[data-theme="light"]{color-scheme:light;--bg:#F3F6FA;--bg-2:#EDF2F7;--panel:#FFFFFF;--panel-2:#E5EDF5;--line:#D2DCE8;--line-2:#B7C7D8;--ink:#182C40;--ink-2:#415B74;--mute:#526B82;--live:#087D58;--live-2:#096849;--live-dim:rgba(8,125,88,.10);--cyan:#215FBE;--warn:#936009;--bad:#BD3439;--a:#A43D6B;--b:#245EAC;--c:#875313}
.prefs{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:auto}.prefs button{box-sizing:border-box;width:auto;min-height:34px;margin:0;padding:6px 12px;border:1px solid var(--line-2,#40546B);border-radius:6px;background:var(--panel,#0F151D);color:var(--ink,#E9F0F6);font:500 12px/1.4 system-ui,sans-serif;letter-spacing:0;white-space:nowrap;cursor:pointer}.prefs button:hover{border-color:var(--cyan,#5DD4FF);background:var(--panel-2,#131B25)}.prefs button:focus-visible{outline:2px solid var(--cyan,#5DD4FF);outline-offset:3px}.prefs-standalone{align-self:flex-end;justify-self:end;margin:0 0 18px;position:relative;z-index:2}body:has(#login){position:relative;padding-top:86px}body:has(#login)>.prefs{position:absolute;right:24px;top:22px}
html[data-theme="light"] body{background-color:var(--bg);color:var(--ink);background-image:none}html[data-theme="light"] .topbar{background:rgba(248,251,255,.96)}html[data-theme="light"] .wm,html[data-theme="light"] .wm b{text-shadow:none}html[data-theme="light"] :is(.gate,.toast,main){background:var(--panel);border-color:var(--line);color:var(--ink)}html[data-theme="light"] :is(input:not([type=range]):not([type=checkbox]),select,textarea,code,pre,.toast .ssid){background:var(--bg);color:var(--ink);border-color:var(--line-2)}html[data-theme="light"] :is(.toast .td,main p){color:var(--ink-2)}html[data-theme="light"] :is(.back-login,a){color:var(--cyan)}html[data-theme="light"] .meter{background:var(--panel-2)}html[data-theme="light"] button.big:disabled{background:var(--panel-2);color:var(--mute)}html[data-theme="light"] :is(#wake-retry,#resume-audio){color:var(--ink);background:var(--panel-2);border:1px solid var(--line-2)}html[data-theme="light"] .demo{background:var(--panel)}
html[lang=en] .app{grid-template-columns:228px minmax(0,1fr)}html[lang=en] .nav button{font-size:12px;line-height:1.45;gap:11px}html[lang=en] .btn{letter-spacing:.01em;text-transform:none}html[lang=en] .vh{letter-spacing:.015em}html[lang=en] .vh .zh{display:none}html[lang=en] .seg button[data-ch="A"][disabled]::after{content:" · hardware"}html[lang=en] .nd{height:auto;min-height:78px;flex-basis:182px;width:182px}html[lang=en] .nd :is(b,em){white-space:normal;height:auto;overflow:visible}html[lang=en] .big{font-size:clamp(24px,3vw,40px);line-height:1.15}
.nav button{min-width:0}.nav .k{flex-shrink:0}.btn{flex-shrink:0;max-width:100%;text-align:center}.btn::before{flex-shrink:0}.row,.event-editor{flex-wrap:wrap}.seg{max-width:100%;flex-wrap:wrap}.seg button{flex:1 1 auto;text-align:center}.view,.panel,.wiz,.kv dd{min-width:0}.g2,.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}.vh{line-height:1.3}.kv dd{overflow-wrap:anywhere}select{max-width:100%}.wiz .cmd{min-width:0}.wiz .cmd pre{min-width:0}#hls-note:not([hidden]){display:block;color:var(--mute)!important}.gate span{min-width:0}.line{flex-wrap:wrap}#wake-retry{padding:8px 12px;border-radius:6px}body:has(#login) main{max-width:430px}
@media(max-width:820px){html[lang=en] .app{grid-template-columns:minmax(0,1fr)}.rail{min-width:0}.nav{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.nav button{padding:9px 7px}.nav .k{display:none}.topbar{gap:10px;padding:10px 12px}.topbar .event-editor{order:2}.topbar .prefs{margin-left:auto}.view{padding:18px 12px 30px}.btn.xl{padding:12px 16px}.wiz .cmd{flex-wrap:wrap}.wiz .cmd pre{flex-basis:100%}table{font-size:12px}.vh .zh{display:block;margin-left:0}}
@media(max-width:480px){.nav{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar .stat{font-size:10px;gap:4px}.topbar .clock{display:none}.panel{padding:12px}.event-editor label{flex-basis:100%}.topbar .event-editor input{width:100px}.prefs button{min-height:36px}.kv{column-gap:8px}.big{overflow-wrap:anywhere}.btn{padding:8px 10px}.btn.xl{font-size:14px}.vh{font-size:23px}}

html[data-theme="light"] .phone .scr{background:var(--bg);color:var(--ink)}html[data-theme="light"] .phone{background:var(--panel);box-shadow:0 0 0 5px var(--line),0 12px 35px #17375118}#listen-mode,#wake-retry{font:500 13px/1.4 system-ui,sans-serif;min-height:36px;padding:8px 12px;background:var(--panel,#131B25);color:var(--ink);border:1px solid var(--line);border-radius:6px}#listen-mode{margin-left:8px}#wake-retry:focus-visible,#listen-mode:focus-visible{outline:2px solid var(--cyan,#5DD4FF);outline-offset:3px}
.row>div{min-width:0;max-width:100%}input{max-width:100%}.twrap{max-width:100%;overflow-x:auto}
.chk li{grid-template-columns:auto minmax(0,1fr) auto}.chk .t,.chk .d{overflow-wrap:anywhere}

[hidden]{display:none!important}

/* Desktop status bar: reserve one row, let the event field take the remaining width. */
@media(min-width:1100px){
 .topbar{flex-wrap:nowrap;gap:10px;padding:10px 16px}
 .topbar>.stat{flex:0 0 auto;white-space:nowrap;font-size:10.5px;gap:5px}
 .topbar .event-editor{position:relative;flex:1 1 200px;min-width:120px;margin-left:auto;flex-wrap:nowrap;gap:6px}
 .topbar .event-editor label{white-space:nowrap;font-size:10px}
 .topbar .event-editor input{flex:1 1 130px;width:130px;min-width:50px;max-width:180px}
 .topbar .event-editor .btn{flex:0 0 auto;padding:0 8px;font-size:11px}
 .topbar .event-feedback{position:absolute;top:calc(100% + 10px);right:0;max-width:min(400px,80vw);padding:5px 9px;background:var(--panel);border:1px solid var(--line);border-radius:4px;box-shadow:0 4px 12px #0002;font-size:11px;z-index:2}
 .topbar .event-feedback:empty{display:none}
 .topbar .clock{flex:0 0 auto;font-size:14px;letter-spacing:0}
 .topbar .prefs{margin-left:0;gap:5px}.topbar .prefs button{padding:5px 8px;min-height:30px;font-size:11px}
 .topbar #admin-logout{white-space:nowrap;font-size:11px}
}
@media(min-width:1100px) and (max-width:1279px){.topbar{gap:6px;padding-inline:10px}.topbar .stat{font-size:9px;gap:4px}.topbar .event-editor label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.topbar .event-editor{min-width:110px;flex-basis:130px}.topbar .prefs button{padding-inline:6px}.topbar .clock{font-size:12px}}

/* Anchor transient feedback to the input, not the flexible form's far edge. */
.topbar .event-input-wrap{position:relative;flex:1 1 140px;min-width:0;width:200px;max-width:100%}
.topbar .event-input-wrap #event-name{display:block;width:100%;max-width:none;min-width:0}
.topbar .event-input-wrap .event-feedback{position:absolute;top:calc(100% + 7px);left:0;right:auto;width:max-content;max-width:min(320px,100%);padding:7px 10px;margin:0;background:var(--panel);color:var(--ink-2);border:1px solid var(--line-2);border-radius:6px;box-shadow:0 5px 18px #0003;font-size:11px;line-height:1.5;overflow-wrap:anywhere;z-index:60;pointer-events:none}
@media(min-width:1100px){.topbar .event-input-wrap{flex:1 1 130px;width:130px;min-width:50px;max-width:180px}}

.event-qr-card{display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 0 220px;max-width:100%}.event-qr-card #qr-real{width:220px;height:auto;border:0;border-radius:8px;image-rendering:auto;box-shadow:0 3px 16px #0002}.event-qr-card .text-link{font-size:11px}

/* Token reference: generous API rules column, compact explanatory sidebar. */
#v-token .token-reference{grid-template-columns:minmax(260px,.8fr) minmax(0,1.7fr);gap:16px;align-items:start}
.token-reference>.panel{padding:18px}.token-reference>.panel:first-child .kv{grid-template-columns:minmax(0,1fr);gap:3px;margin:0 0 16px}.token-reference>.panel:first-child .kv dt{margin-top:9px}.token-reference>.panel:first-child .kv dd{margin:0;line-height:1.6}
.token-reference .api-contract{table-layout:fixed;min-width:580px;font-size:12px;line-height:1.5}
.api-contract .api-endpoint{width:26%}.api-contract .api-in{width:17%}.api-contract .api-out{width:23%}.api-contract .api-rule{width:34%}
.token-reference .api-contract th{padding:8px 8px 11px}.token-reference .api-contract td{padding:11px 8px;overflow-wrap:break-word}
.token-reference .api-contract code{padding:0;border:0;background:transparent;font-size:10.5px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.token-reference .api-contract tbody tr:hover{background:var(--live-dim)}
.token-reference pre.code{white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;font-size:10.5px;line-height:1.6}
@media(max-width:1279px){#v-token .token-reference{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.token-reference>.panel{padding:12px}.token-reference .api-contract{min-width:560px}}

/* Listener always presents both languages, independent of admin preference. */
html[data-language-mode="bilingual"] #language-toggle:disabled{opacity:1;cursor:default;color:var(--mute)}
html[data-language-mode="bilingual"] .big{font-size:26px;letter-spacing:.02em;line-height:1.3;text-align:center}
html[data-language-mode="bilingual"] .gate small{line-height:1.6}
html[data-language-mode="bilingual"] #listen-mode{display:block;margin:6px 0 0;width:100%}
html[data-language-mode="bilingual"] .st{line-height:1.5}html[data-language-mode="bilingual"] .dot{flex-shrink:0}

.phone:has(.listener-preview){width:380px;padding:8px;overflow:hidden}.listener-preview{display:block;width:100%;height:660px;border:0;border-radius:18px;background:var(--bg)}