:root { --bg: #0f172a; --surface: #1e293b; --surface-2: #273449; --text: #f1f5f9; --muted: #94a3b8; --accent: #38bdf8; --accent-hover: #0ea5e9; --yea: #14b8a6; --yea-hover: #0f9488; --nay: #ec4899; --nay-hover: #db2777; --abstain: #a78bfa; --abstain-hover: #8b5cf6; --correct: #14b8a6; --wrong: #ec4899; --dem: #3b82f6; --gop: #ef4444; --ind: #22c55e; --radius: 12px; }
* { box-sizing: border-box; }
html, body { margin: 0px; padding: 0px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; line-height: 1.5; }
.site-header { position: relative; text-align: center; padding: 2rem 1rem 1rem; }
.header-action-btn { position: absolute; top: 1rem; right: 1rem; border: 1px solid rgba(148, 163, 184, 0.6); background: rgba(15, 23, 42, 0.5); color: var(--text); font-weight: 700; letter-spacing: 0.05em; padding: 0.45rem 0.8rem; border-radius: 8px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.header-action-btn:hover { border-color: rgba(148, 163, 184, 0.9); background: rgba(30, 41, 59, 0.8); }
.site-header.officials-header-only-action { min-height: 64px; padding: 0.75rem 1rem; }
.site-header.officials-header-only-action h1, .site-header.officials-header-only-action .tagline, .site-header.officials-header-only-action .header-status-row { display: none; }
.header-status-row { margin-top: 0.7rem; display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.site-seal { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block; margin: 0px; border: 2px solid rgba(148, 163, 184, 0.45); background: rgb(226, 232, 240); }
.site-header h1 { margin: 0px; font-size: 2rem; letter-spacing: -0.02em; }
.tagline { color: var(--muted); margin: 0.4rem 0px 0px; }
.congress-status { margin: 0px; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 500; }
.congress-status-dual { flex-direction: column; gap: 0.35rem; }
.chamber-status { display: flex; align-items: center; gap: 0.5rem; }
.status-light { width: 0.6rem; height: 0.6rem; border-radius: 50%; display: inline-block; animation: 2s ease 0s infinite normal none running pulse; }
.status-light.in-session { background: rgb(34, 197, 94); box-shadow: rgba(34, 197, 94, 0.6) 0px 0px 8px; }
.status-light.out-of-session { background: rgb(239, 68, 68); box-shadow: rgba(239, 68, 68, 0.6) 0px 0px 8px; }
@keyframes pulse { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.status-text { color: var(--muted); }
.container { flex: 1 1 0%; width: 100%; max-width: 720px; margin: 0px auto; padding: 1rem; }
.launcher-wrap { min-height: 45vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; }
.launcher-widget { width: min(560px, 100%); display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1rem; border-radius: 14px; border: 2px solid rgba(148, 163, 184, 0.45); background: linear-gradient(160deg, rgb(24, 37, 56) 0%, rgb(30, 41, 59) 100%); color: var(--text); cursor: pointer; text-align: left; box-shadow: rgba(2, 8, 23, 0.45) 0px 12px 30px; transition: transform 0.12s, box-shadow 0.2s, border-color 0.2s; }
.launcher-widget:hover { transform: translateY(-2px); border-color: rgba(148, 163, 184, 0.75); box-shadow: rgba(2, 8, 23, 0.55) 0px 16px 36px; }
.launcher-seal-wrap { width: 84px; height: 84px; border-radius: 50%; background: rgb(226, 232, 240); border: 2px solid rgba(148, 163, 184, 0.6); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
.launcher-seal { width: 100%; height: 100%; object-fit: cover; }
.launcher-text { display: flex; flex-direction: column; gap: 0.2rem; }
.launcher-title { margin: 0px 0px 0.1rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; }
.widget-results-alert { display: inline-flex; width: 1.1rem; height: 1.1rem; border-radius: 999px; align-items: center; justify-content: center; background: rgb(220, 38, 38); color: rgb(255, 255, 255); font-size: 0.76rem; font-weight: 900; line-height: 1; margin-left: 0.35rem; vertical-align: text-top; box-shadow: rgba(220, 38, 38, 0.55) 0px 0px 8px; }
.launcher-line { margin: 0px; display: flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; color: var(--muted); }
.launcher-widget-simple { align-items: center; }
.dev-next-day-btn { margin-top: 0.25rem; background: rgba(99, 102, 241, 0.9); color: white; }
.dev-next-day-btn:hover { background: rgba(79, 70, 229, 0.95); }
.card { background: var(--surface); padding: 1.75rem; border-radius: var(--radius); box-shadow: rgba(0, 0, 0, 0.25) 0px 10px 30px; position: relative; margin-bottom: 3.5rem; }
.hidden { display: none !important; }
.profile-top { display: flex; align-items: flex-start; gap: 0.9rem; }
.profile-copy { min-width: 0px; }
.profile-photo, .reveal-photo { width: 86px; height: 86px; border-radius: 14px; object-fit: cover; border: 2px solid rgba(148, 163, 184, 0.45); box-shadow: rgba(2, 8, 23, 0.28) 0px 6px 14px; margin-bottom: 0px; background: rgb(226, 232, 240); flex-shrink: 0; }
.profile-name { margin: 0px; font-size: 1.6rem; letter-spacing: -0.01em; }
.profile-role { margin: 0.15rem 0px 0.75rem; color: var(--muted); font-size: 0.95rem; }
.bio { font-size: 1.05rem; margin-top: 0.25rem; }
.bio a { color: #7ab8f5; }
.views { margin: 0.75rem 0px 0px; padding-left: 1.25rem; color: var(--muted); }
.views li { margin-bottom: 0.3rem; }
.divider { border-width: 1px medium medium; border-style: solid none none; border-color: rgba(255, 255, 255, 0.08) currentcolor currentcolor; border-image: initial; margin: 1.5rem 0px; }
.bill-progress { color: var(--muted); font-size: 0.9rem; margin-bottom: 0.5rem; }
.bill-label { margin: 0px 0px 0.25rem; color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.bill-title { font-size: 1.2rem; font-weight: 600; background: var(--surface-2); padding: 1rem 1rem 0.75rem; border-radius: 8px 8px 0px 0px; margin: 0px; }
.bill-description { background: var(--surface-2); padding: 0px 1rem 1rem; margin: 0px 0px 1rem; border-radius: 0px 0px 8px 8px; color: var(--muted); font-size: 0.95rem; }
.prompt { margin: 0px 0px 0.75rem; color: var(--muted); }
.vote-buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.btn { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0.7rem 1.4rem; font-size: 1rem; font-weight: 600; border-radius: 8px; cursor: pointer; transition: background 0.15s, transform 0.05s; color: rgb(11, 18, 32); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); margin-top: 1rem; }
.btn-primary:hover { background: var(--accent-hover); }
.return-menu-btn { position: absolute; left: 50%; bottom: -2.4rem; transform: translateX(-50%); width: fit-content; margin: 0px; padding: 0.45rem 0.9rem; font-size: 0.86rem; font-weight: 600; background: rgba(15, 23, 42, 0.45); color: var(--text); border: 1px solid rgba(148, 163, 184, 0.55); }
.return-menu-btn:hover { background: rgba(30, 41, 59, 0.9); }
.return-menu-btn:active { transform: translate(-50%, 1px); }
.btn-yea { background: var(--yea); color: white; flex: 1 1 0%; }
.btn-yea:hover { background: var(--yea-hover); }
.btn-nay { background: var(--nay); color: white; flex: 1 1 0%; }
.btn-nay:hover { background: var(--nay-hover); }
.btn-abstain { background: var(--abstain); color: white; flex: 1 1 0%; }
.btn-abstain:hover { background: var(--abstain-hover); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn.selected { box-shadow: rgba(56, 189, 248, 0.5) 0px 0px 0px 3px; transform: scale(1.02); }
.divider { border-width: 1px medium medium; border-style: solid none none; border-color: rgba(148, 163, 184, 0.2) currentcolor currentcolor; border-image: initial; margin: 1.5rem 0px; }
.feedback { margin: 1rem 0px 0px; font-weight: 600; min-height: 1.5em; }
.feedback.correct { color: var(--correct); }
.feedback.wrong { color: var(--wrong); }
.btn.selected { outline: rgb(255, 255, 255) solid 3px; outline-offset: 2px; }
.reveal { background: var(--surface-2); padding: 1rem 1.25rem; border-radius: 8px; margin: 1rem 0px 1.25rem; display: flex; align-items: center; gap: 0.95rem; }
.reveal-photo { width: 78px; height: 78px; margin-bottom: 0px; }
.reveal-copy { min-width: 0px; }
.reveal-name { margin: 0px; font-size: 1.5rem; }
.reveal-role { margin: 0.25rem 0px 0px; color: var(--muted); }
.score-summary { font-size: 1.1rem; margin: 0px 0px 1rem; }
.results-list { list-style: none; padding: 0px; margin: 0.5rem 0px 1rem; }
.results-list li { background: var(--surface-2); padding: 1rem 1.1rem; border-radius: 8px; margin-bottom: 0.75rem; border-left: 6px solid var(--muted); }
.results-list li.correct { border-left-color: var(--correct); background: rgba(20, 184, 166, 0.12); }
.results-list li.wrong { border-left-color: var(--wrong); background: rgba(236, 72, 153, 0.12); }
.bill-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.6rem; }
.results-list .bill-name { font-weight: 600; font-size: 1rem; flex: 1 1 0%; }
.results-bill-description { margin: 0px 0px 0.65rem; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.pass-badge { flex-shrink: 0; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.2rem 0.55rem; border-radius: 999px; }
.pass-badge.passed { background: rgba(20, 184, 166, 0.2); color: rgb(94, 234, 212); border: 1px solid rgba(20, 184, 166, 0.5); }
.pass-badge.failed { background: rgba(236, 72, 153, 0.2); color: rgb(249, 168, 212); border: 1px solid rgba(236, 72, 153, 0.5); }
.vote-comparison { display: grid; grid-template-columns: minmax(0px, 1fr) auto minmax(0px, 1fr); align-items: end; gap: 0.9rem; margin: 0.5rem 0px 0.75rem; }
.vote-pill-wrap { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0px; }
.vote-pill-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.vote-pill { display: inline-block; padding: 0.4rem 0.75rem; border-radius: 8px; font-weight: 700; color: white; text-align: center; }
.vote-pill.vote-yea { background: rgb(53, 124, 116); }
.vote-pill.vote-nay { background: rgb(153, 77, 113); }
.vote-pill.vote-abstain { background: rgb(112, 96, 152); }
.match-icon { flex-shrink: 0; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 900; font-size: 1.1rem; align-self: center; margin-bottom: 0px; }
.match-icon.match { background: var(--correct); color: white; }
.match-icon.mismatch { background: var(--wrong); color: white; }
.absence-note { margin: 0px 0px 0.5rem; color: var(--muted); font-size: 0.85rem; font-style: italic; }
.breakdown-heading { margin: 0.6rem 0px 0.4rem; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.instructions-demo { margin: 1rem 0px 1.15rem; padding: 0.85rem; border-radius: 10px; border: 1px solid rgba(148, 163, 184, 0.28); background: rgba(15, 23, 42, 0.35); overflow: hidden; }
.instructions-demo-header { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: 0.55rem; }
.instructions-demo-phone { border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.32); background: rgba(15, 23, 42, 0.72); padding: 0.45rem; }
.instructions-demo-viewport { position: relative; height: 170px; border-radius: 9px; overflow: hidden; background: linear-gradient(180deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%); transform-origin: 50% 74%; animation: 4.6s ease-in-out infinite demoZoom; }
.instructions-demo-scene { padding: 0.6rem; display: flex; flex-direction: column; gap: 0.7rem; animation: 4.6s ease-in-out infinite demoSceneScroll; }
.demo-profile-row, .demo-bill-row { border: 1px solid rgba(148, 163, 184, 0.3); border-radius: 9px; background: rgba(30, 41, 59, 0.72); }
.demo-profile-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem; }
.demo-profile-photo { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(150deg, rgb(148, 163, 184) 0%, rgb(100, 116, 139) 100%); flex-shrink: 0; }
.demo-profile-copy { min-width: 0px; }
.demo-line { margin: 0px; font-size: 0.68rem; color: var(--muted); line-height: 1.28; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-line-strong { color: var(--text); font-weight: 700; font-size: 0.76rem; }
.demo-bill-row { padding: 0.55rem; min-height: 150px; }
.demo-step-chip { display: inline-block; margin: 0px 0px 0.45rem; padding: 0.12rem 0.45rem; border-radius: 999px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(148, 163, 184, 0.24); color: var(--muted); }
.demo-answer-grid { margin-top: 0.6rem; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 0.35rem; }
.demo-answer { text-align: center; border-radius: 8px; padding: 0.38rem 0.2rem; font-size: 0.64rem; font-weight: 700; color: white; border: 1px solid transparent; }
.demo-answer.yea { background: rgb(53, 124, 116); border-color: rgba(110, 231, 183, 0.45); }
.demo-answer.nay { background: rgb(153, 77, 113); }
.demo-answer.abstain { background: rgb(112, 96, 152); }
.demo-answer.nay { animation: 4.6s ease-in-out infinite demoAnswerClick; }
.demo-cursor { position: absolute; width: 12px; height: 16px; background: rgb(248, 250, 252); clip-path: polygon(0% 0%, 0% 100%, 40% 70%, 64% 98%, 78% 92%, 56% 63%, 100% 63%); filter: drop-shadow(0px 2px 3px rgba(2, 6, 23, 0.75)); left: 34%; top: 26%; transform-origin: 30% 25%; animation: 4.6s ease-in-out infinite demoCursorPath; }
.demo-cursor-ring { position: absolute; width: 16px; height: 16px; border-radius: 999px; border: 2px solid rgba(125, 211, 252, 0.9); left: calc(34% - 8px); top: calc(26% - 8px); opacity: 0; animation: 4.6s ease-in-out infinite demoCursorTap; }

@keyframes demoSceneScroll {
  0%, 22% { transform: translateY(0px); }
  46%, 68% { transform: translateY(-52px); }
  100% { transform: translateY(-52px); }
}

@keyframes demoZoom {
  0%, 45% { transform: scale(1); }
  70%, 100% { transform: scale(1.12); }
}

@keyframes demoCursorPath {
  0%, 20% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(6px, 44px) scale(1); }
  72%, 100% { transform: translate(34px, 74px) scale(0.97); }
}

@keyframes demoCursorTap {
  0%, 20%, 68% { opacity: 0; transform: translate(0px, 0px) scale(0.5); }
  50% { opacity: 0; transform: translate(6px, 44px) scale(0.5); }
  72% { opacity: 0; transform: translate(34px, 74px) scale(0.5); }
  74% { opacity: 0.95; transform: translate(34px, 74px) scale(1); }
  84%, 100% { opacity: 0; transform: translate(34px, 74px) scale(2.2); }
}

@keyframes demoAnswerClick {
  0%, 68%, 100% { box-shadow: none; filter: brightness(1); transform: scale(1); }
  74% { box-shadow: rgba(255, 255, 255, 0.72) 0px 0px 0px 2px; filter: brightness(1.18); transform: scale(1.02); }
  82% { box-shadow: rgba(255, 255, 255, 0.46) 0px 0px 0px 4px; filter: brightness(1.1); transform: scale(1.01); }
}

.reflection-row { margin-top: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
.reflection-question { margin: 0px; font-size: 1rem; color: var(--text); font-weight: 700; text-align: center; }
.reflection-buttons { display: flex; gap: 0.45rem; }
.reflection-buttons .btn { margin-top: 0px; padding: 0.5rem 0.95rem; min-width: 4.5rem; font-size: 0.95rem; font-weight: 700; background: rgb(75, 85, 99); color: rgb(229, 231, 235); flex: 0 0 auto; }
.reflection-buttons .btn:hover { background: rgb(107, 114, 128); }
.reflection-buttons .btn.selected { box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 0px 2px; outline: none; background: rgb(255, 255, 255) !important; color: rgb(17, 24, 39) !important; }
.review-results-btn, #reviewResultsBackBtn { margin-top: 1rem; }
.results-crowd-insights { margin: 1.2rem 0px 1.35rem; padding: 1rem; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 10px; background: rgba(15, 23, 42, 0.35); }
.results-crowd-insights h3 { margin: 0.15rem 0px 0.65rem; font-size: 0.95rem; letter-spacing: 0.03em; text-transform: uppercase; color: rgb(167, 243, 208); }
.results-crowd-insights h3 + .bill-accuracy-list { margin-bottom: 1rem; }
.bill-accuracy-list { display: flex; flex-direction: column; gap: 0.45rem; }
.bill-accuracy-row { display: grid; grid-template-columns: minmax(0px, 1.8fr) minmax(140px, 3fr) auto; gap: 0.55rem; align-items: center; }
.bill-accuracy-label { min-width: 0px; font-size: 0.85rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bill-accuracy-label.correct { color: rgb(110, 231, 183); }
.bill-accuracy-label.wrong { color: rgb(252, 165, 165); }
.bill-accuracy-label.pending { color: var(--muted); }
.bill-accuracy-label.no-guess { color: var(--text); }
.bill-accuracy-track { position: relative; height: 0.7rem; border-radius: 999px; background: rgba(148, 163, 184, 0.25); overflow: hidden; }
.bill-accuracy-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgb(45, 212, 191) 0%, rgb(20, 184, 166) 100%); }
.bill-accuracy-pct { font-size: 0.78rem; color: var(--muted); font-weight: 700; min-width: 2.6rem; text-align: right; }
.score-distribution-wrap { margin-top: 0.45rem; display: grid; grid-template-columns: 2.2rem minmax(0px, 1fr); gap: 0.35rem; align-items: end; }
.score-distribution-axis { height: 148px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: 0.35rem 0px 0.15rem; border-bottom: 1px solid rgba(148, 163, 184, 0.35); }
.score-axis-tick { font-size: 0.62rem; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
.score-distribution-chart { padding: 0.5rem 0.25rem 0px; border-bottom: 1px solid rgba(148, 163, 184, 0.35); display: grid; grid-template-columns: repeat(6, minmax(0px, 1fr)); gap: 0.4rem; align-items: end; }
.score-bin { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 0px; }
.score-bin-count { font-size: 0.65rem; color: var(--muted); line-height: 1; }
.score-bin-plot { width: 100%; height: 124px; display: flex; align-items: flex-end; justify-content: center; }
.score-bin-bar { width: 100%; max-width: 30px; height: 0%; border-radius: 4px 4px 0px 0px; background: rgb(52, 211, 153); }
.score-bin.user .score-bin-bar { background: rgb(251, 146, 60); box-shadow: inset rgba(255, 255, 255, 0.55) 0px 0px 0px 2px; }
.score-bin.user .score-bin-count { color: rgb(254, 215, 170); font-weight: 700; }
.score-bin.unavailable .score-bin-bar { background: rgba(148, 163, 184, 0.35); }
.score-bin.unavailable .score-bin-count,
.score-bin.unavailable .score-bin-label { color: rgba(148, 163, 184, 0.8); }
.score-bin-label { font-size: 0.72rem; color: var(--muted); }
.score-distribution-meta { margin: 0.6rem 0px 0px; font-size: 0.78rem; color: var(--muted); }
.party-breakdown { display: flex; flex-direction: column; gap: 0.5rem; }
.composition-bar-wrap { display: grid; grid-template-columns: 2.5rem 1fr 2.5rem; align-items: center; gap: 0.6rem; }
.composition-bar-label { font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; text-align: right; }
.composition-bar-total { font-size: 0.8rem; color: var(--muted); text-align: left; }
.party-bar { display: flex; width: 100%; height: 1.4rem; background: rgba(255, 255, 255, 0.06); border-radius: 4px; overflow: hidden; }
.party-bar-empty { width: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; color: var(--muted); font-style: italic; }
.party-seg { display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; color: white; min-width: 0px; overflow: hidden; white-space: nowrap; }
.party-seg.seg-dem { background: var(--dem); }
.party-seg.seg-gop { background: var(--gop); }
.party-seg.seg-ind { background: var(--ind); }
.party-numbers { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; margin-top: 0.35rem; }
.party-number-row { display: grid; grid-template-columns: 7rem 1fr; gap: 0.6rem; align-items: baseline; }
.party-number-row .party-label { font-weight: 600; }
.party-number-row .party-label.dem { color: var(--dem); }
.party-number-row .party-label.gop { color: var(--gop); }
.party-number-row .party-label.ind { color: var(--ind); }
.party-number-row .party-counts { color: var(--muted); }
.congress-status-section { text-align: center; margin-top: 1.5rem; }
.thank-you-message { font-size: 1.05rem; color: var(--muted); margin: 1rem 0px 1.5rem; line-height: 1.6; }
.thank-you-content { min-height: 80px; }
.thank-you-content h2 { margin-top: 0px; }
.results-alert-icon { display: inline-flex; width: 1.15rem; height: 1.15rem; border-radius: 999px; align-items: center; justify-content: center; background: rgb(220, 38, 38); color: rgb(255, 255, 255); font-size: 0.8rem; font-weight: 800; margin-right: 0.45rem; vertical-align: middle; }
.thank-you-buttons { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.thank-you-buttons .btn { margin-top: 0px; }
#todayPredictionSummary { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid rgba(148, 163, 184, 0.25); }
#todayPredictionScore { margin-top: 0.85rem; font-size: 1rem; }
#todayPoliticianVoteSummary { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid rgba(148, 163, 184, 0.25); }
.stats-screen { position: relative; padding-top: 1.15rem; }
.stats-daily-cta { margin-top: 0.15rem; }
.stats-daily-cta .btn { margin-top: 0px; }
.stats-daily-distribution { margin: 0.2rem 0px 0px; }
.stats-row { margin-top: 1.1rem; display: flex; align-items: center; gap: 0.85rem; }
.stats-icon-circle { width: 42px; height: 42px; border-radius: 999px; border: 2px solid rgba(148, 163, 184, 0.65); display: grid; place-items: center; color: var(--text); font-weight: 700; flex-shrink: 0; }
#statsAverageScoreBadge {
  font-size: 0.9rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  --avg-score-hue: 60;
  border-color: hsl(var(--avg-score-hue) 72% 48%);
  background: hsl(var(--avg-score-hue) 70% 30% / 0.55);
  color: hsl(var(--avg-score-hue) 90% 93%);
}
#statsDayStreakBadge {
  font-size: 0.86rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  border-color: rgba(250, 204, 21, 0.9);
  color: rgb(254, 243, 199);
  background: rgba(250, 204, 21, 0.16);
  --streak-glow-spread: 6px;
  --streak-glow-alpha: 0.35;
  --streak-pulse-scale: 1.18;
  animation: 1.9s ease-in-out infinite streakGlowPulse;
}

@keyframes streakGlowPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(250, 204, 21, calc(var(--streak-glow-alpha) * 0.35));
  }
  50% {
    box-shadow: 0 0 0 var(--streak-glow-spread) rgba(250, 204, 21, var(--streak-glow-alpha));
  }
}
.stats-copy { min-width: 0px; }
.stats-title { margin: 0px; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.1rem; }
.stats-subtitle { margin: 0.25rem 0px 0px; color: var(--muted); }
.stats-chart-wrap { margin-top: 0.9rem; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 10px; padding: 0.45rem 0.45rem 0.85rem; position: relative; background: rgba(15, 23, 42, 0.35); }
.stats-chart { width: 100%; height: 150px; display: block; }
.stats-curve { fill: none; stroke: rgb(165, 180, 252); stroke-width: 2; }
.stats-you-line { stroke: rgb(244, 63, 94); stroke-width: 1.5; }
.stats-you-label { position: absolute; right: 24%; top: 0.35rem; color: rgb(253, 164, 175); font-size: 0.82rem; font-weight: 700; }
.stats-divider { margin: 1.1rem 0px 0.95rem; border-top: 1px solid rgba(148, 163, 184, 0.25); }
.stats-badges { margin-top: 0.3rem; }
.badge-item { margin-top: 0.7rem; display: flex; align-items: center; gap: 0.75rem; }
.badge-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid rgb(234, 179, 8);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 248, 196, 0.95) 0%, rgba(255, 248, 196, 0) 36%),
    radial-gradient(circle at 72% 78%, rgba(120, 80, 8, 0.35) 0%, rgba(120, 80, 8, 0) 52%),
    linear-gradient(145deg, rgb(255, 240, 164) 0%, rgb(245, 188, 47) 34%, rgb(193, 129, 18) 68%, rgb(255, 221, 120) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 227, 0.9),
    inset 0 -2px 4px rgba(120, 80, 8, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.25);
}
.badge-icon::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  border: 1px solid rgba(255, 241, 181, 0.45);
  pointer-events: none;
}
.badge-icon-image {
  width: 80%;
  height: 80%;
  object-fit: contain;
  opacity: 1;
  filter:
    grayscale(1)
    sepia(1)
    saturate(2.8)
    brightness(0.92)
    contrast(1.28)
    drop-shadow(-1px -1px 0 rgba(255, 248, 208, 0.78))
    drop-shadow(1.1px 1.1px 0 rgba(90, 58, 5, 0.72));
  mix-blend-mode: overlay;
  transform: translateY(0.4px);
}
.badge-copy { margin: 0px; color: var(--muted); }
.officials-screen { padding-top: 1.25rem; }
.officials-head h2 { margin: 0px; }
.officials-address-row { margin-top: 0.35rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.officials-address { margin: 0px; color: var(--muted); font-size: 0.92rem; }
.officials-update-btn { margin-top: 0px; padding: 0.4rem 0.7rem; font-size: 0.85rem; background: rgba(15, 23, 42, 0.45); color: var(--text); border: 1px solid rgba(148, 163, 184, 0.55); }
.officials-update-btn:hover { background: rgba(30, 41, 59, 0.9); }
.officials-tabs { margin-top: 1rem; display: inline-flex; border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 10px; overflow: hidden; }
.officials-tab { border: 0px; background: rgba(15, 23, 42, 0.35); color: var(--text); padding: 0.55rem 1rem; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; }
.officials-tab + .officials-tab { border-left: 1px solid rgba(148, 163, 184, 0.35); }
.officials-tab.active { background: var(--accent); color: rgb(11, 18, 32); }
.officials-panel { margin-top: 1rem; display: grid; gap: 0.8rem; }
.official-card { --election-box-shift: 14px; background: var(--surface-2); border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 10px; padding: 0.95rem 1rem; display: grid; grid-template-columns: minmax(0px, 1fr) 240px; gap: 0.75rem 0.65rem; align-items: flex-start; }
.official-main { grid-column: 1; min-width: 0px; }
.official-head { display: flex; align-items: flex-start; gap: 0.75rem; }
.official-copy { min-width: 0px; }
.official-photo { width: 62px; height: 62px; border-radius: 12px; object-fit: cover; border: 2px solid rgba(148, 163, 184, 0.45); box-shadow: rgba(2, 8, 23, 0.22) 0px 4px 12px; background: rgb(226, 232, 240); flex-shrink: 0; }
.official-overall-row { grid-column: 1 / -1; min-width: 0px; padding-right: var(--election-box-shift); }
.official-issues-row { grid-column: 1 / -1; min-width: 0px; padding-right: var(--election-box-shift); }
.official-name { margin: 0px; font-size: 1.05rem; }
.official-role, .official-party, .official-meta { margin: 0.3rem 0px 0px; }
.official-party, .official-meta { color: var(--muted); }
.official-performance { margin: 0.35rem 0px 0px; color: var(--text); }
.issues-toggle-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0px; background: transparent; padding: 0px; margin: 0px 0px 0.55rem; cursor: pointer; }
.official-issues-header { margin: 0px; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.issues-toggle-arrow { font-size: 0.92rem; color: var(--muted); line-height: 1; }
.issues-content.hidden { display: none; }
.official-performance-value { font-weight: 700; }
.official-spectrum { margin-top: 0.95rem; }
.official-spectrum-bar { position: relative; height: 6px; border-radius: 999px; background: linear-gradient(90deg, rgb(59, 130, 246) 0%, rgb(203, 213, 225) 50%, rgb(239, 68, 68) 100%); }
.official-spectrum-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; pointer-events: none; }
.official-spectrum-dot { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: rgb(17, 24, 39); border: 2px solid rgb(255, 255, 255); box-shadow: rgba(15, 23, 42, 0.35) 0px 0px 0px 1px; }
.official-spectrum-marker.user .official-spectrum-dot { background: rgb(16, 185, 129); }
.official-spectrum-marker-label { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-size: 0.68rem; line-height: 1; color: var(--muted); font-weight: 700; white-space: nowrap; }
.official-spectrum-scale { margin-top: 0.35rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: var(--muted); }
.official-spectrum-lean { color: var(--text); font-weight: 700; }
.official-issues { margin-top: 0.85rem; border-top: 1px solid rgba(148, 163, 184, 0.24); padding-top: 0.7rem; }
.official-issues-header { margin: 0px; font-size: 0.82rem; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.issue-block { margin-top: 0.65rem; padding-top: 0.55rem; border-top: 1px dashed rgba(148, 163, 184, 0.2); }
.issue-title { margin: 0px; font-size: 0.95rem; }
.issue-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.7rem; }
.issue-alignment-rate { margin: 0px; font-size: 0.76rem; color: var(--muted); white-space: nowrap; }
.issue-alignment-rate-label { font-weight: 700; }
.issue-alignment-rate-value { font-weight: 800; color: var(--text); }
.issue-top-row { margin-top: 0.85rem; display: flex; align-items: flex-start; gap: 0.6rem; }
.issue-spectrum { flex: 1 1 0%; min-width: 0px; }
.issue-spectrum-bar { position: relative; height: 6px; border-radius: 999px; background: linear-gradient(90deg, rgb(59, 130, 246) 0%, rgb(203, 213, 225) 50%, rgb(239, 68, 68) 100%); }
.issue-spectrum-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; }
.issue-spectrum-dot { width: 0.56rem; height: 0.56rem; border-radius: 50%; background: rgb(17, 24, 39); border: 2px solid rgb(255, 255, 255); }
.issue-spectrum-marker.user .issue-spectrum-dot { background: rgb(16, 185, 129); }
.issue-spectrum-marker-label { position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); font-size: 0.68rem; color: var(--muted); font-weight: 700; line-height: 1; white-space: nowrap; }
.official-spectrum-marker-label.crowded.official-label, .issue-spectrum-marker-label.crowded.official-label { transform: translateX(calc(-50% - 38px)); }
.official-spectrum-marker-label.crowded.user-label, .issue-spectrum-marker-label.crowded.user-label { transform: translateX(calc(-50% + 38px)); }
.issue-spectrum-scale { margin-top: 0.32rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; color: var(--muted); }
.issue-spectrum-lean { color: var(--text); font-weight: 700; }
.issue-p-btn { min-width: 6.6rem; height: 1.9rem; padding: 0px 0.6rem; border-radius: 8px; border: 1px solid rgb(245, 158, 11); background: rgb(255, 237, 213); color: rgb(249, 115, 22); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; line-height: 1; cursor: pointer; flex-shrink: 0; }
.issue-p-btn:hover { background: rgb(254, 215, 170); }
.issue-toggle-btn { margin-top: 0.4rem; border: 0px; background: transparent; color: var(--muted); cursor: pointer; padding: 0px; display: inline-flex; align-items: center; gap: 0.28rem; font-size: 0.8rem; font-weight: 700; }
.issue-toggle-btn:hover { color: var(--text); }
.issue-toggle-arrow { display: inline-block; transition: transform 0.16s; }
.issue-block.expanded .issue-toggle-arrow { transform: none; }
.issue-details { margin-top: 0.5rem; }
.issue-bill-item { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.issue-info-btn { width: 1.15rem; height: 1.15rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.65); background: transparent; color: var(--text); font-size: 0.75rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; text-transform: lowercase; }
.issue-bill-title { font-size: 0.84rem; font-weight: 700; }
.issue-alignment { margin-left: auto; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.76rem; font-weight: 700; }
.issue-alignment-icon { width: 1rem; height: 1rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: rgb(255, 255, 255); font-size: 0.68rem; line-height: 1; }
.issue-alignment.aligned { color: rgb(110, 231, 183); }
.issue-alignment.aligned .issue-alignment-icon { background: rgb(22, 163, 74); }
.issue-alignment.not-aligned { color: rgb(252, 165, 165); }
.issue-alignment.not-aligned .issue-alignment-icon { background: rgb(220, 38, 38); }
.issue-vote-grid { margin-top: 0.45rem; display: grid; grid-template-columns: repeat(2, minmax(90px, 1fr)); gap: 0.55rem; }
.issue-vote-column { background: rgba(15, 23, 42, 0.35); border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 8px; padding: 0.4rem 0.5rem; }
.issue-vote-heading { margin: 0px; color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.issue-vote-value { margin: 0.2rem 0px 0px; font-size: 0.82rem; font-weight: 700; }
.official-link { color: rgb(147, 197, 253); text-decoration: underline; text-underline-offset: 2px; }
.official-link:hover { color: rgb(191, 219, 254); }
.official-election-box { grid-column: 2; width: 100%; max-width: 240px; margin-left: calc(-1 * var(--election-box-shift)); border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 10px; padding: 0.55rem 0.65rem; background: rgba(15, 23, 42, 0.45); }
.official-election-box-urgent { border-color: rgba(250, 204, 21, 0.95); box-shadow: rgba(250, 204, 21, 0.28) 0px 0px 0px 2px, rgba(250, 204, 21, 0.35) 0px 0px 14px; animation: 1.8s ease-in-out 0s infinite normal none running electionGlow; }
.official-election-label, .official-election-date, .official-election-type { margin: 0px; }
.official-election-label { font-size: 0.68rem; letter-spacing: 0.08em; font-weight: 800; color: var(--muted); }
.official-election-date { margin-top: 0.4rem; font-weight: 700; }
.official-election-type { margin-top: 0.25rem; color: var(--muted); font-size: 0.86rem; }
.official-election-links { margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px solid rgba(148, 163, 184, 0.28); display: flex; flex-direction: column; gap: 0.35rem; }
.official-election-links a { color: rgb(147, 197, 253); font-size: 0.78rem; text-decoration: underline; text-underline-offset: 2px; }
.official-election-links a:hover { color: rgb(191, 219, 254); }
@keyframes electionGlow { 
  0%, 100% { box-shadow: rgba(250, 204, 21, 0.22) 0px 0px 0px 2px, rgba(250, 204, 21, 0.22) 0px 0px 10px; }
  50% { box-shadow: rgba(250, 204, 21, 0.38) 0px 0px 0px 2px, rgba(250, 204, 21, 0.5) 0px 0px 18px; }
}
.address-input { width: 100%; padding: 0.7rem; border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 8px; background: rgba(15, 23, 42, 0.45); color: var(--text); font-size: 0.95rem; }
.address-input:focus { outline: none; border-color: var(--accent); box-shadow: rgba(56, 189, 248, 0.2) 0px 0px 0px 2px; }
.address-modal-actions { margin-top: 1rem; display: flex; gap: 0.7rem; }
#lockInPredictionBtn { display: block; margin-left: auto; margin-right: auto; }
.next-puzzle-btn { display: inline-block; margin-top: 1rem; }
.modal { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal.hidden { display: none !important; }
.modal-content { background: var(--surface); padding: 2rem; border-radius: var(--radius); box-shadow: rgba(0, 0, 0, 0.5) 0px 20px 60px; max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto; position: relative; }
.modal-small { max-width: 400px; }
.modal-medium { max-width: 500px; }
.modal-content h2 { margin-top: 0px; font-size: 1.5rem; }
.modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: var(--muted); font-size: 2rem; cursor: pointer; padding: 0px; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { color: var(--text); }
.modal-close-left { left: 1rem; right: auto; }
.tie-info-btn { background: none; border: 1.5px solid var(--accent); color: var(--accent); border-radius: 50%; width: 1.2rem; height: 1.2rem; font-size: 0.7rem; font-weight: 700; line-height: 1; cursor: pointer; padding: 0px; margin-left: 0.4rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.tie-info-btn:hover { background: var(--accent); color: rgb(11, 18, 32); }
.tie-info-message { line-height: 1.7; margin: 2rem 0.5rem 0.5rem; }
.voice-bill-info { background: var(--surface-2); padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem; border-left: 4px solid var(--accent); }
.voice-bill-info .bill-title { margin: 0px 0px 0.5rem; font-weight: 600; font-size: 1rem; }
.voice-bill-info .bill-description { margin: 0px; font-size: 0.9rem; background: none; padding: 0px; }
.voice-question { margin: 1rem 0px 0.75rem; font-weight: 600; }
.voice-vote-buttons { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; }
.voice-label { display: block; margin: 1rem 0px 0.5rem; font-size: 0.9rem; color: var(--muted); }
.voice-textarea { width: 100%; height: 120px; padding: 0.75rem; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 6px; background: rgba(0, 0, 0, 0.2); color: var(--text); font-family: inherit; font-size: 0.9rem; resize: vertical; margin-bottom: 1rem; }
.voice-textarea::placeholder { color: var(--muted); }
.voice-textarea:focus { outline: none; border-color: var(--accent); box-shadow: rgba(56, 189, 248, 0.2) 0px 0px 0px 2px; }
.confirmation-message { font-size: 1.05rem; text-align: center; margin: 1.5rem 0px; line-height: 1.6; }
.modal-message { font-size: 1rem; color: var(--muted); margin: 1rem 0px 1.5rem; line-height: 1.6; }
.issue-bill-status-badge { position: absolute; top: 1rem; right: 1rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.35); color: var(--text); background: rgba(148, 163, 184, 0.2); }
.issue-bill-year { margin: 0.35rem 0px 0px; color: var(--muted); font-size: 0.88rem; font-weight: 700; }
#issueBillModal .modal-content { border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(15, 23, 42, 0.95); transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
#issueBillModal .modal-content.issue-bill-passed { border-color: rgba(20, 184, 166, 0.65); box-shadow: rgba(20, 184, 166, 0.3) 0px 0px 0px 2px, rgba(20, 184, 166, 0.25) 0px 10px 28px; background: rgba(10, 45, 40, 0.94); }
#issueBillModal .modal-content.issue-bill-failed { border-color: rgba(236, 72, 153, 0.65); box-shadow: rgba(236, 72, 153, 0.3) 0px 0px 0px 2px, rgba(236, 72, 153, 0.25) 0px 10px 28px; background: rgba(52, 20, 38, 0.94); }
#issueBillModal .modal-content.issue-bill-passed .issue-bill-status-badge { color: rgb(94, 234, 212); background: rgba(20, 184, 166, 0.22); border-color: rgba(20, 184, 166, 0.55); }
#issueBillModal .modal-content.issue-bill-failed .issue-bill-status-badge { color: rgb(249, 168, 212); background: rgba(236, 72, 153, 0.22); border-color: rgba(236, 72, 153, 0.55); }
.site-footer { text-align: center; padding: 1.25rem; color: var(--muted); }
@media (max-width: 700px) {
  .header-action-btn { top: 0.65rem; right: 0.65rem; }
  .stats-title { font-size: 1rem; }
  .stats-chart { height: 120px; }
  .profile-top { gap: 0.7rem; }
  .profile-photo, .reveal-photo { width: 72px; height: 72px; border-radius: 12px; }
  .instructions-demo-viewport { height: 186px; }
  .demo-answer-grid { grid-template-columns: 1fr; }
  .demo-cursor { left: 52%; top: 24%; }
  .demo-cursor-ring { left: calc(52% + 34px); top: calc(24% + 74px); }
  .official-head { gap: 0.6rem; }
  .official-photo { width: 54px; height: 54px; border-radius: 10px; }
  .reveal { align-items: flex-start; }
  .reveal-name { font-size: 1.25rem; }
  .vote-comparison { grid-template-columns: 1fr; gap: 0.55rem; }
  .match-icon { justify-self: center; }
  .official-card { display: block; }
  .official-election-box { max-width: none; width: 100%; margin-left: 0px; margin-top: 0.65rem; }
  .official-overall-row { padding-right: 0px; }
  .official-issues-row { padding-right: 0px; }
}