/* Theme tokens: all palette, typography and spacing live here. */
:root{
 --primary-header-bg:#e6f1fc;--device-header-bg:#f1f3f5;
 color-scheme:light;--font:Arial,"Segoe UI",sans-serif;--text:#234439;--muted:#65796f;--bg:#f4f6f3;--surface:#fff;--soft:#edf2ec;--border:#d9e2d8;--accent:#245b49;--on-accent:#fff;--danger:#a04d3e;--focus:#cf873d;--backdrop:#102a2299;
 --room-0:#edf7fc;--room-1:#eff8ed;--room-2:#fff9df;--room-3:#fff0e5;--room-4:#e8f8f4;--room-5:#f2effb;--room-6:#f5f8e5;--room-7:#eaf1fc;--room-8:#fcf0e8;--room-9:#e9f6f8;--room-10:#f8f3e6;--room-11:#eef5ee;
 --light-bg:#fff2b8;--light-text:#80651b;--heat-bg:#ffe5cb;--heat-text:#945a28;--cover-bg:#e9ecef;--cover-text:#59636b;--fan-bg:#dff3ee;--fan-text:#346e60;--other-bg:#e2eff9;--other-text:#496477;--sensor-bg:#eee7f8;--sensor-text:#6c5488;
 --font-xs:11px;--font-sm:12px;--font-base:13px;--font-card:17px;--font-title:20px;--font-brand:25px;
 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--radius:12px;--radius-sm:8px;--pill:999px;--header-height:80px;--content-width:1250px;--control-size:40px;--toolbar-height:44px;--icon-size:21px;--stroke:1.4;--shadow:0 4px 18px #173c380d;
}
:root[data-theme=dark]{
 --primary-header-bg:#293f55;--device-header-bg:#303735;
 color-scheme:dark;--text:#e1eae5;--muted:#a5b6ad;--bg:#131b18;--surface:#1c2722;--soft:#29382f;--border:#3a4c41;--accent:#a0d1b5;--on-accent:#172a20;--danger:#e5a394;--focus:#efb76f;--backdrop:#000a;--shadow:0 4px 18px #0003;
 --room-0:#263f4b;--room-1:#2e422a;--room-2:#494329;--room-3:#49362a;--room-4:#25443c;--room-5:#3a334c;--room-6:#3d432b;--room-7:#2b394b;--room-8:#47342e;--room-9:#294148;--room-10:#443d30;--room-11:#304135;
 --light-bg:#4b4121;--light-text:#f3d887;--heat-bg:#4b3325;--heat-text:#f6bf8f;--cover-bg:#374047;--cover-text:#d2dbe0;--fan-bg:#25453a;--fan-text:#ace0ce;--other-bg:#2b3e4e;--other-text:#b8d9f2;--sensor-bg:#40334e;--sensor-text:#dbc2f5;
}
*{box-sizing:border-box}[hidden]{display:none!important}:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;font:var(--font-base) var(--font);color:var(--text);background:var(--bg)}
h1,h2,h3{line-height:1.4}h1{font-size:var(--font-brand);margin:0}h2{font-size:var(--font-title);margin:var(--s3) 0 var(--s5)}h3{font-size:var(--font-card);margin:var(--s3) 0 var(--s2)}p{color:var(--muted);line-height:1.7}.dot{color:var(--focus)}
button,input,select,textarea{font:inherit}button{border:1px solid transparent;background:var(--accent);color:var(--on-accent);border-radius:var(--radius-sm);padding:var(--s2) var(--s4);cursor:pointer}button:hover{filter:brightness(.95)}button:disabled{opacity:.5;cursor:wait}button.secondary{background:var(--soft);color:var(--text)}
input,select,textarea{width:100%;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:var(--radius-sm);padding:var(--s3)}input[type=checkbox]{width:auto;accent-color:var(--accent)}label{display:block;margin:var(--s3) 0;line-height:1.8}textarea{min-height:86px;resize:vertical}
.app-header{height:var(--header-height);min-height:var(--header-height);display:flex;align-items:center;gap:var(--s5);padding:0 var(--s8);background:var(--surface);border-bottom:1px solid var(--border)}.app-header nav{display:flex;gap:var(--s2);align-items:center}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--control-size);height:var(--control-size);padding:var(--s2);background:transparent;color:var(--muted)}.icon-button:hover{background:var(--soft)}.icon-button.selected{background:var(--accent);color:var(--on-accent)}#test-indicator{margin-inline-start:auto}#settings-nav{margin-inline-start:0}#test-indicator[hidden]+#settings-nav{margin-inline-start:auto}#logout{margin-inline-start:0}
svg{width:var(--icon-size);height:var(--icon-size);fill:none;stroke:currentColor;stroke-width:var(--stroke);stroke-linecap:round;stroke-linejoin:round}
main{width:100%;max-width:var(--content-width);margin:0 auto;flex:1;padding:var(--s6) var(--s8)}footer{text-align:center;border-top:1px solid var(--border);padding:var(--s4) var(--s6);color:var(--muted);font-size:var(--font-xs)}
.panel,.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s5)}.login{max-width:520px;margin:var(--s8) auto}.login button{width:100%;margin:var(--s2) 0}.hint{font-size:var(--font-sm)}#settings-tab .panel{max-width:650px;margin-bottom:var(--s4)}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin:var(--s3) 0 var(--s5)}.section-heading h2{margin:0}.section-heading input{max-width:290px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}.card{min-width:0}.editable-card{cursor:pointer}.editable-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}#devices>.card{display:flex;flex-direction:column}.device-heading{width:100%;text-align:start}.device-meta{display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}.device-heading h3{margin-bottom:0}
.badge,.room,#test-indicator{font-size:var(--font-xs);padding:var(--s1) var(--s2);border-radius:var(--pill)}.badge{background:var(--other-bg);color:var(--other-text)}.room{background:var(--room-color,var(--soft));color:var(--text)}#test-indicator{background:var(--light-bg);color:var(--light-text)}
[data-type=light] .badge{background:var(--light-bg);color:var(--light-text)}[data-type=heater] .badge,[data-type=boiler] .badge{background:var(--heat-bg);color:var(--heat-text)}[data-type=cover] .badge{background:var(--cover-bg);color:var(--cover-text)}[data-type=fan] .badge{background:var(--fan-bg);color:var(--fan-text)}[data-type=sensor] .badge{background:var(--sensor-bg);color:var(--sensor-text)}
.card p{font-size:var(--font-sm);min-height:40px;overflow-wrap:anywhere}.card small{display:block;color:var(--muted);font-size:var(--font-xs);overflow-wrap:anywhere;margin:var(--s3) 0}.card button{margin:var(--s1) 0 0 var(--s1)}.card details{border-top:1px solid var(--border);margin-top:var(--s4);padding-top:var(--s3)}
.room-filters{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s6)}.room-tag{background:var(--room-color,var(--surface));color:var(--text);border:1px solid var(--border);border-radius:var(--pill);padding:var(--s2) var(--s4);font-size:var(--font-sm)}.room-tag[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);font-weight:700}
.device-controls{margin-top:auto;padding-top:var(--s4)}.control-label{font-size:var(--font-sm);color:var(--muted)}.duration-options{display:flex;gap:var(--s2);margin:var(--s2) 0 var(--s3)}.duration-options button{flex:1;margin:0;padding:var(--s2) var(--s1)}.duration-options button[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}.movement-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s1)}.card .card-icon-button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-size);background:transparent;color:var(--muted);padding:var(--s2);margin:0}.movement-buttons .card-icon-button{width:100%;min-width:0}.card-icon-button:hover{background:var(--soft)}.card .stop-button{color:var(--danger)}.card .reverse-button[aria-pressed=true]{background:var(--soft);color:var(--accent);border-color:var(--accent)}.reverse-button[aria-pressed=true] svg{stroke-width:2}.card .device-status{min-height:0;margin:var(--s3) 0 0;color:var(--accent)}
#notice{position:fixed;inset-block-start:calc(var(--header-height) + var(--s4));inset-inline-start:50%;transform:translateX(50%);z-index:1000;max-width:calc(100vw - var(--s8));padding:var(--s3) var(--s5);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);white-space:pre-wrap;color:var(--accent);pointer-events:none}#notice:empty{display:none}#notice.error{color:var(--danger)}.key-row,.audit-row{padding:var(--s4);border-bottom:1px solid var(--border);overflow-wrap:anywhere}.audit-row{background:var(--surface)}.audit-row small{color:var(--muted)}
dialog{border:1px solid var(--border);border-radius:var(--radius);width:min(650px,94vw);max-height:90vh;padding:var(--s6);background:var(--surface);color:var(--text)}dialog::backdrop{background:var(--backdrop)}.permission-list{background:var(--soft);padding:var(--s3);border-radius:var(--radius-sm)}.permission-row{display:grid;grid-template-columns:1fr 65px 65px;gap:var(--s2);align-items:center;border-bottom:1px solid var(--border);font-size:var(--font-sm)}.permission-row label{margin:var(--s2) 0}
@media(max-width:1000px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){:root{--control-size:34px;--font-brand:22px}.app-header{padding:0 var(--s3);gap:var(--s2)}.app-header nav{gap:0}main{padding:var(--s4) var(--s3)}.section-heading{align-items:stretch;flex-direction:column}.section-heading input{max-width:none}#test-indicator{padding:var(--s1)}}
@media(max-width:480px){.grid{grid-template-columns:1fr}}
.dialog-footer{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--s2);margin-top:0;padding-top:var(--s4);flex-shrink:0}
/* Dialogs and touch layouts share the theme tokens. */
#error-message{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text)}
#error-dialog{width:min(440px,calc(100vw - var(--s6)))}
.dialog-footer{background:var(--surface);padding-bottom:var(--s1)}
@media(max-width:650px){
 :root{--control-size:44px;--font-brand:20px;--header-gap:2px}
 .app-header{padding:0 var(--s2);gap:var(--header-gap)}
 .app-header nav{gap:0;min-width:0}
 .app-header .icon-button{width:36px;min-height:44px;padding:var(--s2)}
 #logout{flex-shrink:0}
 #test-indicator{font-size:var(--font-xs);padding:var(--s1);white-space:nowrap}
 .room-filters{gap:var(--s2)}
 .room-tag{min-height:44px;padding:var(--s2) var(--s3)}
 input,select,textarea{font-size:16px}
 .card .card-icon-button,.duration-options button,button{min-height:44px}
 .device-meta{flex-wrap:wrap}
 dialog{width:calc(100vw - var(--s6));max-height:calc(100dvh - var(--s6));padding:var(--s4)}
 .dialog-footer button{min-width:88px}
 .permission-row{grid-template-columns:minmax(0,1fr) 58px 58px;gap:var(--s1)}
 .permission-row>span{overflow-wrap:anywhere}
 .section-heading{gap:var(--s3)}
}
@media(max-width:360px){.app-header h1{display:none}}
.type-tag[data-type=light]{--room-color:var(--light-bg)}
.type-tag[data-type=heater],.type-tag[data-type=boiler]{--room-color:var(--heat-bg)}
.type-tag[data-type=cover]{--room-color:var(--cover-bg)}
.type-tag[data-type=fan]{--room-color:var(--fan-bg)}
.type-tag[data-type=appliance],.type-tag[data-type=climate]{--room-color:var(--other-bg)}
.type-tag[data-type=sensor]{--room-color:var(--sensor-bg)}
.filter-toolbar{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4)}
.filter-toolbar input{flex:1;min-width:0;height:var(--toolbar-height)}
.filter-toolbar button{flex-shrink:0;min-height:var(--toolbar-height)}
.filter-toolbar button[aria-expanded=true]{border-color:var(--accent)}
.filter-options{padding:var(--s3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.selected-filters{margin-bottom:var(--s3)}
/* Anchored filter popovers do not change the card layout. */
.filter-toolbar{position:relative}
.filter-dropdown{position:relative;flex-shrink:0}
.filter-dropdown .filter-options{position:absolute;z-index:20;top:calc(100% + var(--s2));inset-inline-end:0;width:min(340px,calc(100vw - var(--s8)));max-height:50dvh;overflow-y:auto;margin:0;box-shadow:var(--shadow);gap:var(--s2)}
.filter-dropdown .room-tag{font-size:var(--font-sm)}
@media(max-width:650px){.filter-dropdown{position:static}.filter-dropdown .filter-options{inset-inline-end:0;width:min(340px,100%)}}
.audit-button{display:block;width:100%;text-align:start;color:var(--text);border-radius:0}.audit-button small{display:block;margin-top:var(--s2)}#audit-detail{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--font-sm)}#chat-messages{display:grid;gap:var(--s3);margin-bottom:var(--s4)}.chat-user{padding:var(--s3);background:var(--soft);border-radius:var(--radius)}
/* Header content shares the card area's centered width and gutters. */
.app-header{padding:0;display:block}
.header-inner{width:100%;max-width:var(--content-width);height:100%;margin-inline:auto;padding-inline:var(--s8);display:flex;align-items:center;gap:var(--s5)}
@media(max-width:650px){.header-inner{padding-inline:var(--s3);gap:var(--header-gap)}}
:root{--font-mono:Consolas,"Cascadia Code","Courier New",monospace;--log-even:var(--surface);--log-odd:var(--soft)}
#audit{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}
.terminal-table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:var(--font-sm);text-align:start}
.terminal-table th,.terminal-table td{padding:var(--s2) var(--s3);text-align:start;border-bottom:1px solid var(--border)}
.terminal-table th{background:var(--soft);color:var(--muted)}
.terminal-table tbody tr:nth-child(odd){background:var(--log-odd)}
.terminal-table tbody tr:nth-child(even){background:var(--log-even)}
.terminal-table tbody tr{cursor:pointer}.terminal-table tbody tr:hover{outline:1px solid var(--accent);outline-offset:-1px}
.terminal-table td:first-child{white-space:nowrap;width:1%;direction:ltr;text-align:right;font-variant-numeric:tabular-nums}
.audit-action{font:inherit;background:transparent;color:var(--text);text-align:start;padding:0;min-height:32px;width:100%;border:0;white-space:normal;overflow-wrap:anywhere}
#audit-detail{font-family:var(--font-mono)}

/* Only modal content scrolls; heading and actions stay in place. */
html{scrollbar-gutter:stable}
html:has(dialog[open]){overflow:hidden}
dialog{max-height:calc(100dvh - var(--s8));overflow:hidden}
dialog[open]{display:flex;flex-direction:column;gap:var(--s3)}
#edit-form{display:flex;flex-direction:column;min-height:0;overflow:hidden;gap:var(--s3)}
dialog h2,dialog .section-heading{flex-shrink:0;margin:0}
.dialog-body{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-inline-end:var(--s2);margin:0}
.card .device-status:empty{display:none}
@media(max-width:650px){dialog{max-height:calc(100dvh - var(--s6))}}
/* Visible navigation labels on desktop, compact icons on mobile. */
.header-inner .icon-button{width:auto;gap:var(--s2);padding-inline:var(--s3);white-space:nowrap}
.nav-label{font-size:var(--font-sm)}
.header-inner .icon-button svg{flex-shrink:0}
@media(max-width:650px){.nav-label{display:none}.header-inner .icon-button{width:36px;padding-inline:var(--s2);gap:0}}

#chat-messages:empty{display:none}

.room-card h3{margin-top:0}.room-card label{font-size:var(--font-sm)}.room-card select{margin-top:var(--s1)}.room-primary-value{display:block;color:var(--muted)}

.room-primary-row{margin:var(--s3) 0;font-size:var(--font-sm)}

#devices>.card .device-heading{background:var(--device-header-bg);margin:calc(-1 * var(--s5)) calc(-1 * var(--s5)) 0;width:calc(100% + var(--s5) + var(--s5));padding:var(--s5);border-radius:var(--radius) var(--radius) 0 0}

#devices>.primary-device .device-heading{background:var(--primary-header-bg)}

.device-nickname{overflow-wrap:anywhere}.knx-details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3);margin:0}.knx-details dt{color:var(--muted)}.knx-details dd{margin:0;overflow-wrap:anywhere}

.device-content{display:flex;flex:1;flex-direction:column;justify-content:center;gap:var(--s2);padding:var(--s4) 0}.device-content .device-meta{justify-content:center;flex-wrap:wrap}.device-heading h3{margin-top:0}

.device-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}.device-heading h3{min-width:0;overflow-wrap:anywhere}.primary-star{display:inline-flex;flex-shrink:0;color:var(--focus);margin-inline-start:auto}.primary-star svg{fill:currentColor}

.alias-room-detail{margin-block:var(--s4)}.alias-room-detail ul{padding-inline-start:var(--s5);margin-block:var(--s2);line-height:1.8;overflow-wrap:anywhere}.picker-chips{display:flex;flex-wrap:wrap;gap:var(--s2)}.picker-chips button{font-size:var(--font-sm);overflow-wrap:anywhere}.picker-device{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s1) var(--s3);width:100%;text-align:start;background:var(--soft);color:var(--text);margin-bottom:var(--s2);border:1px solid var(--border)}.picker-device small{grid-column:1;color:var(--muted)}.picker-device>span:last-child{grid-column:2;grid-row:1 / 3;align-self:center}.picker-device.selected{background:var(--primary-header-bg);border-color:var(--accent)}

#prompts-form textarea{min-height:220px;line-height:1.6}#settings-tab #prompts-form{max-width:none}

.chat-trace-link{cursor:pointer}.chat-trace-link:hover{border-color:var(--accent)}#chat-trace-dialog{width:min(900px,calc(100vw - var(--s8)))}#chat-trace-body pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--font-sm);background:var(--soft);padding:var(--s3);border-radius:var(--radius-sm)}
/* Disabled devices remain editable; striping does not intercept clicks. */
:root{--disabled-stripe:color-mix(in srgb,var(--muted) 12%,transparent);--disabled-stripe-width:8px;--disabled-stripe-period:16px}
#devices>.card.disabled-device{position:relative;isolation:isolate}
#devices>.card.disabled-device::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;background:repeating-linear-gradient(135deg,transparent 0,transparent var(--disabled-stripe-width),var(--disabled-stripe) var(--disabled-stripe-width),var(--disabled-stripe) var(--disabled-stripe-period))}