/* Theme: party flag - sky blue | white | green */
:root{--bg:#f1f7f3;--card:#fff;--tx:#14261c;--mu:#56695e;--bd:#d6e4da;--a:#0c8a3c;--a2:#076b2d;--dk:#064421;--cr:#fff;--blue:#1e8fe1;--blue2:#1572b8;--warn:#b45309;
  --flag:linear-gradient(90deg,var(--blue) 0 18%,#fff 18% 26%,var(--a) 26%)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font-family:"Open Sans","Noto Nastaliq Urdu","Segoe UI",system-ui,sans-serif;font-size:14px}
.urdu{font-family:"Jameel Noori Nastaleeq","Noto Nastaliq Urdu","Segoe UI",serif;direction:rtl;font-size:16px}
.top{background:var(--cr);color:var(--a);display:flex;gap:24px;align-items:center;padding:0 18px;padding-inline-start:112px;height:64px;position:relative;z-index:5;box-shadow:0 2px 8px rgba(6,68,33,.12)}
.top::after{content:"";position:absolute;inset-inline:0;bottom:-6px;height:6px;background:var(--flag);box-shadow:0 1px 0 rgba(6,68,33,.15)}
.top .logo{position:absolute;inset-inline-start:18px;top:0;width:78px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.top .brand{font-family:Montserrat,"Noto Nastaliq Urdu","Segoe UI",sans-serif;font-weight:800;font-size:17px;letter-spacing:.3px;text-transform:uppercase;color:var(--a);line-height:1.15}
.top .brand small{display:block;font-weight:600;font-size:11px;letter-spacing:1.5px;color:var(--mu)}
.top nav{display:flex;gap:4px;margin-inline-start:12px}
.top nav a{display:inline-flex;align-items:center;gap:7px;color:var(--dk);text-decoration:none;font-weight:600;padding:8px 12px;border-radius:6px;white-space:nowrap}.top nav a:hover{background:#e3f1e7;color:var(--a)}
.top nav a .bi{font-size:15px;opacity:.85}
/* Desktop header: brand + account on the white row, the links on a full-width green strip below */
@media (min-width:641px){
  .top{height:auto;flex-wrap:wrap;row-gap:0}
  .top .brand,.top .who{min-height:62px;display:flex;flex-direction:column;justify-content:center}
  .top .who{flex-direction:row}
  .top nav{order:3;flex-basis:100%;gap:2px;margin:0;margin-inline:-112px -18px;padding-inline:112px 18px;height:46px;align-items:stretch;
    background:linear-gradient(180deg,var(--a2),var(--dk));overflow-x:auto;scrollbar-width:none}
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{color:#d5ecdc;border-radius:0;padding:0 14px;font-size:13.5px;box-shadow:inset 0 -3px 0 transparent;transition:background .15s,color .15s,box-shadow .15s}
  .top nav a:hover{background:rgba(255,255,255,.08);color:#fff}
  .top nav a.on{background:rgba(255,255,255,.13);color:#fff;box-shadow:inset 0 -3px 0 var(--blue)}
  .top nav a.on .bi{opacity:1}
  .top .logo{z-index:1}
}
@media (min-width:641px) and (max-width:1360px){
  .top nav a{padding:0 10px;gap:5px;font-size:13px}
}
.top .ubox{display:flex;align-items:center;gap:9px;padding-inline-start:12px;border-inline-start:1px solid var(--bd);line-height:1.25}
.top .ubox b{display:block;color:var(--dk);font-size:13px}
.top .ubox small{display:block;color:var(--mu);font-size:11.5px}
.top .avatar{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--a);color:#fff;font-family:Montserrat,sans-serif;font-weight:700;font-size:14px;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--blue)}
main{padding:24px 16px 16px;max-width:1400px;margin:auto}
.top + main{padding-top:34px}
h1{font-family:Montserrat,"Noto Nastaliq Urdu","Segoe UI",sans-serif;font-size:22px;font-weight:800;color:var(--dk);margin:0 0 14px}
h2{font-family:Montserrat,"Noto Nastaliq Urdu","Segoe UI",sans-serif;font-size:14px;font-weight:700;color:var(--a);margin:0 0 8px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:14px;margin-bottom:12px;box-shadow:0 1px 2px rgba(11,37,32,.05)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.kpi{background:var(--card);border:1px solid var(--bd);border-inline-start:4px solid var(--a);border-radius:10px;padding:10px 12px}.kpi b{display:block;font-family:Montserrat,"Noto Nastaliq Urdu","Segoe UI",sans-serif;font-size:22px;color:var(--dk)}.kpi span{color:var(--mu);font-size:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px}.cv{height:190px;position:relative}
form.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
label{display:flex;flex-direction:column;font-size:12px;color:var(--mu);gap:3px;font-weight:600}
.top .who{margin-inline-start:auto;display:flex;gap:10px;align-items:center;color:var(--mu)}
.top .who button{background:transparent;border:1px solid var(--a);color:var(--a);padding:5px 12px}.top .who button:hover{background:var(--a);color:#fff}
.err{color:var(--warn);margin:0;font-weight:600}
select,input[type=text],input[type=password]{padding:8px 10px;border:1px solid var(--bd);border-radius:6px;font-size:14px;min-width:120px;font-family:inherit}
input[type=tel],input[type=number],input[type=search],input[type=date],input[type=datetime-local],input[type=email],input[type=url],textarea{padding:8px 10px;border:1px solid var(--bd);border-radius:6px;font-size:14px;font-family:inherit}
.menubtn{display:none}
select:focus,input:focus{outline:2px solid var(--a);outline-offset:-1px}
button,.btn{background:var(--a);color:#fff;border:0;border-radius:6px;padding:8px 16px;cursor:pointer;text-decoration:none;font-size:14px;font-weight:600;font-family:inherit;display:inline-block}
button:hover,.btn:hover{background:var(--a2)}
.btn.sec,button.sec{background:#e4f0fa;color:var(--blue2)}.btn.sec:hover,button.sec:hover{background:#cfe4f6}
.tw{overflow:auto;max-height:560px}table{border-collapse:collapse;width:100%}
th,td{padding:6px 9px;border-bottom:1px solid var(--bd);text-align:start;white-space:nowrap}
th{background:var(--dk);color:#fff;font-weight:600;position:sticky;top:0}td.n,th.n{text-align:end}
tbody tr:hover{background:#eaf5ee}
tfoot td{font-weight:700;background:#e3f1e7}
.pager{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}.mu{color:var(--mu)}
label.chk{flex-direction:row;align-items:center;gap:6px;color:var(--tx);padding-bottom:9px;cursor:pointer}
label.chk input{width:16px;height:16px;accent-color:var(--a)}
.agerange{display:flex;align-items:center;gap:5px;color:var(--tx)}
.agerange input{width:72px;padding:8px 8px;border:1px solid var(--bd);border-radius:6px;font-size:14px;font-family:inherit}

/* Sticky filter summary bar */
.sumbar{position:sticky;top:0;z-index:4;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;background:var(--dk);color:#e6f4ea;border-radius:10px;padding:9px 12px;margin-bottom:12px;box-shadow:0 6px 16px rgba(6,68,33,.2);border-inline-start:6px solid var(--blue)}
.sumbar .chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600}
.chip.alt{background:var(--blue);border-color:var(--blue)}
.sumbar .nums{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:#b3d6be}.sumbar .nums b{color:#fff;font-family:Montserrat,"Noto Nastaliq Urdu","Segoe UI",sans-serif;font-size:15px}
.sumbar .acts{margin-inline-start:auto;display:flex;gap:6px;align-items:center}
.sumbar .btn{padding:4px 12px;font-size:12px;line-height:1.5}
.btn.xl{background:#1d6f42}.btn.xl:hover{background:#155632}
.btn.pdf{background:var(--blue)}.btn.pdf:hover{background:var(--blue2)}
.cardhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
table.vlist td.addr{white-space:normal;min-width:260px;font-size:14px}
tr.fam td{background:#e4f0fa;color:var(--blue2);font-weight:700;border-top:2px solid var(--blue)}
tr.fam td span{color:var(--mu);font-weight:600}
tr.fam:hover td{background:#e4f0fa}
.print-head{display:none}

/* Login: full-screen hero like jamaat.org */
/* Faisal Mosque fills the page; the leader artwork sits on the right and fades into it */
body.login-page{background:#03200f url(../img/faisal-mosque.jpg) 30% center/cover no-repeat;min-height:100vh}
body.login-page::before{content:"";position:fixed;inset:0;background:linear-gradient(90deg,rgba(3,40,18,.92) 0%,rgba(4,52,24,.7) 30%,rgba(4,52,24,.42) 55%,rgba(3,40,18,.75) 100%)}
.login-hero{position:fixed;inset-block:0;right:0;width:58vw;background:url(../img/login-bg.jpg) right center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%);mask-image:linear-gradient(90deg,transparent 0,#000 28%)}
.login,.login-credit{position:relative;z-index:1}
.login-credit{position:absolute;bottom:8px;left:6vw;margin:0;font-size:10px;color:rgba(255,255,255,.55)}
body.login-page::after{content:"";position:fixed;inset-block:0;inset-inline-start:0;width:14px;background:linear-gradient(90deg,var(--blue) 0 64%,#fff 64%)}
body.login-page main{position:relative;max-width:none;min-height:100vh;display:flex;align-items:center;padding:24px 6vw}
.login{width:100%;max-width:380px;color:#fff}
.login .logo{width:88px;display:block;margin-bottom:18px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.login .kicker{font-weight:700;font-size:14px;color:#8fcaf5;margin:0 0 6px}
.login h1{color:#fff;font-size:34px;line-height:1.15;margin:0 0 22px}
.login form{display:flex;flex-direction:column;gap:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:20px;backdrop-filter:blur(6px)}
.login label{color:#e3f1e7}
.login input[type=text],.login input[type=password]{background:rgba(255,255,255,.95);border:0;padding:10px 12px}
.login button{padding:11px;font-size:15px}
.login .err{color:#fcd34d}
.login .foot{color:#a9c7b2;font-size:12px;margin-top:16px}
@media (max-width:640px){
  .top{padding:8px 10px;padding-inline-start:76px;height:auto;min-height:56px;gap:6px 10px;flex-wrap:wrap}.top .logo{width:54px;inset-inline-start:12px}.top .brand{font-size:13px}.top .brand small{display:none}
  .top .who{order:2;flex-basis:100%;margin:0;gap:8px;font-size:12px;flex-wrap:wrap}.top .who button{padding:3px 10px;font-size:12px}
  .top nav{order:3;flex-basis:100%;margin:0;overflow-x:auto}.top nav a{padding:5px 10px;white-space:nowrap}
  .top + main{padding-top:20px}
  main{padding:16px 10px}
  form.filters label:not(.chk){flex:1 1 140px}form.filters select,form.filters input[type=text]{width:100%;min-width:0}
  .grid{grid-template-columns:1fr}
  .sumbar{position:static}.sumbar .acts{margin:0;flex-wrap:wrap}
  .cardhead .btn{font-size:12px;padding:6px 10px}
  body.login-page{background-position:25% center}body.login-page::before{background:rgba(3,40,18,.72)}.login-hero{display:none}.login h1{font-size:26px}
  /* 16px boxes: phones (iPhone) do not zoom the page when a box is tapped */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}
  /* Signed-in header: one row with a menu button; links and account open below it */
  .top.menu{flex-wrap:wrap;align-items:center}
  .top.menu .menubtn{display:inline-flex;align-items:center;gap:4px;margin-inline-start:auto;background:#fff;color:var(--a);border:1px solid var(--bd);border-radius:8px;padding:4px 10px;font-size:24px;line-height:1}
  .top.menu .menubtn .nbadge{font-size:11px}
  .top.menu nav,.top.menu .who{display:none}
  .top.menu.open nav{display:flex;flex-direction:column;gap:2px;order:3;flex-basis:100%;overflow:visible;padding:6px 0 2px}
  .top.menu.open nav a{padding:10px 12px;border-radius:8px;font-size:15px}
  .top.menu nav a.on{background:#e3f1e7;color:var(--a);box-shadow:inset 3px 0 0 var(--a)}
  html[dir=rtl] .top.menu nav a.on{box-shadow:inset -3px 0 0 var(--a)}
  .top.menu + main{padding-top:30px}
  .top.menu.open .who{display:flex;order:4;flex-basis:100%;border-top:1px dashed var(--bd);padding:8px 0 4px}
}
@media print{
  body{background:#fff;font-size:11px}.no-print{display:none!important}.print-head{display:block;margin-bottom:8px}
  main{padding:0;max-width:none}.card{border:0;padding:0;box-shadow:none}.tw{max-height:none;overflow:visible}
  th{position:static;background:#eee;color:#000}tr{page-break-inside:avoid}thead{display:table-header-group}
  tr.fam td{background:#eee;border-top:1px solid #999}
  @page{size:A4 landscape;margin:10mm}
}

/* Urdu (RTL) mode: Nastaliq needs more line height; Latin digits stay in Open Sans / Montserrat */
html[dir=rtl] body{font-size:15px;line-height:1.9}
html[dir=rtl] .top .brand{text-transform:none;letter-spacing:0;font-size:18px;line-height:1.5}
html[dir=rtl] .top .brand small{letter-spacing:0;font-size:12px}
html[dir=rtl] h1{font-size:24px;line-height:1.8}
html[dir=rtl] h2{font-size:15px;line-height:1.8}
html[dir=rtl] label{font-size:13px}
html[dir=rtl] th,html[dir=rtl] td{padding:4px 9px}
html[dir=rtl] .kpi span{font-size:13px}
html[dir=rtl] body.login-page main{flex-direction:row-reverse}
html[dir=rtl] .login h1{font-size:32px;line-height:1.7}

/* Language switch + first-login language popup */
.langsw{color:var(--a);font-weight:700;text-decoration:none;border:1px solid var(--bd);border-radius:6px;padding:3px 10px;background:#fff}
.langsw:hover{border-color:var(--a)}
.langpop{position:fixed;inset:0;z-index:50;background:rgba(3,40,18,.72);display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(3px)}
.lp-box{background:var(--cr);border-radius:14px;padding:26px 24px;width:100%;max-width:380px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.4);border-top:6px solid transparent;border-image:var(--flag) 1 / 6px 0 0 0}
.lp-box img{width:62px;margin-top:-58px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.lp-box h2{font-size:22px;line-height:1.9;color:var(--dk);margin:6px 0 16px;font-family:"Noto Nastaliq Urdu",serif}
.lp-box h2 span{display:block;font-family:Montserrat,sans-serif;font-size:13px;color:var(--mu);line-height:1.2}
.lp-btns{display:flex;gap:12px}
.lp-btns a{flex:1;text-decoration:none;border-radius:10px;padding:14px 8px;font-weight:700;font-size:18px}
.lp-ur{background:var(--a);color:#fff;font-family:"Noto Nastaliq Urdu",serif;line-height:1.6}
.lp-en{background:#fff;color:var(--a);border:2px solid var(--a);font-family:Montserrat,sans-serif;line-height:1.6}
.lp-ur:hover{background:var(--a2)}.lp-en:hover{background:#eaf5ee}

/* App pages (all except login / slips): full width, page header row beside the logo, compact filter card */
.app main{max-width:none;padding:14px 20px 16px}
.app .dhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-inline-start:84px;min-height:44px;margin-bottom:10px}
.app .dhead h1{margin:0}
.app .dhead .acts{display:flex;gap:6px;flex-wrap:wrap}
.bi{line-height:1;vertical-align:-.1em}
.app form.filters{flex-wrap:wrap;gap:8px 10px;padding:10px 14px;border-top:3px solid var(--blue)}
.app form.filters select,.app form.filters input[type=text]{padding:6px 8px}
.app form.filters button,.app form.filters .btn{padding:7px 14px}
.app label.chk{padding-bottom:7px}
.app h2 .bi{margin-inline-end:4px}
.app .tw{max-height:calc(100vh - 150px)}
.app form.filters label.grow{flex:1 1 260px}.app form.filters label.grow input{width:100%}
.app form.filters .seg label{padding:6px 12px}

/* Dashboard page: compact filters, lively KPI tiles */
.dash form.filters select,.dash form.filters input[type=text]{min-width:0;width:118px}
.dash form.filters .agerange input{width:62px;padding:6px 8px}
.dash .kpis{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.dash .kpi{--k:var(--a);display:flex;align-items:center;gap:12px;padding:12px 14px;border-inline-start-color:var(--k);background:linear-gradient(135deg,#fff 55%,color-mix(in srgb,var(--k) 9%,#fff));box-shadow:0 1px 2px rgba(11,37,32,.06);transition:transform .15s,box-shadow .15s}
.dash .kpi:hover{transform:translateY(-2px);box-shadow:0 8px 18px color-mix(in srgb,var(--k) 22%,transparent)}
.dash .kpi>i{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:21px;color:#fff;background:linear-gradient(135deg,var(--k),color-mix(in srgb,var(--k) 70%,#000));box-shadow:0 4px 10px color-mix(in srgb,var(--k) 35%,transparent)}
.dash .kpi b{font-size:24px;line-height:1.15}
.dash .kpi b em{font-style:normal;font-size:12px;font-weight:700;color:var(--k);background:color-mix(in srgb,var(--k) 12%,#fff);border-radius:999px;padding:1px 7px;vertical-align:middle}
.dash .kpi span{display:block;line-height:1.3}
.k-tot{--k:#064421}.k-m{--k:#0c8a3c}.k-f{--k:#1e8fe1}.k-o{--k:#c9a227}.k-blk{--k:#0e8f8f}.k-pop{--k:#6a4c93}.k-hh{--k:#5f8a1e}
.dash .grid.g3{grid-template-columns:2fr 1.5fr 1fr}
.dash .grid .card{margin-bottom:12px}
.dash .cv{height:230px}
.dash table.vlist tbody tr:nth-child(even) td{background:#f6faf7}
.dash table.vlist tbody tr:hover td{background:#e6f4ea}
.dash table.vlist tbody tr.fam td{background:#e4f0fa}
.dash table.vlist td{padding-block:3px}
.dash table.vlist td.urdu{line-height:1.75;font-size:15px}
.dash table.vlist td.addr{min-width:340px}
@media (max-width:1200px){.dash .grid.g3{grid-template-columns:1fr 1fr}.dash .grid.g3 .card:first-child{grid-column:1/-1}}
@media (max-width:640px){
  .app main{padding:16px 10px}
  .app .dhead{padding-inline-start:0;flex-wrap:wrap;gap:8px}
  .dash .grid.g3{grid-template-columns:1fr}.dash .grid.g3 .card:first-child{grid-column:auto}
  .app form.filters{padding:10px}
  .dash form.filters select,.dash form.filters input[type=text],.dash form.filters #family{width:100%!important}
  .dash .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .dash .kpi{padding:10px;gap:8px}.dash .kpi>div{min-width:0}
  .dash .kpi>i{width:34px;height:34px;font-size:16px;border-radius:9px}
  .dash .kpi b{font-size:18px}.dash .kpi b em{font-size:10px;padding:0 5px}
  .dash .kpi span{font-size:11px}
  .dash .cv{height:210px}
}
@media screen and (max-width:760px){.slips{grid-template-columns:95mm;justify-content:center}}
@media print{.app .dhead{padding:0}.dash .kpi{box-shadow:none;background:#fff}.dash .grid.g3{grid-template-columns:2fr 1.5fr 1fr}}

/* Family-number check */
input.bad{border-color:var(--warn);outline:2px solid var(--warn);outline-offset:-1px}
/* Voter slips: 2 x 4 per A4 portrait page, dashed cut lines */
.btn.slipbtn{background:#c9a227;color:#1b2a24}.btn.slipbtn:hover{background:#b08b1c}
.slipbar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}.slipbar .err{flex-basis:100%}
body.slips-page{background:#e9ece6}
.slips{display:grid;grid-template-columns:repeat(2,95mm);justify-content:center;margin:0 auto}
.slips.one{grid-template-columns:95mm;justify-content:start}
.slip{width:95mm;height:69mm;padding:2.5mm;border:1px dashed #9aa59f;background:#fff;display:flex;flex-direction:column;overflow:hidden;break-inside:avoid;page-break-inside:avoid;line-height:1.35;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.sl-head{display:flex;align-items:center;gap:2.5mm;background:var(--a);color:#fff;border-radius:2mm;padding:0 3mm;height:12.5mm;border-inline-start:3mm solid var(--blue);box-shadow:inset 1mm 0 0 #fff}
.sl-logo{height:13mm;margin-top:3mm;align-self:flex-start;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.sl-head b{display:block;font-family:"Noto Nastaliq Urdu",serif;font-size:11.5pt;line-height:1.25;font-weight:700}
.sl-head small{display:block;font-family:Montserrat,sans-serif;font-size:6pt;letter-spacing:.8px;color:#d4ecdb;line-height:1;margin-top:1.2mm}
.sl-body{flex:1;display:flex;gap:2.5mm;margin-top:2mm;min-height:0}
.sl-photo{width:26mm;height:100%;object-fit:cover;object-position:82% 22%;border-radius:2mm;flex:none}
.sl-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.9mm;font-size:8pt}
.sl-name{font-size:13pt;font-weight:700;line-height:1.95;white-space:nowrap;color:var(--dk);flex:none}
.sl-father{line-height:1.9;flex:none}.sl-father b.urdu{font-family:"Noto Nastaliq Urdu",serif;font-size:9pt;font-weight:400}
.sl-fam{margin-inline-start:auto;background:#c9a227;color:#1b2a24;border-radius:1.5mm;padding:.6mm 2mm;font-size:7.5pt;font-weight:700;white-space:nowrap;line-height:1.6}
.sl-fam i{font-style:normal;font-family:"Open Sans",sans-serif;font-weight:600;opacity:.75;margin-inline-start:1mm}
.slip.fam-alt .sl-head{background:var(--dk)}
.sl-row{display:flex;gap:1.5mm;align-items:baseline;white-space:nowrap}.sl-row span{color:var(--mu);font-size:7pt}
.sl-row b{font-family:"Open Sans",sans-serif;font-size:9pt}.sl-row.small b{font-size:8pt;margin-inline-end:2mm}
.sl-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:1mm}
.sl-nums div{border:1px solid var(--a);border-radius:1.5mm;text-align:center;padding:.4mm 0;background:#eaf5ee}
.sl-nums span{display:block;font-size:6.5pt;color:var(--mu);line-height:1.5}
.sl-nums b{display:block;font-family:Montserrat,sans-serif;font-size:10.5pt;color:var(--a2);line-height:1.2}
.sl-addr{font-size:7.5pt;line-height:1.65;overflow:hidden;flex:1;min-height:0;color:#33433c}
@media print{
  .top + main{padding:0}
  body.slips-page{background:#fff}
  .slips{margin:0}
}
/* Data upload (admin) */
.upform{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.upform input[type=file]{padding:8px;border:1px dashed var(--a);border-radius:6px;background:#f6faf7;max-width:100%}
.upform label.chk{flex-direction:row;color:var(--tx);font-size:13px}
.upform label.chk input{margin-inline-end:6px}
.upform .mu{margin:0;font-size:12px}
.upmsg.bad{border-inline-start:4px solid var(--warn)}.upmsg.bad h2{color:var(--warn)}
.upmsg.ok{border-inline-start:4px solid var(--a)}
.upmsg ul{margin:0;padding-inline-start:20px;line-height:1.8}
.tplhead{margin-top:16px}
.tplprev{max-height:none;border:1px solid var(--bd);border-radius:6px;margin-bottom:6px}
.tplprev th,.tplprev td{border:1px solid var(--bd);font-size:12px;padding:4px 8px}
.tplprev th{background:#eef2ef;color:var(--mu);text-align:center;font-weight:600;position:static}
.tplprev td.rn,.tplprev th.rn{background:#eef2ef;color:var(--mu);text-align:center;width:28px}
.tplprev tr.hdr td:not(.rn){background:var(--dk);color:#fff;font-weight:700}
.tplprev tr.ex td:not(.rn){background:#fff7d6}
.tplprev td.urdu{font-size:14px;line-height:1.8}
.tplprev tbody tr:hover{background:none}
.tplhelp{margin-top:8px}
.tplhelp summary{cursor:pointer;font-weight:700;color:var(--a);padding:4px 0}
.tplhelp td.wrap{white-space:normal}

/* Member report */
.k-mem{--k:#b5452b}
.mtab .mbar{display:inline-block;width:140px;height:8px;background:#eef2ef;border-radius:999px;vertical-align:middle;margin-inline-end:6px;overflow:hidden}
.mtab .mbar i{display:block;height:100%;background:#b5452b;border-radius:999px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
/* Members page: strength colours, map */
.k-den{--k:#7c3aed}.k-str{--k:#0c8a3c}.k-weak{--k:#f08c00}.k-none{--k:#d92d20}.k-age{--k:#1572b8}
.memp{--c-strong:#0c8a3c;--c-avg:#1e8fe1;--c-weak:#f08c00;--c-none:#d92d20}
.mtab .mbar i.c-strong{background:var(--c-strong)}.mtab .mbar i.c-avg{background:var(--c-avg)}.mtab .mbar i.c-weak{background:var(--c-weak)}.mtab .mbar i.c-none{background:var(--c-none)}
.mcls{display:inline-block;border-radius:999px;padding:1px 9px;font-size:11px;font-weight:700;color:#fff;background:var(--c-avg,#1e8fe1);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.mcls.c-strong{background:#0c8a3c}.mcls.c-avg{background:#1e8fe1}.mcls.c-weak{background:#f08c00}.mcls.c-none{background:#d92d20}
.memmap .seg button{background:#fff;color:var(--tx);border-radius:0;padding:6px 12px;font-size:13px}
.memmap .seg button+button{border-inline-start:1px solid var(--bd)}
.memmap .seg button.on{background:#e3f1e7;color:var(--a)}
.mm-legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:4px 0 8px;font-size:12px}
.mlg{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.mlg i{width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--bd)}
.mlg.c-strong i{background:#0c8a3c}.mlg.c-avg i{background:#1e8fe1}.mlg.c-weak i{background:#f08c00}.mlg.c-none i{background:#d92d20}
.mm-map{height:460px;border-radius:10px;border:1px solid var(--bd);z-index:1}
.mm-pop b{display:block;margin-bottom:4px}.mm-pop .mm-sum{margin-bottom:4px}.mm-pop ul{margin:4px 0 0;padding-inline-start:18px;max-height:160px;overflow:auto}
.memp .grid .card{margin-bottom:12px}
@media (max-width:640px){.mm-map{height:340px}}
.mem{display:inline-block;margin-inline-start:6px;background:#b5452b;color:#fff;border-radius:999px;padding:0 7px;font-size:10px;font-family:"Open Sans","Noto Nastaliq Urdu",sans-serif;line-height:1.7;vertical-align:middle}

/* Voter search: only-voter / with-family toggle and family grouping */
.seg{display:inline-flex;border:1px solid var(--bd);border-radius:6px;overflow:hidden;background:#fff}
.seg label{flex-direction:row;align-items:center;gap:5px;padding:8px 12px;color:var(--tx);font-weight:600;cursor:pointer;font-size:13px}
.seg label+label{border-inline-start:1px solid var(--bd)}
.seg label:has(input:checked){background:#e3f1e7;color:var(--a)}
.seg input{margin:0;accent-color:var(--a)}
table.srch tr.fam td{background:#e4f0fa;font-weight:700;color:var(--dk);-webkit-print-color-adjust:exact;print-color-adjust:exact}
table.srch tr.fam td span{font-weight:600;color:var(--mu)}
table.srch tr.hit td{background:#fff7d6;font-weight:700;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.seglbl{display:flex;flex-direction:column;font-size:12px;color:var(--mu);gap:3px;font-weight:600}

/* Roles & Users (admin) */
td.wrap{white-space:normal}
.pill{display:inline-block;background:#e3f1e7;color:var(--a);border-radius:999px;padding:1px 9px;font-size:12px;font-weight:700;margin:1px 2px;white-space:nowrap}
.pill.gold{background:#f7edc8;color:#7a5f0c}.tierbar{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}.tierbar .pill{font-size:13px;padding:3px 11px}.pill.blue{background:#e4f0fa;color:var(--blue2)}.pill.off{background:#fde8e1;color:var(--warn)}
td.acts-cell{display:flex;gap:6px;align-items:center;justify-content:flex-end}td.acts-cell form{margin:0}
td.acts-cell .btn,td.acts-cell button{padding:4px 10px;font-size:12px}
button.danger{background:#fde8e1;color:#b42318}button.danger:hover{background:#b42318;color:#fff}
.roleform{display:flex;flex-direction:column;gap:14px;max-width:820px;border-top:3px solid var(--blue)}
.roleform>label:not(.chk) input,.roleform>label select{max-width:420px}
.roleform .seg{flex-wrap:wrap;align-self:flex-start}
.acl{border:1px solid var(--bd);border-radius:8px;background:#f6faf7;padding:8px 10px}
.acl-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.acl-tools input{min-width:0;width:200px;padding:6px 8px}.acl-tools button{padding:5px 10px;font-size:12px}
.acl-list{max-height:280px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0 12px}
.acl-list label.chk{padding:4px 0;font-weight:600;font-size:13px}.acl-list label[hidden]{display:none}
.perms{display:flex;flex-wrap:wrap;gap:4px 22px}.perms label.chk{padding-bottom:4px;font-size:14px}
.perms label.chk:has(input:disabled){opacity:.5;cursor:not-allowed}
.roleform ul.err{padding-inline-start:20px;line-height:1.8}
.formacts{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:640px){.acl-tools input{flex:1 1 100%;width:auto}.acl-list{grid-template-columns:1fr}td.acts-cell{justify-content:flex-start}}

/* Election map */
.emap{--pol:#0c8a3c;--off:#d92d20;--cmp:#f08c00}
.em-bar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:10px 14px;border-top:3px solid var(--blue)}
.em-search{position:relative;flex:1 1 320px;display:flex;align-items:center}
.em-search>.bi{position:absolute;inset-inline-start:11px;color:var(--mu);pointer-events:none}
.em-search input{width:100%;padding:9px 12px;padding-inline-start:34px;border-radius:999px}
.em-sug{position:absolute;top:calc(100% + 4px);inset-inline:0;z-index:1100;list-style:none;margin:0;padding:4px;background:#fff;border:1px solid var(--bd);border-radius:10px;box-shadow:0 10px 28px rgba(6,68,33,.18);max-height:340px;overflow:auto}
.em-s{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;cursor:pointer}
.em-s:hover,.em-s.on{background:#eaf5ee}
.em-s .bi{color:var(--c,var(--blue2));font-size:16px}
.em-s b{flex:1;font-weight:600}.em-s small{color:var(--mu);font-size:11px}
.em-s.none{cursor:default;color:var(--mu)}.em-s.none:hover{background:none}
.em-s.geo{color:var(--blue2);font-weight:600;border-top:1px solid var(--bd);margin-top:2px}
.em-filters{display:flex;flex-wrap:wrap;gap:6px}
.em-f{--c:var(--pol);display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 12px;font-size:13px;background:#fff;color:var(--c);border:2px solid var(--c);transition:background .15s,box-shadow .15s}
.em-f.em-office{--c:var(--off)}.em-f.em-camp{--c:var(--cmp)}
.em-f[aria-pressed=true]{background:var(--c);color:#fff;box-shadow:0 3px 10px color-mix(in srgb,var(--c) 40%,transparent)}
.em-f:hover{background:color-mix(in srgb,var(--c) 14%,#fff)}.em-f[aria-pressed=true]:hover{background:color-mix(in srgb,var(--c) 85%,#000)}
.em-n{background:rgba(255,255,255,.25);border-radius:999px;padding:0 7px;font-size:11px}
.em-f[aria-pressed=false] .em-n{background:color-mix(in srgb,var(--c) 14%,#fff)}
.em-body{display:grid;grid-template-columns:7fr 3fr;gap:12px;height:max(460px,calc(100vh - 262px))}
.em-map{border-radius:10px;border:1px solid var(--bd);box-shadow:0 1px 2px rgba(11,37,32,.05);z-index:1;min-height:0}
.em-side{display:flex;flex-direction:column;gap:10px;margin:0;overflow:auto;min-height:0;padding:12px}
.em-handle{display:none}
.em-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.em-item{--c:var(--pol);width:100%;display:flex;align-items:center;gap:10px;text-align:start;background:#fff;color:var(--tx);border:1px solid var(--bd);border-inline-start:4px solid var(--c);border-radius:8px;padding:7px 10px;font-weight:400}
.em-item:hover{background:#eaf5ee}.em-item.on{background:color-mix(in srgb,var(--c) 10%,#fff);border-color:var(--c)}
.em-item>.bi{color:var(--c);font-size:17px}
.em-it{flex:1;display:flex;flex-direction:column;min-width:0}.em-it b{font-weight:700}
.em-it small{color:var(--mu);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.em-dist{font-size:12px;font-weight:700;color:var(--blue2);white-space:nowrap}
.em-detail{--c:var(--pol);border:1px solid color-mix(in srgb,var(--c) 35%,var(--bd));border-radius:10px;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 7%,#fff),#fff 120px)}
.em-dh{display:flex;align-items:flex-start;gap:10px;padding:12px;border-top:4px solid var(--c)}
.em-dh>div{flex:1}.em-dh h2{color:var(--dk);font-size:16px;margin:2px 0 0}
.em-dicon{font-size:22px;color:#fff;background:var(--c);border-radius:50%;width:38px;height:38px;display:grid;place-items:center;flex:none;box-shadow:0 3px 10px color-mix(in srgb,var(--c) 40%,transparent)}
.em-cat{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--c)}
.em-x{padding:4px 8px}
.em-dl{margin:0;padding:0 12px 6px;display:grid;grid-template-columns:auto 1fr;gap:6px 12px}
.em-dl dt{color:var(--mu);font-size:12px;font-weight:600;padding-top:2px}.em-dl dd{margin:0;font-weight:600}
.em-inc{display:flex;flex-direction:column;gap:2px}.em-desig{color:var(--mu);font-size:12px;font-weight:600}
.em-phone{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:2px}
.em-phone .btn{padding:3px 10px;font-size:12px}.em-wa{background:#e3f6e9;color:#128c4b}.em-wa:hover{background:#c9eed6}
.em-svc{margin:0;padding-inline-start:18px}
.em-route{border-top:1px dashed var(--bd);padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px}
.em-route h2{margin:0}
.em-rinfo{display:flex;flex-wrap:wrap;gap:8px}
.em-rt{display:flex;align-items:center;gap:6px;background:#e4f0fa;color:var(--blue2);border-radius:8px;padding:6px 10px}
.em-rt b{color:var(--dk);font-size:15px}.em-rt small{color:var(--mu)}
.em-gm{align-self:flex-start;font-size:13px;padding:6px 12px}
.em-credit{font-size:11px;margin:6px 0 0;text-align:end}
.em-pin{background:none;border:0}
.em-pin svg{display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));transition:transform .15s}
.em-pin .bi{position:absolute;top:6px;left:0;width:30px;text-align:center;color:#fff;font-size:14px;line-height:1}
.em-pin.on svg{transform:scale(1.25);transform-origin:50% 100%}.em-pin.on .bi{top:2px;font-size:16px}
@media (max-width:760px){
  .em-body{display:block;height:auto}
  .em-map{height:calc(100vh - 230px);min-height:360px}
  .em-side{position:fixed;inset-inline:0;bottom:0;z-index:1200;max-height:38vh;border-radius:16px 16px 0 0;box-shadow:0 -8px 24px rgba(6,68,33,.22);transition:max-height .2s;padding-top:4px}
  .em-side.open{max-height:78vh}
  .em-handle{display:block;align-self:center;width:52px;height:6px;padding:0;border-radius:999px;background:var(--bd);margin:4px 0 2px;flex:none}
  .em-credit{margin-bottom:38vh}
}

/* Voter map: address areas and members' homes */
.em-f.em-voters{--c:#1572b8}.em-f.em-homes{--c:#b5452b}
.vm-home{display:grid;place-items:center;background:#b5452b;color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.35);font-size:13px}
.vm-pop .urdu{display:block}.vm-pop p{margin:4px 0}
.vm-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.vm-acts .btn{padding:3px 10px;font-size:12px}
.mlg.vm-lg-area i{background:rgba(30,143,225,.3);border:2px solid #1572b8}
.mlg .vm-lg-home{width:auto;height:auto;border:0;box-shadow:none;background:none;color:#b5452b;font-size:14px}
.spot-map{height:420px}
@media (max-width:640px){.spot-map{height:60vh}}

/* Places (admin) */
.placeform .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.placeform input[type=number],.placeform textarea{padding:8px 10px;border:1px solid var(--bd);border-radius:6px;font-size:14px;font-family:inherit}
.placeform textarea{min-height:76px;resize:vertical}
.pick-map{height:340px;border-radius:8px;border:1px solid var(--bd)}
.incs{display:flex;flex-direction:column;gap:6px}
.inc-row{display:grid;grid-template-columns:1.3fr 1.3fr 1fr auto;gap:6px;align-items:end}
.inc-row input{min-width:0}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-inline-end:4px;vertical-align:middle}
@media (max-width:640px){.inc-row{grid-template-columns:1fr 1fr}.inc-row button{grid-column:1/-1}}
.placeform [hidden]{display:none}

/* Rides */
.seg.tabs a{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;color:var(--tx);font-weight:600;font-size:13px;text-decoration:none}
.seg.tabs a+a{border-inline-start:1px solid var(--bd)}.seg.tabs a.on{background:#e3f1e7;color:var(--a)}
.ride-st .btn{padding:6px 12px;font-size:13px;border-radius:999px}.ride-st .btn b{margin-inline-start:4px;opacity:.8}
.rides{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;align-items:start}
.ride{--c:#c8a228;margin:0;border-top:4px solid var(--c);display:flex;flex-direction:column;gap:8px}
.ride.st-assigned{--c:var(--blue)}.ride.st-done{--c:var(--a)}.ride.st-cancelled{--c:#b42318;opacity:.8}
.ride header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ride .rv{font-size:16px;color:var(--dk)}
.ride .em-dl{padding:0}
.rmap{margin-inline-start:6px;font-size:12px;white-space:nowrap}
.rmeta{font-size:12px;margin:0}
.rupd{border-top:1px dashed var(--bd);padding-top:8px}
.rupd summary{cursor:pointer;font-weight:700;color:var(--blue2)}
.rupd form{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.rupd .seg{flex-wrap:wrap;align-self:flex-start}.rupd .seg label{padding:6px 10px}
.rupd button{align-self:flex-start}
.rideform select{max-width:none}
.rf-loc{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rideform input[type=tel],.rideform input[type=datetime-local]{padding:8px 10px;border:1px solid var(--bd);border-radius:6px;font-size:14px;font-family:inherit}
@media (max-width:640px){.rides{grid-template-columns:1fr}.dhead .seg.tabs{flex-wrap:wrap}}

/* Election material (reuses the ride cards) */
.ride.st-approved{--c:var(--blue)}.ride.st-sent{--c:#6941c6}.ride.st-received{--c:var(--a)}
.ride.st-rejected,.ride.st-cancelled{--c:#b42318}.ride.st-rejected{opacity:.85}
.pill.cc{background:#f2f4f3;color:var(--mu)}
.mqty{font-size:14px;color:var(--mu)}.mqty>b{font-family:Montserrat,"Noto Nastaliq Urdu","Segoe UI",sans-serif;font-size:22px;color:var(--dk)}
.mat .rupd input[type=number]{max-width:160px;padding:8px 10px;border:1px solid var(--bd);border-radius:6px;font-size:14px;font-family:inherit}
.login-map{display:block;text-align:center;margin-top:12px;white-space:normal}

/* Notifications */
.top .bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--bd);border-radius:50%;color:var(--dk);font-size:17px;text-decoration:none;background:#fff}
.top .bell:hover{border-color:var(--a);color:var(--a)}
.top .bell .nbadge{position:absolute;top:-5px;inset-inline-end:-7px}
.nbadge{background:#d92d20;color:#fff;border-radius:999px;font-size:11px;font-weight:700;line-height:1;padding:3px 6px;box-shadow:0 0 0 2px #fff}
.notes{display:flex;flex-direction:column;gap:10px;max-width:820px}
.note{margin:0;border-inline-start:4px solid var(--bd);display:flex;flex-direction:column;gap:6px}
.note.new{border-inline-start-color:#c8a228;background:#fffcf0}
.note.auto:not(.new){border-inline-start-color:var(--blue)}
.note header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.note header b{font-size:15px;color:var(--dk)}
.nbody{margin:0;white-space:pre-line;line-height:1.7}
.nlink{align-self:flex-start;padding:5px 12px;font-size:13px}
.nfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px dashed var(--bd);padding-top:8px}
.noteform textarea{padding:8px 10px;border:1px solid var(--bd);border-radius:6px;font-size:14px;font-family:inherit;min-height:96px;resize:vertical}
.noteform select{max-width:420px}
.noteform [hidden]{display:none}
.apick{display:flex;flex-direction:column;gap:14px}

/* Gallery (reuses the notification card parts) */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-items:start}
.gitem{margin:0;padding:0;overflow:hidden;display:flex;flex-direction:column;border-top:4px solid var(--a)}
.gitem.k-video{border-top-color:#d92d20}.gitem.k-post{border-top-color:var(--blue)}
.gmedia{display:block;background:#0b1f15;aspect-ratio:16/9}
.gmedia img,.gmedia video,.gmedia iframe{display:block;width:100%;height:100%;border:0;object-fit:contain}
.gtext{display:flex;flex-direction:column;gap:6px;padding:12px 14px 0}
.gtext>b{font-size:15px;color:var(--dk)}
.gitem .nfoot{margin:10px 14px 12px}
.gacts{display:flex;gap:6px;flex-wrap:wrap}.gacts .btn,.gacts button{padding:5px 12px;font-size:13px}
.seg.tabs a b{font-size:11px;opacity:.7}
.galform input[type=file],.galform input[type=url]{max-width:420px;padding:8px 10px;border:1px solid var(--bd);border-radius:6px;font-size:14px;font-family:inherit;background:#fff}
@media (max-width:640px){.gal{grid-template-columns:1fr}}

/* Voter login by CNIC (login page) and the voter's own page */
.login form.login-cnic{border-color:rgba(143,202,245,.45);background:rgba(30,143,225,.16)}
.login-panel[hidden]{display:none}
.login-feat{margin:-6px 0 0;color:#cfe6f7;font-size:13px;line-height:1.7}
.login .login-switch{display:block;width:100%;margin-top:12px;background:transparent;color:#e3f1e7;border:1px solid rgba(255,255,255,.35)}
.login .login-switch:hover{background:rgba(255,255,255,.1)}
.login-cnic h2{color:#fff;font-size:16px;margin:0}
.login-cnic button{background:var(--blue)}.login-cnic button:hover{background:var(--blue2)}
.vme{--pol:#0c8a3c;--off:#d92d20;--cmp:#f08c00;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:12px;align-items:start}
.vme-sec>h2{font-size:15px}
.vme-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-bottom:12px}
.vme-nums div{border:1px solid var(--a);border-inline-start:4px solid var(--blue);border-radius:8px;background:#eaf5ee;padding:6px 10px}
.vme-nums span{display:block;font-size:12px;color:var(--mu);font-weight:600}
.vme-nums b{font-family:Montserrat,sans-serif;font-size:22px;color:var(--a2)}
.vme-kv th{position:static;width:1%;background:#e3f1e7;color:var(--dk)}
.vme-kv td.addr{white-space:normal}
.vme-slip .slips{justify-content:center}
.vme-place{margin-top:10px}.vme-place:first-of-type{margin-top:0}
.vme-office .em-detail{--c:var(--off)}.vme-camp .em-detail{--c:var(--cmp)}
.vme-go{padding:0 12px 12px}
tr.vme-me td{background:#e4f0fa;font-weight:700}
.vme-famslips{display:none}
@media (max-width:900px){.vme{grid-template-columns:minmax(0,1fr)}}
@media print{
  .vme{display:block}
  .vme-slip{margin:0}
  body[data-print=fam] .vme-slip{display:none}
  body[data-print=fam] .vme-famslips{display:grid}
}

/* Nominations: Zone > UC > ward tree, candidate with proposer / seconder */
.nom-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:12px}
.nom-kpis div{background:var(--card);border:1px solid var(--bd);border-top:4px solid var(--blue);border-radius:10px;padding:8px 12px;box-shadow:0 1px 2px rgba(11,37,32,.05)}
.nom-kpis .k-ok{border-top-color:var(--a)}.nom-kpis .k-acc{border-top-color:#0c8a3c}.nom-kpis .k-vac{border-top-color:#f08c00}
.nom-kpis span{display:block;font-size:12px;color:var(--mu);font-weight:600}
.nom-kpis b{font-family:Montserrat,sans-serif;font-size:24px;color:var(--a2)}
.nom-zone{font-size:16px;margin:16px 0 8px;color:var(--dk)}
.nom-uc{padding:0;overflow:hidden;border-top:3px solid var(--a)}
.nom-uc>summary{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;background:linear-gradient(90deg,#eaf5ee,transparent);flex-wrap:wrap}
.nom-uc>summary b{font-size:15px;color:var(--dk)}
.nom-bar{flex:1;min-width:80px;max-width:240px;height:8px;background:#e6ece9;border-radius:99px;overflow:hidden}
.nom-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--a),#0c8a3c)}
.nom-ward{border-top:1px solid var(--bd);padding:10px 14px}
.nom-ward h3{margin:0 0 8px;font-size:13px}
.nom-wno{display:inline-block;background:var(--blue);color:#fff;border-radius:6px;padding:2px 10px}
.nom-ward.vacant .nom-wno{background:#f08c00}
.nom-empty{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nom{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.6fr);gap:10px;align-items:start}
.nom+.nom{margin-top:10px;padding-top:10px;border-top:1px dashed var(--bd)}
.nom.st-rejected,.nom.st-withdrawn{opacity:.75}
.nom-cand{display:flex;gap:10px;align-items:flex-start;background:#f4faf6;border:1px solid #cfe6d7;border-inline-start:4px solid var(--a);border-radius:8px;padding:8px}
.nom-pic{flex:none;width:64px;height:76px;border-radius:6px;background:#e3f1e7;display:grid;place-items:center;overflow:hidden;color:var(--a);font-size:30px}
.nom-pic img{width:100%;height:100%;object-fit:cover}
.nom-sym{flex:none;margin-inline-start:auto;text-align:center;font-size:12px;font-weight:700;color:var(--dk);max-width:90px}
.nom-sym img{display:block;width:64px;height:64px;object-fit:contain;margin:0 auto 2px;background:#fff;border:1px solid var(--bd);border-radius:8px;padding:3px}
.nom-backers{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.np{display:flex;flex-direction:column;gap:1px;min-width:0}
.nom-backers .np{border:1px solid var(--bd);border-inline-start:4px solid var(--blue);border-radius:8px;padding:6px 8px;background:#fafcfd}
.np-role{font-size:11px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.03em}
.np b{font-size:15px;color:var(--dk)}
.np-cnic{font-size:12px;color:var(--mu);text-align:start}
.np-tel{font-size:13px;font-weight:600;color:var(--blue2);text-decoration:none}
.nom-foot{grid-column:1/-1;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}
.nom-foot .rmeta{margin:0;margin-inline-start:auto;font-size:12px}
.nom-acts{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start}
.nom-acts .btn,.nom-acts button{padding:5px 12px;font-size:13px}
.nom-acts form{margin:0}
.nom-old{margin-top:8px;font-size:13px}.nom-old>summary{cursor:pointer;color:var(--mu);font-weight:600}
.nom-print-h{display:none}
.nomform fieldset.nf-sec{border:1px solid var(--bd);border-inline-start:4px solid var(--blue);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;margin:0}
.nomform fieldset.nf-cand{border-inline-start-color:var(--a);background:#f8fcf9}
.nomform legend{font-weight:700;color:var(--dk);padding:0 6px}
.nomform input[type=file]{max-width:100%;padding:6px 8px;border:1px solid var(--bd);border-radius:6px;background:#fff;font-family:inherit}
.nf-who{margin:0;min-height:20px;font-weight:600}
.nf-imgs{display:flex;gap:14px;flex-wrap:wrap}
.nf-imgs figure{margin:0;display:flex;flex-direction:column;gap:4px}
.nf-imgs img{width:90px;height:90px;object-fit:contain;border:1px solid var(--bd);border-radius:8px;background:#fff}
/* The voter's own candidate, first on the voter page */
.vme-cand{display:flex;align-items:center;gap:14px;border-top:4px solid var(--a);background:linear-gradient(100deg,#eaf5ee,#fff 70%)}
.vc-pic{flex:none;width:86px;height:100px;border-radius:8px;overflow:hidden;background:#e3f1e7;display:grid;place-items:center;color:var(--a);font-size:40px;border:2px solid #fff;box-shadow:0 2px 6px rgba(11,37,32,.15)}
.vc-pic img{width:100%;height:100%;object-fit:cover}
.vc-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.vc-text h2{margin:0;font-size:13px;color:var(--mu);text-transform:uppercase;letter-spacing:.04em}
.vc-el{font-size:12px;font-weight:700;color:var(--blue2)}
.vc-name{font-size:22px;color:var(--dk)}
.vc-sym{flex:none;margin-inline-start:auto;text-align:center;font-size:13px}
.vc-sym img{display:block;width:96px;height:96px;object-fit:contain;margin:0 auto 4px;background:#fff;border:1px solid var(--bd);border-radius:10px;padding:4px}
@media (max-width:760px){.nom{grid-template-columns:1fr}.vme-cand{flex-wrap:wrap}.vc-sym{margin-inline-start:0}}
@media print{
  .nom-print-h{display:block;font-weight:700;color:#000}
  .nom-uc{break-inside:auto}.nom-ward{break-inside:avoid}
}
/* Rides: drivers, trip and log */
.trip{display:inline-flex;flex-wrap:wrap;gap:4px 12px}.trip i{color:var(--a)}
.trip-act{display:flex;flex-direction:column;gap:8px;border-top:1px dashed var(--bd);padding-top:8px}
.trip-act input[type=number],.trip-act input[type=text]{padding:8px 10px;border:1px solid var(--bd);border-radius:6px;font-size:15px;font-family:inherit}
.trip-act button.go{align-self:stretch;justify-content:center;font-size:16px;padding:11px 14px;background:linear-gradient(135deg,var(--a),color-mix(in srgb,var(--a) 70%,#000));box-shadow:0 4px 12px color-mix(in srgb,var(--a) 30%,transparent)}
.rlog summary{cursor:pointer;font-weight:700;color:var(--mu);font-size:13px}
.rlog ol{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;border-inline-start:2px solid var(--bd);padding-inline-start:10px;font-size:13px}
.rlog li{display:flex;gap:8px;align-items:flex-start}.rlog li>i{color:var(--blue2);margin-top:2px}
.rlog li.a-done>i{color:var(--a)}.rlog li.a-returned>i,.rlog li.a-cancelled>i{color:var(--warn)}
table.rlogtab .rlog{margin-top:4px}table.rlogtab .rlog ol{min-width:220px}
tr.off td{opacity:.6}

/* Area frame (admin) */
.aframe{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:12px;align-items:start}
.aframe .card{margin-bottom:0}.af-side{display:flex;flex-direction:column;gap:12px}
.af-note{margin:0 0 10px;font-size:13px}
.atree,.atree ul{list-style:none;margin:0;padding:0}
.atree ul{padding-inline-start:18px;margin-inline-start:12px;border-inline-start:2px solid var(--bd)}
.atree li{margin:5px 0}
.anode{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 10px;border:1px solid var(--bd);border-radius:8px;background:#fff}
.anode.sel{border-color:var(--a);box-shadow:0 0 0 2px #e3f1e7}.anode.off{opacity:.65}
.anode .nm{font-weight:700}
.anode .acts{margin-inline-start:auto;display:flex;gap:4px}.anode .acts form{margin:0}
.anode .acts .btn,.anode .acts button{padding:3px 8px;font-size:12px}
.azones{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:4px 6px;font-size:13px}
.af-side h3{margin:12px 0 6px;font-size:15px}
@media (max-width:900px){.aframe{grid-template-columns:minmax(0,1fr)}}

/* Drafts, connection and error pages (js/app.js) */
.draftbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:#fff7d6;border:1px solid #ecd58a;color:#5c4708;font-weight:600;font-size:13px}
.draftbar span{flex:1 1 220px}.draftbar button{padding:5px 12px;font-size:13px}
.draftbar.ok{background:#e3f1e7;border-color:#b9dcc4;color:var(--a2)}
.netbar{position:fixed;inset-inline:12px;bottom:12px;z-index:3000;background:#7a2e0e;color:#fff;padding:10px 14px;border-radius:10px;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.25)}
button.busy{opacity:.7;cursor:progress}
.errcard{max-width:720px;display:flex;flex-direction:column;gap:10px}.errcard p{margin:0}
.errpre{white-space:pre-wrap;word-break:break-word;text-align:left;background:var(--bg);border:1px solid var(--bd);padding:10px;border-radius:6px;margin:0;font-size:12px}

/* Place form: area from the voter data, blocks of a polling station */
.areasel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.areasel select{width:100%}
.pblocks .acl-list{max-height:240px}
.pblocks .acl-list small{color:var(--mu);font-weight:400}
.pick-note{margin:0;font-size:12px}
.em-blocks{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.em-blocks li{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px}
.em-blocks a{font-size:12px;padding:2px 8px}
@media (max-width:700px){.areasel{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vme-gal{margin-top:12px}.vme-gal .dhead h2{font-size:17px;margin:0}