:root {
  /* Classic: always dark, pure black page with near-black panels */
  --bg: #000000;
  --surface: #111110;
  --surface-2: #1c1c1a;
  --border: rgba(255, 255, 255, 0.10);
  --text: #ecebe6;
  --text-2: #c3c2b7;
  --muted: #8f8e86;
  --accent: #6f95ff;
  --accent-ink: #0b0b0b;
  /* severity = status palette, always paired with a text label */
  --sev-critical: #d03b3b;
  --sev-high: #ec835a;
  --sev-medium: #fab219;
  --sev-low: #7fa2ec;
  --sev-unknown: #6e6d66;
  --good: #0ca30c;
  --good-text: #0ca30c;
  --bad-text: #ff7a7a;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); }
h1, h2 { margin: 0; font-weight: 600; }
h2 { font-size: 16px; margin-bottom: 6px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

button, input, select, textarea {
  font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px;
}
button { cursor: pointer; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
button.ghost { background: transparent; }
button.ghost:hover { background: var(--surface-2); }
button:disabled { opacity: .5; cursor: default; }
a.button { display: block; text-align: center; text-decoration: none; padding: 10px 14px; border-radius: 8px; }
a.button.primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; color: inherit; text-decoration: none; border-radius: 8px; }
.brand:hover h1 { color: var(--accent); }
.brand .logo { width: 38px; height: 38px; margin: -5px -4px; }  /* the PNG includes its glow */
.brand h1 { font-size: 17px; }
.brand p { margin: 0; font-size: 12px; }
.tabs { display: flex; gap: 4px; }
.tabs button { border: none; background: transparent; padding: 8px 12px; color: var(--text-2); }
.tabs button[aria-selected="true"] { background: var(--surface-2); color: var(--text); font-weight: 600; }
.actions { display: flex; gap: 8px; }
#btnUser .initial { display: none; }

main { padding: 20px 24px 48px; max-width: 1500px; margin: 0 auto; }

/* ---------- KPI tiles ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi {
  text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden;
}
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--k, transparent); }
.kpi .label { color: var(--text-2); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.kpi .value { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi.active { outline: 2px solid var(--accent); }
.kpi:hover { background: var(--surface-2); }

/* ---------- filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.searchbar { display: flex; gap: 8px; margin-bottom: 8px; }
.searchbar input { flex: 1; min-width: 0; }
#btnFilters { display: none; }
.filters #fOs { width: 190px; }
.check { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.check input { width: auto; }

/* ---------- table ---------- */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
table.vulns tbody tr { cursor: pointer; }
table.vulns tbody tr:hover { background: var(--surface-2); }
td.id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; white-space: nowrap; }
td.desc { min-width: 280px; max-width: 520px; }
td.desc .t { font-weight: 500; }
td.desc .s { color: var(--muted); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
td.os { max-width: 220px; font-size: 12.5px; color: var(--text-2); }
td.date { white-space: nowrap; color: var(--text-2); font-variant-numeric: tabular-nums; }
.empty { text-align: center; padding: 40px; color: var(--muted); }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.pager div { display: flex; gap: 8px; }

/* ---------- badges ---------- */
.sev {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 2px 8px 2px 6px; border-radius: 999px; background: var(--surface-2); white-space: nowrap;
}
.sev::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.sev .score { font-weight: 400; color: var(--muted); }
.CRITICAL { --c: var(--sev-critical); } .HIGH { --c: var(--sev-high); } .MEDIUM { --c: var(--sev-medium); }
.LOW { --c: var(--sev-low); } .UNKNOWN { --c: var(--sev-unknown); }
.tag { display: inline-block; font-size: 11.5px; padding: 1px 7px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); margin: 1px 2px 1px 0; }
.tag.exploit { background: var(--sev-critical); color: #fff; font-weight: 600; }
.patch { white-space: nowrap; font-size: 12.5px; font-weight: 500; }
.patch.yes { color: var(--good-text); } .patch.no { color: var(--bad-text); } .patch.unk { color: var(--muted); }
.status { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.dot-new { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 4px; vertical-align: middle; }

/* ---------- drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 10; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 100vw); z-index: 11; background: var(--surface);
  box-shadow: var(--shadow); overflow-y: auto; padding: 24px 28px 40px;
}
.drawer .close { position: absolute; top: 14px; right: 14px; }
.drawer h2 { font-size: 19px; margin: 8px 40px 10px 0; line-height: 1.3; }
.drawer h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 22px 0 6px; }
.drawer .meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.drawer .meta div { background: var(--surface-2); border-radius: 8px; padding: 8px 10px; }
.drawer .meta b { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; }
.drawer pre { white-space: pre-wrap; word-break: break-word; font: inherit; margin: 0; }
.drawer .fix { background: color-mix(in srgb, var(--good) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--good) 35%, transparent); border-radius: 10px; padding: 12px 14px; }
.drawer .nofix { background: color-mix(in srgb, var(--sev-critical) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--sev-critical) 35%, transparent); border-radius: 10px; padding: 12px 14px; }
.drawer ul.refs { padding-left: 18px; margin: 0; word-break: break-all; font-size: 13px; }
.drawer .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- products ---------- */
.split { display: grid; grid-template-columns: 1fr 420px; gap: 24px; align-items: start; }
.split > * { min-width: 0; }  /* let columns shrink below their content on narrow screens */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
form.card { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 80px; }
form.card label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; font-size: 13px; }
form.card label.check { flex-direction: row; font-weight: 400; white-space: normal; align-items: flex-start; }
form.card label.check input { margin-top: 3px; flex: none; }
form.card small { font-weight: 400; color: var(--muted); }
form.card .row { display: flex; gap: 8px; }
.product-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.product { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; }
.product.off { opacity: .6; }
.product h4 { margin: 0 0 4px; font-size: 15px; }
.product .srcs { display: flex; flex-wrap: wrap; gap: 4px; }
.product .srcs .tag { overflow-wrap: anywhere; }  /* long package lists must wrap on phones */
.product .btns { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.product .toggle { display: inline-flex; align-items: center; gap: 6px; }
.switch { position: relative; width: 38px; height: 22px; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--sev-unknown); border-radius: 999px; transition: .15s; cursor: pointer; }
.switch span::after { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .15s; }
.switch input:checked + span { background: var(--good); }
.switch input:checked + span::after { transform: translateX(16px); }

.ok { color: var(--good-text); font-weight: 500; } .err { color: var(--bad-text); font-weight: 500; }

/* ---------- toasts ---------- */
.toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 20; }
.toast { background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow); max-width: 380px; cursor: pointer; }

/* ======================= Skins (theme picker in the user menu) ======================= */

/* OC Classic (default) — Classic layout in the Outburst Consulting palette:
   black page, deep-navy panels, signal-teal accent, Inter + JetBrains Mono */
@font-face { font-family: "Inter"; src: url("/static/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/static/fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
:root[data-skin="oc"] {
  --bg: #000000; --surface: #06090f; --surface-2: #0f1a2b; --border: rgba(94, 234, 212, 0.14);
  --text: #eaf2f8; --text-2: #9fb0c4; --muted: #7487a0; --accent: #5eead4; --accent-ink: #02120f;
  --sev-unknown: #5a6b80; --good: #6ec180; --good-text: #6ec180;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}
[data-skin="oc"] body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[data-skin="oc"] .top { background: rgba(6, 10, 18, .97); border-bottom-color: rgba(94, 234, 212, .2); }
[data-skin="oc"] .tabs button[aria-selected="true"] { background: rgba(94, 234, 212, .08); color: var(--accent); }
[data-skin="oc"] button.primary:hover { background: #99f5e4; }
[data-skin="oc"] .kpi .value, [data-skin="oc"] td.id, [data-skin="oc"] .tag { font-family: "JetBrains Mono", ui-monospace, monospace; }
[data-skin="oc"] .kpi .value { font-weight: 500; }
[data-skin="oc"] th { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
/* Command Center — dark navy SOC console, cyan accent (Falcon / CyFocus style) */
:root[data-skin="command"] {
  --bg: #0a0f1a; --surface: #101827; --surface-2: #172033; --border: rgba(148, 163, 184, 0.14);
  --text: #e2e8f0; --text-2: #b6c2d4; --muted: #7d8ba1; --accent: #22d3ee; --accent-ink: #04121a;
  --sev-critical: #ff4d5e; --sev-high: #ff8a3d; --sev-medium: #f5c518; --sev-low: #4f9dff; --sev-unknown: #5b6577;
  --good: #22c55e; --good-text: #4ade80; --bad-text: #ff6b7a; --shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}
[data-skin="command"] .top { background: linear-gradient(180deg, #0f1828, #0c1422); }
[data-skin="command"] .kpi { border-top: 1px solid rgba(34, 211, 238, .18); }
[data-skin="command"] .kpi::before { width: 100%; height: 2px; bottom: auto; opacity: .9; }
[data-skin="command"] .kpi .value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
[data-skin="command"] th { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
[data-skin="command"] .tabs button[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--accent); background: transparent; }

/* Enterprise — light, Fluent-like (Microsoft Defender / Tenable style) */
:root[data-skin="enterprise"] {
  --bg: #f3f2f1; --surface: #ffffff; --surface-2: #f5f7fb; --border: #e1dfdd;
  --text: #201f1e; --text-2: #3b3a39; --muted: #605e5c; --accent: #0f6cbd; --accent-ink: #ffffff;
  --sev-critical: #c50f1f; --sev-high: #da3b01; --sev-medium: #c19c00; --sev-low: #8a8886; --sev-unknown: #c8c6c4;
  --good: #107c10; --good-text: #107c10; --bad-text: #c50f1f; --shadow: 0 6.4px 14.4px rgba(0, 0, 0, .13);
  color-scheme: light;
}
[data-skin="enterprise"] body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
[data-skin="enterprise"] .top { background: #0f6cbd; border-bottom: none; }
[data-skin="enterprise"] .top, [data-skin="enterprise"] .brand .muted { color: #fff; }
[data-skin="enterprise"] .tabs button { color: rgba(255, 255, 255, .85); }
[data-skin="enterprise"] .tabs button[aria-selected="true"] { background: rgba(255, 255, 255, .18); color: #fff; }
[data-skin="enterprise"] .actions > button.ghost, [data-skin="enterprise"] #btnUser { color: #fff; border-color: rgba(255, 255, 255, .4); }
[data-skin="enterprise"] #btnUser .muted { color: rgba(255, 255, 255, .75); }
[data-skin="enterprise"] .actions > button.ghost:hover, [data-skin="enterprise"] #btnUser:hover { background: rgba(255, 255, 255, .15); }
[data-skin="enterprise"] .usermenu .menu { color: var(--text); }
[data-skin="enterprise"] .top button.primary { background: #fff; color: #0f6cbd; }
[data-skin="enterprise"] .kpi, [data-skin="enterprise"] .table-wrap, [data-skin="enterprise"] .card { border-radius: 4px; box-shadow: 0 1.6px 3.6px rgba(0,0,0,.13), 0 .3px .9px rgba(0,0,0,.11); border-color: transparent; }
[data-skin="enterprise"] button, [data-skin="enterprise"] input, [data-skin="enterprise"] select, [data-skin="enterprise"] textarea { border-radius: 4px; }
[data-skin="enterprise"] .sev { border-radius: 3px; }

/* Terminal — black + lime, monospace (SOCius / pentest tooling style) */
:root[data-skin="terminal"] {
  --bg: #050805; --surface: #0b110b; --surface-2: #111a11; --border: rgba(132, 255, 87, 0.16);
  --text: #d7f5d0; --text-2: #a6d1a0; --muted: #6f9469; --accent: #84ff57; --accent-ink: #061006;
  --sev-critical: #ff5f56; --sev-high: #ffa94d; --sev-medium: #ffd43b; --sev-low: #74c0fc; --sev-unknown: #4d634a;
  --good: #84ff57; --good-text: #84ff57; --bad-text: #ff5f56; --shadow: 0 10px 40px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
[data-skin="terminal"] body { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
[data-skin="terminal"] button, [data-skin="terminal"] input, [data-skin="terminal"] select, [data-skin="terminal"] textarea,
[data-skin="terminal"] .kpi, [data-skin="terminal"] .table-wrap, [data-skin="terminal"] .card, [data-skin="terminal"] .sev,
[data-skin="terminal"] .tag { border-radius: 2px; }
[data-skin="terminal"] .brand h1::before { content: "> "; color: var(--accent); }
[data-skin="terminal"] th { text-transform: uppercase; letter-spacing: .08em; }
[data-skin="terminal"] .kpi .label { text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }

/* ======================= Accounts ======================= */
/* .gadmin-only: global admins; .tadmin-only: admins of the current team (global admins too) */
body:not(.global-admin) .gadmin-only { display: none !important; }
body:not(.team-admin):not(.global-admin) .tadmin-only { display: none !important; }
body:not(.global-admin) #tab-products .split, body:not(.global-admin) #tab-teams .split { grid-template-columns: 1fr; }
body.no-team #tab-vulns, body.no-team #tab-products,
body.no-team .tabs button[data-tab="vulns"], body.no-team .tabs button[data-tab="products"] { display: none !important; }

/* ======================= Teams ======================= */
.teambar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; color: var(--text-2); }
.teambar select { font-weight: 600; color: var(--text); min-width: 0; max-width: 60vw; }
.teambar select:disabled { opacity: 1; cursor: default; }
.notice { margin-bottom: 16px; }
.notice p { margin: 6px 0 0; }
#tab-teams h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 20px 0 8px; }
.add-member { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.alerts-form { position: static !important; margin-top: 22px; }
.alerts-form .row { flex-wrap: wrap; align-items: flex-end; }
.alerts-form .row > label:not(.check) { flex: 1 1 200px; }
.alerts-form .row > label.check { flex: 1 1 200px; min-width: 0; }
.secret { display: flex; gap: 6px; }
.secret input { flex: 1; min-width: 0; }
.team-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 14px; }
.team-row { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: space-between; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.team-row.current { border-color: var(--accent); }
.team-row .btns { display: flex; gap: 6px; align-items: center; }
#teamForm { display: flex; gap: 8px; }
#teamForm input { flex: 1; min-width: 0; }
.usermenu { position: relative; }
.usermenu .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; padding: 6px; display: flex; flex-direction: column; min-width: 180px; box-shadow: var(--shadow); }
.usermenu .menu button { text-align: left; border: none; }
dialog.card { color: var(--text); padding: 20px; width: min(380px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0, 0, 0, .5); }
dialog form, form.login, div.login { display: flex; flex-direction: column; gap: 12px; }
dialog label, form.login label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }
dialog small { font-weight: 400; color: var(--muted); }
dialog .row { display: flex; gap: 8px; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
form.login, div.login { width: min(360px, 100%); padding: 28px; }
form.login .brand, div.login .brand { margin: 0 0 8px; flex-direction: column; text-align: center; }
form.login .brand .logo, div.login .brand .logo { width: 96px; height: 96px; margin: 0; }
.role-tag { font-size: 11.5px; padding: 1px 7px; border-radius: 6px; background: var(--surface-2); white-space: nowrap; }
.role-tag.admin { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }

.menu-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); padding: 4px 6px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.menu-field select { color: var(--text); }

/* ======================= Responsive ======================= */

/* Laptop / small desktop: drop the least important column */
@media (max-width: 1180px) {
  table.vulns th:nth-child(8), table.vulns td.status { display: none; }
}

/* Tablet */
@media (max-width: 1024px) {
  .top { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; padding: 10px 16px; }
  .tabs { grid-column: 1 / -1; order: 3; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; min-width: 0; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: 0 0 auto; }
  main { padding: 16px 16px 40px; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .split { grid-template-columns: 1fr; }
  form.card { position: static; }
  .filters > * { flex: 1 1 30%; min-width: 0; }
  .filters #fOs { width: auto; }
  table.vulns th:nth-child(5), table.vulns td.os { display: none; }
  /* fixed column widths so product / patch / date never get pushed off-screen */
  table.vulns { table-layout: fixed; }
  table.vulns th:nth-child(1) { width: 118px; }
  table.vulns th:nth-child(2) { width: 118px; }
  table.vulns th:nth-child(4) { width: 100px; }
  table.vulns th:nth-child(6) { width: 112px; }
  table.vulns th:nth-child(7) { width: 104px; }
  table.vulns td.desc { min-width: 0; max-width: none; }
  table.vulns td.id { white-space: normal; word-break: break-all; }
  table.vulns td.date { white-space: normal; }
  td, th { padding: 10px 8px; }
  .drawer { padding: 20px 16px 32px; }
}

/* Phone */
@media (max-width: 680px) {
  body { font-size: 14px; }
  .top { padding: 8px 12px; }
  .tabs { margin: 0 -12px; padding: 0 12px; }
  .brand .logo { width: 32px; height: 32px; }
  .brand h1 { font-size: 16px; white-space: nowrap; }
  #lastUpdate { display: none; }  /* source status lives in the Sources tab */
  .actions { gap: 6px; }
  .actions .label { display: none; }
  #btnUser #meRole { display: none; }
  #btnUser #meName { display: inline-block; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
  main { padding: 12px 12px 32px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi .value { font-size: 22px; }

  /* filters fold behind a button */
  #btnFilters { display: inline-block; }
  .filters { display: none; }
  .filters-open .filters { display: flex; }
  .filters > * { flex: 1 1 calc(50% - 4px); }

  /* tables become stacked cards */
  table.cards thead { display: none; }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; }
  .table-wrap { background: transparent; border: none; overflow: visible; }
  table.cards tr { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
  table.cards td { border: none; padding: 3px 0; }
  table.cards td[data-label] { text-align: right; }
  table.cards td[data-label]::before { content: attr(data-label); float: left; margin-right: 12px; color: var(--muted); font-size: 12px; }
  table.cards td.title { font-size: 15px; padding-bottom: 6px; }
  table.cards td.actions-cell { padding-top: 8px; display: flex; gap: 8px; }

  /* vulnerability card: severity + id on top, then title, then product/patch/date */
  table.vulns { table-layout: auto; }
  table.vulns tr { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; }
  table.vulns td.sevcell { grid-column: 1; }
  table.vulns td.id { grid-column: 2; text-align: right; white-space: normal; }
  table.vulns td.id br { display: none; }
  table.vulns td.desc { grid-column: 1 / -1; min-width: 0; max-width: none; }
  table.vulns td.prod { grid-column: 1 / -1; }
  table.vulns td.patchcell { grid-column: 1; }
  table.vulns td.date { grid-column: 2; text-align: right; }
  table.vulns td.os, table.vulns td.status { display: none; }

  .pager { flex-direction: column; gap: 8px; align-items: stretch; }
  .pager div { justify-content: space-between; }
  .drawer { width: 100vw; padding: 16px 14px 32px; }
  .drawer h2 { font-size: 17px; }
  .drawer .meta { grid-template-columns: 1fr 1fr; }
  .product { grid-template-columns: 1fr; }
  .product .btns { justify-content: flex-start; }
  .toasts { left: 12px; right: 12px; bottom: 12px; }
  .toast { max-width: none; }
}
@media (max-width: 480px) {
  /* the name no longer fits next to the brand: show the user's initial instead */
  #btnUser { padding: 4px; border-radius: 50%; }
  #btnUser #meName { display: none; }
  #btnUser .initial {
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--surface-2); color: var(--accent); font-weight: 600;
  }
}
@media (max-width: 360px) {
  .top { gap: 8px; }
  .brand { gap: 6px; }
  .brand .logo { width: 28px; height: 28px; }
  .brand h1 { font-size: 15px; }
  .actions { gap: 4px; }
  .actions > button { padding: 6px 8px; }
  [data-skin="terminal"] .brand h1 { font-size: 14px; }
  [data-skin="terminal"] .brand h1::before { content: none; }
}


/* Browser alerts button: highlighted once notifications are allowed */
#btnNotify.on { color: var(--accent); border-color: var(--accent); }

/* Collapsible help inside forms */
.form-help { margin: 0 0 12px; font-size: 13px; color: var(--text-2); }
.form-help summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.form-help ul { margin: 8px 0 4px; padding-left: 18px; }
.form-help li { margin: 4px 0; }
.form-help code { overflow-wrap: anywhere; }