:root {
      --bg: #FFFFFF;
      --bg-raised: #FFFFFF;
      --bg-card: #FFFFFF;
      --bg-card-hover: #F9FAFB;
      --bg-input: #FFFFFF;
      --border: #C9CED6;
      --border-focus: #2D3F86;
      --text: #5E5E5E;
      --text-dim: #6B7280;
      --text-bright: #2D3F86;
      --accent: #2D3F86;
      --accent-dim: rgba(45,63,134,0.1);
      --accent-glow: rgba(45,63,134,0.05);
      --green: #16a34a;
      --green-bg: rgba(22,163,74,0.08);
      --green-border: rgba(22,163,74,0.2);
      --red: #E85036;
      --red-bg: rgba(232,80,54,0.08);
      --blue: #2D3F86;
      --blue-bg: rgba(45,63,134,0.08);
      --blue-border: rgba(45,63,134,0.15);
      --amber-bg: rgba(232,80,54,0.08);
      --amber-border: rgba(232,80,54,0.2);
      --slate: #9CA3AF;
      --font-display: 'Poppins', system-ui, sans-serif;
      --font-body: 'Poppins', system-ui, sans-serif;
      --font-mono: 'Menlo', 'Consolas', monospace;
      --radius-sm: 4px;
      --radius: 6px;
      --radius-lg: 10px;
      --rt-h-tree-header: 0px;
      --rt-h-panel-header: 42px;
      --rt-h-subpart-header: 40px;
    }

    html {
      background: var(--bg);
      color-scheme: light;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--text);
      font-size: 15.5px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }


    a { color: var(--accent); text-decoration: none; transition: color 0.15s; }
    a:hover { color: #E85036; }

    ::selection { background: var(--accent-dim); color: var(--text-bright); }

    /* ── Header ── */
    .header {
      background: rgba(255,255,255,0.95);
      border-bottom: 1px solid var(--border);
      padding: 0 28px;
      display: flex;
      align-items: center;
      height: 52px;
      gap: 24px;
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(12px);
    }
    .header-brand {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .header-brand svg { flex-shrink: 0; }
    .header h1 {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 500;
      color: var(--text-bright);
      letter-spacing: -0.01em;
    }
    .header h1 span { color: var(--accent); font-weight: 700; }
    .header nav { display: flex; gap: 20px; margin-left: auto; align-items: center; }
    .header nav a {
      color: var(--text-dim);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 4px 0;
      border-bottom: 1.5px solid transparent;
      transition: all 0.2s;
    }
    .header nav a:hover { color: var(--text); border-bottom-color: #E85036; text-decoration: none; }
    .header nav #authSignInBtn {
      font-size: 16px;
      font-weight: 700;
      color: var(--accent);
      text-transform: none;
      letter-spacing: normal;
      border-bottom: none;
    }
    .header nav #authSignInBtn:hover { color: var(--accent); text-decoration: underline; border-bottom: none; }

    /* Legacy .container kept for alerts page */
    .container {
      max-width: 1800px; margin: 0 auto; padding: 20px 28px 60px;
      display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    }

    /* ── Analytical Workbench Layout ── */
    .app-container {
      display: flex;
      flex-direction: column;
      width: 80%;
      max-width: 1600px;
      margin: 0 auto;
      height: calc(100vh - 52px - var(--site-footer-h, 44px));
      overflow: hidden;
    }
    body.pdf-viewer-fullscreen {
      --site-footer-h: 0px;
    }
    body.pdf-viewer-fullscreen .site-footer {
      display: none;
    }
    .main-panel {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-width: 0;
      flex: 1;
      min-height: 0;
    }

    /* ── Tab Bar (inside header) ── */
    .right-tabs {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .tab-btn {
      padding: 4px 14px;
      border: none;
      background: none;
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 500;
      color: var(--text-dim);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: color 0.15s, border-color 0.15s;
      white-space: nowrap;
    }
    .tab-btn:hover { color: var(--text); }
    .tab-btn.active {
      color: var(--accent);
      border-bottom-color: var(--accent);
      font-weight: 600;
    }
    .tab-menu-btn {
      display: none;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      padding: 6px;
      margin-left: auto;
      color: var(--text);
      cursor: pointer;
      border-radius: 6px;
    }
    .tab-menu-btn:hover { background: rgba(0,0,0,0.05); }

    @media (max-width: 1280px) {
      .tab-menu-btn { display: inline-flex; }
      .right-tabs {
        display: none;
        position: absolute;
        top: 52px;
        right: 8px;
        min-width: 200px;
        flex-direction: column;
        align-items: stretch;
        padding: 6px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        z-index: 49;
      }
      .right-tabs.open { display: flex; }
      .right-tabs .tab-btn {
        text-align: left;
        padding: 10px 14px;
        border-bottom: none;
        border-left: 2px solid transparent;
        border-radius: 4px;
      }
      .right-tabs .tab-btn:hover { background: rgba(0,0,0,0.04); }
      .right-tabs .tab-btn.active {
        border-bottom: none;
        border-left-color: var(--accent);
        background: rgba(210,84,54,0.08);
      }
      /* When hamburger takes margin-left:auto, nav no longer needs it */
      .header nav { margin-left: 0; }
    }

    /* ── Tab Content ── */
    .right-tab-content {
      flex: 1;
      min-height: 0;
      overflow: hidden;
      position: relative;
    }
    .right-tab-content > div {
      display: none;
      height: 100%;
      overflow-y: auto;
    }
    .right-tab-content > div.tab-active {
      display: flex;
      flex-direction: column;
    }
    /* Embeddings tab needs overflow hidden so Plotly fills the flex space */
    #embeddingsTab.tab-active {
      overflow: hidden;
    }
    /* Search tab uses browser-level scrolling (AG Grid autoHeight) */
    #dataTableTab.tab-active {
      height: auto;
      overflow: visible;
    }
    /* Regulation Search also uses browser-level scrolling — no inner
       overflow container. Tab-manager flips body/app-container/main-panel
       overflow in tandem. */
    #regSearchTab.tab-active {
      height: auto;
      overflow: visible;
    }
    .right-tab-content > div::-webkit-scrollbar { width: 6px; }
    .right-tab-content > div::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }


    /* ── Tab Placeholder ── */
    .tab-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: var(--text-dim);
      font-size: 16px;
      padding: 40px;
      text-align: center;
    }

    /* ── Responsive ── */
    @media (max-width: 1200px) {
      .app-container { width: 95%; }
    }
    @media (max-width: 768px) {
      .app-container { width: 100%; }
    }

    /* ── Regulation Tree ── */
    .reg-tree-header {
      padding: 14px 16px; border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 10px;
      background: var(--bg-raised); z-index: 5; flex-shrink: 0;
    }
    .reg-tree-header h2 {
      font-family: var(--font-display); font-size: 16px; font-weight: 500;
      color: var(--text-bright); flex: 1; white-space: nowrap;
    }
    .reg-tree-header select {
      padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius);
      font-family: var(--font-body); font-size: 14px; color: var(--text);
      background: var(--bg-input); cursor: pointer; max-width: 200px;
    }
    .rt-search {
      padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius);
      font-family: var(--font-body); font-size: 14px; color: var(--text);
      background: var(--bg-input); width: 220px; transition: border-color 0.15s;
    }
    .rt-search:focus { outline: none; border-color: var(--accent); }
    .rt-search::placeholder { color: var(--text-dim); }
    .rt-search-group { display: flex; flex-direction: column; gap: 6px; }
    .rt-search-tabs { display: flex; gap: 2px; }
    .rt-search-tab {
      padding: 3px 10px; border: 1px solid var(--border); border-radius: var(--radius);
      font-family: var(--font-body); font-size: 13px; color: var(--text-dim);
      background: var(--bg-input); cursor: pointer; transition: all 0.15s;
    }
    .rt-search-tab:hover { color: var(--text); border-color: var(--accent); }
    .rt-search-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .rt-ident-results { padding: 8px 0; overflow-y: auto; max-height: calc(100vh - 140px); }
    .rt-ident-result {
      padding: 8px 16px; cursor: pointer; border-bottom: 1px solid var(--border);
      transition: background 0.1s;
    }
    .rt-ident-result:hover { background: var(--bg-input); }
    .rt-ident-result-reg { font-size: 14px; font-weight: 600; color: var(--accent); }
    .rt-ident-result-name { font-size: 14px; color: var(--text); margin-left: 6px; }
    .rt-ident-result-panel { font-size: 11px; padding: 1px 6px; border-radius: 3px; background: var(--bg-input); color: var(--text-dim); margin-left: 6px; font-family: var(--font-mono); }
    .rt-ident-result-snippet { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin-top: 4px; }
    .rt-ident-result-snippet mark { background: #fff3b0; color: var(--text); padding: 0 1px; border-radius: 2px; }
    .rt-ident-no-results { text-align: center; padding: 32px 16px; color: var(--text-dim); font-style: italic; font-size: 15px; }
    #regTab.tab-active { overflow: hidden !important; flex-direction: column; }
    /* No top padding — the sticky .rt-panel-header / .rt-subpart-header /
       .rt-reg-header rules pin at top: 0 of this scroll container.  An 8px
       padding-top creates a transparent gap above the pinned header when
       scrolled, exposing whatever scrolled-out content is underneath
       (manifested as text bleeding through the sticky headers; see the
       2026-04-19 screenshot).  Bottom padding stays — it's just visual
       breathing room at end-of-list and doesn't sit beneath any sticky. */
    .reg-tree-body { padding: 0 0 8px; flex: 1; overflow-y: auto; min-height: 0; }
    .reg-tree-body::-webkit-scrollbar { width: 6px; }
    .reg-tree-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
    .reg-tree-loading { text-align: center; padding: 32px 16px; color: var(--text-dim); font-style: italic; font-size: 15px; }

    /* ── Split layout: tree on left, detail pane on right ── */
    .rt-split { display: flex; flex: 1; min-height: 0; overflow: hidden; }
    .rt-split-left {
      width: 560px; min-width: 320px; max-width: 75%;
      display: flex; flex-direction: column; overflow: hidden;
      border-right: 1px solid var(--border); flex-shrink: 0;
    }
    .rt-split-resizer {
      width: 6px; cursor: col-resize; background: transparent;
      flex-shrink: 0; transition: background 0.15s; z-index: 5;
      margin-left: -3px; margin-right: -3px;
    }
    .rt-split-resizer:hover, .rt-split-resizer.active { background: var(--accent); opacity: 0.4; }
    .rt-split-right {
      flex: 1; min-width: 0; overflow-y: auto;
      background: var(--bg);
    }
    .rt-split-right::-webkit-scrollbar { width: 8px; }
    .rt-split-right::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
    .rt-detail-empty { padding: 40px 24px; color: var(--text-dim); }

    /* Selection state */
    .rt-reg.rt-selected > .rt-reg-header,
    .rt-pc.rt-selected > .rt-pc-row,
    .rt-subpart.rt-selected > .rt-subpart-header,
    .rt-panel.rt-selected > .rt-panel-header,
    .rt-pc-device.rt-selected {
      background: linear-gradient(var(--accent-dim), var(--accent-dim)), var(--bg-raised) !important;
      outline: 2px solid var(--accent);
      outline-offset: -2px;
    }

    /* Detail pane content styles */
    .rtd-root { padding: 32px 28px 20px; max-width: 900px; }
    .rtd-crumbs { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; font-family: var(--font-mono); }
    .rtd-crumbs a { color: var(--accent); cursor: pointer; }
    .rtd-crumbs a:hover { text-decoration: underline; }
    .rtd-crumb-sep { margin: 0 6px; color: var(--border); }
    .rtd-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--text-bright); margin-bottom: 4px; line-height: 1.25; }
    .rtd-subtitle { font-size: 13px; color: var(--text-dim); margin-bottom: 16px; }
    .rtd-section { margin-top: 20px; }
    .rtd-section-title { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
    .rtd-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 13.5px; }
    .rtd-kv dt { color: var(--text-dim); white-space: nowrap; }
    .rtd-kv dd { color: var(--text); }
    .rtd-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 8px; }
    .rtd-stat-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
    .rtd-stat-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
    .rtd-stat-value { font-size: 22px; font-weight: 600; color: var(--text-bright); font-family: var(--font-display); margin-top: 2px; }
    .rtd-stat-hint { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
    .rtd-bar-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 13px; }
    .rtd-bar-label { min-width: 90px; color: var(--text); }
    .rtd-bar-track { flex: 1; height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden; position: relative; }
    .rtd-bar-fill { height: 100%; background: var(--accent); border-radius: 5px; transition: width 0.3s; }
    .rtd-bar-fill.c1 { background: var(--green); }
    .rtd-bar-fill.c2 { background: var(--blue); }
    .rtd-bar-fill.c3 { background: var(--red); }
    .rtd-bar-count { min-width: 60px; text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }
    .rtd-list { list-style: none; padding: 0; margin: 0; }
    .rtd-list li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-bottom: 1px solid var(--border); font-size: 13px; }
    .rtd-list li:last-child { border-bottom: none; }
    .rtd-list a { color: var(--accent); cursor: pointer; font-family: var(--font-mono); font-weight: 500; }
    .rtd-list a:hover { text-decoration: underline; }
    .rtd-list-name { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rtd-list-meta { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
    .rtd-list-scroll { max-height: 480px; overflow-y: auto; }
    .rtd-text-block { font-size: 13.5px; line-height: 1.6; color: var(--text); padding: 10px 12px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); white-space: pre-wrap; }
    .rtd-rationale { border-left: 3px solid var(--accent); }
    .rtd-flag-row { display: flex; flex-wrap: wrap; gap: 6px; }
    .rtd-device-frame { width: 100%; height: 100%; border: none; display: block; }
    .rt-device-iframe-wrap { position: absolute; inset: 0; }

    .reg-tree-panel-info {
      padding: 8px 16px; font-size: 13px; color: var(--text-dim);
      border-bottom: 1px solid var(--border); display: flex; gap: 8px; align-items: center;
    }
    .reg-tree-panel-info .cfr-ref {
      font-family: var(--font-mono); font-size: 12.5px; color: var(--accent);
      background: var(--accent-dim); padding: 1px 6px; border-radius: 3px;
    }

    .rt-search-bar {
      background: var(--bg);
    }

    /* Panel-level (top of tree) */
    .rt-panel { border-bottom: 1px solid var(--border); }
    .rt-panel-header {
      padding: 10px 16px; display: flex; align-items: center; gap: 8px;
      cursor: pointer; user-select: none; transition: background 0.15s;
      position: sticky; top: var(--rt-h-tree-header); z-index: 4;
      background: var(--bg-raised);
    }
    .rt-panel-header:hover { background: var(--bg-card-hover); }
    .rt-panel.active > .rt-panel-header { background: #fff; color: var(--text); border-bottom: 2px solid #E85036; }
    .rt-panel.active > .rt-panel-header .rt-panel-chevron { color: #E85036; }
    .rt-panel.active > .rt-panel-header .rt-panel-label { color: #E85036; font-weight: 700; }
    .rt-panel.active > .rt-panel-header .rt-panel-cfr { color: var(--text-dim); background: var(--bg); border-color: var(--border); }
    .rt-panel-chevron {
      width: 14px; height: 14px; color: #E85036; transition: transform 0.2s; flex-shrink: 0;
    }
    .rt-panel.collapsed .rt-panel-chevron { transform: rotate(-90deg); }
    .rt-panel-label { font-size: 15px; font-weight: 600; color: var(--text-bright); flex: 1; }
    .rt-panel-cfr {
      font-family: var(--font-mono); font-size: 12px; color: var(--text-dim);
      background: var(--bg); padding: 1px 6px; border-radius: 3px; border: 1px solid var(--border);
    }
    .rt-panel.collapsed .rt-panel-body { display: none; }
    .rt-panel-body { padding: 0; }

    .rt-subpart {
      border-bottom: 1px solid var(--border);
    }
    .rt-subpart-header {
      padding: 10px 16px; display: flex; align-items: center; gap: 8px;
      cursor: pointer; user-select: none; transition: background 0.15s;
      position: sticky; top: calc(var(--rt-h-tree-header) + var(--rt-h-panel-header)); z-index: 3;
      background: var(--bg-raised);
    }
    .rt-subpart-header:hover { background: var(--bg-card-hover); }
    .rt-subpart-chevron {
      width: 14px; height: 14px; color: var(--text-dim); transition: transform 0.2s;
      flex-shrink: 0;
    }
    .rt-subpart.collapsed .rt-subpart-chevron { transform: rotate(-90deg); }
    .rt-subpart-label {
      font-size: 14px; font-weight: 600; color: var(--text-bright); flex: 1;
    }
    .rt-subpart-range {
      font-family: var(--font-mono); font-size: 12px; color: var(--text-dim);
    }
    .rt-subpart-count {
      font-family: var(--font-mono); font-size: 12px; color: var(--text-dim);
      background: var(--bg); padding: 1px 6px; border-radius: 3px; border: 1px solid var(--border);
    }
    .rt-subpart.collapsed .rt-subpart-body { display: none; }
    .rt-subpart-body { padding: 0; }

    .rt-reg {
      border-top: 1px solid var(--border);
    }
    .rt-reg-header {
      padding: 8px 16px 8px 32px; display: flex; align-items: flex-start; gap: 8px;
      cursor: pointer; user-select: none; transition: background 0.15s;
      position: sticky; top: calc(var(--rt-h-tree-header) + var(--rt-h-panel-header) + var(--rt-h-subpart-header)); z-index: 2;
      background: var(--bg-raised);
    }
    .rt-reg-header:hover { background: var(--accent-glow); }
    .rt-reg-chevron {
      width: 12px; height: 12px; color: var(--text-dim); transition: transform 0.2s;
      flex-shrink: 0; margin-top: 2px;
    }
    .rt-reg.collapsed .rt-reg-chevron { transform: rotate(-90deg); }
    .rt-reg-ref {
      font-family: var(--font-mono); font-size: 13px; color: var(--accent);
      white-space: nowrap; flex-shrink: 0;
    }
    .rt-reg-name {
      font-size: 14px; color: var(--text); flex: 1;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .rt-reg-class {
      font-family: var(--font-mono); font-size: 12px; font-weight: 600;
      padding: 1px 5px; border-radius: 3px; white-space: nowrap; flex-shrink: 0;
    }
    .rt-reg-class-1 { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
    .rt-reg-class-2 { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); }
    .rt-reg-class-3 { background: var(--red-bg); color: var(--red); border: 1px solid var(--amber-border); }
    .rt-pc-count {
      font-family: var(--font-mono); font-size: 12px; color: var(--text-dim);
      background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
      padding: 0 5px; white-space: nowrap; flex-shrink: 0;
    }
    .rt-pc-list { display: none; padding: 0 0 0 28px; }
    .rt-reg:not(.collapsed) > .rt-pc-list { display: block; }
    .rt-pc { border-bottom: 1px solid var(--bg); }
    .rt-pc-row {
      display: flex; align-items: center; gap: 8px;
      padding: 5px 12px; font-size: 13.5px; cursor: pointer; user-select: none;
      position: sticky; top: calc(var(--rt-h-tree-header) + var(--rt-h-panel-header) + var(--rt-h-subpart-header) + 36px); z-index: 1;
      background: var(--bg-raised);
    }
    .rt-pc-row:hover { background: var(--bg-card-hover); }
    .rt-pc-chevron { width: 12px; height: 12px; color: var(--text-dim); transition: transform 0.2s; flex-shrink: 0; }
    .rt-pc.collapsed .rt-pc-chevron { transform: rotate(-90deg); }
    .rt-pc-code { font-family: var(--font-mono); font-weight: 600; color: var(--accent); min-width: 36px; }
    .rt-pc-name { color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rt-pc-devices { display: none; padding: 0 0 0 24px; }
    .rt-pc:not(.collapsed) > .rt-pc-devices { display: block; }
    .rt-pc-device {
      display: flex; align-items: center; gap: 8px;
      padding: 3px 12px; font-size: 13px; border-bottom: 1px solid var(--bg);
    }
    .rt-pc-device-id { font-family: var(--font-mono); font-weight: 500; color: var(--accent); min-width: 72px; font-size: 12.5px; }
    .rt-pc-device-name { color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rt-pc-device-meta { font-size: 12px; color: var(--text-dim); white-space: nowrap; }

    .rt-flag {
      display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px;
      border-radius: 3px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
    }
    .rt-flag-yes { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
    .rt-flag-no { background: var(--bg); color: var(--text-dim); border: 1px solid var(--border); }

    /* ── Filter Panel ── */
    .filter-panel {
      background: var(--bg-raised);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      margin-bottom: 20px;
      overflow: hidden;
      transition: border-color 0.2s;
    }
    /* Filter panel inside the data table tab fills the area */
    #dataTableTab > .filter-panel {
      border: none;
      border-radius: 0;
      margin-bottom: 0;
      border-bottom: 1px solid var(--border);
    }
    .filter-panel:focus-within { border-color: var(--border-focus); }

    .filter-header {
      padding: 14px 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      user-select: none;
      border-bottom: 1px solid transparent;
      transition: border-color 0.2s;
      background: var(--accent);
      color: #fff;
    }
    .filter-panel:not(.collapsed) .filter-header { border-bottom-color: var(--border); }

    .filter-header h2 {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 500;
      color: #fff;
      flex: 1;
    }
    .filter-header .panel-menu-btn { color: rgba(255,255,255,0.85); }
    .filter-header .panel-menu-btn:hover { color: #fff; }
    .filter-header .filter-summary { color: rgba(255,255,255,0.8); }
    .filter-header .filter-summary-chip {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.25);
      color: #fff;
    }
    .filter-toggle {
      width: 20px; height: 20px;
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.9);
      transition: transform 0.25s ease;
    }
    .filter-panel.collapsed .filter-toggle { transform: rotate(-90deg); }
    .filter-panel.collapsed .filter-body { display: none; }

    /* "Match ALL of" combinator label (single-panel default; Phase 3 swaps this
       into a pill selector when users add a second panel). */
    .filter-combinator {
      color: var(--accent, #ccd);
      font-weight: 600;
    }

    /* Summary line — populated by filter-panel.js when the panel is collapsed.
       Hidden when expanded; truncates with ellipsis if long. */
    .filter-summary {
      flex: 1;
      min-width: 0;
      font-size: 13px;
      color: var(--text-dim);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: none;
    }
    .filter-panel.collapsed .filter-summary { display: block; }
    .filter-panel.collapsed .filter-header h2 { flex: 0 0 auto; }
    .filter-summary-chip {
      display: inline-block;
      padding: 1px 6px;
      margin-right: 6px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border);
      border-radius: 4px;
      font-size: 12px;
      color: var(--text-bright);
    }
    .filter-summary-chip strong {
      color: var(--text-dim);
      font-weight: 400;
      margin-right: 4px;
    }

    .filter-body { padding: 16px 20px 18px; }

    /* Root is a plain flex column of groups. No bracket, no header —
       groups are the visible units and the implicit AND between them is
       shown via .query-op labels. */
    .query-root {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding-top: 10px;
    }
    .root-actions {
      display: flex;
      gap: 8px;
      padding: 8px 0 4px;
    }

    /* Group — bordered panel container with its own combinator pill + body
       of panels. One renderer, one shape; the very first group holds the
       primary panel but is otherwise identical to any other group. */
    .query-group {
      padding: 12px 16px;
      background: var(--bg-raised);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .group-body {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .group-actions {
      display: flex;
      gap: 8px;
      padding-top: 4px;
      flex-wrap: wrap;
      align-items: center;
    }
    .last-group-extras {
      margin-left: auto;
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    .last-group-extras .btn-search { margin-left: auto; }
    .group-body > .filter-panel-secondary {
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      margin-bottom: 0;
    }

    /* Shared combinator header — used by every .query-composite. */
    .query-combo-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 2px 2px 4px;
    }
    .query-combo-label {
      color: var(--text-dim);
      font-size: 14px;
    }
    .query-combo-combinator {
      background: var(--bg);
      color: var(--text-bright);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 4px 10px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
    }
    .query-combo-header .panel-menu-btn {
      margin-left: auto;
    }
    /* "Group N" label rendered only when 2+ groups exist, so users can
       distinguish otherwise-identical "Match ALL of these panels:" headers. */
    .query-group-number {
      font-size: 13px;
      font-weight: 600;
      color: var(--accent, #2D3F86);
      letter-spacing: 0.02em;
      padding-right: 4px;
    }

    .btn-ghost {
      background: transparent;
      border: 1px dashed var(--border);
      color: var(--text-dim);
      padding: 8px 14px;
      border-radius: var(--radius-md, 8px);
      font-size: 13px;
      cursor: pointer;
    }
    .btn-ghost:hover {
      border-color: var(--border-focus);
      color: var(--text-bright);
    }

    /* Boolean operator label shown between adjacent members. Short hr
       ticks on either side so it reads as a join, not a heading. */
    .query-op {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--text-dim);
      text-transform: uppercase;
      padding: 0;
      margin: 0;
    }
    .query-op::before,
    .query-op::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    /* Negated panel: red dashed border. */
    .filter-panel.panel-negated {
      border-style: dashed;
      border-color: #c54;
    }
    .filter-panel.panel-negated .filter-header h2::before {
      content: "NOT ";
      color: #c54;
      font-weight: 600;
      margin-right: 4px;
    }

    /* Panel overflow menu button + popup. */
    .panel-menu-btn {
      background: transparent;
      border: none;
      color: var(--text-dim);
      cursor: pointer;
      font-size: 18px;
      padding: 0 6px;
      line-height: 1;
    }
    .panel-menu-btn:hover { color: var(--text-bright); }
    .panel-menu-popup {
      z-index: 1000;
      background: var(--bg-raised);
      border: 1px solid var(--border);
      border-radius: 6px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
      padding: 4px 0;
      min-width: 180px;
    }
    .panel-menu-popup button {
      display: block;
      width: 100%;
      padding: 6px 14px;
      background: transparent;
      border: none;
      color: var(--text-bright);
      font-size: 13px;
      text-align: left;
      cursor: pointer;
    }
    .panel-menu-popup button:hover:not(:disabled) {
      background: rgba(255, 255, 255, 0.05);
    }
    .panel-menu-popup button:disabled {
      color: var(--text-dim);
      cursor: not-allowed;
    }

    .search-everything {
      width: 100%;
      padding: 12px 44px 12px 40px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--text-bright);
      font-family: var(--font-body);
      font-size: 16px;
      transition: all 0.2s;
      margin-bottom: 14px;
      resize: vertical;
      line-height: 1.5;
      min-height: 46px;
      field-sizing: content;
      max-height: 200px;
      overflow-y: auto;
    }
    .search-everything::placeholder { color: #C0C5CC; font-style: italic; }
    .search-everything:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-dim);
      background: var(--bg-input);
    }
    .search-wrap { position: relative; margin-bottom: 14px; }
    .search-wrap .search-wrap-icon {
      position: absolute; left: 14px; top: 15px;
      color: var(--text-dim); pointer-events: none;
    }
    .search-wrap .search-everything { margin-bottom: 0; }
    .search-kbd {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 4px;
      font-family: var(--font-mono, ui-monospace, monospace);
      font-size: 12px;
      font-weight: 600;
      color: var(--text-dim);
      box-shadow: 0 1px 0 var(--border);
      pointer-events: none;
      transition: opacity 0.15s;
    }
    .search-wrap:focus-within .search-kbd { opacity: 0; }

    /* ── Collapsible "More filters" section ── */
    .filter-grid-wrap { margin-bottom: 14px; }
    .filter-grid-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      margin-bottom: 0;
      background: transparent;
      border: none;
      border-radius: var(--radius);
      color: var(--text-dim);
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      cursor: pointer;
      transition: color 0.15s, background 0.15s;
    }
    .filter-grid-toggle:hover { color: var(--text-bright); background: var(--bg); }
    .filter-grid-chevron { transition: transform 0.2s ease; color: inherit; }
    .filter-grid-toggle[aria-expanded="true"] .filter-grid-chevron { transform: rotate(90deg); }
    .filter-grid-toggle-count {
      display: none;
      padding: 1px 8px;
      background: var(--accent-dim);
      border-radius: 10px;
      color: var(--accent);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0;
      text-transform: none;
    }
    .filter-grid-toggle-count.visible { display: inline-block; }
    .filter-grid-inner {
      overflow: hidden;
      transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.2s ease;
      max-height: 0;
      opacity: 0;
      margin-top: 0;
    }
    .filter-grid-inner.open {
      max-height: 600px;
      opacity: 1;
      margin-top: 10px;
    }

    .filter-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
    }
    .filter-grid-span-2 { grid-column: span 2; }
    .filter-grid-span-4 { grid-column: 1 / -1; }
    .filter-grid label {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
    }
    .filter-grid input, .filter-grid select {
      padding: 9px 12px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-family: var(--font-body);
      font-size: 15px;
      transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
    }
    /* Custom chevron for <select> — Safari otherwise draws the chunky native
       macOS up/down arrow widget even with appearance: none suppressed on
       other engines. */
    .filter-grid select {
      padding-right: 32px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 12px 12px;
    }
    /* Safari renders type="date" with stacked spinner controls by default.
       Neutralize the inner widgets so the field matches the other inputs. */
    .filter-grid input[type="date"]::-webkit-date-and-time-value { text-align: left; }
    .filter-grid input[type="date"]::-webkit-calendar-picker-indicator {
      opacity: 0.6;
      cursor: pointer;
    }
    .filter-grid input[type="date"]::-webkit-inner-spin-button,
    .filter-grid input[type="date"]::-webkit-clear-button { display: none; }
    .filter-grid input:hover, .filter-grid select:hover { background-color: var(--bg-input); }
    .filter-grid input::placeholder { color: #C0C5CC; font-style: italic; }
    .filter-grid input:focus, .filter-grid select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
    .filter-grid input.has-value, .filter-grid select.has-value {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px var(--accent-dim);
    }
    @keyframes filter-pulse {
      0% { box-shadow: 0 0 0 2px var(--accent-dim); }
      40% { box-shadow: 0 0 0 5px rgba(45,63,134,0.25); }
      100% { box-shadow: 0 0 0 2px var(--accent-dim); }
    }
    .filter-pulse { animation: filter-pulse 0.5s ease-out; }
    .filter-grid select { cursor: pointer; }
    .filter-grid select option { background: var(--bg-raised); }

    /* Pill multi-select input (Product Code / Panel / Regulation Number) */
    .pill-input {
      position: relative;
      display: block;
    }
    .pill-input-field {
      min-height: 40px;
      padding: 4px 6px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      align-items: center;
      cursor: text;
      transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    }
    .pill-input-field:hover { background: var(--bg-input); }
    .pill-input-field:focus-within {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-dim);
      background: var(--bg);
    }
    .pill-input:has(input.has-value) .pill-input-field {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px var(--accent-dim);
    }
    .pill-input-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 4px 3px 9px;
      background: var(--accent-dim);
      color: var(--accent);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      font-family: var(--font-body);
      line-height: 1.2;
    }
    .pill-input-pill-label { white-space: nowrap; }
    .pill-input-x {
      all: unset;
      cursor: pointer;
      width: 18px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      border-radius: 50%;
      color: var(--accent);
      font-size: 16px;
      font-weight: 500;
      opacity: 0.7;
      transition: background 0.12s, opacity 0.12s;
    }
    .pill-input-x:hover {
      background: rgba(45,63,134,0.15);
      opacity: 1;
    }
    .pill-input-inner {
      flex: 1 1 80px;
      min-width: 80px;
      border: none !important;
      background: transparent !important;
      padding: 4px 4px !important;
      box-shadow: none !important;
      outline: none !important;
      color: var(--text);
      font-family: var(--font-body);
      font-size: 15px;
    }
    .pill-input-inner::placeholder { color: #C0C5CC; font-style: italic; }
    .pill-input-inner:focus { outline: none !important; box-shadow: none !important; }
    .pill-input-dropdown {
      /* Fixed so it escapes the "More filters" .filter-grid-inner overflow
         clip; left/top/width are set in pill-input.js each time the
         dropdown opens, reflecting the field's current viewport rect. */
      position: fixed;
      max-height: 280px;
      overflow-y: auto;
      background: var(--bg-raised);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
      z-index: 1000;
      padding: 4px;
    }
    .pill-input-option {
      display: flex;
      gap: 8px;
      align-items: baseline;
      padding: 7px 10px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      color: var(--text);
    }
    .pill-input-option:hover,
    .pill-input-option.active {
      background: var(--accent-dim);
    }
    .pill-input-option-value {
      font-weight: 600;
      color: var(--accent);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .pill-input-option-label {
      color: var(--text-muted);
      font-size: 13px;
      flex: 1 1 auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .pill-input-option-sub {
      color: var(--text-muted);
      font-size: 12px;
      opacity: 0.7;
      flex-shrink: 0;
    }
    .pill-input-more {
      padding: 8px 10px 6px;
      margin-top: 2px;
      border-top: 1px solid var(--border);
      font-size: 12px;
      color: var(--text-muted);
      font-style: italic;
      text-align: center;
    }

    .filter-divider {
      height: 1px;
      background: var(--border);
      margin: 4px 0 14px;
    }

    .checkbox-row {
      display: flex;
      flex-wrap: wrap;
      gap: 28px;
      margin-bottom: 14px;
      align-items: center;
    }
    .cb-group { display: flex; flex-wrap: wrap; gap: 6px; }
    .cb-toggle {
      display: flex; align-items: center; gap: 7px;
      padding: 6px 12px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 20px;
      cursor: pointer;
      font-size: 14px;
      line-height: 1.2;
      font-weight: 500;
      color: var(--text-dim);
      transition: all 0.2s;
      white-space: nowrap;
      user-select: none;
    }
    .cb-toggle:hover { border-color: var(--text-dim); color: var(--text); }
    .cb-toggle input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
    .cb-toggle.active {
      background: var(--accent-dim);
      border-color: var(--accent);
      color: var(--accent);
    }
    .cb-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--text-dim);
      transition: background 0.2s;
    }
    .cb-toggle.active .cb-dot { background: var(--accent); }

    /* Global action bar below the query tree.  Rendered as its own card so
       the row of controls doesn't sit on the surrounding gray gutter — pairs
       with the filter panels above for visual continuity. */
    .filter-actions {
      display: flex;
      align-items: stretch;
      flex-wrap: wrap;
      gap: 10px;
      padding: 14px 20px;
      margin-top: 8px;
      background: var(--bg-raised);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
    }
    .filter-actions > .btn,
    .filter-actions > .alert-create-btn,
    .filter-actions > .sort-pill {
      min-height: 34px;
      box-sizing: border-box;
    }
    /* Result summary sentences rendered in the results bar below the
       filter-actions row. Emit two spans (exact + fuzzy) as siblings so
       the sentence wraps naturally on narrow viewports. `inline` (not
       `inline-flex`) is deliberate — inter-word whitespace in the HTML
       template needs to render between the inline <strong>/<span>
       children. */
    .search-summary-exact,
    .search-summary-fuzzy {
      display: none;
      font-size: 18px;
      color: var(--text-dim);
      line-height: 1.5;
    }
    .search-summary-exact.is-active,
    .search-summary-fuzzy.is-active { display: inline; }
    /* Inline wrapper that hosts the summary + timing spans inside #globalActions
       so they sit on the same row as Show chart / Share / Create Alert. */
    .results-summary-inline {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px 12px;
    }
    .search-summary-exact strong,
    .search-summary-fuzzy strong { color: var(--text-bright); font-weight: 700; }
    .search-summary-fuzzy .fuzzy-label { color: var(--accent); }
    .results-tip {
      position: relative;
      text-decoration: underline dotted;
      text-underline-offset: 3px;
      cursor: help;
      outline: none;
    }
    .results-tip:hover::after,
    .results-tip:focus-visible::after {
      content: attr(data-tip);
      position: absolute;
      bottom: calc(100% + 10px);
      left: 0;
      background: var(--text-bright);
      color: #fff;
      font-weight: 400;
      font-size: 12.5px;
      line-height: 1.5;
      letter-spacing: 0.1px;
      padding: 10px 12px;
      border-radius: 6px;
      width: max-content;
      max-width: 340px;
      white-space: normal;
      text-align: left;
      text-decoration: none;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
      z-index: 1000;
      pointer-events: none;
    }
    .results-tip:hover::before,
    .results-tip:focus-visible::before {
      content: "";
      position: absolute;
      bottom: calc(100% + 4px);
      left: 16px;
      border: 6px solid transparent;
      border-top-color: var(--text-bright);
      z-index: 1000;
      pointer-events: none;
    }
    .search-summary-timing {
      font-variant-numeric: tabular-nums;
      color: var(--text-dim);
      margin: 0 2px;
    }
    .search-summary-sort-label {
      color: var(--text-bright);
      font-weight: 600;
    }
    /* Sort pill disabled state — used when there's ≤ 1 exact result,
       since a single row has nothing to sort. */
    .sort-pill.is-disabled {
      opacity: 0.5;
      pointer-events: none;
    }
    .sort-pill.is-disabled .sort-pill-select,
    .sort-pill.is-disabled .sort-dir-btn { cursor: not-allowed; }
    .filter-actions > .btn,
    .filter-actions > .alert-create-btn {
      display: inline-flex;
      align-items: center;
    }
    .sort-pill {
      display: inline-flex;
      align-items: stretch;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 999px;
      overflow: hidden;
      transition: border-color 0.15s, background 0.15s;
    }
    .sort-pill:hover { border-color: var(--text-dim); }
    .sort-pill:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
    .sort-pill-caption {
      display: inline-flex;
      align-items: center;
      padding: 0 4px 0 14px;
      color: var(--text-dim);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      user-select: none;
    }
    .sort-pill-select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding: 6px 28px 6px 8px;
      background: transparent
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235E5E5E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")
        no-repeat right 8px center;
      border: none;
      color: var(--text-bright);
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }
    .sort-pill-select:focus { outline: none; }
    .sort-pill-select option { background: var(--bg-raised); font-weight: 500; }
    .sort-dir-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 10px;
      border: none;
      border-left: 1px solid var(--border);
      background: transparent;
      color: var(--text-dim);
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    .sort-dir-label { line-height: 1; }
    .sort-dir-btn:hover { background: var(--bg-input); color: var(--text-bright); }
    .sort-dir-icon { transition: transform 0.2s ease; }
    .sort-dir-btn[data-dir="asc"] .sort-dir-icon { transform: rotate(180deg); }

    .date-range {
      display: inline-flex;
      align-items: stretch;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .date-range:hover { border-color: var(--text-dim); }
    .date-range:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
    .date-range-side {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex: 1;
      padding: 4px 10px;
    }
    .date-range-label {
      color: var(--text-dim);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      user-select: none;
    }
    .date-range input[type="date"] {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding: 5px 0;
      background: transparent;
      border: none;
      color: var(--text);
      font-family: var(--font-body);
      font-size: 14px;
      min-width: 0;
      flex: 1;
    }
    .date-range input[type="date"]:focus { outline: none; }
    .date-range input[type="date"]::-webkit-calendar-picker-indicator {
      opacity: 0.5;
      cursor: pointer;
    }
    .date-range input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 0.9; }
    .date-clear-btn {
      flex: 0 0 auto;
      background: transparent;
      border: none;
      color: var(--text-dim);
      font-size: 16px;
      line-height: 1;
      padding: 0 4px;
      margin-left: 2px;
      cursor: pointer;
      opacity: 0.5;
      transition: opacity 0.15s, color 0.15s;
    }
    .date-range-side:hover .date-clear-btn,
    .date-range-side:focus-within .date-clear-btn { opacity: 0.85; }
    .date-clear-btn:hover { color: var(--accent); opacity: 1; }
    .date-range-sep {
      display: inline-flex;
      align-items: center;
      padding: 0 4px;
      color: var(--text-dim);
      font-size: 14px;
      user-select: none;
    }
    .filter-grid label:has(.date-range) > .date-range { margin-top: 0; }

    .btn {
      padding: 7px 18px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg-input);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
      letter-spacing: 0.02em;
    }
    .btn:hover { border-color: var(--text-dim); color: var(--text-bright); }
    .btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .btn-primary {
      background: var(--accent);
      border-color: var(--accent);
      color: #FFFFFF;
    }
    .btn-primary:hover { background: #E85036; border-color: #E85036; color: #FFFFFF; }
    .btn-danger {
      background: var(--red);
      border-color: var(--red);
      color: #FFFFFF;
    }
    .btn-danger:hover { background: #c93b22; border-color: #c93b22; color: #FFFFFF; }
    .btn-search {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .btn-search svg { stroke: currentColor; }

    /* ── Results Header ── */
    .results-bar {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      margin-bottom: 10px;
      padding: 14px 20px;
      border-bottom: 1px solid var(--border);
      background: var(--bg-raised);
      flex-shrink: 0;
    }
    .results-bar h2 {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 300;
      color: var(--text-bright);
      letter-spacing: -0.02em;
    }
    .results-bar h2 strong {
      font-weight: 700;
      color: var(--accent);
      font-variant-numeric: tabular-nums;
    }
    .results-bar .meta {
      font-size: 14px;
      color: var(--text-dim);
      font-variant-numeric: tabular-nums;
    }

    /* ── Result Cards ── */
    .card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-left: 3px solid var(--border);
      border-radius: var(--radius);
      margin-bottom: 8px;
      overflow: hidden;
      transition: all 0.2s ease;
      animation: cardIn 0.3s ease both;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .card:hover { border-left-color: var(--accent); background: var(--bg-card-hover); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

    @keyframes cardIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .card-header {
      padding: 14px 16px 10px;
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      gap: 6px 14px;
      align-items: baseline;
      cursor: pointer;
    }
    .card-id {
      font-family: var(--font-mono);
      font-weight: 500;
      font-size: 15px;
      color: var(--accent);
    }
    .card-name {
      font-weight: 600;
      font-size: 15.5px;
      color: var(--text-bright);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .card-applicant {
      font-size: 14px;
      color: var(--text-dim);
      white-space: nowrap;
    }
    .card-date {
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--text-dim);
      white-space: nowrap;
    }
    .card-date .days-ago { color: var(--slate); }

    .card-meta {
      padding: 0 16px 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      align-items: center;
    }
    .btn-fda {
      margin-left: auto;
      padding: 2px 10px;
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: 0.03em;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text-dim);
      text-transform: uppercase;
      transition: all 0.15s;
    }
    .btn-fda:hover { color: #FFFFFF; background: var(--accent); border-color: var(--accent); }
    .pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 9px;
      border-radius: var(--radius-sm);
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    .pill-on {
      background: var(--green-bg);
      color: var(--green);
      border: 1px solid var(--green-border);
    }
    .pill-off {
      background: transparent;
      color: var(--slate);
      border: 1px solid var(--border);
    }
    .pill-info {
      background: var(--blue-bg);
      color: var(--blue);
      border: 1px solid var(--blue-border);
    }
    .pill-semantic {
      background: rgba(79,107,197,0.1);
      color: #4f6bc5;
      border: 1px solid rgba(79,107,197,0.25);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .pill-match {
      background: rgba(22,163,74,0.08);
      color: var(--green);
      border: 1px solid var(--green-border);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.02em;
    }
    .fts-score {
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--text-dim);
      margin-right: 6px;
    }
    .pill-type {
      background: var(--amber-bg);
      color: var(--accent);
      border: 1px solid var(--amber-border);
    }
    .pill-pc {
      background: transparent;
      color: var(--text-dim);
      border: 1px solid var(--border);
      font-family: var(--font-mono);
      font-size: 12px;
      cursor: pointer;
    }
    .pill-pc:hover {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }
    .rt-pc.nav-highlight > .rt-pc-row {
      background: rgba(232, 80, 54, 0.15);
      border-radius: 4px;
      transition: background 0.3s ease;
    }

    .card-expand {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease, padding 0.35s ease;
      padding: 0 16px;
    }
    .card-expand.open {
      max-height: 2000px;
      padding: 0 16px 14px;
    }
    .card-expand h4 {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin: 10px 0 4px;
      padding-bottom: 3px;
      border-bottom: 1px solid var(--border);
    }
    .card-expand p {
      font-size: 15px;
      line-height: 1.65;
      color: var(--text);
    }
    .card-expand .detail-btn { margin-top: 12px; }

    .match-context {
      background: var(--bg-card);
      border: 1px solid var(--accent);
      border-left: 3px solid var(--accent);
      border-radius: 6px;
      padding: 10px 14px;
      margin: 8px 0 12px;
    }
    .match-context-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 4px;
    }
    .match-context-text {
      font-size: 14.5px;
      line-height: 1.6;
      color: var(--text);
      white-space: pre-wrap;
      word-break: break-word;
    }
    .match-context-text mark {
      background: rgba(79, 107, 197, 0.18);
      color: var(--accent);
      font-weight: 600;
      padding: 0 2px;
      border-radius: 2px;
    }

    .predicate-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
    .predicate-chip {
      font-family: var(--font-mono);
      font-size: 13px;
      padding: 2px 8px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 3px;
      color: var(--text-dim);
    }

    /* ── Pagination ── */
    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 16px;
      padding: 24px 0;
    }
    .page-info {
      font-family: var(--font-mono);
      font-size: 14px;
      color: var(--text-dim);
    }

    /* ── Modal ── */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      backdrop-filter: blur(4px);
      z-index: 100;
      overflow-y: auto;
      padding: 40px 20px;
    }
    .modal-overlay.open { display: block; }
    .modal {
      background: var(--bg-raised);
      border: 1px solid var(--border);
      max-width: 960px;
      margin: 0 auto;
      border-radius: var(--radius-lg);
      padding: 28px;
      position: relative;
      animation: modalIn 0.25s ease;
    }
    @keyframes modalIn {
      from { opacity: 0; transform: translateY(12px) scale(0.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .modal-close {
      position: absolute;
      top: 14px; right: 18px;
      font-size: 20px;
      cursor: pointer;
      background: none;
      border: none;
      color: var(--text-dim);
      transition: color 0.15s;
      width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 4px;
    }
    .modal-close:hover { color: var(--text-bright); background: #F6F6F6; }
    .modal h2 {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 500;
      color: var(--text-bright);
      margin-bottom: 16px;
    }
    .modal h2 .source-tag {
      font-family: var(--font-mono);
      font-size: 14px;
      color: var(--accent);
      background: var(--accent-dim);
      padding: 2px 8px;
      border-radius: 3px;
      margin-left: 8px;
      vertical-align: middle;
    }
    .modal-section { margin-bottom: 20px; }
    .modal-section h3 {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 8px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--border);
    }
    .modal-section pre {
      background: var(--bg-input);
      border: 1px solid var(--border);
      padding: 14px;
      border-radius: var(--radius);
      font-family: var(--font-mono);
      font-size: 14px;
      color: var(--text);
      overflow-x: auto;
      white-space: pre-wrap;
      word-break: break-word;
      max-height: 400px;
      overflow-y: auto;
      line-height: 1.6;
    }
    .modal-section table { width: 100%; border-collapse: collapse; font-size: 15px; }
    .modal-section td, .modal-section th {
      padding: 6px 10px;
      border-bottom: 1px solid var(--border);
      text-align: left;
    }
    .modal-section th {
      color: var(--text-dim);
      font-weight: 500;
      font-size: 14px;
      width: 180px;
      white-space: nowrap;
    }
    .modal-section td { color: var(--text); word-break: break-word; }

    .loading {
      text-align: center;
      padding: 48px;
      color: var(--text-dim);
      font-family: var(--font-display);
      font-style: italic;
    }
    .loading::after {
      content: '';
      display: inline-block;
      width: 16px; height: 16px;
      border: 2px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      margin-left: 10px;
      vertical-align: middle;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .dt-loading-overlay {
      position: absolute;
      inset: 0;
      background: var(--bg);
      z-index: 5;
      pointer-events: none;
      transition: opacity 0.15s ease-out;
    }
    .dt-loading-overlay--hidden {
      opacity: 0;
      visibility: hidden;
    }
    .dt-spinner {
      position: sticky;
      top: 40vh;
      display: block;
      width: 32px;
      height: 32px;
      margin: 0 auto;
      border: 3px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }

    .timing-badge {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      color: var(--text-dim);
      background: rgba(0,0,0,0.04);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 1px 6px;
      margin-left: 6px;
      vertical-align: middle;
    }
    .timing-semantic {
      border-color: rgba(79,107,197,0.3);
      color: #4f6bc5;
    }

    .semantic-loading {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 18px;
      color: var(--text-dim);
      font-family: var(--font-body);
      font-size: 0.85rem;
      border: 1px dashed var(--border);
      border-radius: var(--radius);
      margin-top: 8px;
    }
    .semantic-spinner {
      display: inline-block;
      width: 14px; height: 14px;
      border: 2px solid var(--border);
      border-top-color: #4f6bc5;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      flex-shrink: 0;
    }

    .error-msg {
      color: var(--red);
      padding: 14px 18px;
      background: var(--red-bg);
      border: 1px solid rgba(232,80,54,0.2);
      border-radius: var(--radius);
      margin: 12px 0;
      font-size: 15px;
    }

    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-dim);
    }
    .empty-state svg { margin-bottom: 16px; opacity: 0.3; }
    .empty-state p { font-family: var(--font-display); font-style: italic; font-size: 15px; }

    /* ── Alerts Page ── */
    .alerts-page { max-width: 960px; margin: 0 auto; padding: 20px 28px 60px; }
    .alerts-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
    .alerts-header h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-bright); margin-bottom: 4px; }
    .alerts-header .alerts-subtitle { color: var(--text-dim); font-size: 15px; }
    .alerts-sort { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-dim); }
    .alerts-sort select { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 15px; font-family: var(--font-body); }
    .alerts-sort button { padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); font-size: 15px; cursor: pointer; font-family: var(--font-body); }
    .alert-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 20px 24px;
      margin-bottom: 16px;
      transition: border-color 0.15s;
    }
    .alert-card:hover { border-color: var(--border-focus); }
    .alert-card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
    .alert-card-name { font-size: 16px; font-weight: 600; color: var(--accent); text-decoration: none; }
    .alert-card-name:hover { text-decoration: underline; }
    .alert-card-actions { display: flex; align-items: center; gap: 8px; }
    .alert-card-meta { display: flex; gap: 32px; flex-wrap: wrap; font-size: 15px; color: var(--text-dim); margin-bottom: 8px; }
    .alert-card-meta dt { font-weight: 600; color: var(--text-dim); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
    .alert-card-meta dd { color: var(--text); }
    .alert-pill { padding: 3px 10px; border-radius: 12px; font-size: 13px; font-weight: 600; }
    .alert-pill-active { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
    .alert-pill-inactive { background: var(--bg); color: var(--text-dim); border: 1px solid var(--border); }
    .alert-pill-freq { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); }
    .alert-action-btn {
      background: none; border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 8px;
      cursor: pointer; color: var(--text-dim); font-size: 15px; transition: all 0.15s;
    }
    .alert-action-btn:hover { border-color: var(--accent); color: var(--accent); }
    .alert-action-btn.delete:hover { border-color: var(--red); color: var(--red); }
    .alert-toggle { cursor: pointer; }
    .alerts-empty { text-align: center; padding: 60px 20px; color: var(--text-dim); }
    .alerts-empty p { font-size: 15px; margin-bottom: 16px; }
    .alert-filters-table { width: 100%; font-size: 15px; border-collapse: collapse; background: var(--bg); border-radius: var(--radius); overflow: hidden; }
    .alert-filters-table td { padding: 8px 14px; border-bottom: 1px solid var(--border); }
    .alert-filters-table td:first-child { font-weight: 600; color: var(--text-dim); width: 140px; }
    .alert-create-btn {
      padding: 7px 18px; border: 1px solid var(--accent); border-radius: var(--radius); font-size: 14px; font-weight: 600;
      font-family: var(--font-body); cursor: pointer; background: var(--accent); color: #fff; transition: background 0.15s;
      letter-spacing: 0.02em;
    }
    .alert-create-btn:hover { background: #1e2d6b; }
    .alert-create-btn:disabled { opacity: 0.5; cursor: not-allowed; }

    /* ── Share Button ── */
    .share-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    /* ── Rate Limit Badge ── */
    .rate-limit-badge {
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--text-dim);
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 2px 8px;
      white-space: nowrap;
    }
    .rate-limit-badge.rate-limit-low {
      color: var(--red);
      border-color: var(--red);
      background: rgba(232, 80, 54, 0.06);
    }

    /* ── Rate Limit Modal ── */
    .rl-modal-content {
      text-align: center;
      padding: 24px;
    }
    .rl-modal-content h2 {
      color: var(--text-bright);
      margin-bottom: 12px;
      font-size: 18px;
    }
    .rl-modal-content p {
      color: var(--text);
      font-size: 16px;
      line-height: 1.6;
      margin-bottom: 12px;
    }
    .rl-modal-content .rl-cta {
      display: inline-block;
      padding: 10px 24px;
      border-radius: var(--radius);
      font-size: 16px;
      font-weight: 600;
      font-family: var(--font-body);
      cursor: pointer;
      border: none;
      margin: 8px 4px;
      transition: background 0.15s;
    }
    .rl-modal-content .rl-cta-primary {
      background: var(--accent);
      color: #fff;
    }
    .rl-modal-content .rl-cta-primary:hover { background: #1e2d66; }
    .rl-modal-content .rl-cta-secondary {
      background: var(--bg);
      color: var(--accent);
      border: 1px solid var(--border);
    }
    .rl-modal-content .rl-cta-secondary:hover { border-color: var(--accent); }
    .rl-referral-link {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 8px 12px;
      margin: 12px auto;
      max-width: 400px;
    }
    .rl-referral-link input {
      flex: 1;
      border: none;
      background: transparent;
      font-family: var(--font-mono);
      font-size: 14px;
      color: var(--text);
      outline: none;
    }
    .rl-referral-link button {
      padding: 4px 10px;
      font-size: 13px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg-raised);
      cursor: pointer;
      font-family: var(--font-body);
    }
    .earn-rewards {
      display: flex;
      justify-content: center;
      gap: 24px;
      margin: 16px 0 4px;
    }
    .earn-reward-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 18px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      min-width: 96px;
    }
    .earn-reward-value {
      font-family: var(--font-mono);
      font-size: 20px;
      font-weight: 700;
      color: var(--accent);
    }
    .earn-reward-label {
      font-size: 12px;
      color: var(--text-dim);
      margin-top: 2px;
    }
    .earn-share-row {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin: 12px 0 8px;
    }
    .earn-share-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--bg-raised);
      color: var(--text);
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .earn-share-btn:hover {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }
    .earn-stats {
      font-size: 13px !important;
      color: var(--text-dim) !important;
      margin-top: 8px !important;
    }
    .rl-footnote {
      font-size: 12px !important;
      color: var(--text-dim) !important;
      margin-top: 12px !important;
    }
    .rl-footnote {
      font-size: 14px;
      color: var(--text-dim);
      margin-top: 16px;
    }

    /* ── Auth Modal ── */
    .auth-modal {
      background: var(--bg-raised);
      border: 1px solid var(--border);
      max-width: 440px;
      margin: 80px auto 0;
      border-radius: var(--radius-lg);
      padding: 32px;
      position: relative;
      animation: modalIn 0.25s ease;
    }
    .auth-modal h2 {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 600;
      color: var(--text-bright);
      margin-bottom: 4px;
    }
    .auth-modal .auth-subtitle {
      color: var(--text-dim);
      font-size: 15px;
      margin-bottom: 24px;
    }
    .auth-tabs {
      display: flex;
      gap: 0;
      margin-bottom: 24px;
      border-bottom: 2px solid var(--border);
    }
    .auth-tab {
      flex: 1;
      padding: 10px 0;
      text-align: center;
      font-size: 15px;
      font-weight: 600;
      color: var(--text-dim);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      transition: all 0.15s;
      background: none;
      border-top: none;
      border-left: none;
      border-right: none;
      font-family: var(--font-body);
    }
    .auth-tab:hover { color: var(--text-bright); }
    .auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
    .auth-step { display: none; }
    .auth-step.active { display: block; }
    .auth-field { margin-bottom: 16px; }
    .auth-field label {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-dim);
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .auth-field input[type="text"],
    .auth-field input[type="email"] {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-size: 16px;
      font-family: var(--font-body);
      background: var(--bg-input);
      color: var(--text);
      transition: border-color 0.15s;
    }
    .auth-field input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-dim);
    }
    .auth-checkbox-group { margin-bottom: 20px; }
    .auth-checkbox-group legend {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-dim);
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .auth-checkbox-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 8px 0;
    }
    .auth-checkbox-item input[type="checkbox"] {
      margin-top: 2px;
      accent-color: var(--accent);
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }
    .auth-checkbox-item span {
      font-size: 15px;
      color: var(--text);
      line-height: 1.4;
    }
    .auth-btn {
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: var(--radius);
      font-size: 16px;
      font-weight: 600;
      font-family: var(--font-body);
      cursor: pointer;
      transition: all 0.15s;
    }
    .auth-btn-primary {
      background: var(--accent);
      color: #fff;
    }
    .auth-btn-primary:hover { background: #1e2d6b; }
    .auth-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
    .auth-otp-inputs {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin: 24px 0;
    }
    .auth-otp-inputs input {
      width: 48px;
      height: 56px;
      text-align: center;
      font-size: 24px;
      font-weight: 600;
      font-family: var(--font-mono);
      border: 2px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg-input);
      color: var(--text-bright);
      transition: border-color 0.15s;
    }
    .auth-otp-inputs input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-dim);
    }
    .auth-error {
      color: var(--red);
      font-size: 15px;
      margin-top: 8px;
      display: none;
    }
    .auth-error.visible { display: block; }
    .auth-resend {
      text-align: center;
      margin-top: 12px;
      font-size: 15px;
      color: var(--text-dim);
    }
    .auth-resend a {
      color: var(--accent);
      cursor: pointer;
      text-decoration: none;
      font-weight: 600;
    }
    .auth-resend a:hover { text-decoration: underline; }
    .auth-resend a.disabled { opacity: 0.4; pointer-events: none; }
    .auth-success {
      text-align: center;
      padding: 24px 0;
    }
    .auth-success h3 {
      font-size: 20px;
      color: var(--text-bright);
      margin-bottom: 8px;
    }
    .auth-success p {
      color: var(--text-dim);
      font-size: 16px;
    }
    .auth-user-menu {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .auth-user-menu .auth-alerts-link {
      font-size: 16px;
      font-weight: 700;
      color: var(--accent);
      text-decoration: none;
      cursor: pointer;
    }
    .auth-user-menu .auth-alerts-link:hover { text-decoration: none; border-bottom-color: #E85036; }
    .auth-user-dropdown {
      position: relative;
      cursor: pointer;
      font-size: 16px;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .auth-user-dropdown:hover { color: var(--text-bright); }
    .auth-dropdown-menu {
      display: none;
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 8px;
      background: var(--bg-raised);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      min-width: 140px;
      z-index: 200;
    }
    .auth-dropdown-menu.open { display: block; }
    .header nav .auth-dropdown-menu a,
    .auth-dropdown-menu a {
      display: block;
      padding: 10px 16px;
      font-size: 15px;
      color: var(--text);
      text-decoration: none;
      text-transform: none;
      letter-spacing: normal;
      border-bottom: none;
      transition: background 0.1s;
    }
    .auth-dropdown-menu a:hover { background: var(--bg); border-bottom: none; }

    /* ── Deep Research ── */
    .dr-bar {
      display: none;
      background: linear-gradient(90deg, var(--accent-dim), rgba(45,63,134,0.04));
      border: 1px solid var(--blue-border);
      border-radius: var(--radius);
      padding: 10px 18px;
      margin-bottom: 16px;
      cursor: pointer;
      transition: all 0.2s;
      font-size: 15px;
      font-weight: 500;
      color: var(--accent);
    }
    .dr-bar:hover { background: var(--accent-dim); border-color: var(--accent); }
    .dr-bar.visible { display: block; }

    .dr-panel {
      display: none;
      background: var(--bg-raised);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 20px;
      margin-bottom: 16px;
      animation: cardIn 0.25s ease;
    }
    .dr-panel.visible { display: block; }

    .dr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
    .dr-chip {
      padding: 4px 12px;
      border: 1px solid var(--border);
      border-radius: 20px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-dim);
      cursor: pointer;
      transition: all 0.15s;
      background: var(--bg-input);
    }
    .dr-chip:hover { border-color: var(--accent); color: var(--accent); }

    .dr-textarea {
      width: 100%;
      min-height: 72px;
      padding: 10px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-family: var(--font-body);
      font-size: 15px;
      color: var(--text);
      background: var(--bg-input);
      resize: vertical;
      transition: border-color 0.2s;
      margin-bottom: 12px;
    }
    .dr-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

    .dr-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .dr-model-select-wrap {
      position: relative;
      min-width: 300px;
    }
    .dr-model-input {
      width: 100%;
      padding: 6px 28px 6px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-family: var(--font-body);
      font-size: 14px;
      color: var(--text);
      background: var(--bg-input);
      cursor: pointer;
      box-sizing: border-box;
    }
    .dr-model-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
    .dr-model-input::placeholder { color: var(--text-dim); }
    .dr-model-chevron {
      position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
      pointer-events: none; color: var(--text-dim); font-size: 12px;
    }
    .dr-model-dropdown {
      display: none;
      position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
      max-height: 260px; overflow-y: auto;
      border: 1px solid var(--border); border-top: none;
      border-radius: 0 0 var(--radius) var(--radius);
      background: var(--bg-input);
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .dr-model-dropdown.open { display: block; }
    .dr-model-option {
      padding: 6px 10px;
      font-size: 14px;
      color: var(--text);
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .dr-model-option:hover, .dr-model-option.highlighted { background: var(--accent-dim); }
    .dr-model-option.selected { font-weight: 600; }
    .dr-cost {
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--text-dim);
      margin-left: auto;
    }

    /* Two-column progress layout */
    .dr-progress {
      display: none;
      background: var(--bg-raised);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      margin-bottom: 16px;
      overflow: hidden;
    }
    .dr-progress.visible { display: block; }
    .dr-progress-bar {
      height: 4px;
      background: var(--border);
      position: relative;
    }
    .dr-progress-fill {
      height: 100%;
      background: var(--accent);
      transition: width 0.3s ease;
      width: 0%;
    }
    .dr-progress-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 18px;
      border-bottom: 1px solid var(--border);
      font-size: 14px;
      color: var(--text-dim);
    }
    .dr-progress-header .dr-eta { font-family: var(--font-mono); }
    .dr-columns {
      display: grid;
      grid-template-columns: 35% 65%;
      height: 520px;
    }
    .dr-left {
      border-right: 1px solid var(--border);
      overflow-y: auto;
    }
    .dr-right {
      padding: 16px 20px;
      overflow-y: auto;
    }
    .dr-item {
      padding: 8px 14px;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      transition: background 0.1s;
    }
    .dr-item:hover { background: var(--bg-card-hover); }
    .dr-item.selected { background: var(--accent-dim); border-left: 3px solid var(--accent); }
    .dr-item-id { font-family: var(--font-mono); font-weight: 600; color: var(--accent); min-width: 80px; }
    .dr-item-name { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dr-item-status { flex-shrink: 0; }
    .dr-spinner-sm {
      display: inline-block; width: 12px; height: 12px;
      border: 2px solid var(--border); border-top-color: var(--accent);
      border-radius: 50%; animation: spin 0.7s linear infinite;
    }
    .dr-check { color: var(--green); font-weight: bold; }
    .dr-fail { color: var(--red); font-weight: bold; }

    .dr-preview { font-size: 15px; line-height: 1.7; color: var(--text); word-break: break-word; overflow-wrap: break-word; }
    .dr-preview h1, .dr-preview h2, .dr-preview h3, .dr-preview h4 { margin: 1em 0 0.5em; color: var(--primary); }
    .dr-preview h1 { font-size: 1.4em; } .dr-preview h2 { font-size: 1.2em; } .dr-preview h3 { font-size: 1.1em; }
    .dr-preview p { margin: 0.5em 0; }
    .dr-preview ul, .dr-preview ol { margin: 0.5em 0; padding-left: 1.5em; }
    .dr-preview li { margin: 0.25em 0; }
    .dr-preview strong { font-weight: 600; }
    .dr-preview code { background: var(--bg); padding: 2px 5px; border-radius: 3px; font-size: 0.9em; }
    .dr-preview pre { background: var(--bg); padding: 12px; border-radius: 6px; overflow-x: auto; }
    .dr-preview blockquote { border-left: 3px solid var(--primary); margin: 0.5em 0; padding: 0.25em 1em; color: var(--text-dim); }
    .dr-preview-empty { color: var(--text-dim); font-style: italic; padding: 40px 0; text-align: center; }

    .dr-actions {
      display: flex; gap: 10px; padding: 12px 18px;
      border-top: 1px solid var(--border);
    }

    /* Report view */
    .dr-report {
      display: none;
      background: var(--bg-raised);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 24px;
      margin-bottom: 16px;
    }
    .dr-report.visible { display: block; }
    .dr-report h3 {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 500;
      color: var(--text-bright);
      margin-bottom: 12px;
    }
    .dr-report-stats {
      display: flex; flex-wrap: wrap; gap: 16px;
      margin-bottom: 16px; font-size: 14px; color: var(--text-dim);
    }
    .dr-report-stats strong { color: var(--text-bright); }
    .dr-synthesis {
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      margin: 16px 0;
      font-size: 15px;
      line-height: 1.7;
      color: var(--text);
      white-space: pre-wrap;
      word-break: break-word;
      max-height: 500px;
      overflow-y: auto;
    }
    .dr-result-table {
      width: 100%; border-collapse: collapse;
      font-size: 14px; margin-top: 12px;
    }
    .dr-result-table th, .dr-result-table td {
      padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left;
    }
    .dr-result-table th {
      color: var(--text-dim); font-weight: 600; font-size: 12px;
      text-transform: uppercase; letter-spacing: 0.04em;
    }
    .dr-result-table td { color: var(--text); }
    .dr-result-table .dr-resp-cell {
      max-width: 400px; overflow: hidden; text-overflow: ellipsis;
      white-space: nowrap; cursor: pointer; color: var(--accent);
    }
    .dr-result-table .dr-resp-cell:hover { text-decoration: underline; }
    .dr-result-table .dr-resp-expanded { white-space: pre-wrap; max-width: 600px; }

    /* ── Credit Badge ── */
    .credit-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 600;
      padding: 3px 10px 3px 8px;
      border-radius: 12px;
      background: var(--green-bg);
      color: var(--green);
      border: 1px solid var(--green-border);
      white-space: nowrap;
      cursor: pointer;
      transition: filter 0.15s, transform 0.1s;
      outline: none;
    }
    .credit-badge:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .credit-badge:active { transform: translateY(0); }
    .credit-badge:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
    .credit-badge.credit-low {
      background: var(--red-bg);
      color: var(--red);
      border-color: rgba(232,80,54,0.2);
    }
    .credit-coin {
      display: inline-block;
      width: 14px;
      height: 14px;
      background-color: currentColor;
      -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M21 6.375c0 2.692-4.03 4.875-9 4.875S3 9.067 3 6.375 7.03 1.5 12 1.5s9 2.183 9 4.875z'/><path d='M12 12.75c2.685 0 5.19-.586 7.078-1.609a8.283 8.283 0 001.897-1.384c.016.121.025.244.025.368C21 12.817 16.97 15 12 15s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.285 8.285 0 001.897 1.384C6.809 12.164 9.315 12.75 12 12.75z'/><path d='M12 16.5c2.685 0 5.19-.586 7.078-1.609a8.282 8.282 0 001.897-1.384c.016.121.025.244.025.368 0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.284 8.284 0 001.897 1.384C6.809 15.914 9.315 16.5 12 16.5z'/><path d='M12 20.25c2.685 0 5.19-.586 7.078-1.609a8.282 8.282 0 001.897-1.384c.016.121.025.244.025.368 0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.284 8.284 0 001.897 1.384C6.809 19.664 9.315 20.25 12 20.25z'/></svg>") center/contain no-repeat;
      mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M21 6.375c0 2.692-4.03 4.875-9 4.875S3 9.067 3 6.375 7.03 1.5 12 1.5s9 2.183 9 4.875z'/><path d='M12 12.75c2.685 0 5.19-.586 7.078-1.609a8.283 8.283 0 001.897-1.384c.016.121.025.244.025.368C21 12.817 16.97 15 12 15s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.285 8.285 0 001.897 1.384C6.809 12.164 9.315 12.75 12 12.75z'/><path d='M12 16.5c2.685 0 5.19-.586 7.078-1.609a8.282 8.282 0 001.897-1.384c.016.121.025.244.025.368 0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.284 8.284 0 001.897 1.384C6.809 15.914 9.315 16.5 12 16.5z'/><path d='M12 20.25c2.685 0 5.19-.586 7.078-1.609a8.282 8.282 0 001.897-1.384c.016.121.025.244.025.368 0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.284 8.284 0 001.897 1.384C6.809 19.664 9.315 20.25 12 20.25z'/></svg>") center/contain no-repeat;
      flex-shrink: 0;
      vertical-align: middle;
    }

    /* ── Credit badge reward flash + floating +N ── */
    .credit-badge.credit-reward {
      animation: credit-reward-pulse 1.8s ease-out 1;
    }
    @keyframes credit-reward-pulse {
      0%   { box-shadow: 0 0 0 0 rgba(22,163,74,0.55); }
      25%  { box-shadow: 0 0 0 10px rgba(22,163,74,0.28); transform: scale(1.08); }
      60%  { box-shadow: 0 0 0 14px rgba(22,163,74,0); transform: scale(1); }
      100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
    }
    .credit-reward-float {
      position: absolute;
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: 14px;
      color: var(--green);
      pointer-events: none;
      animation: credit-reward-float 1.8s ease-out forwards;
      white-space: nowrap;
    }
    @keyframes credit-reward-float {
      0%   { opacity: 0; transform: translate(-50%, 0); }
      15%  { opacity: 1; }
      100% { opacity: 0; transform: translate(-50%, -36px); }
    }

    /* ── Toast ── */
    .toast-container {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
      pointer-events: none;
    }
    .toast {
      background: #1f2937;
      color: #fff;
      padding: 10px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      box-shadow: 0 8px 24px rgba(0,0,0,0.18);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.18s ease-out, transform 0.18s ease-out;
    }
    .toast.toast-show {
      opacity: 1;
      transform: translateY(0);
    }
    .toast-success { background: #16a34a; }
    .toast-error   { background: #dc2626; }

    /* ── Credit cost on buttons ── */
    .credit-cost {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-weight: 600;
      margin-left: 6px;
      opacity: 0.9;
    }
    .credit-cost .credit-coin {
      width: 12px;
      height: 12px;
    }

    #agGridContainer .ag-cell {
      line-height: 1.4;
      padding-top: 8px;
      padding-bottom: 8px;
    }

    #agGridContainer {
      --ag-header-background-color: var(--accent);
      --ag-header-foreground-color: #fff;
      --ag-header-cell-hover-background-color: #3a4ea3;
      --ag-header-cell-moving-background-color: #3a4ea3;
      --ag-header-column-separator-color: rgba(255,255,255,0.2);
      --ag-header-column-resize-handle-color: rgba(255,255,255,0.3);
    }
    /* AG's default theme paints a 1px border on the root wrapper, which
       creates a hairline white crescent at the rounded corners of the
       solid-navy header (the header is inset by 1px and can't reach the
       curve). Drop the wrapper border so the header fills the rounded
       corners cleanly, then put the thin divider line back on the
       header's bottom edge where it belongs. */
    #agGridContainer .ag-root-wrapper {
      border: none;
      box-shadow: 0 0 0 1px rgba(24, 29, 31, 0.15);
    }
    #agGridContainer .ag-header {
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }
    #agGridContainer .ag-header-cell-text,
    #agGridContainer .ag-header-group-text,
    #agGridContainer .ag-header-icon {
      color: #fff;
    }
    #agGridContainer .ag-header .ag-icon {
      color: #fff;
    }
    #agGridContainer .ag-header-cell .ag-checkbox-input-wrapper {
      --ag-checkbox-background-color: transparent;
      --ag-checkbox-border-color: rgba(255,255,255,0.7);
      --ag-checkbox-checked-color: #fff;
      --ag-checkbox-unchecked-color: rgba(255,255,255,0.7);
    }

    /* ── Horizontal scroll affordances ── */
    .grid-scroll-wrap {
      position: relative;
    }
    .grid-scroll-wrap::before,
    .grid-scroll-wrap::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 48px;
      pointer-events: none;
      z-index: 10;
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    .grid-scroll-wrap::before {
      left: var(--pinned-width, 0px);
      background: linear-gradient(to right, rgba(45,63,134,0.12), transparent);
    }
    .grid-scroll-wrap::after {
      right: 0;
      background: linear-gradient(to left, rgba(45,63,134,0.12), transparent);
    }
    .grid-scroll-wrap.shadow-left::before { opacity: 1; }
    .grid-scroll-wrap.shadow-right::after { opacity: 1; }

    .grid-scroll-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 11;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: #fff;
      color: var(--accent);
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      transition: opacity 0.2s ease, background 0.15s ease;
      font-size: 18px;
      font-weight: 600;
      line-height: 1;
    }
    .grid-scroll-arrow:hover {
      background: var(--accent);
      color: #fff;
    }
    .grid-scroll-arrow.arrow-left { left: calc(var(--pinned-width, 0px) + 8px); }
    .grid-scroll-arrow.arrow-right { right: 8px; }
    .grid-scroll-wrap.shadow-left .arrow-left,
    .grid-scroll-wrap.shadow-right .arrow-right {
      display: flex;
    }

    /* Sticky Data Table header: fix-position the real ag-header */
    .ag-header-fixed {
      position: fixed !important;
      top: 0 !important;
      z-index: 100 !important;
      background: var(--accent) !important;
      color: #fff !important;
      border-bottom: 1px solid var(--border) !important;
      box-shadow: 0 2px 4px rgba(0,0,0,0.06) !important;
    }
    .header {
      transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .header.header-hidden {
      transform: translateY(-100%);
      opacity: 0;
      pointer-events: none;
    }

    /* AI Performance mini-table inside AG Grid cells */
    .ai-perf-mini {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      line-height: 1.4;
    }
    .ai-perf-mini th {
      text-align: left;
      padding: 2px 6px;
      font-weight: 600;
      font-size: 12px;
      color: var(--text-dim);
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }
    .ai-perf-mini td {
      padding: 3px 6px;
      border-bottom: 1px solid var(--border);
      vertical-align: top;
      white-space: normal !important;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    .ai-perf-mini tr:last-child td { border-bottom: none; }
    .ai-perf-name { font-weight: 600; color: var(--accent); }

    /* Device attributes pills inside AG Grid cells */
    .dt-attr-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      padding: 10px 0 4px;
    }

    /* Merged selection + source column: checkbox stacks with an EXACT/FUZZY
       pill so the first pinned column holds both pieces of metadata in ~68px
       instead of the 40+80 the split layout used. */
    .dt-select-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 8px 4px;
    }
    .dt-select-header {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
    .dt-check {
      --dt-check-size: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--dt-check-size);
      height: var(--dt-check-size);
      border: 1.5px solid #c7ced9;
      border-radius: 5px;
      background: #fff;
      cursor: pointer;
      user-select: none;
      transition: border-color 120ms ease, background-color 120ms ease,
        box-shadow 120ms ease, transform 80ms ease;
      box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
      outline: none;
    }
    .dt-check:hover {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(79, 107, 197, 0.12);
    }
    .dt-check:focus-visible {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(79, 107, 197, 0.28);
    }
    .dt-check:active { transform: scale(0.94); }
    .dt-check.dt-check--on,
    .dt-check.dt-check--mixed {
      background: var(--accent);
      border-color: var(--accent);
    }
    .dt-check-mark {
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      pointer-events: none;
    }
    .dt-source-pill {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.3px;
      line-height: 1.3;
    }
    .dt-source-pill--exact {
      background: #F0FDF4;
      color: #16a34a;
    }
    .dt-source-pill--fuzzy {
      background: #EEF2FF;
      color: #4f6bc5;
    }
    .dt-source-score {
      color: #4f6bc5;
      font-weight: 600;
      font-size: 13px;
      line-height: 1;
    }

    .site-footer {
      border-top: 1px solid var(--border);
      padding: 10px 24px;
      text-align: center;
      color: var(--text-dim);
      font-size: 12px;
      line-height: 1.5;
      background: var(--bg);
    }
    .site-footer p { margin: 0; }
    .site-footer a { color: var(--accent); text-decoration: none; }
    .site-footer a:hover { text-decoration: underline; }
    .site-footer .built-with { margin-top: 2px; }
    .site-footer .built-with a[aria-label="love"],
    .site-footer .built-with a[aria-label="love"]:hover { text-decoration: none; }

    /* ── Regulation Search tab ── */
    /* Visibility handled by the global .right-tab-content > div[.tab-active]
       rules; do not add #regSearchTab display rules that would fight them.

       Filter panel pins to the top of the tab's scroll container so the
       search bar / pills stay reachable while scrolling through long result
       columns.  The tab's scroll container starts BELOW the global header
       (which is `position: sticky` on the body), so `top: 0` here lands
       just below the header rather than under it.  z-index stays well below
       the header's 50 to avoid any compositing surprise. */
    /* Breathing room on the three open edges of the tab's scroll container.
       Padding-top lets the panel float off the global header when scrollTop
       = 0; once the user scrolls, the sticky panel covers the padding with
       its own background and pins flush to the top.  Horizontal 12px matches
       the gutter used by `.reg-search-results` below so the filter panel and
       the result columns share the same alignment. */
    #regSearchTab { padding: 16px 16px 0; }
    #regSearchTab .filter-panel {
      margin: 0 0 20px 0;
      /* Override .filter-panel { overflow: hidden } — inside #regSearchTab's
         flex-column scroll container, that combination collapses the panel
         to its border-box (2px) while the body lays out at full height
         underneath, hiding the search bar entirely.  Letting the panel size
         to its content keeps it visible and the global flex scroll still
         works on the result columns below. */
      overflow: visible;
      flex-shrink: 0;
    }
    /* The Regulation Search tab has no "More filters" toggle button — the
       full filter grid is always shown.  Override the default collapsed
       (max-height: 0, opacity: 0) state so the pills + scoped inputs render
       without needing a click. */
    #regSearchTab .filter-grid-inner {
      display: block;
      max-height: none;
      opacity: 1;
      margin-top: 12px;
      overflow: visible;
    }
    /* Fix the grid to a predictable 4-col layout so span-2 text inputs
       always halve the row cleanly.  Without this, `auto-fit minmax(180px,
       1fr)` on wide viewports expands to 6+ cols and the span-2 text inputs
       end up with an awkward half-empty row. */
    #regSearchTab .filter-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    #regSearchTab .filter-action-row {
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 14px 0 0 0;
    }
    #regSearchTab .rs-timing {
      font-size: 12px;
      color: var(--text-dim);
      margin-left: auto;
    }
    .reg-search-results {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      padding: 0 16px 24px;
    }
    .rs-column {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .rs-column-title {
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--text-dim);
      margin: 0 0 12px 0;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }
    .rs-column-count {
      font-weight: 400;
      color: var(--text-dim);
      margin-left: 6px;
    }
    .rs-column-body {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .rs-card {
      display: block;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 12px;
      text-decoration: none;
      color: inherit;
      transition: background 0.15s, border-color 0.15s;
    }
    .rs-card:hover {
      background: var(--bg-card-hover);
      border-color: var(--accent);
    }
    .rs-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
    }
    .rs-card-id {
      font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
      font-size: 13px;
      font-weight: 600;
      color: var(--accent);
    }
    /* Per-card provenance: EXACT (green) or relevance score + FUZZY (blue),
       mirroring the Data Table's search-source badge so the two views match. */
    .rs-source-wrap {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
      flex-shrink: 0;
      line-height: 1;
    }
    .rs-source-pill {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.3px;
      line-height: 1.3;
    }
    .rs-source-pill--exact { background: #F0FDF4; color: #16a34a; }
    .rs-source-pill--fuzzy { background: #EEF2FF; color: #4f6bc5; }
    .rs-source-score {
      color: #4f6bc5;
      font-weight: 600;
      font-size: 13px;
      line-height: 1;
    }
    .rs-card-name {
      font-size: 13px;
      font-weight: 500;
      margin-bottom: 4px;
    }
    .rs-card-body {
      font-size: 12px;
      color: var(--text-dim);
      line-height: 1.45;
    }
    .rs-card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 6px;
      font-size: 11px;
      color: var(--text-dim);
    }
    .rs-card-meta .rs-chip {
      padding: 2px 6px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 4px;
      font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
    }
    .rs-empty {
      font-size: 12px;
      color: var(--text-dim);
      padding: 24px 10px;
      text-align: center;
      font-style: italic;
    }
    .rs-loading {
      font-size: 12px;
      color: var(--text-dim);
      padding: 24px 10px;
      text-align: center;
    }
    @media (max-width: 1024px) {
      .reg-search-results { grid-template-columns: 1fr; }
    }
  </style>