:root {
			--bg: #080b0f;
			--bg2: #0e1117;
			--bg3: #161b24;
			--bg4: #1e2533;
			--border: rgba(255,255,255,0.06);
			--border2: rgba(255,255,255,0.12);
			--text: #e2e8f0;
			--muted: #64748b;
			--muted2: #94a3b8;
			--green: #10b981;
			--green-dim: rgba(16,185,129,0.12);
			--red: #f43f5e;
			--red-dim: rgba(244,63,94,0.12);
			--amber: #f59e0b;
			--amber-dim: rgba(245,158,11,0.12);
			--blue: #3b82f6;
			--blue-dim: rgba(59,130,246,0.12);
			--cyan: #06b6d4;
			--purple: #a855f7;
			--purple-dim: rgba(168,85,247,0.12);
			--mono: 'JetBrains Mono',monospace;
			--sans: 'Inter',system-ui,sans-serif;
			--radius: 6px;
		}

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

		body {
			font-family: var(--sans);
			background: var(--bg);
			color: var(--text);
			min-height: 100vh;
			font-size: 14px;
			line-height: 1.6
		}

		/* Topbar */
		.topbar {
			background: var(--bg2);
			border-bottom: 1px solid var(--border);
			height: 52px;
			display: flex;
			align-items: center;
			padding: 0 24px;
			gap: 32px;
			position: sticky;
			top: 0;
			z-index: 200
		}

		.topbar-logo {
			font-family: var(--mono);
			font-size: 12px;
			font-weight: 700;
			letter-spacing: .15em;
			color: var(--green);
			text-transform: uppercase;
			white-space: nowrap
		}

			.topbar-logo span {
				color: var(--muted);
				font-weight: 400
			}

		.topbar-right {
			margin-left: auto;
			display: flex;
			align-items: center;
			gap: 16px;
			font-family: var(--mono);
			font-size: 11px;
			color: var(--muted)
		}

		.live-dot {
			width: 7px;
			height: 7px;
			border-radius: 50%;
			background: var(--green);
			box-shadow: 0 0 0 3px var(--green-dim);
			animation: pulse 2s infinite
		}

		@keyframes pulse {
			0%,100% {
				opacity: 1
			}

			50% {
				opacity: .4
			}
		}

		/* Layout */
		.layout {
			display: flex;
			min-height: calc(100vh - 52px)
		}

		/* Sidebar */
		.sidebar {
			width: 210px;
			min-width: 210px;
			background: var(--bg2);
			border-right: 1px solid var(--border);
			padding: 16px 0;
			position: sticky;
			top: 52px;
			height: calc(100vh - 52px);
			overflow-y: auto
		}

		.nav-section {
			padding: 0 10px;
			margin-bottom: 10px
		}

		.nav-label {
			font-family: var(--mono);
			font-size: 9px;
			letter-spacing: .18em;
			color: var(--muted);
			text-transform: uppercase;
			padding: 4px 8px;
			margin-bottom: 3px;
			cursor: pointer;
			user-select: none;
			display: flex;
			align-items: center;
			justify-content: space-between
		}

			.nav-label::after {
				content: "−";
				font-family: var(--mono);
				font-size: 11px;
				color: var(--muted);
				transition: transform .15s
			}

			.nav-section.collapsed .nav-label::after {
				content: "+"
			}

			.nav-label:hover {
				color: var(--text)
			}

		.nav-section.collapsed .nav-link {
			display: none
		}

		/* Pinned section (Overview): cannot collapse, no chevron */
		.nav-section-pinned > .nav-label {
			cursor: default
		}

			.nav-section-pinned > .nav-label::after {
				content: none
			}

			.nav-section-pinned > .nav-label:hover {
				color: var(--muted)
			}

		.nav-section-pinned.collapsed .nav-link {
			display: flex
		}

		/* Collapse-all toggle button at bottom of sidebar */
		.nav-collapse-toggle:hover {
			color: var(--text)
		}

		.nav-collapse-toggle.on #navCollapseToggleState {
			color: var(--green);
			background: var(--green-dim);
			border-color: var(--green)
		}

		.nav-link {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 4px 10px;
			border-radius: var(--radius);
			color: var(--muted2);
			text-decoration: none;
			font-size: 12.5px;
			font-weight: 500;
			transition: all .15s
		}

			.nav-link:hover {
				background: var(--bg3);
				color: var(--text)
			}

			.nav-link.active {
				background: var(--green-dim);
				color: var(--green)
			}

			.nav-link .icon {
				width: 14px;
				text-align: center;
				font-size: 12px;
				flex-shrink: 0
			}

		.nav-divider {
			height: 1px;
			background: var(--border);
			margin: 4px 10px
		}

		/* Main */
		.main {
			flex: 1;
			min-width: 0;
			padding: 24px 28px calc(80px + env(safe-area-inset-bottom, 0px));
			overflow-x: hidden
		}

		@media (max-width: 720px) {
			.sidebar { display: none; }
			.layout { display: block; }
		}

		/* Page header */
		.page-header {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			margin-bottom: 24px;
			gap: 16px
		}

		.page-title {
			font-family: var(--mono);
			font-size: 17px;
			font-weight: 700;
			color: var(--text)
		}

		.page-subtitle {
			font-size: 13px;
			color: var(--muted);
			margin-top: 3px
		}

		.page-actions {
			display: flex;
			gap: 8px;
			align-items: center;
			flex-shrink: 0;
			flex-wrap: wrap
		}

		.card {
			background: var(--bg2);
			border: 1px solid var(--border);
			border-radius: var(--radius);
			overflow: hidden;
			margin-bottom: 18px
		}

		/* Stat cards */
		.cards-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill,minmax(155px,1fr));
			gap: 10px;
			margin-bottom: 24px
		}

		.col-span-2 {
			grid-column: span 2;
		}

		.cards-grid-8 {
			display: grid;
			grid-template-columns: repeat(8, minmax(0, 1fr));
			gap: 10px;
			margin-bottom: 24px;
		}

		@media (max-width: 700px) {
			.cards-grid-8 {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
		}

		.cards-grid-7 {
			display: grid;
			grid-template-columns: repeat(7, minmax(0, 1fr));
			gap: 10px;
			margin-bottom: 24px;
		}

		@media (max-width: 700px) {
			.cards-grid-7 {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
		}

		.stat-card {
			background: var(--bg2);
			border: 1px solid var(--border);
			border-radius: var(--radius);
			padding: 14px 16px;
			position: relative;
			overflow: hidden
		}

			.stat-card.c-green {
				border-top: 2px solid var(--green)
			}

			.stat-card.c-red {
				border-top: 2px solid var(--red)
			}

			.stat-card.c-amber {
				border-top: 2px solid var(--amber)
			}

			.stat-card.c-blue {
				border-top: 2px solid var(--blue)
			}

			.stat-card.c-cyan {
				border-top: 2px solid var(--cyan)
			}

			.stat-card.c-purple {
				border-top: 2px solid var(--purple)
			}

			.stat-card.c-gray {
				border-top: 2px solid #374151
			}

		.card-label {
			font-family: var(--mono);
			font-size: 9px;
			letter-spacing: .12em;
			color: var(--muted);
			text-transform: uppercase;
			margin-bottom: 8px
		}

		.card-value {
			font-family: var(--mono);
			font-size: 24px;
			font-weight: 700;
			line-height: 1;
			margin-bottom: 5px
		}

		.c-green .card-value {
			color: var(--green)
		}

		.c-red .card-value {
			color: var(--red)
		}

		.c-amber .card-value {
			color: var(--amber)
		}

		.c-blue .card-value {
			color: var(--blue)
		}

		.c-cyan .card-value {
			color: var(--cyan)
		}

		.c-purple .card-value {
			color: var(--purple)
		}

		.c-gray .card-value {
			color: #9ca3af
		}

		.card-sub {
			font-family: var(--mono);
			font-size: 10px;
			color: var(--muted)
		}

		/* Section header */
		.section-hdr {
			font-family: var(--mono);
			font-size: 9px;
			letter-spacing: .18em;
			color: var(--muted);
			text-transform: uppercase;
			border-bottom: 1px solid var(--border);
			padding-bottom: 7px;
			margin-bottom: 14px
		}

		/* Progress bar */
		.progress-box {
			background: var(--bg2);
			border: 1px solid var(--border);
			border-radius: var(--radius);
			padding: 18px 22px;
			margin-bottom: 24px
		}

		.progress-top {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			margin-bottom: 10px
		}

		.progress-pct {
			font-family: var(--mono);
			font-size: 18px;
			font-weight: 700;
			color: var(--green)
		}

		.progress-meta {
			font-family: var(--mono);
			font-size: 10px;
			color: var(--muted)
		}

		.prog-track {
			height: 8px;
			background: var(--bg4);
			border-radius: 4px;
			overflow: hidden;
			display: flex;
			gap: 1px
		}

		.prog-seg {
			height: 100%;
			border-radius: 3px;
			transition: width .5s ease
		}

		.seg-done {
			background: var(--green)
		}

		.seg-fail {
			background: var(--red)
		}

		.seg-nf {
			background: #374151
		}

		.seg-ip {
			background: var(--amber)
		}

		.prog-legend {
			display: flex;
			flex-wrap: wrap;
			gap: 14px;
			margin-top: 8px
		}

		.leg {
			display: flex;
			align-items: center;
			gap: 5px;
			font-family: var(--mono);
			font-size: 10px;
			color: var(--muted)
		}

		.leg-dot {
			width: 7px;
			height: 7px;
			border-radius: 2px;
			flex-shrink: 0
		}

		/* Two-col */
		.two-col {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 18px;
			margin-bottom: 24px
		}

		@media(max-width:1050px) {
			.two-col {
				grid-template-columns: 1fr
			}
		}

		/* Tables */
		.table-wrap {
			background: var(--bg2);
			border: 1px solid var(--border);
			border-radius: var(--radius);
			overflow: hidden;
			margin-bottom: 24px
		}

		.data-table {
			width: 100%;
			border-collapse: collapse;
			font-size: 12px
		}

			.data-table th {
				background: var(--bg3);
				color: var(--muted);
				font-family: var(--mono);
				font-size: 9px;
				letter-spacing: .1em;
				text-transform: uppercase;
				padding: 8px 12px;
				text-align: left;
				border-bottom: 1px solid var(--border);
				white-space: nowrap
			}

			.data-table td {
				padding: 8px 12px;
				border-bottom: 1px solid var(--border);
				color: var(--muted2);
				font-family: var(--mono);
				font-size: 11px
			}

			.data-table tr:last-child td {
				border-bottom: none
			}

			.data-table tr:hover td {
				background: var(--bg3)
			}

			.data-table a {
				color: var(--cyan);
				text-decoration: none
			}

				.data-table a:hover {
					text-decoration: underline
				}

			.data-table th.sortable {
				cursor: pointer
			}

				.data-table th.sortable:hover {
					color: var(--text)
				}

		/* Bar chart (CSS only) */
		.bar-chart {
			display: flex;
			flex-direction: column;
			gap: 6px
		}

		.bar-row {
			display: flex;
			align-items: center;
			gap: 10px;
			font-family: var(--mono);
			font-size: 10px
		}

		.bar-label {
			width: 80px;
			color: var(--muted);
			text-align: right;
			flex-shrink: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap
		}

		.bar-track {
			flex: 1;
			height: 18px;
			background: var(--bg4);
			border-radius: 3px;
			overflow: hidden;
			position: relative
		}

		.bar-fill {
			height: 100%;
			border-radius: 3px;
			transition: width .4s ease;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-right: 6px;
			font-size: 9px;
			font-weight: 700
		}

		.bar-value {
			width: 60px;
			text-align: right;
			flex-shrink: 0;
			color: var(--muted2)
		}

		/* PDA-G palette helpers */
		.pdag-p {
			color: var(--amber)
		}

		.pdag-d {
			color: var(--blue)
		}

		.pdag-a {
			color: var(--green)
		}

		.pdag-g {
			color: var(--purple)
		}

		.bg-pdag-p {
			background: var(--amber)
		}

		.bg-pdag-d {
			background: var(--blue)
		}

		.bg-pdag-a {
			background: var(--green)
		}

		.bg-pdag-g {
			background: var(--purple)
		}

		/* Heatmap */
		.ac-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill,minmax(36px,1fr));
			gap: 2px
		}

		.ac-cell {
			height: 34px;
			border-radius: 3px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: var(--mono);
			font-size: 8px;
			font-weight: 600;
			cursor: pointer;
			transition: transform .1s;
			text-decoration: none;
			color: inherit
		}

			.ac-cell:hover {
				transform: scale(1.18);
				z-index: 10
			}

		.pct-0 {
			background: var(--bg4);
			color: var(--muted)
		}

		.pct-lo {
			background: rgba(16,185,129,.18);
			color: #6ee7b7
		}

		.pct-mid {
			background: rgba(16,185,129,.38);
			color: #34d399
		}

		.pct-hi {
			background: rgba(16,185,129,.62);
			color: #10b981
		}

		.pct-100 {
			background: var(--green);
			color: #fff
		}

		.pct-err {
			background: rgba(244,63,94,.22);
			color: var(--red)
		}

		/* Badges */
		.badge {
			display: inline-block;
			font-family: var(--mono);
			font-size: 8px;
			font-weight: 700;
			letter-spacing: .06em;
			padding: 2px 5px;
			border-radius: 3px
		}

		.badge-done {
			background: var(--green-dim);
			color: var(--green)
		}

		.badge-failed {
			background: var(--red-dim);
			color: var(--red)
		}

		.badge-ip {
			background: var(--amber-dim);
			color: var(--amber)
		}

		.badge-pending {
			background: var(--bg4);
			color: var(--muted)
		}

		/* Buttons */
		.btn {
			background: var(--bg3);
			border: 1px solid var(--border2);
			color: var(--text);
			font-family: var(--mono);
			font-size: 10px;
			padding: 5px 12px;
			border-radius: var(--radius);
			cursor: pointer;
			text-decoration: none;
			display: inline-block;
			transition: background .15s;
			white-space: nowrap
		}

			.btn:hover {
				background: var(--bg4)
			}

		.btn-green {
			background: var(--green-dim);
			color: var(--green);
			border-color: var(--green)
		}

			.btn-green:hover {
				background: rgba(16,185,129,.2)
			}

		.btn-red {
			background: var(--red-dim);
			color: var(--red);
			border-color: var(--red)
		}

		/* Misc */
		.err-text {
			color: var(--red) !important;
			font-size: 10px
		}

		.text-muted {
			color: var(--muted)
		}

		.text-muted2 {
			color: var(--muted2)
		}

		.text-green {
			color: var(--green)
		}

		.text-red {
			color: var(--red)
		}

		.text-amber {
			color: var(--amber)
		}

		.text-blue {
			color: var(--blue)
		}

		.text-cyan {
			color: var(--cyan)
		}

		.text-purple {
			color: var(--purple)
		}

		.mono {
			font-family: var(--mono)
		}

		.mb24 {
			margin-bottom: 24px
		}

		.search-box {
			background: var(--bg3);
			border: 1px solid var(--border2);
			color: var(--text);
			font-family: var(--mono);
			font-size: 12px;
			padding: 7px 12px;
			border-radius: var(--radius);
			outline: none;
			width: 260px
		}

			.search-box:focus {
				border-color: var(--cyan)
			}

		/* ── one-time post-login intro splash ── */
		#pdaIntro {
			position: fixed;
			inset: 0;
			z-index: 99999;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			font-family: var(--mono), 'JetBrains Mono', ui-monospace, monospace;
			background: radial-gradient(900px 520px at 20% -10%, rgba(34,227,195,.14), transparent 60%), radial-gradient(820px 420px at 90% 0, rgba(59,130,246,.14), transparent 55%), #0a0e14;
			animation: pdaIntroFade 2.8s ease forwards;
		}

			#pdaIntro .glow {
				position: absolute;
				width: 560px;
				max-width: 80vw;
				height: 560px;
				border-radius: 50%;
				filter: blur(8px);
				pointer-events: none;
				background: radial-gradient(circle, rgba(34,227,195,.18), transparent 62%);
				animation: pdaGlow 2.8s ease forwards;
			}

			#pdaIntro .title {
				font-size: clamp(28px, 7vw, 72px);
				font-weight: 800;
				letter-spacing: .06em;
				background: linear-gradient(90deg, #eafffb, #22e3c3 55%, #3b82f6);
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;
				text-shadow: 0 0 36px rgba(34,227,195,.25);
				opacity: 0;
				transform: translateY(14px) scale(.96);
				animation: pdaTitle 1.1s cubic-bezier(.22,1,.36,1) .15s forwards;
			}

			#pdaIntro .tag {
				margin-top: 14px;
				font-size: clamp(10px, 1.6vw, 13px);
				letter-spacing: .42em;
				text-transform: uppercase;
				color: #7c8a99;
				opacity: 0;
				animation: pdaTag .9s ease .7s forwards;
			}

			#pdaIntro .bar {
				margin-top: 22px;
				height: 2px;
				width: 0;
				border-radius: 2px;
				background: linear-gradient(90deg, #22e3c3, #3b82f6);
				box-shadow: 0 0 14px rgba(34,227,195,.5);
				animation: pdaBar 1s ease .55s forwards;
			}

		@keyframes pdaTitle {
			to {
				opacity: 1;
				transform: translateY(0) scale(1)
			}
		}

		@keyframes pdaTag {
			to {
				opacity: 1
			}
		}

		@keyframes pdaBar {
			to {
				width: min(360px, 62vw)
			}
		}

		@keyframes pdaGlow {
			0% {
				opacity: 0;
				transform: scale(.7)
			}

			35% {
				opacity: 1
			}

			100% {
				opacity: 0;
				transform: scale(1.05)
			}
		}

		@keyframes pdaIntroFade {
			0% {
				opacity: 0
			}

			10% {
				opacity: 1
			}

			78% {
				opacity: 1
			}

			100% {
				opacity: 0;
				visibility: hidden
			}
		}

		@media (prefers-reduced-motion: reduce) {
			#pdaIntro, #pdaIntro * {
				animation-duration: .6s !important
			}
		}

/* =========================================================================
   Global picker bar — full-width hero card; the <select> stays narrow.
   Use:  <form method="get" action="X.aspx" class="pdc-picker">
           <label class="pdc-picker-lbl">Label</label>
           <select class="pdc-picker-sel" ...>...</select>
         </form>
   Per-page width override: <select class="pdc-picker-sel" style="--picker-min:240px">
   Arrow is baked in via background SVG so no wrapper div is needed.
   ========================================================================= */

/* Minimal picker bar — matches the District PDA `.geo-bar` reference exactly.
   Grid layout: [label][select][.....tabs flush right]. No wrap on desktop. */
.pdc-picker{
	display:grid;
	grid-template-columns:auto auto 1fr;
	gap:10px;
	align-items:center;
	width:100%;box-sizing:border-box;
	margin:14px 0 22px
}
@media(max-width:900px){
	.pdc-picker{grid-template-columns:1fr;justify-items:start}
	.pdc-picker .geo-tabs{justify-self:start}
}
.pdc-picker-lbl{font-family:var(--mono);font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.14em;font-weight:700}

/* The SELECT — narrow, never auto-grows; per-page override via --picker-min */
.pdc-picker-sel{
	appearance:none;-webkit-appearance:none;-moz-appearance:none;
	cursor:pointer;
	width:var(--picker-min,300px);
	max-width:420px;
	background-color:var(--bg3);
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M3 5 L7 9 L11 5' stroke='%2394a3b8' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat:no-repeat;
	background-position:right 12px center;
	color:var(--text);
	border:1px solid var(--border2,var(--border));
	border-radius:8px;
	padding:9px 34px 9px 12px;
	font-family:var(--mono);font-size:13px;font-weight:500;
	transition:border-color .2s ease,box-shadow .2s ease
}
.pdc-picker-sel:hover{border-color:rgba(34,227,195,.5)}
.pdc-picker-sel:focus{outline:none;border-color:#22e3c3;box-shadow:0 0 0 2px rgba(34,227,195,.18)}
.pdc-picker-sel option{background:var(--bg2);color:var(--text);padding:6px}

/* =========================================================================
   Geo-tabs — level switcher pills shown on the RIGHT of a .pdc-picker bar.
   Layout matches the District PDA page: [Select] ...... [State][Dist][PC][Asm][Booth]
   ========================================================================= */
.geo-tabs{display:flex;flex-wrap:wrap;gap:5px;justify-self:end}
.geo-tab{font-family:var(--mono);font-size:10.5px;font-weight:600;padding:6px 10px;border-radius:7px;border:1px solid var(--border);color:var(--muted2);text-decoration:none;background:var(--bg3);transition:border-color .2s,background .2s,color .2s;white-space:nowrap}
.geo-tab:hover{border-color:rgba(34,227,195,.4);color:var(--text);background:rgba(34,227,195,.05)}
.geo-tab.on{background:rgba(6,182,212,.16);color:#06b6d4;border-color:#06b6d4;font-weight:700}

/* =========================================================================
   Timeline — shared row/card styles for TimelineBody.razor
   ========================================================================= */
/* Hero header — shared across all timeline geo pages */
.tlh{margin-top:12px;padding:18px 16px 14px;background:linear-gradient(145deg,color-mix(in srgb,var(--hero) 8%,transparent),transparent);border:1px solid color-mix(in srgb,var(--hero) 30%,var(--border,#30363d));border-radius:18px}
.tlh-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tlh-ico{font-size:32px;color:var(--hero)}
.tlh-title{font-size:17px;font-weight:800;color:var(--text,#e6edf3);margin:0}
.tlh-sub{font-size:11px;color:var(--muted,#8b949e);margin:2px 0 0;font-weight:500}
.tlh-nav{display:flex;flex-wrap:wrap;gap:6px}
.tlh-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:20px;font-size:11px;font-weight:700;color:var(--c);background:color-mix(in srgb,var(--c) 10%,transparent);border:1px solid color-mix(in srgb,var(--c) 25%,transparent);text-decoration:none;transition:background .15s}
.tlh-chip:hover{background:color-mix(in srgb,var(--c) 18%,transparent)}
.tlh-chip i{font-size:13px}
.tl-count{font-size:12px;color:var(--muted);margin:14px 0 0;font-weight:600}

/* =========================================================================
   Service hero header — glowing pulse border
   ========================================================================= */
.svc-hero{
    padding:24px 22px;margin-top:12px;
    border-radius:18px;
    border:1.5px solid rgba(168,85,247,.4);
    background:linear-gradient(135deg,rgba(168,85,247,.08) 0%,rgba(6,182,212,.04) 100%);
    box-shadow:0 0 12px rgba(168,85,247,.2),inset 0 0 20px rgba(168,85,247,.08);
    animation:svcPulse 2.5s ease-in-out infinite;
}
.svc-hero__head{display:flex;align-items:center;gap:16px}
.svc-hero__icon{font-size:42px;color:#a855f7}
.svc-hero__title{font-size:22px;font-weight:800;margin:0;color:var(--text,#e6edf3)}
.svc-hero__sub{font-size:13px;margin:3px 0 0;color:var(--muted,#8b949e);line-height:1.4}
@keyframes svcPulse{
    0%,100%{border-color:rgba(168,85,247,.4);box-shadow:0 0 12px rgba(168,85,247,.2),inset 0 0 20px rgba(168,85,247,.08)}
    50%{border-color:rgba(6,182,212,.6);box-shadow:0 0 24px rgba(6,182,212,.3),inset 0 0 24px rgba(6,182,212,.1)}
}

/* ── WhatsApp (green) ── */
.svc-hero--wa{border-color:rgba(37,211,102,.4);
    background:linear-gradient(135deg,rgba(37,211,102,.08) 0%,rgba(18,140,70,.04) 100%);
    box-shadow:0 0 12px rgba(37,211,102,.2),inset 0 0 20px rgba(37,211,102,.08);
    animation:svcPulseWa 2.5s ease-in-out infinite}
.svc-hero--wa .svc-hero__icon{color:#25d366}
@keyframes svcPulseWa{
    0%,100%{border-color:rgba(37,211,102,.4);box-shadow:0 0 12px rgba(37,211,102,.2),inset 0 0 20px rgba(37,211,102,.08)}
    50%{border-color:rgba(18,140,70,.6);box-shadow:0 0 24px rgba(37,211,102,.3),inset 0 0 24px rgba(37,211,102,.1)}
}

/* ── SMS (blue) ── */
.svc-hero--sms{border-color:rgba(59,130,246,.4);
    background:linear-gradient(135deg,rgba(59,130,246,.08) 0%,rgba(37,99,235,.04) 100%);
    box-shadow:0 0 12px rgba(59,130,246,.2),inset 0 0 20px rgba(59,130,246,.08);
    animation:svcPulseSms 2.5s ease-in-out infinite}
.svc-hero--sms .svc-hero__icon{color:#3b82f6}
@keyframes svcPulseSms{
    0%,100%{border-color:rgba(59,130,246,.4);box-shadow:0 0 12px rgba(59,130,246,.2),inset 0 0 20px rgba(59,130,246,.08)}
    50%{border-color:rgba(37,99,235,.6);box-shadow:0 0 24px rgba(59,130,246,.3),inset 0 0 24px rgba(59,130,246,.1)}
}

/* ── Election Mgmt (orange) ── */
.svc-hero--em{border-color:rgba(249,115,22,.4);
    background:linear-gradient(135deg,rgba(249,115,22,.08) 0%,rgba(234,88,12,.04) 100%);
    box-shadow:0 0 12px rgba(249,115,22,.2),inset 0 0 20px rgba(249,115,22,.08);
    animation:svcPulseEm 2.5s ease-in-out infinite}
.svc-hero--em .svc-hero__icon{color:#f97316}
@keyframes svcPulseEm{
    0%,100%{border-color:rgba(249,115,22,.4);box-shadow:0 0 12px rgba(249,115,22,.2),inset 0 0 20px rgba(249,115,22,.08)}
    50%{border-color:rgba(234,88,12,.6);box-shadow:0 0 24px rgba(249,115,22,.3),inset 0 0 24px rgba(249,115,22,.1)}
}

/* ── Election Results (amber) ── */
.svc-hero--election{border-color:rgba(245,158,11,.4);
    background:linear-gradient(135deg,rgba(245,158,11,.08) 0%,rgba(217,119,6,.04) 100%);
    box-shadow:0 0 12px rgba(245,158,11,.2),inset 0 0 20px rgba(245,158,11,.08);
    animation:svcPulseElection 2.5s ease-in-out infinite}
.svc-hero--election .svc-hero__icon{color:#f59e0b}
@keyframes svcPulseElection{
    0%,100%{border-color:rgba(245,158,11,.4);box-shadow:0 0 12px rgba(245,158,11,.2),inset 0 0 20px rgba(245,158,11,.08)}
    50%{border-color:rgba(217,119,6,.6);box-shadow:0 0 24px rgba(245,158,11,.3),inset 0 0 24px rgba(245,158,11,.1)}
}

/* ── SIR (indigo) ── */
.svc-hero--sir{border-color:rgba(99,102,241,.4);
    background:linear-gradient(135deg,rgba(99,102,241,.08) 0%,rgba(79,70,229,.04) 100%);
    box-shadow:0 0 12px rgba(99,102,241,.2),inset 0 0 20px rgba(99,102,241,.08);
    animation:svcPulseSir 2.5s ease-in-out infinite}
.svc-hero--sir .svc-hero__icon{color:#6366f1}
@keyframes svcPulseSir{
    0%,100%{border-color:rgba(99,102,241,.4);box-shadow:0 0 12px rgba(99,102,241,.2),inset 0 0 20px rgba(99,102,241,.08)}
    50%{border-color:rgba(79,70,229,.6);box-shadow:0 0 24px rgba(99,102,241,.3),inset 0 0 24px rgba(99,102,241,.1)}
}

/* ── Caste & Religion (rose) ── */
.svc-hero--caste{border-color:rgba(244,63,94,.4);
    background:linear-gradient(135deg,rgba(244,63,94,.08) 0%,rgba(225,29,72,.04) 100%);
    box-shadow:0 0 12px rgba(244,63,94,.2),inset 0 0 20px rgba(244,63,94,.08);
    animation:svcPulseCaste 2.5s ease-in-out infinite}
.svc-hero--caste .svc-hero__icon{color:#f43f5e}
@keyframes svcPulseCaste{
    0%,100%{border-color:rgba(244,63,94,.4);box-shadow:0 0 12px rgba(244,63,94,.2),inset 0 0 20px rgba(244,63,94,.08)}
    50%{border-color:rgba(225,29,72,.6);box-shadow:0 0 24px rgba(244,63,94,.3),inset 0 0 24px rgba(244,63,94,.1)}
}

/* ── Demographics (teal) ── */
.svc-hero--demo{border-color:rgba(20,184,166,.4);
    background:linear-gradient(135deg,rgba(20,184,166,.08) 0%,rgba(13,148,136,.04) 100%);
    box-shadow:0 0 12px rgba(20,184,166,.2),inset 0 0 20px rgba(20,184,166,.08);
    animation:svcPulseDemo 2.5s ease-in-out infinite}
.svc-hero--demo .svc-hero__icon{color:#14b8a6}
@keyframes svcPulseDemo{
    0%,100%{border-color:rgba(20,184,166,.4);box-shadow:0 0 12px rgba(20,184,166,.2),inset 0 0 20px rgba(20,184,166,.08)}
    50%{border-color:rgba(13,148,136,.6);box-shadow:0 0 24px rgba(20,184,166,.3),inset 0 0 24px rgba(20,184,166,.1)}
}

/* ── Voters (sky blue) ── */
.svc-hero--voters{border-color:rgba(56,189,248,.4);
    background:linear-gradient(135deg,rgba(56,189,248,.08) 0%,rgba(14,165,233,.04) 100%);
    box-shadow:0 0 12px rgba(56,189,248,.2),inset 0 0 20px rgba(56,189,248,.08);
    animation:svcPulseVoters 2.5s ease-in-out infinite}
.svc-hero--voters .svc-hero__icon{color:#38bdf8}
@keyframes svcPulseVoters{
    0%,100%{border-color:rgba(56,189,248,.4);box-shadow:0 0 12px rgba(56,189,248,.2),inset 0 0 20px rgba(56,189,248,.08)}
    50%{border-color:rgba(14,165,233,.6);box-shadow:0 0 24px rgba(56,189,248,.3),inset 0 0 24px rgba(56,189,248,.1)}
}

/* ── Booth (emerald) ── */
.svc-hero--booth{border-color:rgba(52,211,153,.4);
    background:linear-gradient(135deg,rgba(52,211,153,.08) 0%,rgba(16,185,129,.04) 100%);
    box-shadow:0 0 12px rgba(52,211,153,.2),inset 0 0 20px rgba(52,211,153,.08);
    animation:svcPulseBooth 2.5s ease-in-out infinite}
.svc-hero--booth .svc-hero__icon{color:#34d399}
@keyframes svcPulseBooth{
    0%,100%{border-color:rgba(52,211,153,.4);box-shadow:0 0 12px rgba(52,211,153,.2),inset 0 0 20px rgba(52,211,153,.08)}
    50%{border-color:rgba(16,185,129,.6);box-shadow:0 0 24px rgba(52,211,153,.3),inset 0 0 24px rgba(52,211,153,.1)}
}

/* ── Team (amber/gold) ── */
.svc-hero--team{border-color:rgba(251,191,36,.4);
    background:linear-gradient(135deg,rgba(251,191,36,.08) 0%,rgba(245,158,11,.04) 100%);
    box-shadow:0 0 12px rgba(251,191,36,.2),inset 0 0 20px rgba(251,191,36,.08);
    animation:svcPulseTeam 2.5s ease-in-out infinite}
.svc-hero--team .svc-hero__icon{color:#fbbf24}
@keyframes svcPulseTeam{
    0%,100%{border-color:rgba(251,191,36,.4);box-shadow:0 0 12px rgba(251,191,36,.2),inset 0 0 20px rgba(251,191,36,.08)}
    50%{border-color:rgba(245,158,11,.6);box-shadow:0 0 24px rgba(251,191,36,.3),inset 0 0 24px rgba(251,191,36,.1)}
}

/* ── Hero divider (shared across all service pages) ── */
.svc-hero-divider{display:flex;align-items:center;margin:20px 0 16px}
.svc-hero-divider__line{flex:1;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--vc-primary,#7c4dff) 40%,transparent) 50%,transparent)}
.svc-hero-divider__dot{width:6px;height:6px;border-radius:50%;background:var(--vc-primary,#7c4dff);box-shadow:0 0 8px var(--vc-primary,#7c4dff);flex-shrink:0}

/* =========================================================================
   AI response — rendered Markdown (Markdig HTML output)
   ========================================================================= */
.vc-ai-response h1{font-size:18px;font-weight:800;margin:18px 0 8px;color:var(--text,#e6edf3)}
.vc-ai-response h2{font-size:16px;font-weight:700;margin:16px 0 6px;color:var(--text,#e6edf3);border-bottom:1px solid var(--border,#30363d);padding-bottom:5px}
.vc-ai-response h3{font-size:14px;font-weight:700;margin:14px 0 4px;color:var(--text,#e6edf3)}
.vc-ai-response p{margin:6px 0;font-size:13.5px;line-height:1.65}
.vc-ai-response ul,.vc-ai-response ol{margin:6px 0 6px 18px;padding:0}
.vc-ai-response li{margin:3px 0;font-size:13.5px;line-height:1.55}
.vc-ai-response strong{color:var(--text,#e6edf3);font-weight:700}
.vc-ai-response em{font-style:italic;color:var(--muted,#8b949e)}
.vc-ai-response hr{border:none;border-top:1px solid var(--border,#30363d);margin:12px 0}
.vc-ai-response table{width:100%;border-collapse:collapse;margin:10px 0;font-size:12.5px}
.vc-ai-response th{text-align:left;padding:6px 10px;font-weight:700;border-bottom:2px solid var(--border,#30363d);color:var(--text,#e6edf3);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.vc-ai-response td{padding:5px 10px;border-bottom:1px solid var(--border,#30363d)}
.vc-ai-response tr:hover td{background:rgba(139,92,246,.04)}
.vc-ai-response blockquote{margin:8px 0;padding:8px 14px;border-left:3px solid rgba(139,92,246,.4);background:rgba(139,92,246,.04);border-radius:0 8px 8px 0;font-size:13px}
.vc-ai-response code{background:var(--bg3,#161b24);padding:2px 5px;border-radius:4px;font-size:12px;font-family:var(--mono)}
.vc-ai-response pre{background:var(--bg3,#161b24);padding:12px;border-radius:8px;overflow-x:auto;margin:8px 0}
.vc-ai-response pre code{background:none;padding:0}

/* ── Hide all State-level navigation buttons/tabs ── */
a[href$="/state"],
a[href$="/state-results"],
a[href*="/map/state"],
a[href*="/overview/state"],
a[href*="/pdaoverview/state"],
a[href*="/sir/overview/state"],
a[href*="/surnames/state"],
a[href*="/rolls/state"],
a[href*="/households/state"],
a[href*="/couples/state"],
a[href*="/family/state"],
a[href*="/timeline/state"],
a[href*="/election/state"]{display:none!important}