/* ================================================================
   PORID — OR Solver & Tool Navigator
   Design System · March 2026
   Matches mghnasiri.github.io visual identity
   ================================================================ */

/* ── Design Tokens ─────────────────────────────────────────────── */

:root {
  /* Backgrounds */
  --color-bg: #0A192F;
  --color-bg-elevated: #0D2137;
  --color-surface: rgba(10, 25, 47, 0.85);
  --color-surface-hover: rgba(13, 33, 55, 0.95);

  /* Accent */
  --color-accent: #C5A059;
  --color-accent-dim: rgba(197, 160, 89, 0.3);
  --color-accent-glow: rgba(197, 160, 89, 0.15);

  /* Text */
  --color-text: #CCD6F6;
  --color-text-muted: #8892B0;
  --color-text-faint: #7A8DA3;  /* 4.65:1 contrast vs #0A192F — passes WCAG AA */

  /* Typography */
  --font-title: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;

  /* Spacing (8px base) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Borders */
  --border-subtle: 1px solid rgba(197, 160, 89, 0.15);
  --border-card: 1px solid rgba(197, 160, 89, 0.25);
  --border-active: 1px solid rgba(197, 160, 89, 0.6);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 8px 32px rgba(197, 160, 89, 0.12);
  --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.6);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* R4-24: Typographic scale */
  --fs-xs: 0.7rem;
  --fs-sm: 0.75rem;
  --fs-base: 0.875rem;
  --fs-lg: 1rem;
  --fs-xl: 1.1rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 2rem;

  /* R4-22: Additional shadow token */
  --shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.4);

  /* Semantic / Status colors */
  --color-success: #50c878;
  --color-success-dim: rgba(80, 200, 120, 0.12);
  --color-success-border: rgba(80, 200, 120, 0.25);
  --color-warning: #ffaa32;
  --color-warning-dim: rgba(255, 170, 50, 0.08);
  --color-warning-border: rgba(255, 170, 50, 0.2);
  --color-danger: #ff6464;
  --color-danger-dim: rgba(255, 100, 100, 0.12);
  --color-danger-strong: #ff5050;
  --color-info: #6496ff;
  --color-info-dim: rgba(100, 150, 255, 0.12);
  --color-info-border: rgba(100, 150, 255, 0.2);

  /* Overlay */
  --color-overlay: rgba(0, 0, 0, 0.7);

  /* Z-index scale */
  --z-base: 1;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-modal: 1000;
  --z-toast: 1100;

  /* Font weights */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* R4-23: Code block tokens */
  --color-code-bg: rgba(197, 160, 89, 0.08);
  --color-code-border: rgba(197, 160, 89, 0.2);
  --color-code-text: #CCD6F6;

  /* Borders & Muted */
  --color-border: rgba(197, 160, 89, 0.15);
  --color-muted: #8892B0;

  /* Layout */
  --nav-height: 56px;
  --filter-height: 48px;
}

/* ── Light Mode ────────────────────────────────────────────────── */

[data-theme="light"] {
  --color-bg: #F5F3EF;
  --color-bg-elevated: #FFFFFF;
  --color-surface: rgba(255, 255, 255, 0.9);
  --color-surface-hover: rgba(255, 255, 255, 1);
  --color-accent: #8B6914;
  --color-accent-dim: rgba(139, 105, 20, 0.15);
  --color-accent-glow: rgba(139, 105, 20, 0.08);
  --color-text: #1A202C;
  --color-text-muted: #4A5568;
  --color-text-faint: #A0AEC0;
  --border-subtle: 1px solid rgba(139, 105, 20, 0.1);
  --border-card: 1px solid rgba(139, 105, 20, 0.15);
  --border-active: 1px solid rgba(139, 105, 20, 0.4);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 6px 24px rgba(139, 105, 20, 0.1);
  --shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.12);
  --color-success: #27AE60;
  --color-success-dim: rgba(39, 174, 96, 0.1);
  --color-success-border: rgba(39, 174, 96, 0.25);
  --color-warning: #E67E22;
  --color-warning-dim: rgba(230, 126, 34, 0.08);
  --color-warning-border: rgba(230, 126, 34, 0.2);
  --color-danger: #C0392B;
  --color-danger-dim: rgba(192, 57, 43, 0.1);
  --color-danger-strong: #E74C3C;
  --color-info: #2980B9;
  --color-info-dim: rgba(41, 128, 185, 0.1);
  --color-info-border: rgba(41, 128, 185, 0.2);
  --color-border: rgba(0, 0, 0, 0.1);
  --color-muted: #666;
  --color-code-bg: rgba(139, 105, 20, 0.06);
  --color-code-border: rgba(139, 105, 20, 0.15);
  --color-code-text: #1A202C;
  --color-border: rgba(0, 0, 0, 0.1);
  --color-muted: #666;
}

/* ── Reset & Base ──────────────────────────────────────────────── */

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

html {
  font-size: var(--font-scale, 16px);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  padding-top: var(--nav-height);
  min-height: 100vh;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { opacity: 0.85; }

/* ── MA-02: Enhanced Focus-Visible States ─────────────────────── */

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav__tab:focus-visible,
.card:focus-visible,
[role="tab"]:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Screen-reader only utility ───────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── MA-07: Skip-to-content link ──────────────────────────────── */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: 200;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-sm);
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* ── MA-05: Reduced-motion toggle (manual) ────────────────────── */

.motion-toggle {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-xs);
  transition: color var(--transition-fast);
  line-height: 1;
}

.motion-toggle:hover {
  color: var(--color-accent);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-accent-dim); border-radius: 3px; }
* { scrollbar-width: thin; scrollbar-color: var(--color-accent-dim) transparent; }

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

/* ── Navigation ────────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  padding: 0 var(--space-lg);
  background: rgba(10, 25, 47, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: var(--border-subtle);
  transition: background var(--transition-normal), box-shadow var(--transition-normal);
}

.nav--scrolled {
  background: rgba(10, 25, 47, 0.97);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .nav { background: rgba(245, 243, 239, 0.9); }
[data-theme="light"] .nav--scrolled {
  background: rgba(245, 243, 239, 0.98);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* ── High Contrast Mode (MA-06) ──────────────────────────────── */

[data-theme="high-contrast"] {
  --color-bg: #000000;
  --color-bg-elevated: #0A0A0A;
  --color-surface: rgba(0, 0, 0, 0.95);
  --color-surface-hover: rgba(20, 20, 20, 1);
  --color-accent: #FFD700;
  --color-accent-dim: rgba(255, 215, 0, 0.35);
  --color-accent-glow: rgba(255, 215, 0, 0.2);
  --color-text: #FFFFFF;
  --color-text-muted: #E0E0E0;
  --color-text-faint: #AAAAAA;
  --border-subtle: 1px solid rgba(255, 255, 255, 0.25);
  --border-card: 1px solid rgba(255, 255, 255, 0.4);
  --border-active: 1px solid rgba(255, 215, 0, 0.8);
  --shadow-card: 0 4px 20px rgba(255, 215, 0, 0.1);
  --shadow-hover: 0 8px 32px rgba(255, 215, 0, 0.15);
  --shadow-elevated: 0 12px 40px rgba(255, 215, 0, 0.12);
  --color-success: #2ECC71;
  --color-warning: #F39C12;
  --color-danger: #E74C3C;
  --color-info: #3498DB;
  --color-code-bg: rgba(255, 215, 0, 0.1);
  --color-code-border: rgba(255, 255, 255, 0.3);
  --color-code-text: #FFFFFF;
}

[data-theme="high-contrast"] body { font-weight: 500; }
[data-theme="high-contrast"] .card__title,
[data-theme="high-contrast"] .brief__title,
[data-theme="high-contrast"] h1, [data-theme="high-contrast"] h2,
[data-theme="high-contrast"] h3 { font-weight: 700; }
[data-theme="high-contrast"] .nav { background: rgba(0, 0, 0, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
[data-theme="high-contrast"] .nav--scrolled { background: rgba(0, 0, 0, 0.98); box-shadow: 0 4px 24px rgba(255, 215, 0, 0.1); }
[data-theme="high-contrast"] .tag { border-color: rgba(255, 255, 255, 0.4); color: var(--color-text); }
[data-theme="high-contrast"] a { color: #FFD700; }
[data-theme="high-contrast"] :focus-visible { outline: 3px solid #FFD700; outline-offset: 3px; }

.nav__brand {
  font-family: var(--font-title);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--color-accent);
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}

.nav__tabs {
  display: flex;
  list-style: none;
  gap: var(--space-xs);
  margin: 0 auto;
  padding: 0;
}

.nav__tab {
  position: relative;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-text-muted);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  background: none;
  border: none;
  transition: color var(--transition-normal);
  white-space: nowrap;
}

.nav__tab::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: var(--color-accent);
  transition: width var(--transition-normal), left var(--transition-normal);
}

.nav__tab:hover { color: var(--color-text); }
.nav__tab:hover::after { width: 60%; left: 20%; }
.nav__tab.active { color: var(--color-accent); }
.nav__tab.active::after { width: 100%; left: 0; }

.nav__spacer { flex: 1; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px; height: 28px;
  background: none; border: none;
  cursor: pointer; padding: 2px;
  margin-right: var(--space-md);
}

.nav__hamburger-line {
  display: block;
  width: 100%; height: 2px;
  background: var(--color-text-muted);
  border-radius: 1px;
  transition: transform var(--transition-normal), opacity var(--transition-fast);
}

/* Search trigger & Theme toggle */
.search-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background: none;
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.search-trigger:hover { border-color: rgba(197, 160, 89, 0.4); color: var(--color-text); }

.search-trigger kbd {
  font-size: 0.7rem; padding: 1px 6px;
  background: rgba(197, 160, 89, 0.1);
  border-radius: 3px; color: var(--color-text-faint);
  font-family: var(--font-body);
}

.theme-toggle {
  background: none; border: none;
  font-size: 1.2rem; cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-xs);
  transition: color var(--transition-fast), transform var(--transition-fast);
  line-height: 1;
}

.theme-toggle:hover { color: var(--color-accent); transform: rotate(15deg); }

/* ── Stats Banner ──────────────────────────────────────────────── */

.stats-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  height: 36px;
  background: transparent;
  border-bottom: var(--border-subtle);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-text-faint);
}

.stats-banner__value { color: var(--color-text-muted); font-weight: 600; }

.stats-banner__sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.3;
}

/* ── Filter Bar ────────────────────────────────────────────────── */

/* ── View Preset Bar (FE-07) ────────────────────────────────── */

.preset-bar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-lg);
  background: var(--color-bg);
  border-bottom: var(--border-subtle);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.preset-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--color-accent);
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.08);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.preset-pill:hover {
  background: rgba(99, 102, 241, 0.18);
}

.preset-pill__delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.preset-pill__delete:hover {
  color: var(--color-danger);
  background: rgba(239, 68, 68, 0.15);
}

.filter-save-view {
  color: var(--color-accent) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  white-space: nowrap;
}

.filter-save-view:hover {
  background: rgba(99, 102, 241, 0.1) !important;
}

.save-view-inline {
  display: flex;
  align-items: center;
  gap: 4px;
}

.save-view-inline__input {
  width: 120px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.75rem;
}

.save-view-inline__input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.save-view-inline__btn {
  height: 26px;
  padding: 0 10px;
  border: none;
  border-radius: 6px;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.save-view-inline__btn:hover {
  opacity: 0.9;
}

.save-view-inline__cancel {
  height: 26px;
  width: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1rem;
  cursor: pointer;
}

.save-view-inline__cancel:hover {
  color: var(--color-text);
}

/* ── Filter Bar ────────────────────────────────────────────────── */

.filter-bar {
  position: sticky;
  top: var(--nav-height);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--border-subtle);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.filter-bar::-webkit-scrollbar { height: 0; }

.filter-tag {
  display: inline-flex;
  align-items: center;
  height: 28px; padding: 0 12px;
  border: var(--border-card);
  border-radius: 14px;
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.7rem; font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer; white-space: nowrap;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.filter-tag:hover { color: var(--color-text); border-color: rgba(197, 160, 89, 0.4); }

.filter-tag.active {
  background: var(--color-accent-dim);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.filter-bar__spacer { flex: 1; min-width: var(--space-md); }

.filter-select {
  height: 28px; padding: 0 var(--space-sm);
  background: transparent;
  border: var(--border-card);
  border-radius: 14px;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1px;
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%238892B0'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  flex-shrink: 0;
  transition: border-color var(--transition-fast);
}

.filter-select:hover, .filter-select:focus { border-color: rgba(197, 160, 89, 0.4); }
.filter-select option { background: var(--color-bg-elevated); color: var(--color-text); }

.filter-clear {
  display: none;
  align-items: center;
  height: 28px; padding: 0 12px;
  border: 1px solid rgba(220, 80, 80, 0.3);
  border-radius: 14px;
  background: transparent; color: var(--color-danger);
  font-family: var(--font-body);
  font-size: 0.7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1px;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: all var(--transition-fast);
}

.filter-clear:hover { background: rgba(220, 80, 80, 0.1); }

.filter-dedup { display: flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; color: var(--color-muted); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.filter-dedup input[type="checkbox"] { accent-color: var(--color-accent); cursor: pointer; }

.filter-date {
  height: 28px; padding: 0 8px;
  background: transparent; border: var(--border-card); border-radius: 14px;
  color: var(--color-text-muted); font-family: var(--font-body); font-size: 0.7rem;
  cursor: pointer; flex-shrink: 0;
}
.filter-date::-webkit-calendar-picker-indicator { filter: invert(0.6); cursor: pointer; }
.filter-date-sep { color: var(--color-text-faint); font-size: 0.75rem; flex-shrink: 0; }

.filter-logic {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 1px;
  border: var(--border-card); color: var(--color-text-faint); cursor: pointer;
}
.filter-logic.active { background: var(--color-accent-dim); color: var(--color-accent); border-color: var(--color-accent); }

/* ── View Toggle ───────────────────────────────────────────────── */

.view-toggle { display: inline-flex; gap: 2px; margin-bottom: var(--space-md); }

.view-toggle__btn {
  width: 32px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: var(--border-card);
  color: var(--color-text-muted);
  font-size: 0.9rem; cursor: pointer;
  transition: all var(--transition-fast);
}

.view-toggle__btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.view-toggle__btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.view-toggle__btn:not(:first-child):not(:last-child) { border-radius: 0; }

.view-toggle__btn.active,
.view-toggle__btn:hover {
  background: var(--color-accent-dim);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ── Content Grid ──────────────────────────────────────────────── */

.main { padding: 0; }

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding: var(--space-lg);
}

@media (min-width: 768px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .card-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } }

/* ── Card Component ────────────────────────────────────────────── */

.card {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--border-card);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(197, 160, 89, 0.45);
  border-left-color: var(--color-accent);
}

.card__header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-md); margin-bottom: var(--space-sm);
}

.card__title {
  font-family: var(--font-body);
  font-size: var(--fs-base); font-weight: 600;
  color: var(--color-text); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin: 0;
}

.card__date { font-size: var(--fs-sm); color: var(--color-text-faint); white-space: nowrap; flex-shrink: 0; position: relative; }

/* MW-03: Deadline urgency color ramp */
.card__date--green  { color: var(--color-success); }
.card__date--amber  { color: var(--color-warning); }
.card__date--red    { color: var(--color-danger); font-weight: 600; }
.card__date--passed { color: var(--color-text-faint); text-decoration: line-through; opacity: 0.7; }

/* MW-07: Tooltip on relative dates */
[data-tooltip] { cursor: default; }
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  font-size: 0.7rem;
  white-space: nowrap;
  color: var(--color-text);
  background: var(--color-bg-elevated);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  z-index: 10;
  pointer-events: none;
}

.card__citations { color: var(--color-accent); font-weight: 500; font-size: 0.7rem; }

.card__new-badge {
  font-size: 0.55rem; font-weight: 700; letter-spacing: 1px;
  color: var(--color-bg); background: var(--color-accent);
  padding: 1px 6px; border-radius: 2px;
  text-transform: uppercase; flex-shrink: 0;
}

.read-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--color-text-faint); background: transparent;
  transition: all var(--transition-fast);
}
.read-dot--new { background: transparent; }
.read-dot--reading { background: #C5A059; border-color: #C5A059; }
.read-dot--read { background: #4ECDC4; border-color: #4ECDC4; }

.card__read-status { padding: 4px; cursor: pointer; }

.card__subtitle {
  font-size: 0.8rem; color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.card__body {
  font-size: 0.8rem; color: var(--color-text-muted);
  line-height: 1.5; opacity: 0.8;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: var(--space-md); flex: 1;
}

.card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-sm); }

.card__actions {
  display: flex; align-items: center; gap: var(--space-sm);
  padding-top: var(--space-sm); border-top: var(--border-subtle); margin-top: auto;
}

.card__star {
  background: none; border: none; font-size: 1rem; cursor: pointer;
  color: var(--color-text-faint); padding: 2px; line-height: 1;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.card__star:hover { color: var(--color-accent); }
.card__star--active { color: var(--color-accent); }
.card__star:active { transform: scale(1.3); }

.card__action {
  font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--color-text-muted); background: none; border: none;
  cursor: pointer; padding: 2px 4px;
  transition: color var(--transition-fast);
}

.card__action:hover { color: var(--color-accent); }
.card__detail-btn { margin-left: auto; }

/* ── Inline Card Notes (FE-06) ────────────────────────────────── */

.card__note-btn {
  position: relative;
}

.card__note-btn--has-note {
  color: var(--color-accent);
}

.card__note-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.card__note-area {
  padding: var(--space-xs) var(--space-sm) var(--space-sm);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-xs);
}

.card__note-input {
  width: 100%;
  padding: var(--space-sm);
  background: var(--color-accent-glow, rgba(99,102,241,0.04));
  border: var(--border-subtle, 1px solid var(--color-border));
  border-radius: var(--radius-sm, 6px);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.75rem;
  resize: vertical;
  min-height: 40px;
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}

.card__note-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.card__note-input::placeholder {
  color: var(--color-text-faint);
}

/* ── Tag Pills ─────────────────────────────────────────────────── */

.tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-body);
  font-size: 0.65rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--color-accent);
  border: 1px solid var(--color-accent-dim);
  border-radius: 3px; padding: 2px 8px;
  white-space: nowrap; line-height: 1.6;
}

.tag--source {
  background: var(--color-accent-glow);
  border-color: var(--color-accent-dim); font-weight: 600;
}

.tag--source-arxiv  { color: #E74C3C; border-color: rgba(231,76,60,0.3);  background: rgba(231,76,60,0.08); }
.tag--source-ejor   { color: #3498DB; border-color: rgba(52,152,219,0.3); background: rgba(52,152,219,0.08); }
.tag--source-or     { color: #9B59B6; border-color: rgba(155,89,182,0.3); background: rgba(155,89,182,0.08); }
.tag--source-informs{ color: #2ECC71; border-color: rgba(46,204,113,0.3); background: rgba(46,204,113,0.08); }
.tag--source-ts     { color: #E67E22; border-color: rgba(230,126,34,0.3); background: rgba(230,126,34,0.08); }

/* Reading time estimate */
.card__reading-time { font-size: 0.7rem; color: var(--color-text-faint); white-space: nowrap; flex-shrink: 0; margin-left: auto; }

/* Conference tier badges */
.tag--tier { font-weight: 700; letter-spacing: 0.5px; }
.tag--tier-as  { color: #FFD700; border-color: rgba(255,215,0,0.4); background: rgba(255,215,0,0.12); }
.tag--tier-a   { color: #2ECC71; border-color: rgba(46,204,113,0.4); background: rgba(46,204,113,0.10); }
.tag--tier-b   { color: #3498DB; border-color: rgba(52,152,219,0.3); background: rgba(52,152,219,0.08); }
.tag--tier-c   { color: #95A5A6; border-color: rgba(149,165,166,0.3); background: rgba(149,165,166,0.08); }

.version-badge {
  font-family: var(--font-title);
  font-size: 1.5rem; font-weight: 600;
  color: var(--color-accent); letter-spacing: -0.02em;
}

.card--software .card__title { font-weight: 600; font-size: 1rem; }

/* CFP badges */
.cfp-badge { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.cfp-badge--urgent { color: var(--color-accent); animation: pulse-gold 2s ease-in-out infinite; }
.cfp-badge--passed { color: var(--color-text-faint); text-decoration: line-through; }

/* Type badges */
.type-badge {
  display: inline-flex; align-items: center;
  font-size: 0.65rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  padding: 2px 8px; border-radius: 3px;
}

.type-badge--postdoc { color: #4ECDC4; border: 1px solid rgba(78,205,196,0.3); background: rgba(78,205,196,0.08); }
.type-badge--phd     { color: #9B59B6; border: 1px solid rgba(155,89,182,0.3); background: rgba(155,89,182,0.08); }
.type-badge--faculty { color: var(--color-accent); border: 1px solid var(--color-accent-dim); background: var(--color-accent-glow); }
.type-badge--industry{ color: #3498DB; border: 1px solid rgba(52,152,219,0.3); background: rgba(52,152,219,0.08); }

/* Conference metadata */
.conf-meta { margin-bottom: var(--space-md); }
.conf-meta__row { display: flex; align-items: center; gap: var(--space-sm); font-size: 0.8rem; color: var(--color-text-muted); padding: 2px 0; }
.conf-meta__icon { font-size: 0.85rem; width: 20px; text-align: center; flex-shrink: 0; }

.card--urgent { animation: pulse-border 2s ease-in-out infinite; }

/* ── List View ─────────────────────────────────────────────────── */

.list-view { display: flex; flex-direction: column; gap: 2px; }

.list-row {
  display: flex; align-items: center; gap: var(--space-md);
  height: 72px; padding: 0 var(--space-lg);
  background: var(--color-surface);
  border: var(--border-subtle);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.list-row:hover { background: var(--color-surface-hover); box-shadow: var(--shadow-hover); }

.list-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list-row__title { font-size: 0.875rem; font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row__authors { font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row__source { flex-shrink: 0; }
.list-row__date { font-size: 0.7rem; color: var(--color-text-faint); white-space: nowrap; flex-shrink: 0; }

/* ── Search Modal ──────────────────────────────────────────────── */

.search-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 15vh;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.search-modal.open { opacity: 1; visibility: visible; }

.search-modal__box {
  width: 100%; max-width: 640px;
  background: var(--color-bg-elevated);
  border: var(--border-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal); overflow: hidden;
  transform: translateY(-12px) scale(0.98);
  transition: transform var(--transition-normal);
}

.search-modal.open .search-modal__box { transform: translateY(0) scale(1); }

.search-modal__input-wrap {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--border-subtle);
}

.search-modal__icon { font-size: 1.2rem; color: var(--color-text-faint); flex-shrink: 0; }

.search-modal__input {
  flex: 1; height: 48px;
  background: none; border: none;
  font-family: var(--font-body); font-size: 1rem;
  color: var(--color-text); outline: none;
}

.search-modal__input::placeholder { color: var(--color-text-faint); }

.search-modal__results { max-height: 400px; overflow-y: auto; padding: var(--space-sm); }

.search-modal__empty { padding: var(--space-xl); text-align: center; font-size: 0.85rem; color: var(--color-text-faint); }

.search-modal__hint {
  padding: var(--space-sm) var(--space-lg);
  border-top: var(--border-subtle);
  font-size: 0.7rem; color: var(--color-text-faint); text-align: right;
}

.search-modal__hint kbd {
  padding: 1px 5px; background: rgba(197, 160, 89, 0.1);
  border-radius: 3px; font-family: var(--font-body); font-size: 0.65rem;
}

.search-result {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  cursor: pointer; border-left: 2px solid transparent;
  transition: all var(--transition-fast);
}

.search-result:hover,
.search-result--highlighted { background: var(--color-accent-glow); border-left-color: var(--color-accent); }

.search-result__title { font-size: var(--fs-base); font-weight: 500; color: var(--color-text); margin-bottom: 2px; }
.search-result__meta { font-size: var(--fs-sm); color: var(--color-text-muted); }
.search-result__tags { color: var(--color-accent); opacity: 0.7; }

/* ── Detail Modal ──────────────────────────────────────────────── */

.modal-detail-box { max-width: 600px; max-height: 80vh; overflow-y: auto; padding: var(--space-xl); }

.modal-detail__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-lg); }

.modal-detail__title {
  font-family: var(--font-title);
  font-size: 1.4rem; font-weight: 600;
  color: var(--color-text); line-height: 1.3;
  flex: 1; margin-right: var(--space-md);
}

.modal-detail__close {
  background: none; border: none; font-size: 1.5rem;
  color: var(--color-text-muted); cursor: pointer; padding: 0; line-height: 1;
  transition: color var(--transition-fast);
}

.modal-detail__close:hover { color: var(--color-accent); }

.modal-meta {
  margin-bottom: var(--space-lg); padding: var(--space-md);
  background: var(--color-accent-glow); border-radius: var(--radius-sm);
}

.modal-meta__row { display: flex; gap: var(--space-md); padding: 4px 0; font-size: 0.8rem; }

.modal-meta__label {
  font-weight: 500; color: var(--color-text-faint);
  text-transform: uppercase; letter-spacing: 1px; font-size: 0.7rem;
  min-width: 80px; flex-shrink: 0;
}

.modal-meta__value { color: var(--color-text-muted); word-break: break-word; }

.modal-detail__body { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--space-lg); }

.modal-detail__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-lg); }

.modal-detail__actions { display: flex; gap: var(--space-md); }

.modal-detail__watchlist,
.modal-detail__link {
  padding: var(--space-sm) var(--space-lg);
  border: var(--border-card); border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text-muted);
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1px;
  cursor: pointer; transition: all var(--transition-fast); text-align: center;
}

.modal-detail__watchlist:hover,
.modal-detail__link:hover {
  background: var(--color-accent-dim); color: var(--color-accent); border-color: var(--color-accent);
}

/* ── Watchlist Toolbar ─────────────────────────────────────────── */

.watchlist-toolbar { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-bottom: var(--border-subtle); }
.watchlist-toolbar__count { font-size: 0.8rem; color: var(--color-text-muted); font-weight: 500; }

.watchlist-toolbar__btn {
  padding: var(--space-xs) var(--space-md);
  border: var(--border-card); border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text-muted);
  font-family: var(--font-body); font-size: 0.75rem;
  cursor: pointer; transition: all var(--transition-fast);
}

.watchlist-toolbar__btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.watchlist-toolbar__btn--danger:hover { border-color: var(--color-danger); color: var(--color-danger); }
.watchlist-toolbar__dedup { display: flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; color: var(--color-text-muted); cursor: pointer; white-space: nowrap; }
.watchlist-toolbar__dedup input[type="checkbox"] { accent-color: var(--color-accent); cursor: pointer; }

/* ── Empty State ───────────────────────────────────────────────── */

.empty-state {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--space-3xl) var(--space-lg); min-height: 300px;
}

.empty-state__icon { font-size: 3rem; margin-bottom: var(--space-lg); color: var(--color-accent); opacity: 0.6; }

.empty-state__title {
  font-family: var(--font-title);
  font-size: 1.3rem; font-weight: 600;
  color: var(--color-text); margin-bottom: var(--space-sm);
}

.empty-state__text { font-size: 0.875rem; color: var(--color-text-muted); max-width: 400px; line-height: 1.6; }

.empty-state__browse {
  display: inline-block;
  margin-top: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  font-size: 0.875rem;
  color: var(--color-accent);
  text-decoration: none;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  transition: background 0.2s, color 0.2s;
}
.empty-state__browse:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* ── Skeleton Loading ──────────────────────────────────────────── */

.skeleton {
  background: var(--color-surface);
  border: var(--border-subtle);
  border-left: 3px solid var(--color-accent-dim);
  border-radius: var(--radius-md);
  padding: var(--space-lg); overflow: hidden;
}

.skeleton__line {
  height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--color-bg-elevated) 25%, rgba(197,160,89,0.06) 50%, var(--color-bg-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  margin-bottom: var(--space-sm);
}

.skeleton__line--title   { width: 70%; height: 16px; }
.skeleton__line--subtitle{ width: 50%; height: 10px; }
.skeleton__line--body    { width: 90%; }
.skeleton__line--tags    { width: 40%; height: 10px; margin-top: var(--space-md); }

/* Solver detail skeleton */
.solver-detail-skeleton { padding: 2rem; }
.skeleton-line {
  height: 1rem;
  margin-bottom: 0.75rem;
  background: linear-gradient(90deg, rgba(136,146,176,0.08) 25%, rgba(136,146,176,0.15) 50%, rgba(136,146,176,0.08) 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.5s infinite;
}

/* ── Datasets ──────────────────────────────────────────────────── */

.datasets-container { padding: var(--space-lg); }
.datasets__title { font-family: var(--font-title); font-size: 1.8rem; font-weight: 600; color: var(--color-text); text-align: center; margin-bottom: var(--space-xs); }
.datasets__subtitle { font-size: 0.85rem; color: var(--color-text-muted); text-align: center; margin-bottom: var(--space-xl); }
.datasets-category { margin-bottom: var(--space-xl); }
.datasets-category__name { font-family: var(--font-title); font-size: 1.2rem; font-weight: 600; color: var(--color-accent); margin-bottom: var(--space-md); padding-bottom: var(--space-xs); border-bottom: var(--border-subtle); }
.datasets__instances { font-size: 0.7rem; color: var(--color-accent); font-weight: 500; white-space: nowrap; }

/* ── Digest ────────────────────────────────────────────────────── */

.digest-placeholder { max-width: 600px; margin: var(--space-2xl) auto; text-align: center; }
.digest-placeholder__header { margin-bottom: var(--space-xl); }
.digest-placeholder__title { font-family: var(--font-title); font-size: 1.8rem; font-weight: 600; color: var(--color-text); margin-bottom: var(--space-sm); }
.digest-placeholder__subtitle { font-family: var(--font-title); font-size: 1rem; font-style: italic; color: var(--color-text-muted); }

.digest-preview { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-bottom: var(--space-xl); }

.digest-preview__card {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md); border: var(--border-subtle); border-radius: var(--radius-md); text-align: left;
}

.digest-preview__icon { font-size: 1.5rem; flex-shrink: 0; }
.digest-preview__card-title { font-size: 0.8rem; font-weight: 600; color: var(--color-text); margin-bottom: 2px; }
.digest-preview__card-desc { font-size: 0.75rem; color: var(--color-text-muted); }

.digest-placeholder__note {
  font-size: 0.8rem; color: var(--color-text-faint);
  padding: var(--space-md); background: var(--color-accent-glow);
  border: var(--border-subtle); border-radius: var(--radius-sm);
}

.digest-list { max-width: 700px; margin: 0 auto; padding: var(--space-lg); }
.digest-list__title { font-family: var(--font-title); font-size: 1.8rem; font-weight: 600; color: var(--color-text); text-align: center; margin-bottom: var(--space-xs); }
.digest-list__subtitle { font-size: 0.85rem; color: var(--color-text-muted); text-align: center; margin-bottom: var(--space-xl); }

.digest-day {
  position: relative; margin-bottom: var(--space-lg);
  border: var(--border-card); border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md); background: var(--color-surface);
  backdrop-filter: blur(12px); overflow: hidden;
}

.digest-day__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); border-bottom: var(--border-subtle); }
.digest-day__date { font-family: var(--font-title); font-size: 1.1rem; font-weight: 600; color: var(--color-text); }
.digest-day__stats { font-size: 0.75rem; color: var(--color-accent); font-weight: 500; }
.digest-day__body { padding: var(--space-md) var(--space-lg); }
.digest-section { margin-bottom: var(--space-md); }
.digest-section:last-child { margin-bottom: 0; }
.digest-section__header { font-size: 0.7rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-sm); padding-bottom: var(--space-xs); border-bottom: 1px solid rgba(197,160,89,0.1); }

.digest-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) 0; cursor: pointer; border-radius: 3px; transition: background var(--transition-fast); }
.digest-item:hover { background: var(--color-accent-glow); }
.digest-item__title { font-size: 0.8rem; color: var(--color-text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.digest-item__meta { font-size: 0.65rem; color: var(--color-accent); white-space: nowrap; flex-shrink: 0; opacity: 0.8; }

/* ── Footer ────────────────────────────────────────────────────── */

.footer {
  text-align: center; padding: var(--space-xl) 0;
  border-top: var(--border-subtle);
  font-size: 0.7rem; color: var(--color-text-faint); letter-spacing: 0.5px;
}

.footer__links { display: flex; justify-content: center; gap: var(--space-md); margin-bottom: var(--space-sm); }
.footer__links a { color: var(--color-text-faint); transition: color var(--transition-fast); }
.footer__links a:hover { color: var(--color-accent); }
.footer__sep { color: var(--color-accent); opacity: 0.3; }

/* ── Scroll to Top ─────────────────────────────────────────────── */

.scroll-top {
  position: fixed; bottom: var(--space-xl); right: var(--space-xl);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-elevated);
  backdrop-filter: blur(12px);
  border: var(--border-card); border-radius: 50%;
  color: var(--color-text-muted); font-size: 1rem;
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all var(--transition-normal); z-index: 50;
}

.scroll-top--visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ── Animations ────────────────────────────────────────────────── */

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

@keyframes pulse-gold {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

@keyframes pulse-border {
  0%, 100% { border-color: rgba(197, 160, 89, 0.25); }
  50%      { border-color: rgba(197, 160, 89, 0.6); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes card-new-glow {
  0%   { box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.6); border-color: rgba(197, 160, 89, 0.7); }
  50%  { box-shadow: 0 0 12px 2px rgba(197, 160, 89, 0.35); border-color: rgba(197, 160, 89, 0.5); }
  100% { box-shadow: 0 0 0 0 rgba(197, 160, 89, 0); border-color: var(--border-color, rgba(255,255,255,0.06)); }
}

.card-new {
  animation: card-new-glow 2s ease-out forwards;
}

[data-animate] { animation: fadeInUp 0.4s ease forwards; opacity: 0; }

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

/* MA-05: Manual reduced-motion via data attribute */
[data-reduced-motion="true"] *,
[data-reduced-motion="true"] *::before,
[data-reduced-motion="true"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

[data-reduced-motion="true"] {
  scroll-behavior: auto !important;
}

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .nav { padding: 0 var(--space-md); }
  .nav__hamburger { display: flex; }

  .nav__tabs {
    display: none; position: absolute;
    top: var(--nav-height); left: 0; right: 0;
    flex-direction: column;
    background: var(--color-bg);
    border-bottom: var(--border-subtle);
    padding: var(--space-sm) 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  }

  .nav__tabs--open { display: flex; }
  .nav__tab { padding: var(--space-md) var(--space-lg); text-align: left; }
  .nav__tab::after { display: none; }
  .nav__tab.active { border-left: 2px solid var(--color-accent); }
  .nav__spacer { display: none; }
  .search-trigger span { display: none; }
  .filter-bar { padding: var(--space-sm) var(--space-md); }
  .card-grid { padding: var(--space-md); gap: var(--space-md); }
  .card { padding: var(--space-md); }
  .digest-preview { grid-template-columns: 1fr; }
  .search-modal__box { margin: 0 var(--space-md); }
  .modal-detail-box { padding: var(--space-lg); }

  .list-row {
    height: auto; min-height: 60px;
    padding: var(--space-sm) var(--space-md);
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .stats-banner { font-size: 0.65rem; letter-spacing: 1px; }
}

/* ── Card Cite Button ─────────────────────────────────────────── */

.card__cite {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--color-accent); background: none; border: none;
  cursor: pointer; padding: 2px 4px;
  transition: color var(--transition-fast), background var(--transition-fast);
  border-radius: var(--radius-sm);
}

.card__cite:hover { background: var(--color-accent-dim); }

.card__cite-feedback {
  color: var(--color-accent) !important;
  background: var(--color-accent-dim) !important;
}

/* ── Search Type Tabs ─────────────────────────────────────────── */

.search-type-tabs {
  display: flex; gap: 2px;
  padding: var(--space-sm) var(--space-sm) 0 var(--space-sm);
  border-bottom: var(--border-subtle);
  margin-bottom: var(--space-xs);
}

.search-type-tab {
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-body);
  font-size: 0.7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--color-text-muted);
  background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; transition: all var(--transition-fast);
}

.search-type-tab:hover { color: var(--color-text); }
.search-type-tab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }

.search-result__match { color: var(--color-accent); opacity: 0.7; font-style: italic; }

/* ── Trends Module ────────────────────────────────────────────── */

.trends-container {
  max-width: 900px; margin: 0 auto; padding: var(--space-lg);
}

.trends-header {
  font-family: var(--font-title);
  font-size: 1.8rem; font-weight: 600;
  color: var(--color-text); text-align: center;
  margin-bottom: var(--space-xl);
}

.trends-stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md); margin-bottom: var(--space-xl);
}

.trends-stat-card {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--space-lg) var(--space-md);
  background: var(--color-surface);
  border: var(--border-card); border-radius: var(--radius-md);
  text-align: center;
}

.trends-stat-value {
  font-family: var(--font-title);
  font-size: 2rem; font-weight: 600;
  color: var(--color-accent); margin-bottom: var(--space-xs);
}

.trends-stat-label {
  font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--color-text-muted);
}

.trends-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-xl); margin-bottom: var(--space-xl);
}

@media (max-width: 768px) {
  .trends-stats-row { grid-template-columns: repeat(2, 1fr); }
  .trends-grid { grid-template-columns: 1fr; }
}

.trends-chart {
  background: var(--color-surface); border: var(--border-card);
  border-radius: var(--radius-md); padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.trends-chart__title {
  font-family: var(--font-body);
  font-size: 0.85rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--color-text-muted); margin-bottom: var(--space-md);
}

.trends-sparkline-labels {
  display: flex; justify-content: space-between;
  font-size: 0.65rem; color: var(--color-text-faint);
  margin-top: var(--space-xs);
}

.trends-list {
  background: var(--color-surface); border: var(--border-card);
  border-radius: var(--radius-md); padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.trends-rank-row {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-xs) 0;
  border-bottom: var(--border-subtle);
}

.trends-rank-row:last-child { border-bottom: none; }

.trends-rank-num {
  font-size: 0.75rem; font-weight: 600;
  color: var(--color-accent); width: 20px; text-align: center;
}

.trends-rank-label {
  flex: 1; font-size: 0.8rem; color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.trends-rank-count {
  font-size: 0.75rem; font-weight: 600;
  color: var(--color-text-muted);
}

/* ── Table View ───────────────────────────────────────────────── */

.table-view-wrapper {
  overflow-x: auto; padding: 0 var(--space-md);
}

.table-view {
  width: 100%; border-collapse: collapse;
  font-size: 0.8rem;
}

.table-view th {
  position: sticky; top: calc(var(--nav-height) + var(--filter-height));
  background: var(--color-bg-elevated);
  font-family: var(--font-body);
  font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--color-text-muted);
  padding: var(--space-sm) var(--space-md);
  text-align: left; white-space: nowrap;
  border-bottom: var(--border-active);
  z-index: 10;
  user-select: none;
}

.table-view th[data-sort] { cursor: pointer; }
.table-view th[data-sort]:hover { color: var(--color-accent); }

.table-view th.sorted-asc::after { content: ' \u25B2'; font-size: 0.6rem; color: var(--color-accent); }
.table-view th.sorted-desc::after { content: ' \u25BC'; font-size: 0.6rem; color: var(--color-accent); }

.table-view td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-subtle);
  color: var(--color-text-muted);
  vertical-align: top;
}

.table-view__row:hover td { background: var(--color-accent-glow); }

.table-view__title {
  color: var(--color-text); font-weight: 500;
  max-width: 400px;
}

/* ── Nav Badge ────────────────────────────────────────────────── */

.nav__badge {
  display: none; /* hidden by default, shown via JS */
  align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--color-accent);
  color: var(--color-bg); font-size: 0.6rem; font-weight: 700;
  border-radius: 8px;
  position: relative; top: -2px;
  margin-left: 4px;
}

/* ── Nav Prefs Button ─────────────────────────────────────────── */

.nav__prefs {
  background: none; border: none;
  font-size: 1.1rem; cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-xs);
  transition: color var(--transition-fast), transform var(--transition-fast);
  line-height: 1;
}

.nav__prefs:hover { color: var(--color-accent); transform: rotate(60deg); }

/* ── Help Modal ───────────────────────────────────────────────── */

.help-modal__box {
  max-width: 480px; padding: var(--space-xl);
}

.help-modal__header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-lg);
}

.help-modal__title {
  font-family: var(--font-title);
  font-size: 1.3rem; font-weight: 600;
  color: var(--color-text);
}

.help-modal__content {
  display: flex; flex-direction: column; gap: var(--space-lg);
}

.help-modal__group h3 {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--color-accent); margin-bottom: var(--space-sm);
}

.help-modal__row {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-xs) 0;
  font-size: 0.85rem; color: var(--color-text-muted);
}

.help-modal__row kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 24px; padding: 0 6px;
  background: var(--color-accent-glow);
  border: var(--border-subtle); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 600;
  color: var(--color-text-muted);
}

/* ── Watchlist Note ───────────────────────────────────────────── */

.watchlist-card-wrapper {
  display: flex; flex-direction: column;
}

.watchlist-note {
  padding: var(--space-xs) var(--space-sm);
}

.watchlist-note__input {
  width: 100%; padding: var(--space-sm);
  background: var(--color-accent-glow);
  border: var(--border-subtle); border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-family: var(--font-body); font-size: 0.75rem;
  resize: vertical; min-height: 40px;
  transition: border-color var(--transition-fast);
}

.watchlist-note__input:focus {
  outline: none; border-color: var(--color-accent);
}

.watchlist-note__input::placeholder { color: var(--color-text-faint); }

/* ── Preferences Panel (placeholder) ─────────────────────────── */

.pref-panel {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.pref-panel.open { opacity: 1; visibility: visible; }

.pref-panel__box {
  width: 100%; max-width: 400px;
  background: var(--color-bg-elevated);
  border: var(--border-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal); padding: var(--space-xl);
}

/* ── Print Stylesheet ─────────────────────────────────────────── */

@media print {
  /* ── Hide non-printable UI ──────────────────────────────────── */
  .nav, .footer, .filter-bar, .search-modal, .help-modal,
  .welcome-modal, .onboarding-modal, .scroll-top, .stats-banner, .theme-toggle,
  .search-trigger, .nav__prefs, #filterBarContainer,
  .card__actions, .view-toggle, .watchlist-toolbar,
  #detailModal, #changelogModal, #helpModal { display: none !important; }

  /* ── Page setup (A4) ────────────────────────────────────────── */
  @page {
    size: A4;
    margin: 18mm 15mm 18mm 15mm;
  }

  /* ── Base reset ─────────────────────────────────────────────── */
  html, body {
    padding: 0; margin: 0;
    background: #fff !important; color: #000 !important;
    font-size: 11pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .main { padding: 0; margin: 0; max-width: 100%; }

  /* ── Cards & data rows ──────────────────────────────────────── */
  .card, .list-row, .table-view td, .trends-container {
    background: #fff !important; color: #000 !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  .card-grid {
    display: block !important;
  }
  .card-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 12pt;
  }

  /* ── Typography ─────────────────────────────────────────────── */
  .card__title, .list-row__title, .table-view__title {
    color: #000 !important;
  }

  .tag {
    border-color: #999 !important;
    color: #333 !important;
    background: transparent !important;
  }

  /* ── Links: show URLs ───────────────────────────────────────── */
  a { color: #000 !important; text-decoration: underline; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
  a[href^="#"]::after,
  a[href^="javascript"]::after,
  a[href^="data:"]::after { content: ""; }

  /* ── Remove decorative styles ───────────────────────────────── */
  *, *::before, *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* =========================================================================
   Feature Additions
   ========================================================================= */

/* --- Software repo stats --- */
.card__repo-stats {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-left: var(--space-xs);
  vertical-align: middle;
}

.tag--license {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
  font-weight: 600;
}

/* --- Hot Topics word cloud --- */
.hot-topics-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  align-items: baseline;
  padding: var(--space-sm) 0;
  line-height: 1.6;
}

.hot-topic-word {
  color: var(--color-accent);
  cursor: default;
  transition: opacity 0.2s;
  font-family: var(--font-body);
}

.hot-topic-word:hover {
  opacity: 1 !important;
  text-decoration: underline;
}

/* --- Data Freshness Indicator --- */
.freshness-ok    { color: var(--color-accent); }
.freshness-warn  { color: var(--color-warning); }
.freshness-stale { color: var(--color-danger); }

.footer__sources {
  font-size: 0.75rem;
  color: var(--color-text-faint);
  margin-top: var(--space-xs);
}

.footer__sources-ok { color: var(--color-accent); }
.footer__sources-err { color: var(--color-danger); }

/* --- Onboarding Interest Tags --- */
.onboarding-interests {
  margin-top: var(--space-md);
}

.onboarding-interests h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

.onboarding-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.onboarding-tag {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-body);
}

.onboarding-tag:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.onboarding-tag.selected {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}

/* --- Awards Section --- */
.awards-section {
  margin-top: var(--space-xl);
}

.awards-section__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.awards-section__subtitle {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
}

/* --- Blogs Section --- */
.blogs-section {
  margin-top: var(--space-xl);
}

.blogs-section__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.blogs-section__subtitle {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
}

.card__author {
  font-size: 0.8rem;
  color: var(--color-text-faint);
  font-style: italic;
}

/* ── Welcome Modal ─────────────────────────────────────────────── */

.welcome-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

.welcome-modal__box {
  width: 90%; max-width: 520px;
  background: var(--color-bg-elevated);
  border: var(--border-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
}

.welcome-modal__title {
  font-family: var(--font-title);
  font-size: 1.8rem; font-weight: 600;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
  letter-spacing: 1px;
}

.welcome-modal__text {
  font-size: 0.9rem; color: var(--color-text-muted);
  line-height: 1.6; margin-bottom: var(--space-lg);
}

.welcome-modal__features {
  list-style: none; text-align: left; padding: 0;
  margin-bottom: var(--space-xl);
}

.welcome-modal__features li {
  font-size: 0.82rem; color: var(--color-text-muted);
  padding: var(--space-xs) 0;
  border-bottom: var(--border-subtle);
}

.welcome-modal__features li:last-child { border-bottom: none; }

.welcome-modal__dismiss {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-sm) var(--space-xl);
  background: var(--color-accent); color: var(--color-bg);
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  border: none; border-radius: var(--radius-md);
  cursor: pointer; transition: all var(--transition-fast);
}

.welcome-modal__dismiss:hover { opacity: 0.9; transform: translateY(-1px); }

/* ── Onboarding Modal (ER-08) ─────────────────────────────────── */

.onboarding-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

.onboarding-modal__box {
  width: 90%; max-width: 500px;
  background: var(--color-bg-elevated);
  border: var(--border-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  text-align: center;
  position: relative;
}

.onboarding-modal__steps {
  display: flex; justify-content: center; gap: 8px;
  margin-bottom: var(--space-lg);
}

.onboarding-modal__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-border);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.onboarding-modal__dot.active {
  background: var(--color-accent);
  transform: scale(1.3);
}

.onboarding-modal__page {
  display: none;
}

.onboarding-modal__page.active {
  display: block;
  animation: onboarding-fade 0.3s ease;
}

@keyframes onboarding-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.onboarding-modal__title {
  font-family: var(--font-title);
  font-size: 1.5rem; font-weight: 600;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.5px;
}

.onboarding-modal__subtitle {
  font-size: 1rem; font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.onboarding-modal__text {
  font-size: 0.88rem; color: var(--color-text-muted);
  line-height: 1.65;
}

.onboarding-modal__features {
  list-style: none; text-align: left; padding: 0;
  margin: var(--space-md) 0;
}

.onboarding-modal__features li {
  font-size: 0.84rem; color: var(--color-text-muted);
  padding: var(--space-xs) 0;
  border-bottom: var(--border-subtle);
  line-height: 1.5;
}

.onboarding-modal__features li:last-child { border-bottom: none; }

.onboarding-modal__features li strong {
  color: var(--color-text);
}

.onboarding-modal__tips {
  display: flex; flex-direction: column; gap: var(--space-sm);
  text-align: left;
  margin: var(--space-md) 0;
}

.onboarding-modal__tip {
  display: flex; align-items: center; gap: var(--space-md);
  font-size: 0.88rem; color: var(--color-text-muted);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-accent-glow);
  border-radius: var(--radius-sm);
}

.onboarding-modal__tip kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 24px; padding: 0 6px;
  background: var(--color-bg-elevated);
  border: var(--border-subtle); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 600;
  color: var(--color-text-muted);
}

.onboarding-modal__nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--border-subtle);
}

.onboarding-modal__skip {
  background: none; border: none; cursor: pointer;
  color: var(--color-text-muted); font-size: 0.82rem;
  font-family: var(--font-body);
  padding: var(--space-xs) var(--space-sm);
  transition: color var(--transition-fast);
}

.onboarding-modal__skip:hover {
  color: var(--color-text);
}

.onboarding-modal__next {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-sm) var(--space-xl);
  background: var(--color-accent); color: var(--color-bg);
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  border: none; border-radius: var(--radius-md);
  cursor: pointer; transition: all var(--transition-fast);
}

.onboarding-modal__next:hover {
  opacity: 0.9; transform: translateY(-1px);
}

/* ── Changelog Modal ───────────────────────────────────────────── */

.changelog-modal__box { max-height: 80vh; display: flex; flex-direction: column; }

.changelog-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--border-subtle);
}

.changelog-modal__title {
  font-family: var(--font-title);
  font-size: 1.3rem; font-weight: 600;
  color: var(--color-accent);
}

.changelog-modal__close {
  background: none; border: none;
  font-size: 1.5rem; color: var(--color-text-faint);
  cursor: pointer; line-height: 1; padding: 4px;
}

.changelog-modal__close:hover { color: var(--color-text); }

.changelog-modal__content {
  padding: var(--space-md) var(--space-lg);
  overflow-y: auto; max-height: 60vh;
}

.changelog-version {
  margin-bottom: var(--space-lg);
}

.changelog-version__header {
  display: flex; align-items: baseline; gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.changelog-version__tag {
  font-family: var(--font-title); font-size: 1.1rem; font-weight: 600;
  color: var(--color-accent);
}

.changelog-version__date {
  font-size: 0.75rem; color: var(--color-text-faint);
}

.changelog-version__list {
  list-style: none; padding: 0;
}

.changelog-version__list li {
  font-size: 0.8rem; color: var(--color-text-muted);
  padding: 3px 0 3px 16px;
  position: relative;
}

.changelog-version__list li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent-dim);
}

.footer__version-link {
  color: var(--color-text-faint);
  transition: color var(--transition-fast);
  cursor: pointer;
}

.footer__version-link:hover { color: var(--color-accent); }

/* ── Highly-Cited Paper (#51) ─────────────────────────────────── */

.card--cited {
  border-top: 2px solid var(--color-accent);
  box-shadow: var(--shadow-card), 0 -2px 12px rgba(197, 160, 89, 0.15);
}

.citation-badge {
  display: inline-flex; align-items: center;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--color-accent);
  background: var(--color-accent-glow);
  border: 1px solid var(--color-accent-dim);
  border-radius: 10px;
  padding: 1px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Software Stats Row (#64-65) ──────────────────────────────── */

.software-stats {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.license-badge {
  display: inline-flex; align-items: center;
  font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--color-bg);
  background: var(--color-accent);
  border-radius: 3px;
  padding: 1px 6px;
}

/* ── Breaking Changes Badge (#67) ─────────────────────────────── */

.breaking-badge {
  display: inline-flex; align-items: center;
  font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: #E74C3C;
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid rgba(231, 76, 60, 0.3);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: var(--space-xs);
}

/* ── NEW Badge for Opportunities (#86) ────────────────────────── */

.new-badge {
  display: inline-flex; align-items: center;
  font-size: 0.55rem; font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-accent);
  padding: 1px 6px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Format Badge for Conferences (#27) ───────────────────────── */

.format-badge {
  display: inline-flex; align-items: center;
  font-size: 0.6rem; font-weight: 600;
  text-transform: capitalize; letter-spacing: 0.5px;
  color: var(--color-text-muted);
  background: var(--color-accent-glow);
  border: 1px solid var(--color-accent-dim);
  border-radius: 10px;
  padding: 1px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── PDF Link on Card (#47) ───────────────────────────────────── */

.card__pdf {
  font-weight: 600;
  color: var(--color-danger) !important;
}

.card__pdf:hover {
  color: var(--color-danger) !important; opacity: 0.85;
}

/* ── Report Issue Flag (#115) ─────────────────────────────────── */

.card__report {
  font-size: 0.7rem;
  opacity: 0.4;
  transition: opacity var(--transition-fast);
}

.card__report:hover {
  opacity: 1;
}

/* ── Happening This Week Banner (#23) ─────────────────────────── */

.week-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-accent-glow);
  border-bottom: 1px solid var(--color-accent-dim);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-accent);
  text-align: center;
}

.week-banner__close {
  background: none;
  border: none;
  color: var(--color-text-faint);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color var(--transition-fast);
}

.week-banner__close:hover {
  color: var(--color-text);
}

/* ── Changelog Page (#117) ────────────────────────────────────── */

.changelog-page {
  max-width: 700px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
}

.changelog-page__title {
  font-family: var(--font-title);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--space-xs);
}

.changelog-page__subtitle {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-xl);
}

/* ── "More" Dropdown Nav ──────────────────────────────────────── */

.nav__more {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__more-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
  user-select: none;
}

.nav__more-trigger:hover {
  color: var(--color-accent);
  background: var(--color-accent-glow);
}

.nav__more-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  min-width: 160px;
  background: var(--color-bg-elevated);
  border: var(--border-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-xs) 0;
  list-style: none;
  margin: 0;
}

.nav__more:hover .nav__more-menu,
.nav__more:focus-within .nav__more-menu {
  display: block;
}

.nav__more-menu .nav__tab {
  display: block;
  padding: var(--space-xs) var(--space-md);
  font-size: 0.8rem;
  white-space: nowrap;
}

.nav__more-menu .nav__tab:hover {
  background: var(--color-accent-glow);
}

/* Highlight More trigger when a sub-tab is active */
.nav__more:has(.nav__tab.active) .nav__more-trigger {
  color: var(--color-accent);
}

/* ── Funding Card Accent (#7) ─────────────────────────────────── */

.card--funding {
  border-left: 3px solid #2ECC71;
}

.agency-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-bg);
  background: #2ECC71;
  border-radius: 3px;
  padding: 1px 6px;
  flex-shrink: 0;
}

.funding-amount {
  font-weight: 600;
  color: #2ECC71;
}

.card__action--funding {
  color: #2ECC71 !important;
}

.card__action--funding:hover {
  color: #27AE60 !important;
}

/* ── Award Card Accent (#9) ───────────────────────────────────── */

.card--award {
  border-left: 3px solid #9B59B6;
}

.org-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-bg);
  background: #9B59B6;
  border-radius: 3px;
  padding: 1px 6px;
  flex-shrink: 0;
}

/* ── Resource Card Styles (#10) ───────────────────────────────── */

.card--resource {
  border-left: 3px solid var(--color-accent);
}

.resource-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.resource-category-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  background: var(--color-accent-glow);
  border: 1px solid var(--color-accent-dim);
  border-radius: 10px;
  padding: 1px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.resources-container,
.funding-container,
.awards-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-lg);
}

.resources-category {
  margin-bottom: var(--space-xl);
}

.resources-category__name {
  font-family: var(--font-title);
  font-size: 1.15rem;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.section-title {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--space-xs);
}

.section-subtitle {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-xl);
}

/* ── Special Issues Section (#12) ─────────────────────────────── */

.special-issues-section {
  margin-top: var(--space-xl);
}

.special-issues-section__title {
  font-family: var(--font-title);
  font-size: 1.25rem;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.special-issues-section__subtitle {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
}

.card--special-issue {
  border-left: 3px solid #E67E22;
}

.journal-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-bg);
  background: #E67E22;
  border-radius: 3px;
  padding: 1px 6px;
  flex-shrink: 0;
}

/* ── Calendar Subscribe Button (#16) ──────────────────────────── */

.conf-cal-subscribe {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-md);
}

.card__action--cal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-accent-glow);
  border: 1px solid var(--color-accent-dim);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-accent) !important;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.card__action--cal:hover {
  background: var(--color-accent-dim);
}

/* ── Rolling Badge ────────────────────────────────────────────── */

.cfp-badge--rolling {
  color: var(--color-text-muted);
  border: 1px solid var(--color-text-faint);
  background: none;
}

/* ── Mobile: More dropdown becomes inline ─────────────────────── */

@media (max-width: 768px) {
  .nav__more-menu {
    position: static;
    display: block;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .nav__more {
    flex-direction: column;
    align-items: flex-start;
  }
  .nav__more-trigger {
    display: none;
  }
  .nav__more-menu .nav__tab {
    padding: var(--space-xs) var(--space-sm);
  }
}

/* ============================================
   PORID v2.0 — Hub Views (Pulse / Radar / Toolkit)
   ============================================ */

/* --- Pulse View --- */
.pulse { max-width: 900px; margin: 0 auto; }
.pulse__hero { text-align: center; padding: 3rem 1rem 2rem; }
.pulse__title { font-family: var(--font-title); font-size: 3rem; font-weight: 600; color: var(--color-accent); letter-spacing: 6px; text-transform: uppercase; margin-bottom: 0.25rem; }
.pulse__subtitle { font-family: var(--font-title); font-size: 1.25rem; color: var(--color-text); font-weight: 400; margin-bottom: 0.5rem; }
.pulse__tagline { font-size: 0.85rem; color: var(--color-muted); }

.pulse__radar-container { position: relative; margin: 1.5rem 0; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-surface); min-height: 300px; }
.pulse__radar-container svg { display: block; width: 100%; height: auto; }
.pulse__radar-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; text-align: center; color: var(--color-muted); }
.pulse__radar-placeholder-icon { font-size: 3rem; color: var(--color-accent); opacity: 0.4; margin-bottom: 1rem; }
.pulse__radar-placeholder p { font-family: var(--font-title); font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; }
.pulse__radar-placeholder-note { font-size: 0.75rem; opacity: 0.6; }

.pulse__metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; margin-bottom: 2rem; }
.pulse__metric { display: flex; flex-direction: column; align-items: center; padding: 1.25rem 0.75rem; background: var(--color-surface); text-align: center; }
.pulse__metric-value { font-family: var(--font-title); font-size: 1.8rem; font-weight: 600; color: var(--color-accent); line-height: 1.2; }
.pulse__metric-label { font-size: 0.65rem; color: var(--color-muted); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 0.25rem; }

.pulse__brief { margin-bottom: 2rem; }
.brief { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); overflow: hidden; }
.brief__header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); }
.brief__title { font-family: var(--font-title); font-size: 1.15rem; font-weight: 600; color: var(--color-text); }
.brief__date { font-size: 0.7rem; color: var(--color-accent); }
.brief__body { padding: 0.75rem 1.25rem; }
.brief__section { display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid rgba(197, 160, 89, 0.08); }
.brief__section:last-child { border-bottom: none; }
.brief__section-icon { font-size: 1.2rem; flex-shrink: 0; width: 1.5rem; text-align: center; }
.brief__section strong { display: block; font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.25rem; }
.brief__section p { font-size: 0.85rem; color: var(--color-muted); line-height: 1.6; }
.brief__empty { padding: 1.5rem 1.25rem; font-size: 0.85rem; color: var(--color-muted); text-align: center; }
.brief--placeholder { opacity: 0.6; }

.pulse__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
.pulse__card { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--radius); text-decoration: none; color: var(--color-text); transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition); }
.pulse__card:hover { border-color: var(--color-accent); box-shadow: 0 4px 20px rgba(197, 160, 89, 0.15); transform: translateY(-2px); opacity: 1; }
.pulse__card-icon { font-size: 1.5rem; flex-shrink: 0; }
.pulse__card-content { flex: 1; min-width: 0; }
.pulse__card-title { font-family: var(--font-title); font-size: 1rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.15rem; }
.pulse__card-desc { font-size: 0.75rem; color: var(--color-muted); }
.pulse__card-arrow { color: var(--color-accent); font-size: 1rem; flex-shrink: 0; opacity: 0.5; transition: opacity var(--transition), transform var(--transition); }
.pulse__card:hover .pulse__card-arrow { opacity: 1; transform: translateX(4px); }

/* --- Radar View --- */
.radar-view { max-width: 900px; margin: 0 auto; }
.radar-view__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.radar-view__title { font-family: var(--font-title); font-size: 2rem; font-weight: 600; color: var(--color-text); }
.radar-view__subtitle { font-size: 0.85rem; color: var(--color-muted); margin-top: 0.25rem; }
.radar-view__stats { display: flex; gap: 0.75rem; flex-shrink: 0; }
.radar-view__stat { font-size: 0.7rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--color-accent); padding: 0.3rem 0.75rem; border: 1px solid var(--color-border); border-radius: 999px; }
.radar-view__stat--urgent { color: #E07070; border-color: rgba(224, 112, 112, 0.4); }
.radar-view__filters { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.radar-filter { padding: 0.4rem 0.85rem; font-size: 0.7rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--color-muted); border: 1px solid var(--color-border); border-radius: 999px; text-decoration: none; transition: all var(--transition); }
.radar-filter:hover, .radar-filter--active { color: var(--color-accent); border-color: var(--color-accent); background: rgba(197, 160, 89, 0.08); opacity: 1; }
.radar-list { display: flex; flex-direction: column; gap: 0; }
.radar-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); transition: background var(--transition); }
.radar-item:first-child { border-top: 1px solid var(--color-border); }
.radar-item:hover { background: rgba(197, 160, 89, 0.03); }
.radar-item__deadline { flex-shrink: 0; width: 90px; text-align: center; padding-top: 0.1rem; }
.radar-badge { display: inline-block; padding: 0.2rem 0.5rem; font-size: 0.6rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; border-radius: 999px; color: var(--color-accent); border: 1px solid var(--color-border); white-space: nowrap; }
.radar-badge--urgent { color: #E07070; border-color: rgba(224, 112, 112, 0.4); background: rgba(224, 112, 112, 0.06); }
.radar-badge--soon { color: var(--color-accent); border-color: var(--color-accent); background: rgba(197, 160, 89, 0.06); }
.radar-badge--passed { color: var(--color-muted); border-color: var(--color-border); opacity: 0.5; }
.radar-badge--none { color: var(--color-muted); border-color: var(--color-border); opacity: 0.4; }
.radar-item__body { flex: 1; min-width: 0; }
.radar-item__header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; flex-wrap: wrap; }
.radar-cat { font-size: 0.55rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; color: var(--color-accent); border: 1px solid var(--color-border); }
.radar-cat--conf { color: #B08BEB; border-color: rgba(176, 139, 235, 0.4); }
.radar-cat--fund { color: #F0C674; border-color: rgba(240, 198, 116, 0.4); }
.radar-cat--phd { color: #F0A8C4; border-color: rgba(240, 168, 196, 0.4); }
.radar-cat--postdoc { color: #7EC8E3; border-color: rgba(126, 200, 227, 0.4); }
.radar-cat--faculty { color: #B08BEB; border-color: rgba(176, 139, 235, 0.4); }
.radar-item__title { font-family: var(--font-title); font-size: 1rem; font-weight: 600; color: var(--color-text); line-height: 1.3; }
.radar-item__subtitle { font-size: 0.75rem; color: var(--color-muted); margin-bottom: 0.35rem; }
.radar-item__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.radar-item__actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }

/* --- Toolkit View --- */
.toolkit-view { max-width: 1100px; margin: 0 auto; }
.toolkit-view__header { margin-bottom: 1rem; }
.toolkit-view__title { font-family: var(--font-title); font-size: 2rem; font-weight: 600; color: var(--color-text); }
.toolkit-view__subtitle { font-size: 0.85rem; color: var(--color-muted); margin-top: 0.25rem; }
.toolkit-view__tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.toolkit-tab { padding: 0.5rem 1rem; font-size: 0.7rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--color-muted); border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration: none; transition: all var(--transition); }
.toolkit-tab:hover, .toolkit-tab--active { color: var(--color-accent); border-color: var(--color-accent); background: rgba(197, 160, 89, 0.08); opacity: 1; }
.toolkit-overview { display: flex; flex-direction: column; gap: 1.5rem; }
.toolkit-section { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); padding: 1.25rem 1.5rem; }
.toolkit-section__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.toolkit-section__header h2 { font-family: var(--font-title); font-size: 1.15rem; font-weight: 600; color: var(--color-text); }
.toolkit-section__link { font-size: 0.7rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--color-accent); }
.toolkit-section__desc { font-size: 0.85rem; color: var(--color-muted); line-height: 1.6; }
.toolkit-releases { display: flex; flex-direction: column; gap: 0; }
.toolkit-release { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid rgba(197, 160, 89, 0.08); }
.toolkit-release:last-child { border-bottom: none; }
.toolkit-release__info { display: flex; align-items: center; gap: 0.5rem; }
.toolkit-release__info strong { color: var(--color-text); font-size: 0.85rem; }
.toolkit-release__date { font-size: 0.7rem; color: var(--color-muted); }

/* Solver table */
.solver-table-wrap { overflow-x: auto; }
.solver-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.solver-table th { text-align: left; padding: 0.75rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-accent); border-bottom: 2px solid var(--color-border); white-space: nowrap; }
.solver-table td { padding: 0.75rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.solver-row:hover td { background: rgba(197, 160, 89, 0.03); }
.solver-row__name { min-width: 140px; }
.solver-row__name strong { display: block; color: var(--color-text); font-size: 0.85rem; }
.solver-row__vendor { display: block; font-size: 0.65rem; color: var(--color-muted); margin-top: 0.15rem; }
.solver-row__version { white-space: nowrap; }
.solver-row__date { display: block; font-size: 0.6rem; color: var(--color-muted); margin-top: 0.2rem; }
.solver-license { font-size: 0.6rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.solver-license--open { color: #7BE0AD; border: 1px solid rgba(123, 224, 173, 0.4); background: rgba(123, 224, 173, 0.06); }
.solver-license--comm { color: var(--color-accent); border: 1px solid var(--color-border); background: rgba(197, 160, 89, 0.06); }
.solver-problem { display: inline-block; font-size: 0.55rem; font-weight: 600; letter-spacing: 1px; padding: 0.1rem 0.35rem; margin: 0.1rem; border: 1px solid var(--color-border); border-radius: 3px; color: var(--color-muted); }
.solver-row__langs { font-size: 0.75rem; color: var(--color-muted); max-width: 180px; }
.solver-row__links { white-space: nowrap; }
.solver-row__links a { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-right: 0.5rem; }
.solver-legend { margin-top: 1rem; padding: 0.75rem 1rem; font-size: 0.75rem; color: var(--color-muted); border: 1px solid var(--color-border); border-radius: var(--radius); background: rgba(197, 160, 89, 0.03); }
.solver-legend summary { cursor: pointer; color: var(--color-accent); font-size: 0.7rem; margin-top: 0.5rem; }
.solver-legend__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.35rem; margin-top: 0.5rem; font-size: 0.7rem; }

/* NF-08: Solver Wizard */
.solver-wizard { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.solver-wizard__title { font-family: var(--font-title); font-size: 1.15rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.25rem; }
.solver-wizard__desc { font-size: 0.75rem; color: var(--color-muted); margin-bottom: 1rem; }
.solver-wizard__step { margin-bottom: 0.85rem; }
.solver-wizard__label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.5px; color: var(--color-accent); margin-bottom: 0.4rem; }
.solver-wizard__pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.solver-wizard__pill { padding: 0.3rem 0.7rem; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.5px; border: 1px solid var(--color-border); border-radius: 999px; background: transparent; color: var(--color-muted); cursor: pointer; transition: all var(--transition); }
.solver-wizard__pill:hover { color: var(--color-accent); border-color: var(--color-accent); }
.solver-wizard__pill--active { color: var(--color-bg); background: var(--color-accent); border-color: var(--color-accent); }
.solver-wizard__reset { margin-top: 0.5rem; padding: 0.25rem 0.6rem; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-muted); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius); cursor: pointer; transition: all var(--transition); }
.solver-wizard__reset:hover { color: var(--color-accent); border-color: var(--color-accent); }
.solver-wizard__result { font-size: 0.8rem; font-weight: 600; color: var(--color-accent); margin-top: 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--radius); background: rgba(197, 160, 89, 0.08); display: none; }
.solver-wizard__result--visible { display: block; }
.solver-row--dimmed { opacity: 0.2; transition: opacity 0.3s ease; }
.solver-row--highlighted td { background: rgba(197, 160, 89, 0.06); }
.solver-row--highlighted { transition: opacity 0.3s ease; }

/* ── VD-05: Comparison checkbox column ───────────────────── */
.solver-th-check { width: 32px; padding: 0.5rem !important; }
.solver-row__check { width: 32px; padding: 0.5rem !important; text-align: center; }
.solver-compare-cb { cursor: pointer; accent-color: var(--color-accent); width: 14px; height: 14px; }

/* ── VD-08: Activity indicator bar ───────────────────────── */
.solver-row__activity { white-space: nowrap; }
.solver-activity-bar { display: inline-block; width: 32px; height: 6px; border-radius: 3px; vertical-align: middle; margin-right: 0.35rem; }
.solver-activity-bar--green { background: #7BE0AD; }
.solver-activity-bar--yellow { background: #F5C842; }
.solver-activity-bar--red { background: #EF6B6B; }
.solver-activity-bar--gray { background: #666; }
.solver-activity-label { font-size: 0.6rem; color: var(--color-muted); letter-spacing: 0.3px; }

/* ── VD-05: Compare bar (sticky) ─────────────────────────── */
.solver-compare-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem; margin-bottom: 1rem; background: rgba(197, 160, 89, 0.08); border: 1px solid var(--color-accent); border-radius: var(--radius); }
.solver-compare-bar__info { font-size: 0.8rem; font-weight: 600; color: var(--color-accent); }
.solver-compare-bar__btn { padding: 0.35rem 1rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: #fff; background: var(--color-accent); border: none; border-radius: var(--radius); cursor: pointer; transition: opacity var(--transition); }
.solver-compare-bar__btn:hover { opacity: 0.85; }

/* ── VD-05: Comparison panel ─────────────────────────────── */
.solver-compare-panel { margin-bottom: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); overflow: hidden; }
.solver-compare-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); }
.solver-compare-panel__header h3 { margin: 0; font-family: var(--font-title); font-size: 1rem; font-weight: 600; color: var(--color-text); }
.solver-compare-panel__close { background: transparent; border: none; font-size: 1.1rem; cursor: pointer; color: var(--color-muted); padding: 0.25rem; transition: color var(--transition); }
.solver-compare-panel__close:hover { color: var(--color-text); }
.solver-compare-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.solver-compare-table th { text-align: center; padding: 0.6rem 0.75rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.5px; color: var(--color-accent); border-bottom: 2px solid var(--color-border); }
.solver-compare-table th:first-child { text-align: left; }
.solver-compare-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--color-border); text-align: center; vertical-align: top; color: var(--color-text); }
.solver-compare-table__label { text-align: left !important; font-weight: 600; font-size: 0.7rem; color: var(--color-muted); letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; }
.solver-compare-table tbody tr:hover td { background: rgba(197, 160, 89, 0.03); }

/* ── VD-02: Coverage Heatmap ─────────────────────────────── */
.solver-heatmap-section { margin-top: 2rem; }
.solver-heatmap__title { font-family: var(--font-title); font-size: 1.15rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.25rem; }
.solver-heatmap__desc { font-size: 0.75rem; color: var(--color-muted); margin-bottom: 1rem; }
.solver-heatmap-wrap { overflow-x: auto; }
.solver-heatmap { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.solver-heatmap th { padding: 0.5rem 0.6rem; font-size: 0.65rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--color-accent); border-bottom: 2px solid var(--color-border); text-align: center; }
.solver-heatmap th:first-child { text-align: left; }
.solver-heatmap__col-header { cursor: pointer; user-select: none; transition: color var(--transition); }
.solver-heatmap__col-header:hover { color: var(--color-text); }
.solver-heatmap__col-header--active { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }
.solver-heatmap__solver-name { padding: 0.4rem 0.6rem; font-size: 0.75rem; font-weight: 500; color: var(--color-text); white-space: nowrap; border-bottom: 1px solid var(--color-border); }
.solver-heatmap__cell { width: 48px; height: 28px; text-align: center; border-bottom: 1px solid var(--color-border); padding: 0.25rem; }
.solver-heatmap__cell--yes { background: rgba(123, 224, 173, 0.25); }
.solver-heatmap__cell--no { background: rgba(128, 128, 128, 0.08); }

/* NF-09: Conference Calendar View */
.conf-top-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.conf-view-toggle { display: flex; gap: 0; }
.conf-view-toggle__btn { padding: 0.4rem 0.85rem; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; border: 1px solid var(--color-border); background: transparent; color: var(--color-muted); cursor: pointer; transition: all var(--transition); }
.conf-view-toggle__btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.conf-view-toggle__btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-left: none; }
.conf-view-toggle__btn:hover { color: var(--color-accent); border-color: var(--color-accent); }
.conf-view-toggle__btn--active { color: var(--color-bg); background: var(--color-accent); border-color: var(--color-accent); }
.conf-calendar { max-width: 600px; margin: 0 auto; }
.conf-calendar__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.conf-calendar__nav-btn { background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-accent); font-size: 1rem; padding: 0.25rem 0.75rem; cursor: pointer; transition: all var(--transition); }
.conf-calendar__nav-btn:hover { background: rgba(197, 160, 89, 0.08); border-color: var(--color-accent); }
.conf-calendar__month-label { font-family: var(--font-title); font-size: 1.15rem; font-weight: 600; color: var(--color-text); }
.conf-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.conf-calendar__dow { text-align: center; font-size: 0.6rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--color-accent); padding: 0.35rem 0; }
.conf-calendar__cell { position: relative; min-height: 48px; padding: 0.3rem; border: 1px solid transparent; border-radius: 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: all var(--transition); }
.conf-calendar__cell:hover { border-color: var(--color-border); background: rgba(197, 160, 89, 0.04); }
.conf-calendar__cell--empty { cursor: default; }
.conf-calendar__cell--empty:hover { border-color: transparent; background: transparent; }
.conf-calendar__cell--today { border-color: var(--color-accent); background: rgba(197, 160, 89, 0.06); }
.conf-calendar__cell--selected { border-color: var(--color-accent); background: rgba(197, 160, 89, 0.12); }
.conf-calendar__cell--has-deadline { font-weight: 600; }
.conf-calendar__day-num { font-size: 0.75rem; color: var(--color-text); }
.conf-calendar__dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); position: relative; }
.conf-calendar__dot-count { position: absolute; top: -5px; right: -8px; font-size: 0.5rem; font-weight: 700; color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-accent); border-radius: 50%; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; }
.conf-calendar__detail { margin-top: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); padding: 1rem 1.25rem; min-height: 60px; }
.conf-calendar__detail-title { font-family: var(--font-title); font-size: 0.95rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.5rem; }
.conf-calendar__detail-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid rgba(197, 160, 89, 0.08); flex-wrap: wrap; }
.conf-calendar__detail-item:last-child { border-bottom: none; }
.conf-calendar__detail-item strong { font-size: 0.8rem; color: var(--color-text); }
.conf-calendar__detail-loc { font-size: 0.7rem; color: var(--color-muted); }
.conf-calendar__detail-date { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.5px; color: var(--color-accent); min-width: 50px; }
.conf-calendar__detail-link { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-accent); margin-left: auto; }
.conf-calendar__detail-empty { font-size: 0.8rem; color: var(--color-muted); }
@media (max-width: 600px) {
  .conf-calendar__cell { min-height: 36px; }
  .conf-calendar__day-num { font-size: 0.65rem; }
}

/* Benchmark directory */
.benchmark-directory { display: flex; flex-direction: column; gap: 2rem; }
.benchmark-category__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.benchmark-category__header h2 { font-family: var(--font-title); font-size: 1.3rem; font-weight: 600; color: var(--color-text); }
.benchmark-category__count { font-size: 0.65rem; color: var(--color-accent); letter-spacing: 1px; text-transform: uppercase; }
.benchmark-category__desc { font-size: 0.8rem; color: var(--color-muted); margin-bottom: 1rem; line-height: 1.6; }
.benchmark-list { display: flex; flex-direction: column; gap: 0; }
.benchmark-item { padding: 1rem 1.25rem; border: 1px solid var(--color-border); border-bottom: none; background: var(--color-surface); }
.benchmark-item:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.benchmark-item:last-child { border-bottom: 1px solid var(--color-border); border-radius: 0 0 var(--radius) var(--radius); }
.benchmark-item:only-child { border-radius: var(--radius); border-bottom: 1px solid var(--color-border); }
.benchmark-item__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; }
.benchmark-item__header h3 { font-family: var(--font-title); font-size: 1rem; font-weight: 600; color: var(--color-text); }
.benchmark-item__count { font-size: 0.6rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--color-accent); padding: 0.15rem 0.5rem; border: 1px solid var(--color-border); border-radius: 999px; }
.benchmark-item__fullname { font-size: 0.75rem; color: var(--color-muted); font-style: italic; margin-bottom: 0.35rem; }
.benchmark-item__desc { font-size: 0.8rem; color: var(--color-muted); line-height: 1.6; margin-bottom: 0.5rem; }
.benchmark-item__meta { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.65rem; color: var(--color-muted); margin-bottom: 0.5rem; }
.benchmark-item__actions { display: flex; gap: 0.75rem; }
.benchmark-item__badges { display: flex; align-items: center; gap: 0.4rem; }
.benchmark-format-badge { font-size: 0.55rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-accent); padding: 0.1rem 0.45rem; border: 1px solid var(--color-accent); border-radius: 3px; opacity: 0.8; }

/* Benchmark controls (search + filter buttons) */
.benchmark-controls { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.benchmark-controls__search { width: 100%; padding: 0.5rem 0.75rem; font-size: 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); outline: none; transition: border-color var(--transition); }
.benchmark-controls__search:focus { border-color: var(--color-accent); }
.benchmark-controls__search::placeholder { color: var(--color-muted); }
.benchmark-controls__filters { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.benchmark-filter-btn { padding: 0.3rem 0.7rem; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; border: 1px solid var(--color-border); border-radius: 999px; background: transparent; color: var(--color-muted); cursor: pointer; transition: all var(--transition); }
.benchmark-filter-btn:hover { color: var(--color-accent); border-color: var(--color-accent); }
.benchmark-filter-btn--active { color: var(--color-bg); background: var(--color-accent); border-color: var(--color-accent); }

/* Collapsible category header */
.benchmark-category__header--toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: none; padding: 0; margin-bottom: 0.5rem; cursor: pointer; text-align: left; color: inherit; }
.benchmark-category__header-left { display: flex; align-items: center; gap: 0.5rem; }
.benchmark-category__header-right { display: flex; align-items: center; gap: 0.75rem; }
.benchmark-category__chevron { font-size: 0.6rem; color: var(--color-muted); transition: transform var(--transition); }
.benchmark-category__instances { font-size: 0.6rem; color: var(--color-muted); letter-spacing: 0.5px; }
.benchmark-no-results { font-size: 0.85rem; color: var(--color-muted); text-align: center; padding: 2rem 0; }

/* Software directory (toolkit) */
.software-directory { display: flex; flex-direction: column; gap: 0; }
.software-item { padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); }
.software-item:first-child { border-top: 1px solid var(--color-border); }
.software-item__header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; flex-wrap: wrap; }
.software-item__header h3 { font-family: var(--font-title); font-size: 1rem; font-weight: 600; color: var(--color-text); }
.software-item__date { font-size: 0.7rem; color: var(--color-muted); }
.software-item__changelog { font-size: 0.8rem; color: var(--color-muted); line-height: 1.6; margin-bottom: 0.5rem; }
.software-item__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
.software-item__actions { display: flex; gap: 0.5rem; }

/* D3 radar chart */
.bubble { cursor: pointer; }
.bubble-label, .bubble-count, .bubble-indicator { pointer-events: none; font-family: var(--font-body); }
.radar-tooltip { position: absolute; z-index: 200; max-width: 240px; padding: 0.85rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); transition: opacity 0.15s ease; pointer-events: none; }
.radar-tooltip__name { font-family: var(--font-title); font-size: 1rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.25rem; }
.radar-tooltip__velocity { font-size: 0.75rem; color: var(--color-accent); font-weight: 500; margin-bottom: 0.5rem; }
.radar-tooltip__sparkline { display: block; margin: 0.35rem 0; }
.radar-tooltip__count { font-size: 0.7rem; color: var(--color-muted); margin-bottom: 0.25rem; }
.radar-tooltip__keywords { font-size: 0.65rem; color: var(--color-muted); opacity: 0.8; margin-bottom: 0.35rem; }
.radar-tooltip__hint { font-size: 0.6rem; color: var(--color-accent); opacity: 0.6; }
.radar-mobile-list { padding: 1.5rem; }
.radar-mobile-list__title { font-family: var(--font-title); font-size: 1.1rem; font-weight: 600; color: var(--color-text); margin-bottom: 1rem; text-align: center; }
.radar-mobile-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(197, 160, 89, 0.08); }
.radar-mobile-item__arrow { font-size: 0.8rem; width: 1.5rem; text-align: center; flex-shrink: 0; }
.radar-mobile-item__arrow--accelerating { color: var(--color-success); }
.radar-mobile-item__arrow--declining { color: #8892B0; }
.radar-mobile-item__arrow--stable { color: #C5A059; }
.radar-mobile-item__info { flex: 1; display: flex; justify-content: space-between; align-items: center; }
.radar-mobile-item__name { font-size: 0.85rem; color: var(--color-text); font-weight: 500; }
.radar-mobile-item__stats { font-size: 0.7rem; color: var(--color-muted); white-space: nowrap; }

/* About page */
.about { max-width: 700px; margin: 0 auto; }
.about__hero { text-align: center; padding: 2rem 0 1.5rem; }
.about__title { font-family: var(--font-title); font-size: 2.5rem; font-weight: 600; color: var(--color-accent); letter-spacing: 4px; text-transform: uppercase; }
.about__subtitle { font-size: 0.9rem; color: var(--color-muted); margin-top: 0.25rem; }
.about__section { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--color-border); }
.about__section:last-child { border-bottom: none; }
.about__section h2 { font-family: var(--font-title); font-size: 1.3rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.75rem; }
.about__section p { font-size: 0.85rem; color: var(--color-muted); line-height: 1.7; margin-bottom: 0.75rem; }
.about__sources { display: flex; flex-direction: column; gap: 0.75rem; margin: 1rem 0; }
.about__source { padding: 0.75rem 1rem; border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--radius); background: var(--color-surface); }
.about__source strong { font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; color: var(--color-accent); }
.about__source p { font-size: 0.8rem; margin-bottom: 0; margin-top: 0.25rem; }
.about__source-card { padding: 1rem 1.25rem; border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-surface); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); scroll-margin-top: calc(var(--nav-height) + 1rem); }
.about__source-card:hover { border-color: var(--color-accent-dim); box-shadow: var(--shadow-hover); }
.about__source-card:target { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent-dim); }
.about__source-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.35rem; }
.about__source-header strong { font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; color: var(--color-accent); }
.about__source-count { font-size: 0.7rem; font-weight: 500; color: var(--color-text-muted); background: var(--color-accent-glow); padding: 0.15rem 0.5rem; border-radius: var(--radius-sm); letter-spacing: 0.5px; white-space: nowrap; }
.about__source-card a { font-size: 0.75rem; color: var(--color-accent); opacity: 0.8; transition: opacity var(--transition-fast); }
.about__source-card a:hover { opacity: 1; }
.about__source-card p { font-size: 0.8rem; margin-bottom: 0; margin-top: 0.35rem; }
.about__code { font-family: 'Courier New', monospace; font-size: 0.7rem; color: var(--color-muted); background: rgba(197, 160, 89, 0.04); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.25rem; overflow-x: auto; line-height: 1.6; white-space: pre; }
.about__list { list-style: none; padding: 0; margin: 0.75rem 0; }
.about__list li { padding: 0.35rem 0 0.35rem 1.25rem; position: relative; font-size: 0.85rem; color: var(--color-muted); }
.about__list li::before { content: '\2192'; position: absolute; left: 0; color: var(--color-accent); }

/* Hub view animations */
.pulse__card[data-animate], .pulse__metric[data-animate], .radar-item[data-animate],
.toolkit-section[data-animate], .benchmark-item[data-animate], .software-item[data-animate],
.solver-row[data-animate] { opacity: 0; animation: fadeInUp 0.4s ease forwards; }

/* Hub view responsive */
@media (max-width: 768px) {
  .pulse__hero { padding: 2rem 1rem 1.5rem; }
  .pulse__title { font-size: 2rem; }
  .pulse__metrics { grid-template-columns: repeat(2, 1fr); }
  .pulse__cards { grid-template-columns: 1fr; }
  .radar-view__header { flex-direction: column; }
  .radar-item { flex-direction: column; gap: 0.5rem; }
  .radar-item__deadline { width: auto; text-align: left; }
  .radar-item__actions { align-self: flex-end; }
  .solver-table { font-size: 0.7rem; }
  .solver-table th, .solver-table td { padding: 0.5rem; }
}

/* -----------------------------------------------------------------------
   Error Boundary — fallback UI for failed data fetches (PR-04)
   ----------------------------------------------------------------------- */

.load-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-lg);
  margin: var(--space-lg) auto;
  max-width: 480px;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  background: var(--color-surface);
}

.load-error__icon {
  font-size: 2rem;
  opacity: 0.45;
}

.load-error__heading {
  margin: 0;
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-faint);
}

.load-error__detail {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-faint);
  opacity: 0.75;
}

/* -----------------------------------------------------------------------
   Load-more button for paginated card rendering (PR-06)
   ----------------------------------------------------------------------- */

.load-more-wrapper {
  display: flex;
  justify-content: center;
  padding: var(--space-md) 0;
}

.load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.5rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.load-more-btn:hover {
  background: var(--color-bg);
  border-color: var(--color-accent);
}

/* -----------------------------------------------------------------------
   Opportunity Alert Builder (NF-05)
   ----------------------------------------------------------------------- */

.alert-builder {
  margin: 0 auto var(--space-md);
  max-width: 900px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
}

.alert-builder__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.alert-builder__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}

.alert-builder__toggle {
  padding: 4px 12px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-accent);
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.alert-builder__toggle:hover {
  background: rgba(99, 102, 241, 0.15);
}

.alert-builder__body {
  padding: var(--space-sm) var(--space-md);
}

.alert-rules-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.alert-rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.alert-rule__text {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.alert-rule__tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-accent);
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 10px;
}

.alert-rule__delete {
  padding: 0;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.alert-rule__delete:hover {
  color: var(--color-danger);
  background: rgba(239, 68, 68, 0.12);
}

.alert-builder__form {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.alert-builder__select,
.alert-builder__input {
  height: 30px;
  padding: 0 10px;
  font-size: 0.75rem;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  transition: border-color var(--transition-fast);
}

.alert-builder__select:focus,
.alert-builder__input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.alert-builder__input {
  width: 160px;
}

.alert-builder__input::placeholder {
  color: var(--color-text-faint);
}

.alert-builder__add {
  height: 30px;
  padding: 0 14px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-accent);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}

.alert-builder__add:hover {
  opacity: 0.85;
}

/* ── Opportunity Alert Badge on Nav Tab (NF-05) ─────────────── */

.opp-alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-danger);
  border-radius: 8px;
  vertical-align: middle;
}

/* ================================================================
   VD-01: Sparkline Grid
   ================================================================ */

.sparkline-grid {
  margin-top: var(--space-2xl);
  padding: 0 var(--space-md);
}

.sparkline-grid__title {
  font-family: var(--font-title);
  font-size: 1.4rem;
  color: var(--color-accent);
  margin-bottom: var(--space-lg);
  text-align: center;
}

.sparkline-grid__container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
}

.sparkline-cell {
  background: var(--color-bg-elevated);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.sparkline-cell:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-hover);
}

.sparkline-cell__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xs);
}

.sparkline-cell__name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.sparkline-cell__arrow {
  font-size: 0.65rem;
  flex-shrink: 0;
}

.sparkline-cell__arrow--up { color: #34d399; }
.sparkline-cell__arrow--down { color: #f87171; }
.sparkline-cell__arrow--flat { color: var(--color-text-muted); }
.sparkline-cell__arrow--new { color: var(--color-muted, #8892B0); font-size: 0.6rem; }

.sparkline-cell__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 32px;
  width: 100%;
}

.sparkline-cell__bar {
  flex: 1;
  min-height: 1px;
  background: var(--color-accent-dim);
  border-radius: 1px 1px 0 0;
  transition: height var(--transition-normal);
}

.sparkline-cell__bar--current {
  background: var(--color-accent);
}

.sparkline-cell__count {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-align: right;
}

/* ================================================================
   VD-04: Tag Cloud
   ================================================================ */

.tag-cloud {
  margin-top: var(--space-2xl);
  padding: 0 var(--space-md);
}

.tag-cloud__title {
  font-family: var(--font-title);
  font-size: 1.4rem;
  color: var(--color-accent);
  margin-bottom: var(--space-lg);
  text-align: center;
}

.tag-cloud__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-elevated);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  max-width: 800px;
  margin: 0 auto;
}

.tag-cloud__tag {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  line-height: 1.2;
}

.tag-cloud__tag:hover {
  color: var(--color-accent);
  background: var(--color-accent-dim);
}

/* 5 size tiers */
.tag-cloud__tag--t0 { font-size: 0.7rem; opacity: 0.7; }
.tag-cloud__tag--t1 { font-size: 0.85rem; opacity: 0.8; }
.tag-cloud__tag--t2 { font-size: 1.05rem; font-weight: 500; }
.tag-cloud__tag--t3 { font-size: 1.3rem; font-weight: 600; color: var(--color-text); }
.tag-cloud__tag--t4 { font-size: 1.6rem; font-weight: 700; color: var(--color-accent); }

/* ================================================================
   VD-10: Opportunity Funnel Dashboard
   ================================================================ */

.opportunity-funnel {
  margin-bottom: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-elevated);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
}

.opportunity-funnel__title {
  font-family: var(--font-title);
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  text-align: center;
}

.opportunity-funnel__track {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.funnel__stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.funnel__bar {
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  transition: width var(--transition-normal);
}

.funnel__stage--open .funnel__bar   { background: rgba(99, 179, 237, 0.35); border: 1px solid rgba(99, 179, 237, 0.6); }
.funnel__stage--month .funnel__bar  { background: rgba(72, 187, 120, 0.35); border: 1px solid rgba(72, 187, 120, 0.6); }
.funnel__stage--week .funnel__bar   { background: rgba(237, 177, 64, 0.35); border: 1px solid rgba(237, 177, 64, 0.6); }
.funnel__stage--today .funnel__bar  { background: rgba(245, 101, 101, 0.35); border: 1px solid rgba(245, 101, 101, 0.6); }

.funnel__count {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text);
}

.funnel__label {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.funnel__arrow {
  font-size: 0.55rem;
  color: var(--color-text-faint);
  flex-shrink: 0;
}

/* Responsive: stack funnel on small screens */
@media (max-width: 600px) {
  .opportunity-funnel__track {
    flex-direction: column;
  }
  .funnel__arrow {
    transform: rotate(90deg);
  }
  .funnel__bar {
    width: 100% !important;
  }
}

/* ================================================================
   VD-03: Solver Release Timeline (swimlane)
   ================================================================ */

.solver-timeline {
  margin-top: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 1.25rem 1.5rem;
}

.solver-timeline__title {
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.solver-timeline__axis {
  position: relative;
  height: 20px;
  margin-left: 130px;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
}

.solver-timeline__tick {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
  padding-bottom: 2px;
  border-left: 1px solid var(--color-border);
  padding-left: 4px;
}

.solver-timeline__lanes {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.solver-timeline__lane {
  display: flex;
  align-items: center;
  height: 28px;
  border-bottom: 1px solid rgba(197, 160, 89, 0.06);
}

.solver-timeline__label {
  width: 130px;
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-text);
  padding-right: 0.75rem;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.solver-timeline__track {
  flex: 1;
  position: relative;
  height: 100%;
  background: rgba(197, 160, 89, 0.02);
}

.solver-timeline__dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  z-index: 1;
}

.solver-timeline__dot:hover {
  transform: translate(-50%, -50%) scale(1.6);
  z-index: 10;
}

.solver-timeline__dot--open {
  background: #7BE0AD;
  box-shadow: 0 0 0 2px rgba(123, 224, 173, 0.25);
}

.solver-timeline__dot--open:hover {
  box-shadow: 0 0 0 4px rgba(123, 224, 173, 0.35);
}

.solver-timeline__dot--comm {
  background: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.25);
}

.solver-timeline__dot--comm:hover {
  box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.35);
}

.solver-timeline__tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 3px 8px;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.solver-timeline__dot:hover .solver-timeline__tip {
  display: block;
}

.solver-timeline__legend {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.solver-timeline__legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.65rem;
  color: var(--color-muted);
}

@media (max-width: 600px) {
  .solver-timeline__axis { margin-left: 80px; }
  .solver-timeline__label { width: 80px; font-size: 0.6rem; }
  .solver-timeline { padding: 0.75rem; }
}

/* ================================================================
   VD-07: Deadline Heat Calendar (GitHub contribution style)
   ================================================================ */

.heat-calendar {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.heat-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.heat-calendar__title {
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
}

.heat-calendar__count {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: 0.5px;
}

.heat-calendar__wrapper {
  display: flex;
  gap: 4px;
}

.heat-calendar__day-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 18px; /* align with grid below month labels */
}

.heat-calendar__day-labels span {
  height: 12px;
  line-height: 12px;
  font-size: 0.5rem;
  font-weight: 500;
  color: var(--color-muted);
  text-align: right;
  padding-right: 4px;
  width: 22px;
}

.heat-calendar__scroll {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
}

.heat-calendar__months {
  display: grid;
  grid-template-columns: repeat(var(--heat-weeks), 12px);
  gap: 2px;
  margin-bottom: 2px;
  height: 16px;
}

.heat-calendar__month-label {
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--color-muted);
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: visible;
}

.heat-calendar__grid {
  display: grid;
  grid-template-rows: repeat(7, 12px);
  grid-template-columns: repeat(var(--heat-weeks), 12px);
  grid-auto-flow: column;
  gap: 2px;
}

.heat-calendar__cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  cursor: pointer;
  transition: outline 0.1s ease;
}

.heat-calendar__cell:hover {
  outline: 1px solid var(--color-accent);
  outline-offset: -1px;
}

.heat-calendar__cell--empty {
  background: transparent;
  cursor: default;
}

.heat-calendar__cell--empty:hover {
  outline: none;
}

.heat-calendar__cell--0 {
  background: rgba(197, 160, 89, 0.06);
  border: 1px solid rgba(197, 160, 89, 0.08);
}

.heat-calendar__cell--1 {
  background: rgba(197, 160, 89, 0.25);
}

.heat-calendar__cell--2 {
  background: rgba(197, 160, 89, 0.50);
}

.heat-calendar__cell--3 {
  background: rgba(197, 160, 89, 0.80);
}

.heat-calendar__cell--today {
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
}

.heat-calendar__legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 0.5rem;
}

.heat-calendar__legend-text {
  font-size: 0.55rem;
  color: var(--color-muted);
  margin: 0 2px;
}

.heat-calendar__legend .heat-calendar__cell {
  cursor: default;
}

.heat-calendar__legend .heat-calendar__cell:hover {
  outline: none;
}

@media (max-width: 600px) {
  .heat-calendar { padding: 0.75rem; }
  .heat-calendar__day-labels { display: none; }
  .heat-calendar__cell { width: 10px; height: 10px; }
  .heat-calendar__grid {
    grid-template-rows: repeat(7, 10px);
    grid-template-columns: repeat(var(--heat-weeks), 10px);
  }
  .heat-calendar__months {
    grid-template-columns: repeat(var(--heat-weeks), 10px);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   ER-04: "What's New Since Last Visit" Badge Counts
   ══════════════════════════════════════════════════════════════════════ */

.new-since-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  margin-left: 5px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #818cf8);
  border-radius: 8px;
  vertical-align: middle;
  letter-spacing: -0.02em;
  animation: new-since-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes new-since-pop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   ER-05: Recently Viewed Items — Floating Button & Panel
   ══════════════════════════════════════════════════════════════════════ */

.recent-views-btn {
  position: fixed;
  bottom: 5.5rem;
  right: 1.5rem;
  z-index: 900;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.recent-views-btn:hover {
  background: var(--color-accent);
  color: #fff;
  transform: scale(1.08);
}

.recent-views__count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-danger);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.recent-views-panel {
  position: fixed;
  bottom: 6.5rem;
  right: 1.5rem;
  z-index: 901;
  width: 360px;
  max-height: 460px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: recent-panel-in 0.25s ease;
}

.recent-views-panel.open {
  display: flex;
}

@keyframes recent-panel-in {
  0% { opacity: 0; transform: translateY(12px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.recent-views-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.recent-views-panel__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.recent-views-panel__close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.recent-views-panel__close:hover {
  color: var(--color-accent);
}

.recent-views-panel__list {
  overflow-y: auto;
  padding: 0.5rem 0;
  flex: 1;
}

.recent-views__empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.recent-views__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.recent-views__item:hover {
  background: var(--color-bg);
}

.recent-views__type {
  flex-shrink: 0;
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  color: var(--color-accent);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}

.recent-views__type--publication { color: #6366f1; border-color: rgba(99,102,241,0.3); }
.recent-views__type--software { color: #10b981; border-color: rgba(16,185,129,0.3); }
.recent-views__type--conference { color: #f59e0b; border-color: rgba(245,158,11,0.3); }
.recent-views__type--opportunity { color: var(--color-danger); border-color: rgba(239,68,68,0.3); }

.recent-views__title {
  flex: 1;
  font-size: 0.8rem;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-views__time {
  flex-shrink: 0;
  font-size: 0.65rem;
  color: var(--color-text-faint, var(--color-text-muted));
  white-space: nowrap;
}

@media (max-width: 480px) {
  .recent-views-panel {
    width: calc(100vw - 2rem);
    right: 1rem;
    bottom: 6rem;
  }
}

/* ── MA-03: Aria-live status region ───────────────────────────── */

.a11y-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── MA-06: Font Scale & Accessibility Controls ───────────────── */

.a11y-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 4px;
}

.a11y-controls__btn {
  background: transparent;
  border: 1px solid var(--color-accent-dim);
  color: var(--color-text-muted);
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  line-height: 1.4;
  font-family: var(--font-body);
}

.a11y-controls__btn:hover,
.a11y-controls__btn.active {
  background: var(--color-accent-dim);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.a11y-controls__btn.active {
  font-weight: 600;
}

.a11y-controls__hc {
  font-size: 0.7rem;
  padding: 2px 5px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .a11y-controls { display: none; }
}

/* ── ER-01: Reading Progress Bar ──────────────────────────────── */

.pub-progress {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.pub-progress__bar {
  width: 80px;
  height: 6px;
  background: var(--color-accent-dim);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.pub-progress__fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 3px;
  transition: width var(--transition-normal);
  min-width: 0;
}

.pub-progress__label {
  letter-spacing: 0.5px;
}

/* ── ER-03: Personalized Landing Sections ─────────────────────── */

.pulse__personalized {
  margin-bottom: 2rem;
}

.pulse__focus-areas {
  border: 1px solid var(--color-border, rgba(197,160,89,0.25));
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.pulse__focus-areas h2 {
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.focus-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.focus-tags .tag {
  font-size: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  background: var(--color-accent-dim);
  color: var(--color-accent);
  border: 1px solid var(--color-accent-dim);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.focus-tags .tag:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

.pulse__continue-reading {
  border: 1px solid var(--color-border, rgba(197,160,89,0.25));
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.pulse__continue-reading h2 {
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.continue-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.continue-list__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(197, 160, 89, 0.1);
  background: var(--color-surface-hover, rgba(13,33,55,0.95));
  transition: all var(--transition-fast);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.continue-list__item:hover {
  border-color: var(--color-accent-dim);
  background: var(--color-accent-glow);
}

.continue-list__icon {
  font-size: 1rem;
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
}

.continue-list__title {
  flex: 1;
  font-size: 0.85rem;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.continue-list__time {
  font-size: 0.65rem;
  color: var(--color-text-faint, var(--color-text-muted));
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── ER-07: Enhanced Weekly Brief ─────────────────────────────── */

.brief__nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.brief__nav-btn {
  background: transparent;
  border: 1px solid var(--color-accent-dim);
  color: var(--color-text-muted);
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
}

.brief__nav-btn:hover:not(:disabled) {
  background: var(--color-accent-dim);
  color: var(--color-accent);
}

.brief__nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.brief__details {
  margin-top: 0.5rem;
}

.brief__detail-group {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(197, 160, 89, 0.08);
}

.brief__detail-group:last-child { border-bottom: none; }

.brief__detail-group h4 {
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.35rem;
}

.brief__detail-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding: 0.2rem 0;
  gap: 0.5rem;
}

.brief__detail-item span:first-child {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brief__detail-badge {
  flex-shrink: 0;
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--color-accent-dim);
  color: var(--color-accent);
  font-weight: 600;
}

.brief__detail-deadline {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--color-text-faint, var(--color-text-muted));
}

/* ── DF-03: Statistics Summary Bar ──────────────────────────── */

.stats-summary-bar {
  margin: 0;
  padding: var(--space-xs) 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

/* ── DF-08: System Presets ──────────────────────────────────── */

.preset-pill--system {
  border-color: var(--color-text-faint);
  background: rgba(136, 146, 176, 0.08);
  color: var(--color-text-muted);
}

.preset-pill--system:hover {
  background: rgba(136, 146, 176, 0.18);
  color: var(--color-text);
}

/* ── SC-02: Share Dropdown ──────────────────────────────────── */

.card__share-wrapper {
  position: relative;
  display: inline-flex;
}

.card__share-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 130px;
  background: var(--color-bg-elevated);
  border: var(--border-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  z-index: 20;
  overflow: hidden;
}

.card__share-option {
  display: block;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-text);
  text-decoration: none;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
  white-space: nowrap;
}

.card__share-option:hover {
  background: var(--color-accent-glow);
  color: var(--color-accent);
}

/* MW-06: Clickable tag pills inside cards */
.card__tags .tag { cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); }
.card__tags .tag:hover { background: var(--color-accent-dim); border-color: var(--color-accent); }

/* MW-08: Tab count badges */
.nav__tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 600;
  min-width: 18px;
  height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 8px;
  background: var(--color-accent-dim);
  color: var(--color-accent);
  vertical-align: middle;
  line-height: 1;
}

/* ================================================================
   R4-21: Micro-animation on card expand
   ================================================================ */

.card__detail-expand {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow), opacity var(--transition-normal);
  opacity: 0;
}

.card__detail-expand.open {
  max-height: 600px;
  opacity: 1;
}

/* ================================================================
   R4-23: Theme-aware code / pre block styling
   ================================================================ */

code {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.85em;
  padding: 0.15em 0.4em;
  background: var(--color-code-bg);
  border: 1px solid var(--color-code-border);
  border-radius: var(--radius-sm);
  color: var(--color-code-text);
}

pre {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: var(--fs-sm);
  padding: var(--space-md);
  background: var(--color-code-bg);
  border: 1px solid var(--color-code-border);
  border-radius: var(--radius-md);
  color: var(--color-code-text);
  overflow-x: auto;
  line-height: 1.6;
}

pre code {
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: inherit;
}

/* ================================================================
   R4-20: DOI / arXiv paste-detection styles
   ================================================================ */

.search-modal__input--id-detected {
  border-bottom: 2px solid var(--color-accent);
  color: var(--color-accent);
}

.search-result--id-match {
  border-left: 2px solid var(--color-accent);
  background: var(--color-accent-glow);
}

.search-modal__not-indexed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
}

.search-modal__ext-link {
  color: var(--color-accent);
  text-decoration: underline;
  font-weight: 500;
}

/* ================================================================
   R4-25: Staggered list entrance animation
   ================================================================ */

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

.card[data-entrance] {
  opacity: 0;
  animation: cardEntrance 0.35s ease forwards;
}

/* Stagger delay is set inline via style attr; these provide fallback tiers */
.card[data-entrance]:nth-child(1)  { animation-delay: 0ms; }
.card[data-entrance]:nth-child(2)  { animation-delay: 20ms; }
.card[data-entrance]:nth-child(3)  { animation-delay: 40ms; }
.card[data-entrance]:nth-child(4)  { animation-delay: 60ms; }
.card[data-entrance]:nth-child(5)  { animation-delay: 80ms; }
.card[data-entrance]:nth-child(6)  { animation-delay: 100ms; }
.card[data-entrance]:nth-child(7)  { animation-delay: 120ms; }
.card[data-entrance]:nth-child(8)  { animation-delay: 140ms; }
.card[data-entrance]:nth-child(9)  { animation-delay: 160ms; }
.card[data-entrance]:nth-child(10) { animation-delay: 180ms; }
.card[data-entrance]:nth-child(n+11) { animation-delay: 200ms; }

/* R4-25: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .card[data-entrance] {
    animation: none;
    opacity: 1;
  }
}

[data-reduced-motion="true"] .card[data-entrance] {
  animation: none;
  opacity: 1;
}

/* R4-06: Section anchor link */
.anchor-link {
  background: none;
  border: none;
  color: var(--color-accent, #c5a059);
  cursor: pointer;
  font-size: 0.85em;
  opacity: 0;
  margin-left: 6px;
  padding: 0 4px;
  transition: opacity 0.2s;
  vertical-align: middle;
}
h2:hover .anchor-link,
h3:hover .anchor-link,
.section-heading:hover .anchor-link,
.anchor-link:focus {
  opacity: 0.7;
}
.anchor-link:hover { opacity: 1; }

/* R4-15: Correction badge */
.card__corrected-badge {
  display: inline-block;
  background: #16a34a;
  color: #fff;
  font-size: 0.65rem;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-bg-card, #1e293b);
  color: var(--color-text, #e2e8f0);
  border: 1px solid var(--color-accent, #c5a059);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.875rem;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 9999;
  pointer-events: none;
}
.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── R4-11: Author Profile Mini-Card Popover ─────────────────── */

.card__author {
  color: var(--color-accent);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.card__author:hover,
.card__author:focus {
  color: var(--color-text);
  text-decoration: underline;
}

.author-popover {
  position: absolute;
  z-index: 1000;
  background: var(--color-bg-elevated);
  border: var(--border-card);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  box-shadow: var(--shadow-hover);
  min-width: 240px;
  max-width: 360px;
  animation: fadeIn 0.15s ease;
}

.author-popover__name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text);
  margin-bottom: 4px;
}

.author-popover__count {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.author-popover__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.author-popover__tags-label {
  font-size: 0.72rem;
  color: var(--color-text-faint);
}

.author-popover__list-label {
  font-size: 0.72rem;
  color: var(--color-text-faint);
  margin-bottom: 4px;
  margin-top: 4px;
}

.author-popover__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.author-popover__list-item {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  padding: 4px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-fast);
}

.author-popover__list-item:last-child {
  border-bottom: none;
}

.author-popover__list-item:hover {
  color: var(--color-accent);
}

/* ── R4-13: Solver Changelog Timeline ────────────────────────── */

.solver-changelog-row {
  background: transparent;
}

.solver-changelog-cell {
  padding: 0 var(--space-md) var(--space-sm) var(--space-lg) !important;
  border-bottom: 1px solid var(--color-border);
}

.solver-changelog {
  font-size: 0.78rem;
}

.solver-changelog__summary {
  cursor: pointer;
  color: var(--color-accent);
  font-size: 0.75rem;
  user-select: none;
  padding: 2px 0;
}

.solver-changelog__summary:hover {
  text-decoration: underline;
}

.solver-changelog__timeline {
  padding: 8px 0 4px 12px;
  border-left: 2px solid var(--color-accent-dim);
  margin-top: 4px;
}

.solver-changelog__entry {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
}

.solver-changelog__version {
  font-weight: 600;
  color: var(--color-accent);
  font-size: 0.78rem;
}

.solver-changelog__date {
  font-size: 0.72rem;
  color: var(--color-text-faint);
}

.solver-changelog__text {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  flex: 1;
  min-width: 200px;
}

/* ── Solver Detail Page ─────────────────────────────────────── */
.solver-detail { max-width: 900px; margin: 0 auto; }
.breadcrumb { font-size: 0.8rem; color: var(--color-muted, #8892B0); margin-bottom: 1rem; padding: 0.5rem 0; }
.breadcrumb a { color: var(--color-muted, #8892B0); text-decoration: none; transition: color 0.15s; }
.breadcrumb a:hover { color: var(--color-accent, #C5A059); }
.breadcrumb-current { color: var(--color-text, #CCD6F6); }
.solver-detail__header { margin-bottom: 2rem; }
.solver-detail__title-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.solver-detail__title-row h1 { font-family: 'Cormorant Garamond', serif; margin: 0; font-size: 2rem; }
.solver-detail__vendor { color: var(--color-muted, #8892B0); margin: 0.25rem 0; }
.solver-detail__desc { color: var(--color-text, #CCD6F6); margin: 0.5rem 0; }
.solver-detail__links { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.75rem; }
.solver-detail__link { color: var(--color-accent, #C5A059); font-size: 0.85rem; text-decoration: none; }
.solver-detail__link:hover { text-decoration: underline; }
.solver-section { background: var(--color-surface, rgba(10,25,47,0.85)); backdrop-filter: blur(12px); border-left: 3px solid var(--color-accent, #C5A059); padding: 1.5rem; margin-bottom: 1.5rem; border-radius: 0 8px 8px 0; }
.solver-section h2 { font-family: 'Cormorant Garamond', serif; margin-top: 0; color: var(--color-accent, #C5A059); font-size: 1.3rem; }
.solver-detail-row { display: flex; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(136,146,176,0.1); }
.solver-detail-label { min-width: 160px; color: var(--color-muted, #8892B0); font-size: 0.85rem; flex-shrink: 0; }
.solver-detail-value { color: var(--color-text, #CCD6F6); font-size: 0.9rem; }
.solver-badge-list { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.solver-lang-badge { display: inline-block; font-size: 0.7rem; padding: 0.1rem 0.4rem; border: 1px solid var(--color-border, rgba(136,146,176,0.2)); border-radius: 3px; color: var(--color-muted, #8892B0); }
.solver-tool-badge { display: inline-block; font-size: 0.7rem; padding: 0.1rem 0.4rem; border: 1px solid rgba(197,160,89,0.3); border-radius: 3px; color: var(--color-accent, #C5A059); text-decoration: none; }
.solver-use-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.solver-use-yes h3 { color: var(--color-success); font-size: 1rem; }
.solver-use-no h3 { color: var(--color-danger); font-size: 1rem; }
.solver-use-col ul { padding-left: 1.2rem; font-size: 0.9rem; }
.solver-use-col li { margin-bottom: 0.3rem; }
.solver-gotcha-box { background: var(--color-warning-dim); border: 1px solid var(--color-warning-border); padding: 1rem; border-radius: 6px; margin-top: 1rem; }
.solver-gotcha-box h4 { margin: 0 0 0.5rem; color: var(--color-warning); font-size: 0.95rem; }
.solver-gotcha-box p { margin: 0; font-size: 0.85rem; color: var(--color-text, #CCD6F6); }
.solver-qs-box { background: rgba(0,0,0,0.3); border-radius: 6px; padding: 1rem; }
.solver-qs-install { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; padding: 0.5rem; background: rgba(0,0,0,0.2); border-radius: 4px; }
.solver-qs-install code { flex: 1; color: var(--color-success); font-size: 0.85rem; }
.solver-copy-btn { background: transparent; border: 1px solid var(--color-border, rgba(136,146,176,0.2)); color: var(--color-muted, #8892B0); padding: 0.2rem 0.5rem; border-radius: 3px; cursor: pointer; font-size: 0.75rem; }
.solver-copy-btn:hover { border-color: var(--color-accent, #C5A059); color: var(--color-accent, #C5A059); }
.solver-qs-code { overflow-x: auto; font-size: 0.85rem; line-height: 1.5; margin: 0; }
.solver-health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.solver-health-stat { text-align: center; padding: 1rem; background: rgba(10,25,47,0.5); border-radius: 8px; }
.solver-health-value { display: block; font-size: 1.5rem; font-weight: 700; color: var(--color-accent, #C5A059); }
.solver-health-label { font-size: 0.75rem; color: var(--color-muted, #8892B0); }
.solver-bench-notes { font-size: 0.9rem; color: var(--color-text, #CCD6F6); }
.solver-detail-meta { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(136,146,176,0.1); font-size: 0.8rem; color: var(--color-muted, #8892B0); }
.solver-detail-meta a { color: var(--color-accent, #C5A059); }
.solver-name-link { color: inherit; text-decoration: none; }
.solver-name-link:hover { color: var(--color-accent, #C5A059); }
.solver-detail-404 { text-align: center; padding: 3rem 1rem; }
@media (max-width: 768px) {
  .solver-use-grid { grid-template-columns: 1fr; }
  .solver-detail-row { flex-direction: column; gap: 0.25rem; }
  .solver-detail-label { min-width: auto; }
  .solver-detail__title-row { flex-direction: column; align-items: flex-start; }
}

/* ── R4-14: Trend Narrative Summaries ────────────────────────── */

.brief__narratives {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.brief__narratives h4 {
  font-size: 0.8rem;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.brief__narrative-item {
  margin-bottom: var(--space-sm);
  padding-left: var(--space-sm);
  border-left: 2px solid var(--color-accent-dim);
}

.brief__narrative-tag {
  font-size: 0.78rem;
  color: var(--color-accent);
  display: block;
  margin-bottom: 2px;
}

.brief__narrative-text {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* ── R4-18: Batch Operations ─────────────────────────────────── */

.card__select-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
}

.card__select-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-accent);
}

.card {
  position: relative;
}

.filter-batch-toggle {
  border-color: var(--color-accent-dim) !important;
}

.filter-batch-toggle.active {
  background: var(--color-accent) !important;
  color: var(--color-bg) !important;
}

.batch-action-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--color-bg-elevated);
  border: var(--border-card);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: var(--space-sm) var(--space-lg);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.2s ease;
}

@keyframes slideUp {
  from { transform: translateX(-50%) translateY(100%); }
  to { transform: translateX(-50%) translateY(0); }
}

.batch-action-bar__info {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  min-width: 80px;
}

.batch-action-bar__btn {
  font-family: var(--font-body);
  font-size: 0.78rem;
  padding: 6px 14px;
  border: 1px solid var(--color-accent-dim);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.batch-action-bar__btn:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

.batch-action-bar__btn--clear {
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.batch-action-bar__btn--clear:hover {
  background: var(--color-text-muted);
  color: var(--color-bg);
}

/* =========================================================================
   R4-07: Floating Table of Contents
   ========================================================================= */

/* TOC toggle button — fixed position on the right side */
.toc-toggle {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  background: var(--color-surface);
  color: var(--color-accent);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: background var(--transition-fast), color var(--transition-fast);
  letter-spacing: 0.05em;
}
.toc-toggle:hover,
.toc-toggle--active {
  background: var(--color-accent);
  color: #fff;
}

/* TOC side panel — desktop: fixed right side panel */
.toc-panel {
  position: fixed;
  top: 0;
  right: -300px;
  width: 280px;
  height: 100vh;
  z-index: 950;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
  transition: right 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.toc-panel--open {
  right: 0;
}

.toc-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
.toc-panel__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: 0.02em;
}
.toc-panel__close {
  background: none;
  border: none;
  color: var(--color-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.toc-panel__close:hover { color: var(--color-text); }

.toc-panel__nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 0;
}

.toc-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-panel__item {
  margin: 0;
}
.toc-panel__item--sub {
  padding-left: 1rem;
}
.toc-panel__item--empty {
  padding: 1rem;
  color: var(--color-muted);
  font-size: 0.8rem;
  font-style: italic;
}

.toc-panel__link {
  display: block;
  padding: 6px 1rem;
  font-size: 0.8rem;
  color: var(--color-text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  line-height: 1.4;
}
.toc-panel__link:hover {
  background: var(--color-accent-glow);
  color: var(--color-accent);
}
.toc-panel__link--active {
  border-left-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: 600;
  background: var(--color-accent-glow);
}

/* Backdrop for mobile */
.toc-backdrop {
  display: none;
}
.toc-backdrop--visible {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 940;
}

/* Mobile: bottom drawer instead of side panel */
@media (max-width: 767px) {
  .toc-toggle {
    right: 1rem;
    top: auto;
    bottom: 5rem;
    transform: none;
  }

  .toc-panel {
    top: auto;
    right: 0;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 60vh;
    border-left: none;
    border-top: 1px solid var(--color-border);
    border-radius: 16px 16px 0 0;
    transition: bottom 0.3s ease;
  }
  .toc-panel--open {
    bottom: 0;
  }
}

/* =========================================================================
   R4-09: Related Sections Cross-Links ("See Also")
   ========================================================================= */

.see-also {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding: 1rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.see-also__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.see-also__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-accent);
  background: var(--color-accent-glow);
  border: 1px solid var(--color-accent-dim);
  border-radius: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.see-also__link:hover {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

/* =========================================================================
   R4-17: Command Palette Go-To Results
   ========================================================================= */

.search-result--goto {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.search-result__goto-icon {
  font-size: 1.1rem;
  color: var(--color-accent);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

/* ── Decision Helper ──────────────────────────────────────────── */
.decision-helper {
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg, 12px);
  padding: 1.5rem;
  margin-bottom: 2rem;
  backdrop-filter: blur(12px);
}

.dh-title {
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  color: var(--color-accent);
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
}

.dh-subtitle {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin: 0 0 1.25rem;
}

.dh-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dh-filter-group label {
  display: block;
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dh-filter-group select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--color-bg);
  border: 1px solid rgba(197, 160, 89, 0.3);
  border-radius: var(--radius-sm, 6px);
  color: var(--color-text);
  font-size: 0.9rem;
  cursor: pointer;
}

.dh-filter-group select:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.2);
}

.dh-prompt {
  color: var(--color-muted);
  text-align: center;
  padding: 1.5rem;
  font-style: italic;
}

.dh-result {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: var(--color-bg);
  border-radius: var(--radius-sm, 6px);
  margin-bottom: 0.75rem;
  border-left: 3px solid var(--color-muted);
  transition: border-color 0.2s;
}

.dh-result-top {
  border-left-color: var(--color-accent);
  background: rgba(197, 160, 89, 0.05);
}

.dh-result-rank {
  color: var(--color-accent);
  font-weight: bold;
  font-size: 0.85rem;
  min-width: 80px;
  white-space: nowrap;
}

.dh-result-body { flex: 1; }

.dh-result-name {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
}

.dh-result-name a {
  color: var(--color-text);
  text-decoration: none;
}
.dh-result-name a:hover { color: var(--color-accent); }

.dh-result-score {
  font-size: 0.75rem;
  color: var(--color-accent);
  background: rgba(197, 160, 89, 0.15);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-weight: 600;
}

.dh-result-desc {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin: 0 0 0.5rem;
  line-height: 1.4;
}

.dh-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.dh-tag {
  display: inline-block;
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(136, 146, 176, 0.15);
  color: var(--color-muted);
  white-space: nowrap;
}

.dh-tag-pt {
  background: rgba(197, 160, 89, 0.12);
  color: var(--color-accent);
}

.dh-cost-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.dh-cost-badge { padding: 0.15rem 0.5rem; border-radius: 3px; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; }
.dh-cost-free { background: var(--color-success-dim); color: var(--color-success); }
.dh-cost-academic { background: var(--color-info-dim); color: var(--color-info); }
.dh-cost-commercial { background: var(--color-danger-dim); color: var(--color-danger); }
.dh-cost-detail { font-size: 0.8rem; color: var(--color-muted, #8892B0); }
.dh-justification { color: var(--color-text, #CCD6F6); font-size: 0.9rem; margin-bottom: 0.5rem; font-style: italic; }
.dh-gotcha { background: var(--color-warning-dim); border: 1px solid var(--color-warning-border); padding: 0.5rem 0.75rem; border-radius: 4px; font-size: 0.8rem; color: var(--color-warning); margin-bottom: 0.5rem; display: flex; gap: 0.5rem; align-items: flex-start; }
.dh-gotcha-icon { flex-shrink: 0; }
.dh-reset { background: transparent; border: 1px solid var(--color-border, rgba(136,146,176,0.2)); color: var(--color-muted, #8892B0); padding: 0.4rem 0.8rem; border-radius: 4px; cursor: pointer; font-size: 0.8rem; margin-top: 0.5rem; }
.dh-reset:hover { border-color: var(--color-accent, #C5A059); color: var(--color-accent, #C5A059); }

.dh-quickstart {
  margin-top: 0.5rem;
}

.dh-quickstart summary {
  font-size: 0.8rem;
  color: var(--color-accent);
  cursor: pointer;
  user-select: none;
}

.dh-quickstart pre {
  background: var(--color-bg);
  border: 1px solid rgba(136, 146, 176, 0.2);
  border-radius: var(--radius-sm, 6px);
  padding: 0.75rem;
  margin: 0.5rem 0;
  overflow-x: auto;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-text);
}

/* ── Modeling Tools ──────────────────────────────────────────── */
.mt-header { margin-bottom: 1.5rem; }
.mt-header h2 { color: var(--color-accent); margin: 0 0 0.25rem; }
.mt-desc { color: var(--color-muted); font-size: 0.9rem; margin: 0; }

.mt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.mt-card {
  padding: 1.25rem;
  border-left: 3px solid var(--color-accent);
}

.mt-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.mt-card__name {
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-text);
}

.mt-card__desc {
  color: var(--color-muted);
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 0 0 0.75rem;
}

.mt-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.mt-card__list {
  font-size: 0.82rem;
  color: var(--color-text);
  margin: 0.25rem 0;
  line-height: 1.4;
}

.mt-card__list--not {
  color: var(--color-muted);
}

.mt-card__solvers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin: 0.5rem 0;
  font-size: 0.82rem;
}

.mt-card__links {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.mt-link {
  font-size: 0.8rem;
  color: var(--color-accent);
  text-decoration: none;
}
.mt-link:hover { text-decoration: underline; }

.dh-tag-low { background: rgba(74, 222, 128, 0.15); color: var(--color-success); }
.dh-tag-medium { background: rgba(197, 160, 89, 0.15); color: var(--color-accent); }
.dh-tag-steep { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

/* ── Compatibility Matrix ────────────────────────────────────── */
.compat-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(136, 146, 176, 0.2);
}

.compat-section h2 { color: var(--color-accent); margin: 0 0 0.5rem; }
.compat-desc { color: var(--color-muted); font-size: 0.9rem; margin: 0 0 1rem; }

.compat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.compat-table th,
.compat-table td {
  padding: 0.5rem 0.6rem;
  text-align: center;
  border-bottom: 1px solid rgba(136, 146, 176, 0.15);
}

.compat-table th {
  color: var(--color-accent);
  font-weight: 600;
  position: sticky;
  top: 0;
  background: var(--color-bg);
}

.compat-table tbody th {
  text-align: left;
  color: var(--color-text);
}

.compat-yes { color: var(--color-success); }
.compat-limited { color: #fbbf24; }
.compat-no { color: var(--color-muted); }

.compat-notes {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.compat-notes li {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .dh-filters { grid-template-columns: 1fr; }
  .dh-result { flex-direction: column; gap: 0.5rem; }
  .dh-result-rank { min-width: auto; }
  .mt-grid { grid-template-columns: 1fr; }
}

/* Licensing Guide */
.licensing-guide__title { font-family: 'Cormorant Garamond', serif; font-size: 2rem; }
.licensing-guide__subtitle { color: var(--color-muted, #8892B0); margin-bottom: 1.5rem; }
.licensing-table { width: 100%; border-collapse: collapse; }
.licensing-table th { text-align: left; padding: 0.5rem; border-bottom: 2px solid rgba(136,146,176,0.2); color: var(--color-muted, #8892B0); font-size: 0.8rem; }
.licensing-table td { padding: 0.5rem; border-bottom: 1px solid rgba(136,146,176,0.1); font-size: 0.85rem; }
.licensing-table a { color: var(--color-accent, #C5A059); text-decoration: none; }
.licensing-detail-card { background: rgba(10,25,47,0.5); padding: 1rem; margin-bottom: 0.75rem; border-radius: 6px; border-left: 3px solid var(--color-accent, #C5A059); }
.licensing-detail-card.ld-open { border-left-color: var(--color-success); }
.licensing-detail-card h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.ld-gotcha { background: var(--color-warning-dim); border: 1px solid var(--color-warning-border); padding: 0.5rem 0.75rem; border-radius: 4px; font-size: 0.8rem; color: var(--color-warning); margin-top: 0.5rem; }
.ld-hidden-costs { font-size: 0.8rem; color: var(--color-muted, #8892B0); padding-left: 1.2rem; margin-top: 0.5rem; }
.ld-pricing { font-size: 0.85rem; }
.academic-checklist { margin-bottom: 0.75rem; }
.academic-checklist summary { cursor: pointer; padding: 0.5rem; background: rgba(10,25,47,0.5); border-radius: 4px; }
.academic-checklist ol { padding-left: 1.5rem; font-size: 0.85rem; margin: 0.5rem 0; }
.checklist-gotcha { background: var(--color-warning-dim); padding: 0.5rem 0.75rem; border-radius: 4px; margin-top: 0.5rem; font-size: 0.8rem; }
.checklist-gotcha ul { padding-left: 1.2rem; margin: 0.25rem 0 0; }
.academic-tip { background: var(--color-success-dim); border: 1px solid var(--color-success-border); padding: 0.75rem 1rem; border-radius: 6px; margin-top: 1rem; font-size: 0.85rem; }

/* Tool Helper */
.tool-helper { margin-bottom: 1.5rem; }
.tool-helper h2 { font-family: 'Cormorant Garamond', serif; }
.tool-helper-flow { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.tool-rec-card { background: var(--color-success-dim); border: 1px solid var(--color-success-border); padding: 1rem; border-radius: 6px; margin-top: 0.5rem; }
.tool-rec-card h3 { margin: 0 0 0.25rem; color: var(--color-success); font-size: 1rem; }
.tool-rec-card p { margin: 0; font-size: 0.9rem; }
/* Code Comparison */
.code-tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-bottom: 0; }
.code-tab { background: transparent; border: 1px solid rgba(136,146,176,0.2); color: var(--color-muted, #8892B0); padding: 0.3rem 0.7rem; border-radius: 4px 4px 0 0; cursor: pointer; font-size: 0.8rem; border-bottom: none; }
.code-tab--active { background: rgba(0,0,0,0.3); color: var(--color-accent, #C5A059); border-color: rgba(197,160,89,0.3); }
.code-display { background: rgba(0,0,0,0.3); border: 1px solid rgba(136,146,176,0.2); border-radius: 0 6px 6px 6px; padding: 1rem; overflow-x: auto; font-size: 0.85rem; line-height: 1.5; margin-top: 0; }
/* Time to First Model */
.ttfm-bars { margin: 1rem 0; }
.ttfm-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.ttfm-name { min-width: 110px; text-align: right; font-size: 0.85rem; color: var(--color-text, #CCD6F6); }
.ttfm-bar { height: 28px; background: linear-gradient(90deg, var(--color-accent, #C5A059), rgba(197,160,89,0.4)); border-radius: 4px; display: flex; align-items: center; padding: 0 0.5rem; font-size: 0.75rem; min-width: 60px; color: var(--color-bg, #0A192F); font-weight: 600; }

/* Performance Chart & Calculator */
.cost-perf-chart { display: block; margin: 1rem auto; }
.chart-subtitle { font-size: 0.85rem; color: var(--color-muted, #8892B0); }
.chart-caveat { font-size: 0.8rem; color: var(--color-muted, #8892B0); font-style: italic; margin-top: 0.5rem; }
.calc-inputs { display: flex; gap: 1rem; margin: 1rem 0; flex-wrap: wrap; }
.calc-inputs label { font-size: 0.85rem; color: var(--color-muted, #8892B0); }
.calc-inputs select { background: var(--color-surface, rgba(10,25,47,0.85)); color: var(--color-text, #CCD6F6); border: 1px solid rgba(136,146,176,0.3); padding: 0.4rem 0.5rem; border-radius: 4px; margin-left: 0.5rem; }
.calc-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.calc-table th { text-align: left; padding: 0.4rem; border-bottom: 2px solid rgba(136,146,176,0.2); color: var(--color-muted, #8892B0); font-size: 0.8rem; }
.calc-table td { padding: 0.4rem; border-bottom: 1px solid rgba(136,146,176,0.1); font-size: 0.85rem; }
.calc-table a { color: var(--color-accent, #C5A059); text-decoration: none; }
.speed-bar { height: 8px; background: var(--color-accent, #C5A059); border-radius: 4px; min-width: 4px; }

/* G40: Quick Answer cards */
.quick-answer { text-align: center; padding: 1.5rem 0; }
.quick-answer h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; }
.qa-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-top: 1rem; }
.qa-card { background: var(--color-surface, rgba(10,25,47,0.85)); border: 1px solid rgba(136,146,176,0.15); border-radius: 8px; padding: 1.25rem 1rem; text-decoration: none; color: var(--color-text, #CCD6F6); transition: border-color 0.2s, transform 0.2s; text-align: center; }
.qa-card:hover { border-color: var(--color-accent, #C5A059); transform: translateY(-2px); }
.qa-card h3 { margin: 0 0 0.25rem; font-size: 0.95rem; }
.qa-card p { font-size: 0.75rem; color: var(--color-muted, #8892B0); margin: 0; }
.qa-highlight { border-color: var(--color-success-border); }

/* G42: Mobile responsiveness for solver table */
@media (max-width: 768px) {
  .solver-table { font-size: 0.75rem; }
  .solver-row__activity, .solver-row__links { display: none; }
  .solver-table th:nth-child(4), .solver-table th:nth-child(8) { display: none; }
  .decision-helper .dh-filters { flex-direction: column; }
  .qa-cards { grid-template-columns: repeat(2, 1fr); }
  .tool-helper-flow { flex-direction: column; }
  .calc-inputs { flex-direction: column; }
  .ttfm-name { min-width: 80px; font-size: 0.75rem; }
}

/* H47: Health warnings */
.health-warning { font-size: 0.6rem; padding: 0.1rem 0.3rem; border-radius: 3px; margin-left: 0.25rem; }
.health-warning--critical { background: var(--color-danger-dim); color: var(--color-danger-strong); }
.health-warning--warning { background: var(--color-warning-dim); color: var(--color-warning); }

/* ================================================================
   Data Loader — last-updated badge
   ================================================================ */
.last-updated {
  font-size: 0.75rem;
  color: var(--color-muted, #8892B0);
  text-align: right;
  padding: 0.5rem 0;
  opacity: 0.7;
}

/* ================================================================
   OR Feed — consolidated publications/software/conferences/opps view
   ================================================================ */
.feed-page { max-width: 960px; margin: 0 auto; padding: 1rem; }
.feed-page__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  color: var(--color-text, #CCD6F6);
  margin-bottom: 0.25rem;
}
.feed-page__desc {
  color: var(--color-muted, #8892B0);
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}
.feed-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.feed-filter {
  padding: 0.4rem 0.9rem;
  border-radius: 2rem;
  border: 1px solid rgba(136, 146, 176, 0.15);
  background: transparent;
  color: var(--color-muted, #8892B0);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.feed-filter:hover { border-color: var(--color-accent, #C5A059); color: var(--color-text, #CCD6F6); }
.feed-filter.active { background: var(--color-accent, #C5A059); color: #0A192F; border-color: var(--color-accent, #C5A059); font-weight: 600; }
.feed-filter__count {
  font-size: 0.65rem;
  background: rgba(255,255,255,0.15);
  padding: 0.1rem 0.35rem;
  border-radius: 1rem;
}
.feed-filter.active .feed-filter__count { background: rgba(0,0,0,0.2); }
.feed-content { display: flex; flex-direction: column; gap: 0.75rem; }
.feed-empty { text-align: center; color: var(--color-muted, #8892B0); padding: 3rem 0; }
.feed-more { text-align: center; color: var(--color-muted, #8892B0); font-size: 0.8rem; padding: 1rem 0; }

.feed-card {
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  background: var(--color-surface, rgba(10, 25, 47, 0.85));
  border: 1px solid rgba(136, 146, 176, 0.08);
  animation: cardFadeIn 0.3s ease both;
}
.feed-card__badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  margin-bottom: 0.5rem;
}
.feed-card__badge--publication { background: rgba(100,149,237,0.15); color: #6495ED; }
.feed-card__badge--software { background: var(--color-success-dim); color: var(--color-success); }
.feed-card__badge--conference { background: var(--color-warning-dim); color: var(--color-warning); }
.feed-card__badge--opportunity { background: rgba(197,160,89,0.15); color: #C5A059; }

.feed-card__title { font-size: 1rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--color-text, #CCD6F6); }
.feed-card__title a { color: inherit; text-decoration: none; }
.feed-card__title a:hover { color: var(--color-accent, #C5A059); }
.feed-card__date { font-size: 0.75rem; color: var(--color-muted, #8892B0); display: block; margin-bottom: 0.3rem; }
.feed-card__authors { font-size: 0.8rem; color: var(--color-muted, #8892B0); margin-bottom: 0.3rem; }
.feed-card__desc { font-size: 0.8rem; color: var(--color-muted, #8892B0); line-height: 1.5; margin-bottom: 0.4rem; }
.feed-card__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.feed-card__tag {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  background: rgba(136, 146, 176, 0.1);
  color: var(--color-muted, #8892B0);
}
.feed-card__version {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  background: var(--color-success-dim);
  color: var(--color-success);
  margin-top: 0.3rem;
}
.feed-card__deadline {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  background: var(--color-warning-dim);
  color: var(--color-warning);
  margin-top: 0.3rem;
}
.feed-card__deadline--urgent { background: var(--color-danger-dim); color: var(--color-danger-strong); }

/* ================================================================
   Hero chooser — problem-type cards (Solvers landing)
   ================================================================ */
.hero-chooser {
  text-align: center;
  padding: 2.5rem 1rem 2rem;
}
.hero-chooser h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem;
  color: var(--color-text, #CCD6F6);
  margin-bottom: 0.5rem;
}
.hero-sub {
  color: var(--color-muted, #8892B0);
  font-size: 1rem;
  margin-bottom: 2rem;
}
.problem-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  max-width: 800px;
  margin: 0 auto;
}
.pcard {
  background: rgba(10, 25, 47, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(136, 146, 176, 0.12);
  border-radius: 8px;
  padding: 1.25rem 1rem;
  text-decoration: none;
  color: var(--color-text, #CCD6F6);
  transition: border-color 0.2s, transform 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.pcard:hover {
  border-color: var(--color-accent, #C5A059);
  transform: translateY(-2px);
}
.pcard-label { font-weight: 600; font-size: 0.95rem; }
.pcard-desc { font-size: 0.75rem; color: var(--color-muted, #8892B0); }
.pcard-free { border-color: var(--color-success-border); }
.pcard-free:hover { border-color: var(--color-success); }

/* ================================================================
   Starter Paths
   ================================================================ */
.starter-paths {
  padding: 1.5rem 0;
  border-top: 1px solid rgba(136, 146, 176, 0.1);
}
.starter-paths h2 {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  color: var(--color-text, #CCD6F6);
  margin-bottom: 1rem;
}
.path-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  max-width: 900px;
  margin: 0 auto;
}
.path-card {
  background: rgba(10, 25, 47, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(136, 146, 176, 0.12);
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
  text-align: left;
  color: var(--color-text, #CCD6F6);
  transition: border-color 0.2s;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.path-card:hover, .path-card.active { border-color: var(--color-accent, #C5A059); }
.path-title { font-weight: 600; font-size: 0.9rem; }
.path-result { font-size: 0.75rem; color: var(--color-muted, #8892B0); }
.path-detail-panel { max-width: 900px; margin: 1.5rem auto 0; }
.path-expanded {
  background: rgba(10, 25, 47, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(197, 160, 89, 0.2);
  border-radius: 8px;
  padding: 1.5rem;
}
.path-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
@media (max-width: 600px) { .path-stack { grid-template-columns: 1fr; } }
.stack-item {
  padding: 0.75rem;
  border-left: 2px solid rgba(136, 146, 176, 0.2);
}
.stack-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent, #C5A059);
  display: block;
  margin-bottom: 0.25rem;
}
.stack-link { font-weight: 600; color: var(--color-text, #CCD6F6); text-decoration: none; }
.stack-link:hover { color: var(--color-accent, #C5A059); }
.stack-why { font-size: 0.8rem; color: var(--color-muted, #8892B0); margin: 0.25rem 0 0; }
.path-steps h4 { font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--color-text, #CCD6F6); }
.path-steps ol { padding-left: 1.25rem; }
.path-steps li {
  font-size: 0.85rem;
  color: var(--color-text, #CCD6F6);
  margin-bottom: 0.4rem;
  line-height: 1.5;
}
.path-steps code, .path-steps li code {
  background: rgba(0,0,0,0.3);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-size: 0.8rem;
}

/* ================================================================
   G42: Mobile responsive polish for 5-tab nav
   ================================================================ */
@media (max-width: 768px) {
  /* Hero chooser responsive */
  .hero-chooser h1 {
    font-size: 1.5rem;
  }
  .problem-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  .pcard {
    padding: 0.85rem 0.7rem;
  }
  .pcard-label {
    font-size: 0.8rem;
  }

  /* Starter paths responsive */
  .path-cards {
    grid-template-columns: 1fr;
  }

  /* Feed responsive */
  .feed-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .feed-filters::-webkit-scrollbar { display: none; }

  /* Solver table responsive */
  .solver-table-wrap {
    -webkit-overflow-scrolling: touch;
  }

  /* Stats banner compact */
  .stats-banner {
    font-size: 0.7rem;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
  }
  .stats-banner__value {
    font-size: 0.85rem;
  }

  /* Licensing table responsive */
  .licensing-table {
    font-size: 0.75rem;
  }

  /* Compat matrix responsive */
  .compat-table {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .problem-cards {
    grid-template-columns: 1fr;
  }
  .hero-chooser {
    padding: 1.5rem 0.5rem 1rem;
  }
  .hero-chooser h1 {
    font-size: 1.3rem;
  }
  .nav__tabs {
    gap: 0.25rem;
    font-size: 0.65rem;
  }
}

/* ── Modeling Tool Banner (solver detail page) ─────────────────── */
.tool-not-solver-banner {
  background: var(--color-info-dim);
  border: 1px solid var(--color-info-border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: var(--color-text, #CCD6F6);
  margin-bottom: 1rem;
}
.tool-not-solver-banner a {
  color: var(--color-accent, #C5A059);
  text-decoration: none;
}
.tool-not-solver-banner a:hover {
  text-decoration: underline;
}

/* ================================================================
   Academic Rigor — Source tags, editorial notices, citations
   ================================================================ */
.editorial-notice {
  font-size: 0.8rem;
  color: var(--color-muted, #8892B0);
  margin: 0.5rem 0;
  font-style: italic;
}
.source-tag {
  display: inline-block;
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-right: 0.4rem;
  font-style: normal;
  vertical-align: middle;
}
.source-tag.automated, .source-tag.github, .source-tag.pypi { background: var(--color-success-dim); color: var(--color-success); }
.source-tag.vendor_docs, .source-tag.vendor_page, .source-tag.official_docs { background: var(--color-info-dim); color: var(--color-info); }
.source-tag.benchmark_results { background: rgba(197,160,89,0.12); color: var(--color-accent, #C5A059); }
.source-tag.community_estimate, .source-tag.community_discussion { background: var(--color-warning-dim); color: var(--color-warning); }
.source-tag.editorial { background: var(--color-danger-dim); color: var(--color-danger); }
.source-tag.manual { background: rgba(136,146,176,0.1); color: var(--color-muted, #8892B0); }

.sources-intro { font-size: 0.8rem; color: var(--color-muted, #8892B0); margin-bottom: 1rem; }
.source-list { font-size: 0.85rem; }
.source-item { padding: 0.5rem 0; border-bottom: 1px solid rgba(136,146,176,0.08); }
.source-item dt { font-weight: 600; color: var(--color-text, #CCD6F6); margin-bottom: 0.2rem; }
.source-item dd { margin-left: 0; color: var(--color-muted, #8892B0); }
.source-url { font-size: 0.75rem; color: var(--color-muted, #8892B0); word-break: break-all; display: block; margin-top: 0.15rem; }
.source-url:hover { color: var(--color-accent, #C5A059); }
.source-note { display: block; font-style: italic; margin-top: 0.2rem; font-size: 0.8rem; }
.source-verified { display: block; font-size: 0.7rem; color: var(--color-muted, #8892B0); opacity: 0.7; }

.pricing-disclaimer {
  background: var(--color-warning-dim);
  border: 1px solid var(--color-warning-border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  color: var(--color-text, #CCD6F6);
  margin-bottom: 1.5rem;
}