:root{
  --bg:#f6f5f1; --surface:#fff; --surface-2:#f1f0eb; --border:#e4e2da; --text:#1a1f1d; --muted:#5d6763; --faint:#8d9692;
  --brand:#0f766e; --brand-2:#115e59; --brand-ink:#fff; --brand-soft:#e1f2ef; --mark:#fde68a; --mark-ink:#3b2f00;
  --male:#2459d6; --male-soft:#e7eefc; --female:#b0259c; --female-soft:#fbe9f8; --danger:#b42318; --danger-soft:#fdecea;
  --amber:#b45309; --amber-soft:#fef3c7; --violet:#6d28d9; --violet-soft:#ede9fe;
  --shadow:0 1px 2px rgba(20,24,22,.05),0 6px 20px rgba(20,24,22,.06);
  --font:"Noto Sans Devanagari","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --en:"Inter","Noto Sans Devanagari",system-ui,sans-serif;
  --bar:64px; --radius:16px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --bg:#0e1312; --surface:#161d1b; --surface-2:#1d2623; --border:#28322f; --text:#e9efed; --muted:#9eaaa6; --faint:#6f7b77;
  --brand:#2dd4bf; --brand-2:#14b8a6; --brand-ink:#04201c; --brand-soft:#12332f; --mark:#854d0e; --mark-ink:#fff7d6;
  --male:#86a9ff; --male-soft:#1b2643; --female:#ef8de1; --female-soft:#3a1835; --danger:#ff8a80; --danger-soft:#3a1714;
  --amber:#fbbf24; --amber-soft:#3a2a0c; --violet:#c4b5fd; --violet-soft:#2a2145;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0e1312; --surface:#161d1b; --surface-2:#1d2623; --border:#28322f; --text:#e9efed; --muted:#9eaaa6; --faint:#6f7b77;
  --brand:#2dd4bf; --brand-2:#14b8a6; --brand-ink:#04201c; --brand-soft:#12332f; --mark:#854d0e; --mark-ink:#fff7d6;
  --male:#86a9ff; --male-soft:#1b2643; --female:#ef8de1; --female-soft:#3a1835; --danger:#ff8a80; --danger-soft:#3a1714;
  --amber:#fbbf24; --amber-soft:#3a2a0c; --violet:#c4b5fd; --violet-soft:#2a2145;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25); color-scheme:dark;
}
/* sunlight: maximum contrast for reading outdoors */
:root[data-theme="sun"]{
  --bg:#fff; --surface:#fff; --surface-2:#fff; --border:#000; --text:#000; --muted:#111; --faint:#333;
  --brand:#004d45; --brand-2:#003a34; --brand-ink:#fff; --brand-soft:#fff; --mark:#ffe000; --mark-ink:#000;
  --male:#00249c; --male-soft:#fff; --female:#7a0068; --female-soft:#fff; --danger:#a00000; --danger-soft:#fff;
  --amber:#6b3100; --amber-soft:#fff; --violet:#3b0a91; --violet-soft:#fff; --shadow:none;
}
:root[data-theme="sun"] .row,:root[data-theme="sun"] .card,:root[data-theme="sun"] .tile{border-width:2px}
:root[data-theme="sun"] body{font-weight:500}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 var(--font);-webkit-font-smoothing:antialiased;min-height:100dvh}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.en{font-family:var(--en)}
.hidden{display:none !important}
.shell{max-width:760px;margin:0 auto;padding:0 16px calc(var(--bar) + 96px + env(safe-area-inset-bottom))}
.shell.nobar{padding-bottom:40px}

/* ---------- app bar ---------- */
.appbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.appbar .in{max-width:760px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:10px;min-height:60px}
.appbar h1{margin:0;font-size:19px;line-height:1.2;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appbar .sub{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar .grow{flex:1;min-width:0}
.icon-btn{flex:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;color:var(--text)}
.icon-btn:hover{background:var(--surface-2)}
.avatar{flex:none;width:40px;height:40px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-weight:700;border:0;font-size:16px}

/* ---------- tab bar ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}
.tabbar .in{max-width:760px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);height:var(--bar)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--faint);font-size:12.5px;font-weight:600;position:relative}
.tabbar a[aria-current="page"]{color:var(--brand)}
.tabbar a[aria-current="page"]::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--brand)}

/* ---------- dock search (thumb reach, above tab bar) ---------- */
.dock{position:fixed;left:0;right:0;bottom:calc(var(--bar) + env(safe-area-inset-bottom));z-index:25;background:linear-gradient(to top,var(--bg) 70%,transparent);padding:12px 0 10px}
.dock .in{max-width:760px;margin:0 auto;padding:0 16px}
.search{position:relative}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.search input{width:100%;height:54px;border-radius:16px;border:2px solid var(--border);background:var(--surface);padding:0 48px 0 46px;font-size:17px;outline:none;box-shadow:var(--shadow)}
.search input:focus{border-color:var(--brand)}
.search input::placeholder{color:var(--faint)}
.search input::-webkit-search-cancel-button{display:none}
.search .x{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:0;background:var(--surface-2);color:var(--muted);display:grid;place-items:center}

/* ---------- home ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:16px 0 4px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px 12px}
.stat b{display:block;font:800 22px/1.1 var(--en);font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--muted)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:12px 16px;margin:0 -16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.chip b{font:700 13px var(--en);color:var(--muted)}
.chip:hover{border-color:var(--brand)}
.chip.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.chip.on b{color:inherit}
.filters{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:2px 16px 8px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.sel{flex:none;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface);padding:0 30px 0 12px;font-size:14px;appearance:none;max-width:230px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238d9692' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.sel.on{border-color:var(--brand);background-color:var(--brand-soft);color:var(--brand);font-weight:600}
.meta{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 2px 10px;font-size:14px;color:var(--muted)}
.meta b{color:var(--text);font-family:var(--en)}
.hint{color:var(--faint);font-size:13px}
.note{background:var(--brand-soft);color:var(--brand);border-radius:12px;padding:10px 12px;font-size:14px;margin-bottom:10px}

/* ---------- voter rows ---------- */
.rows{display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px 12px;text-decoration:none;color:inherit;min-height:68px}
.row:hover{border-color:var(--brand)}
.num{flex:none;width:56px;text-align:center;border-radius:12px;padding:6px 0;background:var(--surface-2)}
.num small{display:block;font-size:10.5px;color:var(--faint);font-weight:600;letter-spacing:.02em}
.num b{display:block;font:800 19px/1.1 var(--en);font-variant-numeric:tabular-nums}
.row.M .num{background:var(--male-soft)} .row.M .num b{color:var(--male)}
.row.F .num{background:var(--female-soft)} .row.F .num b{color:var(--female)}
.who{flex:1;min-width:0}
.who .n{font-size:17px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .n .alt{font:500 13.5px var(--en);color:var(--muted);margin-left:6px}
.who .d{font-size:13.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row.del{opacity:.62}
.row.del .n>span:first-child{text-decoration:line-through}
.tag{display:inline-block;font:600 11.5px var(--en);border-radius:6px;padding:1px 6px;margin-left:4px;vertical-align:1px}
.tag.del{background:var(--danger-soft);color:var(--danger)}
.tag.new{background:var(--brand-soft);color:var(--brand)}
.tag.w{background:var(--surface-2);color:var(--muted)}
.chev{flex:none;color:var(--faint)}
mark{background:var(--mark);color:var(--mark-ink);border-radius:3px;padding:0 1px}
.empty{text-align:center;padding:48px 16px;color:var(--muted)}
.empty b{display:block;color:var(--text);font-size:18px;margin-bottom:4px}
.more{display:block;margin:12px auto;height:40px}

/* ---------- detail ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-top:12px;box-shadow:var(--shadow)}
.card h2{margin:0 0 10px;font-size:15px;color:var(--muted);font-weight:600;display:flex;justify-content:space-between;align-items:center}
.big3{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;gap:6px;padding-bottom:14px;border-bottom:1px dashed var(--border);margin-bottom:14px}
.big3 small{display:block;font-size:12.5px;color:var(--muted)}
.big3 b{display:block;font:800 30px/1.15 var(--en);font-variant-numeric:tabular-nums}
.big3 a{text-decoration:none;border-radius:12px;padding:4px 0}
.big3 a:hover{background:var(--brand-soft)}
.big3 a b{color:var(--brand)}
.card h2.vname{display:block;font-size:26px;font-weight:800;line-height:1.25;margin:0;color:var(--text)}
main.searching .stats,main.searching .chips{display:none}
.vname-en{font:600 17px var(--en);color:var(--muted);margin-top:2px}
.kv{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border-radius:10px;padding:6px 10px;font-size:14px;color:var(--muted);border:0;text-decoration:none}
.pill b{color:var(--text);font-family:var(--en)}
button.pill:hover,a.pill:hover{background:var(--brand-soft);color:var(--brand)}
.pill.M{background:var(--male-soft);color:var(--male)} .pill.F{background:var(--female-soft);color:var(--female)}
.rel{margin-top:10px;font-size:15.5px;color:var(--muted)}
.rel a{color:var(--text);font-weight:600;text-decoration:none;border-bottom:1.5px dashed var(--faint)}
.banner{border-radius:12px;padding:10px 12px;font-size:14px;font-weight:600;margin-top:12px}
.banner.del{background:var(--danger-soft);color:var(--danger)}
.banner.new{background:var(--brand-soft);color:var(--brand)}
.booth{display:flex;gap:12px;align-items:flex-start;text-decoration:none}
.booth .no{flex:none;width:52px;height:52px;border-radius:14px;background:var(--violet-soft);color:var(--violet);display:grid;place-items:center;font:800 20px var(--en)}
.booth .t{font-weight:600;line-height:1.35}
.booth .s{font-size:13px;color:var(--muted);margin-top:2px}
.actions{position:fixed;left:0;right:0;bottom:calc(var(--bar) + env(safe-area-inset-bottom));z-index:25;background:linear-gradient(to top,var(--bg) 70%,transparent);padding:12px 0 10px}
.actions .in{max-width:760px;margin:0 auto;padding:0 16px;display:flex;gap:8px}
.btn{height:50px;border-radius:14px;border:0;padding:0 18px;font-weight:700;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn.primary{background:var(--brand);color:var(--brand-ink);flex:1}
.btn.primary:hover{background:var(--brand-2)}
.btn.ghost{background:var(--surface);border:1.5px solid var(--border);color:var(--text)}
.btn.wa{background:#1f8f4e;color:#fff;flex:1}
.btn.danger{background:var(--danger-soft);color:var(--danger);width:100%}
.btn:disabled{opacity:.55;cursor:wait}
.btn.block{width:100%}

/* ---------- lists ---------- */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.tile{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;text-decoration:none;min-height:116px;box-shadow:var(--shadow)}
.tile:hover{border-color:var(--brand)}
.tile .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center}
.tile b{font:800 26px/1 var(--en);margin-top:auto}
.tile span{font-weight:700;font-size:15px;line-height:1.25}
.tile small{color:var(--muted);font-size:12.5px;font-family:var(--en)}
.c-brand{background:var(--brand-soft);color:var(--brand)} .c-amber{background:var(--amber-soft);color:var(--amber)}
.c-violet{background:var(--violet-soft);color:var(--violet)} .c-male{background:var(--male-soft);color:var(--male)}
.c-female{background:var(--female-soft);color:var(--female)} .c-danger{background:var(--danger-soft);color:var(--danger)}
.sec{margin:26px 2px 8px;font-size:15px;font-weight:700;color:var(--muted);display:flex;justify-content:space-between}
.lrow{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;text-decoration:none;margin-bottom:8px}
.lrow:hover{border-color:var(--brand)}
.lrow .grow{flex:1;min-width:0}
.lrow .t{font-weight:600}
.lrow .s{font-size:13px;color:var(--muted);font-family:var(--en)}
.lrow b{font:700 16px var(--en);color:var(--muted)}
.house{display:block;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;text-decoration:none;margin-bottom:8px}
.house:hover{border-color:var(--brand)}
.house .top{display:flex;justify-content:space-between;align-items:center;font-weight:700}
.house .top b{font:800 18px var(--en);color:var(--amber)}
.house .names{font-size:14px;color:var(--muted);margin-top:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ---------- forms: auth, setup, account ---------- */
.auth{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:24px 16px 40px;max-width:440px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.logo{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#14b8a6,#0f766e);display:grid;place-items:center;box-shadow:0 8px 24px rgba(15,118,110,.35)}
.brand h1{margin:0;font-size:26px;line-height:1.1;font-weight:800}
.brand p{margin:3px 0 0;color:var(--muted);font-size:14px}
.lead{font-size:15px;color:var(--muted);margin:0 0 18px}
.seg{display:flex;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:none;height:40px;border-radius:9px;font-weight:600;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}
label.f{display:block;margin-top:14px;font-size:14px;font-weight:600;color:var(--muted)}
.inp{display:flex;align-items:center;margin-top:6px;height:54px;border:2px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden}
.inp:focus-within{border-color:var(--brand)}
.inp .pre{padding:0 4px 0 14px;font:600 17px var(--en);color:var(--muted)}
.inp input,.inp select{flex:1;min-width:0;height:100%;border:0;background:none;padding:0 14px;font-size:17px;outline:none;appearance:none}
.inp button{border:0;background:none;padding:0 14px;color:var(--brand);font-weight:600;font-size:14px;height:100%}
.err{background:var(--danger-soft);color:var(--danger);border-radius:12px;padding:10px 12px;font-size:14px;margin-top:14px}
.ok{background:var(--brand-soft);color:var(--brand);border-radius:12px;padding:10px 12px;font-size:14px;margin-top:14px}
.small{font-size:13px;color:var(--faint);text-align:center;margin-top:18px}
.lang{display:flex;justify-content:flex-end;margin-bottom:8px}
.lang .seg{width:auto}
.lang .seg button{flex:none;padding:0 14px;height:32px;font-size:14px}
.steps{display:flex;gap:6px;margin:4px 0 18px}
.steps i{flex:1;height:5px;border-radius:5px;background:var(--border)}
.steps i.on{background:var(--brand)}
.vlist{margin-top:8px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}
.vlist button{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;border:0;border-top:1px solid var(--border);background:none;padding:13px 14px}
.vlist button:first-child{border-top:0}
.vlist button:hover,.vlist button:focus{background:var(--brand-soft);outline:none}
.vlist button b{font-family:var(--en)}
.vlist button span{color:var(--muted);font-size:13px;text-align:right;font-family:var(--en)}
.vlist .none{padding:13px 14px;color:var(--muted);font-size:14px}
.link{background:none;border:0;color:var(--brand);font-weight:600;padding:0;font-size:14px;text-decoration:underline}
.progress{height:10px;border-radius:10px;background:var(--surface-2);overflow:hidden;margin:18px 0 10px;border:1px solid var(--border)}
.progress i{display:block;height:100%;width:5%;background:linear-gradient(90deg,#14b8a6,#0f766e);transition:width .4s}
.log{font-size:14px;color:var(--muted);min-height:22px}
.spin{width:44px;height:44px;border-radius:50%;border:4px solid var(--brand-soft);border-top-color:var(--brand);animation:spin 1s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.prof{display:flex;align-items:center;gap:14px}
.prof .avatar{width:56px;height:56px;font-size:22px}
.prof b{font-size:19px;display:block}
.prof span{color:var(--muted);font-family:var(--en)}
.setrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--border)}
.setrow:first-of-type{border-top:0}
.setrow .t{font-weight:600}
.setrow .s{font-size:13px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(var(--bar) + 90px);transform:translate(-50%,16px);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:14px;opacity:0;transition:.2s;pointer-events:none;z-index:50;max-width:90vw}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:420px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .big3 b{font-size:26px}
  .card h2.vname{font-size:23px}
}
