/* Jhelum Optix Billing — admin-panel layout: dark navy sidebar, light content, blue accent */
:root{
  --bg:#f1f4f9;--panel:#fff;--ink:#0f1b2d;--muted:#64748b;--line:#e2e8f0;--line2:#cbd5e1;
  --accent:#1d4ed8;--accent-2:#2563eb;--accent-ink:#fff;--accent-soft:#e8efff;
  --side:#0b1f4d;--side-2:#0e2a63;--side-ink:#c7d2fe;--side-mut:#7c8db8;
  --ep:#0f8a5f;--ep-soft:#e3f6ee;
  --warn:#b45309;--warn-soft:#fef3c7;--paid-row:#f6c4c4;--danger:#dc2626;--danger-soft:#fee2e2;
  --cyan:#0891b2;--violet:#7c3aed;
  --shadow:0 1px 2px rgba(15,27,45,.06),0 4px 14px rgba(15,27,45,.05);
  --r:14px;
  --urdu:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif;
  --nast:"Noto Nastaliq Urdu","Noto Naskh Arabic",serif;
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0a1222;--panel:#111c31;--ink:#e5ecf7;--muted:#91a0b8;--line:#1f2d47;--line2:#2b3b5a;
  --accent:#4f7cff;--accent-2:#6b91ff;--accent-ink:#fff;--accent-soft:#18264a;
  --side:#070f22;--side-2:#0f1d3d;
  --ep:#34d399;--ep-soft:#0f2b23;--warn:#fbbf24;--warn-soft:#33270d;--paid-row:#5a2328;--danger:#f87171;--danger-soft:#3a1717;
  --shadow:0 1px 2px rgba(0,0,0,.3);color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--urdu);font-size:14.5px;line-height:2.15;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.u{font-family:var(--urdu)}
.num{font-variant-numeric:tabular-nums;font-family:var(--ui)}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- boot + login ---------- */
.boot{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted)}
.boot img{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5;transform:scale(.94)}}
.login-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;background:radial-gradient(1200px 600px at 100% 0,#1e3a8a 0,transparent 60%),linear-gradient(160deg,#0b1f4d,#0a1530)}
.login-card{width:100%;max-width:860px;display:grid;grid-template-columns:1fr 1fr;background:var(--panel);border-radius:20px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.login-brand{background:linear-gradient(150deg,#2563eb,#0b1f4d);color:#fff;padding:40px 34px;display:flex;flex-direction:column;gap:10px}
.login-brand h1{font-family:var(--ui);font-size:28px;line-height:1.2;margin:8px 0 0;direction:ltr;text-align:right;font-weight:700}
.login-brand h1 span{display:block;font-weight:500;color:#a5f3fc;font-size:18px}
.login-brand p{margin:0;opacity:.85}
.login-brand ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.login-brand li{display:flex;gap:10px;align-items:center;opacity:.9}
.login-brand li::before{content:"";width:8px;height:8px;border-radius:50%;background:#22d3ee;flex:none}
.login-form{padding:40px 34px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.login-form h2{margin:0 0 4px;font-size:22px}
.login-foot{color:#94a3b8;font-size:12px;margin-top:16px;font-family:var(--ui)}
@media (max-width:720px){.login-card{grid-template-columns:1fr}.login-brand{padding:26px 24px}.login-brand ul{display:none}.login-form{padding:26px 24px}}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh;background:linear-gradient(to left,var(--side-2) 0 260px,transparent 260px)}
body{overflow-x:hidden}
.side{background:linear-gradient(180deg,var(--side),var(--side-2));color:var(--side-ink);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:hidden;z-index:30}
.side-brand{display:flex;align-items:center;gap:12px;padding:18px 18px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.side-brand b{display:block;color:#fff;font-family:var(--ui);font-size:16px;line-height:1.2;direction:ltr;text-align:right}
.side-brand small{display:block;color:var(--side-mut);font-family:var(--ui);font-size:11.5px;letter-spacing:.04em;direction:ltr;text-align:right}
#tabs{flex:1;overflow-y:auto;padding:8px 10px 16px;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.nav-h{font-size:11.5px;color:var(--side-mut);padding:14px 12px 4px;font-weight:600}
#tabs button{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;color:var(--side-ink);font:inherit;font-size:14px;padding:4px 12px;border-radius:10px;cursor:pointer;text-align:start;position:relative;line-height:2.2}
#tabs button svg{opacity:.85}
#tabs button:hover{background:rgba(255,255,255,.06);color:#fff}
#tabs button[aria-selected="true"]{background:linear-gradient(90deg,rgba(37,99,235,.35),rgba(37,99,235,.9));color:#fff;font-weight:600;box-shadow:0 4px 14px rgba(37,99,235,.35)}
#tabs button[aria-selected="true"] svg{opacity:1}
#tabs button span{flex:1}
.badge{font-family:var(--ui);font-size:11px;font-weight:700;background:#f59e0b;color:#1f1300;border-radius:10px;padding:0 7px;line-height:18px;min-width:20px;text-align:center}
.side-foot{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid rgba(255,255,255,.07);font-size:12.5px;color:var(--side-mut)}
.side-foot .ver{margin-inline-start:auto;font-family:var(--ui)}
.dot{width:9px;height:9px;border-radius:50%;background:#22c55e;display:inline-block;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.dot.off{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.2)}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 24px;background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding-top:max(10px,env(safe-area-inset-top))}
.tb-title{flex:1;min-width:0}
.tb-title h1{margin:0;font-size:19px;line-height:2.1;font-weight:700}
.tb-title p{margin:0;font-size:12.5px;color:var(--muted);line-height:2.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-right{display:flex;align-items:center;gap:8px}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:10px;cursor:pointer}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
#menuBtn{display:none}
.user-chip{display:flex;align-items:center;gap:10px;padding:4px 6px 4px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.avatar{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--accent-2),var(--violet));color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--ui)}
.uname b{display:block;font-size:13.5px;line-height:1.9}
.uname small{display:block;font-size:11.5px;color:var(--muted);line-height:1.8}
.content{padding:20px 24px 90px;max-width:1400px;width:100%}
.side-scrim{position:fixed;inset:0;background:rgba(5,10,25,.5);z-index:25}
.bottomnav{display:none}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 0 0 auto;width:min(280px,84vw);transform:translateX(105%);transition:transform .22s ease,visibility .22s;visibility:hidden}
  .side.open{transform:none;visibility:visible;box-shadow:-10px 0 40px rgba(0,0,0,.3)}
  .shell{background:none}
  #menuBtn{display:grid}
  .topbar{padding:8px 14px;padding-top:max(8px,env(safe-area-inset-top))}
  .uname{display:none}.user-chip{padding:3px;border:0;background:none}
  .content{padding:14px 14px calc(88px + env(safe-area-inset-bottom))}
  .bottomnav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;inset:auto 0 0 0;z-index:22;background:var(--panel);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(15,27,45,.06)}
  .bottomnav button{border:0;background:none;color:var(--muted);font:inherit;font-size:11.5px;display:flex;flex-direction:column;align-items:center;gap:0;padding:4px 0;border-radius:10px;cursor:pointer;line-height:1.9}
  .bottomnav button[aria-current="page"]{color:var(--accent);font-weight:700}
  .bottomnav button[aria-current="page"] svg{stroke-width:2.2}
}

/* ---------- pages ---------- */
section.page{display:flex;flex-direction:column;gap:14px}
h3{font-size:16px;margin:6px 0 0;line-height:2.1;font-weight:700}
input,select,textarea{font:inherit;color:var(--ink)}
.search{position:relative}
.search input,.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--panel);transition:border-color .15s,box-shadow .15s}
.search input{font-size:16px;padding:12px 44px 12px 14px;background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat right 14px center/20px;box-shadow:var(--shadow);border-color:var(--line)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.field{display:flex;flex-direction:column;gap:4px;font-size:13.5px;font-weight:600;color:var(--muted)}
.field input,.field select,.field textarea{font-family:var(--ui);font-size:15.5px;line-height:1.4;font-weight:400;color:var(--ink)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.hint{font-size:13px;color:var(--muted);margin:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.card h2{font-size:17px;margin:0;line-height:2.1;font-weight:700}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-h h3{margin:0;font-size:15px}
.list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden;box-shadow:var(--shadow)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:9px 16px;border-top:1px solid var(--line);text-align:start;background:none;border-inline:0;border-bottom:0;color:inherit;font:inherit;width:100%}
button.row{cursor:pointer}
.row:first-child{border-top:0}
button.row:hover,button.row:focus-visible{background:var(--accent-soft);outline:none}
.row .name{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.row .meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:2px 12px;font-size:12.5px;color:var(--muted)}
.row .meta b{color:var(--ink);font-weight:500}
.row .amt{direction:ltr;unicode-bidi:isolate;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;font-family:var(--ui)}
.stamp{font-size:11.5px;font-weight:700;border-radius:20px;padding:1px 10px;white-space:nowrap;line-height:1.7;display:inline-block}
.stamp.paid{color:#047857;background:#d1fae5}.stamp.new{color:var(--warn);background:var(--warn-soft)}.stamp.off{color:var(--danger);background:var(--danger-soft)}.stamp.ep{color:var(--ep);background:var(--ep-soft)}.stamp.sync{color:var(--muted);border:1px dashed var(--line2)}
.empty{padding:28px 16px;text-align:center;color:var(--muted);background:var(--panel);border:1px dashed var(--line2);border-radius:var(--r)}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.btn{font:inherit;font-size:14px;font-weight:600;line-height:2;border-radius:10px;padding:7px 16px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s,transform .05s}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--accent-soft);outline-offset:1px}
.btn.primary{background:linear-gradient(180deg,var(--accent-2),var(--accent));border-color:var(--accent);color:var(--accent-ink);box-shadow:0 4px 12px rgba(37,99,235,.25)}
.btn.primary:hover{color:#fff;filter:brightness(1.07)}
.btn.big{padding:11px 16px;font-size:16px}
.btn.wide{flex:1}
.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.btn[disabled]{opacity:.5;cursor:default}
.linkbtn{background:none;border:0;color:var(--accent);font:inherit;font-size:13px;cursor:pointer;font-weight:600;padding:0}
.note{font-size:13.5px;border-radius:10px;padding:8px 14px;border:1px solid transparent}
.note.warn{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 25%,transparent)}.note.err{background:var(--danger-soft);color:var(--danger)}.note.ok{background:var(--ep-soft);color:var(--ep)}

/* summary tiles */
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.sum div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;box-shadow:var(--shadow)}
.sum span{display:block;font-size:12.5px;color:var(--muted)}
.sum strong{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;font-family:var(--ui);line-height:1.4}
.sum .neg strong{color:var(--danger)}
.sgroup{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.sgt{font-weight:700;font-size:13.5px;color:var(--muted)}
.sgroup .sum div.tot{border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:var(--accent-soft)}
.sgroup .sum div.tot strong{color:var(--accent)}
.sgroup.ep .sum div.tot{border-color:color-mix(in srgb,var(--ep) 35%,transparent);background:var(--ep-soft)}
.sgroup.ep .sum div.tot strong{color:var(--ep)}
.sgroup .sum div.hand{background:linear-gradient(135deg,#0b1f4d,#1d4ed8);border:0;color:#fff}
.sgroup .sum div.hand span{color:#c7d2fe}
.sgroup .sum div.hand strong{font-size:25px}

.chk{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600}
.chk input{width:20px;height:20px;accent-color:var(--ep)}
.epbox{border:1px dashed var(--line2);border-radius:10px;padding:8px 12px}
.epbox:has(input:checked){border-color:var(--ep);background:var(--ep-soft);color:var(--ep)}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filters select,.filters input{padding:8px 10px;border:1px solid var(--line2);border-radius:10px;background:var(--panel);font-size:14px;max-width:100%}
.seg{display:inline-flex;align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px;box-shadow:var(--shadow)}
.seg button{border:0;background:none;font:inherit;font-weight:600;padding:6px 18px;cursor:pointer;color:var(--muted);border-radius:9px}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.ptabs{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px;align-self:flex-start;box-shadow:var(--shadow)}
.ptabs button{font:inherit;font-size:14px;font-weight:600;border:0;background:none;color:var(--muted);border-radius:9px;padding:5px 16px;cursor:pointer}
.ptabs button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}

/* sheet */
.sheet{position:fixed;inset:auto 0 0 0;z-index:50;background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -10px 40px rgba(0,0,0,.25);border-radius:20px 20px 0 0;padding:18px max(16px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));max-height:92vh;overflow:auto}
.sheet .inner{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.sheet h2{margin:0;font-size:19px;line-height:2.1}
@media (min-width:901px){.sheet{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(680px,92vw);border-radius:18px;border:1px solid var(--line)}}
.scrim{position:fixed;inset:0;z-index:49;background:rgba(5,10,25,.45);backdrop-filter:blur(2px)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:14px;margin:0;background:var(--bg);border-radius:12px;padding:10px 14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;align-self:center;font-variant-numeric:tabular-nums;font-weight:600}
.kv .tot{font-weight:800;color:var(--accent)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));z-index:60;background:#0f1b2d;color:#fff;border-radius:12px;padding:8px 18px;max-width:92vw;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.3)}
textarea.mono{width:100%;font:12.5px/1.4 ui-monospace,Menlo,monospace;direction:ltr;text-align:left;min-height:110px;border:1px solid var(--line2);border-radius:10px;padding:8px}
details.card summary{cursor:pointer;font-weight:700}
.cols{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:6px 10px}
.cols label{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;font-size:14px;padding:2px 0}
.cols select{padding:4px;border-radius:6px;border:1px solid var(--line);background:var(--bg);max-width:48vw}
@media (prefers-reduced-motion:no-preference){.sheet{animation:up .2s ease-out}@keyframes up{from{opacity:.3;margin-top:20px}}}

/* register / data table */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:var(--shadow);max-height:72vh}
table.reg{border-collapse:separate;border-spacing:0;width:100%;min-width:680px;font-size:13.5px}
table.reg th,table.reg td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:right;vertical-align:middle}
table.reg thead th{position:sticky;top:0;background:#f8fafc;color:var(--muted);font-weight:700;font-size:12.5px;white-space:nowrap;z-index:1;border-bottom:1px solid var(--line2)}
@media (prefers-color-scheme:dark){table.reg thead th{background:#0e182b}}
table.reg tbody tr{cursor:pointer;transition:background .1s}
table.reg tbody tr:hover,table.reg tbody tr:focus{background:var(--accent-soft);outline:none}
table.reg td.nm span:first-child{font-weight:700;display:block;line-height:2.1}
table.reg td.nm small{display:block;color:var(--muted);font-size:11px;line-height:1.3;font-family:var(--ui)}
table.reg td.n{font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap;font-family:var(--ui)}
table.reg td.ph{direction:ltr}
table.reg td.dt{font-size:12px;color:var(--muted)}
table.reg td.rem{font-weight:700}
table.reg tr.paid td.rem{color:var(--danger)}
table.reg tr.part td.rem{color:var(--warn)}
table.reg tr.paid{background:var(--paid-row)!important}
table.reg tr.ep td{background:var(--ep-soft)}
.list:empty{display:none}
.bar{height:8px;background:var(--line);border-radius:5px;min-width:80px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:5px}
.bar i.neg{background:var(--danger)}
#cmpPick{display:flex;flex-wrap:wrap;gap:6px}
#cmpPick .btn{font-size:13px}

/* ---------- dashboard (compact) ---------- */
.dash{gap:12px}
.kpis{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:0;min-width:0;position:relative;border-top:3px solid var(--kc,var(--accent))}
.kpi[data-go]{cursor:pointer}
.kpi[data-go]:hover{border-color:var(--kc,var(--accent));border-top-width:3px}
.kpi .lb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);line-height:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .lb svg{width:15px;height:15px;color:var(--kc,var(--accent));flex:none}
.kpi .vl{font-family:var(--ui);font-size:19px;font-weight:700;line-height:1.35;font-variant-numeric:tabular-nums;white-space:nowrap;direction:ltr;text-align:right;unicode-bidi:isolate;letter-spacing:-.01em}
.kpi .vl small{font-size:11px;font-weight:600;color:var(--muted);margin-right:3px}
.kpi .sb{font-size:11px;color:var(--muted);line-height:1.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .pbar{height:4px;border-radius:3px;background:var(--line);margin-top:4px;overflow:hidden}
.kpi .pbar i{display:block;height:100%;border-radius:3px;background:var(--kc,var(--accent))}
.c-blue{--kc:#2563eb}.c-green{--kc:#059669}.c-amber{--kc:#d97706}.c-red{--kc:#dc2626}.c-violet{--kc:#7c3aed}.c-cyan{--kc:#0891b2}.c-navy{--kc:#1e3a8a}
.dgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dgrid .card{padding:12px 14px;gap:8px}
.dgrid .span2{grid-column:span 2}.dgrid .span3{grid-column:1/-1}
.card-h h3{font-size:13.5px;line-height:2}
.chart svg{width:100%;height:auto;display:block;stroke:none;stroke-width:0}
.chart text{font-family:var(--ui);font-size:10.5px;fill:var(--muted)}
.hb{display:flex;flex-direction:column;gap:8px}
.hb-row{display:grid;grid-template-columns:72px 1fr auto;gap:8px;align-items:center;font-size:12.5px;line-height:1.9}
.hb-row .lab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-row .val{font-family:var(--ui);font-weight:600;font-variant-numeric:tabular-nums;font-size:12px;white-space:nowrap;direction:ltr}
.hb-track{height:7px;background:var(--line);border-radius:4px;overflow:hidden;position:relative}
.hb-track i{position:absolute;inset:0 0 0 auto;border-radius:4px;background:var(--accent)}
.hb-track i.b2{background:#bfdbfe}.hb-track i.g{background:#10b981}.hb-track i.r{background:#f87171}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--muted);line-height:1.9}
.legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-inline-end:5px;vertical-align:middle}
.donut-wrap{display:flex;align-items:center;gap:14px;justify-content:center;height:100%}
.donut-wrap .chart{width:130px;flex:none}
.donut-wrap .legend{flex-direction:column;gap:2px;font-size:12.5px}
.donut-wrap .legend b{font-family:var(--ui);color:var(--ink);margin-inline-start:6px}
#dRecent .tablewrap{box-shadow:none;max-height:none}
#dRecent table.reg{min-width:560px;font-size:12.5px}
#dRecent table.reg td,#dRecent table.reg th{padding:4px 10px}
.dash .empty{padding:14px;font-size:12.5px}
@media (max-width:1300px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1000px){.dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.dgrid .span2{grid-column:1/-1}}
@media (max-width:640px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.kpi .vl{font-size:17px}.dgrid{grid-template-columns:1fr}}

@media print{
  body *{visibility:hidden}
  body.print-sheet #sheet,body.print-sheet #sheet *{visibility:visible}
  body.print-sheet #sheet{position:absolute;inset:0;transform:none;max-height:none;overflow:visible;box-shadow:none;border:0;width:auto}
  body.print-sheet #sheet .btns,body.print-sheet #sheet .ptabs{display:none}
  body.print-sheet #results{visibility:hidden}
  #results,#results *{visibility:visible}
  #results{position:absolute;inset:0}
  .tablewrap{overflow:visible;border:0;max-height:none;box-shadow:none}
  table.reg{font-size:11px;min-width:0}
  table.reg thead th{position:static}
}

/* collect register v2: sticky serial / ID / name, previous-month columns */
table.reg2{min-width:1180px}
table.reg2 .stk{position:sticky;background:var(--panel);z-index:1}
table.reg2 thead .stk{z-index:3;background:#f8fafc}
table.reg2 .s1{right:0;width:44px;min-width:44px;max-width:44px}
table.reg2 .s2{right:44px;width:60px;min-width:60px;max-width:60px}
table.reg2 .s3{right:104px;min-width:150px;max-width:200px;box-shadow:-6px 0 8px -6px rgba(15,27,45,.18)}
table.reg2 tr:nth-child(even) .stk{background:var(--panel)}
table.reg2 tr.paid .stk{background:var(--paid-row)}
table.reg2 tr:hover .stk{background:var(--accent-soft)}
table.reg2 td.pk{font-size:12px;color:var(--muted)}
table.reg2 th.pv{background:#eef2f7}
table.reg2 td.pv{background:color-mix(in srgb,var(--bg) 70%,transparent);color:var(--muted)}
table.reg2 td.pv.due{color:var(--danger);font-weight:700;background:var(--danger-soft)}
table.reg2 td.pv.adv{color:var(--ep);font-weight:600}
table.reg2 td.tot{font-weight:700}
@media (prefers-color-scheme:dark){table.reg2 thead .stk,table.reg2 th.pv{background:#0e182b}}

/* permission editor */
.perms{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--bg)}
.pg-t{font-weight:700;font-size:13px;color:var(--muted)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0 14px}
.pgrid .chk{font-weight:500;font-size:13.5px}
.pgrid .chk input{accent-color:var(--accent);width:18px;height:18px}
@media (max-width:640px){table.reg2 .s3{min-width:112px;max-width:130px}table.reg2 .s2{width:50px;min-width:50px;max-width:50px}table.reg2 .s3{right:94px}}

/* deferred bills + team table */
table.reg tr.defer{background:#fef3c7!important}
table.reg2 tr.defer .stk{background:#fef3c7}
@media (prefers-color-scheme:dark){table.reg tr.defer{background:#3b2f0e!important}table.reg2 tr.defer .stk{background:#3b2f0e}}
.defer-box{box-shadow:none;background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.defer-box summary{color:var(--warn)}
.dfbox{display:flex;flex-direction:column;gap:8px}
.dfrow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);background:var(--warn-soft);border-radius:10px;padding:4px 12px;font:inherit;color:var(--ink);cursor:pointer;text-align:start;line-height:2}
.dfrow span{color:var(--muted);font-size:12.5px}
.dfrow strong{font-family:var(--ui);color:var(--warn)}
#dTeam table.reg{min-width:760px;font-size:12.5px}
#dTeam table.reg td,#dTeam table.reg th{padding:3px 10px}
#dTeam .tablewrap{box-shadow:none;max-height:none}
table.reg tr.grp td{background:var(--accent-soft);font-weight:700;color:var(--accent);cursor:default}
table.reg tr.tot td{background:var(--bg);font-weight:700;cursor:default}
table.reg td.due{color:var(--danger)!important;background:var(--danger-soft)}

/* mobile fit: never let wide tables stretch the page; tighter type */
.dgrid>*,.kpis>*,section.page>*{min-width:0}
@media (max-width:640px){
  body{font-size:13.5px;line-height:2}
  .dgrid{grid-template-columns:minmax(0,1fr)}
  .content{padding:10px 10px calc(80px + env(safe-area-inset-bottom))}
  .topbar{padding:6px 10px;padding-top:max(6px,env(safe-area-inset-top))}
  .tb-title h1{font-size:16px;line-height:1.9}
  .tb-title p{font-size:11px;line-height:1.8}
  .icon-btn{width:34px;height:34px}
  .avatar{width:28px;height:28px}
  .kpis{gap:6px}
  .kpi{padding:6px 9px;border-top-width:2px}
  .kpi .lb{font-size:10.5px;line-height:1.9;gap:4px}
  .kpi .lb svg{width:13px;height:13px}
  .kpi .vl{font-size:15.5px;line-height:1.3}
  .kpi .vl small{font-size:9.5px}
  .kpi .sb{font-size:9.5px;line-height:1.7}
  .kpi .pbar{height:3px;margin-top:2px}
  .dgrid{gap:8px}
  .dgrid .card{padding:8px 10px;gap:4px;border-radius:12px}
  .card-h h3{font-size:12px;line-height:1.9}
  .chart text{font-size:12px}
  .hb{gap:4px}.hb-row{font-size:11.5px;grid-template-columns:62px 1fr auto;line-height:1.8}
  .donut-wrap .chart{width:100px}.donut-wrap .legend{font-size:11.5px}
  .legend{font-size:10.5px}
  .dfrow{padding:2px 10px;line-height:1.9;font-size:12px}
  #dRecent table.reg,#dTeam table.reg{font-size:11px}
  #dTeam table.reg{min-width:620px}
  #dRecent table.reg{min-width:480px}
  .bottomnav button{font-size:10.5px;line-height:1.7}
  .bottomnav svg{width:19px;height:19px}
}
#dTeam td.vl,#dRecent td.vl{white-space:nowrap}

/* ---- phone: much tighter (Nastaliq is tall) ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:640px){
  body{font-size:12.5px;line-height:1.85}
  .tb-title h1{font-size:14px;line-height:1.8}
  .tb-title p{font-size:9.5px;line-height:1.7}
  .icon-btn{width:30px;height:30px;border-radius:8px}.icon-btn svg{width:17px;height:17px}
  .avatar{width:26px;height:26px;font-size:12px}
  section.page{gap:8px}
  #status{font-size:10.5px;padding:2px 10px;line-height:1.8}
  .note{font-size:11px;padding:3px 10px;line-height:1.8}
  .search input{font-size:13px;padding:6px 36px 6px 10px;background-size:16px;background-position:right 10px center}
  .filters{gap:5px}
  .filters select,.filters input{font-size:11.5px;padding:3px 6px;border-radius:8px}
  .filters .btn{font-size:11.5px;padding:2px 10px}
  .hint{font-size:10.5px}
  .btn{font-size:12.5px;padding:3px 12px;line-height:1.9}
  .btn.big{font-size:14px;padding:6px 12px}
  .field{font-size:11.5px}
  .field input,.field select,.field textarea{font-size:14px;padding:6px 9px}
  .card{padding:10px 12px;gap:8px}
  .card h2{font-size:14px;line-height:1.9}
  h3{font-size:13px;line-height:1.9}
  .sum{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .sum div{padding:4px 10px}.sum span{font-size:10.5px}.sum strong{font-size:15px}
  .sgroup .sum div.hand strong{font-size:17px}
  .ptabs button,.seg button{font-size:11.5px;padding:2px 10px}
  table.reg{font-size:11.5px}
  table.reg th,table.reg td{padding:3px 6px}
  table.reg thead th{font-size:10.5px}
  table.reg td.nm span:first-child{line-height:1.7}
  table.reg td.dt{font-size:10px}
  table.reg2{min-width:960px}
  table.reg2 .s1{width:30px;min-width:30px;max-width:30px}
  table.reg2 .s2{right:30px;width:40px;min-width:40px;max-width:40px}
  table.reg2 .s3{right:70px;min-width:96px;max-width:116px}
  table.reg2 td.pk{font-size:10px}
  .tablewrap{max-height:68vh;border-radius:10px}
  .sheet{padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
  .sheet h2{font-size:15px}
  .kv{font-size:12px;padding:6px 10px}
  .bottomnav{padding:3px 4px calc(3px + env(safe-area-inset-bottom))}
  .bottomnav button{font-size:9.5px;line-height:1.6;padding:2px 0}
  .bottomnav svg{width:18px;height:18px}
  #tabs button{font-size:13px}
}

/* ---- phone v3: smaller text + customer cards ---- */
#status{cursor:pointer}
.mlist{display:flex;flex-direction:column;gap:6px}
.mrow{display:flex;flex-direction:column;gap:0;width:100%;text-align:start;font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-inline-start:4px solid var(--danger);border-radius:10px;padding:5px 10px;cursor:pointer}
.mrow.paid{border-inline-start-color:#10b981;background:var(--paid-row)}
.mrow.part{border-inline-start-color:#f59e0b}
.mrow.defer{border-inline-start-color:#eab308;background:#fef3c7}
@media (prefers-color-scheme:dark){.mrow.defer{background:#3b2f0e}}
.mr-top{display:flex;justify-content:space-between;align-items:center;gap:8px;line-height:1.7}
.mr-no{font-size:10.5px;color:var(--muted)}
.mr-amt{font-size:11px;color:var(--danger);white-space:nowrap}
.mr-amt b{font-family:var(--ui);font-size:14px}
.mrow.paid .mr-amt{color:#059669;font-weight:700}
.mr-name{font-weight:700;font-size:13.5px;line-height:1.75;overflow-wrap:anywhere}
.mr-meta,.mr-bill{display:flex;flex-wrap:wrap;gap:0 10px;font-size:10.5px;color:var(--muted);line-height:1.8}
.mr-meta .num{font-family:var(--ui)}
.mr-bill b{font-family:var(--ui);color:var(--ink);font-weight:600}
.mr-bill .due,.mr-bill .due b{color:var(--danger)}
.mr-bill .note-s{color:var(--warn)}
@media (max-width:640px){
  body{font-size:11.5px;line-height:1.8}
  .tb-title h1{font-size:13px;line-height:1.7}
  .tb-title p{font-size:9px;line-height:1.6}
  #status{font-size:10px;padding:1px 8px;line-height:1.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .search input{font-size:12.5px;padding:4px 32px 4px 8px}
  .filters select,.filters input,.filters .btn{font-size:10.5px;padding:1px 6px}
  .hint{font-size:9.5px;line-height:1.7}
  .kpi .lb{font-size:9.5px}.kpi .vl{font-size:14px}.kpi .sb{font-size:9px}
  .card-h h3{font-size:11px}
  table.reg{font-size:10.5px}table.reg thead th{font-size:9.5px}
  .bottomnav button{font-size:9px}
  #tabs button{font-size:12px}
  .btn{font-size:11.5px}
  .field{font-size:10.5px}
  .sheet h2{font-size:14px}.kv{font-size:11px}
}
.mr-top{align-items:baseline}
.mr-name{font-size:13px;line-height:1.7;flex:1;min-width:0}
.mr-meta{gap:0 8px}
.mrow{padding:3px 10px}

/* phone cards for every table */
.glist{display:flex;flex-direction:column;gap:5px}
.gcard{display:block;width:100%;text-align:start;font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-inline-start:3px solid var(--line2);border-radius:9px;padding:3px 9px;cursor:pointer}
div.gcard{cursor:default}
.gcard.paid{background:var(--paid-row);border-inline-start-color:#10b981}
.gcard.part{border-inline-start-color:#f59e0b}
.gcard.ep{border-inline-start-color:var(--ep)}
.gcard.defer{border-inline-start-color:#eab308}
.gcard.tot{background:var(--bg);border-style:dashed}
.gcard-h{font-weight:700;font-size:11.5px;color:var(--accent);padding:4px 2px 0;line-height:1.8}
.g-ttl{display:flex;align-items:baseline;gap:6px;line-height:1.75}
.g-no{font-family:var(--ui);font-size:10px;color:var(--muted)}
.g-name{font-weight:700;font-size:12.5px;overflow-wrap:anywhere}
.g-kv{display:flex;flex-wrap:wrap;gap:0 10px;line-height:1.75}
.gi{font-size:11px;white-space:nowrap}
.gi small{color:var(--muted);font-size:9.5px;margin-inline-end:3px}
.gi b{font-weight:600;font-family:var(--ui),var(--urdu)}
.gi.rem b{font-weight:800}
.gi.due b{color:var(--danger)}
.gcard input[type=checkbox]{width:18px;height:18px}

/* dashboard: recent entries + team as tiles */
.rcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px}
.rc{display:flex;flex-direction:column;gap:0;text-align:start;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-inline-start:3px solid var(--accent);border-radius:9px;padding:4px 9px;cursor:pointer;min-width:0}
.rc.ep{border-inline-start-color:var(--ep)}.rc.neg{border-inline-start-color:var(--danger)}
.rc-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px;line-height:1.7}
.rc-name{font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rc-amt{font-size:13.5px;white-space:nowrap}.rc.neg .rc-amt{color:var(--danger)}
.rc-meta{display:flex;flex-wrap:wrap;gap:0 7px;font-size:10px;color:var(--muted);line-height:1.7}
.tmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.tm{display:flex;flex-direction:column;gap:2px;text-align:start;font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:10px;padding:6px 10px;box-shadow:var(--shadow);min-width:0}
button.tm{cursor:pointer}button.tm:hover{border-color:var(--accent)}
.tm.owes{border-top-color:var(--danger)}
.tm.tot{background:var(--accent-soft);border-top-color:var(--accent);box-shadow:none}
.tm-h{display:flex;justify-content:space-between;align-items:baseline;gap:6px;line-height:1.7;font-weight:700;font-size:12.5px}
.tm-h small{font-weight:400;color:var(--muted);font-size:10px;white-space:nowrap}
.tm-s{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.tm-s div{background:var(--bg);border-radius:7px;padding:1px 6px;display:flex;flex-direction:column;line-height:1.5}
.tm.tot .tm-s div{background:var(--panel)}
.tm-s small{font-size:9.5px;color:var(--muted);line-height:1.9}
.tm-s b{font-family:var(--ui);font-size:12.5px;font-weight:700}
.tm-f{display:flex;flex-wrap:wrap;gap:0 10px;font-size:10.5px;color:var(--muted);line-height:1.9}
.tm-f b{font-family:var(--ui);color:var(--ink)}
.tm-due b{color:var(--danger)}
.tm.owes .tm-due{font-weight:700;color:var(--danger)}
.tm:not(.owes) .tm-due b{color:var(--ink)}
.tm-grp{grid-column:1/-1;font-weight:700;font-size:12px;color:var(--accent);padding-top:4px;line-height:1.9}
@media (max-width:640px){.rcgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.tmgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}.tm-s b{font-size:11.5px}}
/* recent entries v2: name like village labels, amount + receiver below, nothing truncated */
.rc{gap:0;padding:4px 9px}
.rc-name{font-weight:400;font-size:12.5px;line-height:1.8;white-space:normal;overflow:visible;overflow-wrap:anywhere}
.rc-mid{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;line-height:1.7}
.rc-amt{font-size:13.5px}
.rc-by{font-size:11.5px;color:var(--ink)}
.rc-by::before{content:"• ";color:var(--muted)}
.rc-meta{font-size:9.5px}
@media (max-width:640px){.rc-name{font-size:11.5px}.rc-amt{font-size:12.5px}.rc-by{font-size:10.5px}}
@media (max-width:640px){.rcgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* recent entries v3: name / بل 1,600 + time / village + receiver */
.rc-mid{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 8px;line-height:1.75}
.rc-amtw{display:inline-flex;align-items:baseline;gap:5px}
.rc-type{font-size:11px;color:var(--muted)}
.rc-time{font-size:9.5px;color:var(--muted);white-space:nowrap}
.rc-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 8px;font-size:11px;line-height:1.8;color:var(--ink)}
.rc-vil{color:var(--muted)}
.rc-by::before{content:none}
.rc-by{font-size:11px;font-weight:600}
@media (max-width:640px){.rc-type,.rc-meta,.rc-by{font-size:10.5px}.rc-time{font-size:9px}}

/* ---------- team dashboard ---------- */
.tsum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:6px}
.ts{background:var(--bg);border-radius:10px;padding:6px 10px;border-inline-start:3px solid var(--kc,var(--accent));min-width:0}
.ts-l{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);line-height:1.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-l svg{width:14px;height:14px;color:var(--kc,var(--accent))}
.ts-v{font-size:17px;font-weight:700;line-height:1.4;color:var(--kc,var(--ink));direction:ltr;text-align:right}
.ts.c-blue .ts-v,.ts.c-navy .ts-v{color:var(--ink)}
.tg{margin-top:6px}
.tg-h{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:2px 2px 4px}
.tg-h b{font-size:13px}.tg-h small{display:block;font-size:10.5px;color:var(--muted);line-height:1.6}
.tg-tot{font-family:var(--ui);font-size:15px;color:var(--accent)}
.tg-stack{display:flex;height:8px;border-radius:5px;overflow:hidden;background:var(--line);margin-bottom:8px;direction:rtl}
.tg-stack i{display:block;height:100%}
.pcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.pc{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px;min-width:0;position:relative;overflow:hidden}
.pc.owes{border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}
.pc-h{display:flex;align-items:center;gap:8px}
.pc-av{width:34px;height:34px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;flex:none;line-height:1}
.pc-n{flex:1;min-width:0;display:flex;flex-direction:column}
.pc-n b{font-size:13px;line-height:1.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-n small{font-size:10px;color:var(--muted);line-height:1.5}
.pc-pill{font-size:10.5px;font-weight:700;border-radius:20px;padding:0 9px;line-height:2;white-space:nowrap;flex:none}
.pc-pill.ok{background:#d1fae5;color:#047857}.pc-pill.bad{background:var(--danger-soft);color:var(--danger)}.pc-pill.na{background:var(--accent-soft);color:var(--accent)}
@media (prefers-color-scheme:dark){.pc-pill.ok{background:#0f2b23;color:#34d399}}
.pc-big{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-top:2px}
.pc-big small{font-size:10.5px;color:var(--muted)}
.pc-big b{font-family:var(--ui);font-size:19px;font-weight:800;letter-spacing:-.01em}
.pc-bar{height:6px;border-radius:4px;background:var(--line);overflow:hidden}
.pc-bar i{display:block;height:100%;border-radius:4px;margin-inline-start:0}
.pc-row{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:2px}
.pc-row span{display:flex;flex-direction:column;line-height:1.45}
.pc-row small{font-size:9.5px;color:var(--muted);line-height:1.8}
.pc-row b{font-family:var(--ui);font-size:12.5px;font-weight:700}
.pc-btn{margin-top:4px;font-size:11.5px;padding:1px 10px;align-self:flex-start}
@media (max-width:900px){.tsum{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.tsum{gap:6px}.ts{padding:4px 8px}.ts-l{font-size:9.5px}.ts-v{font-size:14px}.pcgrid{grid-template-columns:minmax(0,1fr);gap:8px}.pc{padding:8px 10px}.pc-big b{font-size:17px}.pc-av{width:30px;height:30px;font-size:13px}}
.danger-card{border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}
.danger-card summary{color:var(--danger)}

/* ---------- activate page ---------- */
.act-head{display:flex;flex-direction:column;gap:8px}
.act-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.act-stats .ts{background:var(--panel);box-shadow:var(--shadow);border:1px solid var(--line);border-inline-start:3px solid var(--kc)}
.act-bar .seg{flex-wrap:wrap}
.act-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tool{display:flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:600;font-size:13px;line-height:2;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:12px;padding:6px 8px;cursor:pointer;box-shadow:var(--shadow)}
.tool svg{width:17px;height:17px;color:var(--accent)}
.tool:hover{border-color:var(--accent)}
.tool.go{background:linear-gradient(180deg,#16a34a,#059669);border-color:#059669;color:#fff}
.tool.go svg{color:#fff}
.acgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.ac{display:flex;flex-direction:column;gap:4px;text-align:start;font:inherit;color:var(--ink);background:var(--panel);border:1.5px solid var(--line);border-radius:14px;padding:8px 12px;cursor:pointer;box-shadow:var(--shadow);transition:border-color .12s,background .12s}
.ac:hover{border-color:var(--accent)}
.ac.on{border-color:#059669;background:color-mix(in srgb,#10b981 9%,var(--panel))}
.ac.defer{border-style:dashed;border-color:#eab308}
.ac.defer.on{border-style:solid;border-color:#059669}
.ac-top{display:flex;align-items:center;gap:8px}
.ac-tick{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center;flex:none;color:transparent}
.ac-tick svg{width:14px;height:14px}
.ac.on .ac-tick{background:#059669;border-color:#059669;color:#fff}
.ac-name{flex:1;min-width:0;display:flex;flex-direction:column}
.ac-name b{font-size:13.5px;line-height:1.8;overflow-wrap:anywhere}
.ac-name small{font-size:10.5px;color:var(--muted);line-height:1.6}
.ac-amt{font-family:var(--ui);font-size:17px;font-weight:800;white-space:nowrap}
.ac-ids{display:flex;flex-wrap:wrap;gap:4px}
.chip{font-size:10.5px;border-radius:20px;padding:0 8px;line-height:1.9;background:var(--bg);border:1px solid var(--line);white-space:nowrap}
.chip.num{font-family:var(--ui)}
.chip.cash{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.chip.ep{background:var(--ep-soft);border-color:transparent;color:var(--ep)}
.chip.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.chip.bad{background:var(--danger-soft);border-color:transparent;color:var(--danger);font-weight:700}
.ac-ft{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--muted);line-height:1.8}
.act-empty{display:flex;flex-direction:column;align-items:center;gap:2px;padding:30px 10px;background:var(--panel);border:1px dashed var(--line2);border-radius:14px;color:var(--muted)}
.act-empty svg{width:34px;height:34px;color:#10b981}
.act-empty b{color:var(--ink);font-size:15px}
@media (max-width:640px){.act-stats{gap:6px}.act-tools{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.tool{font-size:11.5px;padding:3px 6px}.acgrid{grid-template-columns:minmax(0,1fr);gap:7px}.ac{padding:6px 10px}.ac-amt{font-size:15px}.ac-name b{font-size:12.5px}}
/* per-login account: cash vs EasyPaisa */
.pc-acct{margin-top:10px;border:1px solid var(--line,#e5e7eb);border-radius:10px;overflow:hidden;font-size:12.5px}
.pa-r{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,1fr));gap:4px;padding:6px 10px;align-items:center}
.pa-r+.pa-r{border-top:1px solid var(--line,#e5e7eb)}
.pa-h{background:rgba(37,99,235,.06);font-size:11px;color:var(--muted,#64748b);font-weight:600}
.pa-r b{font-weight:700;text-align:left;direction:ltr;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pa-h span:not(:first-child){text-align:left}
.pa-k{font-weight:700}
.pa-r.ep .pa-k{color:#059669}
.pa-r b.bad{color:#dc2626}.pa-r b.ok{color:#059669}
.dep-seg{display:flex;gap:8px;margin:6px 0}
.dep-seg .btn{flex:1}
.dep-seg .btn.on{background:var(--blue,#2563eb);color:#fff;border-color:transparent}
.dep-left{font-weight:700;margin:2px 0 8px}
.mine-acct{margin-bottom:10px}
.mine-acct .pc-acct{background:var(--card,#fff)}
/* highlighter lines: colour = who took the bill and how */
table.reg tr.hl, table.reg tr.hl:nth-child(even){background:var(--hlbg)!important}
table.reg2 tr.hl .stk{background:linear-gradient(var(--hlbg),var(--hlbg)),var(--panel)!important}
table.reg2 tr.hl td.pv{background:transparent}
table.reg tr.hl td.s1{box-shadow:inset -5px 0 0 var(--hl)}
table.reg tr.hl td{font-weight:600}
.mrow.hl{background:linear-gradient(var(--hlbg),var(--hlbg)),var(--panel)!important;border-inline-start:6px solid var(--hl)!important;border-color:var(--hl)}
.mrow.hl .mr-amt{color:var(--hl)}
@keyframes jo-blink{0%,55%{opacity:1}70%,90%{opacity:.15}100%{opacity:1}}
.blink{animation:jo-blink 1.2s ease-in-out infinite;color:var(--danger)!important;font-weight:800!important}
td.blink{background:var(--danger-soft)!important}
.hl-legend{display:flex;flex-wrap:wrap;gap:6px 12px;margin:2px 0 8px;font-size:11.5px;color:var(--muted)}
.hl-k{display:inline-flex;align-items:center;gap:5px;min-width:0}
.hl-k i{width:18px;height:10px;border-radius:3px;flex:none;opacity:.9}
.hl-k b{font-size:11px}
.hl-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.hl-pick{display:flex;align-items:center;gap:6px}
.hl-pick select{flex:1;min-width:0}
.hl-sw{width:22px;height:22px;border-radius:6px;flex:none}
@media (max-width:640px){.hl-row{grid-template-columns:minmax(0,1fr)}}
/* ledger + hand-over */
.acct-h{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.acct-h .sgt{margin:0}
.acct-h .btn{padding:7px 14px}
.acct-tr{margin-top:10px}
.pa-r{grid-template-columns:minmax(0,1fr) repeat(4,minmax(0,1fr))}
@media (max-width:640px){.pc-acct{font-size:11px}.pa-r{padding:5px 7px;gap:3px}.pa-h{font-size:10px}}
.dep-seg{flex-wrap:wrap}
td.vl.ind{padding-inline-start:22px!important;color:var(--muted)}
td.vl.lead{font-weight:800}
td.vl.lead0{font-weight:800;color:var(--blue,#2563eb)}
.gcard .vl.ind{opacity:.9}