:root, [data-theme="light"] {
  --bg: #f8f9fa;
  --surface: #ffffff;
  --border: #e2e5e9;
  --text: #1a1d27;
  --muted: #6b7280;
  --accent: #4f46e5;
  --green: #16a34a;
  --red: #dc2626;
  --yellow: #ca8a04;
  --blue: #2563eb;
  --chart-text: #4b5563;
  --chart-border: rgba(0,0,0,0.08);
}
[data-theme="dark"] {
  --bg: #0f1117;
  --surface: #1a1d27;
  --border: #2a2d3a;
  --text: #e4e4e7;
  --muted: #8b8d97;
  --accent: #6366f1;
  --green: #22c55e;
  --red: #ef4444;
  --yellow: #eab308;
  --blue: #3b82f6;
  --chart-text: #a1a1aa;
  --chart-border: rgba(255,255,255,0.06);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background:var(--bg); color:var(--text); line-height:1.5; }
.topbar { position:sticky; top:0; z-index:100; background:var(--surface); border-bottom:1px solid var(--border); padding:10px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.topbar-logo { font-size:1.05rem; font-weight:700; color:var(--text); text-decoration:none; }
.topbar-logo span { color:var(--accent); }
.topbar-nav { display:flex; gap:20px; flex-wrap:wrap; }
.topbar-nav a { font-size:.88rem; color:var(--muted); text-decoration:none; transition:color .15s; }
.topbar-nav a:hover { color:var(--accent); }
.topbar-nav a.active { color:var(--accent); font-weight:500; }
.topbar-actions { display:flex; gap:6px; align-items:center; }
@media (max-width:768px) {
  .topbar { padding:8px 12px; gap:8px; flex-wrap:wrap; }
  .topbar-nav { gap:14px; order:3; flex-basis:100%; justify-content:center; }
  .topbar-nav a { font-size:.82rem; }
  .topbar .auth-btn { padding:5px 10px; font-size:.78rem; }
  .topbar .theme-toggle { padding:4px 8px; font-size:0.78rem; }
}
.container { max-width:1200px; margin:0 auto; padding:20px; }
header { padding:18px 0 16px; border-bottom:1px solid var(--border); margin-bottom:24px; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; }
header > div:first-child { flex:1; min-width:200px; }
header > .header-actions { flex:0 0 auto; margin-left:auto; }
header h1 { font-size:2rem; font-weight:700; cursor:pointer; }
header h1 span { color:var(--accent); }
header p { color:var(--muted); margin-top:4px; }
/* Kadencja bar — wyraźnie inny visual od tab-bar żeby się nie zlewały.
 * Pill-style z subtle background, mniejszy padding, group dotted by tło. */
.kadencja-bar { display:inline-flex; gap:2px; background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:3px; }
.kadencja-btn { padding:5px 12px; border-radius:999px; border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:0.78rem; font-weight:500; white-space:nowrap; transition:background 0.15s, color 0.15s; }
.kadencja-btn:hover { color:var(--text); }
.kadencja-btn.active { background:var(--surface); color:var(--accent); box-shadow:0 1px 3px rgba(0,0,0,0.08); }
[data-theme="dark"] .kadencja-btn.active { box-shadow:0 1px 3px rgba(0,0,0,0.4); }

.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:28px; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px; display:flex; flex-direction:column; gap:2px; }
.stat-card .label { font-size:0.78rem; color:var(--muted); font-weight:500; letter-spacing:0; text-transform:none; }
.stat-card .value { font-size:1.75rem; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; }
.section { margin-bottom:40px; }
.section h2 { font-size:1.3rem; font-weight:600; margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid var(--border); }
table { width:100%; border-collapse:collapse; font-size:0.9rem; }
th { text-align:left; padding:10px 12px; background:var(--surface); color:var(--muted); font-weight:500; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; position:sticky; top:0; cursor:pointer; user-select:none; }
th:hover { color:var(--accent); }
th .sort-arrow { display:inline-block; margin-left:4px; font-size:0.7rem; opacity:0.4; }
th.sorted .sort-arrow { opacity:1; color:var(--accent); }
th.sorted { color:var(--text); }
td { padding:10px 12px; border-bottom:1px solid var(--border); }
tr:hover td { background:rgba(99,102,241,0.05); }
.club { display:inline-block; padding:2px 8px; border-radius:4px; font-size:0.75rem; font-weight:600; }
.club-unknown { background:rgba(139,141,151,0.15); color:var(--muted); }
.bar { height:6px; border-radius:3px; background:var(--border); position:relative; min-width:60px; }
.bar-fill { height:100%; border-radius:3px; position:absolute; left:0; top:0; }
.pill { display:inline-block; padding:1px 6px; border-radius:3px; font-size:0.75rem; margin:1px; }
.pill-za { background:rgba(34,197,94,0.15); color:var(--green); }
.pill-przeciw { background:rgba(239,68,68,0.15); color:var(--red); }
.pill-wstrzymal { background:rgba(234,179,8,0.15); color:var(--yellow); }
/* Tab bar: dwa tiery hierarchiczne.
 *   Primary (4): Ranking, Sesje, Głosowania, Komisje — mocniejsze visualy,
 *     border, pełny padding, font 0.85rem.
 *   Secondary (4): Profile, Interpelacje, Budżet, Aktualności — subtle,
 *     bez ramki, mniejszy padding, muted color, hover background.
 * Razem 2 wiersze (primary nad secondary), na desktop oba inline. */
.tab-bar { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.tab-tier { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.tab-tier--secondary { gap: 4px; }
.tab { padding:8px 16px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font-size:0.85rem; font-family:inherit; }
.tab.active { background:var(--accent); color:white; border-color:var(--accent); }
.tab.tab-secondary {
  padding: 5px 11px;
  border: none;
  font-size: 0.78rem;
  color: var(--muted);
  background: transparent;
  border-radius: 6px;
  opacity: 0.85;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.tab.tab-secondary:hover { background: rgba(99,102,241,0.08); color: var(--text); opacity: 1; }
.tab.tab-secondary.active {
  background: var(--accent);
  color: white;
  opacity: 1;
}
.chart-wrap { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; }
canvas { max-height:760px; }
.komisje-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.komisja-card { display:block; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px; text-decoration:none; color:var(--text); transition:border-color 0.15s, transform 0.15s; cursor:pointer; }
.komisja-card:hover { border-color:var(--accent); transform:translateY(-1px); }
.komisja-card-title { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:0.95rem; font-weight:600; margin-bottom:14px; flex-wrap:wrap; }
.komisja-card-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:12px; }
.komisja-card-stats > div { display:flex; flex-direction:column; }
.komisja-stat-value { font-size:1.1rem; font-weight:700; color:var(--text); }
.komisja-stat-label { font-size:0.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; margin-top:2px; }
.komisja-card-last { font-size:0.75rem; color:var(--muted); padding-top:8px; border-top:1px solid var(--border); }
.filter-bar { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.filter-btn { padding:4px 12px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font-size:0.8rem; }
.filter-btn.active { background:var(--accent); color:white; border-color:var(--accent); }
footer { text-align:center; padding:40px 0; color:var(--muted); font-size:0.8rem; border-top:1px solid var(--border); margin-top:40px; }
footer a { color:var(--accent); text-decoration:none; }
#loading { text-align:center; padding:100px; color:var(--muted); }
.name-link { color:var(--text); text-decoration:none; cursor:pointer; font-weight:600; }
.name-link:hover { color:var(--accent); text-decoration:underline; }

/* Profile page */
.profile-back { display:inline-flex; align-items:center; gap:6px; color:var(--accent); cursor:pointer; font-size:0.9rem; margin-bottom:20px; background:none; border:none; font-family:inherit; }
.profile-back:hover { text-decoration:underline; }
/* Desktop: float-right sidebar w block container. Content (avatar, kadencja,
   tab bar, metric row) flowuje obok. .section z clear:right startuje poniżej
   sidebar'a żeby nie nachodzić na cards (comparison, news, aktywność). */
.profile-header { display:block; margin-bottom:24px; }
.profile-header::after { content:""; display:block; clear:both; }
.profile-actions { float:right; width:320px; margin:0 0 16px 24px; }
.profile-header .section { clear:right; }

/* Mobile: float off, cards full width na swojej pozycji w DOM (między
   avatar+info a kadencja toggle). Bez orderowania bo DOM już ułożony
   dobrze. */
@media (max-width: 720px) {
  .profile-actions { float:none; width:100%; margin:0 0 16px 0; }
  .profile-header .section { clear:none; }
}
.profile-avatar { width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:700; color:white; flex-shrink:0; }
.profile-info h2 { font-size:1.6rem; font-weight:700; border:none; padding:0; margin:0; }
.profile-info .subtitle { color:var(--muted); font-size:0.9rem; margin-top:2px; }
.profile-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-bottom:30px; }
.profile-meta-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; }
.profile-meta-card h3 { font-size:0.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px; }
.profile-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:30px; }
.metric-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center; }
.metric-card .metric-value { font-size:1.8rem; font-weight:700; }
.metric-card .metric-label { font-size:0.75rem; color:var(--muted); text-transform:uppercase; margin-top:2px; }
.profile-kadencja-toggle { display:flex; gap:4px; margin-bottom:12px; }
.profile-tab-bar { display:flex; gap:4px; margin-bottom:20px; border-bottom:1px solid var(--border); padding-bottom:0; }
.profile-tab { padding:7px 16px; font-size:0.88rem; font-family:inherit; background:none; border:none; border-bottom:2px solid transparent; color:var(--muted); cursor:pointer; margin-bottom:-1px; transition:color 0.15s, border-color 0.15s; }
.profile-tab.active { color:var(--text); border-bottom-color:var(--accent); font-weight:500; }
.rebellion-item { padding:8px 12px; border-bottom:1px solid var(--border); font-size:0.85rem; }
.rebellion-item .reb-date { color:var(--muted); font-size:0.8rem; }
.tag { display:inline-block; padding:2px 8px; border-radius:4px; font-size:0.8rem; margin:2px; background:var(--surface); border:1px solid var(--border); }

/* Vote detail */
.vote-result-bar { display:flex; height:28px; border-radius:6px; overflow:hidden; margin:12px 0; }
.vote-result-bar div { display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:600; color:white; min-width:30px; }
.vote-names-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; margin-top:8px; }
.vote-name-item { padding:6px 10px; border-radius:6px; font-size:0.85rem; display:flex; align-items:center; gap:6px; }
.vote-name-item .club { flex-shrink:0; }
.vote-cat-header { font-size:0.9rem; font-weight:600; margin:16px 0 8px; padding:6px 0; border-bottom:1px solid var(--border); }
/* ── Głosowanie według frakcji (regiony bez głosowań imiennych) ───────── */
.faction-notice { display:flex; gap:10px; align-items:flex-start; margin:12px 0 20px; padding:12px 14px; background:rgba(99,102,241,0.06); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:8px; font-size:0.88rem; line-height:1.55; color:var(--text); }
.faction-notice svg { flex-shrink:0; width:18px; height:18px; margin-top:1px; color:var(--accent); }
.faction-rows { display:grid; gap:10px; margin-top:8px; }
.faction-row { padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); }
.faction-row-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.faction-row-name { font-weight:600; font-size:0.95rem; display:flex; align-items:center; gap:8px; }
.faction-row-swatch { width:12px; height:12px; border-radius:3px; flex-shrink:0; }
.faction-stance { font-size:0.78rem; font-weight:700; padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:0.02em; }
.faction-stance.stance-za { background:rgba(34,197,94,0.16); color:var(--green); }
.faction-stance.stance-przeciw { background:rgba(239,68,68,0.16); color:var(--red); }
.faction-stance.stance-wstrzymal { background:rgba(234,179,8,0.18); color:var(--yellow); }
.faction-stance.stance-mixed { background:rgba(139,141,151,0.18); color:var(--muted); }
.faction-stance.stance-none { background:rgba(139,141,151,0.12); color:var(--muted); }
.faction-row-meta { margin-left:auto; font-size:0.8rem; color:var(--muted); }
.faction-bar { display:flex; height:20px; border-radius:5px; overflow:hidden; }
.faction-bar div { display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:600; color:white; min-width:0; }
.faction-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; font-size:0.8rem; color:var(--muted); }
.faction-legend span { display:inline-flex; align-items:center; gap:5px; }
.faction-legend i { width:10px; height:10px; border-radius:2px; display:inline-block; }
.druk-tresc { line-height:1.7; font-size:0.95rem; padding:16px 0; white-space:pre-wrap; }
.druk-paywall { margin-top:12px; padding:16px; background:rgba(99,102,241,0.06); border:1px solid var(--border); border-radius:8px; text-align:center; }
.session-pill { padding:4px 10px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font-size:0.8rem; white-space:nowrap; }
.session-pill.active { background:var(--accent); color:white; border-color:var(--accent); }
.session-pill.cat-pill { font-size:0.75rem; padding:3px 10px; }
.session-pill .pill-count { font-size:0.7rem; opacity:0.7; margin-left:2px; }
.vote-row { cursor:pointer; }
.vote-row:hover td { background:rgba(99,102,241,0.1); }
.votes-sess-group { margin-bottom:20px; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.votes-sess-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:var(--surface); cursor:pointer; user-select:none; gap:12px; }
.votes-sess-header:hover { background:rgba(99,102,241,0.06); }
.votes-sess-title { font-weight:600; font-size:0.9rem; }
.votes-sess-title a { color:var(--text); text-decoration:none; }
.votes-sess-stats { display:flex; gap:10px; align-items:center; font-size:0.8rem; color:var(--muted); flex-shrink:0; }
.votes-sess-body { border-top:1px solid var(--border); }
.votes-sess-body table { margin:0; }
.votes-sess-toggle { font-size:0.7rem; color:var(--muted); transition:transform 0.2s; }
.votes-sess-group.collapsed .votes-sess-body { display:none; }
.votes-sess-group.collapsed .votes-sess-toggle { transform:rotate(-90deg); }

/* Session detail */
.session-attendees { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:6px; margin-top:8px; }
.session-attendee { padding:5px 10px; border-radius:6px; font-size:0.85rem; display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border); }
.session-absent { opacity:0.5; }
.speakers-grid { /* single column flow */ }
.speaker-bar {
  display: grid;
  grid-template-columns: minmax(0, 220px) 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
  font-size: 0.8rem;
  line-height: 1.3;
}
.speaker-bar.hidden { display: none; }
.show-more-speakers {
  margin-top: 10px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8rem;
  font-family: inherit;
  border-radius: 6px;
  width: 100%;
  transition: background 0.15s ease, color 0.15s ease;
}
.show-more-speakers:hover { background: rgba(99,102,241,0.06); color: var(--accent); border-color: var(--accent); }

/* === Mobile UI optimizations === */
/* Połowa userów na Androidzie (typowo 360-414px viewport). Default desktop
 * layout zostaje, mobile dostaje compact wersję. Tab-bar horizontal scroll,
 * grid layouts schodzą do 1-2 columns, padding zmniejszony, fonty ~80%. */
@media (max-width: 480px) {
  .container { padding: 12px; }

  /* Header: kompaktowy, h1 mniejszy. Kadencja-bar inline pill style.
   * Auth + theme buttons są przeniesione do topbara, więc header w mobile
   * to tylko tytuł + subtitle (jeden div, full width). */
  header { padding: 12px 0 8px; margin-bottom: 14px; gap: 6px; }
  header h1 { font-size: 1.35rem; line-height: 1.2; }
  header p { font-size: 0.78rem; line-height: 1.35; }
  .kadencja-bar { padding: 2px; }
  .kadencja-btn { padding: 5px 10px; font-size: 0.75rem; }

  /* Stats grid: 2 columns × 2 wiersze, kompaktowe */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 18px; }
  .stat-card { padding: 12px 13px; }
  .stat-card .value { font-size: 1.5rem; }
  .stat-card .label { font-size: 0.72rem; }

  /* Section spacing */
  .section { margin-bottom: 22px; }
  .section h2 { font-size: 1.05rem; margin-bottom: 12px; }

  /* Tab bar: dwa tiery wizualnie wyraźnie odróżnione.
   * Primary tier: 4 tabs w jednym wierszu (grid 4-col), kompaktowe.
   * Tekst może się zawijać na 2 linie ("Ranking radnych" = 2 wiersze).
   * Secondary tier: flex-wrap z mniejszymi pill buttonami.
   * Subtle border separator między tierami. */
  .tab-bar { gap: 10px; margin-bottom: 14px; }
  .tab-tier--primary {
    display: flex;
    gap: 5px;
  }
  .tab-tier--primary .tab {
    flex: 1;
    white-space: normal;
    padding: 8px 4px;
    font-size: 0.75rem;
    line-height: 1.15;
    min-height: 42px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tab-tier--secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    padding-top: 6px;
    border-top: 1px solid var(--border);
  }
  .tab-tier--secondary .tab { padding: 6px 10px; font-size: 0.75rem; }

  /* Parent row z kadencja-bar — na mobile pod tab-barem, align right.
   * Belka separatora (border-bottom) zachowana, ale nieco mniej padding. */
  .tab-row { flex-direction: column; align-items: stretch; gap: 10px; padding-bottom: 10px; margin-bottom: 16px; }
  .tab-row .kadencja-bar { align-self: flex-end; }

  /* Filter bar: też scrollable horizontal */
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-btn { white-space: nowrap; flex-shrink: 0; }

  /* Tabele: mniejszy font, mniejszy padding, scroll horizontal w wrapperze */
  table { font-size: 0.8rem; }
  th, td { padding: 7px 8px; }
  th { font-size: 0.7rem; letter-spacing: 0.03em; }

  /* Profile page */
  .profile-back { padding: 6px 0; min-height: 36px; }
  .profile-header { gap: 12px; margin-bottom: 18px; }
  .profile-avatar { width: 56px; height: 56px; font-size: 1.4rem; }
  .profile-info h2 { font-size: 1.2rem; }
  .profile-info .subtitle { font-size: 0.82rem; }
  .profile-meta { grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }
  .profile-meta-card { padding: 12px; }
  .profile-metrics { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 18px; }
  .metric-card { padding: 10px; }
  .metric-card .metric-value { font-size: 1.3rem; }
  .metric-card .metric-label { font-size: 0.65rem; }

  /* Komisje: jedna kolumna (300px minmax > 320px content) */
  .komisje-grid { grid-template-columns: 1fr; gap: 10px; }
  .komisja-card { padding: 14px; }
  .komisja-card-title { font-size: 0.9rem; margin-bottom: 10px; }
  .komisja-stat-value { font-size: 1rem; }

  /* Vote detail: imienne głosowania 2 col zamiast 1, mniejszy padding */
  .vote-names-grid { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .vote-name-item { font-size: 0.75rem; padding: 4px 6px; gap: 4px; }
  .vote-result-bar { height: 24px; }

  /* Session detail: attendees 2 col, speaker bar węższy */
  .session-attendees { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .session-attendee { font-size: 0.78rem; padding: 4px 7px; }
  .speaker-bar { grid-template-columns: minmax(0, 120px) 1fr auto; font-size: 0.72rem; gap: 6px; }

  /* Profile cards grid: 1 col */

  /* Chart wrap padding mniejszy */
  .chart-wrap { padding: 12px; }
  canvas { max-height: 480px !important; }

  /* Theme toggle: ikona only na mobile, ukryj label "Ciemny/Jasny" */
  .theme-toggle { padding: 5px 8px; font-size: 0.78rem; }
  .theme-toggle #theme-label { display: none; }

  /* Auth button kompaktowy na mobile */
  .auth-btn { padding: 5px 10px; font-size: 0.78rem; }

  /* User chip kompaktowy na mobile: imię się skraca */
  .user-chip { font-size: 0.78rem; padding: 3px 8px 3px 3px; gap: 6px; }
  .user-chip .user-avatar { width: 22px; height: 22px; font-size: 0.7rem; }
  .user-chip #user-name { max-width: 100px; }
}

/* Tablet (481-768px): 2-3 column grids zamiast 1 */
@media (min-width: 481px) and (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-metrics { grid-template-columns: repeat(3, 1fr); }
  .komisje-grid { grid-template-columns: 1fr; }
  /* Primary tier: 4 buttony w jednym wierszu, każdy flex 1/4 width */
  .tab-tier--primary { gap: 6px; }
  .tab-tier--primary .tab { flex: 1; min-width: 110px; padding: 9px 12px; text-align: center; }
  /* Secondary tier: mniejsze, w drugim wierszu pod primary, subtle border */
  .tab-tier--secondary { padding-top: 8px; border-top: 1px solid var(--border); gap: 4px; }
}
.speaker-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.speaker-name .club {
  font-size: 0.65rem;
  padding: 1px 5px;
  flex-shrink: 0;
}
.speaker-name .name-link {
  overflow: hidden;
  text-overflow: ellipsis;
}
.speaker-bar-track {
  position: relative;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.speaker-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  min-width: 2px;
}
.speaker-meta {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: right;
  min-width: 130px;
}
.speaker-meta strong { color: var(--text); font-weight: 500; }

/* Profile grid for listing all councilors */

/* Vote categories */
.cat-pill { display:inline-block; padding:2px 8px; border-radius:4px; font-size:0.7rem; font-weight:500; white-space:nowrap; letter-spacing:0.02em; }
.cat-budzet { background:rgba(37,99,235,0.12); color:#2563eb; }
.cat-inwestycje { background:rgba(22,163,74,0.12); color:#16a34a; }
.cat-planowanie { background:rgba(124,58,237,0.12); color:#7c3aed; }
.cat-nieruchomosci { background:rgba(180,83,9,0.12); color:#b45309; }
.cat-transport { background:rgba(234,88,12,0.12); color:#ea580c; }
.cat-oswiata { background:rgba(202,138,4,0.12); color:#ca8a04; }
.cat-zdrowie { background:rgba(219,39,119,0.12); color:#db2777; }
.cat-srodowisko { background:rgba(5,150,105,0.12); color:#059669; }
.cat-kultura { background:rgba(6,182,212,0.12); color:#0891b2; }
.cat-skarga { background:rgba(107,114,128,0.15); color:#6b7280; }
.cat-nazwy { background:rgba(156,163,175,0.12); color:#9ca3af; }
.cat-procedura { background:rgba(156,163,175,0.1); color:#9ca3af; }
.cat-inne { background:rgba(107,114,128,0.08); color:#9ca3af; }
.cat-group { margin-bottom:20px; }
.cat-group-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; padding:8px 0; border-bottom:1px solid var(--border); }
.cat-group-header .cat-pill { font-size:0.8rem; padding:3px 10px; }
.cat-group-count { color:var(--muted); font-size:0.8rem; }
.cat-summary { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:12px; }

/* Theme toggle */
.theme-toggle { background:none; border:1px solid var(--border); border-radius:8px; padding:6px 10px; cursor:pointer; color:var(--muted); font-size:0.85rem; font-family:inherit; display:inline-flex; align-items:center; gap:4px; transition:border-color 0.2s, color 0.2s; }
.theme-toggle:hover { border-color:var(--accent); color:var(--accent); }

/* Auth UI: button + user chip + modal */
.header-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.auth-btn { background:var(--accent); color:#fff; border:none; border-radius:8px; padding:6px 14px; cursor:pointer; font-size:0.85rem; font-family:inherit; font-weight:500; transition:opacity 0.2s; }
.auth-btn:hover { opacity:0.9; }
.user-chip { display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:4px 10px 4px 4px; font-size:0.85rem; color:var(--text); }
.user-chip .user-avatar { width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:600; }
.user-chip .user-logout { background:none; border:none; color:var(--muted); cursor:pointer; padding:0 2px; font-size:1rem; line-height:1; font-family:inherit; }
.user-chip .user-logout:hover { color:var(--accent); }

.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px; }
.auth-modal { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:28px; width:100%; max-width:380px; position:relative; box-shadow:0 10px 40px rgba(0,0,0,0.2); }
.modal-close { position:absolute; top:12px; right:12px; background:none; border:none; font-size:1.5rem; line-height:1; color:var(--muted); cursor:pointer; padding:4px 8px; }
.modal-close:hover { color:var(--accent); }
.auth-tabs { display:flex; gap:0; margin-bottom:20px; border-bottom:1px solid var(--border); }
.auth-tab { background:none; border:none; padding:10px 16px; cursor:pointer; color:var(--muted); font-size:0.95rem; font-family:inherit; font-weight:500; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color 0.2s, border-color 0.2s; }
.auth-tab.active { color:var(--text); border-bottom-color:var(--accent); }
.auth-tab:hover:not(.active) { color:var(--text); }
.google-btn { width:100%; background:#fff; color:#1f1f1f; border:1px solid #dadce0; border-radius:8px; padding:10px 16px; cursor:pointer; font-size:0.95rem; font-family:inherit; font-weight:500; display:flex; align-items:center; justify-content:center; gap:10px; transition:box-shadow 0.2s; }
.google-btn:hover { box-shadow:0 1px 3px rgba(60,64,67,0.15); }
.auth-sep { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:0.8rem; margin:16px 0; }
.auth-sep::before, .auth-sep::after { content:""; flex:1; height:1px; background:var(--border); }
.auth-form { display:flex; flex-direction:column; gap:10px; }
.auth-form input { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-size:0.95rem; color:var(--text); font-family:inherit; }
.auth-form input:focus { outline:none; border-color:var(--accent); }
.auth-form button[type="submit"] { background:var(--accent); color:#fff; border:none; border-radius:8px; padding:11px 16px; cursor:pointer; font-size:0.95rem; font-family:inherit; font-weight:500; margin-top:4px; transition:opacity 0.2s; }
.auth-form button[type="submit"]:hover { opacity:0.9; }
.auth-form button[type="submit"]:disabled { opacity:0.5; cursor:wait; }
.auth-error { background:rgba(220,38,38,0.1); color:#dc2626; border:1px solid rgba(220,38,38,0.3); border-radius:6px; padding:8px 12px; font-size:0.85rem; }
.auth-success { background:rgba(34,197,94,0.1); color:#16a34a; border:1px solid rgba(34,197,94,0.3); border-radius:6px; padding:8px 12px; font-size:0.85rem; }
.auth-footer { margin-top:14px; text-align:center; font-size:0.85rem; }
.auth-footer a { color:var(--muted); text-decoration:none; }
.auth-footer a:hover { color:var(--accent); text-decoration:underline; }
.auth-banner { position:fixed; top:16px; left:50%; transform:translateX(-50%); background:#16a34a; color:#fff; padding:10px 20px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.2); z-index:1100; font-size:0.9rem; }

/* Compare */
.compare-bar { position:fixed; bottom:0; left:0; right:0; background:var(--surface); border-top:2px solid var(--accent); padding:12px 20px; display:flex; align-items:center; justify-content:center; gap:16px; z-index:100; font-size:0.9rem; }
.compare-bar button { padding:8px 20px; border-radius:8px; border:none; cursor:pointer; font-size:0.85rem; font-weight:600; font-family:inherit; }
.compare-bar .compare-go { background:var(--accent); color:white; }
.compare-bar .compare-clear { background:transparent; color:var(--muted); border:1px solid var(--border); }
.compare-check { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
.compare-grid { display:grid; gap:20px; margin-bottom:30px; }
.compare-col { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; }
.compare-col h3 { font-size:1.1rem; font-weight:700; margin-bottom:4px; }
.diff-row { display:flex; gap:12px; padding:8px 0; border-bottom:1px solid var(--border); font-size:0.85rem; align-items:flex-start; }
.diff-topic { flex:1; min-width:0; }

/* City comparison (capability based) */
.cc-module { margin-bottom:18px; }
.cc-metric { padding:10px 0; border-bottom:1px solid var(--border); }
.cc-metric:last-child { border-bottom:none; }
.cc-metric-label { font-size:0.8rem; color:var(--muted); margin-bottom:6px; }
.cc-metric-vals { display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center; gap:12px; }
.cc-val { font-size:0.95rem; font-weight:500; }
.cc-val:first-child { text-align:right; }
.cc-val:last-child { text-align:left; }
.cc-val.cc-big { font-weight:700; color:var(--accent); }
.cc-val-multi { font-size:0.82rem; line-height:1.5; color:var(--text); }
.cc-bar { display:flex; height:8px; border-radius:4px; overflow:hidden; background:var(--border); }
.cc-bar-a { background:var(--accent); }
.cc-bar-b { background:#94a3b8; }
.cc-note { font-size:0.82rem; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px 12px; line-height:1.5; }
/* City comparison search (skaluje się do setek miast) */
.cc-search input { width:100%; box-sizing:border-box; padding:11px 14px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); font-size:0.95rem; font-family:inherit; }
.cc-search input:focus { outline:none; border-color:var(--accent); }
.cc-search-results { margin-top:8px; max-height:300px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.cc-search-item { display:flex; align-items:baseline; justify-content:space-between; gap:12px; width:100%; text-align:left; padding:10px 12px; border:none; border-radius:8px; background:transparent; color:var(--text); font-size:0.92rem; font-family:inherit; cursor:pointer; }
.cc-search-item:hover { background:var(--surface); }
.cc-search-name { font-weight:500; }
.cc-search-meta { color:var(--muted); font-size:0.8rem; white-space:nowrap; }
.cc-search-empty { color:var(--muted); font-size:0.88rem; padding:10px 12px; }
.cc-paywall-teaser { color:var(--muted); font-size:0.9rem; margin:10px 0 16px; }
.cc-paywall { margin-top:8px; padding:20px; background:rgba(99,102,241,0.06); border:1px solid var(--border); border-radius:10px; text-align:center; }
.cc-paywall p { margin:0 0 12px; color:var(--text); }
@media (max-width:560px){ .cc-metric-vals { grid-template-columns:1fr 1.2fr 1fr; gap:6px; } .cc-val { font-size:0.85rem; } }

/* Share buttons */
.share-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.share-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font-size:0.85rem; font-family:inherit; transition:border-color 0.2s, color 0.2s; }
.share-btn:hover { border-color:var(--accent); color:var(--accent); }
.share-btn svg { width:16px; height:16px; flex-shrink:0; }
.share-btn.share-native { background:var(--accent); color:white; border-color:var(--accent); }
.share-btn.share-native:hover { opacity:0.9; color:white; }
.share-copied { color:var(--green) !important; border-color:var(--green) !important; }



  #landing-view .lp-hero { padding:48px 0 36px; border-bottom:1px solid var(--border); }
  #landing-view .lp-eyebrow { font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
  #landing-view .lp-h1 { font-size:2.6rem; font-weight:800; line-height:1.1; letter-spacing:-.02em; }
  #landing-view .lp-h1 .hl { color:var(--accent); }
  #landing-view .lp-insight { margin-top:18px; font-size:1.25rem; line-height:1.4; font-weight:500; max-width:62ch; }
  #landing-view .lp-insight strong { color:var(--accent); font-weight:700; }
  #landing-view .lp-cta { margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
  #landing-view .lp-btn { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:10px; font-size:.92rem; font-weight:600; text-decoration:none; border:1px solid transparent; cursor:pointer; }
  #landing-view .lp-btn-p { background:var(--accent); color:#fff; }
  #landing-view .lp-btn-g { background:transparent; color:var(--text); border-color:var(--border); }
  #landing-view .lp-sec { margin:40px 0; }
  #landing-view .lp-sec h2 { font-size:1.3rem; font-weight:700; margin-bottom:6px; }
  #landing-view .lp-sub { color:var(--muted); font-size:.95rem; margin-bottom:18px; }
  #landing-view .lp-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
  #landing-view .lp-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 18px; }
  #landing-view .lp-stat .v { font-size:2rem; font-weight:800; line-height:1.05; font-variant-numeric:tabular-nums; }
  #landing-view .lp-stat .l { font-size:.82rem; color:var(--muted); margin-top:4px; }
  #landing-view .lp-hl { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
  #landing-view .lp-hcard { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px 20px; display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
  #landing-view .lp-tag { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
  #landing-view .lp-name { font-size:1.1rem; font-weight:700; margin-top:6px; }
  #landing-view .lp-name a { color:inherit; text-decoration:none; }
  #landing-view .lp-hsub { font-size:.85rem; color:var(--muted); margin-top:3px; }
  #landing-view .lp-num { font-size:1.7rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
  #landing-view .lp-num small { font-size:.66rem; font-weight:600; color:var(--muted); display:block; margin-top:5px; }
  #landing-view .lp-badge { display:inline-block; font-size:.7rem; font-weight:600; padding:2px 7px; border-radius:4px; margin-top:8px; }
  #landing-view .lp-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  #landing-view .lp-navcard { display:block; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px 20px; text-decoration:none; cursor:pointer; }
  #landing-view .lp-navcard:hover { border-color:var(--accent); }
  #landing-view .lp-navcard .nk { font-size:1.05rem; font-weight:700; color:var(--text); }
  #landing-view .lp-navcard .nk .ar { color:var(--accent); }
  #landing-view .lp-navcard .nd { font-size:.85rem; color:var(--muted); margin-top:5px; }
  #landing-view .lp-navlabel { font-size:.72rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin:22px 0 10px; }
  #landing-view .lp-spark { display:flex; align-items:flex-end; gap:3px; height:64px; }
  #landing-view .lp-axis { display:flex; justify-content:space-between; font-size:.72rem; color:var(--muted); margin:5px 0 10px; }
  #landing-view .lp-band { background:var(--surface); border:1px solid var(--border); border-top:4px solid var(--accent); border-radius:12px; padding:24px; text-align:center; }
  #landing-view .lp-band h3 { font-size:1.4rem; font-weight:800; }
  #landing-view .lp-band p { color:var(--muted); margin:8px auto 0; max-width:60ch; }
  #landing-view .mu { color:var(--muted); }
  #landing-view .lp-card table { width:100%; border-collapse:collapse; font-size:.9rem; }
  #landing-view .lp-card th { text-align:left; padding:0 8px 9px 0; color:var(--muted); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border); white-space:nowrap; }
  #landing-view .lp-card td { padding:10px 8px 10px 0; border-bottom:1px solid var(--border); }
  #landing-view .lp-card a.name-link { color:inherit; text-decoration:none; }
  #landing-view .lp-card a.name-link:hover { color:var(--accent); }
  @media (max-width:760px){ #landing-view .lp-h1{font-size:1.9rem;} #landing-view .lp-nav,#landing-view .lp-hl{grid-template-columns:1fr;} }