:root {
  --bg: #090d10;
  --bg-2: #0d1317;
  --panel: #11191e;
  --panel-2: #151f25;
  --plot-bg: #071016;
  --line: #26343d;
  --grid: #20323d;
  --text: #e6edf0;
  --muted: #8fa0aa;
  --faint: #65747d;
  --accent: #59e391;
  --accent-2: #35b86e;
  --cyan: #61d7ff;
  --amber: #f6c177;
  --danger: #ff6b6b;
  --danger-soft: #2a1719;
  --shadow: 0 16px 45px rgba(0,0,0,.25);
  --radius: 14px;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="light"] {
  --bg: #eef2f3; --bg-2: #e4eaec; --panel: #ffffff; --panel-2:#f5f8f8; --plot-bg:#f8fbfc;
  --line:#cbd5d9; --grid:#dfe6e8; --text:#152128; --muted:#5f717c; --faint:#84939b;
  --accent:#087a46; --accent-2:#0e9254; --cyan:#007da5; --amber:#9b6200; --danger:#b1272f; --danger-soft:#fff0f0;
  --shadow: 0 12px 34px rgba(28,44,54,.10);
}

* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:var(--sans); }
body { overflow:hidden; }
button, input, select, textarea { font:inherit; }
button { color:inherit; }
code, pre { font-family:var(--mono); }

.app-shell { display:grid; grid-template-columns: 188px 1fr; grid-template-rows: 60px 1fr 34px; height:100vh; background:radial-gradient(circle at 78% -20%, rgba(89,227,145,.07), transparent 36%), var(--bg); }
.topbar { grid-column:1 / 3; display:grid; grid-template-columns:188px auto auto 1fr auto auto; align-items:center; gap:16px; padding:0 16px 0 12px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg-2) 94%,transparent); box-shadow:0 3px 18px rgba(0,0,0,.18); z-index:3; }
.brand-block { display:flex; align-items:center; gap:10px; letter-spacing:.08em; }
.brand-block strong { display:block; font-size:13px; }
.brand-block span { display:block; color:var(--muted); font-size:8px; margin-top:2px; letter-spacing:.16em; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--accent); color:var(--accent); border-radius:8px; font:700 13px var(--mono); box-shadow:inset 0 0 16px rgba(89,227,145,.08); }
.connection-state, .simulation-badge, .version, .workspace-label { font:700 11px var(--mono); letter-spacing:.08em; }
.connection-state { display:flex; align-items:center; gap:7px; color:var(--muted); }
.connection-state::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--faint); box-shadow:0 0 0 3px color-mix(in srgb,var(--faint) 16%,transparent); }
.connection-state.connected, .connection-state.streaming { color:var(--accent); }
.connection-state.connected::before, .connection-state.streaming::before { background:var(--accent); box-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent); }
.connection-state.connecting { color:var(--amber); }
.connection-state.connecting::before { background:var(--amber); }
.connection-state.error { color:var(--danger); }
.connection-state.error::before { background:var(--danger); }
.simulation-badge { color:var(--amber); border:1px solid color-mix(in srgb,var(--amber) 45%,var(--line)); border-radius:999px; padding:5px 8px; }
.workspace-label { justify-self:center; color:var(--muted); }
.version { color:var(--muted); }
.mode-toggle { display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.mode-toggle button { appearance:none; border:0; padding:6px 9px; background:transparent; color:var(--faint); font:700 9px var(--mono); letter-spacing:.08em; }
.mode-toggle button.active { background:var(--panel-2); color:var(--accent); }

.sidebar { grid-row:2; border-right:1px solid var(--line); background:var(--bg-2); display:flex; flex-direction:column; min-height:0; }
#side-nav { padding:12px 9px; display:flex; flex-direction:column; gap:5px; overflow:auto; }
.nav-item { appearance:none; width:100%; min-height:42px; border:1px solid transparent; border-radius:8px; background:transparent; display:flex; align-items:center; gap:11px; padding:0 11px; color:var(--muted); cursor:pointer; font:700 10px var(--mono); letter-spacing:.08em; text-align:left; }
.nav-item:hover { background:var(--panel); color:var(--text); }
.nav-item.active { background:var(--panel-2); color:var(--accent); border-color:var(--line); box-shadow:inset 2px 0 var(--accent); }
.nav-icon { width:22px; text-align:center; font-size:15px; color:currentColor; }
.sidebar-foot { margin-top:auto; padding:12px; border-top:1px solid var(--line); display:grid; gap:4px; color:var(--faint); font:700 8px var(--mono); letter-spacing:.12em; }

.main-view { grid-column:2; grid-row:2; overflow:auto; padding:24px; min-width:0; }
.statusbar { grid-column:1 / 3; grid-row:3; display:flex; align-items:center; gap:0; background:var(--bg-2); border-top:1px solid var(--line); color:var(--muted); font:700 9px var(--mono); letter-spacing:.04em; z-index:4; }
.statusbar > span { padding:0 14px; border-right:1px solid var(--line); white-space:nowrap; }
.statusbar > span:last-child { margin-left:auto; border:0; }
#status-rec.recording { color:var(--danger); }
.autosave.saved { color:var(--accent); }.autosave.saving { color:var(--amber); }.autosave.unsaved { color:var(--danger); }

.page-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:0 auto 18px; max-width:1500px; }
.eyebrow { color:var(--accent); font:800 9px var(--mono); letter-spacing:.18em; margin-bottom:7px; }
h1 { font-size:30px; line-height:1; margin:0 0 8px; letter-spacing:-.035em; }
.page-header p { margin:0; color:var(--muted); max-width:760px; font-size:13px; }
.page-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.panel { max-width:1500px; margin:0 auto 14px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 98%,white 2%), var(--panel)); box-shadow:var(--shadow); overflow:hidden; }
.panel-title { min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 14px; border-bottom:1px solid var(--line); color:var(--muted); font:700 9px var(--mono); letter-spacing:.11em; }
.hero-panel { padding-bottom:14px; }
.device-hero { display:flex; align-items:center; gap:16px; padding:22px 18px 18px; }
.device-mark { width:62px; height:62px; display:grid; place-items:center; border:1px solid var(--line); border-radius:15px; color:var(--accent); background:var(--plot-bg); font:800 22px var(--mono); box-shadow:inset 0 0 22px rgba(89,227,145,.06); }
.device-hero h2 { margin:0 0 5px; font-size:20px; }
.device-hero p { margin:0; color:var(--muted); font-size:12px; }
.instrument-grid { max-width:1500px; margin:0 auto 14px; display:grid; gap:14px; }
.instrument-grid.cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.instrument-grid .panel { width:100%; margin:0; }

.btn { appearance:none; border:1px solid var(--line); background:var(--panel-2); color:var(--text); min-height:34px; padding:0 12px; border-radius:8px; font:800 9px var(--mono); letter-spacing:.08em; cursor:pointer; }
.btn:hover:not(:disabled) { border-color:var(--muted); transform:translateY(-1px); }
.btn:disabled { opacity:.35; cursor:not-allowed; }
.btn.primary { color:#05140c; background:var(--accent); border-color:var(--accent); }
.btn.danger { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 40%,var(--line)); background:var(--danger-soft); }
.btn.warning { color:var(--amber); }
.btn.small { min-height:30px; padding:0 9px; }
.button-row { display:flex; gap:8px; flex-wrap:wrap; padding:0 18px; }

.status-list { padding:7px 14px 13px; }
.status-row { display:grid; grid-template-columns:10px 140px 1fr; align-items:center; gap:10px; padding:9px 0; border-bottom:1px dashed color-mix(in srgb,var(--line) 70%,transparent); font-size:11px; }
.status-row:last-child { border:0; }.status-row span:last-child { color:var(--muted); }
.lamp { width:7px; height:7px; border-radius:50%; background:var(--faint); }.lamp.ok { background:var(--accent); box-shadow:0 0 8px color-mix(in srgb,var(--accent) 55%,transparent); }.lamp.off { background:var(--faint); }
.state-pill { border:1px solid var(--line); padding:4px 7px; border-radius:999px; }.state-pill.connected,.state-pill.streaming { color:var(--accent); }.state-pill.error { color:var(--danger); }.state-pill.connecting { color:var(--amber); }
.alert { margin:14px 18px 0; padding:12px; border:1px solid var(--line); border-radius:8px; display:flex; gap:10px; font-size:11px; }.alert.error { background:var(--danger-soft); color:var(--danger); }

.kv-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.kv { min-width:0; padding:12px 14px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.kv span { display:block; color:var(--muted); font:700 8px var(--mono); letter-spacing:.09em; margin-bottom:4px; }.kv strong { display:block; font:600 11px var(--mono); overflow-wrap:anywhere; }
.kv-stack .kv { border-right:0; }
.compile-info { padding:14px; display:grid; gap:7px; }.compile-info span { color:var(--muted); font:700 8px var(--mono); letter-spacing:.1em; }.compile-info code { font-size:11px; white-space:pre-wrap; }

.control-strip { display:flex; align-items:end; gap:12px; padding:12px 14px; flex-wrap:wrap; }
label { color:var(--muted); font:700 8px var(--mono); letter-spacing:.08em; }
input, select, textarea { display:block; margin-top:6px; min-height:34px; border:1px solid var(--line); border-radius:7px; background:var(--plot-bg); color:var(--text); padding:0 9px; outline:none; font:600 11px var(--mono); }
input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 15%,transparent); }
input[type="range"] { width:160px; padding:0; }.check { display:flex; gap:7px; align-items:center; min-height:34px; }.check input { display:inline; min-height:auto; margin:0; }
.search { min-width:260px; margin:0; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:16px; }.form-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }.form-grid input,.form-grid select { width:100%; }

.chart-panel { padding-bottom:8px; }.spectrum-canvas { display:block; width:100%; height:320px; }.waterfall-canvas { display:block; width:100%; height:260px; image-rendering:auto; }
.chart-legend { display:flex; gap:16px; padding:8px 14px 3px; color:var(--muted); font:700 8px var(--mono); letter-spacing:.08em; }.chart-legend span::before { content:"—"; margin-right:5px; color:var(--accent); }.chart-legend span:nth-child(2)::before { color:var(--cyan); }.chart-legend span:nth-child(3)::before { color:var(--amber); }.chart-legend .marker::before { color:var(--danger); }
.metric-grid { max-width:1500px; margin:0 auto 14px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--panel); box-shadow:var(--shadow); }
.metric { padding:13px 14px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.metric span { display:block; color:var(--muted); font:700 8px var(--mono); letter-spacing:.1em; margin-bottom:4px; }.metric strong { font:700 17px var(--mono); }

.table-wrap { overflow:auto; max-height:620px; }
table { border-collapse:collapse; width:100%; font-size:11px; white-space:nowrap; }
th { position:sticky; top:0; z-index:1; background:var(--panel-2); color:var(--muted); text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font:800 8px var(--mono); letter-spacing:.08em; }
td { padding:9px 12px; border-bottom:1px solid color-mix(in srgb,var(--line) 74%,transparent); color:color-mix(in srgb,var(--text) 92%,var(--muted)); }
tr.clickable { cursor:pointer; } tr.clickable:hover td, tr.selected td { background:color-mix(in srgb,var(--accent) 7%,var(--panel)); }
td code { color:var(--cyan); font-size:10px; }.subtle { color:var(--faint); font-size:8px; margin-top:3px; }.tag { font:700 8px var(--mono); padding:3px 5px; border:1px solid var(--line); border-radius:5px; }.tag.warning { color:var(--amber); }
.spark { width:120px; height:28px; }.spark polyline { fill:none; stroke:var(--accent); stroke-width:1.5; vector-effect:non-scaling-stroke; }

.split-grid { max-width:1500px; margin:0 auto; display:grid; grid-template-columns:minmax(460px,.9fr) minmax(520px,1.1fr); gap:14px; align-items:start; }.split-grid .panel { margin:0; width:100%; }.packet-list .table-wrap { max-height:calc(100vh - 190px); }.inspector { min-height:520px; }
.inspector-title { min-height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid var(--line); }.inspector-title span { display:block; color:var(--muted); font:700 8px var(--mono); }.inspector-title strong { display:block; margin-top:3px; font:700 14px var(--mono); color:var(--accent); }.tabs { display:flex; gap:18px; padding:11px 14px; border-bottom:1px solid var(--line); color:var(--faint); font:700 8px var(--mono); }.tabs .active { color:var(--accent); }.inspector-sections { padding:0 14px 14px; }.inspector-sections h3 { color:var(--muted); font:800 9px var(--mono); letter-spacing:.1em; margin:16px 0 8px; }.hex-dump,.json-dump { margin:0; background:var(--plot-bg); border:1px solid var(--line); border-radius:8px; padding:12px; overflow:auto; color:var(--text); font-size:10px; line-height:1.65; max-height:330px; }.json-dump.tall { max-height:430px; }
.structure-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }.structure-field { display:grid; grid-template-columns:55px 90px 1fr; gap:8px; align-items:start; padding:8px; background:var(--plot-bg); border:1px solid var(--line); border-radius:7px; font-size:9px; }.structure-field .byte-range { color:var(--faint); font-family:var(--mono); }.structure-field strong { color:var(--muted); font-family:var(--mono); }.structure-field code { white-space:pre-wrap; overflow-wrap:anywhere; }

.timeline { max-height:330px; overflow:auto; padding:9px 14px; }.timeline-row { display:grid; grid-template-columns:75px 1fr; gap:8px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:10px; }.timeline-row time { color:var(--faint); font-family:var(--mono); }.timeline-row.error span { color:var(--danger); }.timeline-row.warning span { color:var(--amber); }
.diagnostic-log { max-height:360px; overflow:auto; background:var(--plot-bg); padding:8px 14px; font:10px/1.6 var(--mono); }.log-row { display:grid; grid-template-columns:92px 1fr; gap:12px; }.log-row time { color:var(--faint); }.log-row.error span { color:var(--danger); }.log-row.warning span { color:var(--amber); }

.toggle-stack { padding:10px 14px; }.switch-row { min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:1px dashed var(--line); color:var(--text); font:600 11px var(--sans); letter-spacing:0; }.switch-row input { position:absolute; opacity:0; pointer-events:none; }.switch-row i { width:34px; height:18px; border-radius:999px; background:var(--line); position:relative; }.switch-row i::after { content:""; position:absolute; width:12px; height:12px; border-radius:50%; background:var(--muted); left:3px; top:3px; transition:.15s; }.switch-row input:checked + i { background:color-mix(in srgb,var(--accent) 30%,var(--line)); }.switch-row input:checked + i::after { transform:translateX(16px); background:var(--accent); }
.note { max-width:1500px; margin:0 auto 14px; border-left:2px solid var(--amber); background:color-mix(in srgb,var(--amber) 6%,var(--panel)); padding:10px 12px; color:var(--muted); font-size:10px; }
.danger-zone { display:flex; align-items:center; justify-content:space-between; padding:14px; gap:20px; }.danger-zone strong { display:block; color:var(--danger); font:800 10px var(--mono); }.danger-zone span { display:block; color:var(--muted); font-size:10px; margin-top:4px; }
.empty-state { min-height:240px; display:grid; place-content:center; text-align:center; gap:7px; color:var(--muted); }.empty-state strong { color:var(--text); font:800 10px var(--mono); letter-spacing:.1em; }.empty-state.compact { min-height:70px; }

.toast { position:fixed; right:18px; bottom:50px; max-width:520px; transform:translateY(12px); opacity:0; pointer-events:none; background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:11px 13px; box-shadow:var(--shadow); color:var(--text); font-size:11px; transition:.18s; z-index:10; }.toast.show { opacity:1; transform:none; }.toast.error { border-color:color-mix(in srgb,var(--danger) 55%,var(--line)); color:var(--danger); }

.nav-collapsed { grid-template-columns:64px 1fr; }.nav-collapsed .topbar { grid-template-columns:64px auto auto 1fr auto auto; }.nav-collapsed .brand-block > div:last-child, .nav-collapsed .nav-label, .nav-collapsed .sidebar-foot { display:none; }.nav-collapsed .brand-block { justify-content:center; }.nav-collapsed .nav-item { justify-content:center; padding:0; }

@media (max-width: 1050px) {
  .app-shell { grid-template-columns:64px 1fr; }.topbar { grid-template-columns:64px auto auto 1fr auto; }.brand-block > div:last-child,.nav-label,.sidebar-foot,.workspace-label { display:none; }.brand-block { justify-content:center; }.nav-item { justify-content:center; padding:0; }.instrument-grid.cols-2,.split-grid { grid-template-columns:1fr; }.kv-grid { grid-template-columns:repeat(2,1fr); }.metric-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 720px) {
  .main-view { padding:14px; }.topbar { gap:8px; padding-right:8px; }.mode-toggle { display:none; }.page-header { align-items:flex-start; flex-direction:column; }.page-actions { justify-content:flex-start; }.form-grid,.form-grid.three { grid-template-columns:1fr; }.kv-grid { grid-template-columns:1fr; }.metric-grid { grid-template-columns:1fr 1fr; }.statusbar span:nth-child(2),.statusbar span:nth-child(3) { display:none; }.structure-grid { grid-template-columns:1fr; }
}

/* v0.1.4 hardware validation / soak diagnostics */
.validation-state { border:1px solid var(--line); padding:4px 7px; border-radius:999px; }
.validation-state.pass { color:var(--accent); }.validation-state.warn,.validation-state.running,.validation-state.stopped { color:var(--amber); }.validation-state.fail { color:var(--danger); }
.validation-list { padding:4px 14px 12px; }
.validation-row { display:grid; grid-template-columns:54px 180px 1fr 84px; gap:10px; align-items:center; padding:9px 0; border-bottom:1px dashed var(--line); font-size:10px; }
.validation-row:last-child { border-bottom:0; }.validation-row time { color:var(--faint); text-align:right; font:9px var(--mono); }
.validation-badge { display:inline-grid; place-items:center; min-height:22px; border:1px solid var(--line); border-radius:5px; font:800 8px var(--mono); }
.validation-row.pass .validation-badge { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); }.validation-row.warn .validation-badge { color:var(--amber); }.validation-row.fail .validation-badge { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 35%,var(--line)); }
.soak-controls { display:grid; grid-template-columns:minmax(220px,1fr) minmax(180px,.7fr) auto; gap:12px; align-items:end; padding:14px; border-bottom:1px solid var(--line); }.soak-controls select { width:100%; }.button-row.compact { padding:0; }
.soak-progress { height:5px; background:var(--plot-bg); border-bottom:1px solid var(--line); }.soak-progress > div { height:100%; background:var(--accent); transition:width .2s linear; }
.metric-grid.embedded { margin:0; max-width:none; border:0; border-radius:0; box-shadow:none; grid-template-columns:repeat(4,minmax(0,1fr)); }
.audit-table { max-height:440px; }.audit-table td { vertical-align:top; }.tag.ok { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); }
.audit-note { padding:10px 14px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
@media (max-width: 900px) { .soak-controls { grid-template-columns:1fr; }.validation-row { grid-template-columns:54px 1fr; }.validation-row > span:nth-of-type(2),.validation-row time { grid-column:2; text-align:left; }.metric-grid.embedded { grid-template-columns:repeat(2,1fr); } }

/* v0.2 spectrum instrument */
.spectrum-controls { overflow:hidden; }
.control-strip.secondary { border-top:1px solid var(--line); align-items:center; }
.control-strip output { margin-left:5px; color:var(--text); font:700 8px var(--mono); }
.control-divider { width:1px; height:28px; background:var(--line); display:inline-block; margin:0 2px; }
.spectrum-note strong { color:var(--amber); font:800 9px var(--mono); letter-spacing:.08em; }
.spectrum-note code { color:var(--cyan); }
.spectrum-canvas { cursor:crosshair; touch-action:none; }
.spectrum-cursor { min-height:27px; padding:7px 14px 5px; border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent); color:var(--muted); font:700 9px var(--mono); letter-spacing:.035em; }
.chart-legend { flex-wrap:wrap; }
.chart-legend .persistence::before { color:var(--faint); }
.marker-table { max-height:310px; }
.marker-note-input { min-width:220px; min-height:30px; margin:0; }
.marker-table td { vertical-align:middle; }

@media (max-width: 720px) {
  .control-divider { display:none; }
  .marker-note-input { min-width:150px; }
}

/* v0.3–v0.5 BLE evidence, packet provenance, capture replay */
#status-rec.replaying { color:var(--cyan); }
.filter-panel { overflow:visible; }
.filter-strip { display:flex; align-items:end; gap:10px; flex-wrap:wrap; padding:12px 14px; }
.filter-strip > label { min-width:130px; }
.filter-strip .search { min-width:280px; flex:1 1 320px; }
.header-select { min-height:34px; }
.ble-table { max-height:calc(100vh - 310px); }
.device-table { max-height:470px; }
.row-actions { display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
.btn.tiny { min-height:25px; padding:0 7px; font-size:7px; border-radius:6px; }
.btn.active { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 48%,var(--line)); }
.tag.danger { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 45%,var(--line)); }
tr.bookmarked td:first-child, tr.bookmarked td:nth-child(2) { color:var(--amber); }
.muted-row { opacity:.62; }
.activity { display:inline-flex; align-items:center; min-height:21px; padding:0 6px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font:800 7px var(--mono); letter-spacing:.07em; }
.activity.new { color:var(--cyan); }.activity.active,.activity.returned { color:var(--accent); }.activity.quiet { color:var(--amber); }.activity.gone { color:var(--faint); }
.device-detail .detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.device-detail .detail-grid > * { border-right:1px solid var(--line); }.device-detail .detail-grid > *:last-child { border-right:0; }
.detail-actions { padding:14px; border-top:1px solid var(--line); }
.packet-workbench { grid-template-columns:minmax(480px,.8fr) minmax(620px,1.2fr); }
.packet-nav-secondary { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:9px 14px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--panel-2) 65%,transparent); }
.byte-selection { margin-left:auto; color:var(--muted); font:700 8px var(--mono); }
.provenance { margin-top:12px; }
.provenance-row { width:100%; appearance:none; display:grid; grid-template-columns:55px 150px 1fr; gap:9px; align-items:start; padding:8px 9px; border:1px solid transparent; border-bottom-color:var(--line); background:transparent; text-align:left; color:var(--text); cursor:pointer; }
.provenance-row:hover { background:color-mix(in srgb,var(--accent) 6%,var(--panel)); border-color:color-mix(in srgb,var(--accent) 22%,var(--line)); }
.provenance-row span { color:var(--faint); font:8px var(--mono); }.provenance-row strong { color:var(--muted); font:800 8px var(--mono); }.provenance-row code { color:var(--cyan); overflow-wrap:anywhere; font-size:9px; }
.hex-evidence { background:var(--plot-bg); border:1px solid var(--line); border-radius:8px; padding:10px; overflow:auto; font:10px/1.7 var(--mono); }
.hex-line { display:grid; grid-template-columns:40px minmax(390px,1fr) 140px; gap:10px; white-space:nowrap; }
.hex-offset { color:var(--faint); }.hex-ascii { color:var(--muted); }
.hex-byte { display:inline-block; padding:0 1px; border-radius:3px; }.hex-byte.highlight { color:#071016; background:var(--amber); outline:1px solid color-mix(in srgb,var(--amber) 70%,white); }
.clickable-field { cursor:pointer; }.clickable-field:hover { border-color:color-mix(in srgb,var(--accent) 38%,var(--line)); background:color-mix(in srgb,var(--accent) 5%,var(--plot-bg)); }
.annotation-grid { display:grid; gap:10px; }.annotation-grid label { display:grid; gap:6px; color:var(--muted); font:800 8px var(--mono); letter-spacing:.08em; }
.annotation-grid textarea { min-height:86px; resize:vertical; width:100%; }
.annotation-state { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:9px; }.annotation-state span:first-child { color:var(--amber); font:800 8px var(--mono); }
.capture-identity { display:flex; align-items:end; justify-content:space-between; gap:16px; padding:12px 14px; }
.capture-identity label { flex:1; max-width:760px; }.capture-identity input { width:100%; }
.capture-source { display:grid; justify-items:end; gap:4px; }.capture-source span { color:var(--faint); font:800 7px var(--mono); letter-spacing:.1em; }.capture-source strong { color:var(--cyan); font:800 10px var(--mono); }
.replay-controls { display:flex; align-items:end; gap:7px; flex-wrap:wrap; padding:12px 14px; }.replay-controls label { margin-left:auto; }
.replay-progress { height:5px; background:var(--plot-bg); border-top:1px solid var(--line); }.replay-progress div { height:100%; background:var(--cyan); }
.replay-scrub { width:calc(100% - 28px); margin:10px 14px 14px; }
.library-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-bottom:1px solid var(--line); }.library-toolbar span { color:var(--faint); font:8px var(--mono); }
.capture-library { max-height:360px; }.capture-library strong { font-size:10px; }
.timeline-row { grid-template-columns:75px minmax(0,1fr) auto; align-items:center; }
.evidence-link { appearance:none; border:0; background:transparent; color:var(--cyan); cursor:pointer; padding:2px 4px; font:800 7px var(--mono); }

@media (max-width: 1100px) {
  .packet-workbench { grid-template-columns:1fr; }
  .device-detail .detail-grid { grid-template-columns:1fr; }
  .device-detail .detail-grid > * { border-right:0; border-bottom:1px solid var(--line); }
  .hex-line { grid-template-columns:40px minmax(390px,1fr); }.hex-ascii { display:none; }
}
@media (max-width: 720px) {
  .filter-strip .search { min-width:100%; }.provenance-row { grid-template-columns:45px 1fr; }.provenance-row code { grid-column:2; }
  .capture-identity { align-items:stretch; flex-direction:column; }.capture-source { justify-items:start; }
  .byte-selection { width:100%; margin-left:0; }.hex-line { grid-template-columns:34px minmax(360px,1fr); }
}

/* v0.6–v0.9 channel activity, timeline, passive follow/promisc, interoperability */
.ble-mode-panel { overflow:visible; }
.ble-mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); }
.mode-card { background:var(--panel); padding:14px; min-width:0; }
.mode-card-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.mode-card-title strong { font:800 11px var(--mono); letter-spacing:.08em; }
.mode-card p { color:var(--muted); font-size:10px; line-height:1.45; min-height:44px; margin:0 0 12px; }
.mode-card .button-row { padding:10px 0 0; }
.channel-grid { display:grid; grid-template-columns:repeat(8,minmax(92px,1fr)); gap:7px; padding:12px; }
.channel-card { appearance:none; min-width:0; min-height:126px; display:grid; align-content:start; gap:4px; padding:9px; border:1px solid var(--line); border-radius:8px; background:var(--plot-bg); color:var(--muted); text-align:left; cursor:pointer; }
.channel-card:hover { border-color:var(--muted); transform:translateY(-1px); }
.channel-card.selected { border-color:var(--accent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent); }
.channel-card.advertising { background:color-mix(in srgb,var(--cyan) 5%,var(--plot-bg)); }
.channel-card.hot { border-color:color-mix(in srgb,var(--accent) 42%,var(--line)); }
.channel-card.recent { border-color:color-mix(in srgb,var(--amber) 30%,var(--line)); }
.channel-number { color:var(--text); font:900 18px var(--mono); line-height:1; }
.channel-kind { justify-self:start; padding:2px 5px; border:1px solid var(--line); border-radius:999px; color:var(--faint); font:800 7px var(--mono); letter-spacing:.08em; }
.channel-card.advertising .channel-kind { color:var(--cyan); }
.channel-card strong { color:var(--text); font:800 9px var(--mono); }
.channel-card span:not(.channel-number):not(.channel-kind) { font:8px var(--mono); }
.channel-card i { height:4px; margin-top:4px; border-radius:999px; background:var(--line); overflow:hidden; }
.channel-card i b { display:block; height:100%; background:var(--accent); }
.timeline-workbench { grid-template-columns:minmax(470px,.9fr) minmax(500px,1.1fr); }
.timeline-list { max-height:calc(100vh - 190px); overflow:auto; }
.timeline.full { max-height:none; padding:0 14px 12px; }
.timeline.full .timeline-row { grid-template-columns:72px 74px minmax(0,1fr) auto auto; padding:9px 0; cursor:pointer; }
.timeline-row.selected { background:color-mix(in srgb,var(--accent) 7%,transparent); box-shadow:inset 2px 0 var(--accent); padding-left:8px; }
.timeline-row strong { font-size:9px; font-weight:700; color:var(--text); }
.timeline-row.error strong { color:var(--danger); }
.timeline-row.warning strong { color:var(--amber); }
.event-category { justify-self:start; padding:2px 5px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font:800 7px var(--mono); letter-spacing:.07em; }
.event-inspector { min-height:480px; }
.event-inspector > h3 { padding:0 14px; }
.event-inspector .json-dump { margin:0 14px 14px; }
.event-inspector .annotation-grid { padding:0 14px 14px; }
.export-buttons { padding:12px 14px 4px; }

@media (max-width: 1200px) {
  .channel-grid { grid-template-columns:repeat(5,minmax(92px,1fr)); }
  .ble-mode-grid,.timeline-workbench { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  .channel-grid { grid-template-columns:repeat(2,minmax(100px,1fr)); }
  .timeline.full .timeline-row { grid-template-columns:66px 62px minmax(0,1fr); }
  .timeline.full .timeline-row .evidence-link { grid-column:3; justify-self:start; }
}

/* v1.0 stabilization + v1.1 coordinated visualization */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:2px;
}
.nav-item[aria-current="page"] { box-shadow:inset 2px 0 var(--accent); }
.main-view:focus { outline:none; }
.overview-layout { max-width:1500px; margin:0 auto 14px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
.overview-layout > .panel { width:100%; margin:0; min-width:0; }
.overview-focus { min-height:48px; display:flex; align-items:center; gap:8px; padding:7px 10px; overflow:auto; }
.focus-label { color:var(--faint); font:900 8px var(--mono); letter-spacing:.14em; padding:0 4px; }
.focus-chip { flex:0 1 auto; min-width:110px; max-width:260px; display:grid; gap:2px; padding:5px 8px; border:1px solid var(--line); border-radius:7px; background:var(--plot-bg); }
.focus-chip span { color:var(--faint); font:800 7px var(--mono); letter-spacing:.08em; }
.focus-chip strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font:800 8px var(--mono); }
.focus-chip.active { border-color:color-mix(in srgb,var(--accent) 44%,var(--line)); background:color-mix(in srgb,var(--accent) 5%,var(--plot-bg)); }
.focus-chip.active strong { color:var(--text); }
.focus-actions { margin-left:auto; display:flex; gap:5px; flex-wrap:nowrap; }
.overview-controls { min-height:48px; padding:8px 11px; border-bottom:1px solid var(--line); display:flex; align-items:end; gap:8px; flex-wrap:wrap; }
.overview-controls label { display:grid; gap:4px; color:var(--faint); font:800 7px var(--mono); letter-spacing:.08em; }
.overview-controls select { min-height:29px; padding:0 25px 0 8px; }
.overview-legend { margin-left:auto; align-self:center; color:var(--faint); font:800 7px var(--mono); letter-spacing:.08em; }
.overview-channel-grid { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:5px; padding:10px; }
.overview-channel { appearance:none; position:relative; min-height:61px; min-width:0; overflow:hidden; display:grid; align-content:center; justify-items:center; gap:4px; border:1px solid var(--line); border-radius:7px; background:linear-gradient(180deg,color-mix(in srgb,var(--accent) var(--heat),var(--plot-bg)),var(--plot-bg)); color:var(--muted); cursor:pointer; }
.overview-channel:hover { border-color:var(--muted); transform:translateY(-1px); }
.overview-channel.advertising { background:linear-gradient(180deg,color-mix(in srgb,var(--cyan) var(--heat),var(--plot-bg)),var(--plot-bg)); }
.overview-channel.related { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--amber) 46%,transparent); }
.overview-channel.selected { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.overview-channel.selected.related { border-color:var(--amber); box-shadow:inset 0 0 0 1px var(--amber); }
.overview-channel strong { color:var(--text); font:900 13px var(--mono); line-height:1; }
.overview-channel span { color:var(--muted); font:700 7px var(--mono); white-space:nowrap; }
.overview-channel i { width:70%; height:3px; overflow:hidden; border-radius:999px; background:var(--line); }
.overview-channel i b { display:block; height:100%; background:var(--accent); }
.overview-channel.advertising i b { background:var(--cyan); }
.overview-chart-wrap { padding:10px 12px 8px; }
.overview-chart { width:100%; height:190px; display:block; border:1px solid var(--line); border-radius:8px; background:var(--plot-bg); overflow:visible; }
.overview-chart text { fill:var(--faint); font:8px var(--mono); }
.chart-axis { stroke:var(--grid); stroke-width:1; vector-effect:non-scaling-stroke; }
.chart-line { fill:none; stroke-width:1.6; vector-effect:non-scaling-stroke; }
.chart-line.live { stroke:var(--accent); }
.chart-line.average { stroke:var(--cyan); opacity:.9; }
.chart-line.peak { stroke:var(--amber); opacity:.75; stroke-dasharray:4 3; }
.chart-line.packets { stroke:var(--accent); }
.chart-line.ble { stroke:var(--cyan); }
.chart-line.rssi { stroke:var(--cyan); }
.chart-average-line { stroke:var(--amber); stroke-width:1; stroke-dasharray:4 4; vector-effect:non-scaling-stroke; opacity:.8; }
.chart-error { fill:var(--danger); stroke:var(--plot-bg); stroke-width:1; vector-effect:non-scaling-stroke; }
.rssi-marker { fill:var(--accent); stroke:var(--plot-bg); stroke-width:1; vector-effect:non-scaling-stroke; cursor:pointer; }
.chart-caption { min-height:27px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:6px 2px 0; color:var(--faint); font:700 7px var(--mono); letter-spacing:.04em; }
.chart-caption span:last-child { margin-left:auto; }
.legend { display:inline-block; width:13px; height:2px; margin-right:4px; vertical-align:middle; background:var(--muted); }
.legend.live,.legend.packets { background:var(--accent); }.legend.average,.legend.ble,.legend.rssi { background:var(--cyan); }.legend.peak { background:var(--amber); }.legend.error { height:5px; width:5px; border-radius:50%; background:var(--danger); }
.overview-empty { min-height:190px; padding:24px; display:grid; place-content:center; justify-items:center; gap:6px; text-align:center; color:var(--muted); }
.overview-empty.compact { min-height:90px; }
.overview-empty strong { color:var(--text); font:800 9px var(--mono); letter-spacing:.08em; }
.overview-empty span { max-width:380px; font-size:10px; }
.device-rssi-summary { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,.7fr); border-top:1px solid var(--line); }
.device-rssi-summary > .kv-stack { border-right:1px solid var(--line); }
.overview-device-list { padding:7px; display:grid; align-content:start; gap:4px; }
.overview-device-row { appearance:none; min-height:30px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 8px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; text-align:left; }
.overview-device-row:hover { background:var(--panel-2); border-color:var(--line); }
.overview-device-row.selected { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); background:color-mix(in srgb,var(--accent) 5%,var(--panel)); }
.overview-device-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }.overview-device-row strong { white-space:nowrap; font:800 8px var(--mono); }
.overview-inline-actions { padding:9px 12px; border-top:1px solid var(--line); }
.connection-map { display:grid; gap:6px; padding:10px; }
.connection-flow { appearance:none; width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(140px,.8fr) minmax(0,1fr); align-items:center; gap:8px; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--plot-bg); color:var(--text); cursor:pointer; }
.connection-flow:hover { border-color:var(--muted); }.connection-flow.selected { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 4%,var(--plot-bg)); }
.connection-node { min-width:0; display:grid; gap:3px; text-align:left; }.connection-node:last-child { text-align:right; }
.connection-node span { color:var(--faint); font:800 6px var(--mono); letter-spacing:.08em; }.connection-node strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:800 8px var(--mono); }
.connection-edge { display:grid; justify-items:center; gap:3px; min-width:0; }.connection-edge::before,.connection-edge::after { content:""; position:absolute; }.connection-edge code { color:var(--cyan); font-size:8px; }.connection-edge small { color:var(--faint); font:7px var(--mono); }
.connection-detail-strip { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:9px 12px; border-top:1px solid var(--line); color:var(--muted); font:8px var(--mono); }.connection-detail-strip span:nth-child(2) { margin-left:auto; }
.overview-event-list { display:grid; padding:8px 10px; gap:3px; }
.overview-event { appearance:none; width:100%; min-height:34px; display:grid; grid-template-columns:64px 66px minmax(0,1fr) auto; align-items:center; gap:7px; padding:0 7px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--muted); text-align:left; cursor:pointer; }
.overview-event:hover { background:var(--panel-2); border-color:var(--line); }.overview-event.selected { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 5%,var(--panel)); }
.overview-event time,.overview-event span,.overview-event em { font:700 7px var(--mono); }.overview-event span { color:var(--faint); }.overview-event strong { color:var(--text); font-size:8px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.overview-event.warning strong { color:var(--amber); }.overview-event.error strong { color:var(--danger); }.overview-event em { color:var(--cyan); font-style:normal; }

@media (max-width: 1180px) {
  .overview-layout { grid-template-columns:1fr; }
  .overview-channel-grid { grid-template-columns:repeat(8,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .overview-channel-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .overview-focus { align-items:stretch; flex-wrap:wrap; }.focus-actions { width:100%; margin-left:0; }.focus-chip { flex:1 1 130px; }
  .device-rssi-summary { grid-template-columns:1fr; }.device-rssi-summary > .kv-stack { border-right:0; border-bottom:1px solid var(--line); }
  .connection-flow { grid-template-columns:1fr; }.connection-node:last-child { text-align:left; }.connection-edge { justify-items:start; }
}
@media (max-width: 560px) {
  .overview-channel-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .overview-event { grid-template-columns:58px 58px minmax(0,1fr); }.overview-event em { grid-column:3; }
  .chart-caption span:last-child { width:100%; margin-left:0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
  .btn:hover:not(:disabled),.nav-item:hover,.overview-channel:hover { transform:none; }
}

/* v1.1 coordinated focus overlays */
.chart-related-channel {
  stroke: var(--amber);
  opacity: .34;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.chart-focus-channel {
  stroke: var(--danger);
  opacity: .9;
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
.legend.focus { background: var(--danger); }
.connection-flow.related {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 38%, transparent);
}

/* v1.2 Advanced BLE */
.advanced-connection h3 { margin:12px 14px 7px; }
.ll-channel-map { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:5px; padding:8px 14px 12px; }
.map-cell { min-height:27px; display:grid; place-items:center; border:1px solid var(--line); border-radius:5px; color:var(--faint); font:800 8px var(--mono); background:var(--plot-bg); }
.map-cell.on { color:var(--text); border-color:color-mix(in srgb,var(--cyan) 44%,var(--line)); background:color-mix(in srgb,var(--cyan) 9%,var(--plot-bg)); }
.advanced-connection table code { white-space:normal; overflow-wrap:anywhere; }

/* v1.7 RF Survey */
.survey-sequence { overflow:hidden; }
.survey-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:9px; padding:18px; }
.survey-flow span { min-height:52px; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; background:var(--plot-bg); color:var(--text); font:900 9px var(--mono); letter-spacing:.08em; text-align:center; }
.survey-flow b { color:var(--accent); font:900 18px var(--mono); }
.survey-progress { height:5px; margin:12px 14px 4px; border-radius:999px; overflow:hidden; background:var(--line); }
.survey-progress div { height:100%; background:var(--accent); transition:width .2s linear; }
.survey-compare-head { display:flex; align-items:center; justify-content:center; gap:14px; padding:15px; border-top:1px solid var(--line); color:var(--muted); font:800 9px var(--mono); }
.survey-compare-head strong { color:var(--text); }
.channel-delta-list { display:grid; gap:4px; padding:10px 12px; }
.channel-delta-list > div { display:flex; justify-content:space-between; gap:10px; min-height:28px; align-items:center; padding:0 8px; border:1px solid var(--line); border-radius:5px; background:var(--plot-bg); font:8px var(--mono); }
.channel-delta-list span { color:var(--muted); }
@media (max-width:760px) {
  .survey-flow { grid-template-columns:1fr; }
  .survey-flow b { transform:rotate(90deg); justify-self:center; }
  .ll-channel-map { grid-template-columns:repeat(6,minmax(0,1fr)); }
}

/* v1.8.1 UI/UX cleanup: progressive disclosure, compact navigation, stronger primary workflow */
.app-shell { grid-template-columns:176px 1fr; grid-template-rows:56px 1fr 32px; }
.topbar { grid-template-columns:176px auto auto minmax(120px,1fr) auto auto; gap:12px; padding-right:14px; }
.main-view { padding:20px; }
.panel, .metric-grid { box-shadow:0 10px 28px rgba(0,0,0,.18); }
.btn { transition:border-color .12s ease, background-color .12s ease, color .12s ease, transform .12s ease; }
.btn.quiet { background:transparent; color:var(--muted); }
.btn.quiet:hover:not(:disabled) { color:var(--text); background:var(--panel-2); }

.sidebar-toolbar { padding:9px 9px 4px; }
.nav-collapse-button { width:100%; min-height:29px; display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--faint); cursor:pointer; font:800 8px var(--mono); letter-spacing:.1em; }
.nav-collapse-button:hover { color:var(--text); border-color:var(--line); background:var(--panel); }
.collapse-glyph { font-size:15px; line-height:1; }
#side-nav { padding:5px 9px 12px; gap:0; }
.nav-group { display:grid; gap:3px; margin:0 0 12px; }
.nav-group:last-child { margin-bottom:0; }
.nav-group-label { padding:3px 10px 4px; color:var(--faint); font:800 7px var(--mono); letter-spacing:.18em; }
.nav-item { min-height:38px; border-radius:7px; }
.nav-item.active { background:color-mix(in srgb,var(--accent) 7%,var(--panel-2)); }

.nav-collapsed { grid-template-columns:60px 1fr; }
.nav-collapsed .topbar { grid-template-columns:60px auto auto minmax(100px,1fr) auto auto; }
.nav-collapsed .nav-group-label, .nav-collapsed .collapse-label { display:none; }
.nav-collapsed .sidebar-toolbar { padding-inline:7px; }

.page-header { align-items:center; margin-bottom:16px; }
.page-header h1 { font-size:28px; }
.page-header p { line-height:1.45; }
.page-actions { align-items:center; }

.connection-hero { padding:0; }
.connection-hero-main { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px; padding:22px 20px; }
.connection-copy h2 { margin:0 0 5px; font-size:22px; }
.connection-copy p { margin:0; color:var(--muted); font-size:12px; max-width:720px; }
.connection-summary { min-width:150px; display:grid; grid-template-columns:auto auto; gap:5px 12px; padding-left:18px; border-left:1px solid var(--line); align-items:baseline; }
.connection-summary span { color:var(--faint); font:800 7px var(--mono); letter-spacing:.1em; }
.connection-summary strong { justify-self:end; font:800 9px var(--mono); }
.state-text.connected,.state-text.streaming { color:var(--accent); }.state-text.error { color:var(--danger); }.state-text.connecting { color:var(--amber); }
.quick-actions { max-width:1500px; margin:0 auto 14px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.quick-actions button { appearance:none; min-height:92px; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; align-content:center; column-gap:11px; padding:14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); color:var(--text); text-align:left; cursor:pointer; box-shadow:0 8px 22px rgba(0,0,0,.12); }
.quick-actions button:hover { border-color:color-mix(in srgb,var(--accent) 42%,var(--line)); background:color-mix(in srgb,var(--accent) 4%,var(--panel)); }
.quick-actions button > span { grid-row:1 / 3; align-self:center; color:var(--accent); font:900 18px var(--mono); }
.quick-actions strong { font-size:12px; }.quick-actions em { color:var(--muted); font-size:10px; font-style:normal; margin-top:3px; }
.start-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.start-steps > div { min-height:100px; padding:16px; border-right:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:4px 10px; align-content:center; }
.start-steps > div:last-child { border-right:0; }.start-steps b { grid-row:1 / 3; color:var(--accent); font:900 17px var(--mono); }.start-steps strong { font-size:11px; }.start-steps span { color:var(--muted); font-size:10px; line-height:1.35; }
.compact-kv { grid-template-columns:repeat(3,minmax(0,1fr)); }

.disclosure { overflow:hidden; }
.disclosure > summary { list-style:none; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 14px; cursor:pointer; color:var(--text); font:800 9px var(--mono); letter-spacing:.08em; }
.disclosure > summary::-webkit-details-marker { display:none; }
.disclosure > summary::after { content:'＋'; color:var(--faint); font-size:12px; }
.disclosure[open] > summary::after { content:'−'; }
.disclosure > summary em { margin-left:auto; color:var(--faint); font:700 8px var(--mono); letter-spacing:0; font-style:normal; text-align:right; }
.disclosure[open] > summary { border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--panel-2) 55%,transparent); }
.disclosure-body { padding:12px 0; }.disclosure-body.flush { padding:0; }
.disclosure-body > .button-row { padding-top:4px; }
.inline-disclosure { border-top:1px solid var(--line); }
.inline-disclosure > summary { cursor:pointer; padding:10px 14px; color:var(--muted); font:800 8px var(--mono); letter-spacing:.08em; }
.inline-disclosure[open] > summary { color:var(--text); }

.workspace-toolbar { max-width:1500px; margin:0 auto 10px; min-height:44px; display:flex; align-items:center; gap:6px; padding:5px 7px; border:1px solid var(--line); border-radius:9px; background:color-mix(in srgb,var(--panel) 90%,transparent); }
.workspace-toolbar > div { display:flex; gap:6px; }.toolbar-spacer { flex:1; }
.primary-instrument { border-color:color-mix(in srgb,var(--accent) 22%,var(--line)); }

.ble-device-preview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.ble-device-preview > button { appearance:none; min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 14px; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.ble-device-preview > button:nth-child(2n) { border-right:0; }
.ble-device-preview > button:hover { background:color-mix(in srgb,var(--accent) 5%,var(--panel)); }
.ble-device-preview strong,.ble-device-preview span { display:block; }.ble-device-preview strong { font-size:10px; }.ble-device-preview span { margin-top:3px; color:var(--muted); font:700 8px var(--mono); }
.device-signal { text-align:right; flex:0 0 auto; }.device-signal b { display:block; color:var(--accent); font:800 10px var(--mono); }.device-signal span { font-size:7px; }
.panel-footer-actions { display:flex; gap:7px; padding:9px 12px; border-top:1px solid var(--line); }
.inline-filter { border-bottom:1px solid var(--line); }

.export-primary { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 14px; }
.export-primary > div { display:grid; gap:4px; }.export-primary strong { font-size:11px; }.export-primary span { max-width:620px; color:var(--muted); font-size:10px; line-height:1.4; }

@media (max-width:1050px) {
  .app-shell { grid-template-columns:60px 1fr; }
  .topbar { grid-template-columns:60px auto auto minmax(80px,1fr) auto; }
  .nav-group-label,.collapse-label { display:none; }
  .sidebar-toolbar { padding-inline:7px; }
  .quick-actions,.start-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .start-steps > div:nth-child(2) { border-right:0; }
  .start-steps > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
}
@media (max-width:720px) {
  .main-view { padding:12px; }
  .connection-hero-main { grid-template-columns:auto 1fr; padding:16px; }
  .connection-summary { grid-column:1 / -1; padding:10px 0 0; border-left:0; border-top:1px solid var(--line); }
  .quick-actions { grid-template-columns:1fr 1fr; }
  .ble-device-preview { grid-template-columns:1fr; }.ble-device-preview > button { border-right:0; }
  .workspace-toolbar { overflow:auto; }.workspace-toolbar .toolbar-spacer { min-width:10px; }
  .disclosure > summary { align-items:flex-start; flex-direction:column; justify-content:center; padding-block:8px; }.disclosure > summary em { margin-left:0; text-align:left; }
  .export-primary { align-items:stretch; flex-direction:column; }.export-primary .btn { width:100%; }
}
@media (max-width:520px) {
  .quick-actions,.start-steps { grid-template-columns:1fr; }
  .start-steps > div { border-right:0; border-bottom:1px solid var(--line); }.start-steps > div:last-child { border-bottom:0; }
}