/* Nivora web tokens — Netra palette and type scale (../netra/web/src/styles.css). Light-first; dark follows the OS or data-theme. */
:root{
  --bg:#ffffff;--bg-elevated:#ffffff;--bg-elevated-2:#f5f5f7;--panel:#ffffff;--panel-solid:#ffffff;--sidebar:rgba(251,251,253,.8);
  --text:#1d1d1f;--text-secondary:#6e6e73;--text-tertiary:#86868b;--text-faint:#a1a1a6;--muted:#6e6e73;
  --line:#d2d2d7;--line-strong:#c7c7cc;--hover-fill:rgba(0,0,0,.04);--fill:rgba(0,0,0,.04);
  --blue:#0071e3;--blue-hover:#0077ed;--cyan:#32ade6;--green:#34c759;--orange:#ff9f0a;--purple:#af52de;--red:#ff3b30;
  --green-text:#1e7b34;--orange-text:#8b4b00;--red-text:#b3261e;--cyan-text:#0a6b99;
  --success-bg:#e8f8ec;--warning-bg:#fff6ed;--danger-bg:#fff1f0;--info-bg:#eaf6fc;
  --shadow-1:0 1px 2px rgba(0,0,0,.04);--shadow-2:0 4px 16px rgba(0,0,0,.08);--shadow:0 12px 40px rgba(0,0,0,.14);
  --focus-ring:0 0 0 4px rgba(0,113,227,.3);--glass:blur(20px) saturate(180%);
  --fs-body:15px;--fs-h1:clamp(24px,2.6vw,34px);--fs-h2:clamp(20px,1.8vw,24px);--fs-h3:17px;--fs-figure:clamp(18px,1.6vw,24px);
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --radius-xs:6px;--radius-sm:10px;--radius-md:12px;--radius-base:14px;--radius-lg:16px;--radius:14px;--radius-pill:980px;
  --ease-apple:cubic-bezier(.28,.11,.32,1);color-scheme:light
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#000000;--bg-elevated:#1d1d1f;--bg-elevated-2:#2c2c2e;--panel:#1d1d1f;--panel-solid:#1d1d1f;--sidebar:rgba(22,22,23,.8);
  --text:#f5f5f7;--text-secondary:#a1a1a6;--text-tertiary:#86868b;--text-faint:#6e6e73;--muted:#a1a1a6;
  --line:rgba(255,255,255,.16);--line-strong:rgba(255,255,255,.24);--hover-fill:rgba(255,255,255,.06);--fill:rgba(255,255,255,.08);
  --blue:#2997ff;--blue-hover:#4aa8ff;--cyan:#64d2ff;--green:#30d158;--orange:#ff9f0a;--purple:#bf5af2;--red:#ff453a;
  --green-text:#6fe08c;--orange-text:#ffb340;--red-text:#ff8a80;--cyan-text:#64d2ff;
  --success-bg:rgba(48,209,88,.14);--warning-bg:rgba(255,159,10,.14);--danger-bg:rgba(255,69,58,.14);--info-bg:rgba(100,210,255,.12);
  --shadow-1:none;--shadow-2:0 4px 16px rgba(0,0,0,.5);--shadow:0 12px 40px rgba(0,0,0,.6);--focus-ring:0 0 0 4px rgba(41,151,255,.4);color-scheme:dark}}
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{
  --bg:#000000;--bg-elevated:#1d1d1f;--bg-elevated-2:#2c2c2e;--panel:#1d1d1f;--panel-solid:#1d1d1f;--sidebar:rgba(22,22,23,.8);
  --text:#f5f5f7;--text-secondary:#a1a1a6;--text-tertiary:#86868b;--text-faint:#6e6e73;--muted:#a1a1a6;
  --line:rgba(255,255,255,.16);--line-strong:rgba(255,255,255,.24);--hover-fill:rgba(255,255,255,.06);--fill:rgba(255,255,255,.08);
  --blue:#2997ff;--blue-hover:#4aa8ff;--cyan:#64d2ff;--green:#30d158;--orange:#ff9f0a;--purple:#bf5af2;--red:#ff453a;
  --green-text:#6fe08c;--orange-text:#ffb340;--red-text:#ff8a80;--cyan-text:#64d2ff;
  --success-bg:rgba(48,209,88,.14);--warning-bg:rgba(255,159,10,.14);--danger-bg:rgba(255,69,58,.14);--info-bg:rgba(100,210,255,.12);
  --shadow-1:none;--shadow-2:0 4px 16px rgba(0,0,0,.5);--shadow:0 12px 40px rgba(0,0,0,.6);--focus-ring:0 0 0 4px rgba(41,151,255,.4);color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;min-height:100vh;overflow:hidden}.wallpaper{position:fixed;inset:0;background:radial-gradient(circle at 20% 10%,rgba(0,113,227,.22),transparent 36%),radial-gradient(circle at 82% 88%,rgba(124,92,255,.2),transparent 38%);pointer-events:none}.window{position:relative;width:min(1480px,calc(100vw - 32px));height:calc(100vh - 32px);margin:16px auto;background:var(--panel);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}.titlebar{height:50px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.08)}.traffic{display:flex;gap:8px}.traffic span{width:12px;height:12px;border-radius:50%;background:#ff5f57}.traffic span:nth-child(2){background:#febc2e}.traffic span:nth-child(3){background:#28c840}.title{text-align:center;font-size:13px;font-weight:650;letter-spacing:.02em}.title-actions{display:flex;justify-content:flex-end;gap:8px}.icon-btn,.glass-btn{border:1px solid var(--line);background:rgba(127,127,127,.08);color:var(--text);border-radius:10px;padding:7px 10px;font:inherit;cursor:pointer}.shell{display:grid;grid-template-columns:244px 1fr;height:calc(100% - 50px)}.sidebar{background:var(--sidebar);border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;overflow:auto}.brand{display:flex;align-items:center;gap:10px;padding:3px 8px 14px}.brand-mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#111827,#354052);color:white;font-weight:850;box-shadow:inset 0 1px rgba(255,255,255,.23)}.brand-mark.large{width:54px;height:54px;border-radius:16px;font-size:23px;margin:0 auto}.brand strong{display:block;font-size:15px}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.status-pill{margin:0 8px 14px;padding:7px 10px;background:rgba(127,127,127,.08);border:1px solid var(--line);border-radius:999px;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:7px}.dot{width:7px;height:7px;border-radius:50%;background:var(--orange)}.dot.live{background:var(--green);box-shadow:0 0 0 4px rgba(47,182,109,.12)}nav{display:flex;flex-direction:column;gap:2px}.nav-label{padding:14px 10px 5px;color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.1em;text-transform:uppercase}nav button{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--text);padding:8px 10px;border-radius:9px;text-align:left;font-size:13px;cursor:pointer}nav button span{width:18px;text-align:center;color:var(--muted)}nav button:hover{background:rgba(127,127,127,.08)}nav button.active{background:rgba(0,113,227,.13);color:var(--blue);font-weight:650}nav button.active span{color:var(--blue)}.sidebar-bottom{margin-top:auto}.host-card{margin:18px 8px 2px;padding:12px;border:1px solid var(--line);border-radius:12px;background:rgba(127,127,127,.05)}.host-card small,.host-card strong,.host-card span{display:block}.host-card small{font-size:9px;color:var(--muted);letter-spacing:.09em}.host-card strong{font-size:12px;margin:4px 0}.host-card span{font-size:10px;color:var(--muted)}.content{min-width:0;overflow:auto;background:rgba(255,255,255,.02)}.content-header{position:sticky;top:0;z-index:4;display:flex;justify-content:space-between;gap:20px;align-items:flex-end;padding:28px 32px 18px;background:linear-gradient(var(--panel-solid) 0%,color-mix(in srgb,var(--panel-solid) 88%,transparent) 76%,transparent);backdrop-filter:blur(16px)}.content-header p{margin:0;color:var(--muted);font-size:12px}.content-header #eyebrow{text-transform:uppercase;font-weight:700;letter-spacing:.08em;font-size:10px;margin-bottom:5px}.content-header h1{font-size:28px;letter-spacing:-.03em;margin:0 0 4px}.header-actions{display:flex;gap:9px}.search{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:rgba(127,127,127,.08);border-radius:10px;padding:6px 9px;width:280px}.search input{border:0;outline:0;background:transparent;color:var(--text);width:100%;font:inherit;font-size:12px}.content-body{padding:4px 32px 46px}.grid{display:grid;gap:14px}.grid.stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px}.card{background:rgba(127,127,127,.055);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:0 1px 0 rgba(255,255,255,.05) inset}.stat small{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.07em;font-weight:700}.stat strong{display:block;font-size:25px;letter-spacing:-.03em;margin:5px 0 2px}.stat span{font-size:11px;color:var(--muted)}.split{display:grid;grid-template-columns:1.35fr .85fr;gap:14px}.card h2{font-size:14px;margin:0 0 13px}.card h3{font-size:12px;margin:0}.muted{color:var(--muted)}.table-wrap{overflow:auto;margin:0 -4px}table{width:100%;border-collapse:collapse;font-size:12px}th{text-align:left;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.07em;padding:8px 10px;border-bottom:1px solid var(--line)}td{padding:10px;border-bottom:1px solid var(--line);white-space:nowrap}tr:last-child td{border-bottom:0}.app-cell{display:flex;align-items:center;gap:9px}.app-icon{width:28px;height:28px;border-radius:8px;background:linear-gradient(145deg,rgba(0,113,227,.16),rgba(124,92,255,.19));display:grid;place-items:center;font-weight:800;color:var(--blue)}.pill{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;background:rgba(127,127,127,.09);font-size:10px}.pill.green{color:var(--green);background:rgba(47,182,109,.1)}.pill.orange{color:var(--orange);background:rgba(255,159,10,.1)}.pill.red{color:var(--red);background:rgba(255,69,58,.1)}.bar-row{display:grid;grid-template-columns:120px 1fr 70px;gap:10px;align-items:center;margin:10px 0;font-size:11px}.bar{height:7px;border-radius:999px;background:rgba(127,127,127,.10);overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:999px}.flow-map{position:relative;min-height:310px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:22px;padding:20px}.node-stack{display:flex;flex-direction:column;gap:9px}.map-node{padding:10px 12px;border:1px solid var(--line);background:var(--panel);border-radius:12px;font-size:11px;box-shadow:0 6px 20px rgba(0,0,0,.05)}.map-node strong{display:block;font-size:12px;margin-bottom:2px}.map-node.center{border-color:rgba(0,113,227,.25);background:rgba(0,113,227,.08)}.finding{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}.finding:last-child{border-bottom:0}.severity{width:8px;height:8px;border-radius:50%;margin-top:5px;background:var(--blue)}.severity.warning{background:var(--orange)}.severity.critical{background:var(--red)}.finding strong{font-size:12px}.finding p{font-size:11px;color:var(--muted);margin:3px 0 0}.timeline{position:relative;padding-left:17px}.timeline:before{content:"";position:absolute;left:5px;top:6px;bottom:7px;width:1px;background:var(--line)}.event{position:relative;padding:0 0 17px 16px}.event:before{content:"";position:absolute;left:-16px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--panel-solid);border:2px solid var(--blue)}.event time{display:block;color:var(--muted);font-size:9px}.event strong{font-size:12px}.event p{margin:2px 0 0;font-size:11px;color:var(--muted)}.query-box{display:flex;gap:8px;margin:14px 0}.query-box input{flex:1;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:rgba(127,127,127,.06);color:var(--text);font:inherit}.primary{border:0;background:var(--blue);color:white;border-radius:10px;padding:9px 13px;font:inherit;font-weight:650;cursor:pointer}.answer{min-height:120px;padding:15px;border-radius:14px;border:1px solid rgba(0,113,227,.18);background:rgba(0,113,227,.06)}.answer strong{display:block;margin-bottom:8px}.empty{display:grid;place-items:center;min-height:240px;color:var(--muted);font-size:12px;text-align:center}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}.topology{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.topology .card{padding:12px}.metric-inline{display:flex;justify-content:space-between;gap:15px;font-size:11px;padding:7px 0;border-bottom:1px solid var(--line)}.metric-inline:last-child{border-bottom:0}.metric-inline span:last-child{font-weight:650}.danger{color:var(--red)}dialog{border:0;background:transparent;padding:0}dialog::backdrop{background:rgba(0,0,0,.42);backdrop-filter:blur(10px)}.dialog-card{width:min(430px,calc(100vw - 36px));padding:26px;border-radius:22px;background:var(--panel-solid);color:var(--text);box-shadow:var(--shadow);border:1px solid var(--line)}.dialog-card h2{text-align:center;margin:14px 0 6px}.dialog-card p{text-align:center;color:var(--muted);font-size:12px;line-height:1.5}.dialog-card label{display:block;font-size:11px;font-weight:650;margin-top:18px}.dialog-card input{width:100%;margin-top:6px;padding:11px;border-radius:10px;border:1px solid var(--line);background:rgba(127,127,127,.07);color:var(--text)}.dialog-card menu{display:flex;justify-content:flex-end;gap:8px;padding:16px 0 0;margin:0}
@media(max-width:1000px){.shell{grid-template-columns:200px 1fr}.grid.stats{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}.search{width:180px}}@media(max-width:720px){body{overflow:auto}.window{width:100%;height:auto;min-height:100vh;margin:0;border-radius:0}.titlebar{display:none}.shell{display:block;height:auto}.sidebar{position:sticky;top:0;z-index:10;flex-direction:row;overflow:auto;padding:8px;border-right:0;border-bottom:1px solid var(--line)}.brand,.status-pill,.nav-label,.sidebar-bottom{display:none}nav{flex-direction:row}nav button{white-space:nowrap}nav button span{display:none}.content-header{padding:20px 16px 12px;display:block}.header-actions{margin-top:12px}.search{width:100%}.content-body{padding:4px 16px 32px}.grid.stats{grid-template-columns:1fr 1fr}.flow-map{grid-template-columns:1fr}.window{box-shadow:none}.content{overflow:visible}}

.rule-form{display:grid;grid-template-columns:100px 120px 1fr auto;gap:7px;margin-bottom:12px}.rule-form select,.rule-form input{border:1px solid var(--line);background:rgba(127,127,127,.07);color:var(--text);border-radius:9px;padding:8px;font:inherit;font-size:11px}@media(max-width:900px){.rule-form{grid-template-columns:1fr 1fr}.rule-form input{grid-column:1 / -1}}
.health-inline{display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:center}.score-ring{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;align-content:center;background:conic-gradient(var(--green) 0 85%,rgba(127,127,127,.12) 85%);border:8px solid rgba(47,182,109,.08)}.score-ring.degraded{background:conic-gradient(var(--orange) 0 70%,rgba(127,127,127,.12) 70%);border-color:rgba(255,159,10,.08)}.score-ring.poor{background:conic-gradient(var(--red) 0 45%,rgba(127,127,127,.12) 45%);border-color:rgba(255,69,58,.08)}.score-ring strong{font-size:28px;line-height:1}.score-ring span{font-size:10px;color:var(--muted)}.component{display:grid;grid-template-columns:70px 1fr;gap:7px;align-items:center;margin:7px 0;font-size:10px}.component small{grid-column:2;color:var(--muted);margin-top:-4px}.mini-bar,.health-meter{height:6px;border-radius:99px;background:rgba(127,127,127,.12);overflow:hidden}.mini-bar i,.health-meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--green))}.health-row{display:grid;grid-template-columns:minmax(130px,1fr) minmax(120px,1.5fr) 38px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.health-row:last-child{border-bottom:0}.health-row strong,.health-row small{display:block}.health-row small{color:var(--muted);font-size:10px;margin-top:2px}.health-row b{text-align:right;font-size:11px}.diagnosis>strong{display:block;font-size:15px;margin-bottom:8px}.spark-bars{height:130px;display:flex;align-items:flex-end;gap:2px;padding:8px 2px 2px}.spark-col{flex:1;min-width:2px;height:100%;display:flex;align-items:flex-end}.spark-col i{display:block;width:100%;min-height:2px;border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,var(--purple),var(--blue));opacity:.82}.network-map{display:grid;grid-template-columns:1fr 38px 1fr 38px 1fr;gap:10px;align-items:center;min-height:440px}.map-column{display:flex;flex-direction:column;gap:9px;align-self:stretch}.map-column h3{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 4px}.map-chip{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(127,127,127,.05);box-shadow:0 5px 18px rgba(0,0,0,.035)}.map-chip strong,.map-chip small{display:block}.map-chip strong{font-size:11px}.map-chip small{font-size:9px;color:var(--muted);margin-top:3px}.map-chip.host{border-color:rgba(0,113,227,.35);background:rgba(0,113,227,.09)}.map-chip.iface{border-color:rgba(124,92,255,.25)}.map-chip.dst{background:rgba(47,182,109,.05)}.map-arrow{text-align:center;color:var(--muted);font-size:23px}@media(max-width:900px){.health-inline{grid-template-columns:1fr}.network-map{grid-template-columns:1fr}.map-arrow{transform:rotate(90deg)}.grid.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 0.3 UX: toolbar, sheet, toasts, palette, charts, density, a11y */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
mark{background:rgba(255,159,10,.35);color:inherit;border-radius:3px;padding:0 1px}
.nav-badge{margin-left:auto;background:var(--orange);color:#fff;border-radius:99px;font-size:10px;padding:1px 6px}
.nav-badge[hidden]{display:none}
.icon-btn[aria-pressed="true"]{background:rgba(0,113,227,.16);border-color:var(--blue)}
html.sidebar-hidden .shell{grid-template-columns:0 1fr}html.sidebar-hidden .sidebar{display:none}
html.reduce-glass .window,html.reduce-glass .sheet{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--panel-solid)}
html[data-density="compact"] .card{padding:10px}html[data-density="compact"] td,html[data-density="compact"] th{padding-top:5px;padding-bottom:5px}
.score-ring{background:conic-gradient(var(--ring,var(--green)) 0 calc(var(--score,0)*1%),rgba(127,127,127,.12) 0)}
.score-ring.good{--ring:var(--green)}.score-ring.degraded{--ring:var(--orange)}.score-ring.poor{--ring:var(--red)}
th[data-sort]{cursor:pointer;user-select:none}th[data-sort]:hover{color:var(--text)}
th[aria-sort="ascending"]::after{content:" ▴"}th[aria-sort="descending"]::after{content:" ▾"}
tr.clickable{cursor:pointer}tr.clickable:hover td{background:rgba(127,127,127,.07)}
.pin{background:none;border:0;cursor:pointer;color:var(--muted);font-size:14px}.pin.on{color:var(--orange)}
.chart{width:100%;height:150px;display:block}.chart .rx{fill:rgba(0,113,227,.18);stroke:var(--blue);stroke-width:2}.chart .tx{fill:rgba(255,100,130,.14);stroke:#ff6482;stroke-width:2}
.chart-wrap{position:relative}.chart-tip{position:absolute;pointer-events:none;background:var(--panel-solid);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:11px;box-shadow:0 6px 20px rgba(0,0,0,.15);display:none;white-space:nowrap}
.talkers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}.talker{display:flex;flex-direction:column;gap:4px;cursor:pointer}.talker svg{width:100%;height:32px}.talker path{fill:none;stroke:var(--blue);stroke-width:1.6}
.skeleton{height:84px;border-radius:var(--radius);background:linear-gradient(90deg,rgba(127,127,127,.08),rgba(127,127,127,.16),rgba(127,127,127,.08));background-size:200% 100%;animation:sk 1.2s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.error-state{text-align:center;padding:48px 16px;color:var(--muted)}.error-state button{margin-top:12px}
.toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;z-index:60}
.toast{background:var(--panel-solid);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:10px;padding:10px 14px;box-shadow:0 10px 30px rgba(0,0,0,.2);font-size:12px;max-width:340px}
.toast.error{border-left-color:var(--red)}.toast.warn{border-left-color:var(--orange)}.toast.ok{border-left-color:var(--green)}
.sheet{position:fixed;top:16px;right:16px;bottom:16px;width:min(420px,calc(100vw - 32px));background:var(--panel-solid);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px;overflow:auto;transform:translateX(120%);transition:transform .22s ease;z-index:40}
.sheet.open{transform:none}.sheet-head{display:flex;gap:12px;align-items:center;margin-bottom:14px}.sheet-head h2{margin:0;font-size:17px}.sheet .close{margin-left:auto}
.sheet-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.sheet-stats div{background:rgba(127,127,127,.07);border-radius:10px;padding:8px}.sheet-stats span{display:block;font-size:10px;color:var(--muted)}
.palette{border:0;background:transparent;padding:0;margin:12vh auto 0;width:min(560px,calc(100vw - 32px));color:var(--text)}
.palette::backdrop{background:rgba(0,0,0,.28)}
.palette-card{background:var(--panel-solid);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;padding:0}.palette-card.help{padding:18px}
.palette-card input{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);font:inherit;font-size:15px;padding:14px 16px;outline:0}
.palette-list{max-height:340px;overflow:auto;padding:6px}.palette-item{display:flex;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:13px}.palette-item small{margin-left:auto;color:var(--muted)}.palette-item[aria-selected="true"]{background:rgba(0,113,227,.14)}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}.settings-row:last-child{border-bottom:0}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.seg button{border:0;background:none;color:var(--text);font:inherit;font-size:12px;padding:6px 10px;cursor:pointer}.seg button[aria-checked="true"]{background:var(--blue);color:#fff}
.swatch{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}.swatch[aria-checked="true"]{border-color:var(--text)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media(max-width:720px){.talkers{grid-template-columns:1fr}.title-actions{display:none}}

/* Netra layer: flat Apple surfaces, SF type scale, hairlines, apple easing */
body{font-family:var(--font-display);font-size:var(--fs-body);font-synthesis:none;-webkit-font-smoothing:antialiased;background:var(--bg-elevated-2)}
html[data-theme="dark"] body{background:#000}
@media(prefers-color-scheme:dark){html:not([data-theme="light"]) body{background:#000}}
.wallpaper{background:none}
.window{background:var(--bg-elevated);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);backdrop-filter:none;-webkit-backdrop-filter:none}
.titlebar{background:var(--sidebar);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass)}
.sidebar{background:var(--sidebar);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass)}
.content{background:var(--bg-elevated)}
.content-header{background:var(--bg-elevated)}
.content-header h1,#viewTitle{font-size:var(--fs-h1);font-weight:600;letter-spacing:-.02em}
.card{background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1)}
html[data-theme="dark"] .card{background:var(--bg-elevated)}
.card h2{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.01em}
.stat strong,.metric strong{font-size:var(--fs-figure);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
td,th,.mono{font-variant-numeric:tabular-nums}.mono{font-family:var(--font-mono)}
.muted,small,.stat small,.stat span{color:var(--text-secondary)}
.nav-label{color:var(--text-tertiary);letter-spacing:.08em}
nav button{border-radius:var(--radius-sm);transition:background .2s var(--ease-apple),color .2s var(--ease-apple)}
nav button:hover{background:var(--hover-fill)}
nav button.active{background:rgba(0,113,227,.1);color:var(--blue)}
.primary{background:var(--blue);border-radius:var(--radius-pill);padding:9px 18px;font-weight:600;transition:background .2s var(--ease-apple)}
.primary:hover{background:var(--blue-hover)}
.icon-btn,.glass-btn{background:var(--bg-elevated);border-color:var(--line);border-radius:var(--radius-pill);transition:background .2s var(--ease-apple)}
.icon-btn:hover,.glass-btn:hover{background:var(--hover-fill)}
:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.brand-mark{background:var(--blue);box-shadow:none}
.app-icon{background:var(--bg-elevated-2);color:var(--text-secondary)}
.bar i,.mini-bar i,.health-meter i{background:var(--blue)}
.spark-col i{background:var(--blue);opacity:.75}
.chart .rx{fill:rgba(0,113,227,.12);stroke:var(--blue)}.chart .tx{fill:rgba(175,82,222,.1);stroke:var(--purple)}
.talker path{stroke:var(--blue)}
.score-ring.good{--ring:var(--green)}.score-ring.degraded{--ring:var(--orange)}.score-ring.poor{--ring:var(--red)}
.score-ring{background:conic-gradient(var(--ring,var(--green)) 0 calc(var(--score,0)*1%),var(--fill) 0);border:0;position:relative}
.score-ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--bg-elevated)}.score-ring>*{position:relative}
.pill{background:var(--bg-elevated-2);color:var(--text-secondary);border:0}
.pill.green{background:var(--success-bg);color:var(--green-text)}.pill.red{background:var(--danger-bg);color:var(--red-text)}
.pill.orange{background:var(--warning-bg);color:var(--orange-text)}
.severity.high,.severity.critical{background:var(--red)}.severity.medium,.severity.warning{background:var(--orange)}.severity.low,.severity.info{background:var(--cyan)}
.toast{border-radius:var(--radius-md);box-shadow:var(--shadow-2)}
.sheet,.palette-card,.dialog-card{box-shadow:var(--shadow);border-radius:var(--radius-lg)}
.palette-item[aria-selected="true"]{background:rgba(0,113,227,.1)}
.seg button[aria-checked="true"]{background:var(--blue)}
mark{background:rgba(255,159,10,.28)}
.traffic span{background:#ff5f57}

/* filter bar + saved views */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:0 0 12px}
.filter-bar .chips,.filter-bar .views{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{border:1px solid var(--line);background:var(--blue-bg,rgba(0,113,227,.1));color:var(--blue);border-radius:980px;padding:3px 10px;font:inherit;font-size:12px;cursor:pointer}
.chip:hover{border-color:var(--blue)}
.view-pill{display:inline-flex;border:1px solid var(--line);border-radius:980px;overflow:hidden}
.view-pill button{border:0;background:transparent;color:var(--text);font:inherit;font-size:12px;padding:3px 9px;cursor:pointer}
.view-pill button:last-child{color:var(--muted);padding-left:4px}
.view-pill button:hover{background:var(--panel-hover,rgba(127,127,127,.12))}

.seg{display:inline-flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.seg-btn{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:980px;padding:3px 11px;font:inherit;font-size:12px;cursor:pointer}
.seg-btn.on{background:var(--blue);border-color:var(--blue);color:#fff}

.capture-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end}
.capture-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.capture-form input,.capture-form select{font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text)}
.capture-form .check{grid-column:1/-1;flex-direction:row;align-items:center;gap:8px;color:var(--text)}
.row-actions{display:flex;gap:6px;justify-content:flex-end}

.chip.ghost{background:transparent;color:var(--muted);border-style:dashed}
.chip.ghost:hover{color:var(--blue)}
.filter-bar .count{font-size:12px;margin-right:4px;font-variant-numeric:tabular-nums}
.seg-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.seg.baseline .seg-btn{border-style:dashed}
.empty .glass-btn{margin-left:8px}

.brand-icon{border-radius:8px;display:block}.brand-icon.large{border-radius:12px;margin:0 auto 8px}
.legal{margin:28px 0 8px;font-size:12px;color:var(--muted);text-align:center}.legal a{color:inherit}

.demo-banner{position:sticky;top:0;z-index:60;text-align:center;font-size:12px;padding:6px 12px;background:var(--blue);color:#fff}
.demo-banner a{color:#fff;text-decoration:underline}