:root {
  color-scheme: light;
  --bg: #f4f4f2;
  --surface: #fcfcfb;
  --surface-2: #f0efec;
  --border: #deddd8;
  --text: #0b0b0b;
  --text-2: #52514e;
  --muted: #787671;
  --accent: #4f46e5;      /* indigo: fills (white text 6.3:1) and marks */
  --accent-ink: #3f37c9;  /* links / accent text (7.9:1) */
  --grid: #e6e5e0;
  /* status palette (fixed, always paired with a text label) */
  --sev-critical: #d03b3b;
  --sev-high: #ec835a;
  --sev-medium: #fab219;
  --sev-low: #86b6ef;
  --sev-none: #b9b8b2;
  --good: #0ca30c;
  --new: #4f46e5;
  --kev: #d03b3b;
  --code-bg: #f0efec;
  /* categorical slots (fixed order) */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948; --s-other: #b9b8b2;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
  --radius: 10px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121211; --surface: #1a1a19; --surface-2: #232321; --border: #33332f;
    --text: #ffffff; --text-2: #c3c2b7; --muted: #94938b; --accent: #6159ea; --accent-ink: #a5a0f5;
    --grid: #2b2b28; --code-bg: #232321; --new: #6159ea; --sev-low: #5598e7; --sev-none: #6b6a64;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767; --s-other: #6b6a64;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121211; --surface: #1a1a19; --surface-2: #232321; --border: #33332f;
  --text: #ffffff; --text-2: #c3c2b7; --muted: #94938b; --accent: #6159ea; --accent-ink: #a5a0f5;
  --grid: #2b2b28; --code-bg: #232321; --new: #6159ea; --sev-low: #5598e7; --sev-none: #6b6a64;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767; --s-other: #6b6a64;
  --shadow: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; }
h1 { font-size: 1.45rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } h4 { font-size: .9rem; }
.muted { color: var(--muted); } .small { font-size: .85em; } .mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem;
  padding: .55rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.brand svg { width: 24px; height: 24px; }
.brand:hover { text-decoration: none; }
.nav { display: flex; gap: .25rem; overflow-x: auto; flex: 1; scrollbar-width: none; }
.nav a { padding: .4rem .7rem; border-radius: 8px; color: var(--text-2); white-space: nowrap; font-weight: 500; }
.nav a:hover { background: var(--surface-2); text-decoration: none; }
.nav a.active { background: var(--surface-2); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.topbar-right { display: flex; align-items: center; gap: .4rem; }
.pill { display: inline-flex; gap: .35rem; align-items: center; border-radius: 999px; padding: .2rem .65rem; font-size: .8rem; font-weight: 600; border: 1px solid var(--border); color: var(--text); white-space: nowrap; }
.pill:hover { text-decoration: none; background: var(--surface-2); }
.pill-new b { color: var(--accent-ink); } .pill-unread b { color: var(--accent-ink); }
.icon-btn { background: none; border: 1px solid var(--border); color: var(--text-2); border-radius: 8px; width: 32px; height: 32px; cursor: pointer; font-size: 1rem; }
.icon-btn:hover { background: var(--surface-2); }
.pill-fresh { color: var(--text-2); font-weight: 500; cursor: help; }
.pill-auto { background: transparent; color: var(--text-2); font: inherit; font-size: .8rem; font-weight: 500; cursor: pointer; }
.pill-auto b { color: var(--accent-ink); font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: left; }
.pill-auto.off b { color: var(--muted); min-width: 0; }
.pill-auto.waiting { border-color: var(--accent); }
.pill-fresh .fresh-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); display: inline-block; }
.pill-fresh.stale .fresh-dot { background: var(--sev-medium); }
/* details card under the freshness pill: hover, keyboard focus or tap */
.pill-fresh { position: relative; }
.fresh-pop { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: max-content; max-width: min(360px, calc(100vw - 32px));
  padding: .7rem .85rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0,0,0,.18); font-size: .8rem; font-weight: 400; white-space: normal; cursor: default; }
.fresh-pop::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } /* keeps hover while moving into the card */
.pill-fresh:hover .fresh-pop, .pill-fresh:focus-within .fresh-pop { display: block; }
.fresh-pop .fresh-title { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .45rem; }
.fresh-pop dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: 0; }
.fresh-pop dt { color: var(--text-2); white-space: nowrap; }
.fresh-pop dd { margin: 0; font-variant-numeric: tabular-nums; }
.fresh-pop dd span { display: block; color: var(--muted); font-size: .74rem; }
.fresh-pop p { margin: .6rem 0 0; padding-top: .5rem; border-top: 1px solid var(--border); color: var(--text-2); }
@media (max-width: 600px) { /* anchor the card to the (sticky) header so it spans the screen instead of the pill */
  .pill-fresh { position: static; }
  .fresh-pop { top: calc(100% + 4px); left: 16px; right: 16px; width: auto; max-width: none; }
}
.notice-bar .btn { margin-left: .5rem; }
/* second row of the sticky header, so it stays in view (and clickable) while scrolling */
.notice-bar { order: 10; flex-basis: calc(100% + 2rem); margin: .55rem -1rem -.55rem; padding: .45rem 1rem; font-size: .85rem;
  background: var(--surface-2); border-top: 1px solid var(--border); border-left: 3px solid var(--accent); }
.notice-bar[hidden] { display: none; }
.site-footer { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; padding: 1rem; margin-top: 1.5rem; border-top: 1px solid var(--border);
  font-size: .78rem; color: var(--muted); }
main { padding: 1rem; max-width: 1600px; margin: 0 auto; outline: none; }

/* ---------- generic ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); min-width: 0; }
.card + .card { margin-top: 1rem; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; flex-wrap: wrap; }
.card-head h2, .card-head h3 { margin: 0; }
.grid { display: grid; gap: 1rem; }
.btn { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: .38rem .75rem; cursor: pointer; font: inherit; font-weight: 500; white-space: nowrap; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.small { padding: .2rem .5rem; font-size: .8rem; }
.btn.danger { color: var(--sev-critical); }
.btn:disabled { opacity: .5; cursor: default; }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: 7px; padding: .35rem .5rem; min-width: 0; width: 100%;
}
input:focus, select:focus, textarea:focus, .btn:focus-visible, .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
label.field { display: grid; gap: .2rem; font-size: .78rem; color: var(--text-2); font-weight: 600; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.row > * { flex: 1 1 0; }
.row > .auto { flex: 0 0 auto; }
.check { display: flex; gap: .45rem; align-items: center; font-size: .85rem; cursor: pointer; }
.check input { width: auto; }
.empty { padding: 2rem; text-align: center; color: var(--muted); }
code, pre { font-family: var(--mono); font-size: .8rem; }
pre.code { background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: .75rem; overflow: auto; margin: 0; white-space: pre; max-height: 420px; }
.code-wrap { position: relative; margin: .4rem 0 .9rem; }
.code-wrap .copy { position: absolute; top: .4rem; right: .4rem; }
.code-title { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: .82rem; color: var(--text-2); }

/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; gap: .25rem; border-radius: 6px; padding: .05rem .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; border: 1px solid transparent; }
.sev { color: #fff; }
.sev-CRITICAL { background: var(--sev-critical); }
.sev-HIGH { background: var(--sev-high); color: #1b1b1b; }
.sev-MEDIUM { background: var(--sev-medium); color: #1b1b1b; }
.sev-LOW { background: var(--sev-low); color: #0b0b0b; }
.sev-NONE { background: var(--sev-none); color: #0b0b0b; }
.badge-kev { background: transparent; color: var(--kev); border-color: var(--kev); }
.badge-rw { background: var(--kev); color: #fff; }
.badge-triage { color: var(--kev); border-color: var(--kev); border-style: dashed; }
.badge-new { background: var(--new); color: #fff; }
.badge-exploit { border-color: var(--border); color: var(--text-2); }
.badge-scope { color: var(--accent-ink); border-color: var(--accent-ink); }
.notice.scope-generic { border-left-color: var(--border); }
.badge-soft { border-color: var(--border); color: var(--text-2); background: var(--surface-2); }
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; flex: none; }

/* ---------- dashboard layout ---------- */
.layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1rem; align-items: start; }
.filters { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow: auto; padding: .85rem; }
.filters h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 1rem 0 .4rem; }
.filters h3:first-of-type { margin-top: .2rem; }
.filters .field + .field { margin-top: .45rem; }
/* fields side by side (Min / Max / Score, Year / Month / Day, date ranges) share one baseline */
.filters .row > .field + .field { margin-top: 0; }
.filters .row:has(> .field) { align-items: end; }
input:not([type="checkbox"]):not([type="radio"]), select { height: 2.1rem; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: .15rem .55rem; font-size: .78rem; cursor: pointer; font-weight: 500; }
.chip:hover { background: var(--surface-2); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip .x { margin-left: .25rem; opacity: .8; }
.vec-metric { display: grid; grid-template-columns: 34px 1fr; gap: .3rem; align-items: center; margin-bottom: .3rem; }
.vec-metric > span { font-family: var(--mono); font-size: .75rem; color: var(--text-2); font-weight: 700; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg button { background: var(--surface); border: 0; padding: .25rem .6rem; font: inherit; font-size: .8rem; color: var(--text-2); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--border); }
.seg button.on { background: var(--accent); color: #fff; }
.active-filters { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .75rem; min-height: 1.5rem; }
.filter-toggle { display: none; }
.ac { position: relative; }
.ac-list { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); max-height: 260px; overflow: auto; }
.ac-list div { padding: .35rem .55rem; cursor: pointer; font-size: .82rem; display: flex; justify-content: space-between; gap: .5rem; }
.ac-list div:hover, .ac-list div.sel { background: var(--surface-2); }

/* ---------- KPI tiles ---------- */
/* Hero tile spans both rows on the left; the other eight tiles fill two equal rows of four. */
.kpis { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .75rem; margin-bottom: 1rem; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem .85rem; box-shadow: var(--shadow); display: grid; gap: .1rem; min-width: 0; }
.kpi .label { font-size: .74rem; color: var(--text-2); font-weight: 600; display: flex; gap: .35rem; align-items: center; }
.kpi .value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi .sub { font-size: .74rem; color: var(--muted); }
.kpi .sub-link { color: inherit; text-decoration: underline dotted; }
.kpi .sub-link:hover { color: var(--accent); }
.kpi .swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
a.kpi { color: inherit; } a.kpi:hover { text-decoration: none; border-color: var(--accent); }
.kpi.hero { grid-column: 1; grid-row: span 2; align-content: center; }
.kpi.hero .value { font-size: 2.6rem; }

/* ---------- charts ---------- */
.charts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.charts .card { margin: 0; }
.span-12 { grid-column: span 12; } .span-8 { grid-column: span 8; } .span-7 { grid-column: span 7; } .span-6 { grid-column: span 6; } .span-5 { grid-column: span 5; } .span-4 { grid-column: span 4; }
.chart-box { position: relative; height: 230px; }
.chart-box.tall { height: 300px; }
.bars { display: grid; gap: .35rem; }
.bar-row { display: grid; grid-template-columns: minmax(80px, 38%) 1fr 48px; gap: .5rem; align-items: center; font-size: .8rem; cursor: pointer; border-radius: 4px; padding: 1px 2px; }
.bar-row:hover { background: var(--surface-2); }
.bar-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.bar-row .track { height: 12px; }
.bar-row .fill { height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; }
.bar-row .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .78rem; color: var(--text-2); margin-top: .5rem; }
.legend span { display: inline-flex; align-items: center; gap: .3rem; }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem .55rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; white-space: nowrap; }
th.sortable { cursor: pointer; } th.sortable:hover { color: var(--text); }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--surface-2); }
tr.is-unread td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
td.id-cell { white-space: nowrap; font-weight: 600; }
td.desc { color: var(--text-2); font-size: .82rem; min-width: 280px; }
.vendors { color: var(--muted); font-size: .75rem; }
.pager { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; margin-top: .75rem; flex-wrap: wrap; }

/* ---------- detail ---------- */
.detail-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.detail-head .title { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
.detail-grid .card + .card { margin-top: 1rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .8rem; font-size: .85rem; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.vec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .35rem; margin-top: .5rem; }
.vec-cell { border: 1px solid var(--border); border-radius: 7px; padding: .3rem .45rem; font-size: .75rem; }
.vec-cell b { display: block; font-size: .82rem; }
.vec-cell.bad b { color: var(--sev-critical); }
.priority { border-radius: 10px; padding: .6rem .8rem; border: 1px solid var(--border); display: grid; gap: .15rem; min-width: 220px; }
.priority .lvl { font-weight: 800; font-size: 1.1rem; }
.priority.P1 { border-color: var(--sev-critical); } .priority.P1 .lvl { color: var(--sev-critical); }
.priority.P2 { border-color: var(--sev-high); }
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: .75rem; flex-wrap: wrap; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: .45rem .7rem; font: inherit; font-weight: 600; color: var(--text-2); cursor: pointer; }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.q-item { border: 1px solid var(--border); border-radius: 8px; padding: .5rem .6rem; margin-bottom: .45rem; display: grid; gap: .3rem; }
.q-item .q { font-family: var(--mono); font-size: .8rem; word-break: break-all; background: var(--code-bg); padding: .3rem .45rem; border-radius: 6px; }
.q-item .meta { display: flex; justify-content: space-between; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .75rem; color: var(--muted); }
ul.plain { padding-left: 1.1rem; margin: .3rem 0; }
ul.plain li { margin: .2rem 0; }
.ref-list a { word-break: break-all; }
.notice { border-left: 3px solid var(--accent); background: var(--surface-2); padding: .5rem .75rem; border-radius: 6px; font-size: .85rem; margin: .5rem 0; }
.notice.warn { border-left-color: var(--sev-high); }

/* ---------- news / KIV ---------- */
.news-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.news-item { border-bottom: 1px solid var(--border); padding: .7rem 0; display: grid; gap: .3rem; }
.news-item:last-child { border-bottom: 0; }
.news-item .t { font-weight: 600; }
.news-item .s { color: var(--text-2); font-size: .83rem; }
.news-item .m { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; font-size: .75rem; color: var(--muted); }
.kiv-item { border: 1px solid var(--border); border-radius: 8px; padding: .6rem .7rem; margin-bottom: .6rem; display: grid; gap: .4rem; }
.kiv-item.closed { opacity: .6; }
.hint { font-size: .8rem; background: var(--surface-2); border-radius: 6px; padding: .3rem .5rem; }

/* ---------- my products ---------- */
/* KPI tiles fill exactly two equal rows that match the height of the pie-chart card. */
.watch-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; align-items: stretch; }
.watch-top .kpis { margin: 0; height: 100%; }
.watch-top .kpis .kpi { align-content: space-between; }
.watch-top > .card { display: flex; flex-direction: column; }
.watch-top > .card .pie-wrap { flex: 1; }
.pie-wrap { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1rem; align-items: center; }
.pie-box { width: 180px; height: 180px; position: relative; }
#addCard { margin-bottom: 1rem; }
#watchListCard .card, #watchCharts .charts { margin-bottom: 1rem; }
th.sorted { color: var(--text); }
th.sortable { user-select: none; }
.pie-legend { display: grid; gap: .3rem; font-size: .8rem; }
.pie-legend div { display: grid; grid-template-columns: 12px 1fr auto; gap: .45rem; align-items: center; cursor: pointer; border-radius: 4px; padding: 1px 3px; }
.pie-legend div:hover { background: var(--surface-2); }
.pie-legend i { width: 12px; height: 12px; border-radius: 3px; }
.watch-table td { vertical-align: middle; }

/* ---------- dialogs / toast ---------- */
dialog { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); padding: 0; max-width: min(520px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0,0,0,.35); }
.dlg { padding: 1.1rem; display: grid; gap: .8rem; }
.dlg label select { width: auto; margin-left: .3rem; }
.dlg-actions { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
#toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: .5rem .9rem; border-radius: 8px; font-size: .85rem; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 50; }
#toast.show { opacity: 1; }
.skeleton { color: var(--muted); padding: 1rem; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .span-8, .span-7, .span-6, .span-5, .span-4 { grid-column: span 12; }
  .detail-grid, .news-layout, .watch-top { grid-template-columns: minmax(0, 1fr); }
  .watch-top .kpis { height: auto; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; }
  .kpi.hero { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .filters { position: static; max-height: none; display: none; }
  .filters.open { display: block; }
  .filter-toggle { display: inline-block; }
  .topbar { flex-wrap: wrap; }
  .nav { order: 3; flex-basis: 100%; }
  main { padding: 1rem 16px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .kpi.hero { grid-column: 1 / -1; grid-row: auto; }
  .pie-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  td.desc { min-width: 200px; }
}
@media (max-width: 600px) {
  .hide-sm { display: none; }
  .topbar-right { flex-wrap: wrap; justify-content: flex-end; gap: .3rem; }
  .topbar-right .pill { padding: .2rem .5rem; }
  .nav { gap: 0; }
  .nav a { padding: .4rem .4rem; font-size: .86rem; }
}
.head-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; min-width: 0; max-width: 100%; }
.head-actions > * { flex: 0 0 auto; }
.head-actions .chips { flex: 1 1 auto; }