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

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

:root {
  --bg: #0b0d14;
  --surface: #131620;
  --surface-raised: #1c1f2e;
  --border: #252a3d;
  --text: #e2e5f1;
  --text-muted: #7a7e98;
  --text-dim: #3f4460;
  --accent: #7c6fcd;
  --accent-hover: #9d92e0;
  will-change: --bg, --text, --surface, --surface-raised;
  --kept: #34d399;
  --kept-bg: rgba(52, 211, 153, 0.08);
  --kept-border: rgba(52, 211, 153, 0.25);
  --broken: #f87171;
  --broken-bg: rgba(248, 113, 113, 0.08);
  --broken-border: rgba(248, 113, 113, 0.25);
  --progress: #fbbf24;
  --progress-bg: rgba(251, 191, 36, 0.08);
  --progress-border: rgba(251, 191, 36, 0.25);
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-card: 0 16px 48px rgba(0,0,0,0.5);
  --shadow-hover: 0 20px 60px rgba(0,0,0,0.6);
  --nav-bg: rgba(11, 13, 20, 0.92);
}

/* ── LIGHT MODE ─────────────────────────────────────────────────── */
:root[data-theme="light"] {
  --bg: #f2f4fb;
  --surface: #ffffff;
  --surface-raised: #e8ebf7;
  --border: #d4d8ee;
  --text: #0c0e1a;
  --text-muted: #50547a;
  --text-dim: #9298b8;
  --accent: #5b51be;
  --accent-hover: #7068cc;
  --kept: #059669;
  --kept-bg: rgba(5, 150, 105, 0.07);
  --kept-border: rgba(5, 150, 105, 0.22);
  --broken: #dc2626;
  --broken-bg: rgba(220, 38, 38, 0.07);
  --broken-border: rgba(220, 38, 38, 0.22);
  --progress: #b45309;
  --progress-bg: rgba(180, 83, 9, 0.07);
  --progress-border: rgba(180, 83, 9, 0.22);
  --shadow-card: 0 8px 32px rgba(0,0,0,0.1);
  --shadow-hover: 0 16px 48px rgba(0,0,0,0.15);
  --nav-bg: rgba(242, 244, 251, 0.95);
}

:root[data-theme="light"] html,
:root[data-theme="light"] body { color: var(--text); }

:root[data-theme="light"] .hero-title {
  background: linear-gradient(140deg, #1a1040 0%, #4535a8 50%, #7c6fcd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

:root[data-theme="light"] .nav {
  background: var(--nav-bg);
  box-shadow: 0 1px 0 var(--border);
}

:root[data-theme="light"] .pol-avatar { filter: brightness(1.08); }

:root[data-theme="light"] .pol-card,
:root[data-theme="light"] .feed-item,
:root[data-theme="light"] .promise-card,
:root[data-theme="light"] .profile-section,
:root[data-theme="light"] .ethics-panel,
:root[data-theme="light"] .ethics-stat,
:root[data-theme="light"] .ethics-score-card,
:root[data-theme="light"] .funding-section,
:root[data-theme="light"] .bills-header,
:root[data-theme="light"] .score-section {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

:root[data-theme="light"] .pol-card:hover,
:root[data-theme="light"] .feed-item:hover {
  box-shadow: var(--shadow-hover);
}

:root[data-theme="light"] .skeleton-card {
  background: linear-gradient(90deg, #e4e8f6 25%, #cdd3ed 50%, #e4e8f6 75%);
  background-size: 1200px 100%;
}

:root[data-theme="light"] .score-arc { opacity: 0.9; }

:root[data-theme="light"] .type-promise {
  background: rgba(91,81,190,0.08);
  color: #5b51be;
  border-color: rgba(91,81,190,0.2);
}

:root[data-theme="light"] .type-vote {
  background: rgba(14,116,144,0.08);
  color: #0e7490;
  border-color: rgba(14,116,144,0.2);
}

:root[data-theme="light"] .type-action {
  background: rgba(146,64,14,0.08);
  color: #92400e;
  border-color: rgba(146,64,14,0.2);
}

/* ── RESULTS PAGE TABS ───────────────────────────────────────────── */

.results-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-top: 26px;
  margin-bottom: 30px;
}

.results-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.results-tab:focus { outline: none; }
.results-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.results-tab:hover { color: var(--text); }

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

.tab-badge {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 50px;
}

.results-tab.active .tab-badge {
  background: rgba(124,111,205,0.15);
  border-color: rgba(124,111,205,0.3);
  color: var(--accent);
}

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── BILL HISTORY SECTION ────────────────────────────────────────── */

.bills-header {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
}

.bills-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bills-stat-num {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text);
  line-height: 1;
}

.bills-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.bills-stat-divider {
  width: 1px;
  height: 36px;
  background: var(--border);
}

.policy-breakdown { flex: 1; min-width: 180px; }

.policy-breakdown-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.policy-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.policy-bar-label {
  font-size: 11px;
  color: var(--text-muted);
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.policy-bar-track {
  flex: 1;
  height: 5px;
  background: var(--surface-raised);
  border-radius: 3px;
  overflow: hidden;
}

.policy-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  opacity: 0.7;
}

.policy-bar-count {
  font-size: 11px;
  color: var(--text-dim);
  width: 24px;
  text-align: right;
}

/* Bills filter row */
.bills-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  align-items: center;
}

.bills-filter .pill-sep { color: var(--text-dim); padding: 0 4px; }

/* Bill cards */
.bills-list { display: flex; flex-direction: column; gap: 10px; }

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

.bill-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  animation: billIn 0.3s ease both;
  transition: background 0.15s;
}

.bill-card:hover { background: var(--surface-raised); }

.bill-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.bill-number {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(124,111,205,0.1);
  border: 1px solid rgba(124,111,205,0.2);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.bill-date {
  font-size: 12px;
  color: var(--text-dim);
  margin-left: auto;
  white-space: nowrap;
}

.bill-status {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.bill-status-kept     { background: var(--kept-bg); color: var(--kept); border: 1px solid var(--kept-border); }
.bill-status-progress { background: var(--progress-bg); color: var(--progress); border: 1px solid var(--progress-border); }
.bill-status-accent   { background: rgba(124,111,205,0.1); color: var(--accent); border: 1px solid rgba(124,111,205,0.2); }
.bill-status-dim      { background: var(--surface-raised); color: var(--text-dim); border: 1px solid var(--border); }

.bill-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 10px;
}

.bill-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bill-association {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
}

.bill-assoc-sponsored   { background: rgba(52,211,153,0.1); color: var(--kept); border: 1px solid var(--kept-border); }
.bill-assoc-cosponsored { background: var(--surface-raised); color: var(--text-dim); border: 1px solid var(--border); }

.bill-area {
  font-size: 11px;
  color: var(--text-dim);
}

.bill-link {
  margin-left: auto;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.bill-link:hover { text-decoration: underline; }

.bills-load-more {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 12px;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.2s, color 0.2s;
}
.bills-load-more:hover { background: var(--surface-raised); color: var(--text); }
.bills-load-more:disabled { opacity: 0.5; cursor: default; }

.bills-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
  font-size: 15px;
}

/* ── THEME TOGGLE BUTTON ─────────────────────────────────────────── */
.theme-toggle {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover { border-color: var(--accent-hover); background: var(--accent-hover); }

.theme-icon {
  display: none;
  width: 20px;
  height: 20px;
  opacity: 1;
  color: #ffffff;
}
.theme-icon-light { color: #ffffff; }
.theme-icon-dark { color: #ffffff; }
:root[data-theme="dark"]  .theme-icon-light { display: block; }
:root[data-theme="light"] .theme-icon-dark  { display: block; }

html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; }

.hidden { display: none !important; }

/* ──────────────────────────────────────────
   LANDING PAGE
   ────────────────────────────────────────── */

.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  gap: 0;
}

.brand {
  text-align: center;
  margin-bottom: 44px;
}

.brand-logo {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 14px;
  display: block;
  filter: drop-shadow(0 0 24px rgba(124, 111, 205, 0.4));
}

.brand h1 {
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -1.5px;
  background: linear-gradient(135deg, #e2e5f1 20%, #a89cdc 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.brand .tagline {
  color: var(--text-muted);
  font-size: 17px;
  margin-top: 10px;
  font-weight: 300;
}

.search-form {
  width: 100%;
  max-width: 580px;
}

.search-wrapper {
  display: flex;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 7px 7px 7px 22px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-wrapper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 111, 205, 0.12);
}

.search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  min-width: 0;
}

.search-input::placeholder { color: var(--text-dim); }

.search-btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 40px;
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, transform 0.1s;
  font-family: inherit;
}

.search-btn:hover { background: var(--accent-hover); }
.search-btn:active { transform: scale(0.97); }

.examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
  max-width: 580px;
  align-items: center;
}

.examples-label {
  color: var(--text-dim);
  font-size: 13px;
}

.example-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  font-family: inherit;
  border-radius: 50px;
  padding: 5px 14px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.example-chip:hover {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(124, 111, 205, 0.08);
}

.landing-footer {
  margin-top: 64px;
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
  max-width: 440px;
  line-height: 1.7;
}

.landing-footer a {
  color: var(--accent);
  text-decoration: none;
}

/* ──────────────────────────────────────────
   NAV
   ────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: rgba(11, 13, 20, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.nav-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 128px;
  height: 34px;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  color: var(--text);
  letter-spacing: -0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-logo {
  position: absolute;
  left: 0;
  width: 128px;
  height: auto;
  max-height: 34px;
  object-fit: contain;
}

.nav-logo-light { display: none; }
:root[data-theme="light"] .nav-logo-dark { display: none; }
:root[data-theme="light"] .nav-logo-light { display: block; }

.nav-leaderboards {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 7px;
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  color: white;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.28);
  transition: transform 0.16s, box-shadow 0.16s, filter 0.16s;
}

.nav-leaderboards:hover,
.nav-leaderboards.active {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 14px 34px rgba(124, 58, 237, 0.36);
}

.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
  color: var(--text);
  background: var(--surface-raised);
}

a[href*="apps.apple.com"] {
  color: inherit;
  text-decoration: none;
}

.nav-app-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 15px;
  border-radius: 7px;
  background: rgba(124,111,205,0.13);
  border: 1px solid rgba(124,111,205,0.38);
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.16s, border-color 0.16s, background 0.16s;
}

.nav-app-link:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: rgba(124,111,205,0.22);
}

.nav-search {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
  max-width: 420px;
  margin-left: auto;
}

.nav-search-input {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.nav-search-input:focus { border-color: var(--accent); }
.nav-search-input::placeholder { color: var(--text-dim); }

.nav-search-btn {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 7px 16px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.nav-search-btn:hover {
  background: var(--border);
  color: var(--text);
}

/* ──────────────────────────────────────────
   CONTAINER
   ────────────────────────────────────────── */

.container {
  width: min(100% - 220px, 1420px);
  max-width: none;
  margin: 0 auto;
  padding: 0 0 88px;
}

/* ──────────────────────────────────────────
   STATES (loading / error)
   ────────────────────────────────────────── */

.state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 58px);
  gap: 14px;
  text-align: center;
  padding: 32px 24px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
  width: 42px;
  height: 42px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  margin-bottom: 4px;
}

.state-container h2 { font-size: 21px; font-weight: 600; }
.state-container p { color: var(--text-muted); font-size: 15px; max-width: 340px; }

.state-btn {
  margin-top: 8px;
  display: inline-block;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: 10px 22px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
}

.state-btn:hover { background: var(--border); }

.search-match-list {
  width: min(100%, 520px);
  margin: 8px 0 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 18px 50px rgba(0,0,0,0.18);
}

.search-match-card {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 72px;
  padding: 12px 16px;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background 0.14s, transform 0.14s;
}

.search-match-card:last-child { border-bottom: 0; }

.search-match-card:hover {
  background: var(--surface-raised);
  transform: translateX(2px);
}

.search-match-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  color: white;
  font-size: 13px;
  font-weight: 850;
  background: linear-gradient(135deg, #3d4263, #252840);
}

.search-match-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.search-match-info {
  min-width: 0;
  flex: 1;
}

.search-match-info strong {
  display: block;
  overflow: hidden;
  font-size: 15px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-match-info small {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
}

.search-match-arrow {
  color: var(--accent);
  font-size: 18px;
  font-weight: 900;
}

:root[data-theme="light"] .search-match-list { box-shadow: 0 14px 36px rgba(15,23,42,0.10); }

.error-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--broken-bg);
  border: 1px solid var(--broken-border);
  color: var(--broken);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

/* ──────────────────────────────────────────
   PROFILE CARD
   ────────────────────────────────────────── */

.profile-section {
  display: flex;
  gap: 32px;
  align-items: center;
  margin-top: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
}

.profile-avatar {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #5b4fc4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
  letter-spacing: -1.5px;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 44px rgba(0,0,0,0.22);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-info {
  flex: 1;
  min-width: 0;
}

.profile-info h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.2;
}

.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px;
}

.meta-chip {
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 50px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}

.meta-chip.dem { border-color: rgba(96, 165, 250, 0.35); color: #93c5fd; }
.meta-chip.rep { border-color: rgba(248, 113, 113, 0.35); color: #fca5a5; }
.meta-chip.ind { border-color: rgba(167, 139, 250, 0.35); color: #c4b5fd; }
.meta-chip.stat-chip { border-color: rgba(124, 111, 205, 0.25); color: #7c6fcd; }

.profile-bio {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.65;
  max-width: 980px;
}

.ethics-preview {
  display: none;
}

.results-workspace {
  display: grid;
  grid-template-columns: minmax(390px, 0.82fr) minmax(0, 1.48fr);
  gap: 32px;
  align-items: start;
  margin-top: 28px;
}

.results-workspace:has(.ethics-column.hidden) {
  grid-template-columns: minmax(0, 1fr);
}

.ethics-column,
.record-column {
  min-width: 0;
}

.ethics-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ethics-column.hidden {
  display: none;
}

/* ──────────────────────────────────────────
   SCORE SECTION
   ────────────────────────────────────────── */

.score-section {
  display: flex;
  gap: 44px;
  align-items: center;
  margin-top: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 40px;
}

.score-visual {
  position: relative;
  width: 148px;
  height: 148px;
  flex-shrink: 0;
}

.score-ring { width: 148px; height: 148px; }

.score-track {
  fill: none;
  stroke: var(--border);
  stroke-width: 9;
}

.score-arc {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.score-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.score-number {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1;
}

.score-denom {
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 500;
}

.score-na {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: -0.5px;
}

.score-details { flex: 1; }

.score-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  margin-bottom: 18px;
}

.score-breakdown {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.breakdown-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.breakdown-count {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
}

.breakdown-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.breakdown-kept .breakdown-count { color: var(--kept); }
.breakdown-broken .breakdown-count { color: var(--broken); }
.breakdown-progress .breakdown-count { color: var(--progress); }

.score-context {
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ──────────────────────────────────────────
   ETHICS SECTION
   ────────────────────────────────────────── */

.ethics-section {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ethics-score-card,
.ethics-panel,
.ethics-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.ethics-score-card {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.ethics-grade-box {
  width: 180px;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  color: #fff;
}

.ethics-grade-a { background: linear-gradient(135deg, #059669, #34d399); }
.ethics-grade-b { background: linear-gradient(135deg, #2563eb, #60a5fa); }
.ethics-grade-c { background: linear-gradient(135deg, #ca8a04, #facc15); color: #1a1200; }
.ethics-grade-d { background: linear-gradient(135deg, #ea580c, #fb923c); }
.ethics-grade-f { background: linear-gradient(135deg, #dc2626, #fb7185); }
.ethics-grade-na { background: linear-gradient(135deg, #475569, #94a3b8); }

.ethics-grade-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  opacity: 0.78;
}

.ethics-grade {
  font-size: 58px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.ethics-score {
  font-size: 13px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  opacity: 0.86;
}

.ethics-summary {
  flex: 1;
  padding: 28px 30px;
}

.ethics-pledges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.ethics-pledge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  border: 1px solid var(--border);
}

.ethics-pledge.on {
  color: var(--kept);
  background: var(--kept-bg);
  border-color: var(--kept-border);
}

.ethics-pledge.off {
  color: var(--broken);
  background: var(--broken-bg);
  border-color: var(--broken-border);
}

.ethics-snapshot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ethics-stat {
  padding: 14px;
  min-width: 0;
}

.ethics-stat span,
.ethics-stat small {
  display: block;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ethics-stat strong {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  font-weight: 760;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ethics-stat small {
  margin-top: 7px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.ethics-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.ethics-panel {
  padding: 20px;
  min-width: 0;
}

.ethics-panel h2 {
  font-size: 15px;
  font-weight: 720;
  margin-bottom: 16px;
}

.ethics-bars,
.ethics-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ethics-bar-top,
.ethics-list-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.ethics-bar-top span,
.ethics-list-row span {
  min-width: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ethics-bar-top strong,
.ethics-list-row strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 740;
  white-space: nowrap;
}

.ethics-bar-track {
  margin-top: 7px;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
}

.ethics-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--kept));
}

.ethics-list-row {
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.ethics-list-row:last-child { border-bottom: 0; }

.ethics-list-row div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.ethics-list-row small {
  color: var(--text-dim);
  font-size: 11px;
  max-width: 130px;
  text-align: right;
}

.ethics-empty {
  color: var(--text-dim);
  font-size: 13px;
  padding: 8px 0;
}

/* ──────────────────────────────────────────
   FUNDING SECTION
   ────────────────────────────────────────── */

.funding-section {
  margin-top: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.funding-section h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

.donors-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.donor-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--surface-raised);
  border-radius: 8px;
  font-size: 14px;
}

.donor-name {
  flex: 1;
  font-weight: 500;
}

.donor-amount {
  font-weight: 600;
  color: var(--accent);
  margin-left: 16px;
}

.donor-type {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 50px;
  background: var(--surface);
  color: var(--text-muted);
  margin-left: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ──────────────────────────────────────────
   PROMISES SECTION
   ────────────────────────────────────────── */

.promises-section { margin-top: 32px; }

.promises-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.sort-select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 50px;
  padding: 5px 32px 5px 14px;
  cursor: pointer;
  transition: all 0.15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a7e98' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  outline: none;
}

.sort-select:hover { border-color: var(--accent); }
.sort-select:focus { border-color: var(--accent); }

.promises-header h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pill {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  font-family: inherit;
  border-radius: 50px;
  padding: 5px 14px;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
}

.pill:hover { border-color: var(--accent); color: var(--text); }

.pill.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(124, 111, 205, 0.12);
}

/* ── POLITRUTH FEATURE TOOLS ───────────────────────────────────── */

.tool-hero {
  max-width: 1180px;
  margin: 48px auto 26px;
  padding: 0 24px;
}

.tool-eyebrow {
  color: var(--accent-hover);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.tool-title {
  color: var(--text);
  font-size: clamp(38px, 7vw, 74px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 800;
  max-width: 820px;
}

.tool-subtitle {
  color: var(--text-muted);
  max-width: 680px;
  font-size: 17px;
  line-height: 1.7;
  margin-top: 18px;
}

.tool-shell {
  max-width: 1180px;
  margin: 0 auto 80px;
  padding: 0 24px;
}

.tool-card,
.compare-picker,
.reps-lookup,
.share-export-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.compare-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.compare-picker {
  padding: 18px;
}

.field-label {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 10px;
}

.tool-input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  padding: 0 14px;
  outline: none;
}

.tool-input:focus { border-color: var(--accent); }

.suggestion-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.suggestion-row,
.rep-row {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  padding: 11px;
  display: flex;
  gap: 10px;
  align-items: center;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

.suggestion-row:hover,
.rep-row:hover {
  border-color: var(--accent);
}

.mini-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: rgba(124,111,205,0.16);
  color: var(--accent-hover);
  font-weight: 800;
  overflow: hidden;
}

.mini-avatar img,
.compare-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.suggestion-main,
.rep-main { min-width: 0; flex: 1; }

.suggestion-name,
.rep-name {
  display: block;
  color: var(--text);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-meta,
.rep-meta {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 3px;
}

.compare-board {
  overflow: hidden;
}

.compare-head {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--border);
}

.compare-person-card {
  padding: 22px;
  display: grid;
  justify-items: center;
  text-align: center;
  border-right: 1px solid var(--border);
}

.compare-person-card:last-child { border-right: 0; }

.compare-avatar {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(124,111,205,0.16);
  color: var(--accent-hover);
  font-weight: 900;
  font-size: 24px;
  overflow: hidden;
  margin-bottom: 12px;
}

.compare-person-name {
  color: var(--text);
  font-size: 22px;
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: 8px;
}

.compare-person-meta {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.profile-mini-link {
  color: var(--accent-hover);
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  margin-top: 12px;
}

.compare-row {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.compare-row:last-child { border-bottom: 0; }

.compare-row-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 9px;
}

.compare-row-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.compare-row-value {
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 750;
}

.state-chip-row,
.issue-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.state-chip,
.issue-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-muted);
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.state-chip:hover,
.issue-chip:hover,
.state-chip.active,
.issue-chip.active {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(124,111,205,0.14);
}

.tool-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
}

.primary-action,
.secondary-action {
  min-height: 44px;
  border-radius: var(--radius-sm);
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.primary-action {
  border: 0;
  background: var(--text);
  color: var(--bg);
}

.secondary-action {
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.reps-lookup {
  padding: 18px;
  margin-bottom: 18px;
}

.reps-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: 18px;
}

.reps-results {
  display: grid;
  gap: 14px;
}

.reps-section {
  padding: 18px;
}

.reps-section h2 {
  color: var(--text);
  font-size: 20px;
  margin-bottom: 12px;
}

.state-note,
.tool-state {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.tool-state {
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
}

.profile-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.profile-action-btn {
  min-height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text);
  padding: 0 13px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-action-btn.primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.share-card-canvas-wrap {
  overflow: hidden;
  padding: 12px;
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-top: 12px;
  width: min(100%, 406px);
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.share-card-canvas-wrap canvas {
  width: min(100%, 380px);
  max-height: 58vh;
  height: auto;
  display: block;
  border-radius: 24px;
}

@media (max-width: 720px) {
  .share-card-canvas-wrap canvas {
    width: min(100%, 340px);
    max-height: 52vh;
  }
}

.filter-toolbar {
  display: grid;
  gap: 10px;
}

/* ──────────────────────────────────────────
   PROMISE CARDS
   ────────────────────────────────────────── */

.promises-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px;
}

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

.promise-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: 22px;
  animation: cardIn 0.35s ease both;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.promise-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.promise-card.has-source {
  cursor: pointer;
}

.promise-card.has-source:hover {
  border-color: var(--accent);
}

.promise-card[data-status="kept"] {
  border-left-color: var(--kept);
  background: linear-gradient(105deg, var(--kept-bg) 0%, var(--surface) 45%);
}

.promise-card[data-status="broken"] {
  border-left-color: var(--broken);
  background: linear-gradient(105deg, var(--broken-bg) 0%, var(--surface) 45%);
}

.promise-card[data-status="in_progress"] {
  border-left-color: var(--progress);
  background: linear-gradient(105deg, var(--progress-bg) 0%, var(--surface) 45%);
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 11px;
}

.card-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.card-type-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.type-promise {
  background: rgba(124, 111, 205, 0.12);
  color: #a89cdc;
  border: 1px solid rgba(124, 111, 205, 0.25);
}

.type-vote {
  background: rgba(56, 189, 248, 0.1);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.type-action {
  background: rgba(251, 191, 36, 0.1);
  color: #fcd34d;
  border: 1px solid rgba(251, 191, 36, 0.25);
}

.pill-sep {
  color: var(--text-dim);
  padding: 0 2px;
  pointer-events: none;
}

.card-category {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
}

.status-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.status-badge.kept {
  background: var(--kept-bg);
  border: 1px solid var(--kept-border);
  color: var(--kept);
}

.status-badge.broken {
  background: var(--broken-bg);
  border: 1px solid var(--broken-border);
  color: var(--broken);
}

.status-badge.in_progress {
  background: var(--progress-bg);
  border: 1px solid var(--progress-border);
  color: var(--progress);
}

.promise-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.5;
}

.promise-analysis {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 14px;
}

.card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.promise-year {
  font-size: 12px;
  color: var(--text-dim);
  background: var(--surface-raised);
  padding: 2px 8px;
  border-radius: 4px;
}

.promise-source {
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--border);
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  transition: all 0.2s;
}

.promise-source.clickable {
  color: var(--accent);
  border-color: rgba(124, 111, 205, 0.35);
  background: rgba(124, 111, 205, 0.1);
}

.promise-source.muted {
  max-width: 260px;
}

.promise-source.clickable::after {
  content: " ↗";
}

.promise-card.has-source:hover .promise-source.clickable {
  color: var(--text);
  background: var(--surface-raised);
  border-color: var(--text-dim);
}

/* ──────────────────────────────────────────
   RESULTS FOOTER
   ────────────────────────────────────────── */

.results-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.results-footer p {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.7;
}

/* ──────────────────────────────────────────
   AUTOCOMPLETE
   ────────────────────────────────────────── */

.ac-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  z-index: 200;
  max-height: 400px;
  overflow-y: auto;
  display: none;
  scrollbar-width: thin;
}
.ac-dropdown.ac-visible { display: block; }

.ac-header {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text-dim);
  padding: 10px 14px 6px;
  border-bottom: 1px solid var(--border);
}

.ac-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; cursor: pointer; transition: background 0.1s;
  border-bottom: 1px solid var(--border);
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.ac-focused { background: var(--surface-raised); }

.ac-avatar {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: white; flex-shrink: 0;
  background: linear-gradient(135deg, #3d4263, #252840);
}
.ac-avatar.dem { background: linear-gradient(135deg, #1a3660, #1d4ed8); }
.ac-avatar.rep { background: linear-gradient(135deg, #7c2121, #a82929); }
.ac-avatar.ind { background: linear-gradient(135deg, #4c1d95, #6d28d9); }
.ac-avatar img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }

.ac-info { flex: 1; min-width: 0; }
.ac-name { display: block; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-meta { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }

:root[data-theme="light"] .ac-dropdown { box-shadow: 0 8px 32px rgba(0,0,0,0.12); }

/* ──────────────────────────────────────────
   HOME — LIVE DOT
   ────────────────────────────────────────── */

@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50%       { opacity: 0.7; box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}

.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #ef4444;
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* ──────────────────────────────────────────
   HOME — HERO
   ────────────────────────────────────────── */

.home-hero {
  text-align: center;
  padding: 80px 24px 60px;
  max-width: 740px;
  margin: 0 auto;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 5px 14px 5px 10px;
  border-radius: 50px;
  margin-bottom: 28px;
}


.hero-title {
  font-size: 62px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  word-spacing: 0.1em;
  background: linear-gradient(140deg, #f0f2ff 0%, #c4baf0 45%, #7c6fcd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 18px;
  overflow: visible;
}

.hero-sub {
  font-size: 18px;
  color: var(--text-muted);
  margin: 0 auto 36px;
  font-weight: 300;
  line-height: 1.65;
  max-width: 500px;
}

.hero-search-form { max-width: 620px; margin: 0 auto 28px; }

.hero-search-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 8px 8px 8px 22px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.hero-search-wrapper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124,111,205,0.14), 0 10px 40px rgba(0,0,0,0.35);
}

.hero-search-icon { font-size: 16px; opacity: 0.35; flex-shrink: 0; line-height: 1; }

.hero-search-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
}

.hero-search-input::placeholder { color: var(--text-dim); }

.hero-search-btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 40px;
  padding: 11px 26px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, transform 0.1s;
  font-family: inherit;
  flex-shrink: 0;
}

.hero-search-btn:hover  { background: var(--accent-hover); }
.hero-search-btn:active { transform: scale(0.97); }

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.chip-label { font-size: 12px; color: var(--text-dim); font-weight: 500; }

.hero-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 50px;
  padding: 5px 15px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}

.hero-chip:hover {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(124,111,205,0.08);
}

.hero-app-chip {
  background: rgba(124,111,205,0.14);
  border-color: rgba(124,111,205,0.38);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.hero-app-chip:hover {
  background: rgba(124,111,205,0.24);
}

/* ──────────────────────────────────────────
   HOME — SECTIONS
   ────────────────────────────────────────── */

.home-section {
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0 24px;
}

/* ── HOME BODY TWO-COLUMN ───────────────────────────────────────── */
.home-body {
  display: flex;
  flex-direction: row;
  gap: 40px;
  max-width: 1320px;
  margin: 0 auto 60px;
  padding: 0 32px;
  align-items: flex-start;
}

.home-left {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.home-left .home-section {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}

.home-right {
  flex: 0 0 340px;
  width: 340px;
  min-width: 340px;
}

@media (max-width: 1024px) {
  .home-body { flex-direction: column; }
  .home-right { width: 100%; flex: none; min-width: 0; }
}

/* ── RANKINGS ───────────────────────────────────────────────────── */

.rankings-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.leaderboard-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  color: white;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 18px 42px rgba(124, 58, 237, 0.28);
  transition: transform 0.16s, box-shadow 0.16s, filter 0.16s;
}

.leaderboard-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 22px 52px rgba(124, 58, 237, 0.36);
}

.rankings-col-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.rankings-col-header h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.rankings-col-header.best  { background: rgba(52, 211, 153, 0.06); }
.rankings-col-header.worst { background: rgba(248, 113, 113, 0.06); }
.rankings-col-header.best  .rankings-icon { color: var(--kept); font-size: 12px; }
.rankings-col-header.worst .rankings-icon { color: var(--broken); font-size: 12px; }
.rankings-col-header.best  h2 { color: var(--kept); }
.rankings-col-header.worst h2 { color: var(--broken); }

.rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.rank-row:last-child { border-bottom: none; }
.rank-row:hover { background: var(--surface-raised); }

.rank-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.rank-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid var(--border);
}
.rank-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rank-avatar.dem { border-color: rgba(96,165,250,0.4); color: #60a5fa; }
.rank-avatar.rep { border-color: rgba(248,113,113,0.4); color: #f87171; }

.rank-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rank-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.party-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.party-dot-dem { background: rgba(96,165,250,0.2); color: #60a5fa; }
.party-dot-rep { background: rgba(248,113,113,0.2); color: #f87171; }
.party-dot-ind { background: rgba(167,139,250,0.2); color: #a78bfa; }

.rank-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.rank-score {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-muted);
}

.rank-grade {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  min-width: 32px;
  text-align: center;
}

.grade-a  { background: rgba(52,211,153,0.15); color: var(--kept); }
.grade-b  { background: rgba(96,165,250,0.15); color: #60a5fa; }
.grade-c  { background: rgba(251,191,36,0.15); color: var(--progress); }
.grade-d  { background: rgba(248,113,113,0.12); color: var(--broken); }
.grade-f  { background: rgba(248,113,113,0.2);  color: var(--broken); }

@media (max-width: 768px) {
  .rankings-grid { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────
   LEADERBOARDS PAGE
   ────────────────────────────────────────── */

.leaderboard-page {
  width: min(100% - 96px, 1320px);
  margin: 0 auto;
  padding: 54px 0 88px;
}

.leaderboard-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 28px;
}

.leaderboard-eyebrow {
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.leaderboard-hero h1 {
  font-size: clamp(42px, 6vw, 76px);
  line-height: 0.96;
  font-weight: 850;
  margin-bottom: 14px;
}

.leaderboard-hero p {
  max-width: 680px;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1.6;
}

.leaderboard-summary {
  min-width: 190px;
  padding: 18px 20px;
  border: 1px solid rgba(139, 92, 246, 0.32);
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.12);
  text-align: right;
}

.leaderboard-summary strong {
  display: block;
  color: var(--text);
  font-size: 28px;
  line-height: 1;
}

.leaderboard-summary span {
  display: block;
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 13px;
}

.leaderboard-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.leaderboard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.leaderboard-tab {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}

.leaderboard-tab:hover,
.leaderboard-tab.active {
  border-color: var(--accent);
  background: rgba(124, 111, 205, 0.14);
  color: var(--accent);
}

.leaderboard-tools {
  display: flex;
  gap: 10px;
  min-width: min(100%, 520px);
}

.leaderboard-search,
.leaderboard-filter {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  outline: none;
}

.leaderboard-search {
  flex: 1;
  min-width: 220px;
  padding: 0 14px;
}

.leaderboard-filter {
  padding: 0 12px;
}

.leaderboard-search:focus,
.leaderboard-filter:focus {
  border-color: var(--accent);
}

.leaderboard-table-shell {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.leaderboard-table-head,
.leaderboard-row {
  display: grid;
  grid-template-columns: 72px minmax(260px, 1.2fr) 150px minmax(300px, 1fr);
  align-items: center;
  gap: 18px;
}

.leaderboard-table-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.leaderboard-row {
  min-height: 82px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition: background 0.14s;
}

.leaderboard-row:last-child { border-bottom: 0; }

.leaderboard-row:hover { background: var(--surface-raised); }

.leaderboard-rank {
  color: var(--text-muted);
  font-size: 24px;
  font-weight: 850;
  text-align: center;
}

.leaderboard-person {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.leaderboard-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  color: white;
  font-size: 14px;
  font-weight: 800;
  background: linear-gradient(135deg, #3d4263, #252840);
}

.leaderboard-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.leaderboard-avatar.dem { background: linear-gradient(135deg, #1a3660, #2563eb); }
.leaderboard-avatar.rep { background: linear-gradient(135deg, #7c2121, #dc2626); }
.leaderboard-avatar.ind { background: linear-gradient(135deg, #4c1d95, #7c3aed); }

.leaderboard-person strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-person small {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 13px;
}

.leaderboard-score {
  color: var(--kept);
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0;
}

.leaderboard-detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.leaderboard-detail span {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(255,255,255,0.02);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.leaderboard-detail b {
  display: block;
  overflow: hidden;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 14px;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.leaderboard-loading,
.leaderboard-empty {
  padding: 36px;
  color: var(--text-muted);
  text-align: center;
}

/* ── GRAPHS ─────────────────────────────────────────────────────── */

.graphs-page {
  width: min(100% - 64px, 1360px);
  margin: 0 auto;
  padding: 58px 0 90px;
}

.graphs-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
}

.graphs-hero h1 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
}

.graphs-hero p {
  max-width: 660px;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.7;
}

.graph-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 10px;
  min-width: 320px;
}

.graph-stat-grid span {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 750;
}

.graph-stat-grid strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 20px;
}

.graph-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.graph-preset {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s, color 0.16s, transform 0.16s;
}

.graph-preset:hover,
.graph-preset.active {
  transform: translateY(-1px);
  border-color: rgba(124,111,205,0.65);
  background: rgba(124,111,205,0.16);
  color: var(--text);
}

.graph-shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 260px;
  gap: 16px;
  align-items: stretch;
}

.graph-controls,
.graph-stage,
.graph-inspector {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)), var(--surface);
}

.graph-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}

.graph-controls label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.graph-controls label span {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.graph-controls select,
.graph-controls input {
  min-height: 38px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  outline: none;
  padding: 0 11px;
}

.graph-controls select:focus,
.graph-controls input:focus {
  border-color: var(--accent);
}

.graph-button-row {
  display: grid;
  grid-template-columns: 42px 42px 1fr;
  gap: 8px;
}

.graph-button-row button {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(124,111,205,0.13);
  color: var(--text);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.graph-button-row button:hover {
  border-color: var(--accent);
  background: rgba(124,111,205,0.22);
}

.graph-help {
  margin-top: auto;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.55;
}

.graph-stage {
  min-width: 0;
  overflow: hidden;
}

.graph-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.graph-toolbar strong {
  display: block;
  color: var(--text);
  font-size: 17px;
  font-weight: 900;
}

.graph-toolbar span {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
}

.graph-profile-link,
.graph-inspector-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(124,111,205,0.45);
  border-radius: 8px;
  background: rgba(124,111,205,0.14);
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

.graph-profile-link.disabled {
  pointer-events: none;
  opacity: 0.45;
}

.graph-canvas-wrap {
  position: relative;
  min-height: 420px;
  padding: 12px 14px 4px;
  overflow: hidden;
}

.graph-svg {
  display: block;
  width: 100%;
  min-height: 420px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.graph-svg:active {
  cursor: grabbing;
}

.graph-hit-area {
  fill: transparent;
}

.graph-grid {
  stroke: rgba(124,111,205,0.13);
  stroke-width: 1;
}

.graph-axis {
  stroke: var(--border);
  stroke-width: 1.2;
}

.graph-tick,
.graph-axis-label {
  fill: var(--text-dim);
  font-size: 11px;
  font-weight: 750;
}

.graph-axis-label {
  fill: var(--text-muted);
}

.graph-dot {
  fill: #8b5cf6;
  fill-opacity: 0.64;
  stroke: rgba(238,232,255,0.72);
  stroke-width: 1;
  cursor: pointer;
  transition: fill-opacity 0.12s, stroke-width 0.12s, r 0.12s;
}

.graph-dot.dem { fill: #8b5cf6; }
.graph-dot.rep { fill: #9d6cff; }
.graph-dot.ind { fill: #c4b5fd; }

.graph-dot:hover,
.graph-dot.match,
.graph-dot.selected {
  fill-opacity: 0.95;
  stroke: #ffffff;
  stroke-width: 2.5;
}

.graph-tooltip {
  position: absolute;
  z-index: 5;
  width: 210px;
  padding: 11px 12px;
  border: 1px solid rgba(124,111,205,0.45);
  border-radius: 8px;
  background: rgba(14, 16, 27, 0.96);
  box-shadow: 0 18px 48px rgba(0,0,0,0.36);
  pointer-events: none;
}

.graph-tooltip strong,
.graph-tooltip span {
  display: block;
}

.graph-tooltip strong {
  margin-bottom: 5px;
  color: #fff;
  font-size: 13px;
}

.graph-tooltip span {
  color: #aeb4ce;
  font-size: 11px;
  line-height: 1.45;
}

.graph-tooltip.hidden {
  display: none;
}

.graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 0 18px 18px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 650;
}

.graph-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legend-dot,
.legend-ring,
.legend-line {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8b5cf6;
}

.legend-ring {
  background: transparent;
  border: 2px solid #fff;
}

.legend-line {
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: rgba(124,111,205,0.6);
}

.graph-inspector {
  padding: 18px;
}

.graph-inspector-kicker {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.graph-inspector h2 {
  margin: 10px 0 8px;
  color: var(--text);
  font-size: 24px;
  line-height: 1.1;
}

.graph-inspector p {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.graph-inspector-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0;
}

.graph-inspector-metrics span {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.graph-inspector-metrics b {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 18px;
  text-transform: none;
}

.graph-bin-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.graph-bin-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  color: var(--text-muted);
  font-size: 12px;
}

.graph-bin-list a {
  min-width: 0;
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.graph-bin-list span {
  color: var(--accent);
  font-weight: 900;
}

@media (max-width: 980px) {
  .leaderboard-page {
    width: min(100% - 32px, 760px);
    padding-top: 34px;
  }
  .leaderboard-hero,
  .leaderboard-controls,
  .leaderboard-tools {
    align-items: stretch;
    flex-direction: column;
  }
  .leaderboard-summary { text-align: left; }
  .leaderboard-table-head { display: none; }
  .leaderboard-row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }
  .leaderboard-score {
    grid-column: 2;
    font-size: 28px;
  }
  .leaderboard-detail {
    grid-column: 1 / -1;
  }

  .graphs-page {
    width: min(100% - 32px, 760px);
    padding-top: 34px;
  }

  .graphs-hero,
  .graph-shell {
    grid-template-columns: 1fr;
  }

  .graphs-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .graphs-hero h1 {
    font-size: 40px;
  }

  .graph-stat-grid {
    min-width: 0;
  }

  .graph-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .graph-help {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .graph-inspector {
    order: 3;
  }
}

@media (max-width: 640px) {
  .graphs-page {
    width: min(100% - 28px, 760px);
    padding-top: 26px;
  }

  .graphs-hero h1 {
    font-size: 33px;
  }

  .graphs-hero p {
    font-size: 14px;
  }

  .graph-stat-grid,
  .graph-controls {
    grid-template-columns: 1fr;
  }

  .graph-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .graph-stat-grid span {
    padding: 11px 12px;
  }

  .graph-stat-grid strong {
    font-size: 18px;
  }

  .graph-stage {
    order: 1;
  }

  .graph-controls {
    order: 2;
  }

  .graph-inspector {
    order: 3;
  }

  .graph-toolbar,
  .graph-legend {
    align-items: flex-start;
    flex-direction: column;
  }

  .graph-canvas-wrap {
    min-height: 430px;
    padding: 8px 6px 0;
  }

  .graph-svg {
    min-height: 430px;
  }
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.section-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.section-note {
  font-size: 13px;
  color: var(--text-dim);
}

.fchip-row { display: flex; gap: 6px; }

.fchip {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 50px;
  padding: 5px 14px;
  cursor: pointer;
  transition: all 0.15s;
}

.fchip:hover { border-color: var(--accent); color: var(--text); }

.fchip.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(124,111,205,0.12);
}

/* ──────────────────────────────────────────
   HOME — SKELETON LOADING
   ────────────────────────────────────────── */

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

.skeleton-card {
  height: 210px;
  border-radius: var(--radius);
  background: linear-gradient(
    90deg,
    var(--surface) 25%,
    var(--surface-raised) 50%,
    var(--surface) 75%
  );
  background-size: 1200px 100%;
  animation: shimmer 1.5s infinite linear;
  border: 1px solid var(--border);
}

/* ──────────────────────────────────────────
   HOME — FEATURED GRID
   ────────────────────────────────────────── */

.featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* ──────────────────────────────────────────
   HOME — POLITICIAN CARDS
   ────────────────────────────────────────── */

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

.pol-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid transparent;
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
  animation: polCardIn 0.4s ease both;
  user-select: none;
  -webkit-user-select: none;
}

.pol-card:hover {
  transform: translateY(-4px);
  background: var(--surface-raised);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}

.pol-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.pol-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: white;
  flex-shrink: 0;
  background: linear-gradient(135deg, #3d4263, #252840);
  overflow: hidden;
}

.pol-avatar img,
.feed-avatar img,
.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.pol-avatar.rep { background: linear-gradient(135deg, #7c2121, #a82929); }
.pol-avatar.dem { background: linear-gradient(135deg, #1a3660, #1d4ed8); }
.pol-avatar.ind { background: linear-gradient(135deg, #4c1d95, #6d28d9); }

.pol-info { flex: 1; min-width: 0; }

.pol-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.pol-role {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pol-score-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 2px;
}

.pol-score {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
}

.score-change {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.chg-up   { color: var(--kept); }
.chg-down { color: var(--broken); }

.pol-snippet {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.snippet-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  font-style: italic;
}

.pol-footer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.mini-kept   { color: var(--kept);     font-weight: 600; }
.mini-broken { color: var(--broken);   font-weight: 600; }
.mini-prog   { color: var(--progress); font-weight: 600; }
.mini-sep    { color: var(--text-dim); }

/* ──────────────────────────────────────────
   HOME — PROMISE FEED
   ────────────────────────────────────────── */

.promise-feed-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

.home-left .promise-feed-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

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

.feed-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s;
  animation: feedIn 0.35s ease both;
  min-width: 0;
  overflow: hidden;
}

.feed-item:hover {
  background: var(--surface-raised);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

.feed-item.has-source:hover {
  border-color: var(--accent);
}

.feed-source {
  align-self: flex-start;
  color: var(--accent);
  border: 1px solid rgba(124, 111, 205, 0.35);
  background: rgba(124, 111, 205, 0.1);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
}

.feed-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.feed-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  background: linear-gradient(135deg, #3d4263, #252840);
  overflow: hidden;
}

.feed-avatar.rep { background: linear-gradient(135deg, #7c2121, #a82929); }
.feed-avatar.dem { background: linear-gradient(135deg, #1a3660, #1d4ed8); }
.feed-avatar.ind { background: linear-gradient(135deg, #4c1d95, #6d28d9); }

.feed-meta { flex: 1; min-width: 0; }

.feed-name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-cat {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

.feed-quote {
  font-size: 13px;
  color: var(--text);
  font-style: italic;
  font-weight: 500;
  line-height: 1.55;
}

.feed-analysis {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ──────────────────────────────────────────
   HOME — FOOTER
   ────────────────────────────────────────── */

.home-footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 48px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.home-footer p {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.7;
}

.footer-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s, background 0.2s;
}
.footer-link:hover {
  border-color: var(--accent);
  background: var(--surface-raised);
}

/* ── About / FAQ page ─────────────────────────── */
.about-shell {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px 80px;
}
.about-section {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-bottom: 18px;
}
.about-section h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
}
.about-section p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.about-section p:last-child { margin-bottom: 0; }
.about-section strong { color: var(--text); font-weight: 700; }
.faq-q {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin: 18px 0 6px;
}
.faq-q:first-child { margin-top: 0; }
.about-builder {
  background: linear-gradient(135deg, rgba(124,111,205,0.18), rgba(37,99,235,0.12));
  border: 1px solid var(--accent);
}
.about-builder h2 { color: var(--text); }

.footer-link-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.footer-link-row .footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(124,111,205,0.38);
  border-radius: 8px;
  background: rgba(124,111,205,0.11);
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.footer-link-row .footer-link:hover {
  border-color: var(--accent);
  background: rgba(124,111,205,0.19);
}

.methodology-highlight {
  background:
    linear-gradient(135deg, rgba(124,111,205,0.22), rgba(52,211,153,0.08)),
    var(--surface-raised);
}

.formula-card {
  margin: 16px 0;
  padding: 16px 18px;
  border: 1px solid rgba(124,111,205,0.42);
  border-radius: 8px;
  background: rgba(124,111,205,0.12);
}

.formula-card span {
  display: block;
  margin-bottom: 6px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.formula-card strong {
  display: block;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 19px;
}

/* ── Methodology: expandable full calc method ─── */
.method-details {
  margin-top: 18px;
}

.method-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 13px 18px;
  border: 1px solid rgba(124,111,205,0.42);
  border-radius: 8px;
  background: rgba(124,111,205,0.12);
  transition: border-color 0.2s, background 0.2s;
}
.method-toggle::-webkit-details-marker { display: none; }
.method-toggle:hover {
  border-color: var(--accent);
  background: rgba(124,111,205,0.19);
}
.method-toggle-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.method-toggle-icon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.method-toggle-icon::before,
.method-toggle-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  transition: opacity 0.2s, transform 0.2s;
}
.method-toggle-icon::before { width: 14px; height: 2px; }
.method-toggle-icon::after  { width: 2px; height: 14px; }
.method-details[open] .method-toggle {
  border-color: var(--accent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.method-details[open] .method-toggle-icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

.method-body {
  padding: 4px 18px 6px;
  border: 1px solid rgba(124,111,205,0.42);
  border-top: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background: rgba(124,111,205,0.04);
}

.method-subhead {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin: 24px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.method-tablehead {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 16px 0 8px;
}

.method-formula {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.method-formula code {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

.method-list {
  margin: 0 0 4px;
  padding-left: 20px;
}
.method-list li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.method-list li strong { color: var(--text); font-weight: 700; }
.method-list ul {
  margin: 6px 0 4px;
  padding-left: 18px;
}

.method-table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 6px;
}
.method-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.method-table-wide { margin: 8px 0 6px; }
.method-table caption {
  caption-side: top;
  text-align: left;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(124,111,205,0.14);
  border-bottom: 1px solid var(--border);
}
.method-table td {
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.method-table tr:last-child td { border-bottom: none; }
.method-table td:first-child { color: var(--text); }
.method-table td:last-child {
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 600;
  white-space: nowrap;
}

/* ──────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────── */

@media (max-width: 640px) {
  .brand h1 { font-size: 34px; }
  .brand .tagline { font-size: 15px; }

  .search-wrapper {
    border-radius: 14px;
    flex-direction: column;
    padding: 12px;
    gap: 10px;
  }

  .search-btn { border-radius: 10px; padding: 11px; }

  .nav-search { display: none; }
  .nav-app-link { margin-left: auto; }

  .container {
    width: min(100% - 32px, 1680px);
    padding-bottom: 56px;
  }

  .profile-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 22px;
  }

  .profile-avatar { width: 88px; height: 88px; font-size: 28px; }
  .profile-info h1 { font-size: 19px; }

  .score-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    padding: 28px 24px;
  }

  .score-breakdown { justify-content: center; }

  .ethics-score-card {
    flex-direction: column;
  }

  .ethics-grade-box {
    width: 100%;
    min-height: 132px;
  }

  .ethics-summary {
    padding: 24px;
    text-align: center;
  }

  .ethics-pledges {
    justify-content: center;
  }

  .ethics-snapshot,
  .ethics-detail-grid {
    grid-template-columns: 1fr;
  }

  .promises-grid { grid-template-columns: 1fr; }
  .promises-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 1180px) {
  .container {
    width: min(100% - 40px, 980px);
  }

  .results-workspace,
  .results-workspace:has(.ethics-column.hidden) {
    grid-template-columns: 1fr;
  }

  .record-column {
    order: 1;
  }

  .ethics-column {
    order: 2;
  }

  .ethics-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ethics-snapshot {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .container {
    width: min(100% - 32px, 1680px);
  }
}

@media (max-width: 1100px) {
  .featured-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-title { font-size: 50px; }
}

@media (max-width: 900px) {
  .promise-feed-grid { grid-template-columns: repeat(2, 1fr); }
  .ethics-snapshot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ethics-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-title { font-size: 40px; letter-spacing: -2px; }
  .hero-sub { font-size: 16px; }
  .ethics-snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .nav-leaderboards {
    display: none;
  }

  .nav-app-link {
    margin-left: auto;
  }
}

@media (max-width: 520px) {
  .nav {
    gap: 10px;
    padding: 10px 14px;
  }

  .nav-app-link {
    padding: 0 12px;
  }

  .featured-grid { grid-template-columns: 1fr; }
  .promise-feed-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 33px; letter-spacing: -1.4px; margin-bottom: 12px; }
  .hero-sub { margin-bottom: 26px; line-height: 1.55; }
  .home-hero { padding: 34px 20px 16px; }
  .hero-eyebrow { margin-bottom: 24px; }

  .hero-search-wrapper {
    border-radius: 14px;
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    gap: 10px;
  }

  .hero-search-icon { display: none; }
  .hero-search-btn { border-radius: 10px; padding: 12px; }
  .section-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px) {
  .compare-picker-grid,
  .reps-grid {
    grid-template-columns: 1fr;
  }

  .compare-person-card {
    padding: 16px 12px;
  }

  .compare-person-name {
    font-size: 18px;
  }

  .compare-row-values {
    gap: 10px;
  }

  .nav-link {
    display: none;
  }

  .nav-app-link {
    display: inline-flex;
  }
}

/* ──────────────────────────────────────────
   MOBILE APP SHELL
   ────────────────────────────────────────── */

.mobile-tabbar {
  display: none;
}

@media (max-width: 768px) {
  :root,
  :root[data-theme="light"] {
    --bg: #070913;
    --surface: rgba(255,255,255,0.075);
    --surface-raised: rgba(255,255,255,0.12);
    --border: rgba(255,255,255,0.14);
    --text: #f7f7fb;
    --text-muted: #a4aac2;
    --text-dim: #6f7894;
    --accent: #8b5cf6;
    --accent-hover: #c084fc;
    --kept: #34d399;
    --broken: #fb7185;
    --pending: #fbbf24;
    --radius: 20px;
    --radius-sm: 14px;
    --shadow-card: 0 18px 46px rgba(0,0,0,0.38);
  }

  html {
    background: #070913;
  }

  body {
    min-height: 100vh;
    padding-bottom: 112px;
    background:
      linear-gradient(180deg, rgba(139,92,246,0.2) 0%, rgba(7,9,19,0) 180px),
      linear-gradient(180deg, #070913 0%, #10131f 46%, #070913 100%);
    color: var(--text);
  }

  .nav {
    min-height: 74px;
    gap: 10px;
    padding: max(12px, env(safe-area-inset-top)) 18px 10px;
    background: rgba(7,9,19,0.78);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 12px 34px rgba(0,0,0,0.28);
  }

  .nav-brand {
    width: 136px;
    height: 44px;
    margin-left: -8px;
  }

  .nav-logo {
    width: 136px;
    max-height: 44px;
  }

  .nav-logo-light {
    display: none !important;
  }

  .nav-logo-dark {
    display: block !important;
  }

  .nav-leaderboards,
  .nav-link,
  .nav-search {
    display: none !important;
  }

  .nav-app-link {
    display: inline-flex !important;
    min-height: 42px;
    margin-left: auto;
    padding: 0 14px;
    border-radius: 15px;
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.18);
    color: var(--text);
    font-size: 13px;
    box-shadow: none;
  }

  .theme-toggle {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.14);
  }

  .mobile-tabbar {
    position: fixed;
    z-index: 200;
    left: 14px;
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    height: 72px;
    padding: 7px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 26px;
    background: rgba(17,20,32,0.82);
    box-shadow: 0 18px 48px rgba(0,0,0,0.42);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }

  .mobile-tab {
    min-width: 0;
    height: 58px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 20px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 800;
  }

  .mobile-tab span {
    height: 22px;
    font-size: 20px;
    line-height: 22px;
  }

  .mobile-tab small {
    max-width: 100%;
    overflow: hidden;
    font-size: 10.5px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-tab.active {
    background: rgba(139,92,246,0.28);
    color: var(--text);
  }

  .mobile-tab.active span {
    color: #c084fc;
  }

  .home-hero {
    max-width: none;
    margin: 16px 14px 20px;
    padding: 24px 18px 18px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 24px;
    background:
      linear-gradient(145deg, rgba(139,92,246,0.94), rgba(37,99,235,0.44)),
      #141827;
    box-shadow: var(--shadow-card);
    text-align: left;
  }

  .hero-eyebrow {
    margin-bottom: 18px;
    border-color: rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.8);
    letter-spacing: 0.08em;
  }

  .hero-title {
    margin-bottom: 12px;
    background: none;
    color: #fff;
    font-size: 38px;
    line-height: 1.04;
    letter-spacing: 0;
    -webkit-text-fill-color: #fff;
  }

  .hero-sub {
    max-width: 100%;
    margin: 0 0 20px;
    color: rgba(255,255,255,0.82);
    font-size: 15px;
    line-height: 1.55;
  }

  .hero-search-form {
    max-width: none;
    margin-bottom: 16px;
  }

  .hero-search-wrapper {
    align-items: stretch;
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(7,9,19,0.56);
    border-color: rgba(255,255,255,0.16);
    box-shadow: none;
  }

  .hero-search-icon {
    display: none;
  }

  .hero-search-input {
    min-height: 44px;
    padding: 0 4px;
    color: #fff;
  }

  .hero-search-input::placeholder {
    color: rgba(255,255,255,0.54);
  }

  .hero-search-btn {
    min-height: 44px;
    border-radius: 14px;
    background: #f7f7fb;
    color: #070913;
    font-weight: 850;
  }

  .hero-search-wrapper .ac-dropdown {
    position: static;
    flex: 0 0 auto;
    width: 100%;
    max-height: min(270px, 34vh);
    margin-top: 2px;
    border-radius: 16px;
    background: #12162a;
    border-color: rgba(255,255,255,0.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  }

  .hero-search-wrapper .ac-dropdown.ac-visible {
    display: block;
  }

  .hero-search-wrapper .ac-item {
    min-height: 58px;
    padding: 9px 10px;
  }

  .hero-search-wrapper .ac-avatar {
    width: 40px;
    height: 40px;
  }

  .hero-search-wrapper .ac-name {
    font-size: 15px;
    font-weight: 800;
  }

  .hero-search-wrapper .ac-meta {
    color: rgba(247,247,251,0.62);
    font-size: 12.5px;
  }

  body:has(#heroSearchInput:focus) .mobile-tabbar,
  body:has(.hero-search-wrapper .ac-dropdown.ac-visible) .mobile-tabbar {
    display: none;
  }

  .hero-chips {
    justify-content: flex-start;
    flex-wrap: nowrap;
    margin: 0 -2px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .hero-chips::-webkit-scrollbar {
    display: none;
  }

  .chip-label,
  .hero-chip {
    flex: 0 0 auto;
  }

  .hero-chip {
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.84);
  }

  .home-body,
  .home-section,
  .container,
  .leaderboard-page,
  body .graphs-page,
  .tool-hero,
  .tool-shell {
    width: auto;
    max-width: none;
    margin-left: 14px;
    margin-right: 14px;
    padding-left: 0;
    padding-right: 0;
  }

  .home-body {
    display: block;
    margin-bottom: 26px;
  }

  .home-section,
  .tool-shell {
    margin-bottom: 26px;
  }

  .featured-grid,
  .promise-feed-grid {
    grid-template-columns: 1fr;
  }

  .section-title,
  .tool-title,
  .leaderboard-hero h1,
  body .graphs-hero h1 {
    color: var(--text);
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: 0;
  }

  .section-header {
    align-items: flex-start;
  }

  .pol-card,
  .promise-card,
  .tool-card,
  .compare-picker,
  .reps-lookup,
  .reps-section,
  .score-section,
  .ethics-score-card,
  .promises-section,
  .profile-section,
  .leaderboard-table-shell,
  body .graph-controls,
  body .graph-stage,
  body .graph-inspector,
  body .graph-stat-grid span {
    border-radius: 20px;
    background: rgba(255,255,255,0.075);
    border-color: rgba(255,255,255,0.14);
    box-shadow: var(--shadow-card);
  }

  .profile-section {
    margin-top: 18px;
    padding: 18px;
    background:
      linear-gradient(145deg, rgba(139,92,246,0.42), rgba(96,165,250,0.16)),
      rgba(255,255,255,0.075);
  }

  .profile-avatar {
    width: 118px;
    height: 118px;
    border: 3px solid rgba(255,255,255,0.18);
    box-shadow: 0 16px 34px rgba(0,0,0,0.36);
    font-size: 34px;
  }

  .profile-info h1 {
    font-size: 28px;
    line-height: 1.08;
    letter-spacing: 0;
  }

  .ethics-preview {
    display: grid;
    gap: 8px;
    margin: 14px 0 16px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 18px;
    background: rgba(7,9,19,0.34);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    text-align: left;
    text-decoration: none;
    box-shadow: 0 14px 32px rgba(0,0,0,0.24);
  }

  .ethics-preview.hidden {
    display: none;
  }

  .ethics-preview-kicker {
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .ethics-preview-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .ethics-preview-main strong {
    color: var(--kept);
    font-size: 38px;
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: 0;
  }

  .ethics-preview-main span {
    min-width: 56px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
    text-align: center;
  }

  .ethics-preview small {
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.35;
  }

  .ethics-preview.ethics-grade-a .ethics-preview-main strong { color: #34d399; }
  .ethics-preview.ethics-grade-b .ethics-preview-main strong { color: #60a5fa; }
  .ethics-preview.ethics-grade-c .ethics-preview-main strong { color: #fbbf24; }
  .ethics-preview.ethics-grade-d .ethics-preview-main strong,
  .ethics-preview.ethics-grade-f .ethics-preview-main strong { color: #fb7185; }

  .ethics-preview.loading .ethics-preview-main strong {
    color: var(--text-muted);
  }

  .results-workspace,
  .results-workspace:has(.ethics-column.hidden) {
    gap: 16px;
  }

  .score-section,
  .ethics-score-card {
    align-items: stretch;
  }

  .leaderboard-page {
    padding-top: 20px;
    padding-bottom: 118px;
  }

  .leaderboard-hero,
  body .graphs-hero {
    display: block;
    margin-bottom: 18px;
  }

  .leaderboard-eyebrow {
    margin-bottom: 8px;
    color: #c084fc;
  }

  .leaderboard-hero p,
  body .graphs-hero p,
  .tool-subtitle {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.55;
  }

  .leaderboard-summary {
    margin-top: 14px;
    min-width: 0;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(139,92,246,0.18);
    text-align: left;
  }

  .leaderboard-controls {
    display: block;
    margin-bottom: 14px;
  }

  .leaderboard-tabs,
  body .graph-presets {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .leaderboard-tabs::-webkit-scrollbar,
  body .graph-presets::-webkit-scrollbar {
    display: none;
  }

  .leaderboard-tab,
  body .graph-preset {
    flex: 0 0 auto;
    min-height: 44px;
    border-radius: 16px;
    background: rgba(255,255,255,0.075);
  }

  .leaderboard-tools {
    width: 100%;
    min-width: 0;
    margin-top: 10px;
  }

  .leaderboard-search,
  .leaderboard-filter {
    min-height: 44px;
    border-radius: 15px;
    background: rgba(255,255,255,0.075);
  }

  .leaderboard-table-shell {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .leaderboard-table-head {
    display: none;
  }

  .leaderboard-row {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) auto;
    min-height: 78px;
    gap: 10px;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    background: rgba(255,255,255,0.075);
    box-shadow: 0 12px 32px rgba(0,0,0,0.28);
  }

  .leaderboard-rank {
    font-size: 14px;
  }

  .leaderboard-avatar {
    width: 44px;
    height: 44px;
  }

  .leaderboard-person {
    gap: 10px;
  }

  .leaderboard-person strong {
    font-size: 15px;
  }

  .leaderboard-person small {
    font-size: 12px;
  }

  .leaderboard-score {
    font-size: 26px;
    line-height: 1;
    text-align: right;
  }

  .leaderboard-detail {
    display: none;
  }

  body .graphs-page {
    padding-top: 20px;
    padding-bottom: 118px;
  }

  body .graph-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    min-width: 0;
  }

  body .graph-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body .graph-stage {
    order: 1;
    overflow: hidden;
  }

  body .graph-controls {
    order: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  body .graph-inspector {
    order: 3;
  }

  body .graph-canvas-wrap {
    min-height: 440px;
  }

  body .graph-plot,
  body .graph-svg {
    height: 440px;
  }

  .tool-hero {
    margin-top: 20px;
    margin-bottom: 18px;
  }

  .tool-card,
  .compare-picker,
  .reps-lookup,
  .reps-section {
    box-shadow: var(--shadow-card);
  }

  .compare-head,
  .compare-row-values {
    grid-template-columns: 1fr 1fr;
  }

  .compare-person-card {
    padding: 16px 10px;
  }

  .compare-avatar {
    width: 68px;
    height: 68px;
  }

  .reps-grid,
  .compare-picker-grid {
    gap: 14px;
  }
}

@media (max-width: 420px) {
  .nav-app-link {
    display: none !important;
  }

  .mobile-tab small {
    font-size: 9.5px;
  }

  .hero-title {
    font-size: 34px;
  }

  .leaderboard-tools {
    display: grid;
    grid-template-columns: 1fr;
  }
}