/* ─── TOKENS ─────────────────────────────────────────────────── */
:root {
  --bg0:#020817;--bg1:#0f172a;--bg2:#1e293b;--bg3:#293548;--bg4:#334155;
  --em:#10b981;--em2:#34d399;--em3:#059669;
  --am:#f59e0b;--am2:#fbbf24;
  --rd:#ef4444;--cy:#06b6d4;--bl:#3b82f6;
  --t0:#f1f5f9;--t1:#cbd5e1;--t2:#64748b;--t3:#334155;
  --bd:rgba(255,255,255,.06);--bd2:rgba(255,255,255,.10);
  --bd-em:rgba(16,185,129,.2);--bd-am:rgba(245,158,11,.2);
  --bd-7:rgba(255,255,255,.07);
  --sh:0 4px 24px rgba(0,0,0,.5);
  --r:20px;--r2:14px;--r3:10px;--r4:8px;
}

/* ─── RESET ──────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:'Nunito',system-ui,sans-serif;font-size:14px;font-weight:600;
  background:var(--bg0);color:var(--t0);min-height:100vh;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-weight:600}
a{color:var(--em2);text-decoration:none}a:hover{text-decoration:underline}

/* ─── TOPBAR ─────────────────────────────────────────────────── */
.topbar{background:rgba(2,8,23,.8);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:100;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.topbar-inner{max-width:1200px;margin:0 auto;padding:0 16px;height:64px;
  display:flex;align-items:center;gap:14px}
.tq-logo{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:800;
  color:#fff;cursor:pointer;flex-shrink:0;letter-spacing:-.4px}
.tq-logo .logo-ic{width:32px;height:32px;background:linear-gradient(135deg,#1a2e22,#0f172a);border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:17px;
  box-shadow:0 0 16px rgba(16,185,129,.35);border:1px solid rgba(16,185,129,.25)}
.topbar-nav{display:flex;align-items:center;gap:6px;flex:1;overflow-x:auto;scrollbar-width:none;padding:0 4px}
.topbar-nav::-webkit-scrollbar{display:none}
.tnav{padding:6px 12px;border-radius:var(--r4);font-size:13px;font-weight:600;
  color:var(--t2);background:none;border:none;cursor:pointer;transition:all .15s;white-space:nowrap}
.tnav:hover{color:var(--t0)}
.tnav.on{color:var(--em2)}
.topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.user-pill{display:flex;align-items:center;gap:6px;padding:5px 12px 5px 8px;
  background:var(--bg1);border-radius:100px;border:1px solid var(--bd)}
.pulse-dot{width:8px;height:8px;background:var(--em);border-radius:50%;animation:pulse 2s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.user-nm{font-size:13px;font-weight:600;color:var(--t1)}
.icon-btn{padding:8px;border-radius:100%;font-size:14px;font-weight:700;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--t2);cursor:pointer;transition:all .15s}
.icon-btn:hover{background:var(--bg2);color:var(--am2)}
.logout-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:100px;
  font-size:13px;font-weight:600;border:1px solid var(--bd);background:var(--bg1);
  color:var(--t1);cursor:pointer;transition:all .15s}
.logout-btn:hover{background:var(--bg2);color:var(--t0)}

@media(max-width:768px){
  .topbar-inner{flex-wrap:wrap;height:auto;padding:10px 14px 8px;gap:8px}
  .tq-logo{width:auto}
  .topbar-nav{order:3;width:100%;flex:none;padding:2px 0}
  .topbar-right{margin-left:auto}
  .logout-btn span{display:none}
}

/* ─── SCREENS ────────────────────────────────────────────────── */
#auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:20px;background:var(--bg0);position:relative;overflow:hidden}
#auth-screen::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 15% 80%,rgba(16,185,129,.08),transparent 55%),
             radial-gradient(ellipse 50% 50% at 85% 10%,rgba(59,130,246,.05),transparent 55%)}
#app-screen,#bill-screen{display:none}
.view{display:none}.view.active{display:block}

/* ─── AUTH ───────────────────────────────────────────────────── */
.auth-box{position:relative;background:var(--bg1);border:1px solid var(--bd);
  border-radius:24px;padding:38px 32px;width:100%;max-width:400px;box-shadow:var(--sh)}
.auth-brand{text-align:center;margin-bottom:24px}
.auth-mark{width:52px;height:52px;background:linear-gradient(135deg,#1a2e22,#0f172a);border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;font-size:26px;
  margin-bottom:12px;box-shadow:0 6px 24px rgba(16,185,129,.3);border:1px solid rgba(16,185,129,.2)}
.auth-brand h1{font-size:26px;font-weight:900;letter-spacing:-.4px}
.auth-brand p{font-size:13px;color:var(--t2);margin-top:4px}
.atabs{display:flex;background:var(--bg2);border-radius:var(--r4);padding:3px;gap:3px;margin-bottom:20px}
.atab{flex:1;padding:8px;text-align:center;border-radius:6px;font-size:13px;font-weight:700;
  color:var(--t2);cursor:pointer;transition:all .18s}
.atab.on{background:var(--bg3);color:var(--t0);box-shadow:0 2px 6px rgba(0,0,0,.15)}

/* ─── FORM ───────────────────────────────────────────────────── */
.fg{margin-bottom:14px}
.fg label{display:block;font-size:10px;font-weight:800;color:var(--t2);
  text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}
.fi{width:100%;padding:11px 14px;background:var(--bg0);border:1px solid var(--bd2);
  border-radius:12px;color:var(--t0);outline:none;transition:all .18s;font-size:14px}
.fi:focus{border-color:var(--em);background:var(--bg1);box-shadow:0 0 0 3px rgba(16,185,129,.1)}
textarea.fi{resize:vertical;min-height:76px;display:block}
.pw-wrap{position:relative}.pw-wrap .fi{padding-right:44px}
.pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--t2);font-size:15px;cursor:pointer;padding:4px}

/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn-em{display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--em);color:#000;padding:12px 20px;font-size:14px;font-weight:800;
  border:none;border-radius:12px;cursor:pointer;transition:all .18s;width:100%;
  box-shadow:0 4px 16px rgba(16,185,129,.25)}
.btn-em:hover:not(:disabled){background:var(--em2);transform:translateY(-1px)}
.btn-em:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn-gl{background:var(--bg2);color:var(--t1);border:1px solid var(--bd);padding:10px 16px;
  font-size:13px;font-weight:600;border-radius:12px;cursor:pointer;transition:all .15s}
.btn-gl:hover{background:var(--bg3);color:var(--t0)}
.btn-ic{background:var(--bg2);color:var(--t2);border:1px solid var(--bd);padding:8px 13px;
  font-size:12px;font-weight:700;border-radius:var(--r3);cursor:pointer;transition:all .15s}
.btn-ic:hover{background:var(--bg3);color:var(--t0)}
.btn-full{width:100%}
.btn-row{display:flex;gap:10px;margin-top:16px}
.back-btn{background:var(--bg2);border:1px solid var(--bd);color:var(--t2);
  padding:11px 18px;font-size:13px;font-weight:700;border-radius:12px;
  cursor:pointer;flex-shrink:0;transition:all .15s}
.back-btn:hover{background:var(--bg3);color:var(--t0)}
.next-btn{flex:1;background:var(--bg2);color:var(--t0);border:1px solid var(--bd);
  padding:12px 20px;font-size:13px;font-weight:700;border-radius:12px;
  cursor:pointer;transition:all .15s}
.next-btn:hover{background:var(--bg3);border-color:rgba(16,185,129,.3);color:var(--em2)}
.calc-btn{flex:1;background:var(--em);color:#000;border:none;padding:12px 20px;
  font-size:13px;font-weight:800;border-radius:12px;cursor:pointer;transition:all .18s;
  box-shadow:0 4px 14px rgba(16,185,129,.25)}
.calc-btn:hover{background:var(--em2);transform:translateY(-1px)}

/* ─── MESSAGES ───────────────────────────────────────────────── */
.err-msg{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);color:#f87171;
  padding:10px 13px;border-radius:var(--r3);font-size:13px;font-weight:700;margin-top:10px;display:none}
.ok-msg{background:rgba(16,185,129,.1);border:1px solid var(--bd-em);color:var(--em2);
  padding:10px 13px;border-radius:var(--r3);font-size:13px;font-weight:700;margin-top:10px;display:none}

/* ─── LAYOUT ─────────────────────────────────────────────────── */
.mc{max-width:920px;margin:0 auto;padding:32px 16px 120px}

/* ─── STEPPER ─── compact horizontal like React design ──────── */
.steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:40px;
  flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:4px}
.steps::-webkit-scrollbar{display:none}
.wstep{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:100px;
  border:1px solid transparent;font-size:13px;font-weight:600;color:var(--t2);
  white-space:nowrap;transition:all .22s;flex-shrink:0}
.wstep.active{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.2);color:var(--em2)}
.wstep.done{background:var(--em);border-color:var(--em);color:#000}
.step-connector{width:32px;height:1px;background:var(--bg3);flex-shrink:0}
.wstep.done + .step-connector{background:rgba(16,185,129,.3)}
@media(max-width:580px){
  .steps{gap:0;justify-content:flex-start}
  .step-connector{width:16px}
  .wstep{font-size:12px;padding:6px 10px}
  .wstep span{display:none}
}

/* ─── PANELS ─────────────────────────────────────────────────── */
.panel{display:none;animation:fu .24s ease}.panel.active{display:block}
@keyframes fu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ─── GLASS CARD ─────────────────────────────────────────────── */
.card{background:rgba(15,23,42,.5);border:1px solid var(--bd);border-radius:18px;
  padding:20px;margin-bottom:14px}
.card-h{margin-bottom:16px}
.card-h h3{font-size:15px;font-weight:800;margin-bottom:3px}
.card-h p{font-size:12px;color:var(--t2)}
.slbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.15em;
  color:var(--em2);margin-bottom:10px;display:block}

/* ─── TAGS ───────────────────────────────────────────────────── */
.tags{display:flex;flex-wrap:wrap;gap:7px;min-height:32px;padding:2px 0}
.tag{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);
  border:1px solid var(--bd-em);border-radius:100px;padding:5px 10px 5px 7px;
  font-size:13px;font-weight:700;animation:pop .2s ease}
@keyframes pop{from{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}
.tag-av{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:10px;font-weight:800;color:#fff;flex-shrink:0}
.tag-tg{font-size:11px;color:var(--em2);margin-left:2px}
.tag-x{color:var(--t2);font-size:16px;cursor:pointer;line-height:1;transition:color .12s}
.tag-x:hover{color:var(--rd)}

/* ─── CONTACTS ───────────────────────────────────────────────── */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px;margin-top:12px}
.cc{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--bg2);
  border:1.5px solid transparent;border-radius:12px;cursor:pointer;transition:all .15s}
.cc:hover,.cc.sel{border-color:var(--em);background:rgba(16,185,129,.04)}
.cc-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0}
.cc-nm{font-size:13px;font-weight:700}.cc-tg{font-size:11px;color:var(--em2)}

/* ─── SVC ROW ────────────────────────────────────────────────── */
.svc-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 14px;
  background:var(--bg1);border-radius:12px;margin-bottom:14px;border:1px solid var(--bd)}
.svc-row label{font-size:12px;font-weight:700;color:var(--t1);white-space:nowrap}
.svc-inp{width:64px;padding:6px 10px;background:var(--bg0);border:1px solid rgba(16,185,129,.3);
  border-radius:8px;font-size:14px;font-weight:800;text-align:center;color:var(--em2);outline:none}
.svc-inp:focus{border-color:var(--em)}
.svc-note{font-size:12px;color:var(--t2)}
.cur-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cur-row label{font-size:12px;font-weight:700;color:var(--t2)}
.sel-fi{padding:9px 12px;background:var(--bg1);border:1px solid var(--bd);
  border-radius:10px;color:var(--t0);outline:none;cursor:pointer;font-size:14px}
.sel-fi:focus{border-color:var(--em)}

/* ─── ITEMS TABLE ────────────────────────────────────────────── */
.items-wrap{border:1px solid var(--bd);border-radius:12px;overflow:hidden}
.items-hd{display:grid;grid-template-columns:1fr 68px 108px 36px;
  background:var(--bg1);border-bottom:1px solid var(--bd)}
.items-hd span{padding:8px 11px;font-size:10px;font-weight:800;color:var(--t2);
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.items-hd span:nth-child(2),.items-hd span:nth-child(3){text-align:right}
.item-row{display:grid;grid-template-columns:1fr 68px 108px 36px;
  border-bottom:1px solid var(--bd);align-items:stretch}
.item-row:last-child{border-bottom:none}
.item-row:hover{background:rgba(255,255,255,.02)}
.item-row input{padding:10px 11px;background:transparent;border:none;
  border-right:1px solid var(--bd);color:var(--t0);outline:none;font-size:14px;width:100%}
.item-row input:focus{background:rgba(16,185,129,.04)}
.item-row input:last-of-type{border-right:none}
.item-row input[type=number]{text-align:right}
.btn-del-item{background:none;border:none;color:var(--t2);font-size:16px;width:36px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .12s}
.btn-del-item:hover{color:var(--rd)}
.add-item-btn{display:flex;align-items:center;gap:8px;padding:10px 14px;width:100%;
  background:none;border:none;border-top:1px dashed rgba(255,255,255,.06);
  font-size:12px;font-weight:700;color:var(--t2);cursor:pointer;transition:all .15s}
.add-item-btn:hover{background:rgba(16,185,129,.04);color:var(--em2)}
.total-bar{display:flex;justify-content:flex-end;align-items:baseline;gap:12px;padding:14px 4px 2px}
.total-bar .tl{font-size:12px;color:var(--t2);font-weight:700}
.total-bar .tv{font-size:24px;font-weight:900;color:var(--t0)}

/* ─── PMT METHODS ────────────────────────────────────────────── */
.pmt-row{display:grid;grid-template-columns:140px 1fr 32px;align-items:center;gap:6px;
  padding:9px;background:var(--bg1);border-radius:12px;margin-bottom:8px;
  border:1px solid var(--bd);animation:fu .2s ease}
.pmt-row select{padding:8px 10px;background:var(--bg0);border:1px solid var(--bd);
  border-radius:8px;font-size:13px;color:var(--t0);outline:none;cursor:pointer;width:100%}
.pmt-row select:focus{border-color:var(--em)}
.pmt-row input{padding:8px 11px;background:var(--bg0);border:1px solid var(--bd);
  border-radius:8px;font-size:13px;color:var(--t0);outline:none;width:100%}
.pmt-row input:focus{border-color:var(--em)}
.pmt-del{background:none;border:none;color:var(--t2);font-size:18px;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer}
.pmt-del:hover{color:var(--rd)}
.add-pmt-btn{display:flex;align-items:center;gap:7px;padding:9px 13px;width:100%;
  background:none;border:1.5px dashed rgba(16,185,129,.15);border-radius:12px;
  font-size:12px;font-weight:700;color:var(--t2);cursor:pointer;transition:all .15s;margin-top:4px}
.add-pmt-btn:hover{border-color:var(--em);color:var(--em2);background:rgba(16,185,129,.04)}
@media(max-width:600px){.pmt-row{grid-template-columns:110px 1fr 32px}}

/* ─── SPLIT ──────────────────────────────────────────────────── */
.sp-wrap{border:1px solid var(--bd);border-radius:12px;overflow:hidden}
.sp-table{width:100%;border-collapse:collapse}
.sp-table thead th{background:var(--bg1);font-size:10px;font-weight:800;color:var(--t2);
  text-transform:uppercase;letter-spacing:.06em;padding:9px 12px;text-align:left;
  border-bottom:1px solid var(--bd)}
.sp-table thead th:nth-child(2){text-align:right;width:110px}
.sp-table thead th:nth-child(3){width:220px}
.sp-row{border-bottom:1px solid var(--bd)}.sp-row:last-child{border-bottom:none}
.sp-row:hover{background:rgba(255,255,255,.02)}
.sp-row td{padding:11px 12px;vertical-align:middle}
.sp-nm{font-size:14px;font-weight:700}.sp-sb{font-size:11px;color:var(--t2);margin-top:1px}
.sp-pr{font-size:14px;font-weight:800;text-align:right;white-space:nowrap;color:var(--t0)}
.aw{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.atag{display:inline-flex;align-items:center;gap:4px;background:var(--bg2);border-radius:100px;
  padding:4px 8px 4px 5px;font-size:12px;font-weight:700;border:1px solid var(--bd)}
.atag-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.atag-x{cursor:pointer;opacity:.5;font-size:13px}.atag-x:hover{opacity:1;color:var(--rd)}
.asel{padding:5px 9px;background:var(--bg1);border:1px solid var(--bd);border-radius:8px;
  font-size:12px;font-weight:700;color:var(--t0);cursor:pointer;outline:none;max-width:100%}
.asel:focus{border-color:var(--em)}
.split-note{font-size:11px;color:var(--t2);margin-top:3px;display:block}
.split-badge{background:rgba(16,185,129,.08);color:var(--em2);padding:6px 14px;
  border-radius:100px;font-size:12px;font-weight:800;white-space:nowrap;border:1px solid var(--bd-em)}

/* ─── STEP 4 RESULT ──────────────────────────────────────────── */

/* Share action — matches React: bg-slate-900/50 border-slate-800 rounded-2xl */
.share-action{background:rgba(15,23,42,.5);border:1px solid var(--bd);
  border-radius:18px;padding:20px 24px;margin-bottom:32px;display:none}
.share-action-inner{display:flex;flex-direction:column;gap:14px}
@media(min-width:768px){
  .share-action-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:20px}
  .share-link-block{flex:1 1 0;min-width:0}
}
.share-link-block{}
.share-link-wrap{display:flex;flex-direction:column;gap:8px}
@media(min-width:480px){.share-link-wrap{flex-direction:row}}
.share-link-wrap input{flex:1;padding:11px 14px;background:var(--bg0);
  border:1px solid var(--bg3);border-radius:12px;font-size:13px;font-weight:600;
  color:var(--t1);outline:none;transition:border-color .15s}
.share-link-wrap input:focus{border-color:var(--em)}
.copy-btn-main{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 20px;
  background:rgba(16,185,129,.1);color:var(--em2);border:1px solid var(--bd-em);
  border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;
  transition:all .18s;white-space:nowrap}
.copy-btn-main:hover,.copy-btn-main.copied{background:var(--em);color:#000;border-color:var(--em)}
.share-side-btns{display:flex;gap:10px;flex-shrink:0}
.sa-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 18px;
  border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;
  transition:all .15s;white-space:nowrap;border:1px solid transparent;flex:1}
.sa-shot{background:var(--bg2);color:var(--t1);border-color:var(--bd)}
.sa-shot:hover{background:var(--bg3);color:var(--am2);border-color:var(--bd-am)}
.sa-tg{background:rgba(42,171,238,.08);color:#2aabee;border-color:rgba(42,171,238,.2)}
.sa-tg:hover{background:rgba(42,171,238,.16)}

/* Bill header + progress */
.bill-title-row{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
@media(min-width:640px){.bill-title-row{flex-direction:row;align-items:flex-end;justify-content:space-between}}
.bill-title-row h1{font-size:40px;font-weight:900;letter-spacing:-1.5px;font-style:italic;color:#fff;line-height:1}
.bill-meta{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--t2);margin-top:6px;flex-wrap:wrap}
.bill-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--bg3)}

/* Progress card */
.progress-card{background:var(--bg1);border:1px solid var(--bd);border-radius:14px;
  padding:14px 16px;min-width:220px;flex-shrink:0}
.progress-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.progress-top .lbl{font-size:13px;color:var(--t2)}
.progress-top .val{font-size:13px;font-weight:700;color:var(--t0)}
.progress-bar-bg{width:100%;background:var(--bg0);border-radius:100px;height:8px}
.progress-bar-fill{background:var(--em);height:8px;border-radius:100px;
  transition:width .5s ease;box-shadow:0 0 6px rgba(16,185,129,.4);min-width:0}

/* Warn */
.warn-pill{background:rgba(245,158,11,.08);border:1px solid var(--bd-am);border-radius:12px;
  padding:10px 14px;font-size:13px;font-weight:700;color:var(--am2);margin-bottom:14px;display:none}

/* Person cards grid */
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;margin-bottom:24px}

/* ─── PERSON CARD ─── matches React rounded-3xl exactly ─────── */
.pc{border-radius:24px;border:1px solid var(--bd);background:rgba(30,41,59,.5);
  overflow:hidden;position:relative;transition:border-color .25s,background .25s;
  animation:fu .3s ease both}
.pc:nth-child(1){animation-delay:.04s}.pc:nth-child(2){animation-delay:.08s}
.pc:nth-child(3){animation-delay:.12s}.pc:nth-child(4){animation-delay:.16s}
/* Paid state: bg-slate-900/40 border-emerald-500/20 */
.pc.is-paid{background:rgba(15,23,42,.4);border-color:rgba(16,185,129,.2)}
/* Hover on unpaid */
.pc:not(.is-paid):hover{border-color:var(--bg4)}

.pc-inner-pad{padding:22px 24px}

/* Status badge — top right */
.pc-status{position:absolute;top:18px;right:18px}
.badge-paid{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;
  border-radius:100px;background:rgba(16,185,129,.1);color:var(--em2);
  font-size:11px;font-weight:800;border:1px solid var(--bd-em)}
.badge-pending{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;
  border-radius:100px;background:rgba(245,158,11,.1);color:var(--am2);
  font-size:11px;font-weight:800;border:1px solid var(--bd-am)}
.badge-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.badge-paid .badge-dot{background:var(--em)}
.badge-pending .badge-dot{background:var(--am);animation:pulse 1.5s infinite}

/* Card user row */
.pc-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-right:80px}
.pc-av{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;font-size:19px;font-weight:900;color:#fff;flex-shrink:0}
.pc-nm{font-size:18px;font-weight:800;letter-spacing:-.2px;color:#fff}
.pc-tg{font-size:12px;color:var(--t2);margin-top:2px}

/* Items with dashed line — exact React design */
.pc-items-list{margin-bottom:18px}
.pc-item{display:flex;align-items:flex-end;justify-content:space-between;padding:6px 0}
.pc-item-n{font-size:13px;color:var(--t1);font-weight:600;flex-shrink:0;max-width:50%}
/* dashed line between name and price */
.pc-item-dash{flex:1;margin:0 12px 4px;border-bottom:1.5px dashed var(--bg3);height:1px}
.pc-item-v{font-size:13px;font-weight:700;color:#fff;white-space:nowrap}
.pc-item-cur{font-size:11px;color:var(--t2);margin-left:2px}

/* Total row */
.pc-total-sep{border-top:1px solid var(--bg3);margin-bottom:16px}
.pc-total-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.pc-total-lbl{font-size:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:.18em;color:var(--t2)}
.pc-total-val{font-size:30px;font-weight:900;letter-spacing:-1px;line-height:1}
.pc-total-cur{font-size:16px;font-weight:700;color:var(--t2);margin-left:3px}

/* Requisites — bg-slate-950/50 rounded-2xl */
.pc-req{background:rgba(2,8,23,.5);border-radius:14px;padding:12px 14px;
  margin-bottom:12px;border:1px solid var(--bd)}
.pc-req-lbl{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.2em;
  color:var(--t2);margin-bottom:8px;display:block}
.pc-req-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.pc-req-row:last-child{margin-bottom:0}
.pc-req-ic{width:32px;height:32px;background:var(--bg2);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.pc-req-type{font-size:11px;color:var(--t2);margin-bottom:1px}
.pc-req-val{font-size:13px;font-weight:700;color:var(--t1)}

/* Alif button */
.alif-btn{display:flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 16px;border-radius:12px;font-size:13px;font-weight:800;
  cursor:pointer;text-decoration:none;transition:all .18s;border:none;
  width:100%;white-space:nowrap;margin-bottom:10px}
.alif-btn.primary{background:var(--em);color:#000;box-shadow:0 4px 14px rgba(16,185,129,.2)}
.alif-btn.primary:hover{background:var(--em2);transform:translateY(-1px);text-decoration:none}

/* Mark paid button — exact React: emerald/10 → emerald on hover, paid → slate */
.mark-paid-btn{display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;padding:11px 16px;border-radius:12px;font-size:13px;font-weight:700;
  cursor:pointer;transition:all .18s;border:none}
.mark-paid-btn.unpaid{background:rgba(16,185,129,.08);color:var(--em2);
  border:1px solid rgba(16,185,129,.2)}
.mark-paid-btn.unpaid:hover{background:var(--em);color:#000;border-color:var(--em)}
.mark-paid-btn.paid{background:var(--bg2);color:var(--t2);border:1px solid var(--bd)}
.mark-paid-btn.paid:hover{background:var(--bg3);color:var(--t1)}

/* Save area */
#save-area{margin-bottom:16px}

/* ─── FOOTER STICKY ─── exact React: bottom-4 rounded-3xl blur ─ */
.res-footer{position:sticky;bottom:16px;z-index:40;
  background:rgba(15,23,42,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(16,185,129,.3);
  box-shadow:0 0 40px rgba(16,185,129,.08),0 16px 64px rgba(0,0,0,.4);
  border-radius:24px;padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px}
.rf-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;
  color:var(--em2);margin-bottom:6px}
.rf-val{font-size:42px;font-weight:900;color:#fff;letter-spacing:-1.5px;line-height:1}
.rf-val .rf-cur{font-size:20px;font-weight:700;color:var(--em);margin-left:6px}
.rf-sub{font-size:12px;color:var(--t2);margin-top:4px}
.new-bill-btn{display:flex;align-items:center;gap:8px;padding:14px 24px;
  background:var(--bg2);border:1px solid var(--bd);color:#fff;
  border-radius:18px;font-size:14px;font-weight:700;cursor:pointer;
  transition:all .18s}
.new-bill-btn:hover{background:var(--bg3);transform:scale(.97)}

/* ─── TG RESULTS ──────────────────────────────────────────────── */
.tg-res{background:var(--bg1);border:1px solid var(--bd);border-radius:16px;
  padding:18px;margin-top:12px;display:none}
.tg-res h4{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.15em;
  color:var(--t2);margin-bottom:12px}
.tg-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;
  background:rgba(16,185,129,.04);border-radius:12px;
  border:1px solid rgba(16,185,129,.1);margin-bottom:8px;font-size:13px;font-weight:700}
.tg-row:last-child{margin-bottom:0}
.ok-c{color:var(--em2)}.fail-c{color:var(--rd)}

/* ─── ADMIN ──────────────────────────────────────────────────── */
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.ph h2{font-size:22px;font-weight:900;letter-spacing:-.4px}
.dt{width:100%;border-collapse:collapse;background:var(--bg1);border-radius:16px;overflow:hidden;border:1px solid var(--bd)}
.dt thead th{background:var(--bg2);font-size:10px;font-weight:800;color:var(--t2);
  text-transform:uppercase;letter-spacing:.06em;padding:11px 14px;text-align:left;border-bottom:1px solid var(--bd)}
.dt tbody tr{border-bottom:1px solid var(--bd);transition:background .12s}
.dt tbody tr:last-child{border-bottom:none}
.dt tbody tr:hover{background:rgba(255,255,255,.02)}
.dt td{padding:12px 14px;font-size:13px;font-weight:600;vertical-align:middle;color:var(--t1)}
.badge{display:inline-block;padding:3px 9px;border-radius:100px;font-size:11px;font-weight:800;background:var(--bg3);color:var(--t2);border:1px solid var(--bd)}
.badge-em{background:rgba(16,185,129,.1);color:var(--em2);border-color:var(--bd-em)}
.ib{padding:5px 9px;background:var(--bg2);border:1px solid var(--bd);border-radius:8px;
  font-size:11px;font-weight:700;color:var(--t1);cursor:pointer;margin-left:4px;transition:all .12s}
.ib:hover{background:var(--bg3);color:var(--t0)}
.ib.del{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.2);color:var(--rd)}.ib.del:hover{background:rgba(239,68,68,.18)}
.empty-s{text-align:center;padding:52px 20px;color:var(--t2)}
.empty-s .ei{font-size:44px;margin-bottom:10px}

/* ─── MODAL ──────────────────────────────────────────────────── */
.moverlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:400;
  display:none;align-items:center;justify-content:center;padding:16px;
  overflow-y:auto;backdrop-filter:blur(8px)}
.moverlay.open{display:flex}
.mbox{background:var(--bg1);border:1px solid rgba(16,185,129,.15);border-radius:20px;
  padding:26px 22px;width:100%;max-width:440px;box-shadow:var(--sh);margin:auto;animation:fu .22s ease}
.mbox h3{font-size:18px;font-weight:900;margin-bottom:18px;letter-spacing:-.3px}
.mbtns{display:flex;gap:10px;margin-top:18px}
.mc-btn{flex:1;padding:11px;background:var(--bg2);color:var(--t2);border:1px solid var(--bd);
  border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;font-family:inherit}
.mc-btn:hover{background:var(--bg3);color:var(--t0)}
.mo-btn{flex:1;padding:11px;background:var(--em);color:#000;border:none;
  border-radius:12px;font-size:14px;font-weight:800;cursor:pointer;
  transition:all .15s;font-family:inherit;box-shadow:0 4px 14px rgba(16,185,129,.25)}
.mo-btn:hover{background:var(--em2)}

/* ─── BILL PUBLIC ────────────────────────────────────────────── */
.bill-pub-hero{background:linear-gradient(135deg,var(--em3),var(--em));border-radius:18px;
  padding:24px;margin-bottom:16px;text-align:center}
.bill-pub-hero h1{font-size:26px;font-weight:900;font-style:italic;letter-spacing:-.5px;
  margin-bottom:4px;color:#000}
.bill-pub-hero p{font-size:13px;opacity:.7;color:#000;font-weight:600}

/* ─── TOAST ──────────────────────────────────────────────────── */
#toast-c{position:fixed;bottom:20px;right:16px;z-index:999;
  display:flex;flex-direction:column;gap:7px;pointer-events:none}
.toast{padding:11px 16px;border-radius:12px;font-size:13px;font-weight:700;
  animation:slideR .25s ease;max-width:300px;backdrop-filter:blur(12px)}
.toast.def{background:rgba(15,23,42,.95);color:var(--t0);border:1px solid var(--bd)}
.toast.success{background:rgba(16,185,129,.15);color:var(--em2);border:1px solid var(--bd-em)}
.toast.error{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.3)}
.toast.info{background:rgba(59,130,246,.15);color:#93c5fd;border:1px solid rgba(59,130,246,.3)}
@keyframes slideR{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}

/* ─── LIGHT THEME ────────────────────────────────────────────── */
  box-shadow:0 2px 20px rgba(0,0,0,.07)}

/* ─── MOBILE ─────────────────────────────────────────────────── */
@media(max-width:640px){
  .mc{padding:16px 12px 100px}
  .card{padding:16px 14px;border-radius:16px}
  .res-grid{grid-template-columns:1fr}
  .pc{border-radius:20px}.pc-inner-pad{padding:18px 18px}
  .pc-nm{font-size:16px}.pc-av{width:42px;height:42px;font-size:17px}
  .pc-total-val{font-size:26px}
  .rf-val{font-size:32px}
  .rf-val .rf-cur{font-size:16px}
  .res-footer{border-radius:18px;padding:14px 18px;flex-direction:column;align-items:flex-start}
  .new-bill-btn{width:100%;justify-content:center}
  .bill-title-row h1{font-size:30px}
  .btn-row{gap:8px}
  .back-btn{padding:11px 14px;font-size:13px}
  .cgrid{grid-template-columns:1fr 1fr}
  .ph{flex-direction:column;align-items:flex-start}
  .ph>*{width:100%}
  .mbox{padding:20px 16px;border-radius:18px}
  .sp-table thead th:nth-child(2),.sp-row td:nth-child(2){display:none}
  .dt thead th:nth-child(3),.dt td:nth-child(3),.dt thead th:nth-child(5),.dt td:nth-child(5){display:none}
  .items-hd{grid-template-columns:1fr 64px 94px 34px}
  .item-row{grid-template-columns:1fr 64px 94px 34px}
}
@media(max-width:380px){
  .items-hd{grid-template-columns:1fr 56px 82px 32px}
  .item-row{grid-template-columns:1fr 56px 82px 32px}
  .cgrid{grid-template-columns:1fr}
}

/* ─── LIGHT THEME EXTRA FIXES ───────────────────────────────── */

/* Inputs & selects - dark bg in dark theme, light in light theme */

/* Payment methods rows */

/* Contacts & users tables */

/* Modal boxes */

/* Item rows in modal */

/* Contacts grid */

/* Tags */

/* Split table */

/* Step nav buttons */

/* Card */

/* svc-row */

/* Share action */

/* Person cards in light mode */

/* ════════════════════════════════════════════════════════════════
   LIGHT THEME — based on React component isDarkMode=false
   ═══════════════════════════════════════════════════════════════ */
[data-theme=light] {
  /* Backgrounds: slate-50 → white → f1f5f9 → e2e8f0 */
  --bg0:#f8fafc; --bg1:#ffffff; --bg2:#f1f5f9; --bg3:#e2e8f0; --bg4:#cbd5e1;
  /* Accent: slightly darker emerald for contrast on white */
  --em:#059669; --em2:#10b981; --em3:#047857;
  --am:#d97706; --am2:#f59e0b;
  --rd:#dc2626; --cy:#0891b2; --bl:#3b82f6;
  /* Text: slate-900 → 700 → 500 → 400 */
  --t0:#0f172a; --t1:#334155; --t2:#64748b; --t3:#94a3b8;
  /* Borders */
  --bd:rgba(0,0,0,.08); --bd2:rgba(0,0,0,.12);
  --bd-7:rgba(0,0,0,.07);
  --bd-em:rgba(5,150,105,.25); --bd-am:rgba(217,119,6,.25);
  --sh:0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.06);
}

/* ── Global ── */
[data-theme=light] body { background:var(--bg0); color:var(--t0) }

/* ── Topbar: bg-white/80 border-slate-200 ── */
[data-theme=light] .topbar {
  background:rgba(255,255,255,.85);
  border-color:rgba(0,0,0,.09);
}
[data-theme=light] .tq-logo { color:var(--t0) }
[data-theme=light] .tnav { color:var(--t2) }
[data-theme=light] .tnav:hover { color:var(--t0); background:rgba(0,0,0,.05) }
[data-theme=light] .tnav.on { color:var(--em3); background:rgba(5,150,105,.08); border-color:var(--bd-em) }
[data-theme=light] .user-pill { background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.1) }
[data-theme=light] .user-nm { color:var(--t1) }
[data-theme=light] .icon-btn { color:var(--t2) }
[data-theme=light] .icon-btn:hover { background:var(--bg2); color:var(--am) }
[data-theme=light] .logout-btn { background:var(--bg1); border-color:rgba(0,0,0,.12); color:var(--t1) }
[data-theme=light] .logout-btn:hover { background:var(--bg2); color:var(--t0) }

/* ── Stepper ── */
[data-theme=light] .wstep { background:var(--bg1); border-color:rgba(0,0,0,.1); color:var(--t2) }
[data-theme=light] .wstep.active { background:rgba(5,150,105,.08); border-color:rgba(5,150,105,.25); color:var(--em3) }
[data-theme=light] .wstep.done { background:var(--em); border-color:var(--em); color:#fff }
[data-theme=light] .step-connector { background:var(--bg3) }

/* ── Cards: bg-white border-slate-200 shadow-sm ── */
[data-theme=light] .card { background:#fff; border-color:rgba(0,0,0,.09); box-shadow:var(--sh) }

/* ── Forms / inputs: bg-slate-50 border-slate-200 text-slate-700 ── */
[data-theme=light] .fi {
  background:var(--bg2); border-color:rgba(0,0,0,.1);
  color:var(--t0);
}
[data-theme=light] .fi::placeholder { color:var(--t2) }
[data-theme=light] .fi:focus { background:#fff; border-color:var(--em); box-shadow:0 0 0 3px rgba(5,150,105,.1) }
[data-theme=light] textarea.fi { background:var(--bg2) }
[data-theme=light] .sel-fi { background:var(--bg2); border-color:rgba(0,0,0,.1); color:var(--t0) }

/* ── Buttons ── */
[data-theme=light] .btn-gl { background:var(--bg2); border-color:rgba(0,0,0,.1); color:var(--t1) }
[data-theme=light] .btn-gl:hover { background:var(--bg3); color:var(--t0) }
[data-theme=light] .btn-ic { background:var(--bg2); border-color:rgba(0,0,0,.1); color:var(--t2) }
[data-theme=light] .btn-ic:hover { background:var(--bg3); color:var(--t0) }
[data-theme=light] .back-btn { background:var(--bg1); border-color:rgba(0,0,0,.1); color:var(--t1) }
[data-theme=light] .back-btn:hover { background:var(--bg2); color:var(--t0) }
[data-theme=light] .next-btn { background:var(--bg1); border-color:rgba(0,0,0,.1); color:var(--t0) }
[data-theme=light] .next-btn:hover { background:rgba(5,150,105,.07); border-color:rgba(5,150,105,.3); color:var(--em3) }

/* ── Auth ── */
[data-theme=light] .auth-box { background:#fff; border-color:rgba(0,0,0,.09) }
[data-theme=light] .atabs { background:var(--bg2) }
[data-theme=light] .atab { color:var(--t2) }
[data-theme=light] .atab.on { background:#fff; color:var(--t0) }

/* ── Items table ── */
[data-theme=light] .items-wrap { border-color:rgba(0,0,0,.09) }
[data-theme=light] .items-hd { background:var(--bg2); border-color:rgba(0,0,0,.08) }
[data-theme=light] .items-hd span { color:var(--t2) }
[data-theme=light] .item-row { border-color:rgba(0,0,0,.06) }
[data-theme=light] .item-row:hover { background:rgba(0,0,0,.02) }
[data-theme=light] .item-row input { color:var(--t0); border-color:rgba(0,0,0,.07) }
[data-theme=light] .btn-del-item { color:var(--t3) }
[data-theme=light] .btn-del-item:hover { color:var(--rd) }
[data-theme=light] .add-item-btn { color:var(--t2); border-color:rgba(0,0,0,.07) }
[data-theme=light] .add-item-btn:hover { background:rgba(5,150,105,.04); color:var(--em3) }
[data-theme=light] .svc-row { background:var(--bg2); border-color:rgba(0,0,0,.08) }
[data-theme=light] .svc-row label { color:var(--t1) }
[data-theme=light] .svc-inp { background:var(--bg1); border-color:rgba(5,150,105,.35); color:var(--em3) }
[data-theme=light] .svc-note { color:var(--t2) }
[data-theme=light] .total-bar .tl { color:var(--t2) }
[data-theme=light] .total-bar .tv { color:var(--t0) }

/* ── Payment methods ── */
[data-theme=light] .pmt-row { background:var(--bg2); border-color:rgba(0,0,0,.09) }
[data-theme=light] .pmt-row select { background:#fff; border-color:rgba(0,0,0,.1); color:var(--t0) }
[data-theme=light] .pmt-row input { background:#fff; border-color:rgba(0,0,0,.1); color:var(--t0) }
[data-theme=light] .pmt-row input::placeholder { color:var(--t2) }
[data-theme=light] .pmt-del { color:var(--t3) }
[data-theme=light] .pmt-del:hover { color:var(--rd) }
[data-theme=light] .add-pmt-btn { border-color:rgba(5,150,105,.2); color:var(--t2) }
[data-theme=light] .add-pmt-btn:hover { border-color:var(--em); color:var(--em3); background:rgba(5,150,105,.04) }

/* ── Split table ── */
[data-theme=light] .sp-wrap { border-color:rgba(0,0,0,.09) }
[data-theme=light] .sp-table thead th { background:var(--bg2); color:var(--t2); border-color:rgba(0,0,0,.08) }
[data-theme=light] .sp-row { border-color:rgba(0,0,0,.06) }
[data-theme=light] .sp-row td { color:var(--t0) }
[data-theme=light] .sp-nm { color:var(--t0) }
[data-theme=light] .sp-pr { color:var(--t0) }
[data-theme=light] .sp-sb { color:var(--t2) }
[data-theme=light] .atag { background:var(--bg2); border-color:rgba(0,0,0,.09); color:var(--t1) }
[data-theme=light] .asel { background:var(--bg1); border-color:rgba(0,0,0,.1); color:var(--t0) }
[data-theme=light] .split-badge { background:rgba(5,150,105,.08); color:var(--em3); border-color:rgba(5,150,105,.2) }

/* ── Tags ── */
[data-theme=light] .tag { background:var(--bg1); border-color:rgba(5,150,105,.2); color:var(--t0) }
[data-theme=light] .tag-tg { color:var(--em3) }
[data-theme=light] .tag-x { color:var(--t3) }
[data-theme=light] .tag-x:hover { color:var(--rd) }

/* ── Contacts ── */
[data-theme=light] .cc { background:var(--bg1); border-color:rgba(0,0,0,.08) }
[data-theme=light] .cc:hover,[data-theme=light] .cc.sel { background:rgba(5,150,105,.05); border-color:var(--em3) }
[data-theme=light] .cc-nm { color:var(--t0) }
[data-theme=light] .cc-tg { color:var(--em3) }

/* ── Share block ── */
[data-theme=light] .share-action { background:#fff; border-color:rgba(0,0,0,.1); box-shadow:var(--sh) }
[data-theme=light] .share-link-wrap input { background:var(--bg2); border-color:rgba(0,0,0,.1); color:var(--t0) }
[data-theme=light] .share-link-wrap input::placeholder { color:var(--t2) }
[data-theme=light] .copy-btn-main { background:rgba(5,150,105,.08); color:var(--em3); border-color:rgba(5,150,105,.2) }
[data-theme=light] .copy-btn-main:hover,[data-theme=light] .copy-btn-main.copied { background:var(--em); color:#fff; border-color:var(--em) }
[data-theme=light] .sa-shot { background:var(--bg2); border-color:rgba(0,0,0,.1); color:var(--t1) }
[data-theme=light] .sa-shot:hover { background:var(--bg3) }

/* ── Bill title + progress ── */
[data-theme=light] .bill-title-row h1 { color:var(--t0) }
[data-theme=light] .bill-meta { color:var(--t2) }
[data-theme=light] .progress-card { background:#fff; border-color:rgba(0,0,0,.09); box-shadow:var(--sh) }
[data-theme=light] .progress-top .lbl { color:var(--t2) }
[data-theme=light] .progress-top .val { color:var(--t0) }
[data-theme=light] .progress-bar-bg { background:var(--bg3) }

/* ── Person cards: bg-white border-slate-200 shadow-sm (unpaid)
                   bg-emerald-50/30 border-emerald-200 (paid) ── */
[data-theme=light] .pc { background:#fff; border-color:rgba(0,0,0,.1); box-shadow:0 1px 3px rgba(0,0,0,.08),0 4px 20px rgba(0,0,0,.06) }
[data-theme=light] .pc:not(.is-paid):hover { border-color:rgba(0,0,0,.18) }
[data-theme=light] .pc.is-paid { background:rgba(240,253,244,.8); border-color:rgba(5,150,105,.25) }
[data-theme=light] .pc-nm { color:var(--t0) }
[data-theme=light] .pc-tg { color:var(--t2) }
[data-theme=light] .pc-item-n { color:var(--t1) }
[data-theme=light] .pc-item-v { color:var(--t0) }
[data-theme=light] .pc-item-cur { color:var(--t2) }
[data-theme=light] .pc-item-dash { border-color:rgba(0,0,0,.12) }
[data-theme=light] .pc-total-sep { border-color:rgba(0,0,0,.08) }
[data-theme=light] .pc-total-lbl { color:var(--t3) }
[data-theme=light] .pc-req { background:var(--bg2) }
[data-theme=light] .pc-req-lbl { color:var(--t3) }
[data-theme=light] .pc-req-ic { background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.1) }
[data-theme=light] .pc-req-type { color:var(--t2) }
[data-theme=light] .pc-req-val { color:var(--t1) }
/* Mark paid button states */
[data-theme=light] .mark-paid-btn.unpaid { background:var(--em); color:#fff; border:none; box-shadow:0 4px 12px rgba(16,185,129,.25) }
[data-theme=light] .mark-paid-btn.unpaid:hover { background:var(--em3) }
[data-theme=light] .mark-paid-btn.paid { background:var(--bg2); border-color:rgba(0,0,0,.1); color:var(--t2) }
[data-theme=light] .mark-paid-btn.paid:hover { background:var(--bg3) }
[data-theme=light] .badge-paid { background:rgba(5,150,105,.1); color:var(--em3); border-color:rgba(5,150,105,.25) }
[data-theme=light] .badge-pending { background:rgba(217,119,6,.1); color:#b45309; border-color:rgba(217,119,6,.25) }

/* ── Sticky footer: bg-white/95 border-emerald-200 ── */
[data-theme=light] .res-footer {
  background:rgba(255,255,255,.97);
  border-color:rgba(5,150,105,.2);
  box-shadow:0 -4px 24px rgba(0,0,0,.06),0 0 40px rgba(5,150,105,.05);
}
[data-theme=light] .rf-val { color:var(--t0) }
[data-theme=light] .rf-lbl { color:var(--em3) }
[data-theme=light] .rf-sub { color:var(--t2) }
/* New bill button: bg-slate-900 text-white */
[data-theme=light] .new-bill-btn { background:#1e293b; color:#fff; border-color:#334155 }
[data-theme=light] .new-bill-btn:hover { background:#0f172a }

/* ── TG results ── */
[data-theme=light] .tg-res { background:#fff; border-color:rgba(0,0,0,.09) }
[data-theme=light] .tg-row { background:rgba(5,150,105,.04); border-color:rgba(5,150,105,.12) }

/* ── Admin / bills table ── */
[data-theme=light] .dt { background:#fff; border-color:rgba(0,0,0,.09) }
[data-theme=light] .dt thead th { background:var(--bg2); color:var(--t2); border-color:rgba(0,0,0,.08) }
[data-theme=light] .dt td { color:var(--t0) }
[data-theme=light] .dt td span[style*="color:var(--t2)"] { color:var(--t2) !important }
[data-theme=light] .dt tbody tr { border-color:rgba(0,0,0,.06) }
[data-theme=light] .dt tbody tr:hover { background:rgba(0,0,0,.02) }
[data-theme=light] .badge { background:rgba(0,0,0,.07); color:var(--t1); border-color:rgba(0,0,0,.1) }
[data-theme=light] .badge-em { background:rgba(5,150,105,.1); color:var(--em3); border-color:rgba(5,150,105,.25) }
[data-theme=light] .ib { background:var(--bg2); border-color:rgba(0,0,0,.1); color:var(--t1) }
[data-theme=light] .ib:hover { background:var(--bg3); color:var(--t0) }
[data-theme=light] .ib.del { background:rgba(220,38,38,.06); border-color:rgba(220,38,38,.15); color:#dc2626 }
[data-theme=light] .ib.del:hover { background:rgba(220,38,38,.14) }
[data-theme=light] .empty-s { color:var(--t2) }

/* ── Modal ── */
[data-theme=light] .moverlay { background:rgba(15,23,42,.6) }
[data-theme=light] .mbox { background:#fff; border-color:rgba(5,150,105,.15) }
[data-theme=light] .mbox h3 { color:var(--t0) }
[data-theme=light] .mc-btn { background:var(--bg2); border-color:rgba(0,0,0,.1); color:var(--t1) }
[data-theme=light] .mc-btn:hover { background:var(--bg3); color:var(--t0) }

/* ── Public bill page ── */
[data-theme=light] .bill-pub-hero h1 { color:#fff }
[data-theme=light] .bill-pub-hero p { color:rgba(255,255,255,.8) }