/* ZCS Connect UI - original "Lagoon" theme: deep-ink rail, teal accent, amber highlights, pill controls */
:root{--bg:#f2f6f5;--panel:#fff;--panel2:#f6faf9;--text:#14262e;--muted:#5d7580;--line:#dde8e6;--line2:#c4d5d2;--pri:#0f9b8e;--pri2:#0b7d73;--priSoft:#dff5f2;--link:#0b7d73;--top:#fff;--topDark:#0a1a22;--side:#0c1e27;--side2:#14313d;--sideText:#a9c3cb;--ok:#16a36a;--okSoft:#dcf5e8;--err:#e0484f;--errSoft:#fde6e7;--warn:#d98a0b;--warnSoft:#fff1d1;--info:#2a8bd6;--infoSoft:#e0f0fc;--violet:#7a5cd6;--amber:#f5a524;--shadow:0 1px 2px rgba(12,30,39,.05),0 6px 18px rgba(12,30,39,.06);--r:14px;--c1:#18b58a;--c2:#ef6a6f;--c3:#f5a524;--c4:#2a8bd6;--thbg:#eef6f5}
[data-theme=dark]{--bg:#081318;--panel:#0f212a;--panel2:#132a35;--text:#e3f0f1;--muted:#8fabb3;--line:#1d3843;--line2:#29485a;--pri:#27c4b5;--pri2:#5fe0d3;--priSoft:#10393c;--link:#5fe0d3;--top:#0a1a22;--topDark:#050e12;--side:#07141a;--side2:#10262f;--sideText:#a9c3cb;--okSoft:#0f3a2b;--errSoft:#40191c;--warnSoft:#3b2d0e;--infoSoft:#12304a;--shadow:none;--thbg:#132a35}
*{box-sizing:border-box}
html{color-scheme:light}[data-theme=dark]{color-scheme:dark}
body{margin:0;font:13.5px/1.5 Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
.ic{width:16px;height:16px;flex:none}
.grow{flex:1}
/* top bar */
.topnav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px;height:52px;padding:0 16px 0 12px;background:var(--top);color:#fff}
.tbrand{display:flex;align-items:center;gap:9px;color:#fff;min-width:0;margin-right:14px}.tbrand:hover{text-decoration:none}
.tlogo{height:30px;min-width:30px;padding:0 6px;border-radius:8px;background:linear-gradient(135deg,#5b82ff,#2f5bea);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12.5px;letter-spacing:.02em}
.tname{font-weight:700;font-size:15px;white-space:nowrap;letter-spacing:.01em}
.mods{display:flex;gap:2px;flex:1;overflow-x:auto;height:52px;align-items:center;scrollbar-width:none}.mods::-webkit-scrollbar{display:none}
.mod{display:flex;align-items:center;padding:7px 13px;color:#c9d2f2;font-weight:500;white-space:nowrap;border-radius:8px}
.mod:hover{background:rgba(255,255,255,.08);text-decoration:none;color:#fff}.mod.on{background:rgba(91,130,255,.28);color:#fff}
.nb{margin-left:6px;background:#ff5a5f;color:#fff;border-radius:99px;font-size:11px;padding:0 6px;line-height:16px;font-weight:600}
.topr{display:flex;align-items:center;gap:6px}
.kbar{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);color:#c9d2f2;border-radius:8px;padding:6px 10px;min-width:190px;font-weight:400;cursor:pointer}
.kbar:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.2)}.kbar span{flex:1;text-align:left}
kbd{font:600 10.5px/1 ui-monospace,Menlo,Consolas,monospace;border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:3px 5px;color:#c9d2f2}
.iconbtn{position:relative;background:transparent;border:0;border-radius:8px;width:34px;height:34px;display:grid;place-items:center;color:#dfe5fb;cursor:pointer;padding:0}
.iconbtn:hover{background:rgba(255,255,255,.12);text-decoration:none;color:#fff}
.iconbtn .dot{position:absolute;top:0;right:-3px;background:#ff5a5f;border-radius:99px;font-size:10px;line-height:15px;padding:0 4px;font-weight:700;color:#fff}
.umenu{position:relative}.umenu summary{list-style:none;display:flex;align-items:center;gap:7px;cursor:pointer;padding:3px 6px;border-radius:8px;color:#fff}.umenu summary::-webkit-details-marker{display:none}.umenu summary:hover{background:rgba(255,255,255,.1)}
.umenu-pop{position:absolute;right:0;top:42px;min-width:200px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(10,18,54,.28);padding:6px;z-index:60}
.umenu-pop a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;color:var(--text)}.umenu-pop a:hover{background:var(--priSoft);text-decoration:none}
.wn{font-weight:600;font-size:12.5px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av{width:32px;height:32px;border-radius:50%;background:var(--priSoft);color:var(--pri2);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.av.sm{width:28px;height:28px;font-size:11px}.av.lg{width:64px;height:64px;font-size:22px}
.topnav .av{background:#fff;color:#10194a}
/* body */
.body{display:flex;min-height:calc(100vh - 52px)}
.subnav{width:236px;flex:none;background:var(--side);border-right:1px solid var(--line);padding:10px 8px 24px;position:sticky;top:52px;height:calc(100vh - 52px);overflow-y:auto}
.sidehead{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);padding:6px 10px 8px}
.sg{margin-bottom:4px}
.sg summary{list-style:none;cursor:pointer;padding:7px 10px;color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;justify-content:space-between;border-radius:6px}
.sg summary::-webkit-details-marker{display:none}.sg summary:after{content:"\25BE";opacity:.7;font-size:11px}.sg:not([open]) summary:after{content:"\25B8"}.sg summary:hover{color:var(--text)}
.subnav a{display:flex;align-items:center;gap:10px;padding:8px 10px;color:var(--sideText);border-radius:8px;margin:1px 0}
.subnav a:hover{background:var(--side2);text-decoration:none;color:var(--text)}
.subnav a.on{background:var(--priSoft);color:var(--pri2);font-weight:600}
[data-theme=dark] .subnav a.on{color:#fff}
.subnav a .ic{opacity:.8}
.work{flex:1;min-width:0;display:flex;flex-direction:column}
.main{flex:1;min-width:0;padding:22px 28px 40px}
.foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 28px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}
.crumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-bottom:4px}.crumb a{color:var(--muted)}.crumb a:hover{color:var(--pri)}.crumb i{font-style:normal;opacity:.5}
.phead{display:flex;gap:14px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px}
h1{margin:0;font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.01em}h2{font-size:14.5px;margin:0 0 12px;color:var(--text);font-weight:700}h3{font-size:13px;margin:0 0 8px;font-weight:700}
.sub{margin:3px 0 0;color:var(--muted);font-size:13px;max-width:780px}
.pact{display:flex;gap:8px;flex-wrap:wrap}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:16px;box-shadow:var(--shadow)}
.grid{display:grid;gap:14px;margin-bottom:16px}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:block;color:var(--text);position:relative;box-shadow:var(--shadow)}
a.stat:hover{text-decoration:none;border-color:var(--pri)}
.stat:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--line2)}
.stat span{color:var(--muted);font-size:12px;display:block}.stat b{font-size:26px;line-height:1.25;font-weight:700}.stat em{font-style:normal;font-size:12px;color:var(--muted);margin-left:6px}
.stat.g:before{background:var(--c1)}.stat.r:before{background:var(--c2)}.stat.y:before{background:var(--c3)}.stat.b:before{background:var(--c4)}.stat.v:before{background:var(--violet)}
.stat.g b{color:var(--ok)}.stat.r b{color:var(--err)}.stat.y b{color:var(--warn)}.stat.b b{color:var(--info)}
.tw{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px;box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%}
th,td{padding:9px 14px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;vertical-align:middle}
.sl{color:inherit}.sl:hover{color:var(--pri);text-decoration:none}
.rowbtns{text-align:right}
.dngtxt{color:var(--err)!important}
.swatch{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;border:1px solid var(--line2)}
.pager{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin:-6px 0 16px}
th{background:var(--thbg);font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0}

tbody tr:hover td,table tr:hover>td{background:var(--panel2)}tr:last-child>td{border-bottom:0}
td.wrap{white-space:normal}.num{text-align:right;font-variant-numeric:tabular-nums}
input,select,textarea,button{font:inherit;color:inherit}
input[type=text],input[type=password],input[type=date],input[type=month],input[type=time],input[type=number],input[type=email],input[type=file],input[type=datetime-local],select,textarea{padding:6px 9px;border:1px solid var(--line2);border-radius:7px;background:var(--panel);color:var(--text);max-width:100%}
[data-theme=dark] input[type=text],[data-theme=dark] input[type=password],[data-theme=dark] input[type=date],[data-theme=dark] input[type=number],[data-theme=dark] select,[data-theme=dark] textarea{border-color:var(--line2)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--priSoft);border-color:var(--pri)}
textarea{width:100%;min-height:70px}
.btn,button{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--pri);background:var(--pri);color:#fff;border-radius:7px;cursor:pointer;font-weight:500}
.btn:hover,button:hover{background:var(--pri2);border-color:var(--pri2);text-decoration:none}
.btn.sec,button.sec{background:var(--panel);color:var(--text);border-color:var(--line2)}.btn.sec:hover,button.sec:hover{background:var(--priSoft);border-color:var(--pri)}
[data-theme=dark] .btn.sec,[data-theme=dark] button.sec{color:var(--text);border-color:var(--line2)}
.btn.dng,button.dng{background:var(--err);border-color:var(--err);color:#fff}
.btn.ok,button.ok{background:#3f9b2a;border-color:#3f9b2a}
.btn.sm,button.sm{padding:2px 9px;font-size:12px}
button:disabled{opacity:.5;cursor:not-allowed}
form.inline{display:inline}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:12px}
.filters label,.fg label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:3px;font-weight:600}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.formgrid label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:4px;font-weight:600}
.formgrid .full{grid-column:1/-1}
.hint{font-size:12px;color:var(--muted);margin:4px 0 0;font-weight:400}
.presets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.chip{padding:3px 12px;border:1px solid var(--line2);border-radius:7px;font-size:12.5px;background:var(--panel);color:var(--text)}.chip:hover{background:var(--priSoft);text-decoration:none}.chip.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.tabs a{padding:8px 16px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:600}.tabs a:hover{text-decoration:none;color:var(--text)}.tabs a.on{color:var(--link);border-color:var(--pri);background:var(--priSoft)}
.tag{display:inline-block;padding:0 8px;border-radius:7px;font-size:12px;font-weight:600;background:#eceff0;color:#667}
.tag.g{background:var(--okSoft);color:#3f8a1c}.tag.r{background:var(--errSoft);color:#c2373a}.tag.y,.tag.o{background:var(--warnSoft);color:#a8730c}.tag.b{background:var(--infoSoft);color:#2f65c0}
.muted{color:var(--muted)}.warn{color:var(--warn)}.bad{color:var(--err)}.good{color:var(--ok)}
.toasts{position:fixed;right:16px;top:58px;z-index:100;display:flex;flex-direction:column;gap:8px}
.toast{padding:10px 16px;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.22);font-weight:500;max-width:420px;transition:opacity .4s}
.toast.ok{background:#5fb233;color:#fff}.toast.err{background:#e8575a;color:#fff}
.empty{text-align:center;padding:30px 16px;color:var(--muted)}.empty b{display:block;color:var(--text);font-size:14px;margin:8px 0 4px}.eico{width:44px;height:44px;border-radius:50%;background:var(--priSoft);color:var(--link);display:grid;place-items:center;margin:0 auto}.eico .ic{width:22px;height:22px}
dialog{border:0;border-radius:14px;padding:0;width:min(700px,94vw);background:var(--panel);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.4)}
dialog::backdrop{background:rgba(20,30,15,.55)}
.dh{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;color:var(--text);font-weight:700;font-size:15px;border-bottom:1px solid var(--line)}
.db{padding:16px;max-height:70vh;overflow:auto}.df{padding:10px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;background:var(--panel2)}
.x{background:transparent!important;border:0!important;color:var(--muted)!important;font-size:24px;padding:0 6px;cursor:pointer}
.bulk{display:none;align-items:center;gap:10px;background:var(--priSoft);border:1px solid var(--pri);border-radius:8px;padding:8px 12px;margin-bottom:12px;flex-wrap:wrap}.bulk.show{display:flex}
.steps{display:flex;flex-direction:column;gap:6px}.step{display:flex;gap:12px;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.step .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#d5dbd0;font-weight:700;font-size:12px;flex:none}.step.done .n{background:var(--ok);color:#fff}.step.done{opacity:.75}.step b{display:block}.step span.s{color:var(--muted);font-size:12.5px}.step .go{margin-left:auto}
.bars{display:flex;flex-direction:column;gap:9px}.brow{display:grid;grid-template-columns:130px 1fr 70px;gap:10px;align-items:center;font-size:13px}.btrack{height:12px;border-radius:99px;background:var(--line);overflow:hidden;display:flex}.bseg{height:100%}
.feed{display:flex;flex-direction:column}.fi{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}.fi:last-child{border-bottom:0}.fi b{display:block;line-height:1.2}.fi small{color:var(--muted)}.fi .t{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted);font-size:12.5px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.cal .dn{font-size:11px;color:var(--muted);text-align:center;font-weight:700}.cd{border:1px solid var(--line);border-radius:7px;padding:5px 6px;min-height:58px;font-size:11.5px;background:var(--panel)}.cd .d{font-weight:700;font-size:12px}.cd.P{background:var(--okSoft)}.cd.A{background:var(--errSoft)}.cd.L{background:var(--infoSoft)}.cd.H,.cd.W{background:var(--panel2)}.cd.HD{background:var(--warnSoft)}.cd small{display:block;color:var(--muted)}
.roster td,.roster th{padding:4px 6px;text-align:center;font-size:12px}.roster td.nm,.roster th.nm{text-align:left;position:sticky;left:0;background:var(--panel);z-index:1}.rc{display:inline-block;min-width:26px;padding:0 6px;border-radius:7px;color:#fff;font-size:11px;font-weight:700}.rc.off{background:#dfe4dc;color:#777}.rc.hol{background:#e7a21a}
/* dashboard widgets */
.dgrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
.wcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.wtitle{padding:11px 16px;color:var(--text);font-weight:700;font-size:13.5px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}

.wbody{padding:12px 14px}
.donuts{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-around}
.dn1{display:flex;align-items:center;gap:12px}.dn1 h4{margin:0 0 6px;font-size:13px}
.legend{display:flex;flex-direction:column;gap:3px;font-size:12px}.legend i{display:inline-block;width:12px;height:8px;border-radius:2px;margin-right:6px}
.dcols{display:flex;align-items:flex-end;gap:10px;height:190px;padding:4px 4px 0;overflow-x:auto}
.dcol{flex:1;min-width:46px;display:flex;flex-direction:column;align-items:center;height:100%}
.dcol .tr{flex:1;width:100%;background:#ececec;border-radius:2px;display:flex;align-items:flex-end;position:relative;min-height:60px}
[data-theme=dark] .dcol .tr{background:#323845}
.dcol .fl{width:100%;background:var(--c1);border-radius:2px 2px 0 0}
.dcol .pc{font-size:11px;color:var(--muted);margin-bottom:2px}.dcol .lb{font-size:11px;color:var(--muted);margin-top:4px;text-align:center;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcols{display:flex;align-items:flex-end;gap:14px;height:170px;padding:4px;overflow-x:auto;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.mc{flex:1;min-width:60px;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}.mc .pair{display:flex;gap:4px;align-items:flex-end;width:100%;justify-content:center;flex:1}.mc .pair i{display:block;width:40%;max-width:28px;border-radius:2px 2px 0 0;min-height:1px}.mc small{font-size:11px;color:var(--muted);margin-top:4px;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mon{display:flex;flex-direction:column;max-height:430px;overflow-y:auto}
.mrow{display:flex;gap:10px;align-items:center;padding:7px 4px;border-bottom:1px solid var(--line)}
.m1{flex:1.2;min-width:0}.m1 b{display:block;font-size:12.5px;line-height:1.2}.m1 small,.m2 small{color:var(--muted);display:block;font-size:11.5px}.m2{flex:1.2;font-size:12.5px;line-height:1.25}.m3{flex:.8;color:var(--muted);font-size:12px;text-align:right}
.todo{display:flex;flex-direction:column;max-height:300px;overflow-y:auto}.trow{display:flex;gap:10px;align-items:center;padding:8px 4px;border-bottom:1px solid var(--line)}.trow .tw1{flex:1.4;min-width:0}.trow .tw1 b{display:block;line-height:1.2}.trow .tw1 small{color:var(--muted)}.trow .tw2{flex:1;font-weight:700}.trow .tw3{color:var(--muted);font-size:12px;white-space:nowrap}
/* workbench tiles */
.wb{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.tile{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;color:var(--text);border-left:4px solid var(--c1)}
.tile:hover{text-decoration:none;box-shadow:0 3px 10px rgba(40,60,30,.15)}
.tile .ti{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none;background:var(--c1)}
.tile .ti .ic{width:20px;height:20px}.tile b{display:block;line-height:1.2}.tile small{color:var(--muted)}
.tile.c2{border-left-color:var(--c4)}.tile.c2 .ti{background:var(--c4)}.tile.c3{border-left-color:var(--c3)}.tile.c3 .ti{background:var(--c3)}.tile.c4{border-left-color:var(--c2)}.tile.c4 .ti{background:var(--c2)}
/* login */
.lbg{min-height:100vh;background:radial-gradient(1200px 500px at 20% -10%,#2f5bea33,transparent),linear-gradient(160deg,#0a1236,#18246b);display:flex;align-items:center;justify-content:center;padding:20px}
.login{width:400px;max-width:94vw;background:var(--panel);border-radius:16px;padding:32px 32px 26px;box-shadow:0 24px 70px rgba(0,0,0,.4)}
.login h1{font-size:19px;text-align:center;margin:0 0 2px;border:0}.login input{width:100%;margin:5px 0 12px}.login .tlogo{margin:0 auto 12px;width:52px;height:52px;font-size:18px;border-radius:14px}
pre{background:#252b22;color:#e2e8f0;padding:10px;border-radius:8px;overflow:auto;white-space:pre-wrap;word-break:break-all;font-size:12px}
code{background:var(--panel2);padding:1px 6px;border-radius:7px;font-size:12.5px}
.only-mobile{display:none}
@media(max-width:1100px){.wn{display:none}.wn{display:none}.dgrid{grid-template-columns:1fr}}
@media(max-width:900px){.only-mobile{display:grid}.subnav{position:fixed;left:-260px;top:52px;z-index:50;transition:left .2s;height:calc(100vh - 52px);box-shadow:4px 0 24px rgba(0,0,0,.25)}.subnav.open{left:0}.main{padding:16px 14px}.tname{display:none}.kbar span,.kbar kbd{display:none}.kbar{min-width:0}.brow{grid-template-columns:90px 1fr 56px}.foot{padding:10px 14px}}
@media print{.topnav,.subnav,.filters,.noprint,.presets,.pact,.tabs,.pagetabs{display:none!important}.main{padding:0}.card,.tw{box-shadow:none}body{background:#fff;color:#000}}

/* --- v5 additions --- */
.cmd{position:fixed;inset:0;z-index:200;background:rgba(10,16,40,.55);display:flex;align-items:flex-start;justify-content:center;padding-top:12vh}.cmd[hidden]{display:none}
.cmd-box{width:min(620px,94vw);background:var(--panel);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.cmd-box input{width:100%;border:0;border-bottom:1px solid var(--line);padding:16px 18px;font-size:16px;background:transparent;color:var(--text);outline:none;border-radius:0}
.cmd-res{max-height:52vh;overflow-y:auto;padding:6px}
.cmd-res a{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:8px;color:var(--text)}.cmd-res a small{color:var(--muted)}
.cmd-res a.sel,.cmd-res a:hover{background:var(--priSoft);text-decoration:none}
.cmd-foot{padding:8px 14px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--line);background:var(--panel2)}
.callout{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:10px;background:var(--infoSoft);border:1px solid transparent;margin-bottom:16px;color:var(--text)}
.callout .ic{color:var(--info);margin-top:2px}.callout.warn{background:var(--warnSoft)}.callout.warn .ic{color:var(--warn)}.callout.bad{background:var(--errSoft)}.callout.bad .ic{color:var(--err)}.callout.good{background:var(--okSoft)}.callout.good .ic{color:var(--ok)}
.callout p{margin:0}.callout b{display:block}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;margin:0}.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:500}
.doorgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-bottom:16px}
.door{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)}
.door h3{display:flex;align-items:center;gap:8px;margin:0 0 4px}.door .st{width:9px;height:9px;border-radius:50%;background:var(--err)}.door .st.on{background:var(--ok);box-shadow:0 0 0 4px var(--okSoft)}
.door .btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.tp{width:100%}.tp td,.tp th{padding:5px 8px;text-align:center}.tp td:first-child,.tp th:first-child{text-align:left}.tp input[type=time]{width:112px;padding:4px 6px}
.temp{font-weight:700;font-variant-numeric:tabular-nums}.temp.hi{color:var(--err)}.temp.ok{color:var(--ok)}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ok);font-weight:600}.live:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,157,99,.5)}100%{box-shadow:0 0 0 9px rgba(31,157,99,0)}}
.badge-card{max-width:340px;margin:0 auto;border:2px dashed var(--line2);border-radius:14px;padding:22px;text-align:center;background:#fff;color:#111}
.badge-card h2{font-size:26px;margin:6px 0;color:#111}.badge-card .big{font-size:13px;color:#555}
.formgrid input[type=text],.formgrid input[type=number],.formgrid input[type=email],.formgrid input[type=date],.formgrid input[type=time],.formgrid input[type=password],.formgrid input[type=datetime-local],.formgrid select,.formgrid textarea{width:100%}
.formgrid .sec-t{grid-column:1/-1;font-weight:700;color:var(--text);border-bottom:1px solid var(--line);padding-bottom:4px;margin-top:6px}
.wiz{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}.wiz span{padding:5px 14px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);font-weight:600;color:var(--muted)}.wiz span.on{background:var(--pri);border-color:var(--pri);color:#fff}
a.tile{color:var(--text)}
.rowflex{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input[type=checkbox]{accent-color:var(--pri);width:15px;height:15px}
:focus-visible{outline:2px solid var(--pri);outline-offset:1px}
.multibox{display:flex;flex-wrap:wrap;gap:6px 14px;padding:6px 2px;font-weight:400;color:var(--text)}.mchk{display:inline-flex;align-items:center;gap:6px}


/* ===== ZCS Connect "Lagoon" theme overrides ===== */
body{font-family:"Segoe UI Variable Text","Segoe UI",Inter,system-ui,-apple-system,Roboto,Arial,sans-serif;background:var(--bg);background-image:radial-gradient(900px 380px at 100% -8%,rgba(15,155,142,.10),transparent 70%),radial-gradient(700px 300px at -5% 105%,rgba(245,165,36,.07),transparent 70%);background-attachment:fixed}
h1{font-weight:800;letter-spacing:-.02em}
h1:after{content:"";display:block;width:34px;height:4px;border-radius:99px;margin-top:7px;background:linear-gradient(90deg,var(--pri),var(--amber))}
.login h1:after,.cmd h1:after{margin-left:auto;margin-right:auto}
/* top bar: light glass with teal underline */
.topnav{background:rgba(255,255,255,.92);color:var(--text);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);box-shadow:0 2px 0 var(--pri) inset,0 6px 20px rgba(12,30,39,.05);height:56px}
[data-theme=dark] .topnav{background:rgba(10,26,34,.94)}
.tbrand{color:var(--text)}
.tlogo{height:34px;min-width:34px;border-radius:11px 4px 11px 4px;background:linear-gradient(140deg,#0f9b8e 0%,#0b6f8a 62%,#f5a524 140%);color:#fff;box-shadow:0 4px 12px rgba(15,155,142,.35);font-weight:800;letter-spacing:.03em}
.tname{font-weight:800;font-size:15.5px;color:var(--text);letter-spacing:.005em}
.mods{height:56px}
.mod{color:var(--muted);font-weight:600;border-radius:99px;padding:7px 15px}
.mod:hover{background:var(--priSoft);color:var(--pri2)}
.mod.on{background:var(--pri);color:#fff;box-shadow:0 4px 12px rgba(15,155,142,.3)}
.kbar{background:var(--panel2);border:1px solid var(--line2);color:var(--muted);border-radius:99px}
.kbar:hover{background:var(--priSoft);border-color:var(--pri)}
kbd{border-color:var(--line2);color:var(--muted)}
.iconbtn{color:var(--muted)}.iconbtn:hover{background:var(--priSoft);color:var(--pri2)}
.umenu summary{color:var(--text)}
.topnav .av{background:linear-gradient(140deg,var(--pri),var(--amber));color:#fff}
.umenu-pop{border-radius:14px}
/* dark ink rail */
.body{min-height:calc(100vh - 56px)}
.subnav{background:var(--side);border-right:0;top:56px;height:calc(100vh - 56px);padding:14px 10px 28px;scrollbar-width:thin}
.sidehead{color:#6f9099;letter-spacing:.14em}
.sg summary{color:#6f9099;font-size:10.5px;letter-spacing:.12em}.sg summary:hover{color:#d3e6ea}
.subnav a{color:var(--sideText);border-radius:10px;border-left:3px solid transparent}
.subnav a:hover{background:var(--side2);color:#fff}
.subnav a.on{background:linear-gradient(90deg,rgba(15,155,142,.28),rgba(15,155,142,.06));color:#fff;border-left-color:var(--amber);font-weight:600}
[data-theme=dark] .subnav a.on{color:#fff}
.main{padding:26px 32px 44px}
.foot{background:transparent;border-top:1px dashed var(--line2)}
/* cards, stats, tables */
.card,.stat,.tw,.wcard,.door,.tile{border-radius:var(--r);border-color:var(--line)}
.card{border-top:3px solid var(--pri)}
.stat:before{left:16px;right:16px;top:0;bottom:auto;width:auto;height:3px;border-radius:0 0 4px 4px}
.stat b{font-size:28px;font-weight:800;letter-spacing:-.02em}
a.stat:hover,.tile:hover{border-color:var(--pri);transform:translateY(-2px);box-shadow:0 10px 26px rgba(15,155,142,.16);text-decoration:none}
.stat,.tile{transition:transform .15s,box-shadow .15s,border-color .15s}
.tile{border-left-width:1px;border-top:4px solid var(--c1)}
.tile.c2{border-top-color:var(--c4);border-left-color:var(--line)}.tile.c3{border-top-color:var(--c3);border-left-color:var(--line)}.tile.c4{border-top-color:var(--c2);border-left-color:var(--line)}
.tile{border-left-color:var(--line)}
.tile .ti{border-radius:12px}
.wtitle{background:var(--panel2);font-weight:800}
th{background:var(--thbg);color:var(--pri2);font-size:11.5px;letter-spacing:.07em}
[data-theme=dark] th{color:var(--pri2)}
tbody tr:hover td,table tr:hover>td{background:var(--priSoft)}
/* controls: pill buttons */
.btn,button{border-radius:99px;padding:7px 18px;font-weight:600;background:linear-gradient(135deg,var(--pri),var(--pri2));border-color:transparent;box-shadow:0 3px 10px rgba(15,155,142,.25)}
.btn:hover,button:hover{background:linear-gradient(135deg,var(--pri2),#095f58);border-color:transparent}
.btn.sec,button.sec{background:var(--panel);box-shadow:none;border:1px solid var(--line2);color:var(--text)}
.btn.sec:hover,button.sec:hover{background:var(--priSoft);border-color:var(--pri)}
.btn.dng,button.dng{background:var(--err);box-shadow:none}.btn.ok,button.ok{background:var(--ok);box-shadow:none}
.btn.sm,button.sm{padding:3px 12px}
.x{box-shadow:none!important}
input[type=text],input[type=password],input[type=date],input[type=month],input[type=time],input[type=number],input[type=email],input[type=file],input[type=datetime-local],select,textarea{border-radius:10px;background:var(--panel)}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(15,155,142,.22);border-color:var(--pri)}
.chip{border-radius:99px}.chip.on{background:var(--pri);border-color:var(--pri)}
.tabs{border-bottom:2px solid var(--line)}.tabs a{border-radius:10px 10px 0 0;border-bottom:3px solid transparent;margin-bottom:-2px}.tabs a.on{border-color:var(--amber);background:var(--priSoft);color:var(--pri2)}
.tag{border-radius:99px;padding:1px 10px}
.callout{border-radius:12px;border-left:4px solid var(--info)}.callout.warn{border-left-color:var(--warn)}.callout.bad{border-left-color:var(--err)}.callout.good{border-left-color:var(--ok)}
.toast{border-radius:12px}.toast.ok{background:var(--ok)}
dialog{border-radius:18px}.dh{background:var(--panel2)}
.cmd-box{border-radius:18px}.cmd-res a.sel,.cmd-res a:hover{background:var(--priSoft)}
.wiz span{border-radius:99px}.wiz span.on{background:var(--pri);border-color:var(--pri)}
.dcol .fl{background:linear-gradient(180deg,var(--c1),var(--pri2));border-radius:6px 6px 0 0}
.bseg:first-child{border-radius:99px 0 0 99px}
.av{background:var(--priSoft);color:var(--pri2)}
.step.done .n{background:var(--pri)}
/* sign-in / installer */
.lbg{background:radial-gradient(900px 520px at 12% 0%,rgba(15,155,142,.55),transparent 60%),radial-gradient(700px 480px at 100% 100%,rgba(245,165,36,.28),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 22px),linear-gradient(160deg,#07161d,#0c2a33 70%,#0a3a3e)}
.login{border-radius:22px;border-top:5px solid var(--amber);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.login .tlogo{width:58px;height:58px;font-size:20px;border-radius:18px 6px 18px 6px}
pre{background:#0c1e27;color:#d3ece9;border-radius:12px;border-left:4px solid var(--pri)}
code{background:var(--priSoft);color:var(--pri2)}
@media(max-width:900px){.subnav{top:56px;height:calc(100vh - 56px)}}

/* ===== navbar fit: never cut the module menu ===== */
:root{--navh:56px}
.mods{min-width:0}
.mod{flex:none;font-size:13.5px}
@media(max-width:1750px){
  .kbar{min-width:0;padding:7px 11px}.kbar span,.kbar kbd{display:none}
  .wn{display:none}
  .mod{padding:7px 11px}
}
/* narrower screens / zoomed browsers: module menu drops to its own full-width row */
@media(min-width:901px) and (max-width:1500px){
  :root{--navh:100px}
  .topnav{flex-wrap:wrap;height:auto;row-gap:0;padding-top:6px;padding-bottom:0}
  .topnav .tbrand{height:44px}
  .topr{margin-left:auto;height:44px}
  .mods{order:3;flex:1 0 100%;height:46px;margin:0 -4px;border-top:1px solid var(--line);padding:0 4px;overflow-x:auto}
  .subnav{top:var(--navh);height:calc(100vh - var(--navh))}
  .body{min-height:calc(100vh - var(--navh))}
  .toasts{top:calc(var(--navh) + 6px)}
}

/* ===== ZCS Connect layout v2: solid colour header + dark accordion sidebar ===== */
:root{--hdr:#0e9a8c;--hdr2:#0b857a;--rail:#27333d;--rail-open:#18222a;--rail-line:rgba(255,255,255,.06);--rail-text:#c9d6db;--rail-on:#5ee0b0}
[data-theme=dark]{--hdr:#0b6f68;--hdr2:#095a54;--rail:#16212a;--rail-open:#0e171d}
.topnav{background:linear-gradient(180deg,var(--hdr),var(--hdr2));color:#fff;border-bottom:0;box-shadow:0 3px 14px rgba(8,60,56,.28);padding-left:0;height:56px}
[data-theme=dark] .topnav{background:linear-gradient(180deg,var(--hdr),var(--hdr2))}
.tbrand{color:#fff;width:236px;flex:none;margin-right:10px;padding:0 14px;height:100%;background:rgba(0,0,0,.12);gap:10px}
.tlogo{background:#fff;color:var(--hdr2);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.tname{color:#fff;font-size:16px}
.mod{color:rgba(255,255,255,.9);border-radius:6px;font-weight:500;height:56px;padding:0 15px;border-radius:0;position:relative}
.mod:hover{background:rgba(255,255,255,.14);color:#fff}
.mod.on{background:rgba(0,0,0,.16);color:#fff;box-shadow:inset 0 -3px 0 var(--amber)}
.mods{gap:0;height:56px}
.kbar{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff}
.kbar:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.45)}
kbd{border-color:rgba(255,255,255,.5);color:#fff}
.iconbtn{color:#fff}.iconbtn:hover{background:rgba(255,255,255,.18);color:#fff}
.umenu summary{color:#fff}.wn{color:#fff}
.topnav .av{background:#fff;color:var(--hdr2)}
/* sidebar */
.subnav{background:var(--rail);padding:0 0 28px;top:56px}
.sidehead{margin:0;padding:15px 18px 11px;color:#8aa0aa;font-size:11px;letter-spacing:.16em;border-bottom:1px solid var(--rail-line)}
.sg{margin:0;border-bottom:1px solid var(--rail-line)}
.sg summary{padding:14px 18px;color:#edf3f5;font-size:14px;font-weight:600;text-transform:none;letter-spacing:.01em}
.sg summary:hover{color:#fff;background:rgba(255,255,255,.04)}
.sg summary:after{content:"\25B2";font-size:9px;opacity:.75}
.sg:not([open]) summary:after{content:"\25BC"}
.sg[open]{background:var(--rail-open)}
.sg[open] summary{background:var(--rail)}
.subnav a{margin:0;border-radius:0;border-left:0;padding:12px 18px 12px 28px;color:var(--rail-text);font-size:13.5px;gap:8px}
.subnav a .ic{display:none}
.subnav a:hover{background:rgba(255,255,255,.05);color:#fff}
.subnav a.on{background:transparent;color:var(--rail-on);font-weight:700;border-left:0;box-shadow:inset 3px 0 0 var(--rail-on)}
.subnav>a{padding-left:18px;border-bottom:1px solid var(--rail-line)}
@media(min-width:901px) and (max-width:1500px){
  .tbrand{height:44px;width:auto;background:transparent;margin-right:0}
  .mods{border-top:1px solid rgba(255,255,255,.22)}
  .mod{height:46px}
  :root{--navh:90px}
  .topnav{padding-top:0;height:auto}
  .subnav{top:var(--navh);height:calc(100vh - var(--navh))}
  .body{min-height:calc(100vh - var(--navh))}
}
@media(max-width:900px){.tbrand{width:auto;background:transparent;padding:0 6px}.mod{height:52px}}

/* ===== ZCS Connect FINAL: green-header / slate-sidebar enterprise style + fit-to-page ===== */
:root{
  --bg:#eef0f3;--panel:#fff;--panel2:#f6f7f9;--text:#2d3340;--muted:#6b7385;--line:#e1e5ea;--line2:#ccd2db;
  --pri:#5ea72d;--pri2:#4a8c20;--priSoft:#e9f5de;--link:#3f7f1a;
  --hdr:#7cc242;--hdr2:#72b93a;--hdrText:#2f3a27;
  --rail:#3b404e;--rail-open:#2c303b;--rail-line:rgba(255,255,255,.07);--rail-text:#c8ccd6;--rail-on:#7cc242;
  --side:#3b404e;--side2:#2c303b;--sideText:#c8ccd6;--thbg:#f4f6f8;--r:6px;
  --shadow:0 1px 2px rgba(30,35,50,.06);--c1:#6ab83a;--c4:#3d8fe0;--amber:#f2a93b
}
.subnav{top:var(--navh);height:calc(100vh - var(--navh))}
.body{min-height:calc(100vh - var(--navh))}
[data-theme=dark]{--bg:#171a21;--panel:#20242d;--panel2:#262b35;--text:#e6e9ef;--muted:#98a0b1;--line:#323845;--line2:#414859;--pri:#6ab83a;--pri2:#86cf55;--priSoft:#243320;--link:#8fd35e;--hdr:#4c7f2a;--hdr2:#447426;--hdrText:#f1f7ea;--rail:#1f232c;--rail-open:#171a21;--thbg:#262b35}
html,body{max-width:100%}
body{font-size:13px;background:var(--bg);background-image:none;overflow-x:hidden}
/* header */
.topnav{background:var(--hdr);color:var(--hdrText);box-shadow:0 1px 0 rgba(0,0,0,.08);border-bottom:0;height:56px;backdrop-filter:none}
[data-theme=dark] .topnav{background:var(--hdr)}
.tbrand{background:transparent;color:var(--hdrText)}
.tlogo{background:#fff;color:#4a8c20;border-radius:6px;box-shadow:none;font-weight:800}
.tname{color:var(--hdrText);font-weight:800}
.mod{color:var(--hdrText);font-weight:500;font-size:14px;border-radius:0}
.mod:hover{background:rgba(0,0,0,.08);color:var(--hdrText)}
.mod.on{background:rgba(0,0,0,.12);color:var(--hdrText);box-shadow:inset 0 -3px 0 #fff;font-weight:600}
.kbar{background:rgba(255,255,255,.35);border:1px solid rgba(0,0,0,.08);color:var(--hdrText);border-radius:4px}
.kbar:hover{background:rgba(255,255,255,.5);border-color:rgba(0,0,0,.15)}
kbd{border-color:rgba(0,0,0,.25);color:var(--hdrText)}
.iconbtn,.umenu summary,.wn{color:var(--hdrText)}
.iconbtn:hover{background:rgba(0,0,0,.1);color:var(--hdrText)}
.topnav .av{background:#fff;color:#4a8c20}
.nb{background:#e0484f}
/* sidebar */
.subnav{background:var(--rail);width:230px}
.sidehead{color:#9aa1b1}
.sg summary{color:#eceef3;font-weight:500}
.subnav a.on{color:var(--rail-on);box-shadow:none;font-weight:600}
.tbrand{width:230px}
/* headings / cards */
h1{font-size:20px;font-weight:700;letter-spacing:0}
h1:after{display:none}
.card{border-top:0;border-radius:var(--r);box-shadow:var(--shadow)}
.card,.stat,.tw,.wcard,.door,.tile{border-radius:var(--r)}
.stat:before{left:0;right:auto;top:0;bottom:0;width:4px;height:auto;border-radius:6px 0 0 6px}
.stat b{font-weight:700}
a.stat:hover,.tile:hover{transform:none;box-shadow:0 2px 10px rgba(30,35,50,.12)}
.tile{border-top:1px solid var(--line);border-left:4px solid var(--c1)}
.tile.c2{border-top-color:var(--line);border-left-color:var(--c4)}.tile.c3{border-top-color:var(--line);border-left-color:var(--amber)}.tile.c4{border-top-color:var(--line);border-left-color:#e0484f}
.tile .ti{border-radius:50%}
.wtitle{background:var(--panel);font-weight:700}
th{background:var(--thbg);color:#4b5366;font-size:12px;text-transform:none;letter-spacing:0;font-weight:700}
tbody tr:hover td,table tr:hover>td{background:#f3f9ec}
[data-theme=dark] tbody tr:hover td,[data-theme=dark] table tr:hover>td{background:#243320}
/* controls: flat green */
.btn,button{border-radius:4px;background:var(--pri);border:1px solid var(--pri);box-shadow:none;padding:6px 14px;font-weight:500}
.btn:hover,button:hover{background:var(--pri2);border-color:var(--pri2)}
.btn.sec,button.sec{background:#fff;color:var(--text);border:1px solid var(--line2)}
[data-theme=dark] .btn.sec,[data-theme=dark] button.sec{background:var(--panel2)}
.btn.sec:hover,button.sec:hover{background:var(--priSoft);border-color:var(--pri)}
.btn.dng,button.dng{background:#e0484f;border-color:#e0484f}.btn.ok,button.ok{background:var(--pri)}
.topnav .kbar{padding:6px 11px}
input[type=text],input[type=password],input[type=date],input[type=month],input[type=time],input[type=number],input[type=email],input[type=file],input[type=datetime-local],select,textarea{border-radius:4px}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(94,167,45,.25);border-color:var(--pri)}
.chip{border-radius:4px}.tag{border-radius:4px}
.tabs{border-bottom:1px solid var(--line)}.tabs a{border-radius:0;border-bottom:3px solid transparent;margin-bottom:-1px}.tabs a.on{border-color:var(--pri);background:transparent;color:var(--link)}
.callout{border-radius:6px}dialog{border-radius:8px}.cmd-box{border-radius:10px}
.wiz span{border-radius:4px}.wiz span.on{background:var(--pri);border-color:var(--pri)}
.dcol .fl{background:var(--c1);border-radius:2px 2px 0 0}
.av{background:var(--priSoft);color:var(--pri2)}
.step.done .n{background:var(--pri)}
pre{border-left:0;border-radius:6px}code{background:var(--priSoft);color:var(--link)}
.foot{border-top:1px solid var(--line)}
/* sign-in / installer: clean green split */
.lbg{background:linear-gradient(160deg,#7cc242 0%,#5ea72d 55%,#3b404e 55.2%,#2c303b 100%)}
.login{border-radius:10px;border-top:0;box-shadow:0 20px 60px rgba(20,25,35,.35)}
.login .tlogo{background:var(--hdr);color:#fff;border-radius:12px;box-shadow:none}
/* ===== fit to page: nothing is cut off, every page uses the full width ===== */
.main{max-width:none;padding:18px 22px 36px;min-width:0}
.work{min-width:0;overflow-x:clip}
img,svg,video,canvas,iframe{max-width:100%}
.tw{max-width:100%}
table{width:100%}
th,td{padding:8px 11px}
td{white-space:normal;word-break:break-word;overflow-wrap:anywhere}
td.num,td.nw,.rowbtns,.roster td,.roster th,.tp td,.tp th{white-space:nowrap;word-break:normal;overflow-wrap:normal}
.rowbtns{width:1%}
pre,.codeblock{max-width:100%;overflow-x:auto}
.phead{flex-wrap:wrap}.pact{flex-wrap:wrap}
.filters{row-gap:8px}
.formgrid{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.wb{grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr))}
.doorgrid{grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.cal{min-width:0}.cd{min-width:0;overflow:hidden}
.dcols,.mcols{max-width:100%}
.brow{grid-template-columns:minmax(80px,130px) 1fr 60px}
@media(max-width:1300px){.dgrid{grid-template-columns:1fr}}
@media(max-width:700px){.main{padding:12px 10px 28px}.formgrid,.g2,.g3,.g4{grid-template-columns:1fr}th,td{padding:7px 8px}.kv{grid-template-columns:110px 1fr}}
@media(min-width:901px) and (max-width:1500px){.mods{border-top:1px solid rgba(0,0,0,.12)}.tbrand{background:transparent}}
@media(max-width:900px){.subnav{width:260px}.tbrand{width:auto}}

/* two-row header on narrower / zoomed screens (must stay last) */
@media(min-width:901px) and (max-width:1500px){
  :root{--navh:90px}
  .topnav{height:auto;flex-wrap:wrap;padding-top:0}
  .tbrand{height:44px;width:auto;min-width:230px}
  .topr{height:44px;margin-left:auto}
  .mods{order:3;flex:1 0 100%;height:46px;overflow-x:auto}
  .mod{height:46px}
}
@media(max-width:900px){:root{--navh:56px}.subnav{top:56px;height:calc(100vh - 56px)}}