@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:200 800;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2")}

:root{
  --bg:#EDF0F4;--surface:#FFFFFF;--surface-2:#F5F7FA;--ink:#15212E;--ink-2:#455568;--ink-3:#66768A;
  --line:#D8DEE6;--line-2:#E8ECF1;
  --accent:#2548D0;--accent-ink:#FFFFFF;--accent-soft:#E7ECFD;
  --ok:#127A63;--ok-soft:#DFF2EC;--ok-fill:#1F9E80;
  --warn:#9A5A00;--warn-soft:#FDEFD6;--warn-fill:#E8920C;
  --crit:#C42142;--crit-soft:#FCE3E8;--crit-fill:#D6264A;
  --idle:#8794A5;--maint:#4A69A6;--maint-soft:#E3EAF7;
  --chart-1:#5B7FD0;
  --side:#14263A;--side-ink:#BCC8D6;--side-hi:#FFFFFF;--side-active:#233D5A;--side-line:#243950;
  --shadow:0 12px 32px rgba(10,20,35,.18);
  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Bricolage Grotesque","IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --r-panel:8px;--r-ctl:6px;--r-tag:4px;
  color-scheme:light;
}
[data-theme=dark]{
  --bg:#0D1620;--surface:#142030;--surface-2:#192738;--ink:#E6EBF1;--ink-2:#A8B5C5;--ink-3:#8696AA;
  --line:#26374B;--line-2:#1F3045;
  --accent:#8FA8FF;--accent-ink:#0D1620;--accent-soft:#1E2D52;
  --ok:#4CCBA8;--ok-soft:#133A33;--ok-fill:#2FB592;
  --warn:#F2AC48;--warn-soft:#3C2D12;--warn-fill:#F0A03A;
  --crit:#FF7088;--crit-soft:#47202B;--crit-fill:#F25573;
  --idle:#7B8CA0;--maint:#8DA9E6;--maint-soft:#1F2D48;
  --chart-1:#7C9BFF;
  --side:#0A131D;--side-active:#18293C;--side-line:#16263A;
  --shadow:0 12px 32px rgba(0,0,0,.5);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{font-size:14px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.45 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
h1,h2,h3{margin:0;font-weight:600}
.mono{font-family:var(--mono);font-size:12.5px}
.muted{color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums}
.right{text-align:right}
.nowrap{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* struttura */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.side{background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 16px;color:var(--side-hi);font:600 17px var(--display);letter-spacing:.1px}
.brand:hover{text-decoration:none}
#nav{display:flex;flex-direction:column;gap:2px;padding:6px 10px;flex:1;overflow-y:auto}
#nav a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--r-ctl);color:var(--side-ink);font-weight:500}
#nav a:hover{background:var(--side-line);text-decoration:none;color:var(--side-hi)}
#nav a[aria-current=page]{background:var(--side-active);color:var(--side-hi);box-shadow:inset 3px 0 0 #E8A317}
#nav svg{flex:none;opacity:.85}
#nav .count{margin-left:auto;font-size:12px;padding:0 7px;border-radius:10px;background:var(--crit-fill);color:#fff;font-weight:600}
#nav .count.warn{background:var(--warn-fill);color:#1b1200}
.side-foot{padding:12px 10px;border-top:1px solid var(--side-line)}
.side-btn{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;background:none;border:0;border-radius:var(--r-ctl);color:var(--side-ink);cursor:pointer;font-weight:500}
.side-btn:hover{background:var(--side-line);color:var(--side-hi)}
.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:14px;padding:10px 28px;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:20}
.top-info{margin-left:auto;color:var(--ink-3);font-size:13px}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-ctl);padding:6px;color:var(--ink);cursor:pointer}
.gsearch{position:relative;width:min(360px,100%)}
.gsearch input{width:100%;padding:7px 34px 7px 12px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface-2)}
.gsearch kbd{position:absolute;right:9px;top:7px;font:12px var(--mono);color:var(--ink-3);border:1px solid var(--line);border-radius:4px;padding:0 5px;background:var(--surface)}
.gsres{position:absolute;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--shadow)}
.gsres li{padding:7px 10px;border-radius:var(--r-ctl);cursor:pointer;display:flex;justify-content:space-between;gap:12px}
.gsres li[aria-selected=true]{background:var(--accent-soft)}
#view{padding:24px 28px 56px;max-width:1500px;width:100%;outline:none}

/* testata di pagina */
.page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.page-head h1{font:600 28px/1.15 var(--display);letter-spacing:-.2px}
.page-head .sub{color:var(--ink-3);margin-top:3px}
.page-head .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumb{font-size:13px;color:var(--ink-3);margin-bottom:6px}

/* pannelli */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel)}
.panel+.panel{margin-top:16px}
.panel-h{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line-2)}
.panel-h h2{font-size:15px}
.panel-h .aside{margin-left:auto;color:var(--ink-3);font-size:13px;display:flex;gap:10px;align-items:center}
.panel-b{padding:16px}
.grid2{align-items:start;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;margin-top:16px}
.grid2>.panel+.panel{margin-top:0}
.grid3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.grid3>.panel+.panel{margin-top:0}
.grid3+.panel,.grid2+.grid2{margin-top:16px}

/* striscia KPI */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel)}
.kpi{padding:16px 18px;border-left:1px solid var(--line-2);color:inherit;display:block}
.kpi:first-child{border-left:0}
a.kpi:hover{text-decoration:none;background:var(--surface-2)}
.kpi .lbl{color:var(--ink-3);font-size:13px}
.kpi .val{font:600 34px/1.1 var(--display);margin:4px 0 2px;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.kpi .val small{font:500 16px var(--font);color:var(--ink-3);letter-spacing:0}
.kpi .val.crit{color:var(--crit)}
.kpi .det{color:var(--ink-3);font-size:13px}

/* tabelle */
.tw{overflow-x:auto}
table.t{width:100%;border-collapse:collapse}
.t th,.t td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:middle}
.t th{font-weight:500;color:var(--ink-3);font-size:13px;white-space:nowrap;background:var(--surface-2);position:sticky;top:0}
.t th.sortable{cursor:pointer;user-select:none}
.t th.sortable:hover{color:var(--ink)}
.t th[aria-sort]{color:var(--ink)}
.t tbody tr:hover>td{background:var(--surface-2)}
.t tr.sel>td{background:var(--accent-soft)}
.t tr.crit-row>td:first-child{box-shadow:inset 3px 0 0 var(--crit-fill)}
.t td.chk,.t th.chk{width:38px;padding-right:0}
.t td.tog{width:34px;padding:0 0 0 6px}
.t tr.sub>td{background:var(--surface-2);padding:10px 12px 14px 52px}
.t tr.sub:hover>td{background:var(--surface-2)}
.t.in th{position:static;background:transparent;font-size:12.5px}
.t.in td,.t.in th{padding:6px 12px 6px 0}
.t.in tr:last-child td{border-bottom:0}
.t td.det{max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2);font-family:var(--mono);font-size:12px}
.name{font-weight:500;color:var(--ink)}
.name small{display:block;font-weight:400;color:var(--ink-3);font-size:12.5px}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:3px 16px;font-family:var(--mono);font-size:12.5px}
.kv.plain{font-family:var(--font);font-size:14px}
.kv dt{color:var(--ink-3)}.kv dd{margin:0;word-break:break-all}
.empty{padding:36px 16px;text-align:center;color:var(--ink-3)}
.empty strong{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}

/* controlli */
.btn{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);cursor:pointer;font-weight:500;color:var(--ink);white-space:nowrap}
.btn:hover{background:var(--surface-2);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 45%,var(--line))}
.btn.danger.solid{background:var(--crit-fill);border-color:var(--crit-fill);color:#fff}
.btn.sm{padding:3px 9px;font-size:13px}
.btn.ghost{border-color:transparent;background:none}
.btn.ghost:hover{background:var(--surface-2)}
.btn[disabled]{opacity:.45;cursor:default;filter:none}
.btn.icon{padding:5px}
.tog-btn{width:24px;height:24px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:5px;background:var(--surface);cursor:pointer;padding:0}
.tog-btn:hover{background:var(--accent-soft)}
.in-txt,.in-sel,.in-area{padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);min-width:0}
.in-area{width:100%;resize:vertical;font-family:var(--mono);font-size:13px}
.in-txt::placeholder{color:var(--ink-3)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line-2)}
.toolbar .grow{flex:1;min-width:180px}
.toolbar .sp{margin-left:auto}
.bulkbar{display:flex;gap:10px;align-items:center;padding:8px 16px;background:var(--accent-soft);border-bottom:1px solid var(--line-2)}
.chk-l{display:inline-flex;gap:7px;align-items:center;cursor:pointer}
.pager{flex-wrap:wrap;display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--line-2);color:var(--ink-3);font-size:13px}
.pager .sp{flex-wrap:wrap;margin-left:auto;display:flex;gap:6px;align-items:center}

/* etichette di stato */
.tag{display:inline-flex;align-items:center;gap:6px;padding:1px 8px;border-radius:var(--r-tag);font-size:12.5px;font-weight:500;white-space:nowrap}
.tag i{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block;flex:none}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.crit{background:var(--crit-soft);color:var(--crit)}
.tag.idle{background:var(--surface-2);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line)}
.tag.maint{background:var(--maint-soft);color:var(--maint)}
.tag.info{background:var(--accent-soft);color:var(--accent)}
.tag.sq i{border-radius:2px}
.crit-n{color:var(--crit);font-weight:600}

/* mappa a esagoni */
.hexwrap{padding:14px 16px 6px}
.hexmap{display:block;width:100%}
.hexmap a{outline:none}
.hex{stroke:none;transition:filter .1s}
.hex.ok{fill:var(--ok-fill)}.hex.partial{fill:var(--warn-fill)}.hex.silent{fill:var(--warn-fill)}
.hex.never{fill:var(--surface-2);stroke:var(--idle);stroke-width:1.5}
.hex.crit{stroke:var(--crit-fill);stroke-width:3.4px}
.hexmap a:hover .hex,.hexmap a:focus-visible .hex{filter:brightness(1.18) saturate(1.1)}
.hexmap a:focus-visible .hex{stroke:var(--ink);stroke-width:3px}
.hexmap .core{fill:var(--surface);opacity:.95}
.hexmap .bar{fill:var(--surface)}
.legend{display:flex;gap:16px;flex-wrap:wrap;padding:6px 16px 14px;color:var(--ink-2);font-size:13px}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend svg{flex:none}

/* grafico a barre */
.chart{width:100%;display:block}
.chart text{fill:var(--ink-3);font:12px var(--font)}
.chart .gl{stroke:var(--line-2);stroke-width:1}
.chart .b1{fill:var(--chart-1)}
.chart .b2{fill:var(--crit-fill)}
.chart .hit:hover{fill:var(--ink);fill-opacity:.06}
.tip{position:fixed;z-index:60;pointer-events:none;background:var(--ink);color:var(--bg);padding:6px 10px;border-radius:var(--r-ctl);font-size:13px;box-shadow:var(--shadow);max-width:280px}
.tip b{font-weight:600}

/* elenchi compatti */
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;gap:10px;align-items:center;padding:9px 16px;border-bottom:1px solid var(--line-2)}
.list li:last-child{border-bottom:0}
.list .grow{flex:1;min-width:0}
.list .grow a{font-weight:500}
.list small{display:block;color:var(--ink-3);font-size:12.5px}
.bar-row{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:10px;align-items:center;padding:7px 16px}
.bar-row .track{height:6px;background:var(--line-2);border-radius:3px;margin-top:5px}
.bar-row .track i{display:block;height:100%;background:var(--chart-1);border-radius:3px}

/* moduli */
.field{margin:0 0 16px}
.field>label,.field>.lab{display:block;font-weight:500;margin-bottom:5px}
.field .hint{color:var(--ink-3);font-size:13px;margin-top:4px}
.field .opts{display:flex;flex-direction:column;gap:6px}
.field .opts label{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.field .opts input{margin-top:3px}
.apply{display:flex;gap:8px;align-items:center;margin-bottom:5px}
.apply label{margin:0}
.err{color:var(--crit);min-height:1.3em;font-size:13px}
.note{padding:10px 12px;border-radius:var(--r-ctl);background:var(--warn-soft);color:var(--ink);border:1px solid color-mix(in srgb,var(--warn-fill) 50%,var(--line))}
.note.info{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.rcpt{display:flex;gap:6px;flex-wrap:wrap}
.rcpt span{font-size:12.5px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-tag);padding:0 7px}

/* finestre */
dialog{border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);padding:0;width:min(560px,calc(100vw - 32px));box-shadow:var(--shadow)}
dialog.wide{width:min(760px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(8,16,28,.55)}
.dlg-h{padding:16px 20px 0}
.dlg-h h2{font:600 20px var(--display)}
.dlg-b{padding:14px 20px;max-height:min(68vh,640px);overflow:auto}
.dlg-f{display:flex;gap:8px;justify-content:flex-end;padding:12px 20px 16px;border-top:1px solid var(--line-2)}

.toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:80}
.toast{background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:var(--r-ctl);box-shadow:var(--shadow);max-width:380px;border-left:4px solid var(--ok-fill)}
.toast.bad{border-left-color:var(--crit-fill)}

.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}.hex{transition:none}}

/* schermi stretti */
@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi:nth-child(3){border-left:0}.kpi:nth-child(n+3){border-top:1px solid var(--line-2)}.grid2,.grid3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;inset:0 auto 0 0;width:260px;z-index:50;transform:translateX(-100%);transition:transform .18s}
  .side.open{transform:none;box-shadow:var(--shadow)}
  .menu-btn{display:inline-flex}
  .top{padding:10px 14px}
  #view{padding:18px 14px 48px}
  .top-info{display:none}
}
@media (max-width:560px){.kpis{grid-template-columns:minmax(0,1fr)}.kpi{border-left:0;border-top:1px solid var(--line-2)}.kpi:first-child{border-top:0}}

/* ---------- login page ---------- */
.login{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh}
.login-art{position:relative;overflow:hidden;background:var(--side);color:var(--side-hi);display:flex;flex-direction:column;justify-content:space-between;padding:36px 52px 56px}
.login-art .lat{position:absolute;inset:0;width:100%;height:100%}
.lat polygon{fill:none;stroke:var(--side-line);stroke-width:1.2}
.lat polygon.dim{fill:var(--side-active);stroke:var(--side-active)}
.lat polygon.lit{fill:#E8A317;stroke:#E8A317;animation:glow 3.6s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.62}50%{opacity:1}}
.login-brand{position:relative;display:flex;align-items:center;gap:10px;font:600 18px var(--display)}
.login-brand.m{display:none;color:var(--ink);margin-bottom:26px}
.login-pitch{position:relative;max-width:460px}
.login-pitch h2{margin:0 0 14px;font:600 40px/1.08 var(--display);letter-spacing:-.4px;text-wrap:balance}
.login-pitch p{margin:0;color:var(--side-ink);font-size:15px;max-width:34ch}
.login-main{display:flex;align-items:center;justify-content:center;padding:32px 20px;background:var(--bg)}
.login-card{width:min(380px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);padding:34px 32px 30px;box-shadow:0 1px 2px rgba(10,20,35,.05)}
.login-card h1{margin:0;font:600 26px var(--display);letter-spacing:-.2px}
.login-sub{margin:6px 0 24px;color:var(--ink-3)}
.lf{margin-bottom:16px}
.lf label{display:block;font-weight:500;margin-bottom:5px}
.lf input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink)}
.lf input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.lf input[aria-invalid=true]{border-color:var(--crit)}
.pw{position:relative}
.pw input{padding-right:42px}
.eye{position:absolute;right:2px;top:2px;bottom:2px;width:38px;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:var(--r-ctl);color:var(--ink-3);cursor:pointer}
.eye:hover{color:var(--ink);background:var(--surface-2)}
.rem{display:flex;align-items:center;gap:8px;margin:2px 0 18px;color:var(--ink-2);cursor:pointer}
.login-err{margin:0 0 14px;padding:9px 11px;border-radius:var(--r-ctl);background:var(--crit-soft);color:var(--crit);border:1px solid color-mix(in srgb,var(--crit) 30%,transparent);font-size:13.5px}
.login-err[hidden]{display:none}
.login-go{width:100%;padding:10px 14px;border:0;border-radius:var(--r-ctl);background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:15px;cursor:pointer}
.login-go:hover{filter:brightness(1.08)}
.login-go[disabled]{opacity:.6;cursor:default;filter:none}
@media (max-width:860px){
  .login{grid-template-columns:minmax(0,1fr)}
  .login-art{display:none}
  .login-brand.m{display:flex}
  .login-main{align-items:flex-start;padding-top:9vh}
  .login-card{padding:28px 22px 24px}
}
@media (prefers-reduced-motion:reduce){.lat polygon.lit{animation:none}}

.steps{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--ink-2)}
code{font:12.5px var(--mono);background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-tag);padding:0 5px}
.kv.plain dd{word-break:normal;overflow-wrap:anywhere}

/* ---------- sensor management ---------- */
.err{white-space:pre-line}
dl.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:7px 18px;margin:0 0 14px}
dl.kv dt{color:var(--ink-3)}
dl.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.panel-b>.actions,.startbox .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.panel-b>.note{margin:0 0 12px}
.cmd{display:flex;gap:10px;align-items:flex-start;padding:9px 10px 9px 12px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface-2)}
.cmd code{flex:1;min-width:0;font-family:var(--mono);font-size:12.5px;overflow-wrap:anywhere;user-select:all}
.lab.sm{font-size:13px;color:var(--ink-3);margin:8px 0 4px}
.seg{display:flex;gap:6px;margin-bottom:12px}
.json{min-height:260px}
.startbox{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface-2);margin-bottom:14px}
.startbox .lab{font-weight:500;margin-bottom:8px}
.frow{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:10px}
.frow>.field{flex:1 1 200px;margin:0 0 6px;min-width:0}
.frow>.mini{flex:1 1 150px}
.frow.center{align-items:center}
.mini{display:flex;flex-direction:column;gap:3px;min-width:0}
.mini>span{font-size:12.5px;color:var(--ink-3)}
.mini .in-txt,.mini .in-sel{width:100%}
.hosts{display:flex;flex-direction:column;gap:12px}
.hostcard{border:1px solid var(--line);border-radius:var(--r-ctl);padding:12px 14px;background:var(--surface)}
.hc-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border:1px solid var(--line);border-radius:var(--r-tag);cursor:pointer;font-size:13px;background:var(--surface)}
.chip:has(input:checked){background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--accent)}
.chip.off{opacity:.45;cursor:default}
pre.out{margin:0;padding:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-ctl);font:12px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;max-height:420px;overflow:auto}
.dlg-b h3{font-size:15px;margin:14px 0 8px}
.panel>.tw{border-top:1px solid var(--line-2)}
.field>.in-txt,.field>.in-sel{width:100%}
dl.kv dt,dl.kv dd{font-family:inherit;font-size:inherit}
.vlans{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}

.ipbox{position:relative}
.ipmenu{position:absolute;z-index:30;left:0;right:0;top:100%;margin-top:2px;max-height:220px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-ctl);box-shadow:0 6px 18px rgba(0,0,0,.18);padding:4px}
.ipmenu[hidden]{display:none}
.ipmenu-h{padding:4px 8px;font-size:12px;color:var(--ink-3)}
.ipopt{display:block;width:100%;text-align:left;padding:5px 8px;border:0;background:none;color:var(--ink);font:inherit;font-family:var(--mono,monospace);border-radius:4px;cursor:pointer}
.ipopt:hover,.ipopt:focus{background:var(--hover,rgba(127,127,127,.15))}

.pick-list{max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-ctl);padding:6px 10px;margin-top:6px;display:grid;gap:4px}
.note.warn{margin-bottom:16px}

.qrbox{display:flex;justify-content:center;padding:8px 0}
.qr{border:1px solid var(--line);border-radius:6px}

/* customer portal: traps */
.trapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.trap{border:1px solid var(--line);border-radius:var(--r-ctl);padding:13px 14px;background:var(--surface);display:flex;flex-direction:column;gap:6px;min-width:0}
.trap.bad{border-color:var(--crit-fill)}
.trap-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.trap-h strong{font-size:15px;overflow-wrap:anywhere}
.trap-ip{margin-top:2px}
.trap .chips{margin:2px 0 0}
.chip.static{cursor:default;font-size:12.5px;padding:1px 8px}
.trap-smb{font-size:13px}
.trap-f{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px;border-top:1px solid var(--line-2);font-size:13px}
.grid2.even{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.t td.wrap{white-space:normal;min-width:200px}
.trusted-hint{margin-top:0}
@media (max-width:900px){.grid2.even{grid-template-columns:minmax(0,1fr)}}
.site-list{display:flex;flex-direction:column;gap:4px;min-width:180px}
.pills{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.site-pill{display:inline-block;padding:1px 8px;border:1px solid var(--line);border-radius:var(--r-tag);background:var(--surface-2);color:var(--ink);font-size:12.5px}
a.site-pill:hover{text-decoration:none;border-color:var(--accent);color:var(--accent)}

.contact{display:flex;flex-direction:column;gap:2px;min-width:160px}
.addr{white-space:pre-line;overflow-wrap:anywhere}
.row-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;min-width:270px}