@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* =====================================================================
   BMS — fintech theme (Easypaisa / UBL style)
   ===================================================================== */
:root{
  --bg:#f3f6f4;--ink:#0d1f1c;--muted:#5f7570;--soft:#8fa39d;--line:#e3ebe7;--line2:#edf3f0;
  --navy:#0b3b36;--navy2:#0e5f52;--blue:#0f9d78;--blue2:#13b386;--sky:#2fc59a;
  --green:#10b981;--green-d:#059669;--green-bg:#ecfdf5;--red:#e11d48;--red-bg:#fff1f2;--amber:#f59e0b;--amber-bg:#fffbeb;
  --r:18px;--r2:12px;--shadow:0 2px 10px rgba(13,31,28,.05),0 1px 2px rgba(13,31,28,.04);--shadow2:0 12px 30px rgba(11,59,54,.22);
  --grad:linear-gradient(135deg,#0b3b36 0%,#0e5f52 50%,#0f9d78 100%);
}
html{font-size:14px}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;letter-spacing:-0.005em;background:var(--bg)}
h1,h2,h3{letter-spacing:-0.02em}
[x-cloak]{display:none!important}
a{color:inherit}
.cur{font-size:.55em;font-weight:600;color:var(--soft);margin-left:.15rem;letter-spacing:0}
.dim{color:var(--soft);font-weight:400}
.mono{font-variant-numeric:tabular-nums}
.cnt{font-size:.78rem;color:var(--muted)}
.lena{color:var(--green-d);font-weight:700}
.dena{color:var(--red);font-weight:700}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.w-8{width:2rem}

/* ===== Buttons ===== */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--grad);color:#fff;font-weight:700;font-size:.92rem;padding:.6rem 1.1rem;border-radius:999px;white-space:nowrap;border:0;box-shadow:0 6px 16px rgba(15,157,120,.28);transition:transform .12s,box-shadow .12s;cursor:pointer}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(15,157,120,.34)}
.btn-primary:active{transform:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:.9rem;padding:.55rem .95rem;border-radius:999px;white-space:nowrap;box-shadow:var(--shadow);cursor:pointer;text-decoration:none}
.btn:hover{background:#f4f8f6;border-color:#c9d9d2}
.btn-danger{display:inline-flex;align-items:center;justify-content:center;background:var(--red-bg);border:1px solid #fecdd3;color:#be123c;font-weight:600;font-size:.82rem;padding:.4rem .75rem;border-radius:999px;cursor:pointer}
.btn-danger:hover{background:#ffe4e6}

/* ===== Cards ===== */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.card-h{padding:.95rem 1.2rem;border-bottom:1px solid var(--line2);font-weight:700;font-size:1rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.card-b{padding:1.2rem}

/* ===== Inputs ===== */
.inp,.sel,.txt{width:100%;border:1.5px solid var(--line);border-radius:var(--r2);padding:.65rem .9rem;font-size:.95rem;background:#f6faf8;color:var(--ink);transition:border-color .12s,background .12s,box-shadow .12s}
.inp:focus,.sel:focus,.txt:focus{outline:none;background:#fff;border-color:var(--blue2);box-shadow:0 0 0 3px rgba(15,157,120,.16)}
.inp[readonly]{background:#f1f5f9;color:#3f5551}
.sel{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2366728c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;padding-right:2.2rem}
.lbl{display:block;font-size:.78rem;font-weight:700;color:#2f4642;margin-bottom:.32rem}
.pill{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.01em}

/* ===== Tables ===== */
.tbl{width:100%;font-size:.93rem;border-collapse:collapse}
.tbl th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;padding:.7rem 1rem;background:#f4f8f6;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:.72rem 1rem;border-bottom:1px solid var(--line2);vertical-align:middle;color:var(--ink)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:#f6faf8}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tfoot td{font-weight:700;background:#f4f8f6;border-top:2px solid #c9d9d2}

/* ===== Stat tiles ===== */
.stat{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.15rem;box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:transform .12s,box-shadow .12s}
a.stat:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,59,54,.09)}
.stat .k{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.stat .v{font-size:1.5rem;font-weight:800;margin-top:.2rem;font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.stat .s{font-size:.78rem;color:var(--muted);margin-top:.15rem}

/* ===== HERO balance card (gradient) ===== */
.hero{position:relative;display:block;border-radius:22px;padding:1.4rem 1.5rem 1.3rem;color:#fff;background:var(--grad);box-shadow:var(--shadow2);overflow:hidden;text-decoration:none}
.hero::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-80px;top:-120px;background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 70%)}
.hero::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;left:-70px;bottom:-120px;background:radial-gradient(circle,rgba(255,214,102,.28),rgba(255,214,102,0) 70%)}
.hero>*{position:relative;z-index:1}
.hero .k{font-size:.72rem;letter-spacing:.12em;font-weight:700;color:rgba(255,255,255,.72);text-transform:uppercase}
.hero .v{font-size:2.5rem;font-weight:800;letter-spacing:-0.03em;margin-top:.25rem;font-variant-numeric:tabular-nums;line-height:1.1}
.hero .v .cur{color:rgba(255,255,255,.6)}
.hero .pk{font-size:1.05rem;font-weight:600;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums;margin-top:.15rem}
.hero .s{font-size:.78rem;color:rgba(255,255,255,.7);margin-top:.7rem}
.hero .chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.hero .chip{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);border-radius:999px;padding:.3rem .75rem;font-size:.78rem;font-weight:600;color:#fff}
.hero .chip b{font-variant-numeric:tabular-nums}
.hero .chip.up b{color:#6ee7b7}.hero .chip.down b{color:#fda4af}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
.hero-ic{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hero-ic svg{width:22px;height:22px}
.hero-side{display:block;background:#fff;border:1px solid var(--line);border-radius:22px;padding:1.3rem 1.4rem;text-decoration:none;color:inherit;box-shadow:var(--shadow)}
a.hero-side:hover{border-color:#bcd3cb}
.hero-side .k{font-size:.72rem;letter-spacing:.12em;font-weight:700;color:var(--muted);text-transform:uppercase}
.hero-side .v{font-size:1.9rem;font-weight:800;letter-spacing:-0.03em;margin-top:.25rem;font-variant-numeric:tabular-nums;color:#0e5f52}
.hero-side .pk{font-size:1rem;font-weight:600;color:#2f4642;font-variant-numeric:tabular-nums}
.hero-side .s{font-size:.78rem;color:var(--muted);margin-top:.6rem}
.hero-side .hero-ic{background:#e6f4ef;color:#0e5f52}

/* hero action pills (Deposit / Send Money style) */
.hero-actions{display:flex;gap:.6rem;margin-top:1.1rem;align-items:center}
.hb{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.7rem 1.1rem;border-radius:999px;font-weight:700;font-size:.92rem;text-decoration:none;white-space:nowrap;flex:1}
.hb svg{width:18px;height:18px}.hb .plus{font-size:1.2rem;line-height:1}
.hb-white{background:#fff;color:var(--navy)}.hb-blue{background:#0f9d78;color:#fff;box-shadow:0 6px 16px rgba(15,157,120,.35)}
.hb-round{flex:0 0 44px;width:44px;height:44px;padding:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:1.2rem}

/* ===== HOME: mobile full-bleed navy band + white sheet ===== */
@media(max-width:767px){
  .home .top{background:#0b3b36;border-bottom:0;color:#fff}
  .home .top-title,.home .top-hi{color:#fff}.home .top-hi{color:rgba(255,255,255,.7)}
  .home .top-menu,.home .bell{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);color:#fff}
  .home .top-av{background:#fff;color:var(--navy)}
  .home main{padding-top:0!important}
  .home .band{background:linear-gradient(180deg,#0b3b36 0%,#0e5f52 55%,#0f9d78 100%);margin:0 -.75rem;padding:.6rem .95rem 3rem}
  .home .band .bal-grid{gap:.7rem;margin:0}
  .home .band .hero{background:none;box-shadow:none;padding:.4rem 0 .3rem;border-radius:0;overflow:visible}
  .home .band .hero::before,.home .band .hero::after{display:none}
  .home .band .hero .v{font-size:2.7rem}
  .home .band .hero-side{display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;padding:.75rem 1rem;border-radius:16px;box-shadow:none;backdrop-filter:blur(6px)}
  .home .band .hero-side .hero-top{flex:1}
  .home .band .hero-side .k{color:rgba(255,255,255,.7)}.home .band .hero-side .v{color:#fff;font-size:1.35rem;margin-top:0}.home .band .hero-side .pk{color:rgba(255,255,255,.8);font-size:.85rem}
  .home .band .hero-side .s{display:none}
  .home .band .hero-side .hero-ic{background:rgba(255,255,255,.14);color:#fff}
  .home .sheet{background:var(--bg);border-radius:26px 26px 0 0;margin:-2.2rem -.75rem 0;padding:.4rem .75rem 0;position:relative}
  .home .sheet .qa{margin-top:.9rem}
  .home .push-banner{margin:.75rem 0 0}
}
@media(min-width:768px){.hero-actions .hb-round{display:none}.hb{flex:0 0 auto;min-width:170px}}

/* ===== Quick actions ===== */
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin:1rem 0 .2rem}
@media(min-width:768px){.qa{grid-template-columns:repeat(8,1fr)}}
.qa a{display:flex;flex-direction:column;align-items:center;gap:.45rem;text-decoration:none;color:var(--ink);font-size:.72rem;font-weight:600;text-align:center;padding:.6rem .2rem;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .12s}
.qa a:hover{transform:translateY(-2px)}
.qa .ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.qa .ic svg{width:22px;height:22px}
.qa .c1{background:#0b3b36;color:#fff}.qa .c2{background:#d1fae5;color:#047857}.qa .c3{background:#ffe4e6;color:#be123c}.qa .c4{background:#d9f2ea;color:#0e5f52}
.qa .c5{background:#ffe9d6;color:#b14d0a}.qa .c6{background:#efe6fb;color:#6b3fa0}.qa .c7{background:#fff1d6;color:#9a5b00}.qa .c8{background:#f1f5f9;color:#334155}

/* ===== Transaction list (avatar rows) ===== */
.tx{display:flex;align-items:center;gap:.85rem;padding:.8rem 1.1rem;border-bottom:1px solid var(--line2);text-decoration:none;color:inherit;background:#fff}
.tx:last-child{border-bottom:0}
.tx:hover{background:#f6faf8}
.tx .av{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;letter-spacing:0}
.tx .av svg{width:20px;height:20px}
.av-a{background:#d9f2ea;color:#0e5f52}.av-b{background:#d1fae5;color:#047857}.av-c{background:#fce7f3;color:#be185d}.av-d{background:#ffe9d6;color:#b14d0a}.av-e{background:#fff1d6;color:#9a5b00}.av-f{background:#efe6fb;color:#6b3fa0}
.av-in{background:#d1fae5;color:#047857}.av-out{background:#ffe4e6;color:#be123c}.av-x{background:#f1f5f9;color:#5f7570}
.tx .m{flex:1;min-width:0}
.tx .t{font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx .d{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.1rem}
.tx .r{text-align:right;flex-shrink:0}
.tx .amt{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.98rem}
.tx .bal{font-size:.74rem;color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:.1rem}
.tx.off{opacity:.45}.tx.off .t{text-decoration:line-through}

/* ===== Section title ===== */
.sec{display:flex;align-items:center;justify-content:space-between;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:1.2rem 0 .55rem}
.sec a{font-size:.78rem;text-transform:none;letter-spacing:0;color:var(--blue2);font-weight:700;text-decoration:none}
.bal-sec{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:1.2rem 0 .55rem}

/* ===== Balance page (legacy classes → new look) ===== */
.bal-grid{display:grid;grid-template-columns:1fr;gap:.8rem;margin-bottom:.4rem}
@media(min-width:900px){.bal-grid{grid-template-columns:2fr 1fr}}
.bal-main{position:relative;display:block;border-radius:22px;padding:1.4rem 1.5rem 1.3rem;text-decoration:none;color:#fff;background:var(--grad);box-shadow:var(--shadow2);overflow:hidden}
.bal-main::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-80px;top:-120px;background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 70%)}
.bal-main>*{position:relative}
.bal-main .k{font-size:.72rem;letter-spacing:.12em;font-weight:700;color:rgba(255,255,255,.72)}
.bal-main .v{font-size:2.5rem;font-weight:800;letter-spacing:-0.03em;margin-top:.25rem;font-variant-numeric:tabular-nums;color:#fff;line-height:1.1}
.bal-main .v .cur{color:rgba(255,255,255,.6)}
.bal-main .pk{font-size:1.05rem;font-weight:600;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}
.bal-main .s{font-size:.78rem;color:rgba(255,255,255,.72);margin-top:.6rem}
.bal-box{display:block;background:#fff;border:1px solid var(--line);border-radius:22px;padding:1.3rem 1.4rem;text-decoration:none;color:inherit;box-shadow:var(--shadow)}
a.bal-box:hover{border-color:#bcd3cb}
.bal-box .k{font-size:.72rem;letter-spacing:.12em;font-weight:700;color:var(--muted)}
.bal-box .v{font-size:1.9rem;font-weight:800;letter-spacing:-0.03em;margin-top:.25rem;font-variant-numeric:tabular-nums;color:#0e5f52}
.bal-box .pk{font-size:1rem;font-weight:600;color:#2f4642;font-variant-numeric:tabular-nums}
.bal-box .s{font-size:.78rem;color:var(--muted);margin-top:.6rem}
.bal-days{display:grid;grid-template-columns:1fr;gap:.7rem}
@media(min-width:768px){.bal-days{grid-template-columns:repeat(3,1fr)}}
.bal-day{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.15rem;color:inherit;text-decoration:none;box-shadow:var(--shadow)}
.bal-day:hover{border-color:#bcd3cb}
.bal-day .k{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.bal-day .v{font-size:1.5rem;font-weight:800;margin-top:.15rem;color:var(--green-d);font-variant-numeric:tabular-nums}
.bal-day .v.neg{color:var(--red)}
.bal-day .pk{font-size:.92rem;font-weight:600;color:#2f4642}
.bal-day .s{font-size:.76rem;color:var(--muted);margin-top:.2rem}
.bal-two{display:grid;grid-template-columns:1fr;gap:.8rem}
@media(min-width:900px){.bal-two{grid-template-columns:1fr 1fr}}
.bal-sub{font-size:.74rem;color:var(--soft)}
.bal-settings{margin-top:1.2rem;background:#fff;border:1px dashed #c3d4ce;border-radius:var(--r);padding:.9rem 1.2rem}
.bal-settings summary{cursor:pointer;font-weight:600;color:#3f5551;font-size:.9rem}
.bal-form{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-top:.9rem}
@media(min-width:900px){.bal-form{grid-template-columns:repeat(3,1fr)}}
.bal-note{grid-column:1/-1;font-size:.78rem;color:var(--muted)}

/* ===== Daily report ===== */
.rep{border-radius:var(--r);overflow:hidden}
.rep-head{background:var(--grad);color:#fff;padding:1rem 1.25rem;font-weight:700;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.rep-head .dim{color:rgba(255,255,255,.7)}
.rep-sec{padding:1rem 1.25rem .45rem;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.rep-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;padding:.2rem 1.25rem .4rem}
@media(min-width:1024px){.rep-summary{grid-template-columns:repeat(5,1fr)}}
.rep-summary-3{grid-template-columns:1fr}
@media(min-width:768px){.rep-summary-3{grid-template-columns:repeat(3,1fr)}}
.rep-summary-3 .rep-final{grid-column:auto}
.rep-box{border:1px solid var(--line);border-radius:14px;padding:.95rem 1rem;background:#f6faf8}
.rep-box .k{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.rep-box .v{font-size:1.45rem;font-weight:800;margin-top:.2rem;font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.rep-box .s{font-size:.76rem;color:var(--muted);margin-top:.1rem}
.rep-red{color:var(--red)}
.rep-final{background:linear-gradient(135deg,#059669,#10b981);border:0;grid-column:span 2;box-shadow:0 8px 20px rgba(16,185,129,.28)}
@media(min-width:1024px){.rep-final{grid-column:span 1}}
.rep-final .k{color:rgba(255,255,255,.8)}.rep-final .v{color:#fff}.rep-final .s{color:rgba(255,255,255,.85)}
.rep-days{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;padding:.2rem 1.25rem .4rem}
@media(min-width:1024px){.rep-days{grid-template-columns:repeat(4,1fr)}}
.rep-day{display:block;border:1px solid var(--line);border-radius:14px;padding:.8rem 1rem;background:#fff;color:inherit;text-decoration:none}
.rep-day.on{border-color:var(--blue2);box-shadow:inset 0 0 0 1px var(--blue2)}
.rep-day .k{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.rep-day .v{font-size:1.25rem;font-weight:800;margin-top:.15rem;font-variant-numeric:tabular-nums}
.rep-day .s{font-size:.76rem;color:var(--muted)}
.rep-wallet{background:var(--navy);border-color:var(--navy);color:#fff}
.rep-wallet .k{color:#c3d4ce}.rep-wallet .v{color:#6ee7b7}.rep-wallet .s{color:#c3d4ce}
.rep-mini{margin:0 1.25rem .6rem;display:inline-flex;gap:.6rem;align-items:center;background:#e6f4ef;border:1px solid #cfeee2;border-radius:999px;padding:.38rem 1rem;font-size:.82rem;color:#0e5f52}
.rep-mini b{color:#0b3b36}.rep-mini .sep{color:#8fcfb8}
.rep-wrap{padding:0 1.25rem .4rem;overflow-x:auto}
.tbl-grid{width:100%;border:1px solid var(--line);border-radius:14px;overflow:hidden;border-collapse:separate;border-spacing:0}
.tbl-grid th,.tbl-grid td{border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);padding:.62rem .9rem}
.tbl-grid th:last-child,.tbl-grid td:last-child{border-right:none}
.tbl-grid tbody tr:last-child td{border-bottom:1px solid var(--line2)}
.tbl-grid th{background:#f1f6f3;color:var(--ink);font-size:.7rem}
.tbl-grid tfoot td{background:#f1f6f3;border-top:2px solid #c3d4ce;border-bottom:none}
.tbl-grid .num{min-width:110px}
.tbl-green tfoot td{background:#d1fae5!important;color:#047857;border-top:2px solid #10b981}
.tbl-red tbody td{color:#be123c}
.tbl-red tbody td.text-slate-400{color:#be123c;opacity:.6}
.tbl-red tfoot td{background:#ffe4e6!important;color:#9f1239;border-top:2px solid #e11d48}

/* ===== Statement (bank style) ===== */
.stm-day{margin-bottom:1rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.stm-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.8rem 1.1rem;border-bottom:1px solid var(--line2);font-size:1rem}
.stm-net{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.stm-net b{font-variant-numeric:tabular-nums;font-size:1rem}.stm-net span{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.stm-net.up b{color:var(--green-d)}.stm-net.down b{color:var(--red)}
.stm-bal{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.6rem;padding:.85rem 1.1rem;background:linear-gradient(180deg,#f4f8f6,#eef2f8);border-bottom:1px solid var(--line2)}
.stm-bal .k{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.stm-bal .v{font-size:1.2rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-0.02em;margin-top:.1rem;white-space:nowrap}
.stm-bal .s{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.stm-bal .r{text-align:right}
.stm-arrow{width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--blue2)}
.stm-arrow svg{width:16px;height:16px}
@media(max-width:400px){.stm-bal .v{font-size:1.05rem}}
.stm-row{display:flex;align-items:center;gap:.85rem;padding:.75rem 1.1rem;border-bottom:1px solid var(--line2);background:#fff;text-decoration:none;color:inherit}
.stm-row:last-child{border-bottom:0}
.stm-row:hover{background:#f6faf8}
.stm-row .av{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem}
.stm-row .m{flex:1;min-width:0}
.stm-row .t{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stm-row .d{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stm-row .r{text-align:right;flex-shrink:0}
.stm-row .amt{font-variant-numeric:tabular-nums;font-weight:800;white-space:nowrap}
.stm-row .bal{font-variant-numeric:tabular-nums;color:var(--soft);font-size:.74rem;white-space:nowrap;margin-top:.1rem}

/* ===== Layout: sidebar / header / flash ===== */
.sb{position:fixed;inset:0 auto 0 0;width:250px;background:linear-gradient(180deg,#0b3b36 0%,#0e5f52 100%);color:#c9ddd7;display:flex;flex-direction:column;z-index:40;transform:translateX(-100%);transition:transform .2s}
.sb.open{transform:none}
@media(min-width:768px){.sb{position:sticky;top:0;height:100vh;transform:none;flex-shrink:0}}
.sb-overlay{position:fixed;inset:0;background:rgba(11,59,54,.55);z-index:30;display:none;backdrop-filter:blur(2px)}
.sb-overlay.open{display:block}
@media(min-width:768px){.sb-overlay{display:none!important}}
.sb-brand{display:flex;align-items:center;gap:.7rem;padding:1.2rem 1.1rem 1rem;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#34d399,#10b981);color:#062a1f;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1.15rem;box-shadow:0 4px 12px rgba(16,185,129,.35)}
.sb-title{color:#fff;font-weight:800;letter-spacing:-0.02em}
.sb-sub{font-size:.72rem;color:#8fb3aa;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-close{margin-left:auto;background:none;border:0;color:#8fb3aa;font-size:1.1rem;cursor:pointer}
.sb-nav{padding:.7rem;flex:1;overflow-y:auto}
.sb-link{display:flex;align-items:center;gap:.75rem;padding:.62rem .85rem;border-radius:12px;color:#c9ddd7;font-weight:500;font-size:.93rem;text-decoration:none;margin-bottom:2px;transition:background .12s}
.sb-link:hover{background:rgba(255,255,255,.07);color:#fff}
.sb-link.on{background:rgba(255,255,255,.12);color:#fff;font-weight:700;box-shadow:inset 3px 0 0 #34d399}
.sb-foot{padding:.8rem 1.1rem;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.sb-user{display:flex;flex-direction:column;flex:1;min-width:0}.sb-user b{color:#fff;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sb-user span{font-size:.68rem;color:#8fb3aa;text-transform:uppercase;letter-spacing:.06em}
.sb-mini{background:rgba(255,255,255,.1);border:0;color:#d8ebe5;font-size:.74rem;padding:.32rem .6rem;border-radius:999px;cursor:pointer;text-decoration:none}
.sb-mini:hover{background:rgba(255,255,255,.18);color:#fff}
.top{display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
@media(min-width:768px){.top{padding:.8rem 1.4rem}}
.top-menu{background:#fff;border:1px solid var(--line);border-radius:12px;width:38px;height:38px;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.top-title{font-size:1.15rem;font-weight:800;margin:0;line-height:1.15}
.top-hi{display:block;font-size:.7rem;color:var(--muted);font-weight:600;letter-spacing:.02em}
.foot{padding:.8rem 1.4rem;font-size:.74rem;color:var(--soft)}
.flash{padding:.75rem 1rem;border-radius:var(--r2);margin-bottom:.9rem;font-weight:600;font-size:.9rem}
.flash-ok{background:var(--green-bg);border:1px solid #a7f3d0;color:#047857}
.flash-err{background:var(--red-bg);border:1px solid #fecdd3;color:#be123c}
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.bell:hover{background:#f4f8f6}
.bell-n{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;font-size:.66rem;font-weight:700;min-width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #fff}
.top-av{width:36px;height:36px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.85rem;text-decoration:none}

/* ===== Login ===== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--grad);position:relative;overflow:hidden}
.login-wrap::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-140px;top:-160px;background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,0) 70%)}
.login-wrap::after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;left:-140px;bottom:-160px;background:radial-gradient(circle,rgba(255,214,102,.28),rgba(255,214,102,0) 70%)}
.login-box{position:relative;z-index:1;width:100%;max-width:400px;background:#fff;border-radius:26px;padding:2.1rem 2rem;box-shadow:0 24px 60px rgba(4,30,26,.4)}
.login-logo{width:60px;height:60px;border-radius:18px;background:var(--grad);color:#fff;font-weight:800;font-size:1.6rem;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(15,157,120,.35);margin:0 auto .9rem}
.login-title{text-align:center;font-weight:800;font-size:1.35rem;letter-spacing:-0.02em}
.login-sub{text-align:center;font-size:.82rem;color:var(--muted);margin-bottom:1.4rem}
.login-box .inp{padding:.8rem 1rem}

/* ===== Forms ===== */
.frm{display:grid;grid-template-columns:1fr;gap:.9rem}
@media(min-width:640px){.frm{grid-template-columns:1fr 1fr}}
.frm .full{grid-column:1/-1}
.seg{display:flex;background:#eef1f6;border-radius:var(--r2);padding:4px;gap:4px}
.seg label{flex:1;cursor:pointer}
.seg input{display:none}
.seg span{display:block;text-align:center;padding:.5rem .5rem;font-weight:600;font-size:.88rem;color:#3f5551;border-radius:9px;transition:background .12s,color .12s}
.seg input:checked+span{background:#fff;color:var(--blue);box-shadow:0 1px 4px rgba(13,31,28,.12);font-weight:700}
.calc{background:#f4f8f6;border:1px solid var(--line);border-radius:14px;padding:.95rem 1rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media(min-width:640px){.calc{grid-template-columns:repeat(4,1fr)}}
.calc .k{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.calc .v{font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums}
details.more{margin-top:.2rem}details.more summary{cursor:pointer;font-size:.85rem;color:#3f5551;font-weight:600}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:end;margin-bottom:.9rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.8rem .9rem;box-shadow:var(--shadow)}
.filters .inp,.filters .sel{width:auto;min-width:120px;padding:.5rem .8rem;font-size:.88rem}
.filters .lbl{font-size:.7rem;margin-bottom:.2rem}
.ledger-run{font-weight:700;white-space:nowrap}
.fee-box{border:1px solid #fde68a;background:var(--amber-bg);border-radius:14px;padding:.9rem 1rem}
.fee-h{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#92400e;margin-bottom:.6rem}
.ot-box{border:1px solid #a7dcc9;background:#e6f4ef;border-radius:14px;padding:.85rem 1rem}
.ot-box .lbl{color:#0e5f52}
.bk-list{border:1.5px solid var(--line);border-radius:var(--r2);background:#fff;max-height:220px;overflow:auto}
.bk-row{display:flex;align-items:center;gap:.5rem;padding:.55rem .75rem;border-bottom:1px solid var(--line2);cursor:pointer;font-size:.9rem}
.bk-row:last-child{border-bottom:0}.bk-row:hover{background:#f6faf8}.bk-row input{width:16px;height:16px;accent-color:var(--blue2)}
.ther-row{border:1px solid var(--line);border-radius:14px;padding:.75rem .85rem;margin-bottom:.6rem;background:#f6faf8}
.ther-main{display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem}
.ther-main .sel{background-color:#fff}
.ther-x{background:var(--red-bg);border:1px solid #fecdd3;color:#be123c;border-radius:10px;width:36px;height:36px;cursor:pointer;flex-shrink:0}
.ther-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.ther-grid .lbl{font-size:.7rem;margin-bottom:.2rem}
.ther-grid .inp{background:#fff}
@media(max-width:480px){.ther-grid{grid-template-columns:1fr 1fr}.t-col-box{grid-column:1/-1}}
.notif-list .notif{display:flex;gap:.8rem;padding:.9rem 1.2rem;border-bottom:1px solid var(--line2);color:inherit;text-decoration:none}
.notif-list .notif:last-child{border-bottom:0}
.notif-list .notif:hover{background:#f6faf8}
.notif-dot{width:10px;height:10px;border-radius:50%;background:#c3d4ce;margin-top:.45rem;flex-shrink:0}
.notif.unread{background:#ecfdf5}.notif.unread .notif-dot{background:var(--blue2)}
.pend-card{border:1.5px solid var(--amber);background:var(--amber-bg)}.pend-card .card-h{background:#fef3c7}
.row-pending td{background:var(--amber-bg)!important}

/* ===== Mobile stacked tables ===== */
@media(max-width:767px){
  .tbl-stack,.tbl-stack tbody,.tbl-stack tfoot,.tbl-stack tr{display:block;width:100%}
  .tbl-stack thead{display:none}
  .tbl-stack tr{padding:.75rem 1rem;border-bottom:1px solid var(--line2);background:#fff}
  .tbl-stack tbody tr:last-child{border-bottom:0}
  .tbl-stack tr:hover td{background:transparent}
  .tbl-stack td{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.2rem 0!important;border:0!important;text-align:right;background:transparent!important;font-variant-numeric:tabular-nums;min-width:0}
  .tbl-stack td::before{content:attr(data-l);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;text-align:left;flex-shrink:0;white-space:nowrap}
  .tbl-stack td[data-l=""]::before{display:none}
  .tbl-stack td[data-l=""]{justify-content:flex-end}
  .tbl-stack td.st-title{display:block;text-align:left;font-weight:700;font-size:.98rem;padding-bottom:.35rem!important;margin-bottom:.2rem;border-bottom:1px dashed var(--line2)!important}
  .tbl-stack td.st-hide{display:none}
  .tbl-stack td .btn,.tbl-stack td .btn-danger,.tbl-stack td .btn-primary{margin-left:.3rem}
  .tbl-stack tfoot tr{background:#e6f4ef;border-top:2px solid var(--blue);border-radius:0 0 var(--r) var(--r)}
  .tbl-stack tfoot td{font-weight:700}
  .tbl-stack tfoot td.st-title{border-bottom:0!important;color:var(--navy)}
  .tbl-grid.tbl-stack{border:1px solid var(--line);border-radius:14px}
  .tbl-red.tbl-stack tfoot tr{background:#ffe4e6;border-top-color:var(--red)}
  .tbl-stack td.text-center{display:block;text-align:center}
  .rep-wrap{padding:0 .8rem .4rem;overflow:visible}
  .scroll-x{overflow:visible}
}

/* ===== Modal ===== */
.modal{position:fixed;inset:0;z-index:60;background:rgba(11,59,54,.5);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;padding:1rem}
@media(min-width:640px){.modal{align-items:center}}
.modal-box{background:#fff;border-radius:22px;padding:1.3rem 1.3rem 1.2rem;width:100%;max-width:440px;box-shadow:0 20px 50px rgba(4,30,26,.35)}
.modal-h{font-weight:800;font-size:1.05rem;margin-bottom:.4rem}
.chk{display:flex;align-items:center;gap:.6rem;font-weight:600;cursor:pointer}.chk input{width:18px;height:18px;accent-color:var(--blue)}

/* ===== Push banner ===== */
.push-banner{display:flex;align-items:center;gap:.8rem;background:#fff;border:1.5px solid #a7dcc9;border-radius:var(--r);padding:.8rem 1rem;margin-bottom:.9rem;box-shadow:var(--shadow)}
.push-ic{width:40px;height:40px;border-radius:12px;background:#e6f4ef;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.push-x{background:none;border:0;color:var(--soft);font-size:1rem;cursor:pointer;padding:.2rem}
@media(max-width:480px){.push-banner{flex-wrap:wrap}.push-banner .btn-primary{width:100%;order:9}}

/* ===== Mobile bottom nav (PWA) ===== */
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:35;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:flex-end;padding:.35rem .25rem calc(.4rem + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(13,31,28,.07)}
.bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;color:#8fa39d;font-size:.64rem;font-weight:600;text-decoration:none;padding:.25rem 0}
.bnav a svg{width:22px;height:22px}
.bnav a.on{color:var(--blue)}
.bnav .bnav-add{color:#fff}
.bnav .bnav-add .plus{width:50px;height:50px;border-radius:50%;background:var(--grad);color:#fff;font-size:1.9rem;line-height:1;display:flex;align-items:center;justify-content:center;margin-top:-1.6rem;box-shadow:0 8px 18px rgba(15,157,120,.4);border:3px solid #fff}
.bnav .bnav-add span:last-child{color:var(--blue)}
@media(max-width:767px){main{padding-bottom:5.4rem!important}.foot{display:none}.top{padding-top:calc(.7rem + env(safe-area-inset-top))}}
@media(display-mode:standalone){.sb-brand{padding-top:calc(1.2rem + env(safe-area-inset-top))}}
@media print{aside,header,footer,.no-print,.bnav{display:none!important}main{padding:0!important}.card,.stm-day{border:none;box-shadow:none}.hero,.bal-main,.rep-head,.stm-close,.rep-final{-webkit-print-color-adjust:exact;print-color-adjust:exact}}