/* ============================================================
AssemblySite — Unified Stylesheet
Merged from: site.css + dc.css + Blazor defaults
Dark theme native | Mobile-first
============================================================ */
/* ── CSS Custom Properties (VDC theme — SP Red+Green) ── */
:root {
--bg: #0a0f0a; --bg2: #141e14; --bg3: #1e2e1e; --bg4: #2d3f2d;
--border: rgba(76,175,80,0.12); --border2: rgba(76,175,80,0.22);
--text: #f1f5f1; --muted: #8faa8f; --muted2: #bdd4bd;
--green: #4caf50; --green-dim: rgba(76,175,80,0.15);
--red: #ef4444; --red-dim: rgba(239,68,68,0.15);
--amber: #fbbf24; --amber-dim: rgba(251,191,36,0.15);
--blue: #60a5fa; --blue-dim: rgba(96,165,250,0.15);
--cyan: #4caf50;
--purple: #c084fc; --purple-dim: rgba(192,132,252,0.15);
--accent: #ef4444; --accent-dim: rgba(239,68,68,0.12);
--mono: 'JetBrains Mono',monospace;
--sans: 'Inter',system-ui,sans-serif;
--radius: 8px;
}
/* ── Reset & Base ── */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:#060a06; color:var(--text); font-family:var(--sans); font-size:16px; line-height:1.4; }
h1, h2, h3 { margin:0 0 8px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
a { color:var(--cyan); text-decoration:none; }
a:hover { text-decoration:underline; }
/* ── Blazor framework styles ── */
.content { padding-top:1.1rem; }
h1:focus { outline:none; }
.valid.modified:not([type=checkbox]) { outline:1px solid #26b050; }
.invalid { outline:1px solid #e50000; }
.validation-message { color:#e50000; }
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem; color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }
.darker-border-checkbox.form-check-input { border-color: #929292; }
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }
/* ── Topbar ── */
.topbar { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; color:var(--text); background:linear-gradient(90deg,#0a1a0a,#122012); border-bottom:1px solid rgba(239,68,68,.25); position:sticky; top:0; z-index:50; box-shadow:0 2px 12px rgba(0,0,0,.35); }
.topbar .brand { font-family:var(--mono); font-size:13px; font-weight:800; letter-spacing:.18em; color:var(--red); text-transform:uppercase; text-shadow:0 0 14px rgba(239,68,68,.4); }
.topbar a, .topbar span { color:var(--muted2); font-size:13px; }
.topbar a { text-decoration:none; }
.topbar .logout-btn { display:inline-block; padding:7px 16px; background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:8px; font-size:13px; font-weight:600; text-decoration:none; transition:all .15s; cursor:pointer; }
.topbar .logout-btn:hover { background:rgba(239,68,68,.85); border-color:rgba(239,68,68,.95); transform:translateY(-1px); }
/* Layer-specific brand colors */
.topbar.layer-state .brand { color:#fde047; text-shadow:0 0 16px rgba(253,224,71,.35); }
.topbar.layer-district .brand { color:#a855f7; text-shadow:0 0 16px rgba(168,85,247,.35); }
.topbar.layer-parliamentary .brand { color:#3b82f6; text-shadow:0 0 16px rgba(59,130,246,.35); }
.topbar.layer-assembly .brand { color:#ef4444; text-shadow:0 0 16px rgba(239,68,68,.35); }
.topbar.layer-sector .brand { color:#10b981; text-shadow:0 0 16px rgba(16,185,129,.35); }
.topbar.layer-booth .brand { color:#f59e0b; text-shadow:0 0 16px rgba(245,158,11,.35); }
@media (max-width: 480px) {
.topbar { padding:10px 12px; }
.topbar .brand { font-size:12px; letter-spacing:.10em; }
.topbar .logout-btn { padding:5px 12px; font-size:12px; }
}
/* ── Main content ── */
.main { padding:16px; padding-bottom:60px; max-width:700px; margin:0 auto; }
/* ── Bottom navigation ── */
.bottombar { position:fixed; bottom:0; left:0; right:0; background:#0a120a; border-top:1px solid rgba(239,68,68,.18); display:flex; z-index:10; }
.bottombar a { flex:1; text-align:center; text-decoration:none; color:var(--muted); font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:12px 0; }
.bottombar a.active { color:#fff; background:var(--red); border-radius:6px; }
.bottombar a:active { color:var(--red); }
/* ── 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; }
/* ── 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; }
/* ── 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; }
.cards-grid-7 { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; margin-bottom:24px; }
@media(max-width:700px){ .cards-grid-8,.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); }
/* ── 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-column layout ── */
.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); }
.bar { background:var(--green); }
/* ── PDA-G palette ── */
.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); }
.pdag-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pdag-letter { font-size:40px; font-weight:800; font-family:var(--sans); line-height:1; margin-bottom:4px; }
.pdag-p .pdag-letter { color:var(--amber); }
.pdag-d .pdag-letter { color:var(--blue); }
.pdag-a .pdag-letter { color:var(--green); }
.pdag-g .pdag-letter { color:var(--purple); }
/* ── 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 { display:inline-block; padding:10px 20px; background:var(--bg3); border:1px solid var(--border2); color:var(--text); font-family:var(--mono); font-size:11px; border-radius:var(--radius); text-decoration:none; cursor:pointer; }
.btn:active, .btn:hover { background:var(--bg4); }
.page-actions .btn { font-size:10px; padding:5px 12px; white-space:nowrap; }
.page-actions .btn-green { background:var(--green-dim); color:var(--green); border-color:var(--green); }
.pill { background:var(--green-dim); color:var(--green); }
/* Bootstrap overrides for dark theme */
.btn-primary { background-color:var(--green); border-color:var(--green); color:#fff; }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow:0 0 0 0.1rem rgba(255,255,255,.1), 0 0 0 0.25rem rgba(76,175,80,.4); }
/* ── Cards ── */
.card { background:var(--bg2); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:16px; margin-bottom:12px; box-shadow:0 1px 4px rgba(0,0,0,.18); }
/* ── Forms ── */
input[type=text], input[type=password], input[type=email], input[type=number], textarea, select {
width:100%; box-sizing:border-box; padding:10px 12px; font-size:14px; font-family:var(--sans);
background:var(--bg3); color:var(--text); border:1px solid var(--border2); border-radius:var(--radius); outline:none; transition:border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus { border-color:var(--cyan); box-shadow:0 0 0 2px rgba(6,182,212,.15); }
textarea { min-height:60px; resize:vertical; }
select { cursor:pointer; appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 12px center; padding-right:34px;
}
.form-row { margin-bottom:14px; }
.form-row label { display:block; font-family:var(--mono); font-size:11px; font-weight:600; color:var(--muted2); letter-spacing:.06em; text-transform:uppercase; margin-bottom:5px; }
.edit-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.btn-save { background:var(--green)!important; color:#fff!important; border-color:var(--green)!important; font-weight:700; padding:10px 28px!important; font-size:13px!important; }
.btn-save:hover { opacity:.9; }
.btn-cancel { background:var(--bg3)!important; color:var(--muted2)!important; border:1px solid var(--border2)!important; padding:10px 22px!important; font-size:13px!important; }
.btn-cancel:hover { background:var(--bg4)!important; color:var(--text)!important; }
/* ── Status messages ── */
.err { color:var(--red); font-weight:600; }
.ok { color:var(--green); font-weight:600; }
.err-text { color:var(--red)!important; font-size:10px; }
/* ── Voter cards ── */
.voter-card { background:linear-gradient(135deg,#0e180e,#152215); border:1px solid rgba(76,175,80,0.10); border-radius:10px; margin-bottom:8px; overflow:hidden; border-left:3px solid var(--green); box-shadow:0 2px 12px rgba(0,0,0,.35); transition:transform .15s,box-shadow .15s; }
.voter-card:hover { transform:translateY(-1px); box-shadow:0 4px 20px rgba(0,0,0,.45); }
.voter-card a { color:var(--cyan); text-decoration:none; }
.voter-card a:active { text-decoration:underline; }
.voter-card.vc-m { border-left-color:var(--blue); box-shadow:0 2px 12px rgba(0,0,0,.35),inset 0 0 0 1px rgba(96,165,250,.06); }
.voter-card.vc-f { border-left-color:#ec4899; box-shadow:0 2px 12px rgba(0,0,0,.35),inset 0 0 0 1px rgba(236,72,153,.06); }
.vc-layout { display:flex; align-items:stretch; }
.vc-srno { display:flex; align-items:center; justify-content:center; min-width:46px; padding:0 4px; font-family:var(--mono); font-size:15px; font-weight:800; color:var(--muted2); background:rgba(255,255,255,.03); border-right:1px solid rgba(148,163,184,0.08); flex-shrink:0; }
.vc-content { flex:1; min-width:0; padding:12px 14px; }
.vc-row1 { display:flex; align-items:flex-start; gap:8px; margin-bottom:4px; }
.vc-name { flex:1; min-width:0; font-size:15px; font-weight:700; color:#fff; line-height:1.35; }
.vc-en { font-size:12px; font-weight:400; color:var(--muted2); }
.vc-edit { flex-shrink:0; padding:4px 12px; border-radius:6px; background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.25); color:var(--red); text-decoration:none; font-family:var(--mono); font-size:10px; font-weight:700; white-space:nowrap; transition:all .15s; letter-spacing:.03em; }
.vc-edit:hover { background:rgba(239,68,68,.20); border-color:var(--red); box-shadow:0 0 8px rgba(239,68,68,.2); }
.vc-row2 { display:flex; align-items:center; gap:8px; margin-bottom:5px; font-size:12px; }
.vc-sur { color:var(--muted2); font-weight:500; }
.vc-vid { font-family:var(--mono); font-size:10px; color:var(--green); letter-spacing:.03em; padding:2px 7px; background:rgba(76,175,80,.10); border:1px solid rgba(76,175,80,.15); border-radius:4px; font-weight:600; }
.vc-row3 { display:flex; flex-wrap:wrap; gap:0; font-family:var(--mono); font-size:11px; color:var(--muted2); line-height:1.3; }
.vc-row3 span { white-space:nowrap; }
.vc-row3 span::after { content:"\00b7"; margin:0 5px; color:var(--muted); opacity:.4; }
.vc-row3 span:last-child::after { display:none; }
.vc-row3 .vc-ph { color:var(--green); }
.vc-row3 .vc-pty { color:var(--blue); font-weight:700; }
/* ── Tile grid ── */
.tile-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:16px; }
.tile { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center; text-decoration:none; color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.25); transition:transform .15s,box-shadow .15s,border-color .15s; }
.tile:active { transform:scale(0.97); }
.tile:hover { box-shadow:0 4px 20px rgba(0,0,0,.35); border-color:var(--border2); }
.tile img { width:80px; height:80px; object-fit:contain; }
.tile h5 { margin:8px 0 0; font-size:14px; font-weight:600; color:var(--muted2); }
/* ── Picker bar ── */
.pdc-picker { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; width:100%; margin:14px 0 22px; }
@media(max-width:600px){ .pdc-picker{grid-template-columns:1fr} }
.pdc-picker-lbl { font-family:var(--mono); font-size:11px; color:var(--muted2); text-transform:uppercase; letter-spacing:.14em; font-weight:700; }
.pdc-picker-sel {
appearance:none; -webkit-appearance:none; cursor:pointer; width:100%; max-width:420px;
background-color:var(--bg3);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 12px center;
color:var(--text); border:1px solid var(--border2); border-radius:8px;
padding:9px 34px 9px 12px; font-family:var(--mono); font-size:13px; font-weight:500;
}
.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); }
/* ── Geo bar ── */
.geo-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:14px 0 22px; }
.geo-bar select { appearance:none; -webkit-appearance:none; background:var(--bg3); color:var(--text); border:1px solid var(--border2); border-radius:8px; padding:9px 12px; font-family:var(--mono); font-size:13px; font-weight:500; }
/* ── Booth Picker ── */
.bp-bar { display:flex; align-items:center; gap:10px; padding:10px 14px; margin:0 0 12px; background:linear-gradient(135deg,#0e180e,#152215); border:1px solid rgba(76,175,80,0.10); border-radius:var(--radius); flex-wrap:wrap; }
.bp-lbl { font-family:var(--mono); font-size:10px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
.bp-sel { flex:1; min-width:140px; padding:8px 30px 8px 10px; font-family:var(--mono); font-size:12px; background:var(--bg3); color:var(--text); border:1px solid var(--border2); border-radius:var(--radius); outline:none; appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 10px center; }
.bp-sel:focus { border-color:var(--cyan); box-shadow:0 0 0 2px rgba(6,182,212,.15); }
/* ── Search box ── */
.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); }
/* ── Filter bar ── */
.filter-header { font-family:var(--mono); font-size:15px; font-weight:700; color:var(--text); padding:14px 0 4px; letter-spacing:.02em; }
.filter-bar { display:flex; align-items:center; gap:10px; padding:10px 14px; margin:6px 0 10px; background:linear-gradient(135deg,#0e180e,#152215); border:1px solid rgba(76,175,80,0.10); border-radius:var(--radius); flex-wrap:wrap; box-shadow:0 2px 10px rgba(0,0,0,.3); }
.filter-bar label { font-family:var(--mono); font-size:10px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
.filter-bar select, .filter-bar input[type=text] { flex:1; min-width:120px; padding:9px 12px; font-family:var(--mono); font-size:13px; background:var(--bg3); color:var(--text); border:1px solid var(--border2); border-radius:var(--radius); outline:none; transition:border-color .15s,box-shadow .15s; appearance:none; -webkit-appearance:none; }
.filter-bar select { background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 10px center; padding-right:30px; cursor:pointer; }
.filter-bar select:focus, .filter-bar input[type=text]:focus { border-color:var(--cyan); box-shadow:0 0 0 2px rgba(6,182,212,.15); }
.filter-bar .btn { background:var(--green); color:#fff; border:none; padding:9px 18px; font-family:var(--mono); font-size:11px; font-weight:700; border-radius:var(--radius); cursor:pointer; letter-spacing:.04em; text-transform:uppercase; transition:opacity .15s; }
.filter-bar .btn:hover { opacity:.85; }
.filter-results-count { font-family:var(--mono); font-size:12px; color:var(--muted2); padding:4px 0 8px; letter-spacing:.02em; }
/* ── Letter picker ── */
.letter-picker { display:flex; flex-wrap:wrap; gap:4px; padding:8px 16px; }
.letter-picker a { padding:4px 8px; background:var(--bg3); color:var(--muted2); border:1px solid var(--border); text-decoration:none; border-radius:4px; font-size:12px; }
.letter-picker a.active { background:var(--red); color:#fff; border-color:var(--red); font-weight:700; }
/* ── Surname Cloud ── */
.surname-cloud { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline; padding:14px; margin:8px 0 12px; background:linear-gradient(135deg,#0e180e,#152215); border:1px solid rgba(76,175,80,0.10); border-radius:var(--radius); line-height:1.6; box-shadow:0 2px 10px rgba(0,0,0,.3); }
.sc-tag { text-decoration:none; color:var(--muted2); font-family:var(--sans); transition:color .15s; white-space:nowrap; }
.sc-tag:hover { color:var(--accent); }
.sc-tag.sc-active { color:var(--accent); font-weight:700; }
.sc-tag .sc-cnt { font-size:inherit; color:var(--muted); font-family:var(--mono); font-weight:400; }
/* ── Pager ── */
.pager { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; padding:16px 0; margin:12px 0; }
.pager-btn { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; border-radius:var(--radius); font-size:13px; font-weight:600; color:var(--text); background:var(--bg2); border:1px solid var(--border); text-decoration:none; cursor:pointer; transition:background .15s,border-color .15s; }
.pager-btn:hover { background:var(--bg3); border-color:var(--border2); }
.pager-btn.active { background:var(--red); color:#fff; border-color:var(--red); }
.pager-btn.disabled { opacity:.35; cursor:default; pointer-events:none; }
.pager-dots { display:inline-flex; align-items:center; padding:0 4px; color:var(--muted); }
/* ── Back link ── */
.back-link { display:inline-block; margin-top:16px; font-family:var(--mono); font-size:12px; color:var(--cyan); text-decoration:none; padding:6px 0; }
.back-link:hover { text-decoration:underline; }
/* ── Text helpers ── */
.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; }
/* ── Stat grid ── */
.stat-grid > div { color:var(--muted2); }
/* ── Login page ── */
.login-body { background:linear-gradient(135deg, #0d1117 0%, #1a1f2e 50%, #0d1117 100%) fixed; min-height:100vh; color:#fff; }
.login-body .main { padding:24px 18px; max-width:460px; margin:0 auto; padding-top:5vh; }
.login-body img { box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); }
.login-body .card { background:rgba(22,27,34,.85); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:28px 24px; box-shadow:0 20px 50px rgba(0,0,0,.4); color:#fff; }
.login-body .card h2 { font-family:var(--mono); font-size:32px; font-weight:800; margin:0 0 6px; letter-spacing:.04em; text-transform:uppercase; background:linear-gradient(90deg, #22e3c3, #a855f7); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.login-body .card .subtitle { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#94a3b8; margin-bottom:24px; font-weight:600; }
.login-body .form-row { margin-bottom:16px; }
.login-body .form-row label { color:#94a3b8; font-size:11px; letter-spacing:.14em; }
.login-body .form-row input[type="text"], .login-body .form-row input[type="password"] { padding:12px 14px; background:rgba(13,17,23,.6); border:1px solid rgba(255,255,255,.12); border-radius:10px; color:#fff; font-size:15px; }
.login-body .form-row input[type="text"]:focus, .login-body .form-row input[type="password"]:focus { border-color:#22e3c3; box-shadow:0 0 0 3px rgba(34,227,195,.15); background:rgba(13,17,23,.85); }
.login-body .btn { width:100%; padding:13px 20px; background:linear-gradient(135deg, #22e3c3, #06b6d4); color:#0d1117; border:none; border-radius:10px; font-weight:800; font-size:15px; letter-spacing:.08em; text-transform:uppercase; text-align:center; box-shadow:0 6px 20px rgba(34,227,195,.25); }
.login-body .btn:hover { transform:translateY(-1px); box-shadow:0 10px 28px rgba(34,227,195,.4); }
.login-body .err { display:block; margin-top:14px; padding:10px 14px; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3); border-radius:8px; color:#fca5a5; font-size:13px; }
@media (max-width: 480px) { .login-body .card h2 { font-size:26px; } .login-body .main { padding-top:2vh; } }
/* Assembly layer theme */
body.layer-assembly { --layer-primary: #ef4444; --layer-secondary: #f59e0b; }
.login-body.layer-assembly { background:linear-gradient(135deg, #1a0808 0%, #2a1212 50%, #0d1117 100%) fixed; }
.login-body.layer-assembly .card h2 { background:linear-gradient(90deg, #ef4444, #f59e0b); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.login-body.layer-assembly .form-row input[type="text"]:focus, .login-body.layer-assembly .form-row input[type="password"]:focus { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.18); }
.login-body.layer-assembly .btn { background:linear-gradient(135deg, #ef4444, #f59e0b); color:#0d1117; box-shadow:0 6px 20px rgba(239,68,68,.28); }
.login-body.layer-assembly .btn:hover { box-shadow:0 10px 28px rgba(239,68,68,.45); }
/* ── Telerik tweak (legacy) ── */
.RadInput, .RadComboBox, .RadPicker { width:100% !important; }
/* Voter Card */
.voter-card{background:var(--bg2,#1a1f2e);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px;margin-bottom:8px}
.voter-card.vc-m{border-left:3px solid #4a9eff}
.voter-card.vc-f{border-left:3px solid #ff6b9d}
.vc-head{display:flex;justify-content:space-between;font-size:12px;color:#94a3b8;margin-bottom:4px}
.vc-name{font-size:15px;font-weight:700;color:#e2e8f0}
.vc-hname{font-size:13px;color:#94a3b8;margin-top:2px}
.vc-detail{font-size:12px;color:#64748b;margin-top:6px;display:flex;gap:12px}
.vc-tag{display:inline-block;font-size:11px;background:rgba(255,255,255,.06);border-radius:4px;padding:2px 8px;margin-top:6px;color:#94a3b8}
/* Pager */
.pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px}
.pager button{background:var(--bg2,#1a1f2e);border:1px solid rgba(255,255,255,.1);color:#e2e8f0;padding:6px 16px;border-radius:6px;cursor:pointer}
.pager button:disabled{opacity:.4;cursor:default}
.pager .pager-info{font-size:13px;color:#94a3b8}
/* Booth Picker */
.booth-picker select{width:100%;padding:8px 12px;background:var(--bg2,#1a1f2e);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#e2e8f0;font-size:14px}