/* ===================== Design tokens ===================== */
:root{
  --bg:#eef2f4;
  --bg-elevated:#ffffff;
  --bg-sunken:#e2e8ec;
  --bg-hover:#e7edf0;
  --border:#d3dce1;
  --border-strong:#b7c3ca;
  --text:#152026;
  --text-muted:#54636c;
  --text-faint:#8996a0;
  --accent:#0e7c8c;
  --accent-strong:#0a5e6c;
  --accent-soft:#dcf0f2;
  --accent-contrast:#ffffff;
  --ok:#1c8a54;
  --ok-soft:#dcf3e5;
  --warn:#a8720a;
  --warn-soft:#faedd2;
  --crit:#c23c3c;
  --crit-soft:#fbdfdf;
  --info:#3a6ea5;
  --info-soft:#dde9f5;
  --badge-bg:#2b3339;
  --badge-fg:#ffffff;
  --shadow-sm:0 1px 2px rgba(20,32,40,.08);
  --shadow-md:0 4px 16px rgba(20,32,40,.10);
  --radius:10px;
  --radius-sm:6px;
  --font-display:'IBM Plex Sans Condensed',system-ui,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0c1417;
    --bg-elevated:#141e23;
    --bg-sunken:#0a1114;
    --bg-hover:#1a262c;
    --border:#233238;
    --border-strong:#33454c;
    --text:#e7eef1;
    --text-muted:#9fb1ba;
    --text-faint:#67787f;
    --accent:#38b6c7;
    --accent-strong:#6ad4e3;
    --accent-soft:#132f34;
    --accent-contrast:#04181b;
    --ok:#3fcf85;
    --ok-soft:#0f2a1c;
    --warn:#e2ab42;
    --warn-soft:#2c2310;
    --crit:#f16b66;
    --crit-soft:#301415;
    --info:#7bacdd;
    --info-soft:#122234;
    --badge-bg:#ffffff;
    --badge-fg:#0c1417;
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow-md:0 6px 20px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --bg:#0c1417; --bg-elevated:#141e23; --bg-sunken:#0a1114; --bg-hover:#1a262c;
  --border:#233238; --border-strong:#33454c; --text:#e7eef1; --text-muted:#9fb1ba; --text-faint:#67787f;
  --accent:#38b6c7; --accent-strong:#6ad4e3; --accent-soft:#132f34; --accent-contrast:#04181b;
  --ok:#3fcf85; --ok-soft:#0f2a1c; --warn:#e2ab42; --warn-soft:#2c2310; --crit:#f16b66; --crit-soft:#301415;
  --info:#7bacdd; --info-soft:#122234; --badge-bg:#ffffff; --badge-fg:#0c1417; --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 6px 20px rgba(0,0,0,.45);
}

*{box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:13.5px;line-height:1.5;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;text-wrap:balance;margin:0;color:var(--text);}
::selection{background:var(--accent-soft);}
a{color:var(--accent-strong);}
button{font-family:inherit;}
::-webkit-scrollbar{height:10px;width:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:6px;}

.app{max-width:2000px;margin:0 auto;padding:18px clamp(14px,2vw,28px) 60px;}

/* ---------- header ---------- */
.app-header{display:flex;align-items:center;gap:14px;padding:4px 2px 16px;border-bottom:1px solid var(--border);margin-bottom:16px;}
.app-header .mark{width:40px;height:40px;border-radius:10px;background:linear-gradient(155deg,var(--accent),var(--accent-strong));display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow-sm);}
.app-header .mark svg{width:22px;height:22px;}
.app-header .titles{display:flex;flex-direction:column;gap:1px;}
.app-header h1{font-size:19px;letter-spacing:.2px;}
.app-header .sub{font-size:12px;color:var(--text-muted);}
.app-header .spacer{flex:1;}
.app-header .stat{display:flex;flex-direction:column;align-items:flex-end;gap:0;font-family:var(--font-mono);}
.app-header .stat b{font-size:15px;color:var(--text);}
.app-header .stat span{font-size:10.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em;}

/* ---------- import bar ---------- */
.import-bar{display:flex;align-items:stretch;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.dropzone{flex:1;min-width:260px;border:1.5px dashed var(--border-strong);border-radius:var(--radius);background:var(--bg-elevated);display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:border-color .15s,background .15s;}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:var(--accent-soft);}
.dropzone .icon{width:30px;height:30px;flex-shrink:0;color:var(--accent);}
.dropzone .txt strong{display:block;font-size:13px;}
.dropzone .txt span{font-size:11.5px;color:var(--text-muted);}
.captures-strip{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.capture-chip{display:flex;align-items:center;gap:8px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:999px;padding:6px 8px 6px 12px;font-size:12px;box-shadow:var(--shadow-sm);}
.capture-chip .k{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.capture-chip .k.master{background:var(--accent);}
.capture-chip .k.station{background:var(--info);}
.capture-chip .k.unknown{background:var(--text-faint);}
.capture-chip .lbl{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;}
.capture-chip .meta{color:var(--text-faint);font-family:var(--font-mono);font-size:10.5px;}
.capture-chip button{border:none;background:var(--bg-sunken);color:var(--text-muted);width:18px;height:18px;border-radius:50%;cursor:pointer;line-height:1;font-size:12px;}
.capture-chip button:hover{background:var(--crit-soft);color:var(--crit);}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto;}
.tab-btn{border:none;background:transparent;color:var(--text-muted);font-family:var(--font-display);font-weight:600;font-size:13px;padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;display:flex;align-items:center;gap:6px;}
.tab-btn:hover{color:var(--text);background:var(--bg-hover);}
.tab-btn.active{color:var(--accent-strong);border-bottom-color:var(--accent);}
.tab-btn .cnt{font-family:var(--font-mono);font-size:10.5px;background:var(--bg-sunken);color:var(--text-muted);padding:1px 6px;border-radius:999px;}
.tab-btn.active .cnt{background:var(--accent-soft);color:var(--accent-strong);}

/* ---------- generic layout bits ---------- */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;}
.card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:13px 15px;box-shadow:var(--shadow-sm);}
.card h3{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint);margin-bottom:8px;font-weight:600;}
.kv{display:flex;flex-direction:column;gap:6px;}
.kv .row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;}
.kv .row .k{color:var(--text-muted);}
.kv .row .v{font-family:var(--font-mono);font-weight:500;text-align:right;min-width:0;overflow-wrap:break-word;}
.big-stat{font-family:var(--font-display);font-size:26px;font-weight:700;}
.big-stat .unit{font-size:12px;color:var(--text-faint);font-weight:500;margin-left:3px;}

.section{margin-bottom:22px;}
.section-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.section-head h2{font-size:14px;}
.section-head .hint{font-size:11.5px;color:var(--text-faint);}

.badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.03em;font-family:var(--font-display);white-space:nowrap;word-break:normal;overflow-wrap:normal;}
.badge.ok{background:var(--ok-soft);color:var(--ok);}
.badge.crit{background:var(--crit-soft);color:var(--crit);}
.badge.warn{background:var(--warn-soft);color:var(--warn);}
.badge.info{background:var(--info-soft);color:var(--info);}
.badge.neutral{background:var(--bg-sunken);color:var(--text-muted);}
.badge.accent{background:var(--accent-soft);color:var(--accent-strong);}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;}
.dot.ok{background:var(--ok);} .dot.crit{background:var(--crit);} .dot.warn{background:var(--warn);} .dot.neutral{background:var(--text-faint);}

.empty-panel{text-align:center;padding:60px 20px;color:var(--text-muted);}
.empty-panel svg{width:44px;height:44px;color:var(--text-faint);margin-bottom:10px;}

/* ---------- table ---------- */
.table-tools{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.search-input,.select-input,.text-input{font-family:var(--font-body);font-size:12.5px;padding:6px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);}
.search-input{min-width:200px;}
.search-input:focus,.select-input:focus,.text-input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent);}
.chip-toggle{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-muted);cursor:pointer;user-select:none;font-family:var(--font-display);}
.chip-toggle.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong);}
.chip-toggle .n{font-family:var(--font-mono);opacity:.75;}

.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elevated);}
table.dtable{border-collapse:collapse;width:100%;font-size:12px;}
table.dtable th{position:sticky;top:0;background:var(--bg-sunken);text-align:left;padding:7px 10px;font-family:var(--font-display);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);white-space:nowrap;border-bottom:1px solid var(--border);cursor:pointer;}
table.dtable th:hover{color:var(--text);}
table.dtable th.sorted{color:var(--accent-strong);}
table.dtable td{padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap;font-variant-numeric:tabular-nums;}
table.dtable tbody tr:hover{background:var(--bg-hover);}
table.dtable td.wrap{white-space:normal;}
table.dtable td.mono,table.dtable th.mono{font-family:var(--font-mono);}
.pager{display:flex;align-items:center;gap:10px;justify-content:flex-end;padding:8px 4px;font-size:11.5px;color:var(--text-muted);}
.pager button{border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);border-radius:var(--radius-sm);padding:4px 9px;cursor:pointer;}
.pager button:disabled{opacity:.35;cursor:default;}

/* ---------- log console ---------- */
.log-row-ERROR{color:var(--crit);}
.log-row-WARNING{color:var(--warn);}
.log-row-NOTICE{color:var(--info);}
.sev-badge{font-family:var(--font-mono);font-size:10px;font-weight:600;padding:1px 6px;border-radius:4px;}
.sev-ERROR{background:var(--crit-soft);color:var(--crit);}
.sev-WARNING{background:var(--warn-soft);color:var(--warn);}
.sev-NOTICE{background:var(--info-soft);color:var(--info);}
.sev-INFO{background:var(--bg-sunken);color:var(--text-muted);}

/* ---------- sync tree ---------- */
.sync-subtabs{display:flex;gap:6px;margin-bottom:12px;}
.pill-btn{border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-muted);font-family:var(--font-display);font-weight:600;font-size:12px;padding:6px 12px;border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:6px;}
.pill-btn:hover{color:var(--text);background:var(--bg-hover);}
.pill-btn.active{color:var(--accent-contrast);background:var(--accent);border-color:var(--accent);}
.sync-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.zoom-controls{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.zoom-controls button[data-zoom]{border:1px solid var(--border);background:var(--bg-elevated);border-radius:var(--radius-sm);width:26px;height:26px;cursor:pointer;color:var(--text);}
.sync-layout{display:grid;grid-template-columns:1fr minmax(300px,380px);gap:16px;align-items:start;}
.tree-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elevated);padding:14px;max-height:640px;}
.tree-svg-holder{transform-origin:0 0;}
.node-circle{stroke-width:2px;cursor:pointer;}
.node-label{font-family:var(--font-mono);font-size:9.5px;fill:var(--text);pointer-events:none;}
.node-label.small{font-size:8px;fill:var(--text-muted);}
.edge-line{fill:none;}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--text-muted);margin-top:8px;}
.legend .item{display:flex;align-items:center;gap:5px;}
.detail-panel{position:sticky;top:10px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:14px;min-height:200px;}
.detail-panel h3{font-size:13px;font-family:var(--font-display);margin-bottom:2px;}
.detail-panel .serial{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);margin-bottom:10px;}
.neigh-mini{width:100%;font-size:11px;border-collapse:collapse;}
.neigh-mini th{text-align:left;color:var(--text-faint);font-weight:600;font-size:9.5px;text-transform:uppercase;padding:3px 4px;}
.neigh-mini td{padding:3px 4px;font-family:var(--font-mono);border-top:1px solid var(--border);}
.rssi-bar{height:5px;border-radius:3px;background:var(--bg-sunken);overflow:hidden;width:60px;display:inline-block;vertical-align:middle;}
.rssi-bar i{display:block;height:100%;background:var(--accent);}

/* ---------- explorer ---------- */
.explorer-layout{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start;}
.file-tree{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elevated);max-height:640px;overflow:auto;}
.file-tree .dir-row{padding:7px 12px 4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:600;border-top:1px solid var(--border);}
.file-tree .dir-row:first-child{border-top:none;}
.file-row{display:flex;justify-content:space-between;gap:8px;padding:6px 12px;cursor:pointer;font-size:12px;border-left:2px solid transparent;}
.file-row:hover{background:var(--bg-hover);}
.file-row.active{background:var(--accent-soft);border-left-color:var(--accent);color:var(--accent-strong);}
.file-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);}
.file-row .sz{color:var(--text-faint);font-family:var(--font-mono);font-size:10.5px;flex-shrink:0;}
.preview-pane{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elevated);min-height:640px;display:flex;flex-direction:column;}
.preview-head{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted);align-items:center;}
.preview-body{padding:0;overflow:auto;flex:1;max-height:600px;}
.preview-body pre{margin:0;padding:14px;font-family:var(--font-mono);font-size:11.5px;white-space:pre-wrap;word-break:break-word;}
.preview-body .binmsg{padding:40px;text-align:center;color:var(--text-faint);}

/* ---------- misc ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:920px){.two-col{grid-template-columns:1fr;} .sync-layout,.explorer-layout{grid-template-columns:1fr;}}
details.stat-block{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;}
details.stat-block summary{padding:11px 15px;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:12.5px;list-style:none;display:flex;align-items:center;gap:8px;}
details.stat-block summary::-webkit-details-marker{display:none;}
details.stat-block summary:before{content:'▸';color:var(--text-faint);font-size:10px;}
details.stat-block[open] summary:before{content:'▾';}
details.stat-block .body{padding:0 15px 15px;}
.footnote{font-size:11px;color:var(--text-faint);margin-top:6px;}
.app-footer{margin-top:32px;padding-top:14px;border-top:1px solid var(--border);text-align:center;font-size:10.5px;line-height:1.6;color:var(--text-faint);}
.app-footer .footer-link{color:inherit;font-weight:700;letter-spacing:.02em;text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:2px;}
.app-footer .footer-link:hover{color:var(--text-muted);text-decoration-color:currentColor;}
code.inline{font-family:var(--font-mono);background:var(--bg-sunken);padding:1px 5px;border-radius:4px;font-size:11.5px;}

/* ---------- click-through / interactive affordances ---------- */
.clickable{cursor:pointer;transition:box-shadow .12s,border-color .12s,background .12s;}
.card.clickable:hover{border-color:var(--accent);box-shadow:var(--shadow-md);}
.app-header .stat.clickable{border-radius:8px;padding:3px 7px;margin:-3px -7px;cursor:pointer;}
.app-header .stat.clickable:hover{background:var(--bg-hover);}
.capture-chip.clickable:hover{border-color:var(--accent);background:var(--bg-hover);}
.badge.clickable:hover{filter:brightness(1.08);text-decoration:underline;}
.pcs-link{cursor:pointer;color:var(--accent-strong);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;font-weight:600;}
.pcs-link:hover{color:var(--accent);}

/* ---------- theme toggle ---------- */
.theme-toggle{border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-muted);border-radius:999px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-left:10px;flex-shrink:0;}
.theme-toggle:hover{color:var(--text);border-color:var(--accent);}
.theme-toggle svg{width:16px;height:16px;}

/* ---------- language switcher (IT / EN) ----------
   Same pill/segmented shape as .pill-btn and .chip-toggle, sized to sit next to the
   round theme toggle in the header. Colors are the existing design tokens only. */
.lang-switch{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--border);background:var(--bg-elevated);border-radius:999px;padding:2px;margin-left:18px;flex-shrink:0;}
.lang-switch button{border:none;background:transparent;color:var(--text-muted);font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.05em;padding:4px 9px;border-radius:999px;cursor:pointer;line-height:1.35;}
.lang-switch button:hover{color:var(--text);background:var(--bg-hover);}
.lang-switch button.active{background:var(--accent);color:var(--accent-contrast);}

/* ---------- generic buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);border-radius:var(--radius-sm);padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font-display);text-decoration:none;}
.btn:hover{border-color:var(--accent);color:var(--accent-strong);}
.btn svg{width:14px;height:14px;}
.btn:disabled{opacity:.5;cursor:default;}

/* ---------- modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(8,14,18,.6);display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px;}
.modal-overlay[hidden]{display:none;}
.modal-box{position:relative;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);max-width:min(760px,92vw);max-height:86vh;overflow:auto;padding:22px 24px;}
.modal-box h3{font-size:14px;margin-bottom:12px;padding-right:20px;}
.modal-close{position:absolute;top:10px;right:10px;border:none;background:var(--bg-sunken);color:var(--text-muted);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:13px;line-height:1;}
.modal-close:hover{background:var(--crit-soft);color:var(--crit);}
.modal-box img{max-width:100%;height:auto;border-radius:6px;border:1px solid var(--border);display:block;}

/* ---------- legacy hardware highlight ---------- */
table.dtable tbody tr.row-legacy-crit{background:var(--crit-soft);}
table.dtable tbody tr.row-legacy-crit:hover{background:var(--crit-soft);}
table.dtable tbody tr.row-legacy-warn{background:var(--warn-soft);}
table.dtable tbody tr.row-legacy-warn:hover{background:var(--warn-soft);}