/* ── Reset & Base ─────────────────────────────────── */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
body{font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#eef2ff;color:#1a1d2e;min-height:100dvh}
button,input,select{font-family:inherit;font-size:1rem}

/* ── Layout ───────────────────────────────────────── */
#s-login{display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:100dvh;padding:20px;
  background:linear-gradient(160deg,#0f1e44,#2c3e8a 55%,#1e6bb2)}
#s-main{display:none;flex-direction:column;min-height:100dvh}
#content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:80px;background:#eef2ff}

/* ── Header ───────────────────────────────────────── */
header{background:rgba(255,255,255,.97);border-bottom:1px solid #f1f5f9;
  position:sticky;top:0;z-index:30;backdrop-filter:blur(12px)}

/* ── Drawer ───────────────────────────────────────── */
#drawer{position:fixed;top:0;left:0;height:100%;width:280px;z-index:50;
  transform:translateX(-100%);transition:transform .25s cubic-bezier(.4,0,.2,1);
  background:#0f172a;display:flex;flex-direction:column;overflow-y:auto}
#overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:49}
.dlink{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;
  color:rgba(255,255,255,.6);font-size:.875rem;font-weight:500;margin-bottom:2px;
  border:none;background:none;cursor:pointer;width:100%;text-align:left;transition:.15s}
.dlink:active{background:rgba(79,110,247,.3);color:#fff}
.dsep{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.25);padding:14px 14px 4px}

/* ── Bottom Nav ───────────────────────────────────── */
.bnav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:#94a3b8;font-size:.62rem;font-weight:600;border:none;background:none;
  cursor:pointer;flex:1;padding:6px 0;transition:color .15s}
.bnav-item.on{color:#4f6ef7}

/* ── Forms ────────────────────────────────────────── */
.lbl{display:block;font-size:.8rem;font-weight:600;color:#64748b;
  margin-bottom:6px;letter-spacing:.02em}
.inp{display:block;width:100%;padding:13px 16px;border:1.5px solid #e8ecf8;
  border-radius:14px;font-size:1rem;outline:none;background:#fff;
  -webkit-appearance:none;transition:border .15s,box-shadow .15s;
  box-shadow:0 1px 3px rgba(0,0,0,.04)}
.inp:focus{border-color:#4f6ef7;box-shadow:0 0 0 3px rgba(79,110,247,.12)}

/* ── Buttons ──────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;border-radius:14px;font-size:.9375rem;font-weight:600;
  cursor:pointer;border:none;white-space:nowrap;min-height:46px;
  -webkit-appearance:none;transition:all .15s}
.btn:active{opacity:.85;transform:scale(.97)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn-p{background:linear-gradient(135deg,#4f6ef7,#2563eb);color:#fff;
  box-shadow:0 4px 14px rgba(79,110,247,.35)}
.btn-s{background:#fff;color:#475569;border:1.5px solid #e8ecf8;
  box-shadow:0 1px 3px rgba(0,0,0,.06)}
.btn-g{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;
  box-shadow:0 4px 14px rgba(34,197,94,.3)}
.btn-t{background:linear-gradient(135deg,#06b6d4,#0891b2);color:#fff;
  box-shadow:0 4px 14px rgba(6,182,212,.3)}
.btn-r{background:linear-gradient(135deg,#f87171,#dc2626);color:#fff}
.btn-w{width:100%}
.btn-sm{padding:9px 14px;font-size:.85rem;min-height:38px;border-radius:10px}

/* ── Cards ────────────────────────────────────────── */
.card{background:#fff;border-radius:20px;box-shadow:0 2px 12px rgba(0,0,0,.06);overflow:hidden}
.card-h{padding:16px 18px;display:flex;align-items:center;justify-content:space-between;
  font-weight:700;font-size:.95rem;border-bottom:1.5px solid #f1f5f9}
.card-b{padding:16px 18px}

/* ── Avatars ──────────────────────────────────────── */
.ava{width:46px;height:46px;border-radius:14px;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:.9rem;color:#fff}
.ava-sm{width:36px;height:36px;border-radius:10px;font-size:.78rem}

/* ── List Row ─────────────────────────────────────── */
.list-row{background:#fff;border-radius:18px;margin-bottom:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);overflow:hidden;cursor:pointer;
  transition:transform .1s,box-shadow .1s}
.list-row:active{transform:scale(.99);box-shadow:0 1px 4px rgba(0,0,0,.05)}

/* ── Icon Button ──────────────────────────────────── */
.icon-btn{width:38px;height:38px;border-radius:10px;border:none;display:flex;
  align-items:center;justify-content:center;cursor:pointer;transition:all .15s;flex-shrink:0}
.icon-btn:active{transform:scale(.9)}
.icon-btn-red{background:#fee2e2;color:#dc2626}

/* ── Tab Bar ──────────────────────────────────────── */
.tab-bar{display:flex;background:#f1f5f9;border-radius:14px;padding:4px;
  margin-bottom:12px}
.tab-btn{flex:1;padding:10px 8px;border:none;border-radius:11px;font-size:.85rem;
  font-weight:600;cursor:pointer;transition:all .2s;background:none;color:#64748b}
.tab-btn.active{background:#fff;color:#4f6ef7;box-shadow:0 2px 8px rgba(0,0,0,.08)}

/* ── Dropdown ─────────────────────────────────────── */
.drop{position:fixed;background:#fff;border:1.5px solid #e8ecf8;border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.12);z-index:200;max-height:260px;overflow-y:auto}
.drop-item{padding:12px 16px;font-size:.875rem;cursor:pointer;
  border-bottom:1px solid #f8fafc;display:flex;align-items:center;gap:10px;
  transition:background .1s}
.drop-item:active{background:#f0f4ff}
.drop-item:last-child{border-bottom:none}

/* ── Toast ────────────────────────────────────────── */
.toast{display:flex;gap:9px;padding:12px 16px;border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);font-size:.875rem;font-weight:500;
  margin-bottom:8px;animation:tin .3s}
.toast-ok{background:rgba(240,253,244,.97);border:1.5px solid #86efac;color:#15803d}
.toast-er{background:rgba(254,242,242,.97);border:1.5px solid #fca5a5;color:#dc2626}
.toast-in{background:rgba(239,246,255,.97);border:1.5px solid #93c5fd;color:#1d4ed8}
@keyframes tin{from{transform:translateY(-8px) scale(.95);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}}

/* ── Modal ────────────────────────────────────────── */
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.6);z-index:60;
  display:flex;align-items:flex-end;animation:fadein .15s;backdrop-filter:blur(4px)}
.modal-box{background:#fff;border-radius:24px 24px 0 0;width:100%;
  max-height:92dvh;overflow-y:auto;animation:slideup .22s}
.modal-hd{display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1.5px solid #f1f5f9;position:sticky;top:0;
  background:#fff;z-index:1;font-weight:700;font-size:1.05rem}
.modal-bd{padding:20px}
.modal-ft{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;
  border-top:1.5px solid #f1f5f9;position:sticky;bottom:0;background:#fff}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes slideup{from{transform:translateY(28px);opacity:0}
  to{transform:translateY(0);opacity:1}}

/* ── Table ────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse}
.tbl th{padding:10px 14px;text-align:left;font-size:.7rem;font-weight:700;
  text-transform:uppercase;color:#94a3b8;background:#f8fafc;letter-spacing:.05em}
.tbl td{padding:12px 14px;font-size:.875rem;border-bottom:1px solid #f1f5f9}
.tbl tr:last-child td{border-bottom:none}

/* ── Spinner ──────────────────────────────────────── */
.spin{width:36px;height:36px;border:3px solid #e8ecf8;border-top-color:#4f6ef7;
  border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── Debt / Credit ────────────────────────────────── */
.debt{color:#dc2626;font-weight:700}
.cred{color:#16a34a;font-weight:700}
.zero{color:#94a3b8;font-weight:500}

/* ── Scanner ──────────────────────────────────────── */
.scan-rect{position:absolute;left:0;right:0;height:2.5px;
  background:linear-gradient(90deg,transparent,#4f6ef7,transparent);
  animation:sc 2s ease-in-out infinite;box-shadow:0 0 10px rgba(79,110,247,.8)}
@keyframes sc{0%,100%{top:5%}50%{top:90%}}