/* =========================================================
   RankCortex dashboard skin — warm-minimal theme
   (tokens from /opt/website/geo-audit-spec.md §A, plus a derived
   warm-charcoal dark mode). Every text/background pair passes
   WCAG 4.5:1; the bright orange #EA580C is used only for non-text
   marks (dots, bars) because it fails 4.5:1 as text on these surfaces.
   ========================================================= */

/* Light values are the defaults so an unset/unknown data-theme still renders light. */
:root,
[data-theme="light"] {
  --accent:        #B8430A;               /* text-bearing accent (spec --accent-ink): links, active nav */
  --accent-bright: #EA580C;               /* marks only: dots, bars, window-card dot */
  --accent-hover:  #9A3708;
  --accent-soft:   #FDF1E8;
  --accent-border: #F4E0CD;
  --on-accent:     #ffffff;

  --bg:            #FDFCFA;               /* page */
  --bg-subtle:     #FAF9F5;               /* cards, header rows */
  --bg-muted:      #F0EEE6;               /* chips, code */
  --bg-active:     #FDF1E8;
  --bg-code:       #FFFFFF;               /* stat tiles, inputs */
  --bg-hover:      rgba(19,23,17,.03);
  --grid-line:     #E8E6DC;

  --border:        #ECEAE4;
  --border-strong: #DDD9CE;
  --border-code:   #ECEAE4;

  --text-strong:   #131711;
  --text-heading:  #131711;
  --text:          #55503F;
  --text-muted:    #6B6A63;               /* spec #73726C nudged darker: 4.67:1 on the chip surface */
  --text-faint:    #6B6A63;

  --ok:   #157A41;  --warn: #A14A07;  --err: #B91C1C;
  --ok-soft: #E6F4EA;  --warn-soft: #FEF3C7;  --err-soft: #FEE2E2;
  --stack-wp:   #854d0e;  --stack-next: #1d4ed8;  --stack-go: #0f766e;  --stack-other: #6B6A63;
  --shadow-card: 0 1px 2px rgba(19,23,17,.04), 0 8px 24px -12px rgba(19,23,17,.12);
  --shadow-pop:  0 1px 2px rgba(19,23,17,.04), 0 12px 32px -12px rgba(19,23,17,.18);
  --shadow-cta:  0 10px 22px -10px rgba(234,88,12,.55);
}

[data-theme="dark"] {
  --accent:        #FB8A3C;
  --accent-bright: #F97316;
  --accent-hover:  #FDA262;
  --accent-soft:   #2A1C12;
  --accent-border: #4A2E18;
  --on-accent:     #141311;

  --bg:            #141311;
  --bg-subtle:     #1B1A17;
  --bg-muted:      #25231F;
  --bg-active:     #2A1C12;
  --bg-code:       #1F1D1A;
  --bg-hover:      rgba(243,241,234,.03);
  --grid-line:     #1F1E1B;

  --border:        #2A2824;
  --border-strong: #3A3730;
  --border-code:   #2A2824;

  --text-strong:   #F3F1EA;
  --text-heading:  #F3F1EA;
  --text:          #CBC6B8;
  --text-muted:    #A09B8E;
  --text-faint:    #A09B8E;
  --link:          #F3F1EA;

  --ok:   #4ADE80;  --warn: #FBBF24;  --err: #F87171;
  --ok-soft: #13291C;  --warn-soft: #2E2410;  --err-soft: #2E1616;
  --stack-wp:   #e0a030;  --stack-next: #60a5fa;  --stack-go: #2dd4bf;  --stack-other: #A09B8E;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-pop:  0 12px 32px -12px rgba(0,0,0,.7);
  --shadow-cta:  0 10px 22px -10px rgba(249,115,22,.45);
}

/* Layout + type scale */
:root {
  --font-display: "Gabarito", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Fragment Mono", "JetBrains Mono", ui-monospace, monospace;
  --header-row: 48px;          /* 2 rows = 96px sticky header */
  --sidebar-w: 200px;         /* fixed so the layout doesn't jump while the site list loads */
  --prose-max: 768px;
  --radius: 10px;              /* spec --r-md */
  --radius-sm: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 16px/24px var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
/* Skin icons carry no width attr; data SVGs (sparklines, inline icons) size themselves. */
svg:not([width]) { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.topbar__row {
  height: var(--header-row);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 24px; gap: 16px;
}
.topbar__left  { display: flex; align-items: center; gap: 8px; }
.topbar__right { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.logo { display: flex; align-items: center; gap: 6px; color: var(--text-strong); font-weight: 600; font-size: 14px; letter-spacing: .02em; }
.logo svg { width: 20px; height: 20px; color: var(--accent); }

.search {
  width: 256px; height: 32px; display: flex; align-items: center; gap: 8px;
  padding: 0 8px; background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-muted); font-size: 15px; cursor: text;
}
.search:focus-within { border-color: var(--accent); }
.search input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none;
  font: inherit; color: var(--text-strong);
}
.search input::placeholder { color: var(--text-muted); opacity: 1; }
.search kbd { font: 500 12px var(--font-sans); padding: 0 6px; background: var(--bg); color: var(--text); }

.btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 6px 12px;
  font-size: 14px; font-weight: 500; border-radius: var(--radius); white-space: nowrap; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { filter: brightness(1.08); }
.btn--outline { border: 1px solid var(--border-strong); background: var(--bg); color: var(--text-strong); }
.btn--outline:hover { background: var(--bg-subtle); }
.btn--sm { height: 26px; padding: 2px 8px; font-size: 12px; gap: 6px; }
.btn--icon { padding: 6px 8px; }
.btn.is-err { border-color: var(--err); color: var(--err); }
.split-btn { display: flex; }
.split-btn .btn + .btn { border-left: 0; }

.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; color: var(--text-muted); }
.icon-btn:hover { color: var(--text-strong); }

/* Theme dropdown */
.theme-menu { position: relative; }
[data-theme="dark"]  .i-sun  { display: none; }
[data-theme="light"] .i-moon { display: none; }
.dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 140px; padding: 6px;
  background: var(--bg); border: 1px solid var(--border-strong); box-shadow: var(--shadow-pop);
}
.dropdown button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 8px; font-size: 14px; color: var(--text); }
.dropdown button:hover { background: var(--bg-subtle); }
.dropdown .check { margin-left: auto; visibility: hidden; color: var(--accent); }
.dropdown button.is-current { color: var(--accent); }
.dropdown button.is-current .check { visibility: visible; }

/* Tabs row */
.tabs {
  height: var(--header-row); display: flex; gap: 24px; padding: 0 24px;
  background: var(--bg-subtle); overflow-x: auto; scrollbar-width: none;
}
.tab {
  position: relative; display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--text-muted); white-space: nowrap;
}
.tab:hover { color: var(--text-strong); }
.tab.is-active { color: var(--text-strong); }
.tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); }

/* ---------- 2-column layout ---------- */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: calc(100vh - 2 * var(--header-row));
}

/* Sidebar */
.sidebar {
  position: sticky; top: calc(2 * var(--header-row)); align-self: start;
  height: calc(100vh - 2 * var(--header-row)); overflow-y: auto;
  padding: 32px 8px 32px; border-right: 1px solid var(--border); background: var(--bg);
}
.sidebar__group + .sidebar__group { margin-top: 32px; }
.sidebar__title {
  margin: 0 0 10px 12px; font-size: 11px; line-height: 16px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint);
}
.nav-link {
  display: flex; align-items: center; gap: 6px; padding: 5px 12px; margin-bottom: 1px;
  font-size: 14px; line-height: 20px; color: var(--text); cursor: pointer; list-style: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-link::-webkit-details-marker { display: none; }
.nav-link:hover { color: var(--text-strong); }
.nav-link--child { padding-left: 28px; }
.nav-link--grandchild { padding-left: 40px; }
.nav-link.is-active { background: var(--bg-active); color: var(--accent); }
.nav-link .dot { margin-right: 4px; }
.chev { width: 6px; height: 6px; margin-left: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); opacity: .6; transition: transform .15s; }
.nav-tree[open] > summary .chev { transform: rotate(45deg); }

/* Main */
.content { padding: 32px 56px 64px; min-width: 0; }
.content__inner { max-width: var(--prose-max); margin: 0 auto; }
.eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
h1 { margin: 0 0 4px; font-size: clamp(36px, 5vw, 61.6px); line-height: .95; font-weight: 500; letter-spacing: -.04em; color: var(--text-strong); }
.lead { margin: 8px 0 40px; font-size: 18px; line-height: 28px; color: var(--text); }
h2 { margin: 0; padding: 32px 0 8px; font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -.025em; color: var(--text-heading); scroll-margin-top: 110px; }
p  { font-size: 18px; line-height: 28px; margin: 0 0 20px; }
.content p a {
  color: var(--link, var(--text-heading)); font-weight: 600;
  border-bottom: 1px solid var(--accent);
}
.content p a:hover { border-bottom-width: 2px; }
code { font: 500 14px var(--font-mono); padding: 2px 8px; background: var(--bg-muted); color: var(--text-strong);
  border: 1px solid var(--border-code); border-radius: var(--radius-sm); }

/* Stat tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 8px 0 16px; }
.stat { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--border-strong); background: var(--bg-code); }
.stat__label { font-size: 13px; color: var(--text-muted); }
.stat__value { font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.stat__delta { font-size: 13px; font-weight: 500; }
.up { color: var(--ok); } .down { color: var(--err); }

/* Table */
.table-wrap { overflow-x: auto; border: 1px solid var(--border-strong); margin-bottom: 16px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 500; color: var(--text-strong); background: var(--bg-subtle); }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.badge { font-size: 12px; font-weight: 500; padding: 2px 8px; border: 1px solid currentColor; }
.badge--ok { color: var(--ok); } .badge--err { color: var(--err); } .badge--muted { color: var(--text-muted); }

/* ---------- Dashboard data pages ---------- */
/* Wide tables need the width: no prose cap. */
.layout--data .content__inner { max-width: none; }
.sub { margin: 0 0 24px; font-size: 14px; color: var(--text-muted); }
.th-sub { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.muted { color: var(--text-muted); }
.err { color: var(--err); }
.stale { color: var(--warn); }
.num { text-align: center; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--bg-hover); }
tr[id] { scroll-margin-top: 140px; }
tr.is-flash { background: var(--accent-soft); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }
.dot.is-up { background: var(--ok); }
.dot.is-down { background: var(--err); }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; margin-bottom: 8px;
  border: 1px solid var(--border-strong); background: var(--bg-subtle); font-size: 14px; }
.toolbar .toolbar__end { margin-left: auto; display: flex; gap: 8px; }
.ok-text { color: var(--ok); font-weight: 500; }
.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-row td { text-align: center; color: var(--text-muted); padding: 24px; }

/* Sortable headers + table toolbar search */
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { color: var(--accent); }
th[data-sort]::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .25; }
th[aria-sort="ascending"]::after { border-top: 0; border-bottom: 5px solid var(--accent); opacity: 1; }
th[aria-sort="descending"]::after { border-top-color: var(--accent); opacity: 1; }
.table-tools { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; flex-wrap: wrap; }
.table-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; flex: 1 1 260px; max-width: 360px;
  border: 1px solid var(--border-strong); background: var(--bg-subtle); color: var(--text-muted); }
.table-search:focus-within { border-color: var(--accent); }
.table-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--text-strong); }
.table-search input::placeholder { color: var(--text-muted); opacity: 1; }
.table-tools .js-filter-count { font-size: 13px; color: var(--text-muted); }
.table-tools__end { margin-left: auto; font-size: 13px; color: var(--text-muted); }

/* Stacked table: below the breakpoint each row becomes a card of label/value pairs. */
@media (max-width: 1100px) {
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack tr { border-bottom: 1px solid var(--border-strong); padding: 8px 0; }
  .table--stack tr:last-child { border-bottom: 0; }
  .table--stack td { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 16px; align-items: center;
    padding: 6px 14px !important; border: 0; text-align: right; white-space: normal; }
  .table--stack td[data-label]::before { content: attr(data-label); grid-row: 1 / span 9; align-self: start; text-align: left;
    font-size: 12px; font-weight: 500; color: var(--text-muted); }
  .table--stack td > * { grid-column: 2; justify-self: end; justify-content: flex-end; text-align: right; }
  .table--stack td.site-cell::before { display: none; }
  .table--stack td.site-cell { display: block; text-align: left; font-size: 15px; }
}

/* ---------- Responsive ---------- */
.only-mobile { display: none; }
.scrim { display: none; }

@media (max-width: 1280px) {
  .content { padding: 32px 32px 64px; }
}
@media (max-width: 1024px) {           /* sidebar becomes drawer */
  .layout, .layout--data { grid-template-columns: minmax(0, 1fr); }
  .only-mobile { display: inline-grid; }
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 60; height: 100vh; width: min(300px, 85vw);
    transform: translateX(-100%); transition: transform .2s ease;
  }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.5); }
  .content { padding: 24px 24px 48px; }
}
@media (max-width: 640px) {
  .topbar__row { grid-template-columns: auto 1fr auto; padding: 0 16px; }
  .search kbd, .hide-mobile { display: none; }
  .search { width: 100%; max-width: 200px; min-width: 0; justify-self: end; }
  .search input { width: 100%; }
  .topbar__right { gap: 8px; }
  .tabs { padding: 0 16px; }
  .content { padding: 20px 16px 40px; }
  .page-head { flex-direction: column; }
}

/* ---------- Project sidebar (list + search) ---------- */
.side-search {
  display: flex; align-items: center; gap: 8px; height: 32px; margin: 0 4px 10px; padding: 0 8px;
  background: var(--bg-subtle); border: 1px solid var(--border-strong); color: var(--text-muted);
}
.side-search:focus-within { border-color: var(--accent); }
.side-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 13px; color: var(--text-strong); }
.side-search input::placeholder { color: var(--text-muted); opacity: 1; }
.side-search input::-webkit-search-cancel-button { display: none; }
.side-search kbd { font: 500 11px var(--font-sans); padding: 0 5px; background: var(--bg); color: var(--text); white-space: nowrap; }
.project-link { gap: 8px; align-items: flex-start; }
.project-link > svg, .project-link > .dot { margin-top: 6px; }
.project-link > svg { width: 13px; height: 13px; color: var(--accent); }
.project-link__name { display: flex; flex-direction: column; min-width: 0; line-height: 18px; }
.project-link__name small { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
.project-link.is-first { background: var(--bg-subtle); }
.project-empty { margin: 8px 12px; font-size: 13px; color: var(--text-muted); }
:root { --sidebar-w: 232px; }

a.lnk { color: var(--accent); }
a.lnk:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 12px; }
  .stat__value { font-size: 22px; line-height: 28px; }
}

/* Autopilot badge on sidebar projects + selected-project tag next to the logo */
.project-link { position: relative; }
.pilot-badge { margin-left: auto; margin-top: 2px; display: inline-grid; place-items: center; color: var(--accent); flex: none; }
.pilot-badge svg { width: 14px; height: 14px; }
.pilot-badge.is-busy svg { animation: spin 1.4s linear infinite; }
.logo-tag {
  display: inline-flex; align-items: center; gap: 6px; max-width: 220px; margin-left: 10px; padding: 2px 9px;
  border: 1px solid var(--border-strong); background: var(--bg-subtle); color: var(--text-strong);
  font-size: 12px; font-weight: 500; line-height: 20px; white-space: nowrap;
}
.logo-tag span:last-child { overflow: hidden; text-overflow: ellipsis; }
.logo-tag svg { width: 12px; height: 12px; color: var(--accent); }
.logo-tag:hover { border-color: var(--accent); }
@media (max-width: 640px) { .logo-tag { max-width: 120px; margin-left: 6px; } }

/* Sidebar: Search Console-only projects faded; Settings pinned at the bottom */
.sidebar { display: flex; flex-direction: column; }
.sidebar__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.settings-link svg { width: 15px; height: 15px; color: var(--text-muted); }
.settings-link.is-active svg { color: var(--accent); }
.project-link.is-inactive { color: var(--text-muted); }
.project-link.is-inactive .dot { opacity: .35; background: transparent; border: 1px solid var(--text-muted); }
.project-link.is-inactive:hover { color: var(--text-strong); }

/* Project search in the top bar; section tabs in the second header row */
.top-search-slot { display: flex; justify-content: center; min-width: 0; }
.menu-link svg { width: 15px; height: 15px; color: var(--text-muted); }
.menu-link.is-active svg { color: var(--accent); }
@media (max-width: 640px) { .top-search-slot .search { max-width: none; } }

/* Settings always visible: the sidebar doesn't scroll, only the project list does */
.sidebar { overflow: hidden; padding-bottom: 0; }
.sidebar__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-right: -8px; padding-right: 8px; }
.sidebar__foot { flex: none; margin-top: 0; padding: 12px 0 16px; background: var(--bg); }

.sidebar__title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 4px 10px 0; }
.sidebar__title-row .sidebar__title { margin-bottom: 0; }
.gsc-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.gsc-toggle input { width: 13px; height: 13px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.gsc-toggle:hover { color: var(--text-strong); }

/* Tabs in the content column: sidebar runs from the top bar down, tabs start right of it */
.layout { min-height: calc(100vh - var(--header-row)); }
.sidebar { top: var(--header-row); height: calc(100vh - var(--header-row)); }
.tabs--content { position: sticky; top: var(--header-row); z-index: 30; margin: -32px -56px 32px; padding: 0 56px; border-bottom: 1px solid var(--border); }
@media (max-width: 1280px) { .tabs--content { margin: -32px -32px 32px; padding: 0 32px; } }
@media (max-width: 1024px) {
  .sidebar { top: 0; height: 100vh; }
  .tabs--content { margin: -24px -24px 24px; padding: 0 24px; }
}
@media (max-width: 640px) { .tabs--content { margin: -20px -16px 20px; padding: 0 16px; } }

/* Project search at the top of the sidebar (fixed; only the list scrolls) */
.sidebar > .side-search { flex: none; margin: 0 0 16px; }

/* ---------- Warm-minimal components (geo-audit-spec §A2/A3) ---------- */
/* Faint 24px grid behind the content column; header/sidebar paint over it. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .4;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
}
h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.04; font-size: clamp(34px, 5vw, 52px); }
h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }
.eyebrow, .sidebar__title {
  font: 400 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.logo { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: 0; }
.logo svg { color: var(--accent-bright); }

.btn--primary { border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 700; box-shadow: var(--shadow-cta);
  transition: background .15s, transform .15s; }
.btn--primary:hover { filter: none; background: var(--accent-hover); transform: translateY(-1px); }
.btn--outline { border-radius: var(--radius-pill); }
.split-btn .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split-btn .btn + .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.search, .side-search, .table-search { border-radius: var(--radius-pill); background: var(--bg-code); }
.search:focus-within, .side-search:focus-within, .table-search:focus-within { box-shadow: 0 0 0 4px var(--accent-soft); }
.search kbd, .side-search kbd { font-family: var(--font-mono); border-radius: 4px; background: var(--bg-muted); }
.dropdown { border-radius: var(--radius); }
.dropdown button { border-radius: var(--radius-sm); }
.nav-link { border-radius: var(--radius-sm); }
.logo-tag { border-radius: var(--radius-pill); }

.stat { background: var(--bg-code); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.stat__value { font-family: var(--font-mono); font-weight: 700; letter-spacing: -.03em; }
.table-wrap { border-radius: var(--radius-lg); background: var(--bg-code); box-shadow: var(--shadow-card); }
th[data-sort]:hover { color: var(--accent); }
.toolbar { border-radius: var(--radius); }
code { border-radius: var(--radius-sm); background: var(--bg-muted); }

/* Status badges: mono uppercase, soft fill + strong text of the status color */
.badge { font: 400 11px/18px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  border: 0; border-radius: var(--radius-sm); background: var(--bg-muted); }
.badge--ok  { background: var(--ok-soft); }
.badge--err { background: var(--err-soft); }
@media (max-width: 640px) {
  .topbar__row { gap: 8px; }
  .logo { font-size: 14px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }