: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 60px;
			overflow-x: hidden
		}

		/* 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
		}

		/* 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}

/* ==== Admin overrides ==== */
body.layer-support .topbar { background: #000; }
.pager a { display:inline-block; padding:6px 10px; margin:0 2px; border:1px solid #ccc; border-radius:4px; }
.pager a.active { background:#000; color:white; }
.filters { background:#f5f5f5; padding:12px; border-radius:6px; margin-bottom:12px; display:flex; gap:10px; flex-wrap:wrap; }
.grid { width:100%; border-collapse:collapse; font-size:12px; margin-bottom:18px; background:var(--bg2); }
.grid th, .grid td { padding:8px 12px; border-bottom:1px solid var(--border); font-family:var(--mono); }
.grid th { background:var(--bg3); color:var(--muted); text-transform:uppercase; font-size:9px; letter-spacing:.1em; text-align:left; }
.grid td { color:var(--muted2); font-size:11px; }
.input { background:var(--bg3); border:1px solid var(--border2); color:var(--text); padding:6px 10px; border-radius:6px; font-family:var(--mono); font-size:12px; }
.btn.primary { background:var(--green-dim); color:var(--green); border-color:var(--green); }
.form-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.form-row label { width:140px; color:var(--muted); font-family:var(--mono); font-size:11px; }
.form-card { background:var(--bg2); border:1px solid var(--border); padding:18px; border-radius:6px; margin-bottom:18px; }
.section-title { font-family:var(--mono); font-size:14px; color:var(--text); margin:18px 0 10px; }
.error { color:var(--red); font-family:var(--mono); font-size:12px; display:block; margin:6px 0; }
.stat-card { background:var(--bg2); border:1px solid var(--border); border-top:2px solid var(--green); border-radius:6px; padding:16px 20px; min-width:160px; }
.stat-label { font-family:var(--mono); font-size:9px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; }
.stat-value { font-family:var(--mono); font-size:24px; font-weight:700; color:var(--green); margin-top:6px; }
.auth-card { max-width:420px; margin:60px auto; background:var(--bg2); border:1px solid var(--border); padding:28px; border-radius:8px; }