:root{
  --green:#0E8A3C;
  --green-dark:#0A6E2F;
  --green-light:#E9F6ED;
  --green-mid:#16A94C;
  --red:#E0392C;
  --red-light:#FDECEA;
  --blue:#2A6FD6;
  --blue-light:#E9F1FD;
  --orange:#E08A17;
  --orange-light:#FDF3E3;
  --slate:#5A6B60;
  --slate-light:#F0F3F1;

  --bg:#F6F9F7;
  --surface:#FFFFFF;
  --ink:#16241C;
  --muted:#6D7F73;
  --line:#E4EBE6;
  --shadow:0 1px 3px rgba(16,40,24,0.07);
  --shadow-lg:0 6px 20px rgba(16,40,24,0.13);
  --radius:14px;
}

[data-theme="dark"]{
  --green:#2FBB63;
  --green-dark:#1E8F49;
  --green-light:#173025;
  --green-mid:#33C46B;
  --red:#FF6B5E;
  --red-light:#33211F;
  --blue:#6BA5F5;
  --blue-light:#1B2634;
  --orange:#F0B45C;
  --orange-light:#332A1B;
  --slate:#A9BBAF;
  --slate-light:#1E2A22;

  --bg:#0F1713;
  --surface:#18231C;
  --ink:#E9F1EB;
  --muted:#93A699;
  --line:#26342B;
  --shadow:0 1px 3px rgba(0,0,0,0.4);
  --shadow-lg:0 6px 20px rgba(0,0,0,0.5);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Noto Sans Bengali',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.5;
}
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; border:none; background:none; padding:0; }
input,select,textarea{ outline:none; }
a{ text-decoration:none; color:inherit; }
.serif{ font-family:'Noto Serif Bengali',serif; }

#app{
  max-width:30rem; margin:0 auto; min-height:100dvh;
  background:var(--bg); position:relative; padding-bottom:86px;
}
/* screen transition: .screen-fade class JS থেকে যোগ হলে চলে */

/* ---------- splash ---------- */
.splash{
  position:fixed; inset:0; z-index:200; background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; transition:opacity .45s ease; padding:0 24px; text-align:center;
}
.splash img{ display:block; margin:0 auto; width:min(74vw, 416px); height:auto; }
.splash .wave{ position:absolute; bottom:0; left:0; width:100%; height:180px; display:block; }
.splash.hide{ opacity:0; pointer-events:none; }

/* ---------- app header ---------- */
.appbar{
  display:flex; align-items:center; gap:12px;
  padding:12px 18px 12px;
  background:var(--green-light);
  border-bottom:1px solid var(--green); position:sticky; top:0; z-index:40;
}
.appbar img.logo{ width:56px; height:56px; border-radius:14px; flex-shrink:0; }
.appbar .titles{ min-width:0; overflow:hidden; flex:1; }
.appbar .titles h1{ margin:0; font-size:19px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--green-dark); }
.appbar .titles p{ margin:0; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); }
.appbar .spacer{ flex:1; min-width:4px; }
.appbar .icon-btn{ color:var(--green-dark); }
.appbar .icon-btn:active{ background:rgba(0,0,0,.06); }
.net-chip{
  display:flex; flex-direction:column; align-items:flex-end;
  padding:5px 10px; border-radius:10px; flex-shrink:0;
  background:#fff; border:1.5px solid var(--green);
}
.net-chip .lbl{ font-size:12px; line-height:1.2; color:var(--green-dark); font-weight:700; }
.net-chip .val{ font-size:19px; line-height:1.25; font-weight:800; letter-spacing:.3px; color:var(--green-dark); white-space:nowrap; }
.net-chip.owing{ background:#fff; border-color:var(--red); }
.net-chip.owing .lbl, .net-chip.owing .val{ color:var(--red); }
.appbar .spacer{ flex:1; min-width:4px; }
.icon-btn{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
}
.icon-btn:active{ background:var(--slate-light); }
.badge-dot{
  position:absolute; margin:-14px 0 0 12px; width:8px; height:8px;
  background:var(--red); border-radius:50%; border:2px solid var(--surface);
}

.page-head{
  display:flex; align-items:center; gap:12px;
  padding:11px 18px; background:var(--surface);
  border-bottom:1.5px solid var(--line); position:sticky; top:0; z-index:40;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.page-head h2{
  margin:0; font-size:20px; font-weight:800; flex:1; letter-spacing:.1px;
}
.page-head.center h2{ text-align:center; }
.page-head-logo{
  width:38px; height:38px; border-radius:11px;
  object-fit:cover; flex-shrink:0;
  border:1px solid var(--line);
  box-shadow:0 1px 4px rgba(0,0,0,.10);
}
/* লোগোর পরে একটা উল্লম্ব বিভাজক রেখা */
.page-head-logo + h2::before{
  content:''; display:inline-block;
  width:1.5px; height:18px; background:var(--line);
  margin-right:12px; vertical-align:middle; border-radius:2px;
}

/* ---------- greeting ---------- */
.greeting{
  margin:16px 18px 0; padding:18px 18px;
  border-radius:var(--radius); position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--green-mid),var(--green-dark));
  color:#fff; box-shadow:var(--shadow);
}
.greeting h3{ margin:0; font-size:19px; font-weight:700; }
.greeting p{ margin:2px 0 0; font-size:14px; opacity:.92; }
.greeting .leaf{ position:absolute; right:16px; bottom:10px; opacity:.35; }

/* ---------- stat grid ---------- */
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px 18px 0; }
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 14px; box-shadow:var(--shadow);
}
.stat .row{ display:flex; align-items:center; gap:8px; }
.chip-icon{
  width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.stat .lbl{ font-size:13px; color:var(--muted); margin:0; }
.stat .val{ font-size:19px; font-weight:800; letter-spacing:.2px; margin:6px 0 0; }
.stat.wide{ grid-column:span 2; }

.tint-green{ background:var(--green-light); color:var(--green); }
.tint-red{ background:var(--red-light); color:var(--red); }
.tint-blue{ background:var(--blue-light); color:var(--blue); }
.tint-orange{ background:var(--orange-light); color:var(--orange); }
.tint-slate{ background:var(--slate-light); color:var(--slate); }
.c-green{ color:var(--green); } .c-red{ color:var(--red); }
.c-blue{ color:var(--blue); } .c-muted{ color:var(--muted); }

/* ---------- section head ---------- */
.section-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 18px 8px;
}
.section-head h3{ margin:0; font-size:17px; font-weight:700; }
.link-btn{ font-size:14px; color:var(--green); font-weight:600; display:flex; align-items:center; gap:2px; }

/* ---------- lists ---------- */
.page-pad{ padding:0 18px; }
.list{ padding:0 18px; }
.tile{
  width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; margin-bottom:10px; box-shadow:var(--shadow);
}
.tile:active{ transform:scale(.995); }
.avatar{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:15px;
}
.tile .body{ flex:1; min-width:0; }
.tile .t1{ margin:0; font-size:16px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tile .t2{ margin:1px 0 0; font-size:13px; color:var(--muted); }
.tile .right{ text-align:right; flex-shrink:0; }
.tile .amt{ margin:0; font-size:16px; font-weight:800; letter-spacing:.2px; }
.tile .amt-lbl{ margin:1px 0 0; font-size:12px; color:var(--muted); }

/* ---------- filter chips ---------- */
.chips{ display:flex; gap:8px; padding:12px 18px 4px; overflow-x:auto; }
.chip{
  padding:8px 16px; border-radius:999px; font-size:14px; font-weight:600;
  background:var(--surface); border:1px solid var(--line); color:var(--muted); white-space:nowrap;
}
.chip.active{ background:var(--green); border-color:var(--green); color:#fff; }

/* ---------- inline quick transaction entry (person detail page) ---------- */
/* ---- কুইক-এন্ট্রি কার্ড: ট্যাপ করলে বা স্ক্রল করলে হেডারের নিচে আটকে থাকে ---- */
.qt-sticky-wrap{
  position:sticky; top:var(--search-sticky-top, 81px); z-index:30;
  background:var(--bg); padding:12px 18px 10px;
  box-shadow:0 4px 16px rgba(16,40,24,0.07);
}
/* ফোকাসে ফর্মের নিচে সাময়িক জায়গা — হিরো কার্ড স্ক্রল করে সরানোর জন্য জায়গা দরকার */
.qt-sticky-wrap.qt-focus + *,
.qt-sticky-wrap.qt-focus ~ .page-pad,
.qt-sticky-wrap.qt-focus ~ .section-head{ margin-top:0; }
/* লেনদেন তালিকার ওপরে সাময়িক প্যাডিং যোগ হয় যাতে স্ক্রল করার জায়গা থাকে */
.qt-sticky-wrap.qt-focus::after{
  content:''; display:block; height:0;
}

.qt-title{
  display:flex; align-items:center; gap:6px;
  margin:0 2px 8px; font-size:13.5px; font-weight:700; color:var(--muted);
}
.qt-title svg{ color:var(--green); }
.qt-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:14px; box-shadow:var(--shadow);
}
.qt-row{ display:flex; gap:12px; margin-bottom:12px; }
/* দিলাম/পেলাম বক্স দুটো রঙিন ব্যাকগ্রাউন্ডে আলাদা করে চেনা যায়, লেবেল স্থায়ী (টাইপ করলেও থাকে) */
.qt-input{
  flex:1; min-width:0; display:flex; align-items:center; gap:10px;
  border:1.5px solid transparent; border-radius:14px; padding:12px 14px;
  transition:border-color .15s;
}
.qt-input.due{ background:var(--red-light); }
.qt-input.paid{ background:var(--green-light); }
.qt-input.due:focus-within{ border-color:var(--red); background:var(--surface); }
.qt-input.paid:focus-within{ border-color:var(--green); background:var(--surface); }
.qt-icon{
  flex-shrink:0; width:36px; height:36px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
}
.qt-input.due .qt-icon{ background:rgba(224,57,44,.14); color:var(--red); }
.qt-input.paid .qt-icon{ background:rgba(14,138,60,.14); color:var(--green); }
.qt-field{ flex:1; min-width:0; display:flex; flex-direction:column; }
.qt-label{ font-size:12px; font-weight:800; color:var(--muted); line-height:1.3; letter-spacing:.2px; }
.qt-input.due .qt-label{ color:var(--red); }
.qt-input.paid .qt-label{ color:var(--green-dark); }
.qt-field input{
  border:none; background:transparent; padding:0; margin-top:2px;
  font-size:22px; font-weight:800; color:var(--ink); width:100%;
  letter-spacing:.2px;
}
.qt-field input::placeholder{ color:var(--muted); font-weight:700; opacity:.4; font-size:20px; }
.qt-input.full{
  margin-top:2px; margin-bottom:12px;
  background:var(--slate-light); border-radius:14px; padding:14px 15px;
  display:flex; align-items:center; gap:10px;
}
.qt-input.full svg{ color:var(--muted); flex-shrink:0; }
.qt-input.full input{ border:none; background:transparent; flex:1; min-width:0; font-size:16px; font-weight:500; color:var(--ink); }
.qt-footer{ display:flex; align-items:center; gap:10px; margin-top:4px; }
.qt-date-pill{
  display:flex; align-items:center; gap:6px; padding:11px 14px; border-radius:999px;
  background:var(--slate-light); color:var(--muted); font-size:14px; flex-shrink:0;
}
.qt-date-pill input{ border:none; background:transparent; font-size:14px; color:var(--ink); max-width:112px; }
.qt-footer .btn{ flex:1; padding-top:13px; padding-bottom:13px; font-size:16px; }

/* ---------- compact find + filter row (person search) ---------- */
.person-search-sticky{
  position:sticky; top:var(--search-sticky-top, 81px); z-index:30;
  background:var(--bg); padding:12px 14px 12px;
}
/* সার্চ + ফিল্টার একসাথে একটা কার্ডে — নরম ছায়া ও গোলাকার কোণা */
.search-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px 12px 11px;
  box-shadow:0 3px 14px rgba(16,40,24,0.07);
}

/* সার্চ বক্স হেডারের নিচে position:sticky দিয়ে আটকে থাকে — এটা সম্পূর্ণ CSS-চালিত,
   কোনো JS স্ক্রল ম্যানিপুলেশন নেই, তাই কোনো কাঁপুনি/জ্যাঙ্ক হয় না */

.find-row{ display:flex; gap:9px; align-items:center; }
.find-row .search-box{
  flex:1; min-width:0;
  background:var(--slate-light);
  border:1.5px solid transparent;
  border-radius:13px; padding:11px 14px;
  transition:border-color .15s, background .15s;
}
.find-row .search-box:focus-within{
  background:var(--surface);
  border-color:var(--green);
}
.find-row .search-box svg{ color:var(--muted); transition:color .15s; }
.find-row .search-box:focus-within svg{ color:var(--green); }

.see-all-btn{
  flex-shrink:0; padding:11px 15px; border-radius:13px;
  background:var(--green); color:#fff;
  font-weight:700; font-size:13.5px; border:none;
  box-shadow:0 2px 8px rgba(14,138,60,0.28);
  transition:transform .12s, box-shadow .12s;
}
.see-all-btn:active{ transform:scale(.96); box-shadow:0 1px 4px rgba(14,138,60,0.3); }

/* সব আইটেম যেন এক নজরে দেখা যায় — জায়গা না হলে পরের লাইনে নেমে যাবে, কাটা পড়বে না */
.filter-row{
  display:flex; align-items:center; gap:6px;
  padding:11px 0 0; margin-top:10px;
  border-top:1px solid var(--line);
  flex-wrap:wrap; row-gap:8px;
}
.filter-row .chip{
  padding:6px 13px; font-size:12.5px; flex-shrink:0;
  border-radius:999px; font-weight:600;
  background:var(--slate-light); border:1.5px solid transparent; color:var(--muted);
  transition:all .15s;
}
.filter-row .chip.active{
  background:var(--green); border-color:var(--green); color:#fff;
  box-shadow:0 2px 8px rgba(14,138,60,0.25);
}
.count-note{
  font-size:12px; color:var(--muted); flex-shrink:0;
  margin-left:2px; font-weight:600;
  padding:4px 8px; border-radius:999px; background:var(--slate-light);
}
.sort-btn{
  display:inline-flex; align-items:center; gap:4px; flex-shrink:0;
  font-size:12px; color:var(--green-dark); font-weight:700;
  margin-left:auto; padding:5px 10px 5px 7px;
  border-radius:999px; background:var(--green-light);
  transition:transform .12s; max-width:100%;
}
.sort-btn:active{ transform:scale(.95); }
.sort-btn svg{ transform:rotate(90deg); color:var(--green); }

/* ---------- search ---------- */
.search-wrap{ padding:12px 18px 0; }
.search-box{
  display:flex; align-items:center; gap:10px; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:11px 14px;
}
.search-box input{ flex:1; border:none; background:transparent; font-size:15px; min-width:0; }
.search-box svg{ color:var(--muted); flex-shrink:0; }

/* ---------- forms ---------- */
.form{ padding:16px 18px 0; }
.field-label{ display:block; font-size:14px; font-weight:600; margin:0 0 7px; }
.input{
  width:100%; padding:13px 14px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface); font-size:16px;
  margin-bottom:16px;
}
.input:focus{ border-color:var(--green); }
.input-icon{ display:flex; align-items:center; gap:10px; padding:13px 14px; border:1px solid var(--line); background:var(--surface); border-radius:12px; margin-bottom:16px; }
.input-icon svg{ color:var(--muted); flex-shrink:0; }
.input-icon input{ flex:1; border:none; background:transparent; font-size:16px; min-width:0; }

.toggle-pair{ display:flex; gap:12px; margin-bottom:18px; }
.toggle-opt{
  flex:1; padding:14px 10px; border-radius:12px; text-align:center;
  border:1.5px solid var(--line); background:var(--surface);
}
.toggle-opt .t{ font-size:15px; font-weight:700; margin:6px 0 0; }
.toggle-opt .s{ font-size:12px; color:var(--muted); margin:1px 0 0; }
.toggle-opt.sel-green{ background:var(--green); border-color:var(--green); color:#fff; }
.toggle-opt.sel-green .s{ color:rgba(255,255,255,.85); }
.toggle-opt.sel-red{ background:var(--red); border-color:var(--red); color:#fff; }
.toggle-opt.sel-red .s{ color:rgba(255,255,255,.85); }

.btn{
  width:100%; padding:15px 0; border-radius:12px; font-size:16px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-primary{ background:var(--green); color:#fff; }
.btn-outline{ background:var(--surface); border:1.5px solid var(--green); color:var(--green); }
.btn-danger-soft{ background:var(--red-light); color:var(--red); }
.btn-sm{ padding:9px 16px; width:auto; font-size:14px; border-radius:10px; }
.btn:disabled,.btn.off{ opacity:.45; pointer-events:none; }

/* ---------- customer detail ---------- */
.profile-card{
  margin:16px 18px 0; padding:14px; display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.profile-card .avatar{ width:50px; height:50px; font-size:17px; }
.profile-card h3{ margin:0; font-size:18px; font-weight:700; }
.profile-card p{ margin:1px 0 0; font-size:14px; color:var(--muted); }
.quick-actions{ display:flex; gap:10px; padding:14px 18px 0; }
.qa{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.qa .circle{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
}
.qa span{ font-size:12px; color:var(--muted); }

/* ---------- report ---------- */
.seg{
  display:flex; gap:6px; padding:12px 18px 0;
}
.seg button{
  flex:1; padding:9px 0; border-radius:10px; font-size:14px; font-weight:600;
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
}
.seg button.active{ background:var(--green); border-color:var(--green); color:#fff; }
.range-pick{
  margin:14px 18px 0; display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px;
}
.range-pick input{ border:none; background:transparent; font-size:14px; flex:1; min-width:0; color:var(--ink); }

.chart-card{
  margin:16px 18px 0; padding:16px 14px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.chart-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.chart-head h4{ margin:0; font-size:16px; font-weight:700; }
.legend{ display:flex; gap:12px; font-size:12px; color:var(--muted); }
.legend i{ width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:4px; }
.bars{ display:flex; align-items:flex-end; gap:10px; height:150px; }
.bar-group{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
.bar-pair{ display:flex; align-items:flex-end; gap:3px; height:100%; width:100%; justify-content:center; }
.bar{ width:11px; border-radius:3px 3px 0 0; min-height:2px; }
.bar.in{ background:var(--green); }
.bar.out{ background:var(--red); }
.bar-label{ font-size:12px; color:var(--muted); }

/* ---------- menu / settings rows ---------- */
.rows{ padding:14px 18px 0; }
.row-item{
  width:100%; display:flex; align-items:center; gap:13px; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:14px; margin-bottom:10px; box-shadow:var(--shadow);
}
.row-item .label{ flex:1; font-size:15px; font-weight:600; }
.row-item .value{ font-size:14px; color:var(--muted); }
.row-item .chev{ color:var(--muted); flex-shrink:0; }

.switch{
  width:48px; height:28px; border-radius:999px; background:var(--line);
  position:relative; flex-shrink:0; transition:background .16s;
}
.switch i{
  position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#fff; transition:left .16s; box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.switch.on{ background:var(--green); }
.switch.on i{ left:23px; }
.switch.disabled{ opacity:.4; }

/* ---------- bottom nav ---------- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; max-width:30rem; margin:0 auto;
  display:flex; background:var(--surface); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom); z-index:50;
}
.nav-btn{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 0 10px; color:var(--muted); }
.nav-btn span{ font-size:11.5px; font-weight:500; }
.nav-btn.active{ color:var(--green); }
.nav-btn.active span{ font-weight:700; }

/* ---------- fab ---------- */
.fab{
  position:fixed; right:calc(50% - 15rem + 18px); bottom:100px; z-index:45;
  width:56px; height:56px; border-radius:50%; background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg);
}
@media(max-width:30rem){ .fab{ right:18px; } }

.fab-pill{
  position:fixed;
  right:0;
  bottom:72px;
  z-index:46;
  display:flex; align-items:center; gap:7px;
  padding:14px 20px 14px 22px;
  background:var(--orange); color:#fff; font-weight:700; font-size:15px;
  border-radius:999px 0 0 999px;
  box-shadow:0 4px 16px rgba(180,100,0,.35);
}

/* ---------- sheets ---------- */
.overlay{ position:fixed; inset:0; background:rgba(10,25,16,.5); z-index:100; display:flex; align-items:flex-end; justify-content:center; }
.sheet{
  width:100%; max-width:30rem; background:var(--surface); border-radius:18px 18px 0 0;
  padding:20px 18px calc(24px + env(safe-area-inset-bottom)); max-height:90dvh; overflow-y:auto;
  animation:up .2s ease;
}
@keyframes up{ from{ transform:translateY(24px);} to{ transform:none;} }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.sheet-head h3{ margin:0; font-size:19px; font-weight:700; }
.sheet-actions{ display:flex; gap:10px; }

/* ---------- misc ---------- */
.empty{ text-align:center; padding:56px 24px; color:var(--muted); }
.empty svg{ color:var(--line); margin-bottom:10px; }
.empty p{ margin:0; font-size:15px; }
.hidden{ display:none !important; }
.note{ font-size:13px; color:var(--muted); padding:0 18px; margin:10px 0 0; }
/* ============ টোস্ট নোটিফিকেশন ============ */
.toast{
  position:fixed; left:50%; bottom:106px; z-index:9999;
  transform:translateX(-50%) translateY(16px);
  opacity:0; transition:opacity .22s ease, transform .22s ease;
  display:flex; align-items:center; gap:10px;
  padding:13px 18px 13px 14px; border-radius:16px;
  font-size:14.5px; font-weight:600; white-space:nowrap;
  max-width:90vw; white-space:normal; word-break:keep-all;
  box-shadow:0 8px 28px rgba(0,0,0,.18); border:1px solid transparent;
  pointer-events:none;
}
.toast.toast-show{
  opacity:1; transform:translateX(-50%) translateY(0);
}
.toast-icon{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:900;
}
.toast-msg{ line-height:1.4; }

/* success — সবুজ */
.toast-success{
  background:#1a3a24; color:#c8f0d6;
  border-color:rgba(40,200,100,.25);
}
.toast-success .toast-icon{ background:rgba(40,200,100,.25); color:#5edc96; }

/* error — লাল */
.toast-error{
  background:#3a1a1a; color:#f0c8c8;
  border-color:rgba(220,60,60,.25);
}
.toast-error .toast-icon{ background:rgba(220,60,60,.25); color:#f08080; }

/* warning — হলুদ/কমলা */
.toast-warning{
  background:#3a2e10; color:#f0dca0;
  border-color:rgba(200,150,20,.25);
}
.toast-warning .toast-icon{ background:rgba(200,150,20,.2); color:#f0c040; }

/* info — নীল */
.toast-info{
  background:#1a2a3a; color:#c8dcf0;
  border-color:rgba(60,120,220,.25);
}
.toast-info .toast-icon{ background:rgba(60,120,220,.2); color:#80aaee; }
.divider{ height:1px; background:var(--line); margin:16px 18px; }
.txn-badge{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px; }

/* ---------- onboarding ---------- */
.onboard{
  min-height:100dvh; display:flex; flex-direction:column;
  padding:30px 20px calc(24px + env(safe-area-inset-bottom));
  overflow-y:auto;
}
.onboard .brand{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.onboard .brand img{ width:42px; height:42px; border-radius:11px; }
.onboard .brand b{ font-size:16px; font-weight:700; }
.onboard h1{ margin:20px 0 4px; font-size:22px; font-weight:700; }
.onboard .sub{ margin:0 0 20px; font-size:14px; color:var(--muted); line-height:1.5; }
.onboard .spacer{ flex:1; min-height:16px; }
.prof-card{
  width:100%; display:flex; align-items:center; gap:13px; text-align:left;
  padding:14px; border-radius:14px; border:1.5px solid var(--line);
  background:var(--surface); margin-top:10px;
}
.prof-card .pi{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.prof-card .pt{ flex:1; min-width:0; }
.prof-card .pt b{ display:block; font-size:15px; font-weight:700; }
.prof-card .pt span{ font-size:12.5px; color:var(--muted); }
.prof-card.selected{ border-color:var(--green); background:var(--green-light); }
.prof-card .check{ color:var(--green); flex-shrink:0; }
.prof-pills{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.prof-pill{ padding:9px 14px; border-radius:999px; font-size:13px; font-weight:600; border:1.5px solid var(--line); color:var(--muted); background:var(--surface); }
.prof-pill.active{ background:var(--green); border-color:var(--green); color:#fff; }

/* ---------- lock screen ---------- */
.lock{ min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; gap:6px; }
.lock img{ width:84px; height:84px; border-radius:20px; margin-bottom:8px; }
.lock h2{ margin:0; font-size:21px; }
.lock p{ margin:0 0 18px; font-size:14px; color:var(--muted); }
.pin-dots{ display:flex; gap:14px; margin-bottom:22px; }
.pin-dots i{ width:14px; height:14px; border-radius:50%; border:2px solid var(--green); display:block; }
.pin-dots i.on{ background:var(--green); }
.keypad{ display:grid; grid-template-columns:repeat(3,74px); gap:14px; }
.keypad button{
  height:64px; border-radius:16px; background:var(--surface); border:1px solid var(--line);
  font-size:23px; font-weight:600; display:flex; align-items:center; justify-content:center;
}
.keypad button:active{ background:var(--green-light); }
.shake{ animation:shake .3s; }
@keyframes shake{ 25%{transform:translateX(-7px);} 75%{transform:translateX(7px);} }

@media print{
  .bottom-nav,.fab,.appbar .icon-btn,.no-print{ display:none !important; }
  #app{ padding-bottom:0; max-width:none; }
  body{ background:#fff; }
}

/* ============ ব্যক্তির বিস্তারিত পেজ ============ */
/* হিরো কার্ড: নাম, ফোন, ব্যালেন্স ও কুইক অ্যাকশন একসাথে একটা কার্ডে */
/* ব্যক্তির হিরো কার্ড */
/* ব্যক্তির হিরো কার্ড — প্রফেশনাল রিডিজাইন */
.person-hero{
  border-radius:20px; overflow:hidden;
  box-shadow:0 4px 20px rgba(16,40,24,.10);
  border:1px solid var(--line);
}

/* উপরের অংশ — গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড */
.person-hero-top{
  display:flex; align-items:center; gap:14px; padding:18px 18px 16px;
  border-bottom:1px solid var(--line);
}
.person-hero.owed  .person-hero-top{ background:linear-gradient(135deg,#fef2f2 0%,#fff 65%); }
.person-hero.owing .person-hero-top{ background:linear-gradient(135deg,#f0faf4 0%,#fff 65%); }
.person-hero.settled .person-hero-top{ background:var(--surface); }

/* নাম ও ফোন */
.person-hero-id{ flex:1; min-width:0; }
.person-hero-id h3{ margin:0; font-size:20px; font-weight:800; letter-spacing:.1px; }
.person-hero-id p{ margin:4px 0 0; font-size:13.5px; color:var(--muted); }

/* ব্যালেন্স — ডান পাশে */
.person-hero-bal{
  display:flex; flex-direction:column; align-items:flex-end;
  flex-shrink:0; text-align:right;
}
.person-hero-bal .val{ font-size:23px; font-weight:800; letter-spacing:.3px; line-height:1.1; }
.person-hero-bal .lbl{
  font-size:12px; font-weight:800; margin-top:5px;
  padding:3px 10px; border-radius:999px; letter-spacing:.2px;
}
.person-hero.owed   .person-hero-bal .val{ color:var(--red); }
.person-hero.owed   .person-hero-bal .lbl{ color:#fff; background:var(--red); }
.person-hero.owing  .person-hero-bal .val{ color:var(--green-dark); }
.person-hero.owing  .person-hero-bal .lbl{ color:#fff; background:var(--green); }
.person-hero.settled .person-hero-bal .val{ color:var(--muted); }
.person-hero.settled .person-hero-bal .lbl{ color:var(--muted); background:var(--slate-light); }

/* অ্যাকশন বাটন রো */
.person-hero-acts{ display:flex; background:var(--surface); }
.person-hero-acts .qa{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:14px 4px 15px; font-size:12.5px; color:var(--muted); font-weight:700;
  text-decoration:none; background:transparent;
  border-right:1px solid var(--line);
  transition:background .12s;
}
.person-hero-acts .qa:last-child{ border-right:none; }
.person-hero-acts .qa:active{ background:var(--slate-light); }
.person-hero-acts .qa .circle{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--slate-light);
  transition:background .12s;
}
.person-hero-acts .c-blue.circle{ background:#e8f0fe; color:#1a73e8; }
.person-hero-acts .c-green.circle{ background:var(--green-light); color:var(--green); }
.person-hero-acts .c-muted.circle{ background:var(--slate-light); color:var(--muted); }

/* লেনদেনের সারি */
.sec-count{
  font-size:12px; font-weight:700; color:var(--muted);
  background:var(--slate-light); padding:3px 10px; border-radius:999px;
}
.txn-row{
  width:100%; display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--line);
  border-left:4px solid var(--line);
  border-radius:14px; padding:12px 14px; margin-bottom:9px; text-align:left;
}
.txn-row:active{ background:var(--slate-light); }
.txn-row.is-due{ border-left-color:var(--green); }
.txn-row.is-paid{ border-left-color:var(--red); }
.txn-row-icon{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.txn-row.is-due .txn-row-icon{ background:var(--green-light); color:var(--green); }
.txn-row.is-paid .txn-row-icon{ background:var(--red-light); color:var(--red); }
.txn-row-body{ flex:1; min-width:0; }
.txn-row-title{
  margin:0; font-size:14.5px; font-weight:700; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.txn-row-date{
  margin:3px 0 0; font-size:12px; color:var(--muted);
  display:flex; align-items:center; gap:4px;
}
.txn-row-date svg{ opacity:.75; }
.txn-row-right{ text-align:right; flex-shrink:0; }
.txn-row-amt{ margin:0; font-size:15.5px; font-weight:800; letter-spacing:.2px; }
.txn-row.is-due .txn-row-amt{ color:var(--green); }
.txn-row.is-paid .txn-row-amt{ color:var(--red); }
.txn-row-run{ margin:2px 0 0; font-size:11.5px; color:var(--muted); font-weight:600; }

/* ============ নতুন হিসাব ফর্ম ============ */
.cf-photo-row{
  display:flex; align-items:center; gap:16px;
  padding:4px 0 20px;
}
.cf-avatar{
  position:relative; width:80px; height:80px; border-radius:50%;
  border:2px dashed var(--green); cursor:pointer; flex-shrink:0;
  overflow:hidden; background:var(--green-light);
  display:flex; align-items:center; justify-content:center;
  transition:border-style .2s;
}
.cf-avatar:active{ opacity:.85; }
.cf-avatar img{ width:100%; height:100%; object-fit:cover; }
.cf-avatar-placeholder{ color:var(--green); opacity:.7; }
.cf-avatar-badge{
  position:absolute; bottom:4px; right:4px;
  background:var(--green); color:#fff; border-radius:50%;
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.cf-photo-info{ flex:1; min-width:0; }
.cf-photo-hint{ margin:0; font-size:15px; font-weight:700; color:var(--ink); }
.cf-photo-sub{ margin:3px 0 0; font-size:13px; color:var(--muted); }
.cf-photo-clear{
  margin-top:8px; font-size:12.5px; font-weight:700; color:var(--red);
  background:var(--red-light); border:none; border-radius:999px;
  padding:4px 12px; cursor:pointer;
}

.cf-contacts-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:14px; border-radius:14px; margin-bottom:18px;
  background:var(--slate-light); border:1.5px dashed var(--line);
  font-size:15px; font-weight:700; color:var(--ink);
  transition:background .15s;
}
.cf-contacts-btn:active{ background:var(--line); }
.cf-contacts-btn svg{ color:var(--green); }

.cf-fields{ display:flex; flex-direction:column; gap:14px; }
.cf-field-wrap{ display:flex; flex-direction:column; gap:5px; }
.cf-field-label{
  font-size:13px; font-weight:700; color:var(--muted); letter-spacing:.3px;
}
.cf-field-label span{ color:var(--red); margin-left:2px; }
.cf-input{
  border:1.5px solid var(--line); border-radius:12px;
  padding:14px 15px; font-size:17px; font-weight:600;
  background:var(--bg); color:var(--ink); width:100%;
  transition:border-color .15s, background .15s;
}
.cf-input:focus{ border-color:var(--green); background:var(--surface); outline:none; }
.cf-phone-row{ display:flex; align-items:center; gap:0; }
.cf-country-code{
  display:flex; align-items:center; gap:6px;
  padding:14px 12px 14px 15px; font-size:15px; font-weight:700; color:var(--muted);
  border:1.5px solid var(--line); border-right:none;
  border-radius:12px 0 0 12px; background:var(--slate-light);
  white-space:nowrap; flex-shrink:0;
}
.cf-country-code svg{ color:var(--green); }
.cf-input-phone{ border-radius:0 12px 12px 0; }
.cf-save-btn{ margin-top:22px; padding:16px; font-size:17px; }

/* ============ কন্টাক্ট পিকার শিট ============ */
.contact-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 0 16px;
}
.contact-head h3{ margin:0; font-size:18px; font-weight:800; }
.contact-search-wrap{ padding:0 0 14px; }
.contact-list{
  max-height:60vh; overflow-y:auto; margin:0 -18px;
  padding:0 18px;
}
.contact-list::-webkit-scrollbar{ display:none; }
.contact-row{
  width:100%; display:flex; align-items:center; gap:13px;
  padding:12px 0; background:transparent; text-align:left;
  border-bottom:1px dashed var(--line);
}
.contact-row:last-child{ border-bottom:none; }
.contact-row:active{ background:var(--slate-light); margin:0 -4px; padding-left:4px; padding-right:4px; border-radius:10px; }
.contact-avatar{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background:var(--orange); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800; letter-spacing:.5px;
}
.contact-info{ flex:1; min-width:0; }
.contact-name{
  margin:0; font-size:15px; font-weight:700; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.contact-phone{ margin:3px 0 0; font-size:13px; color:var(--muted); font-weight:500; }

/* ============ নতুন auth স্ক্রিন ============ */
/* ============ AUTH স্ক্রিন — নতুন ডিজাইন ============ */
.auth-screen{
  min-height:100vh; display:flex; flex-direction:column;
  background:var(--bg);
}
.auth-top{
  padding:14px 18px 0; display:flex; align-items:center; min-height:54px;
}
.auth-back-btn{
  width:42px; height:42px; border-radius:50%; display:flex;
  align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--line);
}
.auth-hero{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:32px 28px 24px;
}
/* লোগো — বড় ও স্পষ্ট */
.auth-icon{
  width:110px; height:110px; border-radius:26px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:24px; overflow:hidden;
  border:1px solid var(--line);
}
.auth-icon img{ width:110px; height:110px; object-fit:cover; border-radius:26px; }
.auth-hero h1{ margin:0; font-size:28px; font-weight:800; color:var(--ink); }
.auth-hero p{ margin:8px 0 0; font-size:15px; color:var(--muted); line-height:1.6; }

/* ফর্ম এলাকা */
.auth-body{
  flex:1; display:flex; flex-direction:column; gap:14px;
  padding:8px 24px 36px;
}
.auth-input-wrap{
  display:flex; align-items:center; gap:11px;
  border:1.5px solid var(--line); border-radius:16px;
  padding:15px 18px; background:var(--surface);
  transition:border-color .15s, box-shadow .15s;
}
.auth-input-wrap:focus-within{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(14,138,60,0.10);
}
.auth-input-wrap svg{ flex-shrink:0; color:var(--muted); }
.auth-prefix{
  font-size:15px; font-weight:700; color:var(--muted); flex-shrink:0;
  padding-right:8px; border-right:1.5px solid var(--line);
}
.auth-input{
  flex:1; border:none; background:transparent;
  font-size:17px; font-weight:600; color:var(--ink); min-width:0;
}
.auth-otp-input{
  border:1.5px solid var(--line); border-radius:16px; width:100%;
  padding:20px; font-size:30px; font-weight:800; letter-spacing:14px;
  text-align:center; background:var(--surface); color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.auth-otp-input:focus{
  border-color:var(--green); outline:none;
  box-shadow:0 0 0 3px rgba(14,138,60,0.10);
}

/* মূল বাটন */
.auth-btn-main{
  padding:18px; border-radius:16px; background:var(--green); color:#fff;
  font-size:17px; font-weight:800; display:flex; align-items:center;
  justify-content:center; gap:8px; margin-top:4px;
  box-shadow:0 4px 16px rgba(14,138,60,0.28);
  transition:transform .12s, box-shadow .12s;
}
.auth-btn-main:active{ transform:scale(.98); box-shadow:0 2px 8px rgba(14,138,60,0.2); }
.auth-btn-main:disabled{ opacity:.6; transform:none; }
.auth-arr{ font-size:20px; }
.auth-link-btn{
  background:transparent; border:none; color:var(--green);
  font-size:14.5px; font-weight:700; padding:6px 0; text-align:center;
}

/* ইউজার পিল — ছবি + নাম + নম্বর */
.auth-user-pill{
  display:flex; align-items:center; gap:14px;
  background:var(--surface); border-radius:18px;
  padding:14px 18px; border:1.5px solid var(--line);
}
.auth-user-av{
  width:48px; height:48px; border-radius:50%; background:var(--green);
  color:#fff; font-weight:800; font-size:18px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--green-light);
}
.auth-user-pill span{ font-size:15px; font-weight:600; color:var(--ink); }

/* ============ মুছে ফেলা লেনদেন ============ */
.deleted-txn{
  border-left-color:var(--muted) !important;
  background:var(--slate-light);
}
.deleted-txn:active{ background:var(--line); }
.restore-btn{
  display:flex; align-items:center; gap:5px;
  font-size:12px; font-weight:800; color:#fff;
  background:var(--green); border:none; border-radius:999px;
  padding:6px 12px; white-space:nowrap; cursor:pointer;
  box-shadow:0 2px 6px rgba(14,138,60,.3);
}
.restore-btn svg{ flex-shrink:0; }
.restore-btn:active{ opacity:.85; }

/* ============ সব লেনদেন পেজ ============ */
/* স্ট্রিপ ফিল্টার ট্যাব */
.txn-tabs{
  display:flex; overflow-x:auto; scrollbar-width:none;
  border-bottom:2px solid var(--line);
  padding:0 4px; gap:0; position:sticky;
  top:var(--search-sticky-top,81px); z-index:20;
  background:var(--bg);
}
.txn-tabs::-webkit-scrollbar{ display:none; }
.txn-tab{
  flex-shrink:0; padding:13px 16px;
  font-size:13.5px; font-weight:600; color:var(--muted);
  background:transparent; border:none; position:relative;
  white-space:nowrap;
}
.txn-tab.active{ color:var(--green); font-weight:800; }
.txn-tab.active::after{
  content:''; position:absolute; bottom:-2px; left:10%; right:10%;
  height:3px; background:var(--green); border-radius:999px;
}

/* সারসংক্ষেপ স্ট্রিপ */
.txn-summary-strip{
  display:flex; align-items:center; gap:10px; justify-content:center;
  padding:10px 18px; font-size:13.5px; font-weight:700;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.strip-div{ color:var(--line); font-weight:400; }

/* ফিড কার্ড */
.txn-feed{ padding:12px 18px 0; display:flex; flex-direction:column; gap:10px; }
.feed-card{
  width:100%; display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:13px 14px; text-align:left;
  transition:background .1s;
}
.feed-card:active{ background:var(--slate-light); }
.feed-card-left{ position:relative; flex-shrink:0; }
.feed-card-badge{
  position:absolute; bottom:-2px; right:-2px;
  width:18px; height:18px; border-radius:50%; border:2px solid var(--surface);
  display:flex; align-items:center; justify-content:center;
}
.badge-out{ background:var(--green); color:#fff; }
.badge-in{ background:var(--red); color:#fff; }
.feed-cash-icon{
  width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.feed-card-body{ flex:1; min-width:0; }
.feed-card-name{
  margin:0; font-size:15px; font-weight:700; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.feed-card-note{ margin:3px 0 0; font-size:12.5px; color:var(--muted); }
.feed-card-right{ text-align:right; flex-shrink:0; }
.feed-card-amt{ margin:0; font-size:15.5px; font-weight:800; }
.feed-card-date{ margin:3px 0 0; font-size:12px; color:var(--muted); }

/* ============ ডেমো ব্যানার ============ */
.demo-banner{
  display:flex; align-items:center; gap:13px; width:100%;
  padding:13px 16px; box-sizing:border-box; text-align:left;
  background:var(--green-light); border:none;
  border-bottom:1.5px solid rgba(14,138,60,.15);
}
[data-theme="dark"] .demo-banner{
  background:rgba(14,138,60,.15);
  border-bottom-color:rgba(14,138,60,.25);
}
.demo-banner:active{ opacity:.85; }
.demo-banner-icon{
  width:40px; height:40px; border-radius:13px; flex-shrink:0;
  background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(14,138,60,.35);
}
.demo-banner-body{ flex:1; min-width:0; }
.demo-banner-title{
  margin:0; font-size:13.5px; font-weight:800; color:var(--green-dark);
}
[data-theme="dark"] .demo-banner-title{ color:#6ddc96; }
.demo-banner-sub{
  margin:2px 0 0; font-size:12px; color:var(--green); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
[data-theme="dark"] .demo-banner-sub{ color:#4ab878; }
.demo-banner-cta{
  flex-shrink:0; font-size:12px; font-weight:800; color:#fff;
  background:var(--green); padding:7px 13px; border-radius:999px;
  box-shadow:0 2px 8px rgba(14,138,60,.4);
  white-space:nowrap;
}

/* ============ ওভারডিউ ব্যানার ============ */
.overdue-banner{
  display:flex; align-items:center; gap:13px; width:100%;
  padding:13px 16px; box-sizing:border-box; text-align:left;
  background:var(--red-light); border:none;
  border-bottom:1.5px solid rgba(200,30,30,.15);
}
[data-theme="dark"] .overdue-banner{ background:rgba(200,40,40,.18); border-bottom-color:rgba(200,40,40,.3); }
.overdue-banner:active{ opacity:.85; }
.overdue-banner-icon{
  width:40px; height:40px; border-radius:13px; flex-shrink:0;
  background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(200,30,30,.35);
}
.overdue-banner-body{ flex:1; min-width:0; }
.overdue-banner-title{
  margin:0; font-size:13.5px; font-weight:800; color:var(--red);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.overdue-banner-sub{
  margin:2px 0 0; font-size:12px; color:var(--red); font-weight:500; opacity:.75;
}
.overdue-banner-cta{
  flex-shrink:0; font-size:12px; font-weight:800; color:#fff;
  background:var(--red); padding:7px 13px; border-radius:999px;
  box-shadow:0 2px 8px rgba(200,30,30,.4); white-space:nowrap;
}

/* ============ নোটিফিকেশন সেন্টার ============ */
.notif-btn{ position:relative; }
.notif-badge{
  position:absolute; top:-1px; right:-1px; min-width:15px; height:15px;
  padding:0 3px; border-radius:999px; background:var(--red); color:#fff;
  font-size:9.5px; font-weight:800; font-style:normal; line-height:1;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--surface); box-sizing:content-box;
}
.notif-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:2px 0 14px; gap:10px;
}
.notif-mark-all{
  font-size:12px; font-weight:700; color:var(--green);
  background:var(--green-light); border:none;
  padding:6px 11px; border-radius:999px; white-space:nowrap;
}
.notif-perm{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:12px 14px; margin-bottom:12px; box-sizing:border-box;
  background:var(--green-light); border:1.5px dashed var(--green);
  border-radius:14px; text-align:left;
}
.notif-perm-cta{
  flex-shrink:0; font-size:12px; font-weight:800; color:#fff;
  background:var(--green); padding:6px 12px; border-radius:999px; white-space:nowrap;
}
.notif-list{ max-height:62vh; overflow-y:auto; margin:0 -4px; padding:0 4px; }
.notif-list::-webkit-scrollbar{ display:none; }
.notif-row{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:12px 12px; margin-bottom:8px; box-sizing:border-box;
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; text-align:left; position:relative;
}
.notif-row:active{ background:var(--slate-light); }
.notif-row.is-read{ opacity:.6; background:transparent; }
.notif-icon{
  width:38px; height:38px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.tone-red{ background:var(--red-light); color:var(--red); }
.tone-orange{ background:#fff2e0; color:#d98010; }
.tone-blue{ background:#e6effd; color:#2d6be0; }
.tone-green{ background:var(--green-light); color:var(--green); }
.tone-slate{ background:var(--slate-light); color:var(--muted); }
[data-theme="dark"] .tone-orange{ background:rgba(217,128,16,.18); }
[data-theme="dark"] .tone-blue{ background:rgba(45,107,224,.18); }
.notif-body{ flex:1; min-width:0; }
.notif-title{
  margin:0; font-size:14px; font-weight:700; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.notif-sub{
  margin:3px 0 0; font-size:12.5px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.notif-dot{
  width:8px; height:8px; border-radius:50%; background:var(--green); flex-shrink:0;
}

/* ============ নোটিফিকেশন ব্লকড নির্দেশনা ============ */
.notif-steps{ display:flex; flex-direction:column; gap:12px; }
.notif-step{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--slate-light); border-radius:12px; padding:12px 14px;
}
.notif-step-num{
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  background:var(--green); color:#fff;
  font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.notif-step p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink); }
.notif-tip{
  display:flex; gap:9px; align-items:flex-start; margin-top:14px;
  background:var(--green-light); border-radius:12px; padding:12px 14px;
  font-size:12.5px; line-height:1.6; color:var(--green-dark);
}
.notif-tip svg{ flex-shrink:0; margin-top:1px; }

/* ============ ফেরতের তারিখ শিট ============ */
.rem-hint{
  display:flex; align-items:center; gap:7px; margin-top:10px;
  padding:11px 14px; border-radius:12px;
  background:var(--green-light); color:var(--green-dark);
  font-size:13.5px; font-weight:700;
}
.rem-hint.is-empty{ display:none; }
.rem-hint svg{ flex-shrink:0; }
.rem-quick-row{
  display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap;
}
.rem-quick-label{ font-size:12.5px; color:var(--muted); font-weight:600; }
.rem-quick{
  font-size:12.5px; font-weight:700; color:var(--ink);
  background:var(--slate-light); border:1px solid var(--line);
  padding:7px 13px; border-radius:999px;
}
.rem-quick:active{ background:var(--green-light); border-color:var(--green); color:var(--green-dark); }

/* ============ লেজার টেবিল (ব্যক্তির বিস্তারিত) ============ */
.ldgr-wrap{ margin:0 18px; border-radius:16px; border:1px solid var(--line); box-shadow:0 4px 18px rgba(14,138,60,.07), 0 1px 4px rgba(0,0,0,.06); }

.ldgr-head, .ldgr-row, .ldgr-total{
  display:grid;
  grid-template-columns: 40% 30% 30%;
  align-items:stretch; width:100%;
}

/* কলাম হেডার */
.ldgr-head{
  background:var(--green); color:#fff;
  font-size:14px; font-weight:800; letter-spacing:.2px;
  border-radius:16px 16px 0 0; overflow:hidden;
}
.ldgr-head > div{ padding:11px 14px; }
.ldgr-head .ldgr-dilam,
.ldgr-head .ldgr-pelam{ text-align:right; border-left:1px solid rgba(255,255,255,.3); }

/* লেনদেনের সারি */
.ldgr-row{
  border-top:1px solid var(--line);
  cursor:pointer; text-align:left; background:var(--surface);
}
.ldgr-row:active{ background:var(--slate-light); }
.ldgr-row.ldgr-due .ldgr-dilam{ background:rgba(200,30,30,.04); }

/* বিবরণ কলাম */
.ldgr-desc{ padding:12px 13px; min-width:0; }
.ldgr-title{
  margin:0; font-size:15px; font-weight:700; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.4;
}
.ldgr-date{ margin:3px 0 7px; font-size:13px; color:var(--muted); }
.ldgr-bal{
  display:inline-block; font-size:12px; font-weight:700;
  background:var(--slate-light); color:var(--muted);
  padding:3px 10px; border-radius:999px;
}

/* টাকার কলাম — ডানে aligned, nowrap, auto width */
.ldgr-dilam, .ldgr-pelam{
  padding:12px 13px; font-size:16px; font-weight:800;
  display:flex; align-items:center; justify-content:flex-end;
  text-align:right; white-space:nowrap;
  border-left:1px solid var(--line);
}
.ldgr-row.ldgr-due  .ldgr-dilam{ color:var(--red); }
.ldgr-row.ldgr-paid .ldgr-pelam{ color:var(--green); }
.ldgr-row .ldgr-dilam:empty,
.ldgr-row .ldgr-pelam:empty{ color:transparent; }

/* মোট সারি */
.ldgr-total{
  background:var(--slate-light);
  border-top:2px solid var(--line);
  font-size:15px; font-weight:800;
}
.ldgr-total > div{ padding:13px 13px; }
.ldgr-total .ldgr-desc{ color:var(--ink); font-size:16px; }
.ldgr-total .ldgr-dilam{ color:var(--red); font-size:16px; white-space:nowrap; }
.ldgr-total .ldgr-pelam{ color:var(--green); font-size:16px; white-space:nowrap; }

/* ============ লেজার উন্নত ডিজাইন ============ */
.ldgr-desc-top{ display:flex; align-items:center; gap:7px; }
.ldgr-serial{
  font-size:10px; font-weight:800; color:var(--muted);
  background:var(--slate-light); border-radius:4px;
  padding:1px 5px; flex-shrink:0; line-height:1.6;
}
.ldgr-bal-zero .ldgr-bal,
.ldgr-bal-zero{ background:var(--green-light); color:var(--green-dark); }

/* খালি ঘরে — ড্যাশ */
.ldgr-row .ldgr-dilam:only-child,
.ldgr-row .ldgr-pelam{ color:var(--muted); font-size:16px; }
.ldgr-row.ldgr-due  .ldgr-dilam{ color:var(--red); font-size:16px; }
.ldgr-row.ldgr-paid .ldgr-pelam{ color:var(--green); font-size:16px; }

/* ============ কলাপ্সিবল মুছে ফেলা লেনদেন ============ */
/* del-collapse moved to responsive section */
.del-collapse-head{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:12px 14px; background:#fff5f5;
  text-align:left; font-size:13.5px; font-weight:700; color:#c01e1e;
  border-bottom:1px solid transparent; transition:border-color .2s;
}
[data-theme="dark"] .del-collapse-head{ background:rgba(200,30,30,.15); color:#f08080; }
.del-collapse.is-open .del-collapse-head{ border-bottom-color:rgba(200,30,30,.2); }
.del-collapse-head:active{ opacity:.85; }
.del-collapse-icon{ color:#c01e1e; flex-shrink:0; }
[data-theme="dark"] .del-collapse-icon{ color:#f08080; }
.del-collapse-label{ flex:1; }
.del-collapse-count{
  font-size:11.5px; font-weight:800; border-radius:999px;
  padding:2px 10px; background:rgba(200,30,30,.12); color:#c01e1e;
}
[data-theme="dark"] .del-collapse-count{ background:rgba(200,30,30,.3); color:#f08080; }
.del-collapse-chev{
  flex-shrink:0; transition:transform .2s; color:#c01e1e; opacity:.7;
}
.del-collapse.is-open .del-collapse-chev{ transform:rotate(180deg); }
.del-collapse-body{
  max-height:0; overflow:hidden; transition:max-height .3s ease;
}
.del-collapse.is-open .del-collapse-body{
  max-height:2000px;
}
.del-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:10px; padding:11px 14px;
  border-top:1px dashed var(--line);
}
.del-row-left{ display:flex; align-items:center; gap:9px; min-width:0; }
.del-row-icon{
  width:28px; height:28px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.del-due{ background:var(--red-light); color:var(--red); }
.del-paid{ background:var(--green-light); color:var(--green); }
.del-row-title{
  margin:0; font-size:13px; font-weight:600; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.del-row-date{ margin:2px 0 0; font-size:11px; color:var(--muted); }
.del-row-right{
  display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0;
}
.del-row-amt{ margin:0; font-size:13px; font-weight:700; white-space:nowrap; }

/* ============ মুছে ফেলা কলাপস — বর্ডার ও সুন্দর ডিজাইন ============ */
.del-collapse{
  border:1.5px solid rgba(200,30,30,.25); border-radius:14px; overflow:hidden;
  margin:14px 18px 0; box-shadow:0 2px 10px rgba(200,30,30,.07);
}
/* del-collapse-head merged above */

/* ============ সব ফোন সাইজে সামঞ্জস্য ============ */

/* ছোট ফোন (< 360px) */
@media (max-width: 22.5rem) {
  /* appbar */
  .appbar{ padding:10px 12px; }
  .appbar h1{ font-size:15px; }
  .appbar p{ font-size:11px; }
  .net-chip .val{ font-size:16px; }
  /* stat cards */
  .stat-grid{ gap:8px; padding:12px 12px 0; }
  .stat-card{ padding:12px 12px; border-radius:14px; }
  .stat-card .amt{ font-size:19px; }
  /* search */
  .person-search-sticky{ padding:10px 12px; }
  /* person list */
  .tile{ padding:12px 12px; }
  /* ledger */
  .ldgr-wrap{ margin:0 12px; }
  /* ছোট ফোনে auto column — বিবরণ কলাম হালকা ছোট হয় */
  .ldgr-dilam, .ldgr-pelam{ font-size:14px; padding:9px 8px; }
  .ldgr-desc{ padding:9px 8px; }
  .ldgr-title{ font-size:14px; } .ldgr-date{ font-size:12px; }
  /* qt form */
  .qt-sticky-wrap{ padding:10px 12px 8px; }
  /* hero card */
  .person-hero-id h3{ font-size:17px; }
  .person-hero-bal .val{ font-size:18px; }
  /* page padding */
  .page-pad{ padding:0 12px; }
  .form{ padding:0 12px 16px; }
}

/* মাঝারি ফোন (360-390px) — ডিফল্ট, কিছু tweak */
@media (min-width: 22.5rem) and (max-width: 24.375rem) {
  /* medium phone — auto columns work fine */
}

/* বড় ফোন (> 420px) */
@media (min-width: 26.25rem) {
  .ldgr-dilam, .ldgr-pelam{ font-size:17px; }
  .stat-card .amt{ font-size:24px; }
  .person-hero-id h3{ font-size:21px; }
  .person-hero-bal .val{ font-size:24px; }
}

/* ট্যাবলেট / iPad (> 600px) */
@media (min-width: 37.5rem) {
  .screen{ max-width:520px; margin:0 auto; box-shadow:0 0 40px rgba(0,0,0,.1); }
  .appbar{ border-radius:0; }
}

/* ============ আয়/খরচ দ্রুত যোগের স্ট্যাট কার্ড ============ */
.stat-cash-btn{
  background:var(--surface); border-radius:16px; padding:14px 14px 12px;
  text-align:left; border:1px solid var(--line);
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  transition:background .12s, box-shadow .12s; cursor:pointer;
}
.stat-cash-btn:active{
  background:var(--slate-light);
  box-shadow:0 0 0 2px var(--green) inset;
}
.stat-cash-btn .row{
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.stat-cash-btn .lbl{
  flex:1; font-size:13px; color:var(--muted); font-weight:600; margin:0;
}
.stat-cash-btn .val{
  font-size:20px; font-weight:800; color:var(--ink); margin:0;
}
.stat-add-icon{
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(14,138,60,.3);
}

/* ============ SMS পাঠানো — spinner ============ */
.spinner-sm{
  display:inline-block; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite; vertical-align:-3px; margin-right:4px;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============ SMS টগল বাটন (লেনদেন ফর্ম) ============ */
.sms-toggle{
  position:relative; display:inline-block;
  width:46px; height:26px; flex-shrink:0; cursor:pointer;
}
.sms-toggle input{ opacity:0; width:0; height:0; position:absolute; }
.sms-slider{
  position:absolute; inset:0; background:var(--line);
  border-radius:26px; transition:.25s;
}
.sms-slider:before{
  content:""; position:absolute;
  width:20px; height:20px; left:3px; bottom:3px;
  background:#fff; border-radius:50%; transition:.25s;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.sms-toggle input:checked + .sms-slider{ background:var(--green); }
.sms-toggle input:checked + .sms-slider:before{ transform:translateX(20px); }
.sms-toggle.disabled{ opacity:.45; cursor:not-allowed; }

/* ============ Quick-form SMS টগল রো ============ */
.qt-sms-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; gap:10px;
  border-top:1px solid var(--line);
}
.qt-sms-info{
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:var(--muted); font-weight:600; flex:1; flex-wrap:wrap;
}
.qt-cred-badge{ font-size:11px; font-weight:700; }

/* ============ SMS প্যাকেজ কার্ড ============ */
.sms-pkg{
  flex:1; border-radius:10px; padding:10px 8px; text-align:center;
  min-width:0; cursor:pointer;
  background:var(--green-light); color:var(--ink);
  border:2px solid transparent; transition:background .15s,color .15s,border-color .15s;
}
.sms-pkg-sel{
  background:var(--green); color:#fff;
  border-color:var(--green);
}
.sms-pkg-name{ font-size:10px; font-weight:700; margin-bottom:4px; opacity:.85; }
.sms-pkg-count{ font-size:20px; font-weight:800; }
.sms-pkg-unit{ font-size:10px; margin-bottom:4px; opacity:.7; }
.sms-pkg-price{ font-size:13px; font-weight:800; }
.sms-pkg-check{ font-size:10px; margin-top:4px; opacity:.9; }

/* ============ Live Online Indicator ============ */
.live-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#1a6fc4; flex-shrink:0;
  box-shadow:0 0 0 0 rgba(26,111,196,.4);
  animation:live-pulse 2s infinite;
}
@keyframes live-pulse{
  0%  { box-shadow:0 0 0 0 rgba(26,111,196,.5); }
  60% { box-shadow:0 0 0 6px rgba(26,111,196,0); }
  100%{ box-shadow:0 0 0 0 rgba(26,111,196,0); }
}

/* ═══════════════════════════════════════════════════════════════
   ডিজাইন পরিমার্জন ২০২৬ — সব সমস্যার সমাধান
   ═══════════════════════════════════════════════════════════════ */

/* ── ১. Screen transition — smooth fade ── */
.screen-fade{
  animation:screenFade 200ms ease;
}
@keyframes screenFade{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* ── ২. Touch target — qa বাটন min 44×44px ── */
.qa{
  min-height:48px;
  padding:6px 4px;
}
.person-hero-acts .qa{
  min-height:56px;
  padding:10px 4px;
}
.qa .circle{
  width:42px; height:42px;
}

/* ── ৩. Bottom nav — active contrast উন্নত ── */
.nav-btn{ transition:color .15s; }
.nav-btn.active{
  color:var(--green-dark);
  position:relative;
}
.nav-btn.active::before{
  content:'';
  position:absolute;
  top:0; left:50%; transform:translateX(-50%);
  width:24px; height:3px;
  background:var(--green);
  border-radius:0 0 3px 3px;
}
.nav-btn.active span{ font-weight:700; color:var(--green-dark); }

/* ── ৪. Stat card — উন্নত visual hierarchy ── */
.stat{
  position:relative; overflow:hidden;
  transition:transform .12s, box-shadow .12s;
}
.stat:active{ transform:scale(.98); }
.stat .val{
  font-size:22px;
  /* বড় সংখ্যায় overflow ঠেকাতে */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.stat .chip-icon{
  width:34px; height:34px; border-radius:10px;
}
/* stat card accent line */
.stat.green-accent{ border:1.5px solid var(--green); }
.stat.red-accent{ border:1.5px solid var(--red); }
.stat.blue-accent{ border:1.5px solid var(--blue); }
.stat.orange-accent{ border:1.5px solid var(--orange); }

/* ── ৫. Hero card — বড় সংখ্যায় overflow ঠেকানো ── */
.person-hero-bal .val{
  font-size:clamp(17px, 4vw, 24px);
  word-break:break-all;
  line-height:1.15;
}

/* ── ৬. Ledger table — font consistency ── */
.ldgr-dilam, .ldgr-pelam{
  font-variant-numeric:tabular-nums;
}
.ldgr-row.ldgr-due .ldgr-dilam,
.ldgr-row.ldgr-paid .ldgr-pelam{
  font-size:16px;
}
.ldgr-total .ldgr-dilam,
.ldgr-total .ldgr-pelam{
  font-size:16px; font-weight:800;
}

/* ── ৭. SMS toggle row — form-এর সাথে সামঞ্জস্যপূর্ণ ── */
.qt-sms-row{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  margin:8px 0;
}
.qt-sms-info{
  font-size:13px;
  color:var(--ink);
}

/* ── ৮. Empty state ── */
.empty-state{
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center;
  padding:48px 24px;
  min-height:280px;
}
.empty-state-icon{
  font-size:64px; margin-bottom:16px;
  opacity:.7;
}
.empty-state h3{
  margin:0 0 8px; font-size:18px; font-weight:700;
  color:var(--ink);
}
.empty-state p{
  margin:0 0 20px; font-size:14px; color:var(--muted);
  line-height:1.6; max-width:260px;
}

/* ── ৯. Skeleton loading ── */
.sk{
  background:linear-gradient(
    90deg,
    var(--line) 25%,
    var(--slate-light) 50%,
    var(--line) 75%
  );
  background-size:200% 100%;
  animation:skShimmer 1.4s infinite linear;
  border-radius:6px;
}
@keyframes skShimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}
@media(prefers-reduced-motion:reduce){
  .sk{ animation:none; background:var(--line); }
}
.sk-tile{
  display:flex; gap:12px; padding:14px; margin-bottom:10px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius);
}
.sk-avatar{ width:42px; height:42px; border-radius:50%; flex-shrink:0; }
.sk-body{ flex:1; display:flex; flex-direction:column; gap:8px; justify-content:center; }
.sk-line{ height:13px; }
.sk-line.wide{ width:65%; }
.sk-line.narrow{ width:40%; }
.sk-amt{ width:60px; height:20px; align-self:center; margin-left:auto; }

/* ── ১০. Dark mode — SMS purchase sheet ── */
[data-theme="dark"] .sms-pkg{
  background:var(--green-light);
  color:var(--ink);
}
[data-theme="dark"] .sms-pkg-sel{
  background:var(--green);
  color:#fff;
}

/* ── ১১. Font fallback উন্নত ── */
body{
  font-family:'Noto Sans Bengali',
    'Hind Siliguri',
    'SolaimanLipi',
    system-ui,-apple-system,
    sans-serif;
}

/* ── প্রিন্ট মিডিয়া ── */
@media print{
  .sk, .empty-state-icon{ display:none; }
}

/* ── বড় chip-icon (stat card) ── */
.chip-icon-lg{
  width:48px; height:48px; border-radius:14px; flex-shrink:0;
}