@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

    :root {
      /* Deep truffle-brown dark default. Sans-only. Hierarchy via weight/size/caps, never serif. */
      --bg: #151311;
      --surface: #1D1916;
      --surface2: #27211E;
      --surface3: #342B26;
      --border: #342B26;
      --border-hover: #544338;
      --text: #F0EBDE;
      --text-dim: #B8B1A0;
      --text-faint: #9E978A;
      --text-bright: #FFFDF6;
      --accent: #E87A48;
      --accent-dim: #CC5C2A;
      --accent-soft: #3A2A1F;
      --accent-text: #1B1A17;
      --accent-glow: rgba(232,122,72,.06);
      --accent-glow2: rgba(232,122,72,.14);
      --pivot: #89A6B4;
      --pivot-soft: #253642;

      --red: #E87060;       --red-dim: rgba(232,112,96,.14);
      --orange: #E87A48;    --orange-dim: rgba(232,122,72,.14);
      --yellow: #D4A332;    --yellow-dim: rgba(212,163,50,.14);
      --green: #86B078;     --green-dim: rgba(134,176,120,.14);
      --purple: #A895D1;    --purple-dim: rgba(168,149,209,.14);
      --ok: var(--green);   --warn: var(--yellow);

      --radius: 6px;
      --radius-lg: 10px;
      --radius-xl: 14px;
      --shadow-xs: 0 1px 2px rgba(0,0,0,.25);
      --shadow-sm: 0 1px 0 rgba(0,0,0,.3);
      --shadow-md: 0 2px 8px rgba(0,0,0,.35);
      --shadow-lg: 0 20px 48px rgba(0,0,0,.5);

      --ease-out: cubic-bezier(.16,1,.3,1);

      --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Fira Code', monospace;
    }

    /* Light mode: cool porcelain white, deliberate contrast with the warm dark. */
    [data-theme="light"] {
      --bg: #F2F3F5;
      --surface: #F6F7F8;
      --surface2: #E1E4EA;
      --surface3: #CDD2DD;
      --border: #C7CDD8;
      --border-hover: #9FA8B9;
      --text: #1B1A17;
      --text-dim: #5A564C;
      --text-faint: #655F4F;
      --text-bright: #0E0D0B;
      --accent: #C7541F;
      --accent-dim: #A8451A;
      --accent-soft: #F4DDCB;
      --accent-text: #FFFFFF;
      --accent-glow: rgba(199,84,31,.06);
      --accent-glow2: rgba(199,84,31,.12);
      --pivot: #33566B;
      --pivot-soft: #D8E2EA;

      --red: #B63B28;       --red-dim: rgba(182,59,40,.10);
      --orange: #C7541F;    --orange-dim: rgba(199,84,31,.10);
      --yellow: #9A7210;    --yellow-dim: rgba(154,114,16,.10);
      --green: #5E7A52;     --green-dim: rgba(94,122,82,.12);
      --purple: #6F5B9C;    --purple-dim: rgba(111,91,156,.10);
      --ok: var(--green);   --warn: var(--yellow);

      --shadow-xs: 0 1px 2px rgba(27,26,23,.04);
      --shadow-sm: 0 1px 0 rgba(27,26,23,.04);
      --shadow-md: 0 2px 8px rgba(27,26,23,.06);
      --shadow-lg: 0 12px 32px rgba(27,26,23,.10);
    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    /* Global focus ring. crisp two-stop, bg-punch then accent halo. */
    button:focus-visible, a:focus-visible, input:focus-visible,
    select:focus-visible, [role="button"]:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
      border-radius: var(--radius);
    }
    /* Fallback for anything else keyboard-focused. */
    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: 3px;
    }
    ::selection { background: var(--accent-soft); color: var(--text-bright); }
    /* Smooth scroll for in-page anchor jumps + tint native form controls
       (checkboxes, range, progress) with the brand accent. The reduced-motion
       media query below kills the smooth-scroll for users who opt out. */
    html { scroll-behavior: smooth; }
    :root, html { accent-color: var(--accent); }
    /* Scrollbar blends into the page. Styling ::-webkit-scrollbar opts Chrome
       out of its overlay scrollbar, whose built-in gradient paints a dark
       "shadow" band along the right edge; the painted track below matches the
       background exactly so the band is gone and the thumb follows the theme.
       scrollbar-color would re-enable native painting in Chrome, so it is
       scoped to engines without ::-webkit-scrollbar (Firefox). */
    :root { color-scheme: dark; }
    [data-theme="light"] { color-scheme: light; }
    @supports not selector(::-webkit-scrollbar) {
      html { scrollbar-color: var(--surface3) var(--bg); }
    }
    ::-webkit-scrollbar { width: 11px; height: 11px; background: var(--bg); }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-corner { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 8px; border: 2px solid var(--bg); }
    ::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
    /* Respect reduced-motion preferences: drop transitions + smooth scroll */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    body {
      font-family: var(--font);
      background-color: var(--bg);
      /* Subtle paper texture. single radial grain, tuned for dark default. */
      background-image:
        radial-gradient(1px 1px at 12px 12px, rgba(255,255,255,.022) 1px, transparent 0);
      background-size: 24px 24px;
      color: var(--text);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      line-height: 1.55;
      font-size: 14px;
      font-feature-settings: 'ss01' on, 'cv11' on;
      /* Belt-and-braces: prevent any rogue child from blowing horizontal scroll. */
      overflow-x: hidden;
    }
    html { overflow-x: hidden; max-width: 100vw; }
    [data-theme="light"] body {
      background-image:
        radial-gradient(1px 1px at 12px 12px, rgba(27,26,23,.022) 1px, transparent 0);
    }
    /* Prose links (inline, in paragraphs). quiet until hover. */
    a {
      color: var(--accent); text-decoration: none;
    }
    a:hover { text-decoration: underline; text-underline-offset: 3px; }
    /* Inline prose link treatment. hairline underline at accent-40%,
       lifts to full accent on hover. Scoped so UI elements (buttons, tile
       links) stay clean. */
    p a, .home-sub a, .home-caption a, .fd-link-row a {
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
      text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
      transition: text-decoration-color .15s var(--ease-out);
    }
    p a:hover, .home-sub a:hover, .home-caption a:hover, .fd-link-row a:hover {
      text-decoration-color: var(--accent);
    }

    /* Utility: small-caps investigation label. */
    .label-caps {
      font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
      font-weight: 500; color: var(--text-dim);
    }

    /* ===== NAVBAR ===== */
    .navbar {
      position: sticky; top: 0; z-index: 100;
      display: flex; align-items: center; gap: 16px;
      padding: 0 24px; height: 56px;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
    }
    .nav-brand {
      display: inline-flex; align-items: baseline; gap: 0;
      text-decoration: none; color: var(--text-bright);
      font-weight: 600; font-size: 17px; letter-spacing: -0.015em;
      flex-shrink: 0; cursor: pointer;
      word-spacing: 0;
    }
    .nav-brand span {
      color: var(--accent);
      font-weight: 600;
      letter-spacing: -0.015em;
      margin: 0; padding: 0;
    }
    .nav-search {
      flex: 1; max-width: 520px; margin: 0 auto;
      display: flex; align-items: center; gap: 8px;
    }
    .nav-input {
      flex: 1; height: 34px; padding: 0 12px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-bright); font-family: var(--mono); font-size: 13px;
      outline: none;
      box-shadow: var(--shadow-sm);
      transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
    }
    .nav-input:hover { border-color: var(--border-hover); }
    .nav-input:focus {
      border-color: var(--border-hover);
    }
    .nav-input::placeholder { color: var(--text-faint); font-family: var(--mono); }
    .nav-scan-btn {
      height: 34px; padding: 0 14px;
      background: var(--accent); color: #fff;
      border: 1px solid var(--accent-dim); border-radius: 8px;
      font-family: var(--font); font-size: 13px; font-weight: 500;
      letter-spacing: -.005em;
      cursor: pointer;
      transition: background .15s var(--ease-out), box-shadow .15s var(--ease-out);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12), var(--shadow-sm);
    }
    .nav-scan-btn:hover {
      background: var(--accent-dim);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 3px rgba(0,0,0,.25);
    }
    .nav-scan-btn:active {
      background: var(--accent-dim);
      box-shadow: inset 0 2px 3px rgba(0,0,0,.22);
    }
    .nav-scan-btn:focus,
    .nav-scan-btn:focus-visible {
      outline: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.16), var(--shadow-sm);
    }
    .nav-scan-btn:disabled { opacity: .4; cursor: not-allowed; }
    .nav-actions {
      display: flex; gap: 6px; flex-shrink: 0;
    }
    .nav-btn {
      height: 34px; padding: 0 12px;
      background: transparent; border: 1px solid transparent;
      border-radius: 8px; color: var(--text-dim);
      font-family: var(--font); font-size: 13px; font-weight: 500;
      cursor: pointer; transition: all .15s var(--ease-out);
      display: flex; align-items: center; gap: 6px;
    }
    .nav-btn:hover {
      background: var(--surface2);
      border-color: var(--border);
      color: var(--text-bright);
    }
    .nav-btn.active { border-color: var(--border); color: var(--accent); background: var(--surface2); }

    /* Flag language switcher (segmented pills) */
    .lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 2px;
      background: var(--surface2, var(--surface)); border: 1px solid var(--border); border-radius: 9px; }
    .lang-opt { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px;
      background: none; border: none; border-radius: 7px; cursor: pointer; color: var(--text-faint);
      font: inherit; font-size: 12px; line-height: 1; transition: background .12s, color .12s; }
    .lang-opt:hover { color: var(--text); }
    .lang-opt.active { background: var(--bg); color: var(--accent); font-weight: 600;
      box-shadow: 0 1px 2px rgba(0,0,0,.18); }
    .lang-flag { font-size: 14px; line-height: 1; }
    .lang-code { font-family: var(--mono); letter-spacing: .02em; }
    @media (max-width: 560px) { .lang-code { display: none; } .lang-opt { padding: 6px 7px; } }

    /* On landing, hide the nav search visually but keep layout + DOM
       (the hero form writes into #domain-input). */
    body:has(#view-home.view.active) .navbar .nav-search {
      opacity: 0;
      pointer-events: none;
    }
    /* On small screens (any view), the navbar search is too cramped, drop it
       from layout entirely. Scans can still be launched from the home page
       hero form or by navigating back to /. */
    @media (max-width: 720px) {
      .navbar .nav-search { display: none !important; }
      .nav-actions { gap: 6px; flex-shrink: 0; }
      .nav-btn { padding: 0 10px; font-size: 12px; height: 36px; min-height: 36px; }
      .navbar { gap: 8px; }
    }

    /* ===== VIEWS ===== */
    .view { display: none; }
    .view.active { display: block; }

    /* ===== HOME ===== */
    .home-hero {
      display: flex; flex-direction: column; align-items: center;
      justify-content: center;
      padding: 64px 24px 24px; text-align: center;
      max-width: 720px; margin: 0 auto; gap: 24px;
    }
    .home-title {
      font-family: var(--font);
      font-size: clamp(52px, 8vw, 88px);
      font-weight: 600; color: var(--text-bright);
      letter-spacing: -0.03em; line-height: 1;
      display: inline-flex; align-items: baseline; gap: 0;
      word-spacing: 0;
      margin: 0;
    }
    .home-title span {
      color: var(--accent);
      font-weight: 600;
      letter-spacing: -0.03em;
      margin: 0; padding: 0;
    }

    /* Hero search: pill form, prominent, copies value to #domain-input
       before startScan. Three states need to harmonise visually because
       they share screen space:
         - rest:   subtle border, soft shadow
         - hover:  border lift, micro shadow growth
         - focus:  accent border + tinted halo, button left edge picks up
                   a thin separator so the button doesn't fuse into the
                   pill border on the warm-dark theme.
       */
    .home-search {
      display: flex; align-items: center;
      width: min(560px, 92vw); height: 58px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: var(--shadow-xs);
      padding: 0;
      transition:
        border-color .18s var(--ease-out),
        box-shadow .2s var(--ease-out),
        background .18s var(--ease-out);
    }
    .home-search:hover {
      border-color: var(--border-hover);
      box-shadow: 0 1px 12px rgba(0,0,0,.18);
    }
    /* Keyboard focus on the input must be visible (WCAG 2.4.7): a caret alone is
       not enough. Show a clear accent halo on the whole search pill. */
    .home-search:focus-within {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .home-search-input {
      flex: 1; min-width: 0;
      background: transparent; border: 0; outline: none;
      padding: 0 16px 0 22px;
      font-family: var(--mono); font-size: 17px;
      color: var(--text-bright);
      height: 100%;
      color-scheme: dark;
      letter-spacing: -0.005em;
      caret-color: var(--accent);
    }
    .home-search-input::placeholder {
      color: var(--text-faint); letter-spacing: 0;
    }
    .home-search-btn {
      height: 44px; padding: 0 22px; margin-right: 7px;
      border: 0; border-radius: 10px;
      background: var(--accent); color: var(--accent-text);
      font-family: var(--font); font-weight: 600;
      font-size: 14px; letter-spacing: 0.01em;
      cursor: pointer; flex-shrink: 0;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.16),
                  0 1px 2px rgba(0, 0, 0, .25);
      transition:
        background .15s var(--ease-out),
        box-shadow .15s var(--ease-out),
        transform .12s var(--ease-out);
    }
    .home-search-btn:hover {
      background: var(--accent-dim);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.22),
                  0 2px 8px rgba(199, 84, 31, .35);
      transform: translateY(-1px);
    }
    .home-search-btn:active {
      background: var(--accent-dim);
      box-shadow: inset 0 2px 3px rgba(0,0,0,.22);
      transform: translateY(0);
    }
    /* Mouse click: no ring. Keyboard focus (WCAG 2.4.7): a clear ring on the
       primary action — it must never be invisible to keyboard users. */
    .home-search-btn:focus { outline: none; }
    .home-search-btn:focus-visible {
      outline: 2px solid var(--text-bright);
      outline-offset: 2px;
      box-shadow: 0 0 0 4px var(--accent-soft);
    }
    .home-tagline {
      font-size: clamp(15px, 2.2vw, 19px);
      font-weight: 500; color: var(--text);
      letter-spacing: .005em; line-height: 1.3; margin: 8px 0 0;
    }
    .home-tagline::after { content: ""; }
    .home-sub {
      font-size: clamp(15px, 1.4vw, 17px);
      color: var(--text-dim); max-width: 580px;
      line-height: 1.6;
      font-weight: 400;
      text-align: center;
      margin: 0;
    }
    .home-hint {
      margin: 0; font-size: 12px; color: var(--text-faint);
      font-family: var(--mono); letter-spacing: .02em;
    }
    .home-hint kbd {
      background: var(--surface2); border: 1px solid var(--border);
      padding: 2px 6px; border-radius: 4px; font-size: 11px;
      font-family: var(--mono); color: var(--text);
      box-shadow: inset 0 -1px 0 var(--border);
    }
    .home-adv {
      width: 100%; max-width: 460px; margin: 4px auto 0;
      text-align: left; border: 1px solid var(--border); border-radius: 12px;
      background: var(--surface); overflow: hidden;
    }
    .home-adv > summary {
      list-style: none; cursor: pointer; user-select: none;
      padding: 10px 14px; font-size: 12px; color: var(--text-dim);
      display: flex; align-items: center; gap: 8px;
    }
    .home-adv > summary::-webkit-details-marker { display: none; }
    .home-adv > summary::before { content: '+'; font-family: var(--mono); color: var(--text-faint); }
    .home-adv[open] > summary::before { content: '-'; }
    .home-adv > summary:hover { color: var(--text); }
    .home-adv-body { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
    .home-adv-field { display: flex; flex-direction: column; gap: 4px; }
    .home-adv-k { font-size: 11px; letter-spacing: .03em; color: var(--text-faint); text-transform: uppercase; }
    .home-adv-input {
      width: 100%; box-sizing: border-box; padding: 7px 10px;
      background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
      color: var(--text); font-size: 13px; font-family: inherit;
    }
    .home-adv-input:focus { outline: none; border-color: var(--accent); }
    .home-adv-dates { display: flex; align-items: center; gap: 8px; }
    .home-adv-date { width: auto; flex: 1; }
    .home-adv-arrow { color: var(--text-faint); font-family: var(--mono); }
    .home-adv-hint { font-size: 11px; color: var(--text-faint); margin: 2px 0 0; }
    .home-adv-hint a { color: var(--text-dim); }
    .home-adv-hint a:hover { color: var(--accent); }
    /* Month-range picker (date calendar) */
    .mrp { position: relative; }
    .mrp-field {
      width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;
      padding: 7px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
      color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer; text-align: left;
    }
    .mrp-field:hover { border-color: var(--border-hover); }
    .mrp-caret { color: var(--text-faint); font-size: 10px; }
    .mrp-pop {
      position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: 300px; max-width: 92vw;
      background: var(--surface2, var(--surface)); border: 1px solid var(--border-hover); border-radius: 12px;
      box-shadow: 0 14px 40px rgba(0,0,0,.45); padding: 12px;
    }
    .mrp-pop[hidden] { display: none; }
    .mrp-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
    .mrp-presets button {
      font-size: 11px; color: var(--text-dim); background: var(--bg); border: 1px solid var(--border);
      border-radius: 999px; padding: 4px 9px; cursor: pointer;
    }
    .mrp-presets button:hover { color: var(--text-bright); border-color: var(--accent); }
    .mrp-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .mrp-cal-head button {
      background: var(--bg); border: 1px solid var(--border); border-radius: 7px; color: var(--text-dim);
      width: 26px; height: 26px; cursor: pointer; font-size: 13px; line-height: 1;
    }
    .mrp-cal-head button:hover { color: var(--text-bright); border-color: var(--border-hover); }
    .mrp-cal-head button:disabled { opacity: .35; cursor: default; }
    .mrp-cal-year { font-size: 13px; color: var(--text); font-family: var(--mono); }
    .mrp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
    .mrp-m {
      font-size: 12px; color: var(--text-dim); background: var(--bg); border: 1px solid transparent;
      border-radius: 7px; padding: 7px 0; cursor: pointer; text-align: center;
    }
    .mrp-m:hover { color: var(--text-bright); border-color: var(--border-hover); }
    .mrp-m.in-range { background: var(--accent-glow); color: var(--text); }
    .mrp-m.end { background: var(--accent); color: #fff; border-color: var(--accent); }
    .mrp-m.disabled { opacity: .3; cursor: default; }
    .mrp-m.disabled:hover { color: var(--text-dim); border-color: transparent; }
    .mrp-manual { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
    .mrp-manual-input {
      width: 76px; box-sizing: border-box; padding: 5px 7px; background: var(--bg);
      border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-size: 12px;
      font-family: var(--mono);
    }
    .mrp-manual-input:focus { outline: none; border-color: var(--accent); }
    .mrp-arrow { color: var(--text-faint); }
    .mrp-set {
      margin-left: auto; font-size: 11px; color: var(--text-dim); background: var(--bg);
      border: 1px solid var(--border); border-radius: 7px; padding: 5px 10px; cursor: pointer;
    }
    .mrp-set:hover { color: var(--text-bright); border-color: var(--accent); }
    .mrp-live { font-size: 11px; color: var(--text-faint); margin-top: 8px; min-height: 13px; }
    @media (max-width: 560px) {
      .mrp-pop { position: fixed; left: 50%; top: auto; bottom: 12px; transform: translateX(-50%); width: 340px; }
    }
    .home-hint-sep { color: var(--text-faint); margin: 0 6px; }
    .home-hint-link {
      color: var(--text-dim); text-decoration: none;
      border-bottom: 1px dotted var(--border-hover);
      transition: color .15s var(--ease-out), border-color .15s var(--ease-out);
    }
    .home-hint-link:hover {
      color: var(--accent); border-bottom-color: var(--accent);
    }
    /* Capabilities strip. not cards. Three compact items, each with a
       quiet accent icon, title, and one-line description. Dividers are
       hairlines that disappear on the narrow layout. */
    .home-capabilities {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      width: 100%;
      max-width: 680px;
      margin: 16px 0 0;
      padding: 20px 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .home-capabilities > li {
      display: flex; flex-direction: column; gap: 4px;
      padding: 4px 16px;
      text-align: left;
      border-right: 1px solid var(--border);
      min-width: 0;
    }
    .home-capabilities > li:last-child { border-right: none; }
    .home-cap-label {
      font-size: 11px; font-weight: 600; color: var(--text-bright);
      text-transform: uppercase;
      letter-spacing: .08em;
    }
    .home-cap-desc {
      font-size: 13px; color: var(--text-dim);
      line-height: 1.5;
    }
    .home-caption {
      margin: 0;
      color: var(--text-faint);
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-weight: 500;
    }
    /* Wayback Machine source credit — the logo is black+red, so on the dark
       default theme we flip it to white; on the light theme it keeps its colours.
       No background, per design. */
    .home-wayback { margin: 22px 0 8px; text-align: center; line-height: 1; display: flex; align-items: center; justify-content: center; gap: 11px; }
    .home-wayback span {
      font-family: var(--font); font-size: 13px; letter-spacing: 0;
      text-transform: none; color: var(--text-dim); vertical-align: middle;
    }
    .wb-logo { height: 26px; vertical-align: middle; opacity: .85; filter: brightness(0) invert(1); }
    [data-theme="light"] .wb-logo { filter: none; opacity: .9; }
    .home-wayback a:hover .wb-logo { opacity: 1; }

    /* v1.6 — present categories neutrally: provenance (first/last-seen,
       occurrences, source) is the evidence, so the severity "importance"
       editorialising is removed from the UI. The filter stays in the DOM at
       "all values" so findings logic is untouched; it is just not shown. */
    #res-sevstats, #filter-severity { display: none !important; }
    .home-version {
      margin: 8px 0 0;
      color: var(--text-faint);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .04em;
    }
    .home-version a { color: var(--text-dim); }
    .home-version a:hover { color: var(--accent); }
    .home-provenance {
      margin: 4px auto 0;
      max-width: 52ch;
      color: var(--text-faint);
      font-size: 11px;
      line-height: 1.5;
    }
    .home-caption a {
      color: var(--text-faint);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
      text-decoration-color: color-mix(in srgb, var(--text-faint) 40%, transparent);
    }
    .home-ethic {
      max-width: 540px;
      margin: 28px auto 0;
      color: var(--text-dim);
      font-size: 13px;
      line-height: 1.55;
      text-align: center;
      padding: 14px 18px;
      border: 1px dashed var(--border);
      border-radius: var(--radius-lg);
      background: color-mix(in srgb, var(--surface) 60%, transparent);
    }
    .home-caption a:hover { color: var(--accent); text-decoration-color: var(--accent); }
    @media (max-width: 640px) {
      .home-capabilities {
        grid-template-columns: 1fr;
        padding: 0;
      }
      .home-capabilities > li {
        padding: 14px 18px;
        border-right: none;
        border-bottom: 1px solid var(--border);
      }
      .home-capabilities > li:last-child { border-bottom: none; }
    }

    /* ===== SCOPE PICKER ===== */
    .scope-page { padding: 48px 24px; max-width: 720px; margin: 0 auto; }
    .scope-domain {
      font-size: 24px; font-weight: 600; color: var(--text-bright);
      letter-spacing: -.02em; margin-bottom: 6px;
      font-family: var(--mono);
    }
    .scope-sub {
      font-size: 14px; color: var(--text-dim); margin-bottom: 24px;
      line-height: 1.55;
    }
    .scope-list {
      display: flex; flex-direction: column; gap: 6px;
      margin-bottom: 24px; max-height: 400px; overflow-y: auto;
    }
    .scope-item {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 14px; background: var(--surface2);
      border: 1px solid var(--border); border-radius: var(--radius);
      cursor: pointer; transition: border-color .15s;
    }
    .scope-item:hover { border-color: var(--border-hover); }
    .scope-item.checked { border-color: var(--accent); background: var(--accent-glow); }
    .scope-item input[type="checkbox"] {
      accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer;
    }
    .scope-item-name {
      font-family: var(--mono); font-size: 13px; color: var(--text-bright); flex: 1;
    }
    .scope-item-count {
      font-size: 12px; color: var(--text-dim); font-family: var(--mono);
    }
    .scope-item-range {
      font-size: 11px; color: var(--text-dim);
    }
    .scope-actions {
      display: flex; gap: 10px; align-items: center;
      flex-wrap: wrap;
    }
    .scope-depth-row {
      display: flex; align-items: center; gap: 8px;
      width: 100%;
      flex-wrap: wrap;
    }
    .scope-depth-label {
      font-size: 11px; color: var(--text-dim); font-family: var(--mono);
      text-transform: uppercase; letter-spacing: .06em;
    }
    .scope-actions .btn-primary {
      height: 36px; padding: 0 22px;
      background: var(--accent); color: #fff;
      border: 1px solid var(--accent-dim); border-radius: 8px;
      font-family: var(--font); font-size: 13px; font-weight: 600;
      letter-spacing: .01em;
      cursor: pointer;
      transition: background .15s var(--ease-out), transform .12s var(--ease-out), box-shadow .15s var(--ease-out);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.25);
    }
    .scope-actions .btn-primary:hover {
      background: var(--accent-dim);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 8px rgba(199, 84, 31, .35);
      transform: translateY(-1px);
    }
    .scope-actions .btn-primary:active {
      transform: translateY(0);
    }
    .scope-actions .btn-primary:disabled {
      opacity: .4; cursor: not-allowed;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
      transform: none;
    }
    .scope-select-all {
      font-size: 12px; color: var(--accent); cursor: pointer;
      background: none; border: none; font-family: var(--font);
    }
    .scope-select-all:hover { text-decoration: underline; }
    /* Animated spinner so the user has motion feedback while the preflight
       runs. Static text alone reads as "the page is frozen". */
    .scope-loading {
      text-align: center; padding: 56px 24px 24px; color: var(--text-dim);
      font-family: var(--mono); font-size: 13px;
      display: flex; flex-direction: column; align-items: center; gap: 16px;
    }
    .scope-loading::before {
      content: ''; display: block;
      width: 34px; height: 34px;
      border-radius: 50%;
      /* Plain bordered ring (NOT a conic-gradient + mask): a mask forces the
         element to re-rasterize on the main thread, so it stutters whenever the
         scan's JS is busy. A bordered ring rotates as a pure compositor
         transform and stays smooth under any main-thread load. */
      border: 3px solid var(--border);
      border-top-color: var(--accent);
      animation: wt-spin .8s linear infinite;
      will-change: transform;
    }
    @keyframes wt-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) {
      .scope-loading::before { animation-duration: 4s; }
    }
    .scope-empty {
      display: flex; flex-direction: column; align-items: center; text-align: center;
      padding: 56px 24px 40px;
    }
    .scope-empty-btn { margin-top: 22px; }
    .scope-total {
      font-size: 12px; color: var(--text-dim); margin-left: auto;
      font-family: var(--mono);
    }

    /* ===== BUTTONS ===== */
    .btn {
      height: 32px; padding: 0 12px;
      border: 1px solid var(--border); border-radius: 8px;
      background: var(--surface); color: var(--text);
      font-family: var(--font); font-size: 13px; font-weight: 500;
      cursor: pointer;
      transition: border-color .15s var(--ease-out), background .15s var(--ease-out), color .15s var(--ease-out), box-shadow .15s var(--ease-out);
      display: inline-flex; align-items: center; gap: 6px;
      box-shadow: var(--shadow-sm);
    }
    .btn:hover {
      border-color: var(--border-hover); color: var(--text-bright);
      background: var(--surface2);
      transform: translateY(-1px);
    }
    .btn:active {
      transform: translateY(0);
      box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
    }
    .btn-accent, .btn-primary {
      background: var(--accent); color: var(--accent-text);
      border-color: var(--accent-dim);
      font-weight: 600;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.16), var(--shadow-sm);
    }
    .btn-accent:hover, .btn-primary:hover {
      background: var(--accent-dim); border-color: var(--accent-dim); color: var(--accent-text);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 8px rgba(199, 84, 31, .3);
      transform: translateY(-1px);
    }
    .btn-accent:active, .btn-primary:active {
      box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
      transform: translateY(0);
    }

    /* ===== LOADING SKELETON ===== */
    .skel {
      display: inline-block; border-radius: var(--radius);
      background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 37%, var(--surface) 63%);
      background-size: 400% 100%;
      animation: skel-shimmer 1.4s ease infinite;
    }
    @keyframes skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
    .skel-title { width: 220px; height: 30px; }
    .skel-line { width: 150px; height: 14px; margin-top: 10px; }
    .skel-wrap { margin-top: 22px; }
    .skel-row { display: block; width: 100%; height: 46px; margin-bottom: 18px; }
    .skel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .skel-tile { height: 74px; }
    @media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

    /* ===== RESULTS ===== */
    .results-page { padding: 32px 24px 48px; max-width: 1120px; margin: 0 auto; }
    .results-header {
      display: flex; justify-content: space-between; align-items: flex-start;
      margin-bottom: 24px; gap: 16px;
    }
    .results-domain {
      font-size: clamp(24px, 3vw, 32px);
      font-weight: 600; color: var(--text-bright);
      letter-spacing: -.02em;
      font-family: var(--mono);
      font-variant-numeric: tabular-nums;
      line-height: 1.15;
      display: flex; align-items: center; gap: 11px;
    }
    /* the site's own archived favicon, shown next to the scan name */
    .res-fav {
      width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
      object-fit: contain; background: var(--surface2);
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
    }
    .results-meta {
      font-size: 12px; color: var(--text-dim); font-family: var(--mono);
      font-variant-numeric: tabular-nums;
      margin-top: 8px;
    }
    /* Prominent scan summary (replaces the small one-liner). */
    .results-meta .rm-line {
      display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px;
      font-family: var(--font); font-size: 14px; color: var(--text-dim);
    }
    .results-meta .rm-stat { white-space: nowrap; }
    .results-meta .rm-num {
      font-family: var(--mono); font-size: 22px; font-weight: 700;
      color: var(--text-bright); letter-spacing: -.01em; margin-right: 4px;
    }
    .results-meta .rm-range {
      font-family: var(--mono); font-size: 12px; color: var(--text-faint);
      margin-left: auto; align-self: center;
    }
    .results-meta .rm-explain {
      font-family: var(--font); font-size: 13px; color: var(--text-faint);
      line-height: 1.55; margin-top: 8px; max-width: 760px;
    }
    .results-meta .rm-explain b { color: var(--text-dim); font-weight: 600; }
    .results-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; align-items: center; }
    /* Expires badge under the v2 action row. Pill-shaped so it reads as a
       status indicator, not a button. Subtle border + dim color keeps it
       informational without competing with the publish/copy CTAs. */
    .v2-expires-badge {
      display: inline-flex; align-items: center;
      padding: 4px 10px; margin-left: 4px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 11px; color: var(--text-dim);
      font-family: var(--mono);
      white-space: nowrap;
      letter-spacing: .02em;
    }
    @media (max-width: 640px) {
      .results-header { flex-direction: column; align-items: stretch; gap: 12px; }
      /* Stack the action buttons vertically on phones. Side-by-side they wrap
         to 2-3 lines each ("Download HTML", "Copy link", "Remove from feed")
         and look like a broken layout. Full-width buttons read cleaner and
         have proper tap targets. */
      .results-actions {
        display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
        width: 100%;
      }
      .results-actions .btn {
        justify-content: center; min-width: 0;
        height: 40px; padding: 0 12px; font-size: 13px;
        white-space: nowrap;
      }
      /* The accent button (Download HTML) gets full width as the primary CTA. */
      .results-actions .btn.btn-accent { grid-column: 1 / -1; }
      /* The expires-in badge falls under the buttons on its own line. */
      .results-actions > span { grid-column: 1 / -1; text-align: center; padding-left: 0 !important; }
    }

    .results-section-label {
      margin-top: 24px;
      margin-bottom: 10px;
      color: var(--text-dim);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .results-section-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }
    .results-section-label + #res-highlights:empty,
    .results-section-label + #res-catgrid:empty {
      display: none;
    }
    .results-section-label:has(+ #res-highlights:empty),
    .results-section-label:has(+ #res-catgrid:empty) {
      display: none;
    }

    .results-domain-row {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .results-domain-tag {
      height: 20px;
      display: inline-flex;
      align-items: center;
      padding: 0 8px;
      border-radius: 999px;
      background: var(--pivot-soft);
      color: var(--pivot);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      font-variant-numeric: tabular-nums;
      text-transform: uppercase;
    }



    /* Auto-depth pill replacing the old depth selector. The pill itself is
       a static "auto" badge. the surrounding row says what it means. */
    .scope-auto-pill {
      display: inline-block; padding: 2px 8px; margin: 0 6px;
      border-radius: 4px; font-size: 11px; font-weight: 600;
      letter-spacing: .04em; text-transform: uppercase;
      background: var(--accent-soft, var(--surface));
      color: var(--accent);
      border: 1px solid var(--border);
    }
    .scope-auto-hint {
      color: var(--text-dim); font-size: 12px; margin-right: 12px;
    }
    /* ===== Advanced pre-scan menu (cards) ===== */
    .scope-adv { display: flex; flex-direction: column; gap: 14px; }
    .scope-card {
      padding: 16px 18px; background: var(--surface);
      border: 1px solid var(--border); border-radius: var(--radius-lg);
    }
    .scope-card-head {
      display: flex; align-items: baseline; gap: 10px;
      justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap;
    }
    .scope-card-title {
      font-size: 12px; font-weight: 600; text-transform: uppercase;
      letter-spacing: .07em; color: var(--text-bright);
    }
    .scope-card-meta { font-size: 11px; font-weight: 400; color: var(--text-faint); text-transform: none; letter-spacing: 0; margin-left: 6px; }
    .scope-card-tools { display: flex; gap: 8px; align-items: center; }
    .scope-filter {
      background: var(--bg); border: 1px solid var(--border); border-radius: 7px;
      padding: 6px 10px; font: inherit; font-size: 13px; color: var(--text-bright);
      min-width: 0;
    }
    .scope-filter:focus { outline: none; border-color: var(--accent); }
    .scope-mini-btn {
      background: var(--bg); border: 1px solid var(--border); color: var(--text-dim);
      font: inherit; font-size: 12px; padding: 6px 11px; border-radius: 7px; cursor: pointer; white-space: nowrap;
    }
    .scope-mini-btn:hover { border-color: var(--accent); color: var(--accent); }
    .scope-list { margin-bottom: 0; }
    .scope-item-indent { display: inline-block; }
    /* Exclusion keyword chips */
    .scope-excl-row { display: flex; gap: 8px; }
    .scope-excl-row .scope-filter { flex: 1; }
    .scope-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
    .scope-chip {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--accent-glow, rgba(199,84,31,.12)); color: var(--text-bright);
      border: 1px solid var(--accent-dim); border-radius: 999px;
      padding: 3px 6px 3px 11px; font-size: 12px; font-family: var(--mono);
    }
    .scope-chip button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
    .scope-chip button:hover { color: var(--red, var(--accent)); }
    .scope-excl-presets { margin-top: 10px; font-size: 12px; color: var(--text-faint); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .scope-excl-presets button {
      background: none; border: 1px dashed var(--border); color: var(--text-dim);
      font: inherit; font-size: 12px; padding: 2px 8px; border-radius: 999px; cursor: pointer; font-family: var(--mono);
    }
    .scope-excl-presets button:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }
    /* Output checkbox */
    .scope-check { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
    .scope-check input { accent-color: var(--accent); width: 16px; height: 16px; margin-top: 2px; cursor: pointer; }
    .scope-check-txt b { display: block; font-size: 14px; color: var(--text-bright); font-weight: 600; }
    .scope-check-txt small { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; line-height: 1.45; }
    .scope-density-hint { font-size: 11px; color: var(--text-faint); }
    /* Cap note + launch */
    .scope-cap-note {
      font-size: 13px; color: var(--text-dim); line-height: 1.5;
      padding: 11px 13px; border: 1px solid var(--border); border-radius: 9px;
      background: var(--surface);
    }
    .scope-cap-note.is-capped { border-color: var(--accent-dim); background: var(--accent-glow, rgba(199,84,31,.08)); color: var(--text-bright); }
    .scope-cap-note a { color: var(--accent); }

    /* Guided intro at the top of the scope step. Plain text (no card chrome)
       so it reads as page copy and the bordered scope-cards below stand out. */
    .scope-intro {
      font-size: 13px; line-height: 1.6; color: var(--text-dim);
      max-width: 72ch; padding: 0 2px; margin: 4px 0 18px;
    }
    .scope-intro b { color: var(--text); }
    .scope-step-badge {
      display: inline-block; min-width: 18px; height: 18px; line-height: 18px;
      text-align: center; border-radius: 5px; background: var(--accent-dim); color: #fff;
      font: 600 11px/18px var(--mono); margin-right: 8px; padding: 0 4px;
    }

    /* Pages / paths selection card */
    .scope-paths { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
    .scope-path {
      display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px;
      padding: 6px 8px; border-radius: 7px; cursor: pointer;
    }
    .scope-path:hover { background: var(--surface2); }
    .scope-path.excluded { opacity: .42; }
    .scope-path-name { font-family: var(--mono); font-size: 12px; color: var(--text);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .scope-path.excluded .scope-path-name { text-decoration: line-through; }
    .scope-path-share { display: flex; align-items: center; gap: 8px; min-width: 168px; }
    .scope-path-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
    .scope-path-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--ok); }
    .scope-path-bar.lvl-amber > i { background: var(--warn); }
    .scope-path-bar.lvl-red > i { background: var(--accent); }
    .scope-path-pct { font: 11px/1 var(--mono); color: var(--text-faint); min-width: 34px; text-align: right; }

    /* Coverage colour code on the estimate (too little / good / capped) */
    .scope-est-n.lvl-thin { color: var(--warn); }
    .scope-est-n.lvl-good { color: var(--ok); }
    .scope-est-n.lvl-capped { color: var(--accent); }
    .scope-est-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: baseline; }
    .scope-est-dot.lvl-thin { background: var(--warn); }
    .scope-est-dot.lvl-good { background: var(--ok); }
    .scope-est-dot.lvl-capped { background: var(--accent); }

    /* Precise month calendar in the scope step (reuses .mrp-* styling) */
    .scal-wrap { position: relative; }
    .scal-trigger {
      font-size: 11px; color: var(--text-dim); background: var(--bg);
      border: 1px solid var(--border); border-radius: 7px; padding: 4px 10px; cursor: pointer;
    }
    .scal-trigger:hover { color: var(--text-bright); border-color: var(--accent); }
    .scal-pop { right: 0; left: auto; width: 320px; }
    .scal-legend { font-size: 11px; color: var(--text-faint); margin-top: 8px; display: flex; align-items: center; gap: 6px; }
    .scal-legend i { display: inline-block; width: 22px; height: 5px; border-radius: 2px;
      background: linear-gradient(90deg, var(--accent-glow), var(--accent)); }
    .mrp-m .scal-bar { display: block; height: 3px; border-radius: 2px; margin-top: 4px; background: var(--accent); }
    .mrp-m.disabled .scal-bar { background: var(--border); opacity: .5; }
    /* Day-by-day grid */
    .scal-pop { width: 300px; }
    .scal-wdrow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin: 6px 0 3px; }
    .scal-wd { font-size: 10px; color: var(--text-faint); text-align: center; font-family: var(--mono); }
    .scal-daygrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
    .scal-day {
      position: relative; aspect-ratio: 1; min-height: 30px; font-size: 11px; color: var(--text-dim);
      background: var(--bg); border: 1px solid transparent; border-radius: 6px; cursor: pointer;
      display: flex; align-items: flex-start; justify-content: center; padding-top: 3px;
    }
    .scal-day:hover { color: var(--text-bright); border-color: var(--border-hover); }
    .scal-day.scal-blank { background: none; cursor: default; }
    .scal-day.scal-out { opacity: .3; cursor: default; }
    .scal-day.scal-out:hover { border-color: transparent; color: var(--text-dim); }
    .scal-day.scal-has { color: var(--text); }
    .scal-day.scal-inrange { background: var(--accent-glow); color: var(--text); }
    .scal-day.scal-end { background: var(--accent); color: #fff; border-color: var(--accent); }
    .scal-dot { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
      width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
    .scal-day.scal-end .scal-dot { background: #fff; }
    .scope-launch { align-self: flex-start; height: 40px; padding: 0 26px;
      background: var(--accent); color: #fff; border: 1px solid var(--accent-dim);
      border-radius: 9px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
    }
    .scope-launch:hover { background: var(--accent-dim); }
    .scope-launch:disabled { opacity: .5; cursor: default; }

    /* Interactive preflight timeline: snapshot histogram + density + estimate */
    .scope-timeline {
      margin: 16px 0 4px; padding: 16px 18px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius-lg);
    }
    .scope-tl-head {
      display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px;
    }
    .scope-tl-title {
      font-size: 12px; font-weight: 600; text-transform: uppercase;
      letter-spacing: .07em; color: var(--text-bright);
    }
    .scope-tl-hint { font-size: 11px; color: var(--text-faint); }
    .scope-tl-bars {
      display: flex; align-items: flex-end; gap: 3px;
      height: 92px; padding-bottom: 18px;
    }
    .scope-bar {
      position: relative; flex: 1 1 0; min-width: 0; height: 100%;
      background: none; border: none; padding: 0; cursor: pointer;
      display: flex; flex-direction: column; justify-content: flex-end;
    }
    .scope-bar-fill {
      display: block; width: 100%; height: var(--h, 2%);
      background: var(--surface3); border-radius: 3px 3px 0 0;
      transition: height .2s var(--ease-out), background .12s var(--ease-out);
    }
    .scope-bar:hover .scope-bar-fill { background: var(--border-hover); }
    .scope-bar.in-range .scope-bar-fill { background: var(--accent); }
    .scope-bar-yr {
      position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);
      font-size: 9px; color: var(--text-faint); font-family: var(--mono);
    }
    .scope-bar.in-range .scope-bar-yr { color: var(--text-dim); }
    .scope-tl-controls {
      display: flex; align-items: center; gap: 10px; margin-top: 6px;
    }
    .scope-tl-density-label {
      font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
      color: var(--text-dim);
    }
    .scope-tl-controls input[type="range"] { accent-color: var(--accent); width: 140px; }
    .scope-tl-density-val {
      font-size: 12px; font-weight: 600; color: var(--accent);
      min-width: 56px;
    }
    .scope-tl-reset {
      margin-left: auto; background: none; border: 1px solid var(--border);
      color: var(--text-dim); font-size: 11px; padding: 4px 10px;
      border-radius: 6px; cursor: pointer;
    }
    .scope-tl-reset:hover { border-color: var(--border-hover); color: var(--text); }
    .scope-estimate {
      margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
      font-size: 13px; color: var(--text-dim);
    }
    .scope-estimate strong {
      color: var(--text-bright); font-family: var(--mono);
      font-variant-numeric: tabular-nums;
    }
    .scope-est-line { display: block; font-size: 16px; color: var(--text-bright); }
    .scope-est-n { font-size: 18px; }
    .scope-est-t { font-size: 18px; color: var(--accent); }
    .scope-est-sep { color: var(--text-faint); margin: 0 4px; }
    .scope-est-sub { display: block; font-size: 12px; color: var(--text-faint); margin-top: 4px; }
    /* Density slider: visible accent fill so the level reads as a moving bar. */
    .scope-tl-controls input[type="range"] {
      height: 6px; border-radius: 3px; -webkit-appearance: none; appearance: none;
      background: linear-gradient(var(--accent), var(--accent)) no-repeat var(--surface3, #333);
      background-size: var(--fill, 50%) 100%;
    }
    .scope-tl-controls input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
      background: var(--accent); cursor: pointer; border: 2px solid var(--bg);
    }
    .scope-tl-controls input[type="range"]::-moz-range-thumb {
      width: 14px; height: 14px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 2px solid var(--bg);
    }

    /* Truncation banner on the results page. Surfaces the gap between
       sampled and total snapshots when the auto-depth pick had to stop
       short, with a "rescan thorough" CTA. */
    .results-truncation-banner {
      display: flex; gap: 10px; align-items: center;
      padding: 10px 14px; margin: 12px 0;
      border: 1px solid var(--orange, #C7541F);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text-bright);
      font-size: 13px;
    }
    .results-truncation-banner .rt-msg { flex: 1; line-height: 1.4; }
    .results-truncation-banner .rt-pct {
      font-family: var(--mono); font-variant-numeric: tabular-nums;
      font-weight: 600; color: var(--orange, #C7541F);
    }
    .results-truncation-banner button {
      padding: 6px 12px; border-radius: 4px;
      background: var(--orange, #C7541F); color: white;
      border: 0; cursor: pointer; font-size: 12px;
      font-weight: 600;
    }
    .results-truncation-banner button:hover { filter: brightness(1.1); }

    /* ===== Results tabbed block (Activity / Pivots) ===== */
    /* Full-text page search on the results view. */
    .page-search { margin: 4px 0 14px; }
    .page-search-bar { display: flex; gap: 8px; }
    .page-search-input {
      flex: 1; min-width: 0;
      padding: 9px 12px;
      background: var(--surface); color: var(--text-bright);
      border: 1px solid var(--border); border-radius: var(--radius-lg);
      font-family: var(--mono); font-size: 13px;
    }
    .page-search-input::placeholder { color: var(--text-faint); }
    .page-search-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
    .page-search-results { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
    .page-search-results .ps-note { color: var(--text-dim); font-size: 12px; padding: 6px 2px; }
    .page-search-results .ps-count { color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 2px; }
    .ps-hit {
      display: block; text-decoration: none;
      padding: 10px 12px;
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
      transition: border-color .12s var(--ease-out), background .12s var(--ease-out);
    }
    .ps-hit:hover { border-color: var(--border-hover); background: var(--surface2, var(--surface)); }
    .ps-hit-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
    .ps-hit-url { font-family: var(--mono); font-size: 12px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ps-hit-date { font-family: var(--mono); font-size: 11px; color: var(--text-faint); flex-shrink: 0; }
    .ps-hit-snippet { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
    .ps-hit-snippet mark { background: var(--accent-glow); color: var(--text-bright); padding: 0 2px; border-radius: 2px; }

    /* ===== Pivots relationship graph (scoped under .pivots) ===== */
    .pivots { width: 100%; font-family: var(--font); }
    .pivots svg { display: block; width: 100%; height: auto; }
    .pivots-empty {
      padding: 28px 16px; text-align: center; color: var(--text-faint);
      font-size: 13px; letter-spacing: .02em;
    }
    .pivots .edge {
      stroke: var(--border); stroke-width: 1; opacity: .7;
      transition: stroke .12s ease, stroke-width .12s ease, opacity .12s ease;
    }
    .pivots .edge.hot { stroke: var(--accent); stroke-width: 1.8; opacity: 1; }
    .pivots .node circle {
      stroke: rgba(0,0,0,.35); stroke-width: 1;
      transition: filter .12s ease, stroke .12s ease;
    }
    .pivots .node.hub circle { stroke: rgba(0,0,0,.45); stroke-width: 1.5; }
    .pivots .node.center circle { stroke: var(--accent); stroke-width: 2; }
    .pivots .node.hot circle {
      stroke: var(--accent); stroke-width: 2;
      filter: drop-shadow(0 0 6px var(--accent-glow2, rgba(232,122,72,.4)));
    }
    .pivots.dim .nodes .node:not(.hot) circle { opacity: .45; }
    .pivots.dim .nodes .node:not(.hot) .lbl { opacity: .3; }
    .pivots.dim .edges .edge:not(.hot) { opacity: .22; }
    .pivots .lbl {
      fill: var(--text-dim); font-family: var(--mono); font-size: 10px;
      pointer-events: none; user-select: none;
    }
    .pivots .lbl-hub { fill: var(--text-dim); font-family: var(--font); font-size: 11px; font-weight: 600; }
    .pivots .lbl-center { fill: var(--accent); font-family: var(--mono); font-size: 13px; font-weight: 700; }
    .pivots .node.hot .lbl { fill: var(--text-bright); }
    .pivots .node.hub, .pivots .node.leaf { cursor: pointer; }

    /* Pending-analysis state on the results view. Surfaces the gap between
       collection-done and analyze-done so the user never sees a blank page. */
    .results-pending {
      grid-column: 1 / -1;
      padding: 20px 16px;
      border: 1px dashed var(--border);
      border-radius: 8px;
      color: var(--text-dim);
      font-size: 13px;
      text-align: center;
      background: var(--surface);
    }
    .results-pending::before {
      content: '\2026';
      display: inline-block; margin-right: 8px;
      animation: results-pending-pulse 1.4s ease-in-out infinite;
    }
    .results-pending--err {
      border-color: var(--red);
      color: var(--red);
    }
    .results-pending--err::before { content: '!'; animation: none; }
    @keyframes results-pending-pulse {
      0%,100% { opacity: .35 } 50% { opacity: 1 }
    }

    .filter-select, .filter-input {
      height: 30px; padding: 0 10px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); color: var(--text);
      font-family: var(--mono); font-size: 12px; outline: none;
      transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
    }
    .filter-select:hover, .filter-input:hover { border-color: var(--border-hover); }
    .filter-select:focus, .filter-input:focus {
      border-color: var(--border-hover);
      background: var(--surface2);
    }
    .filter-input { flex: 1; min-width: 160px; max-width: 280px; }
    .filter-input::placeholder { color: var(--text-dim); }
    .filters-right {
      margin-left: auto; display: flex; gap: 6px;
    }
    .btn-sm {
      height: 28px; padding: 0 10px; font-size: 11px;
      border: 1px solid var(--border); border-radius: var(--radius);
      background: transparent; color: var(--text-dim);
      font-family: var(--mono); cursor: pointer; transition: all .15s;
    }
    .btn-sm:hover { border-color: var(--border-hover); color: var(--text); }

    /* Source link */
    .src-link {
      color: var(--accent); text-decoration: none; font-size: 11px;
      cursor: pointer; transition: opacity .15s;
    }
    .src-link:hover { opacity: .7; }
    .src-link.cc { color: var(--purple); }

    /* Badges. 18h pills, mono, soft background + saturated text. */
    .badge {
      display: inline-flex; align-items: center;
      height: 18px; padding: 0 8px;
      border-radius: 999px;
      font-family: var(--mono);
      font-size: 10px; font-weight: 500;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .badge-done { background: var(--green-dim); color: var(--green); }
    .badge-running { background: var(--yellow-dim); color: var(--yellow); }
    .badge-failed { background: var(--red-dim); color: var(--red); }
    .badge-paused { background: var(--purple-dim); color: var(--purple); }

    /* ===== HISTORY ===== */
    .history-page { padding: 32px 24px 48px; max-width: 1120px; margin: 0 auto; }
    .history-header {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 24px;
    }
    .history-title {
      font-size: 28px; font-weight: 600; color: var(--text-bright);
      letter-spacing: -.02em;
    }

    /* ===== ERROR ===== */
    .error-msg {
      background: var(--red-dim); border: 1px solid rgba(182,59,40,.35);
      border-radius: var(--radius); padding: 10px 14px;
      color: var(--red); font-size: 13px; margin-bottom: 16px;
      display: none;
    }
    .error-msg.visible { display: block; }

    /* ===== EMPTY STATE ===== */
    .empty {
      text-align: center; padding: 60px 20px; color: var(--text-dim);
      font-size: 13px;
    }

    /* ===== TABLE COUNT ===== */
    .table-footer {
      display: flex; justify-content: space-between; align-items: center;
      padding: 10px 0; font-size: 11px; color: var(--text-dim);
      font-family: var(--mono);
    }

    /* ===== TOAST ===== */
    .toast {
      position: fixed; bottom: 24px; left: 50%;
      transform: translate(-50%, 8px);
      height: 32px; padding: 0 16px;
      display: inline-flex; align-items: center;
      background: var(--text); border: 1px solid var(--text);
      border-radius: 999px; color: #F5F1E8;
      font-size: 12px; font-family: var(--mono);
      letter-spacing: .01em;
      box-shadow: var(--shadow-lg);
      opacity: 0;
      transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
      pointer-events: none; z-index: 400;
    }
    .toast.show { opacity: 1; transform: translate(-50%, 0); }

    .tl-btn {
      height: 30px; padding: 0 12px;
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: var(--radius);
      color: var(--text); font-family: var(--font); font-size: 12px;
      cursor: pointer; transition: border-color .15s, color .15s, background .15s;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .tl-btn:hover { border-color: var(--border-hover); color: var(--text-bright); }
    .tl-btn[aria-pressed="true"] {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-glow);
    }
    .tl-close-btn { width: 30px; padding: 0; font-size: 14px; justify-content: center; }
    /* The drawer close button is auto-focused on open by the focus trap, so
       the global :focus-visible orange halo lights up immediately and reads
       as "this button is broken". Use a subtle accent-tinted background +
       border instead, still meets WCAG 2.4.7 (focus visible) without the
       distracting halo. */
    .tl-close-btn:focus-visible {
      outline: none;
      /* The global button:focus-visible rule layers a 4px accent box-shadow
         ring; explicitly clear it here so the auto-focused drawer X doesn't
         scream. */
      box-shadow: none;
      border-color: var(--accent);
      background: var(--accent-glow);
    }


    /* ===== KEYBOARD SHORTCUTS HELP ===== */
    .kb-overlay {
      position: fixed; inset: 0;
      background: rgba(27,26,23,.35);
      display: none;
      align-items: center; justify-content: center;
      z-index: 500;
    }
    .kb-overlay.visible { display: flex; }
    .kb-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 24px 28px;
      max-width: 520px;
      box-shadow: var(--shadow-lg);
    }
    .kb-title {
      font-size: 14px; font-weight: 600;
      color: var(--text-bright);
      margin: 0 0 16px 0;
      text-transform: uppercase; letter-spacing: .06em;
    }
    .kb-list {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 8px 18px;
      font-size: 12px;
    }
    .kb-key {
      font-family: var(--mono); font-size: 11px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-bottom-width: 2px;
      border-radius: var(--radius);
      padding: 3px 8px;
      color: var(--accent);
      text-align: center;
      min-width: 32px;
      white-space: nowrap;
    }
    .kb-desc {
      color: var(--text);
      align-self: center;
    }
    .kb-footer {
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
      font-size: 11px; color: var(--text-dim);
      text-align: center;
    }

    /* ===== FAVICON GALLERY ===== */
    .favicon-gallery {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 14px 16px;
      margin-bottom: 20px;
    }
    .favicon-gallery-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 12px;
    }
    .favicon-gallery-title {
      font-size: 12px; font-weight: 600;
      color: var(--text-bright);
      text-transform: uppercase; letter-spacing: .06em;
    }
    .favicon-gallery-meta {
      font-size: 11px; color: var(--text-dim); font-family: var(--mono);
    }
    .favicon-grid {
      display: flex; flex-wrap: wrap; gap: 10px;
    }
    .favicon-item {
      position: relative;
      width: 48px; height: 48px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: border-color .15s, transform .15s;
      overflow: hidden;
    }
    .favicon-item:hover {
      border-color: var(--accent);
      transform: translateY(-2px);
    }
    .favicon-item img {
      max-width: 32px; max-height: 32px;
      object-fit: contain;
    }
    .favicon-item .favicon-fallback {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      color: var(--text-faint);
      font-size: 8px;
      font-family: var(--mono);
      letter-spacing: .04em;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.1;
      padding: 0 4px;
      cursor: help;
      opacity: .55;
    }
    /* Broken/not-archived favicons used to take the same visual weight as
       real ones, so a row with 9 missing thumbnails read as 'this section is
       broken'. Halve the surface contrast + dim the icon so the eye reads
       the archived ones as the signal and the placeholders as the noise. */
    .favicon-item:has(.favicon-fallback) {
      background: transparent;
      border-style: dashed;
      border-color: var(--surface3);
    }
    .favicon-item:has(.favicon-fallback):hover {
      border-color: var(--border-hover);
      transform: none;
    }
    .favicon-item .favicon-fallback svg {
      width: 16px;
      height: 16px;
      opacity: .55;
    }
    .favicon-item .favicon-fallback em {
      font-style: normal;
      font-size: 8px;
      opacity: .7;
    }
    /* Hash-bearing fallback reads as signal (a real pivot), not dead noise:
       keep it a touch more present than the plain "not archived" marker. */
    .favicon-item:has(.favicon-fallback--hash) {
      border-style: solid;
      border-color: var(--border);
    }
    .favicon-item .favicon-fallback--hash { opacity: .85; color: var(--text-dim); }
    .favicon-item .favicon-fallback-hash { user-select: all; font-size: 8px; opacity: .85; }
    .favicon-item.broken {
      color: var(--text-dim);
      font-size: 10px;
      font-family: var(--mono);
    }
    .favicon-item-label {
      position: absolute;
      bottom: -2px; left: 0; right: 0;
      background: var(--bg);
      color: var(--text-dim);
      font-size: 8px; font-family: var(--mono);
      text-align: center;
      padding: 1px 0;
      opacity: 0;
      transition: opacity .15s;
    }
    .favicon-item:hover .favicon-item-label { opacity: 1; }
    /* MD5 / SHA-256 revealed on hover, below the tile, copyable for pivoting. */
    .favicon-item-hash {
      position: absolute;
      top: 100%; left: 50%; transform: translateX(-50%);
      margin-top: 3px; z-index: 6;
      display: none; flex-direction: column; gap: 2px;
      background: var(--surface2, var(--surface));
      border: 1px solid var(--border); border-radius: var(--radius);
      padding: 4px 6px;
      font-family: var(--mono); font-size: 9px; color: var(--text-dim);
      white-space: nowrap;
    }
    .favicon-item:hover { overflow: visible; z-index: 6; }
    .favicon-item:hover .favicon-item-hash { display: flex; }
    .favicon-item-hash .fh { user-select: all; cursor: text; }
    .favicon-item-hash .fh:hover { color: var(--accent); }

    /* ===== EXPORT DRAWER ===== */
    .exp-drawer {
      position: fixed; top: 0; right: 0; bottom: 0;
      width: min(480px, 92vw);
      background: var(--surface);
      border-left: 1px solid var(--border);
      border-top-left-radius: var(--radius-xl);
      /* Shadow only while open: parked off-screen, the 48px blur would bleed
         back into the viewport as a permanent band along the right edge. */
      transform: translateX(100%);
      transition: transform .25s var(--ease-out);
      z-index: 210;
      display: flex; flex-direction: column;
    }
    .exp-drawer.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .exp-header {
      background: var(--surface);
      border-top-left-radius: var(--radius-xl);
      min-height: 56px;
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 20px; border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .exp-title {
      font-size: 16px; font-weight: 600; color: var(--text-bright);
      margin: 0;
    }
    .exp-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
    .exp-section { margin-bottom: 20px; }
    .exp-section-label {
      font-size: 10px; font-weight: 600;
      text-transform: uppercase; letter-spacing: .06em;
      color: var(--text-dim);
      margin-bottom: 8px;
    }
    .exp-format-group {
      display: flex; gap: 6px;
    }
    .exp-format-opt {
      flex: 1;
      height: 32px;
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: var(--radius);
      color: var(--text); font-family: var(--font); font-size: 12px;
      cursor: pointer; transition: all .15s;
    }
    .exp-format-opt:hover { border-color: var(--border-hover); color: var(--text-bright); }
    .exp-format-opt.active {
      border-color: var(--accent); color: var(--accent); background: var(--accent-glow);
    }
    .exp-cat-list {
      display: flex; flex-direction: column; gap: 2px;
      max-height: 280px; overflow-y: auto;
      padding: 6px; background: var(--surface2);
      border-radius: var(--radius); border: 1px solid var(--border);
    }
    .exp-cat-item {
      display: flex; align-items: center; gap: 8px;
      padding: 5px 8px;
      cursor: pointer;
      border-radius: var(--radius);
      font-size: 12px; color: var(--text);
      transition: background .1s;
    }
    .exp-cat-item:hover { background: var(--surface); }
    .exp-cat-item input { cursor: pointer; accent-color: var(--accent); }
    .exp-cat-item-count {
      margin-left: auto;
      color: var(--text-dim); font-family: var(--mono); font-size: 10px;
    }
    .exp-filters-hint {
      font-size: 11px; color: var(--text-dim);
      padding: 8px 10px;
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: var(--radius);
    }
    .exp-footer {
      display: flex; gap: 8px;
      padding: 14px 20px; border-top: 1px solid var(--border);
      flex-shrink: 0;
    }
    .exp-footer .btn { flex: 1; }

    /* ===== FINDING DETAIL DRAWER ===== */
    /* Backdrop dims the page content while the drawer is open. Without this
       the drawer hangs over half the page with no visual separation; users
       can't tell the table behind is non-interactive. Click-to-close mirrors
       the timeline drawer's pattern. */
    .fd-backdrop {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0);
      pointer-events: none;
      transition: background .2s var(--ease-out);
      z-index: 205;
    }
    .fd-backdrop.open {
      background: rgba(12,11,9,.42);
      pointer-events: auto;
    }
    .fd-drawer {
      position: fixed; top: 0; right: 0; bottom: 0;
      width: min(480px, 92vw);
      background: var(--surface);
      border-left: 1px solid var(--border);
      border-top-left-radius: var(--radius-xl);
      /* Shadow only while open (see .exp-drawer). */
      transform: translateX(100%);
      transition: transform .25s var(--ease-out);
      z-index: 210;
      display: flex; flex-direction: column;
    }
    .fd-drawer.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .fd-header {
      background: var(--surface);
      border-top-left-radius: var(--radius-xl);
      min-height: 56px;
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 20px; border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .fd-title {
      font-size: 16px; font-weight: 600; color: var(--text-bright);
      margin: 0;
    }
    .fd-body { flex: 1; overflow-y: auto; padding: 14px 20px; }
    .fd-hero {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 14px;
      margin-bottom: 16px;
    }
    .fd-hero-cat {
      font-size: 10px; font-weight: 600; text-transform: uppercase;
      letter-spacing: .06em; color: var(--accent);
      margin-bottom: 6px;
    }
    .fd-hero-value {
      font-family: var(--mono); font-size: 13px;
      color: var(--text-bright);
      word-break: break-all;
    }
    .fd-hero-meta {
      font-size: 11px; color: var(--text-dim);
      font-family: var(--mono);
      margin-top: 8px;
    }
    .fd-hero-sev {
      display: inline-flex; align-items: center;
      height: 18px; padding: 0 8px;
      border-radius: 999px;
      font-family: var(--mono);
      font-size: 10px; font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-left: 6px;
      vertical-align: middle;
    }
    .fd-hero-sev.LEAK,
    .fd-hero-sev.CRITICAL { background: var(--red-dim); color: var(--red); }
    .fd-hero-sev.PIVOT,
    .fd-hero-sev.HIGH { background: var(--orange-dim); color: var(--orange); }
    .fd-hero-sev.CONTEXT,
    .fd-hero-sev.MEDIUM { background: var(--pivot-soft); color: var(--pivot); }
    .fd-hero-sev.BACKGROUND,
    .fd-hero-sev.LOW { background: var(--surface3); color: var(--text); }
    .fd-section-label {
      font-size: 10px; font-weight: 600;
      text-transform: uppercase; letter-spacing: .06em;
      color: var(--text-dim);
      margin-bottom: 8px;
    }
    .fd-link-row {
      display: flex; align-items: center; gap: 6px;
      margin-bottom: 4px;
    }
    .fd-link-row a {
      color: var(--accent); text-decoration: none;
      font-size: 11px; font-family: var(--mono);
    }
    .fd-link-row a:hover { text-decoration: underline; }
    .fd-cooccur-group {
      margin-bottom: 14px;
    }
    .fd-cooccur-cat {
      font-size: 10px; font-weight: 600;
      text-transform: uppercase; letter-spacing: .06em;
      color: var(--text);
      margin-bottom: 4px;
    }
    .fd-cooccur-cat .fd-cooccur-count {
      color: var(--text-dim);
      font-family: var(--mono);
      margin-left: 4px;
    }
    .fd-cooccur-list {
      display: flex; flex-direction: column; gap: 2px;
    }
    .fd-cooccur-item {
      font-family: var(--mono); font-size: 11px;
      color: var(--text);
      padding: 4px 6px;
      background: var(--surface2);
      border-radius: var(--radius);
      word-break: break-all;
      cursor: pointer;
      transition: background .1s;
    }
    .fd-cooccur-item:hover { background: var(--surface3); color: var(--text-bright); }
    .fd-hash-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
    .fd-hash-k { font-size: 10px; letter-spacing: .04em; color: var(--text-faint); min-width: 52px; }
    .fd-hash-v { font-family: var(--mono); font-size: 11px; color: var(--text); word-break: break-all; background: var(--surface2); padding: 3px 6px; border-radius: var(--radius); user-select: all; }
    .fd-hash-pivot { font-size: 10px; color: var(--accent); text-decoration: none; white-space: nowrap; }
    .fd-hash-pivot:hover { text-decoration: underline; }
    .fd-empty-note {
      font-size: 11px; color: var(--text-dim);
      padding: 12px; text-align: center;
      background: var(--surface2);
      border-radius: var(--radius);
      border: 1px dashed var(--border);
    }

    /* ===== PER-ROW COPY ===== */
    .row-copy-btn {
      background: transparent; border: 1px solid transparent; cursor: pointer;
      color: var(--text-dim); padding: 4px 9px; margin-left: 6px;
      font-size: 14px; line-height: 1; font-family: var(--mono);
      border-radius: 6px; vertical-align: middle;
      opacity: .35; transition: opacity .12s, color .12s, background .12s, border-color .12s;
    }
    .row-copy-btn:hover, .row-copy-btn:focus-visible {
      opacity: 1; color: var(--accent);
      background: var(--accent-glow); border-color: var(--border);
    }
    .row-copy-btn.copied { color: var(--green); opacity: 1; }

    /* ===== RESPONSIVE ADDITIONS =====
       Tightens the existing 767/900/1199 media queries by adding small-
       mobile breakpoints (≤480 / ≤360), making the findings table
       horizontally scrollable inside its panel instead of overflowing
       the whole viewport, and bumping interactive sizes to ≥44px on
       coarse pointers (touch). All additive. does not override desktop. */
    @media (max-width: 767px) {
      /* Stack severity stats 2-up below the existing 4-up grid; the prior
         767 rule already does this. kept here as a safety net. */
      .navbar { padding: 0 12px; gap: 8px; height: 48px; }
      .nav-search { max-width: none; }
      .nav-actions { gap: 4px; }
      .nav-btn { padding: 0 10px; font-size: 11px; }
      .home-hero { padding: 0 16px; }
    }
    @media (max-width: 480px) {
      .nav-input { font-size: 12px; padding: 0 8px; }
      .nav-scan-btn { padding: 0 10px; font-size: 11px; }
    }
    @media (max-width: 360px) {
      /* Smallest realistic phone (e.g. iPhone SE 1st gen). Hide the
         icon-text label on nav buttons; the icon alone with aria-label
         is enough at this width. */
      .nav-btn .nav-btn-text { display: none; }
      .home-title { letter-spacing: -.02em; }
    }
    @media (hover: none) and (pointer: coarse) {
      /* Touch devices: enforce ≥44px tap targets on every clickable
         element regardless of viewport width. */
      .nav-btn, .nav-scan-btn, .sev-stat,
      .row-copy-btn, .kb-panel button {
        min-height: 44px;
      }
      /* Always show the copy button on touch. the desktop hover-to-reveal
         pattern is unreachable. */
      .row-copy-btn { opacity: 1; }
    }

/* View-transition animation. Reduced-motion already neutralised by the
       global media query at the top of the stylesheet. */
    @keyframes viewIn {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .view.active { animation: viewIn 0.28s var(--ease-out) both; }

    .nav-theme-btn { font-family: var(--mono); letter-spacing: .04em; }

    /* service status banner (archive.org health, WayTrace load, maintenance) */
    .archive-banner[hidden] { display: none; }
    .archive-banner {
      padding: 9px 16px; text-align: center; font-size: 13px; font-weight: 500;
      border-bottom: 1px solid var(--border);
    }
    .archive-banner.slow { background: rgba(216,166,87,.16); color: var(--warn); border-bottom-color: rgba(216,166,87,.4); }
    .archive-banner.paused { background: rgba(232,112,96,.18); color: var(--red, var(--accent)); border-bottom-color: var(--red, var(--accent)); }
    /* WayTrace's own load (deep queue), quieter than an archive.org problem */
    .archive-banner.busy { background: var(--accent-glow2); color: var(--accent); border-bottom-color: rgba(232,122,72,.35); }
    /* Admin maintenance flag, or the API not answering at all */
    .archive-banner.maintenance { background: rgba(232,112,96,.14); color: var(--red, var(--accent)); border-bottom-color: rgba(232,112,96,.35); }

    .notfound-page { max-width: 480px; margin: 0 auto; padding: 100px 24px; text-align: center; }
    .notfound-code { font-family: var(--mono); font-size: 64px; font-weight: 700; color: var(--accent); letter-spacing: -.02em; }
    .notfound-title { font-size: 22px; color: var(--text-bright); margin: 8px 0 6px; }
    .notfound-sub { font-size: 14px; color: var(--text-dim); margin-bottom: 22px; }
    /* Legal / licence page */
    .legal-page { max-width: 760px; margin: 0 auto; padding: 56px 24px 96px; }
    .legal-page h1 { font-size: 26px; color: var(--text-bright); letter-spacing: -.01em; margin-bottom: 6px; }
    .legal-updated { font-family: var(--mono); font-size: 11px; color: var(--text-faint); margin-bottom: 28px; }
    .legal-page h2 { font-size: 15px; color: var(--accent); margin: 30px 0 8px; letter-spacing: .01em; }
    .legal-page p, .legal-page li { font-size: 14px; line-height: 1.65; color: var(--text-dim); }
    .legal-page ul { margin: 6px 0 6px 18px; }
    .legal-page li { margin: 3px 0; }
    .legal-page strong { color: var(--text); font-weight: 600; }
    .legal-page a { color: var(--accent); }
    .legal-note { border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); padding: 14px 16px; margin: 14px 0; font-size: 13px; line-height: 1.6; color: var(--text-dim); }
    .legal-back { display: inline-block; margin-top: 32px; }

    /* >>> WAYTRACE_SERVER_ONLY */
    /* ===== Accounts: navbar control + dropdown + auth modal ===== */
    .account-wrap { position: relative; }
    /* display:flex below otherwise defeats the [hidden] attribute. */
    .auth-overlay[hidden], .account-menu[hidden] { display: none; }
    /* display:flex on these would otherwise defeat the hidden attribute. */
    #auth-form[hidden], #auth-sent[hidden] { display: none; }
    .nav-btn.signed-in { color: var(--accent); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
    .account-menu {
      position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
      min-width: 200px; background: var(--surface2, var(--surface));
      border: 1px solid var(--border); border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg); padding: 6px;
      display: flex; flex-direction: column; gap: 2px;
    }
    .account-menu-email {
      font-size: 11px; color: var(--text-faint); padding: 7px 10px;
      border-bottom: 1px solid var(--border); margin-bottom: 4px; word-break: break-all;
    }
    .account-menu-item {
      background: none; border: none; text-align: left; color: var(--text-dim);
      font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 6px; cursor: pointer;
    }
    .account-menu-item:hover { background: var(--surface3, var(--surface)); color: var(--text); }
    .auth-overlay {
      position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.55);
      backdrop-filter: blur(3px);
      display: flex; align-items: center; justify-content: center; padding: 20px;
    }
    .auth-card {
      width: 100%; max-width: 360px; background: var(--surface);
      border: 1px solid var(--border); border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg); padding: 26px 24px;
      display: flex; flex-direction: column; gap: 12px;
    }
    .auth-title { font-size: 20px; font-weight: 700; color: var(--text-bright); letter-spacing: -.01em; }
    .auth-sub { font-size: 13px; color: var(--text-dim); margin-top: -8px; line-height: 1.45; }
    .auth-error {
      font-size: 13px; color: var(--red); background: var(--red-dim, rgba(232,112,96,.1));
      border: 1px solid var(--red); border-radius: 8px; padding: 8px 10px;
    }
    .auth-input {
      background: var(--bg); border: 1px solid var(--border); border-radius: 9px;
      padding: 11px 13px; font: inherit; font-size: 14px; color: var(--text-bright);
    }
    .auth-input:focus { outline: none; border-color: var(--accent); }
    .auth-card { position: relative; }
    .auth-close {
      position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
      display: flex; align-items: center; justify-content: center;
      background: none; border: none; color: var(--text-faint); font-size: 22px; line-height: 1;
      border-radius: 8px; cursor: pointer;
    }
    .auth-close:hover { background: var(--bg); color: var(--text); }
    #auth-form { display: flex; flex-direction: column; gap: 11px; }
    .auth-label { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: -5px; }
    .auth-primary {
      background: var(--accent); color: #fff; border: 1px solid var(--accent-dim, var(--accent));
      border-radius: 9px; padding: 11px 13px; font: inherit; cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
      display: flex; flex-direction: column; gap: 1px; text-align: left;
    }
    .auth-primary:hover { filter: brightness(1.05); }
    .auth-primary:disabled { opacity: .6; cursor: default; filter: none; }
    .auth-primary-main { font-size: 14px; font-weight: 600; }
    .auth-primary-sub { font-size: 12px; font-weight: 400; opacity: .82; }
    .auth-or {
      display: flex; align-items: center; gap: 10px;
      font-size: 12px; color: var(--text-faint); text-transform: none; margin: 1px 0;
    }
    .auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
    .auth-secondary {
      background: var(--bg); color: var(--text-bright); border: 1px solid var(--border);
      border-radius: 9px; padding: 11px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    }
    .auth-secondary:hover { border-color: var(--accent); color: var(--accent); }
    .auth-secondary:disabled { opacity: .6; cursor: default; }
    .auth-foot { font-size: 12px; color: var(--text-faint); line-height: 1.5; margin-top: 2px; }
    #auth-sent { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 6px 0 2px; }
    .auth-sent-icon {
      width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
      border-radius: 50%; background: var(--accent-faint, rgba(120,200,160,.12)); color: var(--accent);
    }
    .auth-sent-icon svg { width: 24px; height: 24px; }
    .auth-sent-title { font-size: 16px; font-weight: 700; color: var(--text-bright); }
    .auth-sent-sub { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
    #auth-sent .auth-secondary { margin-top: 4px; }
    /* <<< WAYTRACE_SERVER_ONLY */

    /* My scans (account-backed history view) */
    .myscans-note { padding: 30px 20px; text-align: center; color: var(--text-dim); font-size: 14px; line-height: 1.6; }
    .myscans-note > div { margin-top: 14px; }
    .myscans-list { display: flex; flex-direction: column; gap: 6px; }
    .myscans-row {
      display: grid; grid-template-columns: 1fr 104px 84px 104px 28px; align-items: center; gap: 12px;
      padding: 12px 14px; background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius-lg); cursor: pointer;
      transition: border-color .12s var(--ease-out), background .12s var(--ease-out);
    }
    .myscans-row:hover { border-color: var(--border-hover); background: var(--surface2, var(--surface)); }
    .myscans-del {
      justify-self: end; width: 24px; height: 24px; padding: 0;
      display: flex; align-items: center; justify-content: center;
      background: transparent; border: 1px solid transparent; border-radius: var(--radius);
      color: var(--text-faint); font-size: 16px; line-height: 1; cursor: pointer;
      transition: color .12s var(--ease-out), border-color .12s var(--ease-out), background .12s var(--ease-out);
    }
    .myscans-del:hover { color: var(--red); border-color: var(--border-hover); background: var(--surface2, var(--surface)); }
    .myscans-del:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
    .myscans-domain {
      font-family: var(--mono); font-size: 14px; color: var(--text-bright);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .myscans-status { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
    .myscans-status.st-completed { color: var(--green); }
    .myscans-status.st-failed { color: var(--red); }
    .myscans-pub {
      font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
      text-align: center; padding: 3px 8px; border-radius: 6px;
    }
    .myscans-pub.on { color: var(--accent); background: var(--accent-glow); }
    .myscans-pub.off { color: var(--text-faint); }
    .myscans-date { font-family: var(--mono); font-size: 12px; color: var(--text-faint); text-align: right; }
    /* In-flight scans (queued/running): rendered above the archive, ticking */
    .myscans-live { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
    .myscans-row.live { grid-template-columns: 10px 1fr auto minmax(0, 220px) 28px; background: var(--surface2, var(--surface)); }
    .myscans-livedot { width: 8px; height: 8px; border-radius: 50%; }
    .myscans-livedot.running { background: var(--accent); animation: wt-live-pulse 1.4s ease-in-out infinite; }
    .myscans-livedot.queued { background: var(--warn); animation: wt-live-pulse 2.2s ease-in-out infinite; }
    .myscans-state { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text); white-space: nowrap; }
    .myscans-eta { font-size: 12px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
    @keyframes wt-live-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

    /* Admin: maintenance banner toggle */
    .admin-maint-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .admin-maint-state { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px; border-radius: var(--radius); }
    .admin-maint-state.on { color: var(--red); background: var(--red-dim); }
    .admin-maint-state.off { color: var(--text-faint); background: var(--surface2, var(--surface)); }
    .admin-maint-msg { font-size: 12px; color: var(--text-dim); }



    /* ===== v2 PUBLIC SCAN VIEW ===== */
    .pub-page { max-width: 1100px; margin: 0 auto; padding: 32px 24px 80px; }
    .pub-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
    .pub-domain { font-size: 30px; font-weight: 700; color: var(--text-bright); letter-spacing: -0.01em; }
    .pub-meta { font-size: 12px; color: var(--text-faint); margin-top: 6px; text-transform: uppercase; letter-spacing: .06em; }
    .pub-actions { display: flex; gap: 8px; flex-wrap: wrap; }

    .pub-section-title {
      font-size: 11px; font-weight: 600; text-transform: uppercase;
      letter-spacing: .08em; color: var(--text-faint);
      margin: 28px 0 12px;
    }

    .pub-summary {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 1px; background: var(--border); border: 1px solid var(--border);
      border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 24px;
    }
    .pub-summary-cell { background: var(--surface); padding: 14px 18px; }
    .pub-summary-cell .label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
    .pub-summary-cell .val { font-size: 18px; font-weight: 600; color: var(--text-bright); margin-top: 4px; }

    .pub-highlights { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 24px; }

    /* Category list, sticky 2-column layout: row of name+count, expand on click */
    .pub-cat {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius-lg); margin-bottom: 8px;
      overflow: hidden;
    }
    .pub-cat-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 16px; cursor: pointer;
      user-select: none;
      transition: background .15s var(--ease-out);
    }
    .pub-cat-head:hover { background: var(--surface2); }
    .pub-cat-name {
      font-size: 14px; font-weight: 600; color: var(--text-bright);
      display: flex; align-items: center; gap: 8px;
    }
    .pub-cat-chevron {
      display: inline-block; width: 10px; height: 10px;
      transition: transform .2s var(--ease-out);
      color: var(--text-faint);
    }
    .pub-cat.open .pub-cat-chevron { transform: rotate(90deg); }
    .pub-cat-count {
      font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums;
    }
    .pub-cat-body {
      display: none; padding: 4px 16px 14px; border-top: 1px solid var(--border);
    }
    .pub-cat.open .pub-cat-body { display: block; }

    .pub-item {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 12px; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,.04);
      font-size: 13px; line-height: 1.4;
    }
    .pub-item:last-child { border-bottom: none; }
    .pub-item-main {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column; gap: 3px;
    }
    .pub-item-value {
      color: var(--text); word-break: break-all;
      font-family: var(--mono); font-size: 13px;
    }
    .pub-item-sub {
      font-size: 11px; color: var(--text-faint);
      display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    }
    .pub-chip {
      display: inline-flex; align-items: center; gap: 4px;
      background: var(--surface2); border: 1px solid var(--border);
      padding: 1px 7px; border-radius: 999px;
      font-size: 11px; color: var(--text-dim);
      font-family: var(--font); letter-spacing: .02em;
    }
    .pub-chip.type { background: var(--accent-glow); border-color: var(--accent-glow2); color: var(--accent); }
    .pub-chip.leak { background: var(--red-dim); border-color: var(--red-dim); color: var(--red); }
    .pub-item-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
    .pub-item:hover .pub-item-actions { opacity: 1; }
    @media (hover: none) { .pub-item-actions { opacity: 1; } }
    .pub-copy-btn {
      background: transparent; border: 1px solid var(--border); color: var(--text-dim);
      width: 26px; height: 26px; border-radius: 6px; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 12px; padding: 0;
      transition: all .12s;
    }
    .pub-copy-btn:hover { border-color: var(--accent); color: var(--accent); }
    .pub-cat-more {
      text-align: center; padding: 10px 0 4px;
      color: var(--text-faint); font-size: 11px;
    }

    /* Queue / running */
    .pub-state-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius-xl); padding: 40px 32px; text-align: center;
    }
    .pub-state-num {
      font-size: 60px; font-weight: 700; color: var(--text-bright);
      line-height: 1; margin-bottom: 6px;
      font-variant-numeric: tabular-nums;
    }
    .pub-state-num .total { color: var(--text-faint); font-weight: 400; }
    .pub-state-label {
      font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
      color: var(--text-faint); margin-bottom: 18px;
    }
    .pub-state-eta { font-size: 14px; color: var(--text-dim); margin-bottom: 28px; }
    .pub-run-step {
      font-size: 13px; color: var(--text-dim);
      margin-bottom: 14px;
    }
    .pub-run-pct {
      font-size: 34px; font-weight: 600; color: var(--text-bright);
      font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-bottom: 10px;
    }
    .pub-run-bar {
      position: relative; max-width: 420px; margin: 0 auto;
      height: 6px; background: var(--surface3);
      border-radius: 3px; overflow: hidden;
    }
    .pub-run-bar-fill {
      height: 100%; border-radius: 3px;
      background: linear-gradient(90deg, var(--accent-dim), var(--accent));
      box-shadow: 0 0 8px -1px var(--accent-glow);
      transition: width .7s var(--ease-out);
    }
    /* Indeterminate (setup phase / queue): a slim segment sweeps across, so we
       signal work honestly without inventing a percentage. */
    .pub-run-bar.indeterminate .pub-run-bar-fill {
      position: absolute; inset: 0 auto 0 0; width: 34%;
      transition: none; animation: pub-sweep 1.25s ease-in-out infinite;
    }
    @keyframes pub-sweep {
      0%   { transform: translateX(-115%); }
      100% { transform: translateX(315%); }
    }
    @media (prefers-reduced-motion: reduce) {
      .pub-run-bar.indeterminate .pub-run-bar-fill { animation-duration: 3s; }
    }
    .pub-run-spinner {
      width: 40px; height: 40px; margin: 0 auto 16px;
      border-radius: 50%;
      /* Bordered ring, not conic-gradient + mask: a mask re-rasterizes on the
         main thread and stutters while the scan polls/renders. A bordered ring
         is a pure compositor transform - smooth regardless of main-thread work. */
      border: 3px solid var(--border);
      border-top-color: var(--accent);
      animation: wt-spin .8s linear infinite;
      will-change: transform;
    }
    @media (prefers-reduced-motion: reduce) { .pub-run-spinner { animation-duration: 4s; } }
    .pub-run-eta { font-size: 13px; color: var(--text-faint); margin-top: 10px; font-variant-numeric: tabular-nums; }
    /* 4-phase stepper on the loading page */
    .pub-phases { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 18px; }
    .pub-phase {
      display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11.5px;
      color: var(--text-faint); border: 1px solid var(--surface3); border-radius: 100px; padding: 5px 12px;
      transition: color .2s, border-color .2s;
    }
    .pub-phase .d { width: 7px; height: 7px; border-radius: 50%; background: var(--surface3); transition: background .2s; }
    .pub-phase.done { color: var(--text-dim); }
    .pub-phase.done .d { background: var(--green); }
    .pub-phase.now { color: var(--text); border-color: var(--accent); }
    .pub-phase.now .d { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
    /* live findings during extraction */
    .pub-live { margin-top: 20px; max-width: 440px; }
    .pub-live-head { font-family: var(--font); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-dim); margin-bottom: 9px; }
    .pub-live-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
    .pub-live-chip {
      font-family: var(--mono); font-size: 11.5px; color: var(--text-dim);
      border: 1px solid var(--surface3); border-radius: 100px; padding: 4px 10px;
      background: var(--bg); animation: pub-live-in .25s var(--ease-out, ease-out);
    }
    .pub-live-chip b { color: var(--accent); }
    @keyframes pub-live-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) { .pub-live-chip { animation: none; } }
    .pub-run-wb { margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 11px; }
    .pub-run-wb span { font-family: var(--font); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--text-dim); }
    .pub-run-wb .wb-logo { height: 24px; opacity: .9; }

    /* Homepage feed */
    .home-feed { max-width: 1100px; margin: 32px auto 80px; padding: 0 24px; }
    .home-feed h2 {
      font-size: 11px; font-weight: 600; color: var(--text-dim);
      text-transform: uppercase; letter-spacing: .1em;
      margin: 0 0 14px;
    }
    .home-feed-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 10px;
    }
    .feed-card {
      background: var(--surface); border: 1px solid var(--border);
      padding: 14px 16px; border-radius: var(--radius-lg);
      text-decoration: none; color: inherit;
      transition: border-color .12s, background .12s, transform .12s;
      display: block;
    }
    .feed-card:hover {
      border-color: var(--border-hover); background: var(--surface2);
      transform: translateY(-1px);
    }
    .feed-card .domain {
      font-size: 14px; font-weight: 600; color: var(--text-bright);
      word-break: break-all; font-family: var(--mono);
    }
    .feed-card .when { font-size: 11px; color: var(--text-faint); margin: 4px 0 10px; text-transform: uppercase; letter-spacing: .05em; }
    .feed-card .chips { display: flex; flex-wrap: wrap; gap: 4px; }
    .feed-card .chips .pub-chip { font-size: 10px; }

    .feed-empty {
      display: flex; flex-direction: column; align-items: center; text-align: center;
      padding: 44px 24px 56px; color: var(--text-faint); text-align: center;
    }
    .feed-empty-icon { width: 30px; height: 30px; color: var(--text-faint); opacity: .7; margin-bottom: 14px; }
    .feed-empty-title { font-size: 15px; font-weight: 600; color: var(--text-dim); margin-bottom: 5px; text-align: center; }
    .feed-empty-sub { font-size: 13px; color: var(--text-faint); max-width: 360px; line-height: 1.5; margin: 0 auto; }
    .pub-empty { padding: 48px 24px; text-align: center; color: var(--text-faint); font-size: 13px; }
    .feed-error {
      display: flex; flex-direction: column; align-items: center; text-align: center;
      gap: 10px; padding: 40px 24px 48px;
    }
    .feed-error-title { font-size: 15px; font-weight: 600; color: var(--text-dim); }
    .feed-error-sub { font-size: 13px; color: var(--text-faint); }
    .feed-error .btn { margin-top: 4px; }

    /* Privacy + share-link card shown under the queued/running scan state.
       Tells the user the scan is private by default and gives them a one-tap
       way to grab the share URL without having to hunt in the address bar. */
    .pub-privacy-card {
      max-width: 560px; margin: 32px auto 0;
      padding: 18px 20px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius-lg);
    }
    .pub-privacy-title {
      font-size: 12px; font-weight: 600; color: var(--text-dim);
      text-transform: uppercase; letter-spacing: .1em; margin: 0 0 8px;
    }
    .pub-privacy-text {
      font-size: 13px; color: var(--text-dim); line-height: 1.55; margin: 0 0 14px;
    }
    .pub-share-row {
      display: flex; gap: 8px; align-items: stretch;
    }
    .pub-share-input {
      flex: 1; min-width: 0;
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: 8px; padding: 0 10px; height: 36px;
      color: var(--text); font-family: var(--mono); font-size: 12px;
      outline: none; transition: border-color .15s var(--ease-out);
    }
    .pub-share-input:focus { border-color: var(--accent); }
    .pub-share-row .btn { height: 36px; }
    @media (max-width: 520px) {
      .pub-share-row { flex-direction: column; }
      .pub-share-row .btn { width: 100%; justify-content: center; }
    }
    /* Visibility badge under the share row. Reflects the publish_on_complete
       choice the user made at submission time. Read-only here; users can
       still toggle after the scan finishes via the Publish/Remove button. */
    .pub-publish-badge {
      margin-top: 14px; padding: 10px 12px;
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 13px; line-height: 1.5;
      display: flex; align-items: center; gap: 10px;
    }
    .pub-publish-badge::before {
      content: ''; flex-shrink: 0;
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--text-faint);
    }
    .pub-publish-badge.will-publish { color: var(--text); border-color: var(--accent); }
    .pub-publish-badge.will-publish::before { background: var(--accent); }
    .pub-publish-badge.will-stay-private { color: var(--text-dim); }
    .pub-publish-badge.will-stay-private::before { background: var(--pivot); }

    .pub-error {
      padding: 64px 24px; text-align: center;
      max-width: 480px; margin: 0 auto;
      display: flex; flex-direction: column; align-items: center; gap: 12px;
    }
    .pub-error-icon {
      color: var(--text-faint);
      margin-bottom: 4px;
      opacity: .8;
    }
    .pub-error h2 { font-size: 22px; color: var(--text-bright); margin: 0; }
    .pub-error p { color: var(--text-dim); margin: 0 0 12px; line-height: 1.55; }
    .pub-error .btn { min-width: 200px; justify-content: center; height: 40px; padding: 0 20px; }

    .pub-flash {
      position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
      background: var(--surface2); border: 1px solid var(--border);
      padding: 8px 16px; border-radius: 999px;
      font-size: 13px; color: var(--text-bright);
      box-shadow: var(--shadow-md);
      opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 100;
    }
    .pub-flash.show { opacity: 1; }

    /* ===== RESPONSIVE: tablet ===== */
    @media (max-width: 900px) {
      .home-feed { margin: 24px auto 64px; }
      .home-feed-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
      .pub-highlights { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
      .pub-summary { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
      .pub-summary-cell .val { font-size: 16px; }
    }

    /* ===== RESPONSIVE: mobile ===== */
    @media (max-width: 640px) {
      .home-hero { padding: 32px 16px 16px; gap: 18px; }
      .home-sub { font-size: 14px; line-height: 1.5; }
      .home-capabilities {
        grid-template-columns: 1fr;
        border-left: 0; border-right: 0;
        padding: 16px 0;
      }
      .home-capabilities > li {
        border-right: 0; border-bottom: 1px solid var(--border);
        padding: 12px 0;
      }
      .home-capabilities > li:last-child { border-bottom: 0; }
      .home-ethic { font-size: 12px; padding: 12px 14px; margin-top: 20px; }
      .home-feed { margin: 16px auto 48px; padding: 0 16px; }
      .home-feed-grid { grid-template-columns: 1fr; }

      .pub-page { padding: 20px 16px 64px; }
      .pub-head {
        flex-direction: column; align-items: stretch; gap: 14px;
        margin-bottom: 24px; padding-bottom: 14px;
      }
      .pub-domain { font-size: 22px; word-break: break-all; line-height: 1.2; }
      .pub-meta { font-size: 11px; }
      .pub-actions { width: 100%; }
      .pub-actions .btn { flex: 1; justify-content: center; }

      .pub-summary {
        grid-template-columns: repeat(2, 1fr);
      }
      .pub-summary-cell { padding: 10px 12px; }
      .pub-summary-cell .label { font-size: 10px; }
      .pub-summary-cell .val { font-size: 15px; }

      .pub-highlights { grid-template-columns: 1fr; gap: 8px; }
      .pub-cat-head { padding: 10px 12px; }
      .pub-cat-name { font-size: 13px; }
      .pub-cat-body { padding: 4px 12px 12px; }
      .pub-item-value { font-size: 12px; }
      .pub-item-sub { font-size: 11px; }
      .pub-chip { font-size: 10px; padding: 1px 6px; }

      .pub-state-card { padding: 28px 20px; }
      .pub-state-num { font-size: 44px; }
      .pub-run-pct { font-size: 26px; }

      .pub-section-title { margin: 22px 0 10px; }

      .pub-flash { top: 56px; font-size: 12px; padding: 6px 14px; max-width: 92vw; }
    }

    @media (max-width: 380px) {
      .pub-domain { font-size: 19px; }
      .pub-summary { grid-template-columns: 1fr; }
      .pub-state-num { font-size: 36px; }
    }

    /* ===== Tiny phones (iPhone SE 1, Android <360px) ===== */
    @media (max-width: 320px) {
      .home-title { font-size: 38px; letter-spacing: -.02em; }
      .home-sub { font-size: 13px; }
      .home-hero { padding: 20px 12px 12px; }
      .home-search-input { font-size: 14px; }
      .home-search-btn { padding: 0 14px; font-size: 13px; }
      .pub-domain { font-size: 17px; }
      .pub-state-num { font-size: 30px; }
      .navbar { padding: 0 8px; gap: 4px; }
      .nav-brand { font-size: 13px; }
      .feed-card { padding: 12px 14px; }
    }

    /* ===== Large tablet / split laptop (iPad landscape, surface) ===== */
    @media (min-width: 1024px) and (max-width: 1279.98px) {
      .pub-page { padding: 36px 28px 88px; }
      .home-feed { padding: 0 28px; }
      .home-feed-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    }

    /* ===== Large desktop ===== */
    @media (min-width: 1600px) {
      .home-hero { max-width: 760px; padding: 80px 24px 32px; }
      .home-sub { font-size: 16px; line-height: 1.6; }
      .pub-page { max-width: 1240px; }
      .home-feed { max-width: 1240px; }
      .home-feed-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
    }

    /* ===== Full HD and above (1080p, 4K UI scaling) ===== */
    @media (min-width: 1920px) {
      body { font-size: 15px; }
      .home-title { font-size: clamp(56px, 7vw, 104px); }
      .pub-page { max-width: 1360px; }
      .home-feed { max-width: 1360px; }
      .home-hero { max-width: 820px; }
    }

    /* ===== Ultra-wide (4K landscape, dual monitor) ===== */
    @media (min-width: 2560px) {
      body { font-size: 16px; }
      .pub-page { max-width: 1600px; }
      .home-feed { max-width: 1600px; }
      .home-feed-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
    }

    /* ===== Touch optimisations (any pointer:coarse) ===== */
    @media (hover: none) and (pointer: coarse) {
      .pub-item-actions { opacity: 1; }  /* always show copy buttons on touch */
      .pub-copy-btn { width: 32px; height: 32px; }
      .pub-cat-head { min-height: 44px; }
      .feed-card { min-height: 80px; }
    }

    /* ===== Print ===== */
    @media print {
      .navbar, .pub-actions, .pub-flash, #pub-flash { display: none !important; }
      body { background: #fff !important; color: #000 !important; }
      .pub-cat { break-inside: avoid; border: 1px solid #ccc !important; }
      .pub-cat-body { display: block !important; }
    }

    /* >>> WAYTRACE_SERVER_ONLY */
    /* ===== ADMIN PANEL ===== */
    .admin-page { padding: 36px 24px 64px; max-width: 920px; margin: 0 auto; }
    .admin-gate { padding: 64px 24px; text-align: center; color: var(--text-dim); }
    .admin-gate h2 { color: var(--text-bright); font-size: 20px; margin-bottom: 8px; }
    .admin-2fa { max-width: 540px; margin: 0 auto; text-align: left; }
    .admin-2fa-secret { margin: 16px 0; display: flex; flex-direction: column; gap: 8px; }
    .admin-2fa-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-dim); }
    .admin-2fa-row span { width: 80px; flex-shrink: 0; }
    .admin-2fa-row code { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; font-family: var(--mono); color: var(--text-bright); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .admin-2fa-uri { font-size: 11px; }
    .admin-2fa-verify { display: flex; gap: 8px; margin-top: 12px; }
    .admin-2fa-verify .auth-input { flex: 1; letter-spacing: .3em; font-family: var(--mono); }
    .admin-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
    .admin-head h1 { font-size: 24px; color: var(--text-bright); letter-spacing: -.02em; }
    .admin-sub { font-size: 12px; color: var(--text-faint); font-family: var(--mono); }
    .admin-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
    .admin-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font: inherit; font-size: 13px; padding: 8px 12px; cursor: pointer; }
    .admin-tab:hover { color: var(--text); }
    .admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
    .admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 22px; }
    .admin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; }
    .admin-card-n { font-size: 24px; font-weight: 700; color: var(--text-bright); font-family: var(--mono); }
    .admin-card-l { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
    /* Monitoring alerts + sparklines */
    .adm-alerts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
    .adm-alert { font-size: 13px; padding: 9px 13px; border-radius: 9px; border: 1px solid var(--border); }
    .adm-alert-critical { border-color: var(--accent-dim); background: var(--accent-glow, rgba(199,84,31,.10)); color: var(--text-bright); }
    .adm-alert-warn { border-color: rgba(199,154,58,.4); background: rgba(199,154,58,.10); color: var(--text); }
    .adm-alert-info { background: var(--surface2); color: var(--text-dim); }
    .adm-sparks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
    .adm-spark-box { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
    .adm-spark-head { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-faint); margin-bottom: 4px; }
    .adm-spark-now { font-family: var(--mono); color: var(--text-bright); }
    .adm-spark { width: 100%; height: 34px; display: block; }
    .adm-spark-empty { font-size: 11px; color: var(--text-faint); }
    .admin-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 16px; }
    .admin-section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-bright); margin-bottom: 12px; }
    .admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .admin-chart { width: 100%; height: 160px; display: block; }
    .admin-chart-x { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-faint); font-family: var(--mono); margin-top: 4px; }
    .admin-list { display: flex; flex-direction: column; gap: 4px; }
    .admin-li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--border); }
    .admin-li-main { color: var(--text); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .admin-li-val { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
    .admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .admin-table th { text-align: left; color: var(--text-faint); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; border-bottom: 1px solid var(--border); }
    .admin-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
    .admin-mono { font-family: var(--mono); }
    .admin-actions { display: flex; gap: 5px; flex-wrap: wrap; }
    .admin-badge { background: var(--accent-glow, rgba(199,84,31,.15)); color: var(--accent); border-radius: 4px; padding: 1px 5px; font-size: 10px; }
    .admin-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .admin-form .scope-filter { flex: 1; min-width: 120px; }
    .admin-num { width: 90px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; color: var(--text-bright); font: inherit; }
    .admin-logs { font-family: var(--mono); font-size: 12px; max-height: 560px; overflow-y: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
    .admin-log { padding: 1px 0; white-space: pre-wrap; word-break: break-word; color: var(--text-dim); }
    .admin-log-t { color: var(--text-faint); }
    .admin-log-lv { font-weight: 600; }
    .admin-log-error .admin-log-lv, .admin-log-critical .admin-log-lv { color: var(--red, var(--accent)); }
    .admin-log-warning .admin-log-lv { color: var(--warn); }
    .admin-log-info .admin-log-lv { color: var(--accent); }
    .admin-log-src { color: var(--text-faint); }
    .admin-empty { color: var(--text-faint); font-size: 13px; padding: 10px 0; text-align: center; }
    .admin-note { font-size: 12px; color: var(--text-faint); margin-top: 10px; }
    @media (max-width: 640px) { .admin-cols { grid-template-columns: 1fr; } }
    /* <<< WAYTRACE_SERVER_ONLY */

    /* ===================================================================
       REPORT 2.0 — two-view master-detail results page
       =================================================================== */
    #report2 { margin-top: 18px; }
    .r2-toolbar {
      display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
      padding-bottom: 14px; border-bottom: 1px solid var(--border);
    }
    .r2-views { display: flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
    .r2-vbtn {
      font-family: var(--mono); font-size: 12.5px; padding: 8px 15px; border: 0;
      background: transparent; color: var(--text-dim); cursor: pointer;
      display: flex; align-items: center; gap: 7px; transition: background .12s, color .12s;
    }
    .r2-vbtn:hover { background: var(--surface2); color: var(--text); }
    .r2-vbtn.active { background: var(--accent); color: var(--accent-text); font-weight: 600; }
    .r2-vbtn .gl { font-size: 12px; }
    .r2-searches { display: flex; flex: 1; gap: 10px; flex-wrap: wrap; min-width: 260px; }
    .r2-search { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 200px; }
    .r2-search .cap {
      font-family: var(--mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase;
      color: var(--text-faint); padding-left: 2px;
    }
    .r2-search input {
      font-family: var(--mono); font-size: 12.5px; color: var(--text); background: var(--bg);
      border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; width: 100%;
    }
    .r2-search input::placeholder { color: var(--text-faint); }
    .r2-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

    /* Summary strip + presence filter */
    #r2-summary:empty { display: none; }
    #r2-summary {
      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
      padding: 12px 2px; border-bottom: 1px solid var(--border);
    }
    .r2-sum-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 0; font-family: var(--font); font-size: 12.5px; color: var(--text-dim); }
    .r2-sum-stat { padding: 0 12px; border-left: 1px solid var(--border); }
    .r2-sum-stat:first-child { padding-left: 2px; border-left: 0; }
    .r2-sum-stat b { color: var(--text); font-weight: 600; font-family: var(--mono); font-variant-numeric: tabular-nums; }
    .r2-sum-range { padding: 0 12px; border-left: 1px solid var(--border); font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
    .r2-presence { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
    .r2-preseg {
      font-family: var(--mono); font-size: 11.5px; padding: 6px 11px; border: 0; background: transparent;
      color: var(--text-dim); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
      border-left: 1px solid var(--border); transition: background .12s, color .12s;
    }
    .r2-preseg:first-child { border-left: 0; }
    .r2-preseg:hover { background: var(--surface2); color: var(--text); }
    .r2-preseg.on { background: var(--accent); color: var(--accent-text); font-weight: 600; }
    .r2-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
    .r2-preseg.on .r2-live-dot { background: var(--accent-text); }

    /* Co-occurrence chip + inline panel */
    .r2-cooc-chip {
      flex-shrink: 0; font-family: var(--mono); font-size: 10.5px; color: var(--text-faint);
      border: 1px solid var(--surface3); background: var(--bg); border-radius: 100px; padding: 1px 8px;
      cursor: pointer; transition: color .12s, border-color .12s, background .12s;
    }
    .r2-cooc-chip:hover { color: var(--accent); border-color: var(--accent); }
    .r2-cooc-chip.on { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
    .r2-cooc-panel {
      margin: 0 8px 6px; padding: 10px 12px; border: 1px solid var(--surface3); border-left: 2px solid var(--accent);
      border-radius: 0 var(--radius) var(--radius) 0; background: var(--bg);
      animation: r2-fadein .16s var(--ease-out, ease-out);
    }
    .r2-cooc-head { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin-bottom: 8px; }
    .r2-cooc-head a { color: var(--accent); }
    .r2-cooc-grp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 4px 0; }
    .r2-cooc-cat { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); min-width: 96px; }
    .r2-cooc-val { font-family: var(--mono); font-size: 11.5px; color: var(--text); border: 1px solid var(--surface3); border-radius: 4px; padding: 1px 6px; }
    .r2-cooc-more { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); }
    @media (max-width: 820px) { #r2-summary { justify-content: flex-start; } }

    .r2-body { display: grid; grid-template-columns: 232px 1fr; gap: 0; }
    .r2-rail {
      border-right: 1px solid var(--surface3); padding: 14px 10px 20px;
      position: sticky; top: 64px; align-self: start; max-height: calc(100vh - 72px); overflow: auto;
    }
    .r2-rt, .r2-rt2 {
      font-family: var(--font); font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
      color: var(--text-dim); padding: 0 8px 8px; display: flex; justify-content: space-between;
    }
    .r2-rt2 { padding: 14px 8px 6px; margin-top: 8px; border-top: 1px solid var(--surface3); }
    .r2-rlink {
      display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 11px; border-radius: 6px;
      font-size: 12.5px; color: var(--text-dim); cursor: pointer; border-left: 2px solid transparent;
    }
    .r2-rlink { transition: background .12s, color .12s, border-color .12s; }
    .r2-rlink:hover { background: var(--surface2); color: var(--text); }
    .r2-rlink:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; color: var(--text); }
    .r2-rlink.on { background: var(--accent-soft); color: var(--text); border-left-color: var(--accent); font-weight: 550; }
    .r2-rlink .r2-c { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--accent); font-weight: 600; }
    .r2-rlink.zero { opacity: .55; }
    .r2-rlink.zero .r2-c { color: var(--text-faint); font-weight: 400; }
    .r2-rall {
      display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 11px; border-radius: 6px;
      font-size: 12.5px; color: var(--text); cursor: pointer; font-weight: 550; margin-top: 4px; border-left: 2px solid transparent;
    }
    .r2-rall:hover { background: var(--surface2); }
    .r2-rall.on { background: var(--accent-soft); border-left-color: var(--accent); }
    .r2-rall .i, .r2-nav .i { color: var(--accent); }
    .r2-emptytoggle {
      display: flex; align-items: center; gap: 7px; padding: 8px 8px 8px 11px; margin-top: 8px;
      border-top: 1px solid var(--surface3); font-family: var(--mono); font-size: 11.5px;
      color: var(--text-faint); cursor: pointer;
    }
    .r2-emptytoggle:hover { color: var(--text-dim); }
    .r2-nav {
      display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 11px; border-radius: 6px;
      font-size: 12.5px; color: var(--text); cursor: pointer; font-weight: 550;
    }
    .r2-nav:hover { background: var(--surface2); }

    /* checkboxes (Activity view rail) */
    .r2-chk { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; color: var(--text-dim); cursor: pointer; }
    .r2-chk { transition: background .12s, color .12s; }
    .r2-chk:hover { background: var(--surface2); color: var(--text); }
    .r2-chk.on { color: var(--text); }
    .r2-box {
      width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--border); flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; font-size: 10px; color: transparent;
    }
    .r2-chk.on .r2-box { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
    .r2-chk.pv.on .r2-box { background: var(--green); border-color: var(--green); }
    .r2-chk .r2-c { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--accent); font-weight: 600; }
    .r2-chk .r2-pv { font-family: var(--mono); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .r2-pivsearch { padding: 4px 6px 8px; }
    .r2-pivsearch input {
      width: 100%; font-family: var(--mono); font-size: 12px; color: var(--text);
      background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 7px 10px;
    }
    .r2-pivsearch input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
    .r2-pivnote { padding: 8px 10px 4px; font-size: 12px; color: var(--text-faint); line-height: 1.4; }

    .r2-main { padding: 16px 4px 24px 22px; min-width: 0; }
    @media (max-width: 820px) {
      .r2-body { grid-template-columns: 1fr; }
      .r2-rail { position: static; border-right: 0; border-bottom: 1px solid var(--surface3); max-height: none; }
      .r2-main { padding: 16px 0; }
    }
    /* Narrow screens: the value goes on its own line and occ/seen/source flow
       below as a compact meta row, so the fixed columns never crush the value. */
    @media (max-width: 560px) {
      .r2-colhead { display: none; }
      .r2-row { grid-template-columns: 1fr; gap: 3px; padding: 10px 8px; }
      .r2-row .r2-occ, .r2-row .r2-span, .r2-row .r2-src { text-align: left; }
      .r2-row .r2-occ::before { content: "×"; color: var(--text-faint); }
      .r2-row > .r2-occ, .r2-row > .r2-span, .r2-row > .r2-src { display: inline; margin-right: 12px; font-size: 11.5px; }
    }
    /* Keyboard focus for the div-based rail/activity controls. */
    .r2-chk:focus-visible, .r2-rall:focus-visible, .r2-nav:focus-visible,
    .r2-emptytoggle:focus-visible, .r2-copycol:focus-visible, .r2-cooc-chip:focus-visible {
      outline: 2px solid var(--accent); outline-offset: -2px;
    }

    /* category detail block */
    .r2-catblock { margin-bottom: 26px; }
    .r2-dhead { display: flex; align-items: baseline; gap: 11px; margin-bottom: 4px; }
    .r2-dhead .r2-name { font-size: 17px; font-weight: 640; }
    .r2-dhead .r2-cnt { font-family: var(--mono); font-size: 13px; color: var(--accent); font-weight: 600; }
    .r2-filtered { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
    .r2-copycol { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-faint); cursor: pointer; border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; transition: color .12s, border-color .12s, background .12s; }
    .r2-copycol:hover { color: var(--accent); border-color: var(--accent); }
    .r2-copycol.copied { color: var(--accent-text); background: var(--green); border-color: var(--green); }
    /* Fade-in on the freshly-rendered report panel (category open / view switch). */
    .r2-anim > .r2-catblock, .r2-anim > .r2-composer, .r2-anim > .r2-noresults {
      animation: r2-fadein .18s var(--ease-out, ease-out);
    }
    @keyframes r2-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) { .r2-anim > * { animation: none; } }
    /* Whole-scan empty state */
    .r2-noresults { padding: 48px 16px; text-align: center; }
    .r2-noresults-title { font-size: 17px; font-weight: 640; color: var(--text-dim); margin-bottom: 8px; }
    .r2-noresults-sub { font-size: 13.5px; color: var(--text-faint); max-width: 52ch; margin: 0 auto; line-height: 1.55; }
    .r2-ddesc { color: var(--text-faint); font-size: 12.5px; margin: 0 0 12px; max-width: 78ch; }
    .r2-emptystate { color: var(--text-faint); font-size: 13px; padding: 18px 8px; border: 1px dashed var(--border); border-radius: var(--radius); }

    .r2-colhead { display: grid; grid-template-columns: 1fr 62px 168px 62px; gap: 14px; padding: 0 8px 6px; font-family: var(--font); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-faint); }
    .r2-colhead .r { text-align: right; }
    .r2-row { display: grid; grid-template-columns: 1fr 62px 168px 62px; gap: 14px; align-items: start; padding: 9px 8px; border-bottom: 1px solid var(--surface3); }
    .r2-row { transition: background .12s; }
    .r2-row:hover { background: var(--surface2); }
    /* Value cell: the value shows in FULL — it wraps instead of truncating, so no
       info is lost and the whole thing is selectable for copy-paste. The copy
       button stays put and is never clipped. */
    .r2-val { font-family: var(--mono); font-size: 13px; color: var(--text); display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
    .r2-val-text { min-width: 0; word-break: break-word; overflow-wrap: anywhere; line-height: 1.5; user-select: text; }
    .r2-copy {
      flex-shrink: 0; opacity: .35; font-size: 12px; cursor: pointer; color: var(--text-faint);
      background: none; border: 1px solid transparent; padding: 2px 5px; border-radius: 5px; line-height: 1;
      transition: opacity .12s, color .12s, background .12s, border-color .12s, transform .1s;
    }
    /* On row hover the copy control becomes an obvious, clickable pill so it's
       clear the value can be copied. */
    .r2-row:hover .r2-copy { opacity: 1; color: var(--text-dim); border-color: var(--border); background: var(--surface2); }
    .r2-copy:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
    .r2-copy:active { transform: translateY(0) scale(.92); }
    .r2-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
    /* Touch has no hover: the copy control must be visible and a real tap target. */
    @media (hover: none) {
      .r2-copy { opacity: 1; color: var(--text-dim); border-color: var(--border); min-width: 34px; min-height: 30px; }
      .r2-cooc-chip { min-height: 28px; }
    }
    /* Click confirmation: green check that pulses so the copy is unmistakable. */
    .r2-copy.copied {
      opacity: 1; color: var(--accent-text); background: var(--green); border-color: var(--green);
      animation: r2-copied-pulse .45s var(--ease-out, ease-out);
    }
    @keyframes r2-copied-pulse {
      0% { transform: scale(.8); } 55% { transform: scale(1.18); } 100% { transform: scale(1); }
    }
    @media (prefers-reduced-motion: reduce) { .r2-copy, .r2-copy.copied { animation: none; transition: none; } }
    .r2-chip { font-family: var(--mono); font-size: 10px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; flex-shrink: 0; }
    .r2-occ { font-family: var(--mono); font-size: 12px; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }
    .r2-occ b { color: var(--text); }
    .r2-span { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
    .r2-arw { color: var(--text-faint); }
    .r2-now { color: var(--green); }
    .r2-end { color: var(--text-faint); }
    .r2-src { text-align: right; font-family: var(--mono); font-size: 11px; }
    .r2-more { font-family: var(--mono); font-size: 12px; color: var(--text-dim); padding: 9px 8px; }

    /* per-category + composed activity */
    .r2-act, .r2-composer { margin-top: 18px; border: 1px solid var(--surface3); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
    .r2-composer { border-color: var(--accent); box-shadow: 0 0 18px -6px var(--accent-glow); }
    .r2-ah, .r2-ch { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--surface3); font-size: 12.5px; color: var(--text-dim); }
    .r2-ah b, .r2-ch b { color: var(--text); }
    .r2-ah .i, .r2-ch .i { color: var(--accent); }
    .r2-ch .r2-hint { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
    .r2-tl { padding: 12px 16px 8px; }
    .r2-years { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--text-faint); margin: 0 0 8px 158px; }
    .r2-lane { display: grid; grid-template-columns: 150px 1fr; gap: 8px; align-items: center; height: 25px; }
    .r2-lbl { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
    .r2-pvtag { font-size: 9px; color: var(--green); border: 1px solid var(--green); border-radius: 3px; padding: 0 3px; }
    .r2-track { position: relative; height: 100%; border-left: 1px solid var(--border); }
    .r2-track::before, .r2-track::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
    .r2-track::before { left: 33.3%; }
    .r2-track::after { left: 66.6%; }
    .r2-bar { position: absolute; top: 50%; transform: translateY(-50%); height: 7px; border-radius: 100px; background: var(--accent); opacity: .9; }
    .r2-bar.pivot { background: var(--green); opacity: .85; }
    .r2-bar.faded { opacity: .5; }
    .r2-capa { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); z-index: 2; }
    .r2-capa.pivot { background: var(--green); }
    .r2-capz { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: var(--bg); border: 2px solid var(--text-faint); z-index: 2; }
    .r2-gone { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, transparent, transparent 3px, var(--surface3) 3px, var(--surface3) 4px); }
    @media (max-width: 820px) {
      .r2-lane { grid-template-columns: 96px 1fr; }
      .r2-years { margin-left: 104px; }
    }

    /* change feed */
    .r2-evleg { display: flex; gap: 16px; padding: 8px 16px; font-family: var(--mono); font-size: 11px; color: var(--text-faint); border-top: 1px solid var(--surface3); }
    .r2-evleg span { display: flex; align-items: center; gap: 6px; }
    .r2-evleg i { width: 8px; height: 8px; border-radius: 50%; }
    .r2-evleg .up { background: var(--accent); }
    .r2-evleg .down { background: var(--bg); border: 2px solid var(--text-faint); }
    .r2-evleg .pv { background: var(--green); }
    .r2-feed { padding: 4px 16px 12px; }
    .r2-ev { display: grid; grid-template-columns: 72px 14px 1fr; gap: 12px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--surface3); }
    .r2-ev:last-child { border-bottom: 0; }
    .r2-when { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); text-align: right; }
    .r2-mk { width: 8px; height: 8px; border-radius: 50%; margin: 5px auto 0; }
    .r2-ev.up .r2-mk { background: var(--accent); }
    .r2-ev.down .r2-mk { background: var(--bg); border: 2px solid var(--text-faint); }
    .r2-txt { font-size: 13px; color: var(--text); }
    .r2-txt .r2-k { font-family: var(--mono); color: var(--text); background: var(--surface2); border: 1px solid var(--surface3); border-radius: 4px; padding: 0 5px; font-size: 12px; }
    .r2-txt .r2-sub { color: var(--text-faint); font-size: 12px; }
    .r2-txt a { color: var(--accent); font-family: var(--mono); font-size: 11px; }

    /* favicon evolution gallery */
    .r2-favstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--surface3); }
    .r2-favlbl { font-family: var(--font); font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-dim); }
    .r2-favera { display: flex; align-items: center; gap: 9px; }
    .r2-favico { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--surface2); box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
    .r2-favimg { width: 100%; height: 100%; object-fit: contain; image-rendering: -webkit-optimize-contrast; }
    .r2-favph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--accent); font-size: 18px; }
    .r2-favm { font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); }
    .r2-favm b { color: var(--text); display: block; }
    .r2-favarr { color: var(--text-faint); }
    .r2-empty-compose { padding: 22px 16px; color: var(--text-faint); font-size: 13px; text-align: center; }

/* Turnstile bot-gate widget in the auth modal (empty/hidden when disabled). */
.auth-turnstile:not(:empty) { margin: 4px 0 2px; display: flex; justify-content: center; }

    /* ===== Themes page (Appearance) ===== */
    .themes-page { max-width: 880px; margin: 0 auto; padding: 56px 24px 96px; }
    .themes-page h1 { font-size: 26px; color: var(--text-bright); letter-spacing: -.01em; margin-bottom: 6px; }
    .themes-sub { font-size: 13.5px; color: var(--text-dim); max-width: 640px; margin-bottom: 22px; }
    .themes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; margin-bottom: 40px; }
    .theme-card { display: flex; flex-direction: column; gap: 8px; padding: 10px; cursor: pointer;
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
      font-family: var(--font); text-align: left; transition: border-color .15s var(--ease-out), transform .15s var(--ease-out); }
    .theme-card:hover { border-color: var(--border-hover); transform: translateY(-1px); }
    .theme-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
    .theme-prev { display: flex; border-radius: 7px; overflow: hidden; height: 52px; border: 1px solid rgba(0,0,0,.25); }
    .theme-prev-half { position: relative; flex: 1; }
    .theme-prev-bar { position: absolute; left: 7px; right: 7px; top: 9px; height: 9px; border-radius: 3px; }
    .theme-prev-dot { position: absolute; left: 7px; bottom: 8px; width: 15px; height: 15px; border-radius: 50%; }
    .theme-card-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
    .theme-card.active .theme-card-name { color: var(--accent); }
    .themes-custom-title { font-size: 15px; color: var(--accent); margin: 0 0 8px; }
    .themes-custom { display: flex; gap: 28px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 18px;
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
    .themes-custom.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
    .themes-custom-col { display: flex; flex-direction: column; gap: 10px; }
    .themes-custom-head { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
    .themes-pick { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); }
    .themes-pick input[type="color"] { width: 44px; height: 30px; padding: 2px; border: 1px solid var(--border);
      border-radius: 6px; background: var(--surface2); cursor: pointer; }
    .themes-actions { display: flex; gap: 10px; }