:root {
      --bg: #07080c;
      --bg-elevated: #0b0d13;
      --surface: #0e1118;
      --surface2: #151a24;
      --surface3: #1b2230;
      --border: rgba(148, 163, 184, 0.10);
      --border2: rgba(148, 163, 184, 0.18);
      --text: #f1f3f8;
      --text2: #a8b0c3;
      --muted: #6b7489;
      --accent: #5b8aff;
      --accent2: #4475f0;
      --accent-soft: rgba(91, 138, 255, 0.14);
      --red: #ef4444;
      --yellow: #f59e0b;
      --green: #22c55e;
      --radius-sm: 8px;
      --radius: 12px;
      --radius-lg: 16px;
      --radius-full: 999px;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.24);
      --shadow: 0 8px 28px rgba(0,0,0,0.28);
      --shadow-lg: 0 20px 48px rgba(0,0,0,0.4);
      --header-h: 56px;
      --ease: cubic-bezier(0.4, 0, 0.2, 1);
      --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-display: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { overflow-x: hidden; }
    body {
      background:
        radial-gradient(1200px 600px at 10% -10%, rgba(91,138,255,0.09), transparent 55%),
        radial-gradient(900px 500px at 100% 0%, rgba(124,58,237,0.07), transparent 50%),
        var(--bg);
      color: var(--text);
      font-family: var(--font);
      min-height: 100vh;
      font-size: 15px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }
    button, input { font-family: inherit; }
    ::selection { background: rgba(91,138,255,0.28); color: var(--text); }

    /* ── Header ── */
    header {
      background: rgba(7, 8, 12, 0.78);
      backdrop-filter: blur(18px) saturate(1.2);
      -webkit-backdrop-filter: blur(18px) saturate(1.2);
      border-bottom: 1px solid var(--border);
      padding: 0 20px;
      height: var(--header-h);
      display: flex;
      align-items: center;
      gap: 14px;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      cursor: pointer;
      flex-shrink: 0;
    }
    .logo:hover .logo-text { opacity: 0.88; }
    .logo-icon {
      width: 30px;
      height: 30px;
      background: linear-gradient(145deg, #5b8aff 0%, #7c3aed 100%);
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 800;
      color: white;
      letter-spacing: -1px;
      flex-shrink: 0;
      box-shadow: 0 2px 10px rgba(91,138,255,0.35);
    }
    .logo-text {
      font-size: 17px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.45px;
      line-height: 1.1;
    }
    .logo-text em {
      font-style: normal;
      background: linear-gradient(90deg, #5b8aff, #a78bfa);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .logo-tagline {
      font-size: 11px;
      color: var(--muted);
      font-weight: 400;
      letter-spacing: 0;
    }

    .header-divider {
      width: 1px;
      height: 22px;
      background: var(--border2);
      flex-shrink: 0;
    }

    .view-toggle {
      display: flex;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 3px;
      gap: 2px;
    }
    .view-btn {
      padding: 6px 14px;
      border-radius: 9px;
      border: none;
      background: transparent;
      color: var(--muted);
      font-size: 12.5px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: color 0.15s var(--ease), background 0.15s var(--ease), box-shadow 0.15s var(--ease);
      letter-spacing: 0.01em;
    }
    .view-btn:hover { color: var(--text2); }
    .view-btn.active {
      background: var(--accent);
      color: white;
      box-shadow: 0 2px 10px rgba(91,138,255,0.32);
    }

    .header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
    .header-updated {
      font-size: 11.5px;
      color: var(--muted);
      font-variant-numeric: tabular-nums;
      padding-right: 2px;
    }

    .refresh-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--accent-soft);
      border: 1px solid rgba(91,138,255,0.28);
      color: #c7d7ff;
      padding: 6px 12px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      font-family: inherit;
      transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
    }
    .refresh-btn:hover {
      background: rgba(91,138,255,0.22);
      border-color: rgba(91,138,255,0.45);
      color: white;
    }
    .refresh-btn:active { transform: scale(0.97); }
    .refresh-btn svg { transition: transform 0.35s var(--ease); }
    .refresh-btn:hover svg { transform: rotate(180deg); }

    /* ── Layout ── */
    .layout {
      display: grid;
      grid-template-columns: 240px minmax(0, 1fr);
      height: calc(100vh - var(--header-h));
      width: 100%;
      overflow: hidden;
    }
    /* Fill the main column beside the sidebar. Soft-cap only on ultra-wide
       displays so headlines don't stretch into a single endless line. */
    @media (min-width: 769px) {
      #main-content {
        width: 100%;
        min-width: 0;
      }
      #main-content > * {
        max-width: min(1480px, 100%);
        width: 100%;
        margin: 0 auto;
      }
      .feed,
      .story-feed,
      .saved-feed {
        padding-left: 28px;
        padding-right: 28px;
      }
    }
    @media (min-width: 1400px) {
      .layout { grid-template-columns: 260px minmax(0, 1fr); }
      .story-sources-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      }
      .glance-card { flex: 0 0 min(300px, 32vw); }
    }

    /* ── Sidebar ── */
    .sidebar {
      background: rgba(14, 17, 24, 0.72);
      backdrop-filter: blur(12px);
      border-right: 1px solid var(--border);
      padding: 18px 12px 24px;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--border2) transparent;
      min-height: 0;
    }
    .sidebar-section { margin-bottom: 20px; }
    .sidebar-label {
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      margin-bottom: 10px;
      padding: 0 10px;
    }
    .source-filter { display: flex; flex-direction: column; gap: 2px; }
    .source-btn {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 10px;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      background: transparent;
      color: var(--text2);
      font-size: 12.5px;
      font-weight: 500;
      font-family: inherit;
      text-align: left;
      transition: background 0.12s, color 0.12s;
    }
    .source-btn:hover { background: var(--surface2); color: var(--text); }
    .source-btn.active {
      background: var(--surface2);
      color: var(--text);
      box-shadow: inset 0 0 0 1px var(--border2);
    }
    .source-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(0,0,0,0.15); }
    .source-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .source-count {
      font-size: 10.5px;
      color: var(--muted);
      background: rgba(0,0,0,0.25);
      padding: 2px 7px;
      border-radius: var(--radius-full);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    .source-btn.unavailable { opacity: 0.5; }
    .source-btn.unavailable .source-dot { background: var(--muted) !important; }
    .src-status {
      font-size: 9.5px;
      font-weight: 700;
      color: #fcd34d;
      background: rgba(245,158,11,0.12);
      border: 1px solid rgba(245,158,11,0.22);
      padding: 1px 6px;
      border-radius: var(--radius-full);
      white-space: nowrap;
    }
    .source-toggle-btn {
      background: none;
      border: none;
      color: var(--accent);
      font-size: 12px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      text-align: left;
      padding: 8px 10px;
      margin-top: 4px;
      border-radius: 8px;
    }
    .source-toggle-btn:hover { background: var(--accent-soft); }

    /* ── Cross-device Saved sync panel ── */
    .sync-panel {
      background: linear-gradient(180deg, var(--surface2), var(--surface));
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 16px 18px;
      margin-bottom: 16px;
      box-shadow: var(--shadow-sm);
    }
    .sync-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .sync-title { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; }
    .sync-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
    .sync-btn {
      flex-shrink: 0;
      font-size: 12.5px;
      font-weight: 700;
      color: #fff;
      background: linear-gradient(135deg, #5b8aff, #7c3aed);
      border: none;
      padding: 8px 14px;
      border-radius: 10px;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(91,138,255,0.28);
      transition: transform 0.12s, filter 0.12s;
    }
    .sync-btn:hover { filter: brightness(1.06); }
    .sync-btn:active { transform: scale(0.98); }
    .sync-btn.on {
      background: rgba(34,197,94,0.12);
      color: #6ee7b7;
      border: 1px solid rgba(34,197,94,0.28);
      box-shadow: none;
    }
    .sync-detail { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
    .sync-code-box, .sync-link-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .sync-code-label { font-size: 11.5px; color: var(--muted); font-weight: 600; }
    .sync-code {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 1.5px;
      color: var(--text);
      background: var(--surface3);
      padding: 5px 10px;
      border-radius: 8px;
      border: 1px solid var(--border);
    }
    .sync-input {
      flex: 1;
      min-width: 180px;
      font-size: 13px;
      color: var(--text);
      background: var(--bg);
      border: 1px solid var(--border2);
      border-radius: 10px;
      padding: 8px 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .sync-input:focus {
      outline: none;
      border-color: rgba(91,138,255,0.55);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .sync-mini {
      font-size: 12px;
      font-weight: 600;
      color: var(--text2);
      background: var(--surface3);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 8px 12px;
      cursor: pointer;
      white-space: nowrap;
      transition: color 0.12s, border-color 0.12s, background 0.12s;
    }
    .sync-mini:hover { color: var(--text); border-color: var(--border2); background: var(--surface2); }
    .sync-hint { font-size: 11.5px; color: var(--muted); line-height: 1.5; }

    .lean-badge {
      font-size: 9.5px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 5px;
      letter-spacing: 0.02em;
    }
    .lean-L  { background: rgba(59,130,246,0.16); color: #7db4ff; }
    .lean-LC { background: rgba(99,102,241,0.16); color: #b4bdfc; }
    .lean-C  { background: rgba(148,163,184,0.14); color: #a8b4c4; }
    .lean-RC { background: rgba(251,146,60,0.16); color: #ffb06a; }
    .lean-R  { background: rgba(239,68,68,0.16);  color: #ff8d8d; }

    .flag-badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 10px;
      font-weight: 700;
      white-space: nowrap;
      flex-shrink: 0;
      letter-spacing: 0.03em;
    }
    .flag-anon    { background: rgba(239,68,68,0.12);  color: #fca5a5; border: 1px solid rgba(239,68,68,0.18); }
    .flag-loaded  { background: rgba(245,158,11,0.12); color: #fcd34d; border: 1px solid rgba(245,158,11,0.18); }
    .flag-unnamed { background: rgba(168,85,247,0.12); color: #d8b4fe; border: 1px solid rgba(168,85,247,0.18); }
    .flag-specul  { background: rgba(249,115,22,0.12); color: #fdba74; border: 1px solid rgba(249,115,22,0.18); }
    .flag-emotion { background: rgba(34,197,94,0.12);  color: #86efac; border: 1px solid rgba(34,197,94,0.18); }
    .flag-frame   { background: rgba(91,138,255,0.12); color: #93c5fd; border: 1px solid rgba(91,138,255,0.18); }

    /* ── Main content wrapper ── */
    #main-content { display: flex; flex-direction: column; min-height: 0; min-width: 0; }

    /* ── Feed ── */
    .feed {
      padding: 16px 18px 8px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--border2) transparent;
    }

    #articles-container {
      overflow: visible;
      flex: none;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
      padding-bottom: 20px;
    }

    /* ── Search ── */
    .search-wrap {
      position: relative;
      margin-bottom: 0;
      flex-shrink: 0;
    }
    .search-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      pointer-events: none;
    }
    .search-input {
      width: 100%;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 10px 38px 10px 38px;
      font-size: 13.5px;
      font-family: inherit;
      color: var(--text);
      outline: none;
      transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
      box-shadow: var(--shadow-sm);
    }
    .search-input::placeholder { color: var(--muted); }
    .search-input:focus {
      border-color: rgba(91,138,255,0.5);
      box-shadow: 0 0 0 3px var(--accent-soft);
      background: var(--surface2);
    }
    .search-clear {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      background: var(--surface3);
      border: none;
      color: var(--muted);
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: none;
      align-items: center;
      justify-content: center;
    }
    .search-clear.visible { display: flex; }
    .search-clear:hover { color: var(--text); background: var(--border2); }

    /* ── Filter rows ── */
    .filter-section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 0;
      flex-shrink: 0;
      box-shadow: var(--shadow-sm);
    }
    .filter-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .filter-row:last-child { border-bottom: none; }
    .filter-row::-webkit-scrollbar { display: none; }
    .filter-row-label {
      font-size: 10.5px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      min-width: 44px;
      flex-shrink: 0;
    }
    .filter-divider { width: 1px; height: 16px; background: var(--border2); flex-shrink: 0; }
    .filter-pill {
      padding: 5px 12px;
      border-radius: var(--radius-full);
      border: 1px solid transparent;
      background: var(--surface2);
      color: var(--text2);
      font-size: 12px;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.15s var(--ease);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .filter-pill:hover {
      color: var(--text);
      background: var(--surface3);
    }
    .filter-pill.active {
      background: var(--accent);
      border-color: transparent;
      color: white;
      font-weight: 600;
      box-shadow: 0 2px 10px rgba(91,138,255,0.3);
    }
    .filter-pill.topic-active {
      background: #7c3aed;
      border-color: transparent;
      color: white;
      font-weight: 600;
      box-shadow: 0 2px 10px rgba(124,58,237,0.3);
    }

    .topic-icon { margin-right: 2px; font-style: normal; }

    /* Article rows — airier list with soft hover surfaces */
    .article-card {
      background: transparent;
      border: none;
      border-bottom: 1px solid var(--border);
      border-radius: 0;
      padding: 16px 10px 16px 14px;
      cursor: pointer;
      transition: background 0.14s var(--ease);
      position: relative;
      display: flex;
      gap: 14px;
      align-items: flex-start;
      margin: 0 -4px;
      border-radius: 12px;
      border-bottom-color: transparent;
      box-shadow: inset 0 -1px 0 var(--border);
    }
    .article-card:hover {
      background: rgba(255,255,255,0.025);
      box-shadow: inset 0 -1px 0 transparent;
    }
    .article-card:last-child { box-shadow: none; }
    .article-card.flagged::before,
    .article-card.high-flags::before {
      content: '';
      position: absolute;
      left: 4px;
      top: 18px;
      bottom: 18px;
      width: 3px;
      border-radius: 3px;
    }
    .article-card.flagged::before    { background: var(--yellow); }
    .article-card.high-flags::before { background: var(--red); }

    .card-body { flex: 1; min-width: 0; overflow: hidden; }
    .card-thumb {
      width: 88px;
      height: 66px;
      border-radius: 10px;
      object-fit: cover;
      object-position: top center;
      flex-shrink: 0;
      border: 1px solid var(--border);
      background: var(--surface2);
      display: block;
      box-shadow: var(--shadow-sm);
    }

    .card-meta {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 7px;
      flex-wrap: wrap;
    }
    .card-source {
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 2px 7px;
      border-radius: 5px;
    }
    .card-meta-right {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }
    .card-date { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
    .card-date::before { content: '·'; margin-right: 5px; opacity: 0.55; }
    .card-title {
      font-family: var(--font-display);
      font-size: 16.5px;
      font-weight: 600;
      line-height: 1.35;
      color: var(--text);
      margin-bottom: 5px;
      text-decoration: none;
      display: block;
      letter-spacing: -0.25px;
      word-break: break-word;
      overflow-wrap: break-word;
      transition: color 0.12s;
    }
    .card-title:hover { color: #9db7ff; }
    .card-desc {
      font-size: 13px;
      color: var(--text2);
      line-height: 1.55;
      margin-bottom: 9px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-word;
    }
    .card-flags { display: flex; flex-wrap: wrap; gap: 5px; }

    .flag-tooltip { position: relative; }
    .flag-tooltip:hover .tooltip-text { display: block; }
    .tooltip-text {
      display: none;
      position: absolute;
      bottom: calc(100% + 8px);
      left: 0;
      background: var(--surface3);
      border: 1px solid var(--border2);
      padding: 10px 12px;
      border-radius: 10px;
      font-size: 12px;
      color: var(--text);
      width: 220px;
      line-height: 1.45;
      z-index: 200;
      box-shadow: var(--shadow);
    }
    .tooltip-text strong { color: var(--text); display: block; margin-bottom: 3px; }

    /* ── Stories ── */
    .story-feed {
      overflow-y: auto;
      padding: 16px 18px 24px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      scrollbar-width: thin;
      scrollbar-color: var(--border2) transparent;
      flex: 1;
      min-height: 0;
    }
    .story-toolbar {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: 2px 0 4px;
    }
    .story-sort-label { font-size: 12px; color: var(--muted); font-weight: 500; }
    .sort-btn {
      font-size: 12px;
      font-weight: 500;
      font-family: inherit;
      padding: 5px 12px;
      border-radius: var(--radius-full);
      border: 1px solid transparent;
      background: var(--surface2);
      color: var(--muted);
      cursor: pointer;
      transition: all 0.15s var(--ease);
    }
    .sort-btn:hover { color: var(--text); background: var(--surface3); }
    .sort-btn.active {
      background: var(--accent-soft);
      color: #c7d7ff;
      border-color: rgba(91,138,255,0.28);
      font-weight: 600;
    }

    .story-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
      box-shadow: var(--shadow-sm);
    }
    .story-card:hover {
      border-color: var(--border2);
      box-shadow: var(--shadow);
      transform: translateY(-1px);
    }

    .story-header {
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--surface2);
    }
    .story-count-badge {
      background: var(--accent);
      color: white;
      font-size: 10.5px;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: var(--radius-full);
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(91,138,255,0.35);
    }
    .story-topic {
      font-family: var(--font-display);
      font-size: 17px;
      font-weight: 600;
      color: var(--text);
      flex: 1;
      line-height: 1.3;
      letter-spacing: -0.2px;
    }
    .story-flag-count { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
    .story-flag-count.has-flags { color: var(--yellow); font-weight: 600; }

    .story-sources-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
    .story-source-cell {
      padding: 14px 16px;
      border-right: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 6px;
      cursor: pointer;
      transition: background 0.12s;
    }
    .story-source-cell:hover { background: rgba(255,255,255,0.025); }
    .cell-source {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .cell-title {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.35;
      color: var(--text);
      text-decoration: none;
      display: block;
      transition: color 0.12s;
      letter-spacing: -0.1px;
    }
    .cell-title:hover { color: #9db7ff; }
    .cell-desc {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .cell-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
    .cell-clean { font-size: 10.5px; color: var(--green); font-weight: 500; }

    .divergence-bar {
      padding: 10px 16px;
      background: rgba(0,0,0,0.2);
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11.5px;
    }
    .divergence-label { color: var(--muted); }
    .div-pill {
      padding: 2px 9px;
      border-radius: var(--radius-full);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    .div-low  { background: rgba(34,197,94,0.12);  color: #86efac; border: 1px solid rgba(34,197,94,0.18); }
    .div-med  { background: rgba(245,158,11,0.12); color: #fcd34d; border: 1px solid rgba(245,158,11,0.18); }
    .div-high { background: rgba(239,68,68,0.12);  color: #fca5a5; border: 1px solid rgba(239,68,68,0.18); }
    .div-score { margin-left: auto; font-size: 10.5px; color: var(--muted); }

    /* ── Story card redesign ── */
    .story-hero {
      display: flex;
      gap: 16px;
      padding: 18px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(180deg, var(--surface2), var(--surface));
    }
    .story-thumb {
      width: 120px;
      height: 80px;
      border-radius: 10px;
      object-fit: cover;
      object-position: top center;
      flex-shrink: 0;
      background: var(--surface3);
      border: 1px solid var(--border);
      display: block;
      box-shadow: var(--shadow-sm);
    }
    .story-thumb-placeholder {
      width: 120px;
      height: 80px;
      border-radius: 10px;
      flex-shrink: 0;
      background: var(--surface3);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }
    .story-hero-body { flex: 1; min-width: 0; }
    .story-hero-top {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 8px;
    }
    .story-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .story-summary {
      font-size: 13.5px;
      color: var(--text2);
      line-height: 1.6;
      margin-bottom: 12px;
    }

    /* ── Bias-balance bar ── */
    .bias-balance { margin: 0 0 12px; }
    .bb-track {
      display: flex;
      height: 7px;
      border-radius: 5px;
      overflow: hidden;
      background: var(--surface3);
    }
    .bb-seg { height: 100%; transition: width .3s ease; }
    .bb-seg.left   { background: #60a5fa; }
    .bb-seg.center { background: #94a3b8; }
    .bb-seg.right  { background: #f87171; }
    .bb-legend {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 7px;
      font-size: 10.5px;
      font-weight: 600;
      color: var(--muted);
      flex-wrap: wrap;
    }
    .bb-legend .bb-item { display: inline-flex; align-items: center; gap: 4px; }
    .bb-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
    .bb-dot.left { background: #60a5fa; }
    .bb-dot.center { background: #94a3b8; }
    .bb-dot.right { background: #f87171; }
    .bb-verdict {
      margin-left: auto;
      padding: 2px 8px;
      border-radius: var(--radius-full);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    .bb-verdict.balanced {
      color: #6ee7b7;
      background: rgba(34,197,94,0.12);
      border: 1px solid rgba(34,197,94,0.22);
    }
    .bb-verdict.one-sided {
      color: #fcd34d;
      background: rgba(245,158,11,0.12);
      border: 1px solid rgba(245,158,11,0.25);
    }
    .story-meta-row {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    /* ── Insights panel ── */
    .detail-panel {
      position: fixed;
      top: var(--header-h);
      right: 0;
      bottom: 0;
      width: 340px;
      max-width: 90vw;
      background: rgba(14, 17, 24, 0.96);
      backdrop-filter: blur(16px);
      border-left: 1px solid var(--border2);
      padding: 18px 18px 28px;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--border2) transparent;
      z-index: 150;
      transform: translateX(100%);
      transition: transform 0.26s var(--ease);
      box-shadow: -16px 0 40px rgba(0,0,0,0.4);
    }
    .detail-panel.open { transform: translateX(0); }
    .panel-overlay {
      display: none;
      position: fixed;
      inset: var(--header-h) 0 0 0;
      background: rgba(0,0,0,0.5);
      backdrop-filter: blur(2px);
      z-index: 140;
    }
    .panel-overlay.open { display: block; }
    html.light .panel-overlay { background: rgba(15,23,42,0.22); }
    .panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
    }
    .panel-head-title { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; }
    .panel-close {
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--muted);
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      width: 30px;
      height: 30px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.12s, background 0.12s;
    }
    .panel-close:hover { color: var(--text); background: var(--surface3); }
    .panel-label {
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--muted);
      margin-bottom: 10px;
    }

    .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; }
    .stat-card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 10px;
      text-align: center;
    }
    .stat-num {
      font-size: 22px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.04em;
      font-variant-numeric: tabular-nums;
    }
    .stat-label { font-size: 10.5px; color: var(--muted); margin-top: 3px; font-weight: 500; }

    .flag-chart { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }
    .chart-row { display: flex; align-items: center; gap: 8px; }
    .chart-label { width: 68px; font-size: 10.5px; color: var(--muted); font-weight: 600; letter-spacing: 0.02em; }
    .chart-bar-bg { flex: 1; height: 6px; background: var(--surface2); border-radius: 4px; overflow: hidden; }
    .chart-bar { height: 100%; border-radius: 4px; transition: width 0.6s var(--ease); }
    .chart-count { width: 22px; text-align: right; font-size: 10.5px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }

    .panel-divider { height: 1px; background: var(--border); margin: 18px 0; }

    .analysis-block {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 13px;
      margin-bottom: 8px;
    }
    .analysis-block h4 {
      font-size: 12px;
      font-weight: 600;
      color: var(--text2);
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .analysis-block p { font-size: 12px; color: var(--text2); line-height: 1.55; margin-top: 4px; }
    .analysis-block em { color: var(--text); font-style: italic; }
    .selected-title {
      font-family: var(--font-display);
      font-size: 15.5px;
      font-weight: 600;
      line-height: 1.35;
      margin-bottom: 8px;
      color: var(--text);
      letter-spacing: -0.15px;
    }
    .selected-source { font-size: 11px; color: var(--muted); margin-bottom: 12px; }

    .loading {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 80px 20px;
      color: var(--muted);
      font-size: 13.5px;
      flex-direction: column;
      gap: 14px;
      font-weight: 500;
    }
    .spinner {
      width: 26px;
      height: 26px;
      border: 2px solid var(--border2);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .empty {
      text-align: center;
      color: var(--muted);
      padding: 64px 24px;
      font-size: 14.5px;
      font-weight: 500;
      line-height: 1.55;
    }

    /* ── Light mode ── */
    html.light {
      --bg: #f3f5fa;
      --bg-elevated: #ffffff;
      --surface: #ffffff;
      --surface2: #eef1f7;
      --surface3: #e4e8f2;
      --border: rgba(15, 23, 42, 0.08);
      --border2: rgba(15, 23, 42, 0.14);
      --text: #0f172a;
      --text2: #475569;
      --muted: #64748b;
      --accent: #3b6ef0;
      --accent2: #2c5be0;
      --accent-soft: rgba(59,110,240,0.10);
      --red: #dc2626;
      --yellow: #d97706;
      --green: #16a34a;
      --shadow-sm: 0 1px 2px rgba(15,23,42,0.05);
      --shadow: 0 10px 30px rgba(15,23,42,0.08);
      --shadow-lg: 0 20px 48px rgba(15,23,42,0.12);
    }
    html.light body {
      background:
        radial-gradient(1000px 500px at 10% -10%, rgba(59,110,240,0.08), transparent 55%),
        radial-gradient(800px 400px at 100% 0%, rgba(124,58,237,0.05), transparent 50%),
        var(--bg);
    }
    html.light header {
      background: rgba(243, 245, 250, 0.82);
    }
    html.light .sidebar {
      background: rgba(255,255,255,0.75);
    }
    html.light .article-card:hover { background: rgba(15,23,42,0.03); }
    html.light .story-card { box-shadow: var(--shadow-sm); }
    html.light .story-source-cell:hover { background: rgba(15,23,42,0.03); }
    html.light .view-btn.active {
      background: var(--accent);
      color: white;
      box-shadow: 0 2px 10px rgba(59,110,240,0.28);
    }
    html.light .refresh-btn { color: var(--accent); }
    html.light .card-title:hover,
    html.light .cell-title:hover { color: var(--accent); }
    html.light .detail-panel { background: rgba(255,255,255,0.98); }
    html.light .bottom-nav { background: rgba(255,255,255,0.92); }
    html.light .source-count { background: rgba(15,23,42,0.05); }
    html.light .divergence-bar { background: rgba(15,23,42,0.03); }
    html.light .search-input { background: white; }
    html.light .filter-pill { background: var(--surface2); }

    /* ── Theme + how-it-works buttons ── */
    .icon-btn {
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--text2);
      width: 34px;
      height: 34px;
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
      transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
    }
    .icon-btn:hover {
      background: var(--surface3);
      border-color: var(--border2);
      color: var(--text);
    }
    .icon-btn:active { transform: scale(0.96); }

    /* ── Trending ── */
    .trending-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 2px 0;
      flex-shrink: 0;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .trending-wrap::-webkit-scrollbar { display: none; }
    .trending-label {
      font-size: 10.5px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .trending-chip {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text2);
      padding: 5px 11px;
      border-radius: var(--radius-full);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s var(--ease);
      flex-shrink: 0;
      box-shadow: var(--shadow-sm);
    }
    .trending-chip:hover {
      background: var(--surface2);
      color: var(--text);
      border-color: rgba(91,138,255,0.35);
    }

    /* ── Bookmark button ── */
    .bm-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--muted);
      font-size: 16px;
      line-height: 1;
      padding: 4px 5px;
      flex-shrink: 0;
      border-radius: 8px;
      transition: color 0.15s, background 0.15s, transform 0.12s;
    }
    .bm-btn:hover { color: var(--yellow); background: rgba(245,158,11,0.1); }
    .bm-btn.bookmarked { color: var(--yellow); }
    .bm-btn:active { transform: scale(0.92); }

    /* ── Headline diff highlight ── */
    .diff-word {
      color: #c5d7ff;
      font-weight: 700;
      box-shadow: inset 0 -2px 0 rgba(91,138,255,0.5);
    }
    html.light .diff-word {
      color: #1e40af;
      box-shadow: inset 0 -2px 0 rgba(59,110,240,0.35);
    }

    /* ── Share button ── */
    .share-btn {
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--muted);
      padding: 4px 9px;
      border-radius: 8px;
      font-size: 10.5px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s;
      white-space: nowrap;
    }
    .share-btn:hover {
      color: var(--text);
      border-color: rgba(91,138,255,0.35);
      background: var(--accent-soft);
    }

    /* ── Divergence alert badge ── */
    .divergence-alert {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: rgba(239,68,68,0.12);
      border: 1px solid rgba(239,68,68,0.28);
      color: #fca5a5;
      padding: 3px 10px;
      border-radius: var(--radius-full);
      font-size: 11px;
      font-weight: 700;
      animation: pulse-border 2s ease-in-out infinite;
    }
    @keyframes pulse-border {
      0%,100% { border-color: rgba(239,68,68,0.28); }
      50% { border-color: rgba(239,68,68,0.65); }
    }

    /* ── Saved view ── */
    .saved-feed {
      overflow-y: auto;
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
      min-height: 0;
    }
    #saved-articles {
      overflow-y: auto;
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
      padding-bottom: 16px;
      scrollbar-width: thin;
      scrollbar-color: var(--border2) transparent;
    }

    /* ── Scorecard ── */
    .scorecard-row { display: flex; align-items: center; gap: 8px; }
    .scorecard-source {
      font-size: 11px;
      font-weight: 600;
      width: 92px;
      color: var(--text2);
      flex-shrink: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .scorecard-bar-bg { flex: 1; height: 6px; background: var(--surface2); border-radius: 4px; overflow: hidden; }
    .scorecard-bar { height: 100%; border-radius: 4px; transition: width 0.6s var(--ease); }
    .scorecard-pct {
      width: 34px;
      text-align: right;
      font-size: 10.5px;
      color: var(--muted);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }

    /* ── Toast ── */
    .toast {
      position: fixed;
      bottom: 88px;
      left: 50%;
      transform: translateX(-50%) translateY(12px);
      background: var(--surface3);
      border: 1px solid var(--border2);
      color: var(--text);
      padding: 11px 20px;
      border-radius: var(--radius-full);
      font-size: 13px;
      font-weight: 500;
      opacity: 0;
      transition: all 0.22s var(--ease);
      z-index: 2000;
      pointer-events: none;
      white-space: nowrap;
      box-shadow: var(--shadow);
    }
    .toast.visible {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* ── Methodology modal ── */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.68);
      backdrop-filter: blur(4px);
      z-index: 600;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .modal-overlay.open { display: flex; }
    .modal {
      background: var(--surface);
      border: 1px solid var(--border2);
      border-radius: 18px;
      max-width: 540px;
      width: 100%;
      max-height: 82vh;
      overflow-y: auto;
      padding: 26px;
      scrollbar-width: thin;
      scrollbar-color: var(--border2) transparent;
      box-shadow: var(--shadow-lg);
    }
    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .modal-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
    .modal-close {
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--muted);
      font-size: 18px;
      cursor: pointer;
      line-height: 1;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .modal-close:hover { color: var(--text); }
    .modal-section { margin-bottom: 18px; }
    .modal-section h3 {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--muted);
      margin-bottom: 8px;
    }
    .modal-section p { font-size: 13.5px; color: var(--text2); line-height: 1.65; }
    .modal-flag-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 12px;
    }
    .modal-flag-desc { font-size: 12.5px; color: var(--text2); line-height: 1.55; }

    /* ── Mobile filter drawer ── */
    .mobile-filter-bar {
      display: none;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 2px;
    }
    .mobile-filter-bar::-webkit-scrollbar { display: none; }
    .filter-drawer-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text2);
      padding: 7px 13px;
      border-radius: var(--radius-full);
      font-size: 12.5px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: all 0.15s;
      box-shadow: var(--shadow-sm);
    }
    .filter-drawer-btn.has-active {
      border-color: rgba(91,138,255,0.4);
      color: #c7d7ff;
      background: var(--accent-soft);
    }
    .filter-active-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      display: none;
      box-shadow: 0 0 0 2px rgba(91,138,255,0.25);
    }
    .filter-active-dot.visible { display: block; }

    /* ── Feed toolbar ── */
    .feed-toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }
    .feed-toolbar .search-wrap { flex: 1; min-width: 0; margin-bottom: 0; }

    .desktop-filter-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text2);
      padding: 10px 14px;
      border-radius: var(--radius);
      font-size: 12.5px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      flex-shrink: 0;
      transition: all 0.15s;
      box-shadow: var(--shadow-sm);
    }
    .desktop-filter-toggle:hover {
      border-color: var(--border2);
      color: var(--text);
      background: var(--surface2);
    }
    .desktop-filter-toggle.has-active {
      border-color: rgba(91,138,255,0.4);
      color: #c7d7ff;
      background: var(--accent-soft);
    }
    .desktop-filter-toggle .chevron {
      color: var(--muted);
      font-size: 13px;
      transition: transform 0.2s var(--ease);
      margin-left: 2px;
    }
    .desktop-filter-toggle[aria-expanded="true"] .chevron { transform: rotate(90deg); }

    .filter-drawer-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 299;
      background: rgba(0,0,0,0.5);
      backdrop-filter: blur(2px);
    }
    .filter-drawer-overlay.open { display: block; }
    .filter-drawer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--surface);
      border-top: 1px solid var(--border2);
      border-radius: 20px 20px 0 0;
      z-index: 300;
      max-height: 72vh;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--border2) transparent;
      transform: translateY(110%);
      transition: transform 0.28s var(--ease);
      padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
      box-shadow: 0 -12px 40px rgba(0,0,0,0.35);
    }
    .filter-drawer.open { transform: translateY(0); }
    .drawer-handle {
      width: 36px;
      height: 4px;
      background: var(--border2);
      border-radius: 2px;
      margin: 12px auto 4px;
    }
    .drawer-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      padding: 8px 16px 6px;
      letter-spacing: -0.2px;
    }
    .drawer-done-btn {
      position: absolute;
      right: 16px;
      top: 14px;
      background: var(--accent);
      color: white;
      border: none;
      padding: 6px 14px;
      border-radius: var(--radius-full);
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      box-shadow: 0 2px 10px rgba(91,138,255,0.3);
    }

    /* ── Load more / infinite scroll ── */
    .load-more-sentinel {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .load-more-spinner {
      width: 18px;
      height: 18px;
      border: 2px solid var(--border2);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      opacity: 0;
      transition: opacity 0.2s;
    }
    .load-more-spinner.active { opacity: 1; }

    @media (max-width: 768px) {
      .saved-feed { padding: 12px 14px; }
    }

    /* ── Mobile sidebar toggle ── */
    .sidebar-toggle {
      display: none;
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--text2);
      width: 34px;
      height: 34px;
      border-radius: 10px;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(2px);
      z-index: 190;
    }
    .sidebar-overlay.open { display: block; }

    /* ── Bottom nav (mobile) ── */
    .bottom-nav {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: calc(60px + env(safe-area-inset-bottom, 0px));
      padding-bottom: env(safe-area-inset-bottom, 0px);
      background: rgba(14, 17, 24, 0.92);
      backdrop-filter: blur(18px) saturate(1.15);
      -webkit-backdrop-filter: blur(18px) saturate(1.15);
      border-top: 1px solid var(--border);
      z-index: 100;
      align-items: stretch;
    }
    .bottom-nav-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      background: none;
      border: none;
      color: var(--muted);
      font-family: inherit;
      font-size: 10.5px;
      font-weight: 500;
      cursor: pointer;
      transition: color 0.15s;
      padding-top: 2px;
    }
    .bottom-nav-btn.active { color: var(--accent); }
    .bottom-nav-btn svg { opacity: 0.65; transition: opacity 0.15s; }
    .bottom-nav-btn.active svg { opacity: 1; }

    /* ── Responsive ── */
    @media (max-width: 768px) {
      :root { --header-h: 54px; }
      header {
        padding: 0 12px;
        gap: 8px;
      }
      .logo-tagline { display: none; }
      .header-divider { display: none; }
      .logo-text { font-size: 16px; white-space: nowrap; }
      .logo-icon { width: 28px; height: 28px; border-radius: 8px; }
      .header-right { gap: 6px; }
      .icon-btn { width: 32px; height: 32px; font-size: 13px; }
      .view-toggle { display: none; }
      .header-updated { display: none; }
      .refresh-btn span { display: none; }
      .refresh-btn { padding: 7px 10px; }
      .sidebar-toggle { display: flex; }

      .layout {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        height: calc(100vh - var(--header-h) - 60px - env(safe-area-inset-bottom, 0px));
        width: 100vw;
      }

      .sidebar {
        position: fixed;
        top: var(--header-h);
        left: 0;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px));
        width: 280px;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.26s var(--ease);
        border-right: 1px solid var(--border2);
        background: var(--surface);
        backdrop-filter: none;
      }
      .sidebar.open { transform: translateX(0); }

      .detail-panel {
        top: var(--header-h);
        bottom: calc(60px + env(safe-area-inset-bottom, 0px));
        width: 100%;
        max-width: none;
      }
      .panel-overlay {
        inset: var(--header-h) 0 calc(60px + env(safe-area-inset-bottom, 0px)) 0;
      }

      .feed { padding: 12px 12px 8px; gap: 10px; width: 100%; max-width: 100vw; }
      .story-feed { padding: 12px 12px 20px; gap: 12px; width: 100%; max-width: 100vw; }
      .article-card {
        width: 100%;
        margin: 0;
        padding: 14px 6px 14px 12px;
        border-radius: 10px;
      }
      .card-meta { flex-wrap: wrap; }
      .card-date { margin-left: 0; }
      .card-thumb { width: 72px; height: 54px; border-radius: 8px; }
      .card-title { font-size: 14.5px; }
      .card-desc { font-size: 12.5px; -webkit-line-clamp: 1; }

      .filter-section { display: none !important; }
      .desktop-filter-toggle { display: none !important; }
      .trending-wrap { display: none !important; }
      .mobile-filter-bar { display: flex; margin-bottom: 2px; }

      .card-date { display: none; }

      .story-hero { flex-direction: column; gap: 12px; padding: 14px; }
      .story-thumb { width: 100%; height: 160px; }
      .story-thumb-placeholder { width: 100%; height: 80px; }
      .story-sources-grid { grid-template-columns: 1fr 1fr; }

      .bottom-nav { display: flex; }

      .search-input { font-size: 16px; } /* prevent iOS zoom */
    }

    @media (max-width: 480px) {
      .story-sources-grid { grid-template-columns: 1fr; }
      .card-thumb { width: 64px; height: 48px; }
      .search-wrap { margin-bottom: 0; }
    }


    /* ── Editorial hero: bias pulse + today at a glance ── */
    .feed-hero {
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex-shrink: 0;
    }
    .bias-pulse {
      position: relative;
      background: linear-gradient(145deg, rgba(91,138,255,0.10), rgba(124,58,237,0.08) 45%, rgba(239,68,68,0.06));
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 14px 16px 14px 18px;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }
    .bias-pulse::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, var(--accent), #a78bfa, var(--red));
      border-radius: 3px 0 0 3px;
    }
    .bias-pulse-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
    }
    .bias-pulse-title {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.2px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .pulse-orb {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 0 rgba(91,138,255,0.55);
      animation: bias-pulse-orb 2.2s ease-out infinite;
      flex-shrink: 0;
    }
    .pulse-orb.hot { background: #f59e0b; box-shadow: 0 0 0 0 rgba(245,158,11,0.5); animation-name: bias-pulse-orb-hot; }
    .pulse-orb.severe { background: #ef4444; box-shadow: 0 0 0 0 rgba(239,68,68,0.5); animation-name: bias-pulse-orb-severe; }
    @keyframes bias-pulse-orb {
      0% { box-shadow: 0 0 0 0 rgba(91,138,255,0.5); }
      70% { box-shadow: 0 0 0 12px rgba(91,138,255,0); }
      100% { box-shadow: 0 0 0 0 rgba(91,138,255,0); }
    }
    @keyframes bias-pulse-orb-hot {
      0% { box-shadow: 0 0 0 0 rgba(245,158,11,0.5); }
      70% { box-shadow: 0 0 0 12px rgba(245,158,11,0); }
      100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
    }
    @keyframes bias-pulse-orb-severe {
      0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
      70% { box-shadow: 0 0 0 12px rgba(239,68,68,0); }
      100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
    }
    .bias-pulse-sub { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
    .bias-pulse-dismiss {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
      padding: 4px 9px;
      border-radius: var(--radius-full);
      cursor: pointer;
      flex-shrink: 0;
    }
    .bias-pulse-dismiss:hover { color: var(--text); border-color: var(--border2); }
    .bias-pulse-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-bottom: 12px;
    }
    .bp-stat {
      background: rgba(0,0,0,0.18);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 8px 8px 9px;
      text-align: center;
    }
    html.light .bp-stat { background: rgba(255,255,255,0.65); }
    .bp-stat-num {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.04em;
      font-variant-numeric: tabular-nums;
      color: var(--text);
    }
    .bp-stat-num.warn { color: #fbbf24; }
    .bp-stat-num.hot { color: #f87171; }
    .bp-stat-label { font-size: 10px; color: var(--muted); font-weight: 600; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; }
    .bp-lean-row { display: flex; flex-direction: column; gap: 6px; }
    .bp-lean-label { font-size: 11px; color: var(--muted); font-weight: 600; }
    .bp-outlets {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }
    .bp-outlet-chip {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: var(--radius-full);
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--text2);
    }
    .bias-pulse-show {
      display: none;
      align-self: flex-start;
      background: transparent;
      border: 1px dashed var(--border2);
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: var(--radius-full);
      cursor: pointer;
    }
    .bias-pulse-show:hover { color: var(--text); border-color: var(--accent); }
    .bias-pulse-show.visible { display: inline-flex; }

    .glance-strip {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 12px 12px 14px;
      box-shadow: var(--shadow-sm);
    }
    .glance-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
      padding: 0 4px;
    }
    .glance-title {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.2px;
    }
    .glance-sub { font-size: 11.5px; color: var(--muted); }
    .glance-link {
      background: none;
      border: none;
      color: var(--accent);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      padding: 0;
    }
    .glance-link:hover { text-decoration: underline; }
    .glance-scroller {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--border2) transparent;
      padding-bottom: 2px;
      -webkit-overflow-scrolling: touch;
    }
    .glance-card {
      flex: 0 0 min(260px, 78vw);
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px 13px;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      color: inherit;
      transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 118px;
    }
    .glance-card:hover {
      border-color: rgba(91,138,255,0.4);
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }
    .glance-card-top {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .glance-topic {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: -0.15px;
      color: var(--text);
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      flex: 1;
    }
    .glance-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: auto;
      font-size: 11px;
      color: var(--muted);
    }

    /* ── Compare mode ── */
    .compare-btn.active {
      background: var(--accent-soft);
      border-color: rgba(91,138,255,0.45);
      color: #c7d7ff;
    }
    html.light .compare-btn.active { color: var(--accent); }
    .article-card.compare-selected {
      background: rgba(91,138,255,0.08);
      box-shadow: inset 0 0 0 1px rgba(91,138,255,0.35);
    }
    html.light .article-card.compare-selected {
      background: rgba(59,110,240,0.08);
    }
    .compare-check {
      display: none;
      width: 22px;
      height: 22px;
      border-radius: 6px;
      border: 1.5px solid var(--border2);
      background: var(--surface2);
      color: transparent;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.12s;
    }
    body.compare-mode .compare-check { display: flex; }
    .compare-check.on {
      background: var(--accent);
      border-color: var(--accent);
      color: white;
    }
    .compare-tray {
      position: fixed;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%) translateY(120%);
      z-index: 250;
      background: rgba(14,17,24,0.96);
      backdrop-filter: blur(16px);
      border: 1px solid var(--border2);
      border-radius: 16px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: var(--shadow-lg);
      max-width: min(560px, calc(100vw - 24px));
      transition: transform 0.28s var(--ease);
    }
    html.light .compare-tray { background: rgba(255,255,255,0.97); }
    .compare-tray.open { transform: translateX(-50%) translateY(0); }
    .compare-tray-text { font-size: 13px; color: var(--text2); min-width: 0; }
    .compare-tray-text strong { color: var(--text); font-weight: 700; }
    .compare-tray-actions { display: flex; gap: 8px; flex-shrink: 0; margin-left: auto; }
    .compare-tray-btn {
      border: none;
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 12.5px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
    }
    .compare-tray-btn.primary {
      background: linear-gradient(135deg, #5b8aff, #7c3aed);
      color: white;
    }
    .compare-tray-btn.primary:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .compare-tray-btn.ghost {
      background: var(--surface2);
      color: var(--text2);
      border: 1px solid var(--border);
    }
    @media (max-width: 768px) {
      .compare-tray { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
      .bias-pulse-stats { grid-template-columns: repeat(2, 1fr); }
    }

    .compare-modal .modal { max-width: 640px; }
    .compare-shared, .compare-unique {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 6px;
    }
    .compare-token {
      font-size: 12px;
      font-weight: 600;
      padding: 4px 9px;
      border-radius: var(--radius-full);
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text2);
    }
    .compare-token.shared {
      background: rgba(34,197,94,0.12);
      border-color: rgba(34,197,94,0.28);
      color: #86efac;
    }
    html.light .compare-token.shared { color: #15803d; }
    .compare-token.unique {
      background: rgba(91,138,255,0.12);
      border-color: rgba(91,138,255,0.28);
      color: #93c5fd;
    }
    html.light .compare-token.unique { color: #1d4ed8; }
    .compare-headline {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 600;
      line-height: 1.35;
      margin: 4px 0 8px;
      letter-spacing: -0.15px;
    }
    .compare-headline .shared-word {
      color: #86efac;
      box-shadow: inset 0 -2px 0 rgba(34,197,94,0.45);
    }
    html.light .compare-headline .shared-word {
      color: #15803d;
      box-shadow: inset 0 -2px 0 rgba(22,163,74,0.35);
    }
    .compare-headline .unique-word {
      color: #bfd4ff;
      font-weight: 700;
      box-shadow: inset 0 -2px 0 rgba(91,138,255,0.5);
    }
    html.light .compare-headline .unique-word {
      color: #1e40af;
      box-shadow: inset 0 -2px 0 rgba(59,110,240,0.35);
    }
    .compare-block {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px 14px;
      margin-bottom: 10px;
    }
    .compare-block-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      font-size: 11px;
      color: var(--muted);
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

/* ── Review follow-ups ── */
.flag-full { display: none; }
@media (min-width: 769px) {
  .flag-badge .flag-short { display: none; }
  .flag-badge .flag-full { display: inline; }
}
.flag-tooltip { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.flag-match {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 500;
  font-style: italic;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}
.active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--accent-soft);
  border: 1px solid rgba(91,138,255,0.3);
  color: #c7d7ff;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
}
html.light .active-chip { color: var(--accent); }
.active-chip.clear {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}
.filter-count {
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bias-pulse.compact { padding: 10px 14px; }
.bias-pulse-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bias-pulse-actions { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
.bias-pulse-caveat {
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.4;
}
.bias-pulse.compact .bias-pulse-caveat { margin-top: 6px; }

.story-why {
  font-size: 12px;
  color: var(--muted);
  margin: -4px 0 10px;
  font-style: italic;
}
.compare-hint {
  font-size: 12.5px;
  color: var(--text2);
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
}

.feed-no-thumbs .card-thumb { display: none; }

.empty-clear {
  margin-top: 12px;
  background: var(--accent);
  color: white;
  border: none;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.header-more { position: relative; display: none; }
.header-more summary { list-style: none; }
.header-more summary::-webkit-details-marker { display: none; }
.header-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 6px;
  min-width: 180px;
  box-shadow: var(--shadow);
  z-index: 120;
  display: flex;
  flex-direction: column;
}
.header-more-menu button {
  background: none;
  border: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.header-more-menu button:hover { background: var(--surface2); }

.story-source-cell .compare-check {
  display: flex;
  margin-left: auto;
  width: 18px;
  height: 18px;
  font-size: 11px;
}
.cell-source { width: 100%; }

@media (max-width: 1100px) {
  .header-wide { display: none !important; }
  .header-more { display: block; }
}
@media (max-width: 768px) {
  .header-more { display: none; }
  .compare-btn.header-wide { display: flex !important; }
  .trending-wrap { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-orb { animation: none !important; }
}

/* ── Today stage (Yahoo mosaic + Apple News cards) ── */
.today-stage {
  display: none;
  grid-template-columns: 1.45fr 0.95fr;
  grid-template-areas:
    "kicker kicker"
    "hero stack";
  gap: 18px 28px;
  flex-shrink: 0;
  padding-bottom: 8px;
}
.today-kicker {
  grid-area: kicker;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 4px;
}
.today-label {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.6px;
}
.today-date { font-size: 14px; color: var(--muted); font-weight: 500; }
.section-kicker {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px;
  padding: 6px 0 2px;
  flex-shrink: 0;
}

.card-hero {
  grid-area: hero;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  margin: 0;
}
.card-hero::before { display: none; }
.hero-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 18px;
  background: var(--surface2);
  display: block;
  box-shadow: var(--shadow-sm);
}
.hero-media-fallback {
  background:
    linear-gradient(135deg, rgba(91,138,255,0.25), rgba(124,58,237,0.2)),
    var(--surface2);
}
.card-hero .card-body { padding: 14px 4px 4px; }
.card-hero .card-title {
  font-size: 32px;
  line-height: 1.18;
  letter-spacing: -0.55px;
  font-weight: 650;
  margin-bottom: 8px;
}
.card-hero .card-desc {
  font-size: 15.5px;
  -webkit-line-clamp: 3;
  color: var(--text2);
}

.today-stack {
  grid-area: stack;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.card-stack {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.card-stack:first-child { padding-top: 0; }
.card-stack:last-child { border-bottom: none; }
.card-stack::before { display: none; }
.stack-media {
  width: 118px;
  height: 86px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--surface2);
  display: block;
}
.stack-media-fallback { background: var(--surface3); }
.card-stack .card-title {
  font-size: 16.5px;
  line-height: 1.28;
  font-weight: 600;
}
.card-stack .card-desc { display: none; }
.card-stack .flag-match { display: none; }

.magazine-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 22px 20px;
  padding-top: 8px;
  padding-bottom: 28px;
  mask-image: none;
}
.magazine-grid .load-more-sentinel { grid-column: 1 / -1; }
.card-magazine {
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.card-magazine::before { display: none; }
.card-magazine:hover { background: transparent; }
.mag-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 14px;
  background: var(--surface2);
  display: block;
  margin-bottom: 10px;
}
.card-magazine .card-title {
  font-size: 19px;
  line-height: 1.28;
  letter-spacing: -0.3px;
}
.card-magazine .card-body { padding: 0 2px; }
.card-magazine.no-photo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}

@media (max-width: 980px) {
  .today-stage {
    grid-template-columns: 1fr;
    grid-template-areas:
      "kicker"
      "hero"
      "stack";
  }
  .card-hero .card-title { font-size: 26px; }
}
@media (max-width: 768px) {
  .today-label { font-size: 24px; }
  .card-hero .card-title { font-size: 22px; }
  .magazine-grid { grid-template-columns: 1fr 1fr; gap: 16px 12px; }
  .card-magazine .card-title { font-size: 15px; }
  .card-stack { grid-template-columns: 92px 1fr; }
  .stack-media { width: 92px; height: 70px; }
}
@media (max-width: 480px) {
  .magazine-grid { grid-template-columns: 1fr; }
}