/* ============================================================================
   EMIDesk — "BAHI-KHATA" THEME
   the traditional Indian merchant's ledger: red cloth binding (sidebar),
   warm paper pages, ink entries, vermillion debits, green credits,
   rubber-stamp chips, double-ruled headings.
   ========================================================================== */
:root {
  /* paper — page slightly deeper, panels brighter, for more lift */
  --paper: #efe6d1;
  --paper-2: #e7dcc2;
  --panel: #fcf8ee;
  --panel-2: #f5eedd;

  /* ink */
  --ink: #2a2118;
  --ink-2: #4a3f31;
  --muted: #7a6d5a;
  --faint: #a2937c;

  /* cloth binding */
  --cloth: #5e211b;
  --cloth-2: #491913;
  --cream: #f3e7cd;
  --foil: #d9b36a;
  --foil-a: #ecd096; --foil-b: #cda657; --foil-c: #a98134; --foil-text: #491913;
  --side-fg: rgba(243,231,205,.72);
  --side-strong: #f3e7cd;
  --side-line: rgba(243,231,205,.28);
  --side-active: rgba(0,0,0,.24);
  --tex-a: rgba(255,235,200,.025); --tex-b: rgba(0,0,0,.06);
  --grain: .05;
  --bg-rad1: rgba(178,58,42,.05); --bg-rad2: rgba(154,113,18,.06);

  /* ledger colours */
  --red: #b23a2a;          /* vermillion — debits, dues */
  --red-deep: #8c2b1f;
  --red-soft: rgba(178, 58, 42, .09);
  --green: #23714d;        /* banyan green — credits, paid */
  --green-soft: rgba(35, 113, 77, .1);
  --gold: #9a7112;         /* gold loans */
  --gold-soft: rgba(154, 113, 18, .1);
  --sky: #3a6289;          /* investments */

  /* legacy aliases (inline styles in JS use these) */
  --jade: #23714d; --jade-deep: #1a5c3e; --jade-soft: rgba(35,113,77,.1);
  --amber: #a86412; --coral: #b23a2a;
  --text: #2a2118; --line: #d9cdb2; --line-2: #c4b394;
  --bg-2: #ece3cd; --card: #faf5e9; --card-2: #f4eddb;

  --radius: 12px;
  --shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 4px rgba(90,70,40,.08), 0 8px 20px -10px rgba(90,70,40,.25);
  --shadow-lift: 0 2px 4px rgba(90,70,40,.1), 0 16px 40px -15px rgba(90,70,40,.35);

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 500px at 90% -10%, var(--bg-rad1), transparent 55%),
    radial-gradient(800px 600px at -5% 8%, var(--bg-rad2), transparent 55%),
    var(--paper);
}
/* paper grain */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: var(--grain);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .view.active { animation: none !important; } }

.side-actions-mobile { display: none; }
.brand-asof-mobile { display: none; }

/* ---------- app shell ---------- */
.app { display: flex; min-height: 100vh; position: relative; z-index: 2; width: 100%; }
@media (min-width: 1201px) {
  .app { justify-content: space-between; }
}
.side {
  width: 252px; flex: 0 0 252px; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; padding: 24px 16px 18px;
  /* woven cloth: crosshatch over the oxblood */
  background:
    repeating-linear-gradient(45deg, var(--tex-a) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, var(--tex-b) 0 2px, transparent 2px 5px),
    linear-gradient(175deg, var(--cloth), var(--cloth-2));
  box-shadow: 6px 0 24px -14px rgba(60,20,10,.55);
}
/* stitched edge on the cloth */
.side::after { content: ''; position: absolute; top: 10px; bottom: 10px; right: 7px; width: 0;
  border-right: 2px dashed var(--side-line); }
.brand { display: flex; gap: 12px; align-items: center; padding: 2px 10px 24px; }
.brand-ic { width: 38px; height: 38px; border-radius: 9px;
  background: linear-gradient(155deg, var(--foil-a), var(--foil-b) 55%, var(--foil-c));
  color: var(--foil-text); font-weight: 800; display: grid; place-items: center; font-size: 18px;
  font-family: var(--mono); box-shadow: 0 2px 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.5); }
.brand b { font-size: 16px; letter-spacing: -.01em; color: var(--side-strong); font-family: var(--serif); font-weight: 600; }
.brand-emi { letter-spacing: .035em; font-weight: 800; }
.brand small { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .24em; color: var(--foil); margin-top: 3px; }
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-it { display: flex; align-items: center; gap: 11px; background: none; border: none; color: var(--side-fg);
  font-family: var(--sans); font-size: 14px; font-weight: 600; padding: 11px 12px; border-radius: 8px;
  cursor: pointer; text-align: left; transition: color .15s, background .15s; }
.nav-it::before { content: ''; width: 6px; height: 6px; border-radius: 1px; background: var(--side-line);
  flex: 0 0 auto; transition: background .15s; transform: rotate(45deg); }
.nav-it:hover { color: var(--side-strong); }
.nav-it.on { background: var(--side-active); color: var(--side-strong);
  box-shadow: inset 3px 0 0 var(--foil), inset 0 1px 0 rgba(255,255,255,.08); }
.nav-it.on::before { background: var(--foil); box-shadow: 0 0 8px rgba(217,179,106,.6); }
.nav-it .badge { margin-left: auto; font-family: var(--mono); font-size: 10.5px; font-style: normal; color: var(--side-strong);
  background: var(--side-active); border: 1px solid var(--side-line); border-radius: 999px; padding: 2px 8px; }
.nav-it .badge:empty { display: none; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.side-guide { font-family: var(--mono); font-size: 12px; color: var(--side-fg); text-decoration: none;
  padding: 9px 12px; border: 1px solid var(--side-line); border-radius: 8px; transition: .15s; }
.side-guide:hover { color: var(--side-strong); border-color: var(--side-strong); }
.me { display: flex; align-items: center; gap: 10px; background: var(--side-active); border: 1px solid var(--side-line);
  border-radius: 10px; padding: 10px 12px; }
.me .av { width: 32px; height: 32px; border-radius: 50%; background: var(--cream); color: var(--cloth);
  display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.me b { font-size: 13.5px; display: block; color: var(--side-strong); }
.me small { font-size: 10.5px; color: var(--side-fg); font-family: var(--mono); }

.main { flex: 1; min-width: 0; padding: 24px 36px 90px 46px; position: relative; }
@media (max-width: 1200px) { .main { max-width: 1060px; } }
@media (min-width: 1201px) { .main { max-width: 900px; } }
/* the red margin-rule of ledger paper */
.main::before { content: ''; position: absolute; top: 0; bottom: 0; left: 26px; width: 1px;
  background: rgba(178,58,42,.22); }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.asof { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono);
  font-size: 12px; color: var(--muted); background: var(--panel); border: 1px solid var(--line-2);
  padding: 7px 14px; border-radius: 999px; box-shadow: var(--shadow); }
.asof b { color: var(--ink); font-weight: 700; }
.ghost { background: none; border: 1px solid var(--line-2); color: var(--muted); padding: 7px 14px;
  border-radius: 999px; cursor: pointer; font-family: var(--mono); font-size: 11.5px; transition: .15s; }
.ghost:hover { color: var(--ink); border-color: var(--ink-2); }

/* ---------- payment hub sidebar (desktop) ---------- */
.payment-hub { display: none; width: 280px; flex-shrink: 0; padding: 24px 16px 90px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin;
  background: var(--paper); border-left: 1px solid var(--line-2); }
.payment-hub::-webkit-scrollbar { width: 6px; }
.payment-hub::-webkit-scrollbar-track { background: transparent; }
.payment-hub::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.payment-hub::-webkit-scrollbar-thumb:hover { background: var(--line); }

.ph-section { margin-bottom: 22px; }
.ph-head { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }

.ph-item { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 11px 12px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px;
  margin-bottom: 8px; font-size: 13px; }
.ph-item-name { flex: 1; font-weight: 600; color: var(--ink); }
.ph-item-name small { display: block; color: var(--faint); font-size: 10.5px; margin-top: 2px; font-family: var(--mono); }
.ph-item-amt { font-family: var(--mono); font-weight: 700; font-size: 13.5px; color: var(--red); white-space: nowrap; }
.ph-item-amt.paid { color: var(--green); }

.ph-progress { margin-bottom: 12px; }
.ph-progress-label { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; }
.ph-progress-label .k { color: var(--muted); font-weight: 600; }
.ph-progress-label .v { font-weight: 700; color: var(--ink); }
.ph-progress-bar { height: 8px; border-radius: 999px; background: var(--paper-2); overflow: hidden; border: 1px solid var(--line-2); }
.ph-progress-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--jade-deep), var(--green));
  border-radius: 999px; }

.ph-empty { text-align: center; padding: 16px 12px; color: var(--faint); font-size: 12px; }

@media (max-width: 1200px) { .payment-hub { display: none !important; } }
@media (min-width: 1201px) { .payment-hub { display: flex; flex-direction: column; } }

.view { display: none; counter-reset: sec; }
.view.active { display: block; animation: rise .4s cubic-bezier(.2,.7,.2,1) both; }
.section { margin-top: 46px; }
.section.first { margin-top: 22px; }

/* ---------- section heads: double-ruled like a ledger ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 18px; padding-bottom: 10px; border-bottom: 3px double var(--red-deep); }
.section-head h2 { font-family: var(--serif); font-weight: 600; font-size: 27px; letter-spacing: -.01em; color: var(--ink); }
.section-head h2::before {
  counter-increment: sec; content: counter(sec, decimal-leading-zero);
  font-family: var(--mono); font-size: .42em; font-weight: 700; color: var(--red);
  vertical-align: super; margin-right: .7em; letter-spacing: 0;
}
.section-head .hint { font-size: 12.5px; color: var(--faint); text-align: right; }

/* ---------- welcome (empty state) ---------- */
.welcome { text-align: center; background: var(--panel); border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: 54px 30px; margin-top: 14px;
  box-shadow: var(--shadow), 0 0 0 4px var(--panel), 0 0 0 5px var(--line-2); }
.welcome .w-mark { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 16px;
  background: linear-gradient(155deg, var(--foil-a), var(--foil-b) 55%, var(--foil-c)); color: var(--foil-text);
  font-family: var(--mono); font-weight: 800; font-size: 30px; display: grid; place-items: center;
  box-shadow: 0 3px 0 rgba(0,0,0,.18); }
.welcome h2 { font-family: var(--serif); font-weight: 600; font-size: 30px; margin-bottom: 10px; }
.welcome p { color: var(--muted); font-size: 14.5px; max-width: 460px; margin: 0 auto 24px; line-height: 1.65; }
.welcome .w-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- hero stats: sliding cards (banking-app style) ---------- */
.hero-wrap { position: relative; margin-top: 16px; }
.hero { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 12px; scrollbar-width: none; }
.hero::-webkit-scrollbar { display: none; }
.stat {
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 22px 22px 20px; box-shadow: var(--shadow); position: relative;
  transition: transform .2s, box-shadow .2s;
  flex: 0 0 300px; scroll-snap-align: start;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.stat.big { flex: 0 0 400px; }
.hscroll { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2);
  background: var(--panel); color: var(--ink); cursor: pointer; font-size: 20px; line-height: 1;
  box-shadow: var(--shadow-lift); display: grid; place-items: center; font-family: var(--serif); }
.hscroll:hover { color: var(--red); }
.hscroll.left { left: -16px; } .hscroll.right { right: -16px; }
.stat .label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.stat .value { font-family: var(--mono); font-size: clamp(22px, 3.2vw, 30px); font-weight: 700;
  letter-spacing: -.01em; margin-top: 12px; font-variant-numeric: tabular-nums; color: var(--ink); }
.stat.big .value { font-family: var(--serif); font-weight: 600; font-size: clamp(36px, 5vw, 52px); letter-spacing: -.02em; }
.stat .value .rupee { color: var(--faint); font-weight: 500; margin-right: 3px; }
.stat .sub { font-size: 12.5px; color: var(--muted); margin-top: 9px; line-height: 1.5; }
.stat.accent { border-color: rgba(35,113,77,.45); border-top: 3px solid var(--green); }
.stat.accent .value { color: var(--green); }
.stat.warn { border-top: 3px solid var(--red); border-color: rgba(178,58,42,.4); }
.stat.warn .value { color: var(--red); }
.drop { color: var(--green); font-weight: 700; }

.bar { height: 7px; border-radius: 999px; background: var(--paper-2); overflow: hidden; margin-top: 15px;
  border: 1px solid var(--line); }
.bar > i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--jade-deep), var(--green)); transition: width .8s cubic-bezier(.2,.7,.2,1); }

/* ---------- net worth: certificate frame ---------- */
.nw {
  margin-top: 16px; display: grid; grid-template-columns: minmax(240px, 1fr) 1.5fr; gap: 30px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 26px 30px; box-shadow: var(--shadow), 0 0 0 4px var(--panel), 0 0 0 5px var(--line-2);
  outline: none; margin-left: 5px; margin-right: 5px; position: relative;
}
.nw::before, .nw::after { content: '✦'; position: absolute; color: #c9a24f; font-size: 12px; }
.nw::before { top: 9px; left: 13px; }
.nw::after { bottom: 9px; right: 13px; }
.nw-k { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 600; }
.nw-v { font-family: var(--serif); font-size: clamp(42px, 6.2vw, 64px); font-weight: 600; letter-spacing: -.025em; margin: 8px 0 6px; font-variant-numeric: tabular-nums; line-height: 1; }
.nw-v.pos { color: var(--green); } .nw-v.neg { color: var(--red); }
.nw-v .rupee { color: var(--faint); font-weight: 400; font-size: .5em; }
.nw-sub { font-size: 13px; color: var(--muted); line-height: 1.5; }
.nw-bars { align-self: center; }
.nw-row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px; margin-bottom: 12px; }
.nw-lab { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.nwbar { height: 12px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; }
.nwbar > i { display: block; height: 100%; border-radius: 999px; transition: width .8s cubic-bezier(.2,.7,.2,1); }
.nwbar > i.a { background: linear-gradient(90deg, var(--jade-deep), var(--green)); }
.nwbar > i.l { background: linear-gradient(90deg, var(--red-deep), var(--red)); }
.nw-row b { font-family: var(--mono); font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nw-break { font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 14px; }
.nw-note { display: block; color: var(--gold); margin-top: 6px; font-size: 11.5px; font-weight: 600; }

/* ---------- today: mobile app command center ---------- */
.today-app { margin-top: 14px; }
.phone-panel { background: linear-gradient(180deg, rgba(255,255,255,.24), transparent 24%), var(--panel);
  border: 1px solid var(--line-2); border-radius: 18px; padding: 16px; box-shadow: var(--shadow-lift);
  position: relative; overflow: hidden; }
.phone-panel::before { content: ''; position: absolute; top: -80px; right: -80px; width: 180px; height: 180px;
  border: 1px solid rgba(217,179,106,.34); border-radius: 50%; pointer-events: none; }
.phone-status { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
  font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.today-hero-card { display: flex; justify-content: space-between; align-items: center; gap: 18px;
  min-height: 172px; padding: 22px; border-radius: 16px; color: var(--cream);
  background: linear-gradient(135deg, var(--cloth), var(--cloth-2)); box-shadow: 0 18px 36px -24px rgba(60,20,10,.65);
  position: relative; overflow: hidden; }
.today-hero-card::after { content: ''; position: absolute; inset: auto -20px -72px auto; width: 180px; height: 180px;
  border-radius: 50%; background: rgba(217,179,106,.18); }
.today-hero-card.clear { background: linear-gradient(135deg, var(--jade-deep), var(--green)); }
.today-hero-card.warn { background: linear-gradient(135deg, var(--cloth), #7f3a21 56%, var(--gold)); }
.today-hero-card.danger { background: linear-gradient(135deg, var(--red-deep), var(--cloth)); }
.today-copy { position: relative; z-index: 1; min-width: 0; }
.today-greet { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .76; }
.today-hero-card h1 { font-family: var(--serif); font-size: clamp(34px, 7vw, 58px); line-height: .96; font-weight: 600;
  letter-spacing: -.02em; margin: 12px 0 10px; }
.today-hero-card h1 .rupee { font-size: .5em; color: rgba(243,231,205,.62); font-weight: 400; }
.today-hero-card p { font-size: 13px; opacity: .82; line-height: 1.5; }
.today-ring { position: relative; z-index: 1; width: 82px; height: 82px; border-radius: 50%;
  border: 1px solid rgba(243,231,205,.4); background: rgba(255,255,255,.1); color: var(--cream);
  display: grid; place-items: center; font-family: var(--mono); cursor: pointer; box-shadow: inset 0 0 0 8px rgba(255,255,255,.08); }
.today-ring span { font-weight: 800; font-size: 20px; line-height: 1; }
.today-ring small { display: block; font-size: 9px; margin-top: -24px; opacity: .72; text-transform: uppercase; letter-spacing: .08em; }
.quick-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.quick-strip button { border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); border-radius: 13px;
  padding: 13px 10px; cursor: pointer; text-align: left; box-shadow: var(--shadow); min-width: 0; }
.quick-strip b { display: block; font-family: var(--mono); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-strip b .rupee { color: var(--faint); font-size: 11px; }
.quick-strip span { display: block; color: var(--muted); font-size: 11px; font-family: var(--mono); margin-top: 3px; }
.month-pressure, .next-card, .reminder-nudge { background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 14px; padding: 16px; box-shadow: var(--shadow); margin-top: 12px; }
.mp-head, .task-list-head { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.mp-head b { color: var(--ink); }
.mp-bar { height: 10px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; margin: 13px 0; }
.mp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--sky)); border-radius: 999px; }
.mp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mp-grid div { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px; min-width: 0; }
.mp-grid span { display: block; font-size: 10.5px; color: var(--muted); }
.mp-grid b { display: block; margin-top: 5px; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-label { font-family: var(--mono); color: var(--gold); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; }
.next-line { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-top: 10px; }
.next-line b { font-size: 16px; }
.next-line small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.45; }
.next-line strong { font-family: var(--mono); color: var(--red-deep); white-space: nowrap; }
.next-actions { display: flex; gap: 10px; margin-top: 14px; }
.reminder-nudge { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border-left: 4px solid var(--gold); }
.reminder-nudge.on { border-left-color: var(--green); }
.reminder-nudge b { display: block; font-size: 14px; }
.reminder-nudge span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.45; }
.reminder-nudge button, .task-list-head button { border: 1px solid var(--line-2); background: var(--paper-2); color: var(--ink);
  border-radius: 999px; padding: 8px 12px; font-family: var(--mono); font-weight: 800; font-size: 11px; cursor: pointer; }
.task-list-head { margin: 16px 2px 9px; }
.task-list { display: flex; flex-direction: column; gap: 8px; }
.task-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 62px; grid-template-areas:
    "date main money state"
    "date main actions actions";
  gap: 5px 10px; align-items: center; background: var(--paper); border: 1px solid var(--line-2);
  border-radius: 13px; padding: 10px; }
.task-row.overdue { border-color: rgba(178,58,42,.45); background: linear-gradient(90deg, var(--red-soft), var(--paper)); }
.task-row.today { border-color: rgba(154,113,18,.45); background: linear-gradient(90deg, var(--gold-soft), var(--paper)); }
.task-row.paid { opacity: .66; }
.task-date { grid-area: date; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 2px; }
.task-date b { display: block; font-family: var(--mono); font-size: 16px; line-height: 1.1; }
.task-date small { display: block; font-family: var(--mono); font-size: 8.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.task-main { grid-area: main; min-width: 0; }
.task-main b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-main small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-money { grid-area: money; font-family: var(--mono); font-weight: 800; font-size: 13px; color: var(--red-deep); white-space: nowrap; }
.task-state { grid-area: state; justify-self: end; font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase; font-weight: 800; white-space: nowrap; }
.task-row.overdue .task-state { color: var(--red); }
.task-row.today .task-state, .task-row.soon .task-state { color: var(--gold); }
.task-actions { grid-area: actions; justify-self: end; display: flex; gap: 7px; align-items: center; }
.mini-pay, .mini-remind { border: none; border-radius: 999px; padding: 7px 11px; font-family: var(--mono); font-size: 10px;
  font-weight: 800; cursor: pointer; text-transform: uppercase; }
.mini-pay { background: var(--red); color: var(--cream); }
.mini-remind { background: var(--panel); color: var(--muted); border: 1px solid var(--line-2); }
.mini-plan { color: var(--faint); font-family: var(--mono); font-size: 10px; }
.today-empty { color: var(--muted); font-size: 13px; padding: 14px; text-align: center; }
.toggle-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.rem-toggle { display: flex; gap: 10px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line-2);
  border-radius: 10px; padding: 12px; cursor: pointer; }
.rem-toggle input { margin-top: 3px; accent-color: var(--cloth); }
.rem-toggle b { display: block; font-size: 13.5px; }
.rem-toggle small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; line-height: 1.35; }

/* ---------- app-style hero panels for tabs ---------- */
.tab-hero { margin: 4px 0 22px; }
.tab-card {
  min-height: 184px; border-radius: 30px; padding: 24px; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background:
    radial-gradient(220px 150px at 88% 20%, rgba(255,255,255,.24), transparent 62%),
    linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #38bdf8 100%);
  box-shadow: 0 24px 50px -28px rgba(37,99,235,.72);
  position: relative; overflow: hidden;
}
.tab-card::after {
  content: ''; position: absolute; width: 220px; height: 220px; right: -78px; bottom: -100px;
  border-radius: 50%; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 28px rgba(255,255,255,.08);
}
.tab-card.loans-hero {
  background:
    radial-gradient(220px 150px at 88% 20%, rgba(255,255,255,.22), transparent 62%),
    linear-gradient(135deg, #0f766e 0%, #12b76a 48%, #38bdf8 100%);
}
.tab-card.cards-hero {
  background:
    radial-gradient(220px 150px at 88% 20%, rgba(255,255,255,.25), transparent 62%),
    linear-gradient(135deg, #4338ca 0%, #2563eb 50%, #7dd3fc 100%);
}
.tab-card.people-hero {
  background:
    radial-gradient(220px 150px at 88% 20%, rgba(255,255,255,.2), transparent 62%),
    linear-gradient(135deg, #0369a1 0%, #0ea5e9 48%, #22c55e 100%);
}
.tab-card.invest-hero {
  background:
    radial-gradient(220px 150px at 88% 20%, rgba(255,255,255,.2), transparent 62%),
    linear-gradient(135deg, #047857 0%, #12b76a 48%, #84cc16 100%);
}
.tab-copy { min-width: 0; position: relative; z-index: 1; }
.tab-copy span {
  display: block; font-weight: 900; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.74); margin-bottom: 10px;
}
.tab-copy h1 {
  font-family: var(--serif); font-size: clamp(34px, 5vw, 56px); line-height: 1; letter-spacing: -.06em;
  margin: 0 0 10px;
}
.tab-copy h1 .rupee { font-size: .5em; color: rgba(255,255,255,.62); font-weight: 500; }
.tab-copy p { margin: 0; max-width: 420px; color: rgba(255,255,255,.82); font-size: 13.5px; line-height: 1.5; }
.tab-chart-ring {
  width: 116px; height: 116px; border-radius: 50%; flex: 0 0 auto; position: relative; z-index: 1;
  display: grid; place-items: center; align-content: center;
  background: conic-gradient(#fff var(--angle), rgba(255,255,255,.25) 0);
}
.tab-chart-ring::before {
  content: ''; position: absolute; inset: 13px; border-radius: 50%; background: rgba(255,255,255,.95);
}
.tab-chart-ring b, .tab-chart-ring small { position: relative; z-index: 1; color: var(--ink); }
.tab-chart-ring b { font-family: var(--serif); font-size: 24px; letter-spacing: -.04em; line-height: 1; }
.tab-chart-ring small { color: var(--muted); font-size: 10px; font-weight: 900; margin-top: -28px; text-transform: uppercase; }
.hero-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px;
}
.hero-metric {
  background: rgba(255,255,255,.94); border: 1px solid rgba(221,231,243,.92); border-radius: 22px;
  padding: 15px 16px; box-shadow: var(--shadow); min-width: 0;
}
.hero-metric span { display: block; color: var(--muted); font-size: 12px; font-weight: 900; margin-bottom: 6px; }
.hero-metric b { display: block; font-family: var(--serif); font-size: 20px; letter-spacing: -.05em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-metric b .rupee { font-size: .62em; color: var(--faint); }
.hero-metric.good b { color: var(--green); }
.hero-metric.bad b { color: var(--red); }
.hero-metric.blue b { color: var(--sky); }
.split-chart {
  width: 126px; height: 126px; border-radius: 32px; background: rgba(255,255,255,.18); position: relative; z-index: 1;
  padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: hidden;
}
.split-chart::before {
  content: ''; position: absolute; inset: 18px; border-radius: 24px; background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.split-chart i {
  position: relative; z-index: 1; display: block; height: 18px; border-radius: 999px;
  background: #fff; min-width: 8%;
}
.split-chart b, .split-chart small { position: relative; z-index: 1; color: #fff; }
.split-chart b { font-family: var(--serif); font-size: 26px; letter-spacing: -.05em; }
.split-chart small { font-size: 10px; font-weight: 900; text-transform: uppercase; opacity: .78; }

/* ---------- alert band ---------- */
.alerts-band { margin-top: 16px; background: var(--panel);
  border: 1px solid rgba(154,113,18,.4); border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow); }
.alerts-title { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px; }
.alert-row { display: flex; gap: 13px; align-items: flex-start; padding: 9px 0; border-top: 1px dashed var(--line); }
.alert-row:first-of-type { border-top: none; }
.alert-ic { font-size: 17px; line-height: 1.3; flex-shrink: 0; }
.alert-txt { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.alert-txt b { font-weight: 700; color: var(--ink); }
.alert-free { color: var(--green); font-weight: 700; }

/* ---------- ledger row panels (month / calendar / upcoming) ---------- */
.month, .cal, .upcoming { background: var(--panel); border: 1px solid var(--line-2);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.mrow { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; align-items: center;
  gap: 12px; padding: 15px 20px; border-top: 1px solid var(--line); }
.mrow:first-child { border-top: none; }
.mrow:hover { background: rgba(90,70,40,.03); }
.mrow .nm { font-weight: 700; font-size: 15px; }
.mrow .nm small { display: block; color: var(--faint); font-weight: 500; font-size: 11.5px; margin-top: 2px; font-family: var(--mono); }
.mrow .amt { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; color: var(--red-deep); }
.mrow .due { color: var(--muted); font-size: 13px; }
.mrow.total { background: var(--paper-2); border-top: 2px solid var(--line-2); }
.mrow.total .nm { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-family: var(--mono); }
.mrow.total .amt { font-size: 17px; }

/* rubber-stamp chips */
.chip { font-size: 10.5px; font-weight: 800; padding: 7px 13px; border-radius: 8px; white-space: nowrap;
  font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; border: 1.5px solid currentColor;
  background: transparent; transition: all .2s; cursor: pointer; }
.chip:hover { transform: translateY(-1px); }
.chip.paid { color: var(--green); transform: rotate(-1deg); background: var(--green-soft); }
.chip.paid:hover { box-shadow: 0 4px 12px -3px rgba(35,113,77,.3); }
.chip.up { color: var(--red); background: var(--red-soft); }
.chip.up:hover { box-shadow: 0 4px 12px -3px rgba(178,58,42,.3); }
.chip.done { color: var(--faint); transform: rotate(-1deg); }

/* ---------- payment calendar ---------- */
.cal-row { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 16px;
  padding: 13px 20px; border-top: 1px solid var(--line); }
.cal-row:first-child { border-top: none; }
.cal-row:hover { background: rgba(90,70,40,.03); }
.cal-day { text-align: center; background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 4px; }
.cal-day b { font-family: var(--mono); font-size: 15px; font-weight: 800; display: block; color: var(--red-deep); }
.cal-day small { font-size: 8.5px; color: var(--faint); letter-spacing: .04em; font-family: var(--mono); }
.cal-nm { font-weight: 700; font-size: 14.5px; }
.cal-info small { display: block; color: var(--faint); font-size: 11.5px; margin-top: 2px; }
.cal-amt { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; }
.cal-row.total { background: var(--paper-2); border-top: 2px solid var(--line-2); }
.cal-row.total .cal-nm { text-transform: uppercase; letter-spacing: .07em; font-size: 11px; color: var(--muted); font-family: var(--mono); }
.cal-row.yearly { background: var(--gold-soft); }
.cal-row.yearly .cal-day b, .cal-row.yearly .cal-amt { color: var(--gold); }
.cal-note { padding: 15px 20px; border-top: 1px dashed var(--line-2); font-size: 12px; color: var(--muted); line-height: 1.6; background: var(--paper-2); }
.cal-note b { color: var(--ink); }

/* ---------- upcoming timeline ---------- */
.up-row { display: grid; grid-template-columns: 56px 3px 1fr auto 92px; gap: 15px; align-items: center;
  padding: 14px 20px; border-top: 1px solid var(--line); }
.up-row:first-child { border-top: none; }
.up-row:hover { background: rgba(90,70,40,.03); }
.up-date { text-align: center; background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 2px; }
.up-date b { font-family: var(--mono); font-size: 16px; font-weight: 800; display: block; line-height: 1.2; }
.up-date small { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.up-tick { width: 3px; height: 36px; border-radius: 2px; background: var(--red); }
.up-tick.gold { background: var(--gold); }
.up-nm { font-weight: 700; font-size: 14.5px; }
.up-nm small { display: block; color: var(--faint); font-weight: 500; font-size: 11.5px; font-family: var(--mono); margin-top: 3px; }
.up-right { text-align: right; }
.up-amt { font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--red); font-variant-numeric: tabular-nums; white-space: nowrap; }
.up-amt .rupee { color: rgba(178,58,42,.55); }
.up-chip { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-top: 4px; }
.up-chip.soon { color: var(--amber); font-weight: 700; }
.up-chip.today { color: var(--red); font-weight: 800; }
.up-act { text-align: right; }
.paybtn { background: var(--red); border: none; color: var(--cream);
  font-family: var(--mono); font-size: 12px; font-weight: 800; padding: 9px 18px; border-radius: 8px;
  cursor: pointer; letter-spacing: .06em; box-shadow: 0 2px 0 var(--red-deep); transition: transform .1s, box-shadow .1s; }
.paybtn:hover { transform: translateY(-1px); box-shadow: 0 3px 0 var(--red-deep); }
.paybtn:active { transform: translateY(1px); box-shadow: 0 0 0 var(--red-deep); }
.up-plan { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.up-row.total { background: var(--paper-2); border-top: 2px solid var(--line-2); }
.up-row.total .up-nm { text-transform: uppercase; letter-spacing: .07em; font-size: 11px; color: var(--muted); font-family: var(--mono); }
.up-empty { padding: 26px; text-align: center; color: var(--muted); font-size: 15px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); }

/* ---------- outstanding by month ---------- */
.om { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); }
.om-scroll { max-height: 460px; overflow: auto; }
.om-row { display: grid; grid-template-columns: 78px 1fr 120px 104px; gap: 14px; align-items: center;
  padding: 10px 20px; border-top: 1px solid var(--line); }
.om-row:first-child { border-top: none; }
.om-row.past { opacity: .62; }
.om-row.cur { background: var(--green-soft); border-left: 4px solid var(--green); padding-left: 16px; }
.om-mon { font-family: var(--mono); font-weight: 700; font-size: 12.5px; color: var(--ink-2); }
.om-row.cur .om-mon { color: var(--green); }
.om-bar { height: 9px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.om-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--red-deep), var(--red)); border-radius: 999px; }
.om-amt { font-family: var(--mono); font-weight: 700; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.om-delta { font-family: var(--mono); font-size: 11px; color: var(--green); font-weight: 700; text-align: right; }
.om-delta.zero { color: var(--faint); font-weight: 500; }
.om-head { display: grid; grid-template-columns: 78px 1fr 120px 104px; gap: 14px; padding: 10px 20px;
  background: var(--paper-2); border-bottom: 2px solid var(--line-2);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.om-head span:nth-child(3), .om-head span:nth-child(4) { text-align: right; }
.om-foot { padding: 13px 20px; border-top: 1px dashed var(--line-2); background: var(--paper-2);
  font-size: 12px; color: var(--muted); }

/* ---------- segmented toggle ---------- */
.head-controls { display: flex; align-items: center; gap: 14px; }
.seg { display: inline-flex; background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px; }
.seg button { background: none; border: none; color: var(--muted); font-family: var(--mono); font-size: 12px;
  font-weight: 700; padding: 5px 13px; border-radius: 999px; cursor: pointer; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--cloth); color: var(--cream); }

/* ---------- debt-free trajectory ---------- */
.payoff { background: var(--panel); border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.pf-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.pf-stat .pf-k { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; }
.pf-stat.right { text-align: right; }
.pf-v { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: -.02em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.pf-v.green { color: var(--green); }
.pf-v .rupee { color: var(--faint); font-weight: 400; font-size: 19px; }
.pf-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }
.pf-chart { margin-top: 4px; }
.pf-bars { display: flex; align-items: flex-end; gap: 4px; height: 150px; border-bottom: 2px solid var(--line-2); }
.pf-bar { flex: 1; min-width: 0; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--green), var(--jade-deep)); transition: filter .15s; }
.pf-bar:hover { filter: brightness(1.25); }
.pf-axis { display: flex; gap: 4px; margin-top: 9px; }
.pf-lab { flex: 1; min-width: 0; text-align: center; font-family: var(--mono); font-size: 9.5px; color: var(--faint); white-space: nowrap; }
.pf-foot { font-size: 12px; color: var(--muted); margin-top: 16px; line-height: 1.55; }
.debtfree-done { text-align: center; font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--green); padding: 24px; }

/* ---------- what your debt costs (interest analytics) ---------- */
.cost-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0; }
.cost-stat { background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow); }
.cm-k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.cm-v { font-size: 14px; color: var(--ink-2); margin-top: 7px; }
.cm-v b { font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--red-deep); font-variant-numeric: tabular-nums; }
.cost-list { display: flex; flex-direction: column; gap: 10px; }
.cost-loan { background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow); }
.cost-loan.done { opacity: .62; }
.cl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.cl-name { font-weight: 700; font-size: 14.5px; }
.cl-name small { color: var(--faint); font-weight: 500; font-size: 11px; font-family: var(--mono); }
.cl-tot { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--red-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-tot small { color: var(--faint); font-weight: 500; font-size: 10.5px; }
.cost-bar { height: 8px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; }
.cost-bar > i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--red-deep), var(--red)); transition: width .8s cubic-bezier(.2,.7,.2,1); }
.cl-sub { font-size: 11.5px; color: var(--muted); margin-top: 8px; font-family: var(--mono); }
@media (max-width: 760px) { .cost-mini { grid-template-columns: 1fr; } }

/* ---------- forecast ---------- */
.section-head .hint input {
  width: 70px; background: var(--paper-2); border: 1px solid var(--line-2); color: var(--green);
  border-radius: 6px; padding: 4px 8px; font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; text-align: right; }
.section-head .hint input:focus { outline: none; border-color: var(--green); }
.forecast { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px; }
.fmonth { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 16px 14px; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.fmonth:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.fmonth.cur { border-top: 3px solid var(--green); }
.fmonth.spike { border-top: 3px solid var(--gold); background: linear-gradient(180deg, var(--gold-soft), var(--panel)); }
.fm-name { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fm-total { font-family: var(--mono); font-size: 19px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin: 10px 0 3px; color: var(--ink); }
.fm-total .rupee { color: var(--faint); font-weight: 500; font-size: 13px; }
.fm-break { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.5; }
.fm-break span { color: var(--faint); }
.fm-break .gold { color: var(--gold); font-weight: 700; }
.fm-sub { font-size: 10.5px; color: var(--faint); margin-top: 5px; }
.fm-delta { font-family: var(--mono); font-size: 10.5px; font-weight: 700; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line-2); line-height: 1.4; }
.fm-delta.down { color: var(--green); }
.fm-delta.up { color: var(--red); }
.fm-delta.flat { color: var(--faint); }
.fm-delta.now { color: var(--sky); }

/* ---------- gold loans ---------- */
.gold-banner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(120deg, var(--gold-soft), var(--panel));
  border: 1px solid rgba(154,113,18,.45); border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 20px 24px; margin-bottom: 14px; box-shadow: var(--shadow); }
.gb-stat.right { text-align: right; }
.gb-k { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.gb-v { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: -.02em; margin-top: 7px; font-variant-numeric: tabular-nums; }
.gb-v.amber { color: var(--gold); }
.gb-v .rupee { color: var(--faint); font-weight: 400; font-size: 19px; }
.gb-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }
.gold-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gold-card { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow); transition: transform .2s; }
.gold-card:hover { transform: translateY(-2px); }
.gold-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.gold-name { font-size: 15px; font-weight: 700; }
.gold-name small { display: block; color: var(--faint); font-weight: 500; font-size: 11px; margin-top: 3px; font-family: var(--mono); }
.gold-amt { font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 13px 0 15px; font-variant-numeric: tabular-nums; color: var(--gold); }
.gold-amt .rupee { color: rgba(154,113,18,.5); font-weight: 400; font-size: 17px; }
.gold-rows > div { display: flex; justify-content: space-between; font-size: 12.5px; padding: 5px 0; border-top: 1px dashed var(--line); }
.gold-rows > div:first-child { border-top: none; }
.gold-rows span { color: var(--muted); }
.gold-rows b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- credit cards ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cc { background: var(--panel); border: 1px solid var(--line-2); border-top: 4px solid var(--sky);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 4px; min-height: 160px; transition: transform .2s; }
.cc:hover { transform: translateY(-2px); }
.cc.paid { opacity: .65; }
.cc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.cc-name { font-size: 15.5px; font-weight: 700; }
.cc-name small { display: block; color: var(--faint); font-weight: 500; font-size: 11.5px; margin-top: 3px; font-family: var(--mono); }
.cc-bill { font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: auto; }
.cc-bill .rupee { color: var(--faint); font-weight: 400; }
.cc-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 11.5px; color: var(--muted); font-family: var(--mono); }
.cc-actions { display: flex; gap: 6px; }
.cc .iconbtn { width: 26px; height: 26px; font-size: 12px; }
.cc.add { background: none; border: 2px dashed var(--line-2); border-top: 2px dashed var(--line-2); color: var(--muted); cursor: pointer;
  font-family: var(--sans); align-items: center; justify-content: center; text-align: center; gap: 6px; transition: .2s; box-shadow: none; }
.cc.add:hover { border-color: var(--green); color: var(--ink); background: var(--green-soft); }
.cc.add .plus { font-size: 30px; font-weight: 300; line-height: 1; color: var(--green); }
.cc.add span { font-weight: 700; font-size: 14px; }
.cc.add small { color: var(--faint); font-size: 12px; }

/* ---------- loan cards ---------- */
.loans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.loan { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow); position: relative; transition: all .25s cubic-bezier(.2,.7,.2,1); }
.loan:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line); }
.loan.closed { opacity: .65; }
.loan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.loan-name { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.loan-name small { display: block; font-family: var(--mono); font-weight: 500; color: var(--faint); font-size: 11.5px; margin-top: 4px; }
.lender { font-family: var(--mono); font-size: 10px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px;
  background: var(--paper-2); border: 1px solid var(--line-2); padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.lender .led { width: 6px; height: 6px; border-radius: 50%; }
.led.cred { background: #d84b3c; } .led.hdfc { background: #1f4e8c; box-shadow: 0 0 0 2px #c8102e inset; }

.pct-row { display: flex; align-items: baseline; justify-content: space-between; margin: 20px 0 9px; }
.pct { font-family: var(--serif); font-size: 40px; font-weight: 700; letter-spacing: -.02em; color: var(--green); }
.pct small { font-family: var(--sans); font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 6px; }
.track-state { font-family: var(--mono); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: var(--green); }
.track-state.warn { color: var(--muted); }
.track-state.closed { color: var(--faint); }
.track-state.closing { color: var(--gold); background: var(--gold-soft);
  border: 1.5px solid rgba(154,113,18,.45); padding: 4px 10px; border-radius: 6px; letter-spacing: .06em; transform: rotate(-2deg); display: inline-block; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 16px; margin-top: 18px; }
.kv .k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.kv .v { font-family: var(--mono); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; }
.kv .v.muted { font-weight: 600; color: var(--muted); }

.loan-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px;
  padding-top: 15px; border-top: 1px dashed var(--line-2); gap: 10px; }
.loan-foot .nextdue { font-size: 12.5px; color: var(--muted); }
.loan-foot .nextdue b { color: var(--ink); }
.linkbtn { background: none; border: none; color: var(--red); font-weight: 700; font-size: 12.5px;
  cursor: pointer; font-family: var(--mono); display: inline-flex; align-items: center; gap: 5px; padding: 4px; }
.linkbtn:hover { color: var(--red-deep); text-decoration: underline; }
.iconbtn { background: var(--paper-2); border: 1px solid var(--line-2); color: var(--muted); width: 30px; height: 30px;
  border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 13px; transition: .15s; }
.iconbtn:hover { color: var(--ink); border-color: var(--ink-2); }

/* ---------- warning + history ---------- */
.loan.flag { border-color: rgba(178,58,42,.5); }
.warn-banner { margin-top: 14px; background: var(--red-soft); border: 1px solid rgba(178,58,42,.4);
  color: var(--red-deep); font-size: 12.5px; font-weight: 600; padding: 10px 13px; border-radius: 8px; line-height: 1.4; }

.phist { display: none; margin-top: 15px; border-top: 1px dashed var(--line-2); padding-top: 13px; }
.phist.open { display: block; }
.phist-head { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin-bottom: 11px; }
.prow { display: grid; grid-template-columns: 12px 56px auto 96px; align-items: center; gap: 8px; padding: 5px 0; font-size: 12.5px; }
.prow .pmon { color: var(--muted); font-weight: 700; font-family: var(--mono); }
.prow .pamt { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.prow .pstat { font-family: var(--mono); font-size: 10px; font-weight: 800; text-align: right; text-transform: uppercase; }
.prow .pnote { grid-column: 2 / -1; font-size: 11px; color: var(--faint); margin-top: -2px; }
.pdot { width: 8px; height: 8px; border-radius: 50%; }
.pdot.ok, .pstat.ok { color: var(--green); } .pdot.ok { background: var(--green); }
.pdot.warn, .pstat.warn { color: var(--gold); } .pdot.warn { background: var(--gold); }
.pdot.bad, .pstat.bad { color: var(--red); } .pdot.bad { background: var(--red); }
.pdot.mute, .pstat.mute { color: var(--faint); } .pdot.mute { background: var(--faint); }

/* ---------- schedule ---------- */
.sched { margin-top: 15px; border-top: 1px dashed var(--line-2); padding-top: 13px; display: none; }
.sched.open { display: block; }
.sched table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--mono); }
.sched th { text-align: right; color: var(--faint); font-weight: 700; padding: 6px 8px; text-transform: uppercase; letter-spacing: .04em; font-size: 9.5px; position: sticky; top: 0; background: var(--panel); }
.sched th:first-child, .sched td:first-child { text-align: left; }
.sched td { padding: 6px 8px; text-align: right; font-variant-numeric: tabular-nums; border-top: 1px solid var(--line); color: var(--ink-2); }
.sched tr.is-paid td { color: var(--faint); }
.sched tr.is-next td { background: var(--green-soft); color: var(--ink); }
.sched .scroll { max-height: 280px; overflow: auto; border-radius: 8px; }
.tag-paid { color: var(--green); } .tag-due { color: var(--gold); }

/* ---------- asset lists ---------- */
.asset-banner { border-radius: var(--radius); padding: 20px 24px; margin-bottom: 14px;
  border: 1px solid var(--line-2); box-shadow: var(--shadow); background: var(--panel); }
.asset-banner.jade { border-left: 4px solid var(--green); background: linear-gradient(120deg, var(--green-soft), var(--panel)); }
.asset-banner.sky { border-left: 4px solid var(--sky); background: linear-gradient(120deg, rgba(58,98,137,.09), var(--panel)); }
.asset-banner.coral { border-left: 4px solid var(--red); background: linear-gradient(120deg, var(--red-soft), var(--panel)); }
.ab-k { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.ab-v { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: -.02em; margin-top: 6px; font-variant-numeric: tabular-nums; color: var(--green); }
.ab-v.sky { color: var(--sky); }
.ab-v.coral { color: var(--red); }
.ab-v .rupee { color: var(--faint); font-weight: 400; font-size: 19px; }
.ab-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }
.list-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.list-card { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 17px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px;
  min-height: 148px; transition: transform .2s; }
.list-card:hover { transform: translateY(-2px); }
.list-card.done { opacity: .58; }
.lc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.lc-name { font-size: 15px; font-weight: 700; }
.lc-name small { display: block; color: var(--faint); font-weight: 500; font-size: 11.5px; margin-top: 3px; }
.lc-amt { font-family: var(--serif); font-size: 23px; font-weight: 600; letter-spacing: -.02em; margin: 11px 0 auto; font-variant-numeric: tabular-nums; color: var(--green); }
.lc-amt.invest { color: var(--sky); }
.lc-amt.owe { color: var(--red); }
.lc-amt .rupee { color: var(--faint); font-weight: 400; font-size: 15px; }
.lc-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 11px; color: var(--muted); font-family: var(--mono); }
.list-card .iconbtn { width: 26px; height: 26px; font-size: 12px; }
.list-card.add { background: none; border: 2px dashed var(--line-2); color: var(--muted); cursor: pointer;
  align-items: center; justify-content: center; text-align: center; gap: 6px; font-family: var(--sans); box-shadow: none; transition: .2s; }
.list-card.add:hover { border-color: var(--green); color: var(--ink); background: var(--green-soft); }
.list-card.add .plus { font-size: 28px; font-weight: 300; line-height: 1; color: var(--green); }
.list-card.add span { font-weight: 700; font-size: 14px; }
.list-card.add small { color: var(--faint); font-size: 11.5px; }

/* ---------- People tab: clickable summary + person sliders ---------- */
.hero-action {
  appearance: none;
  border: 1px solid rgba(221,231,243,.92);
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hero-action:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.hero-action.good {
  background: linear-gradient(145deg, #ffffff 0%, #ecfdf3 100%);
  border-color: rgba(18,183,106,.18);
}
.hero-action.red-card {
  background: linear-gradient(145deg, #fff7f7 0%, #fff1f0 100%);
  border-color: rgba(240,68,56,.2);
}
.hero-action.red-card b { color: var(--red); }

#view-people .asset-banner {
  position: relative;
  overflow: hidden;
}
#view-people .asset-banner::after {
  content: '';
  position: absolute;
  right: -38px;
  top: -40px;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  opacity: .22;
}
#view-people .asset-banner.jade {
  background: linear-gradient(145deg, #ffffff 0%, #ecfdf3 100%);
  border-color: rgba(18,183,106,.2);
}
#view-people .asset-banner.jade::after { background: #12b76a; }
#view-people .asset-banner.coral {
  background: linear-gradient(145deg, #fff7f7 0%, #fff1f0 100%);
  border-color: rgba(240,68,56,.24);
}
#view-people .asset-banner.coral::after { background: #f04438; }
#view-people #lent .list-card:not(.add) {
  background: linear-gradient(145deg, #ffffff 0%, #f0fdf7 100%);
  border-color: rgba(18,183,106,.16);
}
#view-people #iowe .list-card:not(.add) {
  background: linear-gradient(145deg, #ffffff 0%, #fff5f4 100%);
  border-color: rgba(240,68,56,.18);
}
#view-people #iowe .chip.up {
  background: var(--red-soft);
  color: var(--red);
}
#view-people #iowe .lc-amt.owe {
  color: var(--red);
}
#view-people #iowe .list-card.add {
  border-color: rgba(240,68,56,.28);
}
#view-people #iowe .list-card.add .plus {
  color: var(--red);
}

@media (max-width: 980px) {
  #view-people .list-grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding: 14px;
    padding: 2px 2px 16px;
    margin-left: -2px;
    margin-right: -2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #view-people .list-grid::-webkit-scrollbar { display: none; }
  #view-people .list-grid > .list-card {
    flex: 0 0 78%;
    min-width: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  #view-people .list-grid > .list-card:first-child { margin-left: 2px; }
  #view-people .list-grid > .list-card:last-child { margin-right: 12px; }
}

@media (max-width: 760px) {
  #view-people .hero-metrics {
    grid-template-columns: 1fr 1fr;
  }
  #view-people .hero-metrics .hero-metric:last-child {
    grid-column: 1 / -1;
  }
  #view-people .list-grid > .list-card {
    flex-basis: 84%;
    border-radius: 24px;
    min-height: 136px;
  }
  #view-people .lc-amt {
    font-size: 25px;
  }
}

/* ---------- footer ---------- */
footer { margin-top: 52px; padding-top: 22px; border-top: 3px double var(--line-2); color: var(--faint); font-size: 12px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; line-height: 1.6; font-family: var(--mono); }

/* ---------- modal ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(42,33,24,.55); backdrop-filter: blur(5px);
  display: none; z-index: 50; padding: 20px; overflow-y: auto; }
.modal-bg.open { display: flex; animation: rise .3s ease both; }
.modal { background: var(--panel); border: 1px solid var(--line-2); border-top: 4px solid var(--cloth);
  border-radius: 14px; padding: 26px; width: 100%; max-width: 430px; box-shadow: var(--shadow-lift);
  margin: auto; }
.modal h3 { font-family: var(--serif); font-weight: 600; font-size: 23px; margin-bottom: 4px; }
.modal p.note { color: var(--muted); font-size: 12.5px; margin-bottom: 18px; line-height: 1.5; }
.field { margin-bottom: 13px; }
.field label { display: block; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; font-weight: 700; }
.field input { width: 100%; background: var(--paper); border: 1px solid var(--line-2); color: var(--ink);
  border-radius: 8px; padding: 11px 13px; font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.field input:focus { outline: none; border-color: var(--cloth); }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.btn { flex: 1; border: none; border-radius: 8px; padding: 13px; font-family: var(--sans); font-weight: 800; font-size: 14px; cursor: pointer; transition: filter .15s; }
.btn:hover { filter: brightness(1.06); }
.btn.primary { background: var(--cloth); color: var(--cream); box-shadow: 0 2px 0 var(--cloth-2); }
.btn.sec { background: var(--paper-2); color: var(--ink); border: 1px solid var(--line-2); }

@media (max-width: 980px) {
  .cards, .list-grid { grid-template-columns: repeat(2, 1fr); }
  .stat.sm { grid-column: span 6; }
  .app { flex-direction: column; }
  .side {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100%;
    flex: none;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line-2);
    box-shadow: 0 4px 20px -10px rgba(16, 24, 40, 0.08);
  }
  .side::after { display: none; }
  .brand { padding: 0; gap: 8px; }
  .brand b { font-size: 15px; }
  .brand-ic { width: 30px; height: 30px; border-radius: 8px; font-size: 15px; }
  .brand-sub { display: none; }
  .brand-asof-mobile { display: block; font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 1px; }
  
  .side-actions-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .side-actions-mobile .guide-btn {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px -4px rgba(37, 99, 235, 0.4);
  }
  .side-actions-mobile .themes {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    background: #f2f6fd;
    border-radius: 999px;
  }
  .side-actions-mobile .tsw {
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
  }
  .side-actions-mobile .tsw.on {
    box-shadow: 0 0 0 2px #2563eb;
  }
  
  .topbar { display: none !important; }
  .side-foot { display: none; }
  .main { padding: 16px 16px 100px; }
  .main::before { display: none; }
}

@media (max-width: 760px) {
  body { background: var(--paper); }
  .topbar { position: sticky; top: 51px; z-index: 35; background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(10px); padding: 8px 0; margin: -4px 0 8px; }
  .topbar .themes, .topbar .ghost { display: none; }
  .asof { width: 100%; justify-content: center; border-radius: 12px; }
  .today-app { margin-left: -2px; margin-right: -2px; }
  .phone-panel { border-radius: 22px; padding: 12px; border-color: transparent; background: transparent; box-shadow: none; }
  .phone-panel::before { display: none; }
  .today-hero-card { min-height: 190px; border-radius: 24px; padding: 24px 20px; align-items: flex-end; }
  .today-ring { width: 76px; height: 76px; flex: 0 0 auto; }
  .quick-strip { gap: 8px; }
  .quick-strip button { border-radius: 16px; padding: 12px 9px; }
  .month-pressure, .next-card, .reminder-nudge { border-radius: 18px; padding: 15px; }
  .mp-grid { gap: 7px; }
  .mp-grid div { padding: 9px 8px; }
  .next-actions .btn { min-height: 46px; }
  .task-row { grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas:
      "date main money"
      "date state actions"; border-radius: 16px; }
  .task-state { justify-self: start; }
  .task-actions { justify-self: end; }
  .hero-wrap, #networth, #view-overview > .section { margin-top: 26px; }
  .stat.big, .stat.sm { grid-column: span 12; }
  .loans { grid-template-columns: 1fr; gap: 14px; }
  .cards { grid-template-columns: 1fr; gap: 14px; }
  .gold-grid { grid-template-columns: 1fr; gap: 14px; }
  .list-grid { grid-template-columns: 1fr; gap: 12px; }
  .nw { grid-template-columns: 1fr; gap: 22px; }
  .loan { padding: 20px; }
  .cc { padding: 16px; }
  .gold-banner, .pf-head { flex-direction: column; }
  .gb-stat.right, .pf-stat.right { text-align: left; }
  .cal-row { grid-template-columns: 50px 1fr auto; gap: 12px; padding: 15px 16px; }
  .up-row { grid-template-columns: 46px 3px 1fr auto; gap: 10px; padding: 15px 15px; }
  .up-act { grid-column: 3 / -1; justify-self: end; margin-top: 4px; }
  .up-row.total .up-act { display: none; }
  .om-row, .om-head { grid-template-columns: 64px 1fr 100px; }
  .om-delta, .om-head span:nth-child(4) { display: none; }
  /* two clean lines: name+amount, then due+chip */
  .mrow { grid-template-columns: 1fr auto; row-gap: 8px; padding: 15px 16px; }
  .mrow .nm { grid-column: 1; grid-row: 1; }
  .mrow .amt { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
  .mrow .due { grid-column: 1; grid-row: 2; align-self: center; }
  .mrow .chip { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; width: max-content; }
  .section-head .hint { display: none; }
  .linkbtn, .iconbtn { min-height: 44px; min-width: 44px; }
}

/* ---------- add-tiles row + statement candidates ---------- */
.add-row { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cand { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px dashed var(--line-2); }
.cand:first-child { border-top: none; }
.cand.hint .cand-info b { color: var(--green); }
.cand-info { flex: 1; font-size: 13.5px; }
.cand-info small { display: block; color: var(--faint); font-size: 11px; margin-top: 3px; font-family: var(--mono); line-height: 1.5; }
@media (max-width: 760px) { .add-row { grid-template-columns: 1fr; } }

.form-hint { background: var(--green-soft); border: 1px solid rgba(35,113,77,.35); border-radius: 8px;
  padding: 11px 13px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); margin-bottom: 14px; }
.form-hint b { color: var(--green); }

/* ---------- import modal: tabs + panes ---------- */
.imp-tabs { display: flex; gap: 6px; margin: 4px 0 18px; padding: 4px; background: var(--paper-2);
  border: 1px solid var(--line-2); border-radius: 10px; }
.imp-tab { flex: 1; background: none; border: none; border-radius: 7px; padding: 9px 12px;
  font-family: var(--sans); font-weight: 700; font-size: 12.5px; color: var(--muted); cursor: pointer;
  transition: all .15s; }
.imp-tab:hover { color: var(--ink); }
.imp-tab.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.imp-pane { display: none; }
.imp-pane.on { display: block; animation: rise .25s ease both; }

/* ---------- transaction reconciliation list ---------- */
.recon { margin-top: 16px; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--panel); }
.recon-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; background: var(--paper-2); border-bottom: 1px solid var(--line-2); cursor: pointer; }
.recon-head b { font-size: 13px; color: var(--ink); }
.recon-head small { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.recon-head .caret { font-family: var(--mono); color: var(--muted); transition: transform .2s; }
.recon.open .recon-head .caret { transform: rotate(180deg); }
.recon-body { display: none; max-height: 260px; overflow-y: auto; }
.recon.open .recon-body { display: block; }
.trow { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center;
  padding: 9px 14px; border-top: 1px solid var(--line); font-size: 12.5px; }
.trow:first-child { border-top: none; }
.trow .tdate { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.trow .tnarr { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .tamt { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.trow .tamt.debit { color: var(--red); }
.trow .tamt.credit { color: var(--green); }
.trow .tamt.unknown { color: var(--muted); }
.recon-filter { display: flex; gap: 6px; padding: 9px 14px; border-top: 1px solid var(--line); background: var(--paper-2); }
.recon-filter button { flex: 1; background: var(--panel); border: 1px solid var(--line-2); border-radius: 6px;
  padding: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); cursor: pointer; transition: .15s; }
.recon-filter button.on { background: var(--cloth); color: var(--cream); border-color: var(--cloth); }

/* ---------- bottom tab bar (mobile) ---------- */
.bottombar { display: none; }
@media (max-width: 980px) {
  .bottombar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--line-2);
    box-shadow: 0 -4px 20px -10px rgba(16, 24, 40, 0.08);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  }
  .bb-it {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    color: var(--side-fg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    padding: 6px 2px;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .bb-it svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
  }
  .bb-it:active svg {
    transform: scale(0.85);
  }
  .bb-it.on {
    color: var(--cloth);
    background: var(--side-active);
  }
  .bb-it.on svg {
    transform: scale(1.08);
  }

  /* top strip: brand only — nav lives at the bottom now */
  .side .nav { display: none; }
  .side { padding: 11px 16px; }
  .main { padding-bottom: 130px; }

  /* forecast becomes a swipeable row */
  .forecast { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 10px; scrollbar-width: none; }
  .forecast::-webkit-scrollbar { display: none; }
  .fmonth { flex: 0 0 46%; scroll-snap-align: start; }

  /* hero cards: near-full width with a peek of the next */
  .stat { flex: 0 0 80%; }
  .stat.big { flex: 0 0 86%; }
  .hscroll { display: none; }
}

/* ---------- investments hero card + insights ---------- */
.stat.invest { border-top: 3px solid var(--sky); border-color: rgba(58,98,137,.4); }
.stat.invest .value { color: var(--sky); }
.insights { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ins { display: flex; gap: 13px; align-items: flex-start; background: var(--panel);
  border: 1px solid var(--line-2); border-left: 4px solid var(--line-2); border-radius: 10px;
  padding: 15px 17px; box-shadow: var(--shadow); font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.ins .ic { font-size: 19px; flex: 0 0 auto; line-height: 1.3; }
.ins b { color: var(--ink); }
.ins.good { border-left-color: var(--green); }
.ins.warn { border-left-color: var(--gold); }
.ins.bad { border-left-color: var(--red); background: linear-gradient(120deg, var(--red-soft), var(--panel)); }
@media (max-width: 760px) { .insights { grid-template-columns: 1fr; } }

/* ---------- theme swatches (topbar) ---------- */
.themes { display: inline-flex; gap: 7px; align-items: center; margin-right: 6px; }
.tsw { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 1px solid rgba(0,0,0,.25); transition: transform .15s, box-shadow .15s; }
.tsw:hover { transform: scale(1.15); }
.tsw.on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.tsw.t-default { background: linear-gradient(135deg, #2563eb 0 45%, #14b8a6 45% 72%, #f8fbff 72%); }

/* ============================================================================
   2026 FINANCE APP REDESIGN
   Light mobile banking UI: soft blue surfaces, rounded app cards, chart-first
   summaries, and crisp icon navigation.
   ========================================================================== */
:root {
  --paper: #f6f9ff;
  --paper-2: #edf4ff;
  --panel: #ffffff;
  --panel-2: #f8fbff;
  --ink: #101828;
  --ink-2: #344054;
  --muted: #667085;
  --faint: #98a2b3;

  --cloth: #2563eb;
  --cloth-2: #1746b5;
  --cream: #ffffff;
  --foil: #22c55e;
  --foil-a: #67e8f9; --foil-b: #38bdf8; --foil-c: #2563eb; --foil-text: #ffffff;
  --side-fg: #667085;
  --side-strong: #101828;
  --side-line: #e6edf7;
  --side-active: #eef6ff;
  --tex-a: transparent; --tex-b: transparent;
  --grain: 0;
  --bg-rad1: rgba(56,189,248,.28);
  --bg-rad2: rgba(34,197,94,.18);

  --red: #f04438;
  --red-deep: #d92d20;
  --red-soft: #fff1f0;
  --green: #12b76a;
  --green-soft: #ecfdf3;
  --jade: #12b76a;
  --jade-deep: #039855;
  --jade-soft: #ecfdf3;
  --gold: #f79009;
  --gold-soft: #fffaeb;
  --sky: #2563eb;
  --amber: #f79009;
  --coral: #f04438;
  --text: #101828;
  --line: #edf2f7;
  --line-2: #dde7f3;
  --bg-2: #eef5ff;
  --card: #ffffff;
  --card-2: #f8fbff;

  --radius: 22px;
  --shadow: 0 10px 30px -22px rgba(16,24,40,.28), 0 1px 2px rgba(16,24,40,.04);
  --shadow-lift: 0 22px 50px -30px rgba(37,99,235,.38), 0 6px 18px -14px rgba(16,24,40,.22);

  --serif: 'Sora', 'Manrope', system-ui, -apple-system, sans-serif;
  --sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

body {
  background:
    radial-gradient(620px 360px at 12% -5%, rgba(56,189,248,.20), transparent 62%),
    radial-gradient(580px 440px at 92% 5%, rgba(34,197,94,.16), transparent 60%),
    linear-gradient(180deg, #f8fbff 0%, #f4f8ff 44%, #eef5ff 100%);
}
body::before { display: none; }

.app { gap: 0; }
.side {
  width: 236px; flex-basis: 236px; padding: 22px 14px 18px;
  background: rgba(255,255,255,.78);
  border-right: 1px solid rgba(221,231,243,.86);
  box-shadow: 20px 0 50px -44px rgba(16,24,40,.42);
  backdrop-filter: blur(18px);
}
.side::after { display: none; }
.brand { padding: 0 8px 26px; }
.brand-button {
  width: 100%;
  border: 0;
  text-align: left;
  cursor: pointer;
  border-radius: 20px;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.brand-button:hover {
  background: rgba(238,246,255,.78);
  box-shadow: 0 14px 30px -26px rgba(37,99,235,.55);
  transform: translateY(-1px);
}
.brand-ic {
  width: 42px; height: 42px; border-radius: 15px;
  background: linear-gradient(140deg, #22c55e 0%, #38bdf8 48%, #2563eb 100%);
  color: #fff; font-family: var(--serif); box-shadow: 0 14px 24px -16px rgba(37,99,235,.7);
}
.brand b { color: var(--ink); font-family: var(--serif); font-size: 17px; letter-spacing: -.03em; }
.brand small { color: var(--muted); letter-spacing: .18em; font-size: 8px; }
.nav { gap: 7px; }
.nav-it {
  color: var(--muted); border-radius: 16px; padding: 12px 13px; font-size: 13.5px;
  font-weight: 800; letter-spacing: -.01em;
}
.nav-it::before {
  width: 22px; height: 22px; border-radius: 8px; transform: none; background: #f0f5ff;
  box-shadow: inset 0 0 0 1px rgba(221,231,243,.9);
}
.nav-it:hover { color: var(--ink); background: rgba(238,246,255,.7); }
.nav-it.on {
  color: #0f3f9c;
  background: linear-gradient(135deg, #eef7ff, #ecfdf3);
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.12), 0 12px 24px -20px rgba(37,99,235,.45);
}
.nav-it.on::before { background: linear-gradient(135deg, #38bdf8, #2563eb); box-shadow: none; }
.nav-it .badge {
  background: #2563eb; color: #fff; border: 0; padding: 2px 7px;
}
.me {
  background: #f8fbff; border-color: var(--line-2); border-radius: 18px;
}
.me .av { background: linear-gradient(135deg, #22c55e, #38bdf8); color: #fff; }
.me b { color: var(--ink); }
.me small { color: var(--muted); }

.main { padding: 26px 34px 110px; max-width: 980px; }
.main::before { display: none; }
.topbar {
  position: sticky; top: 14px; z-index: 34;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,251,255,.76)),
    radial-gradient(220px 80px at 18% 0%, rgba(56,189,248,.18), transparent 70%);
  border: 1px solid rgba(221,231,243,.86);
  border-radius: 24px; padding: 11px 12px; box-shadow: 0 18px 42px -32px rgba(16,24,40,.52);
  backdrop-filter: blur(18px); margin-bottom: 18px;
}
.top-actions { display: flex; gap: 8px; align-items: center; }
.asof {
  background: #f8fbff; border-color: var(--line); color: var(--muted);
  border-radius: 999px; box-shadow: none; font-size: 11.5px;
}
.asof b { color: var(--ink); }
.guide-btn {
  width: 34px; height: 34px; border: 0; border-radius: 13px; cursor: pointer;
  display: grid; place-items: center; color: #ffffff; font-family: var(--serif);
  font-weight: 900; font-size: 16px;
  background: linear-gradient(135deg, #0f766e, #2563eb);
  box-shadow: 0 14px 22px -16px rgba(37,99,235,.72);
}
.ghost {
  background: #ffffff; border-color: var(--line-2); color: var(--ink-2);
  border-radius: 14px; font-family: var(--sans); font-weight: 800; font-size: 12px;
  box-shadow: 0 8px 20px -18px rgba(16,24,40,.4);
}
.themes { background: #f2f6fd; border-radius: 999px; padding: 5px; }
.tsw { border: 2px solid #fff; width: 22px; height: 22px; }
.tsw.on { box-shadow: 0 0 0 2px #2563eb; }

.help-modal { max-width: 520px; }
.help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.help-grid button {
  border: 1px solid var(--line-2);
  background: linear-gradient(135deg, #ffffff, #f8fbff);
  border-radius: 18px;
  padding: 15px;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .16s ease, border-color .16s ease;
}
.help-grid button:hover {
  transform: translateY(-2px);
  border-color: rgba(37,99,235,.34);
}
.help-grid b {
  display: block;
  color: var(--ink);
  font-size: 14px;
  margin-bottom: 5px;
}
.help-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.help-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 14px;
  padding: 13px;
  border-radius: 16px;
  background: #ecfdf3;
  color: #166534;
}
.help-note span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.help-note p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
}

.section { margin-top: 34px; }
.section.first { margin-top: 12px; }
.section-head {
  border-bottom: 0; padding-bottom: 0; margin-bottom: 15px; align-items: center;
}
.section-head h2 {
  font-family: var(--serif); font-size: 22px; letter-spacing: -.04em; color: var(--ink);
}
.section-head h2::before {
  content: ''; display: inline-block; width: 8px; height: 24px; border-radius: 999px;
  background: linear-gradient(180deg, #38bdf8, #2563eb); vertical-align: -5px; margin-right: 10px;
}
.section-head .hint { color: var(--muted); font-size: 12px; }

.phone-panel {
  background: transparent; border: 0; box-shadow: none; padding: 0; overflow: visible;
}
.phone-panel::before { display: none; }
.phone-status {
  color: var(--muted); font-size: 11px; padding: 0 2px; margin-bottom: 10px;
}
.today-hero-card {
  min-height: 210px; border-radius: 30px; padding: 24px;
  background:
    radial-gradient(180px 120px at 86% 20%, rgba(255,255,255,.24), transparent 65%),
    linear-gradient(135deg, #1d4ed8 0%, #2563eb 42%, #38bdf8 100%);
  box-shadow: 0 24px 50px -28px rgba(37,99,235,.72);
}
.today-hero-card.warn {
  background:
    radial-gradient(180px 120px at 86% 20%, rgba(255,255,255,.24), transparent 65%),
    linear-gradient(135deg, #2563eb 0%, #06b6d4 52%, #22c55e 100%);
}
.today-hero-card.danger {
  background:
    radial-gradient(180px 120px at 86% 20%, rgba(255,255,255,.18), transparent 65%),
    linear-gradient(135deg, #ef4444 0%, #f97316 52%, #2563eb 100%);
}
.today-hero-card.clear {
  background:
    radial-gradient(180px 120px at 86% 20%, rgba(255,255,255,.24), transparent 65%),
    linear-gradient(135deg, #059669 0%, #12b76a 48%, #38bdf8 100%);
}
.today-hero-card::after {
  width: 220px; height: 220px; right: -74px; bottom: -96px; background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 28px rgba(255,255,255,.08);
}
.today-greet { font-family: var(--sans); font-weight: 800; opacity: .76; }
.today-hero-card h1 {
  font-family: var(--serif); font-size: clamp(36px, 5.7vw, 60px); letter-spacing: -.055em;
}
.today-ring {
  width: 102px; height: 102px; border: 0; color: var(--ink);
  background: conic-gradient(#ffffff var(--paid-angle), rgba(255,255,255,.28) 0);
  box-shadow: none;
}
.today-ring::before {
  content: ''; position: absolute; inset: 11px; border-radius: 50%; background: rgba(255,255,255,.94);
}
.today-ring span, .today-ring small { position: relative; z-index: 1; color: var(--ink); }
.today-ring small { margin-top: -31px; color: var(--muted); }

.quick-strip { gap: 12px; margin: 14px 0; }
.quick-strip button {
  background: rgba(255,255,255,.9); border: 1px solid rgba(221,231,243,.9); border-radius: 20px;
  box-shadow: var(--shadow); padding: 15px 13px;
}
.quick-strip b { color: var(--ink); font-size: 17px; }
.quick-strip span { color: var(--muted); font-family: var(--sans); font-weight: 800; }
.month-pressure, .next-card, .reminder-nudge {
  background: rgba(255,255,255,.92); border: 1px solid rgba(221,231,243,.9);
  border-radius: 26px; padding: 18px; box-shadow: var(--shadow);
}
.mp-head, .task-list-head { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 13px; }
.mp-head span, .task-list-head span { color: var(--ink); font-weight: 900; }
.mp-head b { color: var(--muted); font-size: 12px; }
.mp-bar, .mp-grid { display: none; }
.mp-chart-row { display: grid; grid-template-columns: 124px 1fr; gap: 18px; align-items: center; margin-top: 14px; }
.mp-donut {
  width: 124px; height: 124px; border-radius: 50%; display: grid; place-items: center; align-content: center;
  background: conic-gradient(#12b76a var(--paid-angle), #f04438 0 360deg);
  position: relative; box-shadow: inset 0 0 0 1px rgba(16,24,40,.04);
}
.mp-donut::before { content: ''; position: absolute; inset: 17px; background: #fff; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
.mp-donut b, .mp-donut span { position: relative; z-index: 1; }
.mp-donut b { font-family: var(--serif); font-size: 24px; letter-spacing: -.04em; }
.mp-donut span { color: var(--muted); font-size: 11px; font-weight: 800; }
.mp-lines { display: flex; flex-direction: column; gap: 9px; }
.mp-line { display: grid; grid-template-columns: 10px 1fr auto; gap: 9px; align-items: center;
  background: #f8fbff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 11px; min-width: 0; }
.mp-line i { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); }
.mp-line.paid i { background: var(--green); }
.mp-line.pending i { background: var(--red); }
.mp-line.total i { background: var(--sky); }
.mp-line span { color: var(--muted); font-size: 12px; font-weight: 800; }
.mp-line b { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; color: var(--ink); }
.next-label { color: var(--sky); font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 13px; }
.next-line b { font-family: var(--serif); letter-spacing: -.03em; }
.next-line strong { color: var(--sky); }
.btn, .paybtn, .mini-pay, .mini-remind, .reminder-nudge button, .task-list-head button {
  border-radius: 16px; font-family: var(--sans); letter-spacing: 0; text-transform: none;
}
.btn.primary, .paybtn, .mini-pay {
  background: linear-gradient(135deg, #2563eb, #38bdf8); color: #fff; box-shadow: 0 14px 24px -18px rgba(37,99,235,.7);
}
.btn.sec, .mini-remind, .reminder-nudge button, .task-list-head button {
  background: #eef6ff; color: #175cd3; border-color: transparent;
}
.reminder-nudge { border-left: 0; background: linear-gradient(135deg, #ffffff 0%, #eef8ff 100%); }
.reminder-nudge.on { background: linear-gradient(135deg, #ffffff 0%, #ecfdf3 100%); }
.task-list-head { margin-top: 20px; }
.task-row {
  background: rgba(255,255,255,.94); border: 1px solid rgba(221,231,243,.9); border-radius: 22px;
  padding: 12px; box-shadow: 0 12px 28px -24px rgba(16,24,40,.4);
}
.task-date { background: #eef6ff; border: 0; color: #175cd3; border-radius: 16px; }
.task-main b { font-size: 14px; color: var(--ink); }
.task-money { color: var(--ink); }
.task-row.overdue { background: linear-gradient(90deg, #fff7f6, #fff); border-color: #ffd9d6; }
.task-row.today { background: linear-gradient(90deg, #fffbeb, #fff); border-color: #fedf89; }

.hero { gap: 16px; }
.stat, .nw, .asset-banner, .cost-stat, .cost-loan, .fmonth, .gold-card, .cc, .loan, .list-card,
.month, .cal, .upcoming, .om, .payoff, .welcome, .modal {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(221,231,243,.92);
  border-radius: 26px;
  box-shadow: var(--shadow);
}
.stat { padding: 22px; overflow: hidden; }
.stat.big { flex-basis: 360px; }
.stat:hover, .loan:hover, .cc:hover, .list-card:hover, .gold-card:hover, .fmonth:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.stat .label, .nw-k, .ab-k, .gb-k, .cm-k, .kv .k {
  font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 12px; font-weight: 900;
}
.stat.big .value, .nw-v, .ab-v, .gb-v, .pf-v, .cc-bill, .lc-amt, .gold-amt {
  font-family: var(--serif); letter-spacing: -.055em;
}
.stat .value { color: var(--ink); }
.stat.accent, .stat.warn, .stat.invest {
  border-top: 0; border-color: rgba(221,231,243,.92);
}
.stat.accent { background: linear-gradient(145deg, #ffffff 0%, #ecfdf3 100%); }
.stat.warn { background: linear-gradient(145deg, #ffffff 0%, #fff7ed 100%); }
.stat.invest { background: linear-gradient(145deg, #ffffff 0%, #eff6ff 100%); }
.stat.accent .value { color: var(--green); }
.stat.warn .value { color: var(--gold); }
.stat.invest .value { color: var(--sky); }
.bar, .nwbar, .cost-bar, .om-bar { background: #e9f0f8; border: 0; height: 9px; }
.bar > i, .nwbar > i.a, .cost-bar > i { background: linear-gradient(90deg, #22c55e, #38bdf8); }
.nw {
  grid-template-columns: 1fr; padding: 24px; outline: none; margin-left: 0; margin-right: 0;
  background: linear-gradient(145deg, #ffffff 0%, #f2f8ff 100%);
}
.nw::before, .nw::after { display: none; }
.nw-v { font-size: clamp(36px, 5vw, 56px); }
.nw-row { grid-template-columns: 72px 1fr auto; }

.mrow, .cal-row, .up-row, .om-row {
  border-top-color: var(--line); background: transparent;
}
.mrow:hover, .cal-row:hover, .up-row:hover { background: #f8fbff; }
.cal-day, .up-date {
  background: #eef6ff; border: 0; border-radius: 16px; color: #175cd3;
}
.cal-day b, .up-date b { color: #175cd3; }
.up-tick { background: linear-gradient(180deg, #38bdf8, #2563eb); width: 5px; border-radius: 999px; }
.up-amt, .mrow .amt { color: var(--ink); }
.chip {
  border-radius: 999px; border: 0; letter-spacing: 0; font-family: var(--sans); font-size: 11px;
  padding: 8px 12px; text-transform: none;
}
.chip.paid { background: var(--green-soft); color: var(--green); transform: none; }
.chip.up { background: #eef6ff; color: #175cd3; }
.track-state { font-family: var(--sans); letter-spacing: 0; }
.track-state.closing { transform: none; border: 0; border-radius: 999px; }
.loan-name, .section-head h2 { font-family: var(--serif); }
.loan-name { font-size: 20px; letter-spacing: -.04em; }
.lender { background: #eef6ff; border: 0; color: #175cd3; }
.pct { font-family: var(--serif); color: var(--sky); }
.grid2 { background: #f8fbff; border-radius: 20px; padding: 14px; }
.loan-foot { border-top-color: var(--line); }
.iconbtn {
  background: #eef6ff; border: 0; color: #175cd3; border-radius: 14px;
}
.linkbtn { color: #175cd3; font-family: var(--sans); }
.cards, .list-grid { gap: 14px; }
.cc { border-top: 0; background: linear-gradient(145deg, #ffffff, #eff6ff); }
.cc.add, .list-card.add {
  border: 1.5px dashed #b8d8ff; background: rgba(255,255,255,.55); border-radius: 26px;
}
.gold-banner, .asset-banner.jade, .asset-banner.sky, .asset-banner.coral {
  border-left: 0; border-color: rgba(221,231,243,.92); border-radius: 26px;
}
.asset-banner.jade { background: linear-gradient(145deg, #ffffff, #ecfdf3); }
.asset-banner.sky { background: linear-gradient(145deg, #ffffff, #eff6ff); }
.asset-banner.coral { background: linear-gradient(145deg, #ffffff, #fff1f0); }
.gold-banner { background: linear-gradient(145deg, #ffffff, #fffaeb); }

.bottombar {
  background: rgba(255,255,255,.92);
  border-top: 1px solid rgba(221,231,243,.9);
  box-shadow: 0 -18px 40px -30px rgba(16,24,40,.45);
  backdrop-filter: blur(18px);
}
.bb-it { color: var(--muted); border-radius: 18px; }
.bb-it.on { color: #175cd3; background: #eef6ff; }
.bb-it.on svg { filter: none; }

.modal-bg { background: rgba(15,23,42,.36); }
.modal { border-top: 0; border-radius: 28px; }
.modal h3 { font-family: var(--serif); letter-spacing: -.04em; }
.field input, textarea {
  background: #f8fbff !important; border-color: var(--line-2) !important; border-radius: 16px !important;
  font-family: var(--sans) !important;
}
.field label { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 12px; }

@media (min-width: 1201px) {
  .main { max-width: 980px; }
  .payment-hub {
    background: rgba(255,255,255,.72); border-left-color: rgba(221,231,243,.9);
    backdrop-filter: blur(18px);
  }
  .ph-item { border-radius: 18px; box-shadow: var(--shadow); border-color: var(--line); }
}

@media (max-width: 980px) {
  .side {
    width: 100%; flex-basis: auto; height: auto; position: sticky; top: 0; z-index: 40;
    flex-direction: row; align-items: center; gap: 10px; padding: 11px 16px;
    background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(221,231,243,.9);
    box-shadow: 0 12px 32px -28px rgba(16,24,40,.45); backdrop-filter: blur(18px);
  }
  .brand { padding: 0; gap: 10px; }
  .brand-ic { width: 38px; height: 38px; border-radius: 14px; }
  .brand b { font-size: 16px; }
  .brand small { display: none; }
  .side-foot { display: none; }
  .side .nav { display: none; }
  .main { padding: 16px 15px 128px; }
}

@media (max-width: 760px) {
  .topbar {
    top: 53px; border-radius: 18px; padding: 9px; background: rgba(255,255,255,.84);
  }
  .asof { background: transparent; border: 0; box-shadow: none; }
  .today-hero-card { min-height: 214px; border-radius: 30px; }
  .today-ring { width: 92px; height: 92px; }
  .mp-chart-row { grid-template-columns: 112px 1fr; gap: 12px; }
  .mp-donut { width: 112px; height: 112px; }
  .mp-line { padding: 9px; }
  .mp-line b { font-size: 11.5px; }
  .quick-strip button { border-radius: 18px; }
  .task-row { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .hero-wrap, #networth, #view-overview > .section { margin-top: 22px; }
  .stat { flex: 0 0 84%; border-radius: 26px; }
  .stat.big { flex: 0 0 88%; }
  .section-head h2 { font-size: 20px; }
  .mrow, .cal-row, .up-row { padding: 14px; }
  .month, .cal, .upcoming, .loan, .cc, .list-card, .payoff, .om { border-radius: 24px; }
  .tab-hero { margin-top: 2px; margin-bottom: 20px; }
  .tab-card { min-height: 188px; border-radius: 30px; padding: 21px; align-items: flex-end; }
  .tab-copy h1 { font-size: 34px; }
  .tab-copy p { font-size: 12.5px; }
  .tab-chart-ring { width: 92px; height: 92px; }
  .tab-chart-ring::before { inset: 10px; }
  .tab-chart-ring b { font-size: 20px; }
  .tab-chart-ring small { margin-top: -23px; font-size: 8.5px; }
  .hero-metrics { gap: 9px; }
  .hero-metric { border-radius: 18px; padding: 13px 11px; }
  .hero-metric span { font-size: 11px; }
  .hero-metric b { font-size: 16px; }
  .split-chart { width: 94px; height: 94px; border-radius: 24px; padding: 13px; }
  .split-chart::before { inset: 13px; border-radius: 18px; }
  .split-chart b { font-size: 20px; }
}

/* ---------- refinements: chart text + CRED-style loan carousel ---------- */
.today-ring, .tab-chart-ring, .mp-donut {
  align-content: center;
  justify-items: center;
  gap: 4px;
}
.today-ring span, .tab-chart-ring b, .mp-donut b {
  display: block;
  line-height: 1;
}
.today-ring small, .tab-chart-ring small, .mp-donut span {
  display: block;
  margin-top: 0 !important;
  line-height: 1;
}
.today-ring small { font-size: 9px; }
.tab-chart-ring small { font-size: 9.5px; }
.mp-donut span { font-size: 10.5px; }

@media (max-width: 760px) {
  #view-loans .section.first { margin-top: 20px; }
  #view-loans .section.first .section-head { padding: 0 3px; }
  .loans {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 14px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding: 14px;
    padding: 2px 3px 16px;
    margin: 0 -3px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .loans::-webkit-scrollbar { display: none; }
  .loans > .loan {
    flex: 0 0 86%;
    min-width: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    border-radius: 26px;
  }
  .loans > .loan:last-of-type { margin-right: 12px; }
  .loan-head { min-height: 44px; }
  .loan-name {
    font-size: 19px;
    line-height: 1.08;
  }
  .lender {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pct-row {
    align-items: center;
    margin-top: 18px;
  }
  .pct {
    font-size: 38px;
    line-height: 1;
  }
  .grid2 {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .loan-foot {
    align-items: flex-start;
    flex-direction: column;
  }
  .loan-foot > div:last-child {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ---------- modern loan card redesign ---------- */
.loan {
  isolation: isolate;
  overflow: hidden;
  border: 0;
  border-radius: 32px;
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.96)) padding-box,
    linear-gradient(135deg, rgba(56,189,248,.62), rgba(34,197,94,.38), rgba(37,99,235,.38)) border-box;
  box-shadow: 0 28px 60px -42px rgba(15,23,42,.55), 0 1px 0 rgba(255,255,255,.92) inset;
}
.loan::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 120px;
  z-index: -1;
  background:
    radial-gradient(150px 90px at 85% 10%, rgba(255,255,255,.42), transparent 70%),
    linear-gradient(135deg, #2563eb 0%, #38bdf8 54%, #22c55e 100%);
}
.loan::after {
  content: '';
  position: absolute;
  right: -54px;
  top: 28px;
  width: 148px;
  height: 148px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 22px rgba(255,255,255,.12);
}
.loan.flag::before {
  background:
    radial-gradient(150px 90px at 85% 10%, rgba(255,255,255,.42), transparent 70%),
    linear-gradient(135deg, #ef4444 0%, #f97316 52%, #2563eb 100%);
}
.loan.closed::before {
  background:
    radial-gradient(150px 90px at 85% 10%, rgba(255,255,255,.38), transparent 70%),
    linear-gradient(135deg, #64748b 0%, #94a3b8 100%);
}
.loan:hover {
  transform: translateY(-4px);
  box-shadow: 0 34px 70px -42px rgba(37,99,235,.62);
}
.loan-head {
  align-items: flex-start;
  min-height: 84px;
  color: #fff;
}
.loan-name {
  color: #fff;
  font-size: 22px;
  letter-spacing: -.055em;
  max-width: 210px;
}
.loan-name small {
  color: rgba(255,255,255,.74);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
}
.lender {
  background: rgba(255,255,255,.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,.26);
  backdrop-filter: blur(10px);
}
.lender .led {
  background: #fff;
  box-shadow: none;
}
.pct-row {
  margin: 20px 0 12px;
  padding: 14px 15px;
  border-radius: 24px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 30px -28px rgba(15,23,42,.5);
  align-items: center;
}
.pct {
  display: inline-flex;
  align-items: baseline;
  color: #175cd3;
  font-size: 42px;
  letter-spacing: -.06em;
}
.pct small {
  margin-left: 7px;
  color: var(--muted);
  font-family: var(--sans);
  font-weight: 900;
}
.track-state {
  background: #eef6ff;
  color: #175cd3;
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 10.5px;
  font-weight: 900;
}
.track-state.warn { color: #175cd3; }
.track-state.closed { color: var(--muted); background: #f1f5f9; }
.track-state.closing {
  color: #b54708;
  background: #fffaeb;
}
.loan > .bar {
  height: 10px;
  margin-top: 0;
  background: rgba(37,99,235,.1);
}
.loan > .bar > i {
  background: linear-gradient(90deg, #175cd3, #38bdf8, #22c55e);
}
.grid2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  padding: 0;
  background: transparent;
}
.kv {
  min-width: 0;
  border: 1px solid rgba(221,231,243,.9);
  border-radius: 18px;
  padding: 12px;
  background: rgba(248,251,255,.86);
}
.kv .k {
  color: var(--muted);
  font-size: 11px;
  font-family: var(--sans);
  font-weight: 900;
}
.kv .v {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: -.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kv .v .rupee { color: var(--faint); font-size: .72em; }
.loan-foot {
  border-top: 0;
  margin-top: 14px;
  padding: 14px;
  border-radius: 20px;
  background: #f8fbff;
}
.loan-foot .nextdue {
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.45;
}
.loan-foot .nextdue b { color: #175cd3; }
.loan .chip.up {
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  color: #fff;
  box-shadow: 0 12px 22px -18px rgba(37,99,235,.75);
}
.loan .chip.paid {
  background: #ecfdf3;
  color: #039855;
}
.loan .iconbtn {
  width: 34px;
  height: 34px;
  border-radius: 14px;
}
.loan .linkbtn {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  text-decoration: none;
}
.warn-banner {
  margin-top: -2px;
  margin-bottom: 12px;
  border: 0;
  border-radius: 18px;
  background: rgba(255,241,240,.96);
}
.phist, .sched {
  border-top: 0;
  margin-top: 12px;
  padding: 12px;
  border-radius: 20px;
  background: #f8fbff;
}
.sched .scroll {
  border-radius: 16px;
  background: #fff;
}

@media (max-width: 760px) {
  .loans > .loan {
    flex-basis: 88%;
    padding: 18px;
  }
  .loan-head {
    min-height: 92px;
  }
  .loan-name {
    font-size: 21px;
    max-width: 180px;
  }
  .pct-row {
    margin-top: 16px;
    padding: 13px;
  }
  .pct { font-size: 40px; }
  .track-state {
    max-width: 118px;
    text-align: center;
  }
  .kv {
    padding: 11px;
    border-radius: 16px;
  }
  .kv .v {
    font-size: 15px;
  }
}

/* ---------- compact landscape loan cards ---------- */
.loan {
  padding: 18px;
  border-radius: 30px;
}
.loan::before {
  height: 92px;
}
.loan::after {
  width: 118px;
  height: 118px;
  right: -42px;
  top: 14px;
}
.loan-head {
  min-height: 58px;
  align-items: flex-start;
}
.loan-name {
  font-size: 20px;
  line-height: 1.05;
}
.loan-name small {
  font-size: 10.5px;
  margin-top: 4px;
}
.lender {
  padding: 5px 9px;
  font-size: 9.5px;
}
.pct-row {
  margin: 12px 0 8px;
  padding: 9px 11px;
  border-radius: 18px;
}
.pct {
  font-size: 31px;
}
.pct small {
  font-size: 10px;
}
.track-state {
  padding: 6px 9px;
  font-size: 9.5px;
}
.loan > .bar {
  height: 7px;
}
.grid2 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}
.kv {
  border-radius: 14px;
  padding: 8px 9px;
}
.kv .k {
  font-size: 9.5px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kv .v {
  font-size: 13px;
  margin-top: 3px;
}
.loan-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 16px;
}
.loan-foot .nextdue {
  font-size: 11.3px;
  line-height: 1.35;
}
.loan-foot > div:last-child {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}
.loan-foot > div:last-child::-webkit-scrollbar { display: none; }
.loan .chip {
  padding: 7px 10px;
  font-size: 10px;
}
.loan .iconbtn {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  flex: 0 0 auto;
}
.loan .linkbtn {
  padding: 7px 10px;
  font-size: 10.5px;
  white-space: nowrap;
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .loans {
    gap: 12px;
    padding-bottom: 14px;
  }
  .loans > .loan {
    flex-basis: 91%;
    padding: 15px;
    border-radius: 28px;
  }
  .loan::before { height: 86px; }
  .loan-head {
    min-height: 54px;
  }
  .loan-name {
    font-size: 18px;
    max-width: 176px;
  }
  .lender {
    max-width: 100px;
    padding: 4px 8px;
  }
  .pct-row {
    margin-top: 10px;
    padding: 8px 10px;
  }
  .pct { font-size: 29px; }
  .track-state {
    max-width: 104px;
    padding: 6px 8px;
    font-size: 9px;
  }
  .grid2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .kv {
    padding: 7px;
    border-radius: 13px;
  }
  .kv .k {
    font-size: 8.7px;
  }
  .kv .v {
    font-size: 11.5px;
  }
  .loan-foot {
    grid-template-columns: 1fr;
    padding: 9px;
  }
  .loan-foot > div:last-child {
    width: 100%;
  }
}

/* ---------- optional customer theme: Sunrise ---------- */
html[data-theme="sunrise"] {
  --paper: #fff8f3;
  --paper-2: #fff1e7;
  --panel: #ffffff;
  --panel-2: #fffaf6;
  --ink: #23140f;
  --ink-2: #4b3128;
  --muted: #8a6558;
  --faint: #b49386;
  --cloth: #f97316;
  --cloth-2: #ea580c;
  --cream: #ffffff;
  --foil: #fb7185;
  --foil-a: #fb7185; --foil-b: #f97316; --foil-c: #f59e0b; --foil-text: #ffffff;
  --side-fg: #8a6558;
  --side-strong: #23140f;
  --side-line: #f8d9ca;
  --side-active: #fff1e7;
  --red: #e11d48;
  --red-deep: #be123c;
  --red-soft: #fff1f2;
  --green: #16a34a;
  --green-soft: #f0fdf4;
  --jade: #16a34a;
  --jade-deep: #15803d;
  --jade-soft: #f0fdf4;
  --gold: #f59e0b;
  --gold-soft: #fffbeb;
  --sky: #f97316;
  --amber: #f97316;
  --coral: #e11d48;
  --line: #fde5d6;
  --line-2: #f8d4c1;
  --bg-2: #fff1e7;
  --card: #ffffff;
  --card-2: #fffaf6;
  --text: #23140f;
  --bg-rad1: rgba(249,115,22,.22);
  --bg-rad2: rgba(251,113,133,.16);
  --shadow: 0 12px 34px -24px rgba(154,52,18,.34), 0 1px 2px rgba(154,52,18,.06);
  --shadow-lift: 0 22px 50px -30px rgba(249,115,22,.42), 0 8px 22px -16px rgba(154,52,18,.24);
}
html[data-theme="sunrise"] body {
  background:
    radial-gradient(620px 360px at 10% -8%, rgba(249,115,22,.18), transparent 62%),
    radial-gradient(620px 420px at 96% 0%, rgba(251,113,133,.15), transparent 62%),
    linear-gradient(180deg, #fffaf7 0%, #fff6ef 46%, #fff1e7 100%);
}
html[data-theme="sunrise"] .brand-ic,
html[data-theme="sunrise"] .nav-it.on::before,
html[data-theme="sunrise"] .me .av {
  background: linear-gradient(135deg, #fb7185, #f97316 52%, #f59e0b);
}
html[data-theme="sunrise"] .nav-it.on,
html[data-theme="sunrise"] .bb-it.on {
  color: #c2410c;
  background: #fff1e7;
}
html[data-theme="sunrise"] .section-head h2::before {
  background: linear-gradient(180deg, #fb7185, #f97316);
}
html[data-theme="sunrise"] .today-hero-card,
html[data-theme="sunrise"] .tab-card,
html[data-theme="sunrise"] .loan::before {
  background:
    radial-gradient(190px 130px at 88% 18%, rgba(255,255,255,.28), transparent 66%),
    linear-gradient(135deg, #e11d48 0%, #f97316 50%, #f59e0b 100%);
}
html[data-theme="sunrise"] .tab-card.loans-hero,
html[data-theme="sunrise"] .tab-card.invest-hero {
  background:
    radial-gradient(190px 130px at 88% 18%, rgba(255,255,255,.28), transparent 66%),
    linear-gradient(135deg, #16a34a 0%, #f97316 58%, #f59e0b 100%);
}
html[data-theme="sunrise"] .tab-card.cards-hero,
html[data-theme="sunrise"] .tab-card.people-hero {
  background:
    radial-gradient(190px 130px at 88% 18%, rgba(255,255,255,.28), transparent 66%),
    linear-gradient(135deg, #be123c 0%, #fb7185 44%, #f97316 100%);
}
html[data-theme="sunrise"] .btn.primary,
html[data-theme="sunrise"] .paybtn,
html[data-theme="sunrise"] .mini-pay,
html[data-theme="sunrise"] .loan .chip.up {
  background: linear-gradient(135deg, #e11d48, #f97316);
  box-shadow: 0 14px 24px -18px rgba(225,29,72,.65);
}
html[data-theme="sunrise"] .btn.sec,
html[data-theme="sunrise"] .mini-remind,
html[data-theme="sunrise"] .reminder-nudge button,
html[data-theme="sunrise"] .task-list-head button,
html[data-theme="sunrise"] .iconbtn,
html[data-theme="sunrise"] .loan .linkbtn {
  background: #fff1e7;
  color: #c2410c;
}
html[data-theme="sunrise"] .mp-donut {
  background: conic-gradient(#f97316 var(--paid-angle), #e11d48 0 360deg);
}
html[data-theme="sunrise"] .tab-chart-ring {
  background: conic-gradient(#ffffff var(--angle), rgba(255,255,255,.28) 0);
}
html[data-theme="sunrise"] .bar > i,
html[data-theme="sunrise"] .nwbar > i.a,
html[data-theme="sunrise"] .cost-bar > i,
html[data-theme="sunrise"] .loan > .bar > i {
  background: linear-gradient(90deg, #e11d48, #f97316, #f59e0b);
}

html[data-theme="sunrise"] .bottombar,
html[data-theme="sunrise"] .side {
  background: rgba(255, 250, 246, 0.85) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(248, 212, 193, 0.6) !important;
}

html[data-theme="sunrise"] .guide-btn {
  background: linear-gradient(135deg, #e11d48, #f97316);
  box-shadow: 0 14px 22px -16px rgba(225,29,72,.72);
}
html[data-theme="sunrise"] .help-note {
  background: #fff1e7;
  color: #c2410c;
}
html[data-theme="sunrise"] .tsw.on {
  box-shadow: 0 0 0 2px #fff8f3, 0 0 0 4px #f97316;
}
.tsw.t-sunrise {
  background: linear-gradient(135deg, #fb7185 0 35%, #f97316 35% 68%, #f59e0b 68%);
}
.tsw.t-focus {
  background: linear-gradient(135deg, #0f3d3e 0 36%, #2f8f83 36% 68%, #eef7f5 68%);
}

/* ---------- optional customer theme: Focus ---------- */
html[data-theme="focus"] {
  --paper: #eef7f5;
  --paper-2: #e2efec;
  --panel: #fbfffe;
  --panel-2: #f4fbf9;
  --ink: #102423;
  --ink-2: #29413f;
  --muted: #607b77;
  --faint: #8fa4a0;
  --cloth: #0f3d3e;
  --cloth-2: #082b2c;
  --cream: #f5fffc;
  --foil: #8fd6c8;
  --foil-a: #c7f5ec; --foil-b: #62c7b8; --foil-c: #2f8f83; --foil-text: #062223;
  --side-fg: rgba(245,255,252,.72);
  --side-strong: #f5fffc;
  --side-line: rgba(199,245,236,.28);
  --side-active: rgba(255,255,255,.11);
  --red: #b43b47;
  --red-deep: #8f2633;
  --red-soft: rgba(180,59,71,.1);
  --green: #207866;
  --green-soft: rgba(32,120,102,.11);
  --jade: #207866;
  --jade-deep: #155f50;
  --jade-soft: rgba(32,120,102,.11);
  --gold: #9b7620;
  --gold-soft: rgba(155,118,32,.11);
  --sky: #266d92;
  --amber: #a66f17;
  --coral: #b43b47;
  --line: #c5d9d5;
  --line-2: #d4e4e1;
  --bg-2: #e7f2ef;
  --card: #fbfffe;
  --card-2: #f4fbf9;
  --text: #102423;
  --bg-rad1: rgba(47,143,131,.14);
  --bg-rad2: rgba(15,61,62,.08);
  --grain: .025;
  --shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 12px 34px -28px rgba(8,43,44,.38);
  --shadow-lift: 0 20px 48px -30px rgba(8,43,44,.4), 0 8px 22px -18px rgba(32,120,102,.25);
}
html[data-theme="focus"] body {
  background:
    radial-gradient(760px 420px at 14% -12%, rgba(98,199,184,.18), transparent 60%),
    radial-gradient(660px 500px at 100% 0%, rgba(38,109,146,.12), transparent 58%),
    linear-gradient(180deg, #f7fffc 0%, #eef7f5 52%, #e6f1ee 100%);
}
html[data-theme="focus"] .brand-ic,
html[data-theme="focus"] .nav-it.on::before,
html[data-theme="focus"] .me .av {
  background: linear-gradient(135deg, #c7f5ec, #62c7b8 50%, #2f8f83);
}
html[data-theme="focus"] .section-head h2::before {
  color: #207866;
}
html[data-theme="focus"] .today-hero-card,
html[data-theme="focus"] .tab-card,
html[data-theme="focus"] .loan::before {
  background:
    radial-gradient(210px 140px at 86% 16%, rgba(199,245,236,.24), transparent 66%),
    linear-gradient(135deg, #0f3d3e 0%, #207866 58%, #62c7b8 100%);
}
html[data-theme="focus"] .tab-card.cards-hero,
html[data-theme="focus"] .tab-card.people-hero {
  background:
    radial-gradient(210px 140px at 86% 16%, rgba(255,255,255,.18), transparent 66%),
    linear-gradient(135deg, #102423 0%, #266d92 52%, #62c7b8 100%);
}
html[data-theme="focus"] .btn.primary,
html[data-theme="focus"] .paybtn,
html[data-theme="focus"] .mini-pay,
html[data-theme="focus"] .loan .chip.up {
  background: linear-gradient(135deg, #0f3d3e, #207866);
  box-shadow: 0 16px 26px -20px rgba(15,61,62,.62);
}
html[data-theme="focus"] .btn.sec,
html[data-theme="focus"] .mini-remind,
html[data-theme="focus"] .reminder-nudge button,
html[data-theme="focus"] .task-list-head button,
html[data-theme="focus"] .iconbtn,
html[data-theme="focus"] .loan .linkbtn {
  background: #e2efec;
  color: #0f3d3e;
}
html[data-theme="focus"] .mp-donut {
  background: conic-gradient(#207866 var(--paid-angle), #b43b47 0 360deg);
}
html[data-theme="focus"] .tab-chart-ring {
  background: conic-gradient(#fbfffe var(--angle), rgba(255,255,255,.25) 0);
}
html[data-theme="focus"] .bar > i,
html[data-theme="focus"] .nwbar > i.a,
html[data-theme="focus"] .cost-bar > i,
html[data-theme="focus"] .loan > .bar > i {
  background: linear-gradient(90deg, #0f3d3e, #207866, #62c7b8);
}
html[data-theme="focus"] .bottombar,
html[data-theme="focus"] .side {
  background: rgba(245, 255, 252, 0.88) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(197, 217, 213, 0.72) !important;
}
html[data-theme="focus"] .guide-btn {
  background: linear-gradient(135deg, #0f3d3e, #207866);
  box-shadow: 0 14px 22px -16px rgba(15,61,62,.7);
}
html[data-theme="focus"] .help-note {
  background: #e2efec;
  color: #0f3d3e;
}
html[data-theme="focus"] .tsw.on {
  box-shadow: 0 0 0 2px #eef7f5, 0 0 0 4px #207866;
}

@media (max-width: 760px) {
  .topbar > span:last-child {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .guide-btn {
    width: 30px;
    height: 30px;
    border-radius: 11px;
    font-size: 14px;
  }
  .topbar .themes {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-left: 0;
    flex: 0 0 auto;
  }
  .topbar .tsw {
    width: 18px;
    height: 18px;
  }
  .topbar .ghost {
    display: none;
  }
  .asof {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    padding: 7px 9px;
    font-size: 10.5px;
  }
  .help-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   MOBILE NAVIGATION AND LAYOUT CORRECTIONS (FINAL OVERRIDES)
   ========================================================================== */

/* --- Desktop Styles --- */
.side-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 20px;
  border-bottom: 1px dashed var(--side-line);
}
.side-actions .guide-btn {
  margin: 0;
}
.side-actions .themes {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
}
.side-actions .tsw {
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
}
.side-actions .tsw.on {
  box-shadow: 0 0 0 2px var(--cloth);
}
.brand-asof-mobile {
  display: none !important;
}

/* --- Mobile Styles --- */
@media (max-width: 980px) {
  /* Ensure App takes full page height and matches safe area at the top */
  .side {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    width: 100% !important;
    flex: none !important;
    height: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    /* safe area padding top to support layout behind status bar / notch */
    padding: 38px 16px 12px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border-bottom: 1px solid var(--line-2) !important;
    box-shadow: 0 4px 20px -10px rgba(16, 24, 40, 0.06) !important;
  }

  /* Support Sunrise theme background color for header */
  html[data-theme="sunrise"] .side {
    background: rgba(255, 250, 246, 0.85) !important;
    border-bottom-color: rgba(248, 212, 193, 0.5) !important;
  }
  html[data-theme="focus"] .side {
    background: rgba(245, 255, 252, 0.88) !important;
    border-bottom-color: rgba(197, 217, 213, 0.72) !important;
  }

  .brand {
    padding: 0 !important;
    gap: 8px !important;
  }
  .brand b {
    font-size: 16px !important;
  }
  .brand-sub {
    display: none !important;
  }
  .brand-asof-mobile {
    display: block !important;
    font-family: var(--mono) !important;
    font-size: 10px !important;
    color: var(--muted) !important;
    margin-top: 1px !important;
  }

  /* Align top action items (Help ? and Theme Switcher) in a clean horizontal row */
  .side-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }
  .side-actions .guide-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
  }
  .side-actions .themes {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 6px !important;
    background: #f2f6fd !important;
    border-radius: 999px !important;
  }
  html[data-theme="sunrise"] .side-actions .themes {
    background: #fff1e7 !important;
  }
  html[data-theme="focus"] .side-actions .themes {
    background: #e2efec !important;
  }
  .side-actions .tsw {
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    cursor: pointer !important;
  }
  .side-actions .tsw.on {
    box-shadow: 0 0 0 2px var(--cloth) !important;
  }
  html[data-theme="sunrise"] .side-actions .tsw.on {
    box-shadow: 0 0 0 2px #f97316 !important;
  }
  html[data-theme="focus"] .side-actions .tsw.on {
    box-shadow: 0 0 0 2px #207866 !important;
  }

  /* Date Section layout and visibility */
  .topbar {
    display: flex !important;
    position: relative !important;
    top: 0 !important; /* reset stickiness so it flows naturally */
    z-index: 10 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    margin: 12px 0 6px !important;
    padding: 0 16px !important;
    justify-content: center !important;
  }
  .asof {
    background: var(--card) !important;
    border: 1px solid var(--line-2) !important;
    color: var(--muted) !important;
    border-radius: 999px !important;
    padding: 6px 16px !important;
    font-size: 11px !important;
    box-shadow: 0 2px 8px -4px rgba(16, 24, 40, 0.05) !important;
  }
  html[data-theme="sunrise"] .asof {
    background: #fff8f3 !important;
    border-color: rgba(248, 212, 193, 0.4) !important;
  }
  html[data-theme="focus"] .asof {
    background: #fbfffe !important;
    border-color: rgba(197, 217, 213, 0.72) !important;
  }

  /* Glassmorphic Bottom Bar with safe inset bottom */
  .bottombar {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border-top: 1px solid var(--line-2) !important;
    box-shadow: 0 -4px 20px -10px rgba(16, 24, 40, 0.08) !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 12px)) !important;
  }
  html[data-theme="sunrise"] .bottombar {
    background: rgba(255, 250, 246, 0.85) !important;
    border-top-color: rgba(248, 212, 193, 0.5) !important;
  }
  html[data-theme="focus"] .bottombar {
    background: rgba(245, 255, 252, 0.88) !important;
    border-top-color: rgba(197, 217, 213, 0.72) !important;
  }
  .bb-it.on {
    color: var(--cloth) !important;
    background: var(--side-active) !important;
  }
  html[data-theme="sunrise"] .bb-it.on {
    color: #c2410c !important;
    background: #fff1e7 !important;
  }
  html[data-theme="focus"] .bb-it.on {
    color: #0f3d3e !important;
    background: #e2efec !important;
  }
}

/* ============================================================================
   FIRST-RUN APP SETUP
   ========================================================================== */
.launch-panel {
  margin-top: 14px;
}
.launch-status {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 0 2px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.launch-status span {
  color: var(--sky);
}
.launch-card {
  min-height: 248px;
  border-radius: 32px;
  padding: 28px;
  color: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(260px 180px at 86% 16%, rgba(255,255,255,.24), transparent 64%),
    linear-gradient(135deg, #1d4ed8 0%, #2563eb 46%, #12b76a 100%);
  box-shadow: 0 28px 60px -34px rgba(37,99,235,.72);
}
.launch-card::after {
  content: '';
  position: absolute;
  right: -88px;
  bottom: -112px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 32px rgba(255,255,255,.08);
}
.launch-copy {
  position: relative;
  z-index: 1;
  max-width: 560px;
}
.launch-kicker {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.launch-card h1 {
  margin: 12px 0 12px;
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 64px);
  line-height: .96;
  letter-spacing: -.055em;
}
.launch-card p {
  max-width: 510px;
  color: rgba(255,255,255,.84);
  font-size: 14px;
  line-height: 1.55;
}
.launch-meter {
  position: relative;
  z-index: 1;
  width: 108px;
  height: 108px;
  flex: 0 0 108px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  background: rgba(255,255,255,.94);
  color: var(--ink);
}
.launch-meter b {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
}
.launch-meter span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.launch-actions {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.launch-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.launch-tiles button {
  text-align: left;
  border: 1px solid rgba(221,231,243,.92);
  border-radius: 22px;
  padding: 16px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.launch-tiles b {
  display: block;
  color: var(--ink);
  font-size: 14px;
  margin-bottom: 4px;
}
.launch-tiles span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
html[data-theme="sunrise"] .launch-card {
  background:
    radial-gradient(260px 180px at 86% 16%, rgba(255,255,255,.26), transparent 64%),
    linear-gradient(135deg, #e11d48 0%, #f97316 50%, #f59e0b 100%);
}
@media (max-width: 760px) {
  .launch-panel {
    margin-top: 10px;
  }
  .launch-status {
    font-size: 11px;
    padding: 0 2px 9px;
  }
  .launch-card {
    min-height: 286px;
    border-radius: 30px;
    padding: 24px 21px;
    align-items: flex-end;
  }
  .launch-card h1 {
    font-size: 40px;
  }
  .launch-card p {
    font-size: 13px;
  }
  .launch-meter {
    width: 84px;
    height: 84px;
    flex-basis: 84px;
  }
  .launch-meter b {
    font-size: 26px;
  }
  .launch-actions {
    grid-template-columns: 1fr;
  }
  .launch-actions .btn {
    min-height: 48px;
  }
  .launch-tiles {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   LOANS: FOCUS STRIP + DEBT LAB
   ========================================================================== */
.loan-focus-section { margin-top: 28px; }
.focus-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.focus-card {
  min-width: 0; min-height: 132px; text-align: left; border: 1px solid rgba(221,231,243,.92);
  border-radius: 24px; padding: 16px; background: rgba(255,255,255,.92); box-shadow: var(--shadow);
  cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.focus-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.focus-card span { display: block; color: var(--muted); font-size: 12px; font-weight: 900; }
.focus-card b {
  display: block; margin-top: 9px; color: var(--ink); font-family: var(--serif); font-size: 26px;
  line-height: 1.02; letter-spacing: -.055em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.focus-card b .rupee { color: var(--faint); font-size: .62em; }
.focus-card small { display: block; margin-top: 8px; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.focus-card.heavy { background: linear-gradient(145deg, #ffffff, #eff6ff); }
.focus-card.rate { background: linear-gradient(145deg, #ffffff, #fff7ed); }
.focus-card.win { background: linear-gradient(145deg, #ffffff, #ecfdf3); }
.focus-card.cash { background: linear-gradient(145deg, #ffffff, #f8fbff); }
.focus-card.rate b { color: var(--gold); }
.focus-card.win b { color: var(--green); }
.focus-note {
  margin-top: 12px; border: 1px solid rgba(221,231,243,.92); border-radius: 22px; padding: 14px 16px;
  color: var(--ink-2); background: rgba(255,255,255,.72); box-shadow: var(--shadow); font-size: 13px; line-height: 1.55;
}
.focus-note b { color: var(--ink); }

.loan-lab {
  border: 1px solid rgba(221,231,243,.92); border-radius: 30px; padding: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(248,251,255,.76)),
    radial-gradient(260px 160px at 100% 0%, rgba(56,189,248,.14), transparent 70%);
  box-shadow: var(--shadow);
}
.lab-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.lab-top h2 { margin: 0; color: var(--ink); font-family: var(--serif); font-size: 24px; letter-spacing: -.055em; }
.lab-top p { margin-top: 3px; color: var(--muted); font-size: 12.5px; }
.lab-tabs {
  display: inline-flex; gap: 6px; padding: 5px; border-radius: 999px; background: #eef6ff;
  overflow-x: auto; scrollbar-width: none;
}
.lab-tabs::-webkit-scrollbar { display: none; }
.lab-tabs button {
  border: 0; border-radius: 999px; padding: 9px 14px; color: #175cd3; background: transparent;
  font-family: var(--sans); font-size: 12px; font-weight: 900; white-space: nowrap; cursor: pointer;
}
.lab-tabs button.on {
  color: #fff; background: linear-gradient(135deg, #2563eb, #38bdf8);
  box-shadow: 0 12px 22px -18px rgba(37,99,235,.72);
}
.lab-panel { display: none; }
.lab-panel.on { display: block; animation: rise .25s ease both; }
.lab-panel-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 14px; }
.lab-panel-head h3 { margin: 0; color: var(--ink); font-family: var(--serif); font-size: 20px; letter-spacing: -.045em; }
.lab-panel-head span { color: var(--muted); font-size: 12px; }
.lab-assume { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.lab-assume input {
  width: 74px; background: #f8fbff; border: 1px solid var(--line-2); border-radius: 12px; padding: 7px 8px;
  color: var(--green); font-family: var(--mono); font-size: 12px; font-weight: 800; text-align: right;
}
html[data-theme="sunrise"] .focus-card.heavy,
html[data-theme="sunrise"] .focus-card.rate,
html[data-theme="sunrise"] .focus-card.win,
html[data-theme="sunrise"] .focus-card.cash { background: linear-gradient(145deg, #ffffff, #fff8f3); }
html[data-theme="sunrise"] .lab-tabs { background: #fff1e7; }
html[data-theme="sunrise"] .lab-tabs button { color: #c2410c; }
html[data-theme="sunrise"] .lab-tabs button.on { color: #fff; background: linear-gradient(135deg, #e11d48, #f97316); }
html[data-theme="focus"] .focus-card.heavy,
html[data-theme="focus"] .focus-card.rate,
html[data-theme="focus"] .focus-card.win,
html[data-theme="focus"] .focus-card.cash { background: linear-gradient(145deg, #fbfffe, #f0faf7); }
html[data-theme="focus"] .lab-tabs { background: #e2efec; }
html[data-theme="focus"] .lab-tabs button { color: #0f3d3e; }
html[data-theme="focus"] .lab-tabs button.on { color: #fff; background: linear-gradient(135deg, #0f3d3e, #207866); }
@media (max-width: 980px) {
  .focus-strip {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 2px 2px 12px; margin: 0 -2px; scrollbar-width: none;
  }
  .focus-strip::-webkit-scrollbar { display: none; }
  .focus-card { flex: 0 0 74%; scroll-snap-align: start; }
  .lab-top { align-items: flex-start; flex-direction: column; }
  .lab-tabs { width: 100%; }
  .lab-panel-head { align-items: flex-start; flex-direction: column; }
  .lab-panel-head .head-controls { width: 100%; justify-content: space-between; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .loan-lab { margin-left: -2px; margin-right: -2px; padding: 14px; border-radius: 26px; }
  .focus-card { flex-basis: 82%; min-height: 126px; }
  .focus-card b { font-size: 24px; }
  .lab-tabs button { flex: 1; padding-left: 10px; padding-right: 10px; }
}

/* ============================================================================
   APP LOCK — PIN screen
   ========================================================================== */
body.locked { overflow: hidden; }
.lockscreen {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 24px; background:
    radial-gradient(900px 500px at 90% -10%, var(--bg-rad1), transparent 55%),
    radial-gradient(800px 600px at -5% 8%, var(--bg-rad2), transparent 55%),
    var(--paper);
}
.lock-card {
  width: 100%; max-width: 340px; text-align: center;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 20px;
  padding: 32px 26px 28px; box-shadow: var(--shadow-lift);
}
.lock-mark {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 18px;
  background: linear-gradient(155deg, var(--foil-a), var(--foil-b) 55%, var(--foil-c));
  display: grid; place-items: center; font-size: 28px; box-shadow: 0 6px 18px -8px rgba(0,0,0,.35);
}
.lock-card h2 { font-family: var(--serif); font-weight: 600; font-size: 22px; margin-bottom: 6px; color: var(--ink); }
.lock-card #lockMsg { color: var(--muted); font-size: 13.5px; margin-bottom: 22px; min-height: 18px; }
.pin-dots { display: flex; gap: 16px; justify-content: center; margin-bottom: 26px; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); transition: .15s; }
.pin-dot.on { background: var(--foil-b); border-color: var(--foil-b); transform: scale(1.05); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pin-key {
  height: 62px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--paper-2);
  font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--ink); cursor: pointer;
  transition: transform .08s, background .15s; -webkit-tap-highlight-color: transparent;
}
.pin-key:hover { background: var(--panel-2); }
.pin-key:active { transform: scale(.94); }
.pin-key.blank { background: none; border: none; cursor: default; }
.lock-bio { margin-top: 20px; background: none; border: none; color: var(--sky); font-weight: 700; font-size: 13.5px; cursor: pointer; }
@keyframes lockshake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} }
.lock-card.shake { animation: lockshake .4s; }
.lock-status { font-size: 13.5px; color: var(--muted); line-height: 1.5; background: var(--paper-2);
  border: 1px solid var(--line-2); border-radius: 10px; padding: 13px 15px; }
.lock-status.on { color: var(--ink-2); }
.lock-btns { display: flex; gap: 10px; margin-top: 14px; }
.lock-btns .btn { flex: 1; }
.btn.danger { background: var(--red); color: #fff; }

/* ---------- pay-it-off-faster simulator ---------- */
.sim-card { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow); }
.sim-input-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sim-input-row label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.sim-amt { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--green); display: flex; align-items: baseline; }
.sim-amt input { width: 120px; border: none; border-bottom: 2px solid var(--line-2); background: none;
  font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--green); text-align: right;
  font-variant-numeric: tabular-nums; padding: 2px 4px; }
.sim-amt input:focus { outline: none; border-bottom-color: var(--green); }
.sim-range { width: 100%; margin: 4px 0 14px; accent-color: var(--green); height: 6px; cursor: pointer; }
.sim-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.sim-presets button { background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 999px;
  padding: 7px 14px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: .15s; }
.sim-presets button:hover { border-color: var(--green); color: var(--green); }
.sim-presets button.reset { margin-left: auto; color: var(--muted); }
.sim-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.sim-stat { background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 13px 14px; text-align: center; }
.sim-stat.good { background: var(--green-soft); border-color: rgba(35,113,77,.3); }
.ss-k { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.ss-v { font-family: var(--mono); font-size: 18px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; color: var(--ink); }
.sim-stat.good .ss-v { color: var(--green); }
.sim-note { font-size: 13px; line-height: 1.55; color: var(--ink-2); background: var(--gold-soft, var(--paper-2));
  border-radius: 10px; padding: 12px 14px; }
.sim-note b { color: var(--ink); }
@media (max-width: 760px) { .sim-results { grid-template-columns: 1fr; gap: 8px; } .sim-stat { display: flex; justify-content: space-between; align-items: center; text-align: left; } .ss-v { margin-top: 0; } }

/* pay-it-off hero banner (the free avalanche plan) */
.sim-hero { background: linear-gradient(135deg, var(--green-soft), var(--panel)); border: 1px solid rgba(35,113,77,.3);
  border-left: 4px solid var(--green); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 14px; box-shadow: var(--shadow); }
.sim-hero-k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--green); font-weight: 700; }
.sim-hero-v { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--green); margin: 6px 0 6px; font-variant-numeric: tabular-nums; }
.sim-hero-sub { font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.sim-hero-sub b { color: var(--ink); }

/* ---------- milestones & motivation ---------- */
.ms-hero { display: flex; align-items: center; gap: 20px; background: var(--panel); border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); margin-bottom: 14px; }
.ms-ring { --pct: 0; width: 84px; height: 84px; flex: 0 0 auto; border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--pct) * 1%), var(--paper-2) 0);
  display: grid; place-items: center; position: relative; }
.ms-ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--panel); }
.ms-ring span { position: relative; font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--green); }
.ms-ring span i { font-size: 12px; font-style: normal; color: var(--muted); }
.ms-hero-txt { min-width: 0; }
.ms-k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.ms-v { font-family: var(--serif); font-size: 26px; font-weight: 700; margin: 4px 0 6px; letter-spacing: -.01em; color: var(--ink); }
.ms-v small { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--muted); }
.ms-sub { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.ms-sub b { color: var(--ink); }
.ms-badges { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.ms-badges::-webkit-scrollbar { display: none; }
.ms-badge { flex: 0 0 auto; min-width: 92px; text-align: center; background: var(--panel);
  border: 1px solid var(--line-2); border-radius: 12px; padding: 13px 12px; box-shadow: var(--shadow); opacity: .6; }
.ms-badge.done { opacity: 1; border-color: rgba(35,113,77,.4); background: var(--green-soft); }
.ms-badge.next { opacity: 1; border-color: rgba(35,113,77,.35); }
.ms-ico { font-size: 20px; line-height: 1; margin-bottom: 7px; }
.ms-badge.done .ms-ico { color: var(--green); }
.ms-badge.next .ms-ico { color: var(--gold, #9a7112); }
.ms-amt { font-family: var(--mono); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); }
.ms-lab { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 3px; }
@media (max-width: 500px) { .ms-hero { gap: 14px; padding: 16px; } .ms-ring { width: 72px; height: 72px; } .ms-v { font-size: 22px; } }

/* ---------- income & runway ---------- */
.if-card { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); }
.if-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.if-field span { display: block; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; margin-bottom: 7px; }
.if-amt { display: flex; align-items: center; font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 9px; padding: 8px 12px; }
.if-amt.in { color: var(--green); }
.if-amt input { flex: 1; min-width: 0; border: none; background: none; font-family: var(--mono); font-size: 18px; font-weight: 700;
  color: inherit; text-align: right; font-variant-numeric: tabular-nums; padding: 0 0 0 4px; }
.if-amt input:focus { outline: none; }
.if-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 16px; }
.if-cell { background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 8px; text-align: center; }
.if-cell.pos { background: var(--green-soft); border-color: rgba(35,113,77,.3); }
.if-cell.neg { background: var(--red-soft); border-color: rgba(178,58,42,.3); }
.if-k { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.if-v { font-family: var(--mono); font-size: 15px; font-weight: 700; margin-top: 5px; font-variant-numeric: tabular-nums; color: var(--ink); }
.if-cell.pos .if-v { color: var(--green); } .if-cell.neg .if-v { color: var(--red); }
.if-op { font-family: var(--mono); font-size: 16px; color: var(--faint); font-weight: 700; }
.if-note { font-size: 13px; line-height: 1.55; color: var(--ink-2); background: var(--paper-2); border-radius: 10px; padding: 12px 14px; }
.if-note b { color: var(--ink); }
.if-note.good { background: var(--green-soft); }
.if-note.warn { background: var(--red-soft); }
@media (max-width: 560px) {
  .if-inputs { grid-template-columns: 1fr; }
  .if-flow { grid-template-columns: 1fr; gap: 6px; }
  .if-op { transform: rotate(90deg); justify-self: center; }
}

/* ---------- overdraft extras (reuses gold-card styles) ---------- */
.od-usebar { height: 6px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line-2); overflow: hidden; margin: 2px 0 10px; }
.od-usebar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber, #a86412), var(--red)); border-radius: 999px; }
.od-repay { margin-top: 12px; width: 100%; background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 9px;
  padding: 9px; font-family: var(--sans); font-weight: 700; font-size: 12.5px; color: var(--ink-2); cursor: pointer; transition: .15s; }
.od-repay:hover { border-color: var(--green); color: var(--green); background: var(--green-soft); }

/* ---------- unified loan cards: gold/OD as loan cards + NA states ---------- */
.led.gold { background: #c8951a; }
.led.od { background: #6b4fbb; }
.pct.na { color: var(--faint); font-size: 24px; }
.v.na { color: var(--faint); font-weight: 600; }
.bar.na { opacity: .35; }
.track-state.alt-tag { background: var(--paper-2); border: 1px solid var(--line-2); padding: 4px 10px;
  border-radius: 6px; letter-spacing: .06em; font-size: 9.5px; font-weight: 800; }
.track-state.alt-tag.gold { color: #a8770e; }
.track-state.alt-tag.od { color: #6b4fbb; }

/* ==========================================================================
   BANK PASSES — debt at a glance
   Each liability reads like a familiar banking instrument, while the quiet
   tray below keeps only the numbers needed for the next decision.
   ========================================================================== */
.loan.bank-loan {
  padding: 0;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 26px;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
  box-shadow: 0 24px 54px -38px rgba(15, 23, 42, .58), 0 2px 8px rgba(15, 23, 42, .04);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
  animation: bankDealIn .65s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--card-index, 0) * 70ms);
}
.loan.bank-loan::before,
.loan.bank-loan::after { display: none; }
.loan.bank-loan:hover {
  transform: translateY(-7px) rotateX(.6deg);
  border-color: rgba(59, 130, 246, .28);
  box-shadow: 0 38px 74px -42px rgba(15, 23, 42, .62), 0 12px 24px -20px rgba(15, 23, 42, .25);
}
.loan.bank-loan:active { transform: translateY(-2px) scale(.995); }
.loan.bank-loan.closed { opacity: .72; }
.loan.bank-loan.flag { border-color: rgba(220, 38, 38, .4); }

.bank-face {
  --bank-a: #0c4a6e;
  --bank-b: #0f766e;
  --bank-glow: rgba(125, 211, 252, .24);
  position: relative;
  min-height: 218px;
  padding: 20px 21px 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #fff;
  background:
    linear-gradient(118deg, transparent 0 54%, rgba(255,255,255,.055) 54% 55%, transparent 55% 100%),
    linear-gradient(145deg, var(--bank-a), var(--bank-b));
  text-shadow: 0 1px 1px rgba(0,0,0,.14);
}
.bank-face::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(112deg, transparent 0 28px, rgba(255,255,255,.025) 29px 30px),
    linear-gradient(90deg, transparent, var(--bank-glow));
  mix-blend-mode: screen;
}
.bank-face::after {
  content: '';
  position: absolute;
  top: -35%;
  bottom: -35%;
  left: -45%;
  width: 24%;
  pointer-events: none;
  opacity: 0;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
.bank-loan:hover .bank-face::after { animation: bankSheen .8s ease-out both; }
.bank-face.tone-ocean { --bank-a: #082f49; --bank-b: #0369a1; --bank-glow: rgba(125,211,252,.3); }
.bank-face.tone-ink { --bank-a: #0f172a; --bank-b: #334155; --bank-glow: rgba(203,213,225,.18); }
.bank-face.tone-forest { --bank-a: #052e16; --bank-b: #15803d; --bank-glow: rgba(134,239,172,.2); }
.bank-face.tone-ruby { --bank-a: #7f1d1d; --bank-b: #c2410c; --bank-glow: rgba(253,186,116,.23); }
.bank-face.tone-violet { --bank-a: #312e81; --bank-b: #6d28d9; --bank-glow: rgba(196,181,253,.2); }
.bank-face.tone-lagoon { --bank-a: #134e4a; --bank-b: #0e7490; --bank-glow: rgba(103,232,249,.22); }
.bank-gold .bank-face { --bank-a: #713f12; --bank-b: #ca8a04; --bank-glow: rgba(254,240,138,.26); }
.bank-od .bank-face { --bank-a: #3b0764; --bank-b: #7e22ce; --bank-glow: rgba(216,180,254,.22); }
.bank-credit .bank-face { --bank-a: #111827; --bank-b: #1d4ed8; --bank-glow: rgba(147,197,253,.24); }

.bank-topline,
.bank-brand,
.bank-meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}
.bank-topline { justify-content: space-between; gap: 14px; }
.bank-brand { gap: 11px; min-width: 0; }
.bank-monogram {
  width: 40px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.08));
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 8px 20px rgba(0,0,0,.12);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}
.bank-brand > span:last-child { min-width: 0; }
.bank-brand b {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bank-brand small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: rgba(255,255,255,.66);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.bank-state {
  flex: 0 0 auto;
  max-width: 126px;
  overflow: hidden;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.11);
  backdrop-filter: blur(10px);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.bank-balance-label {
  position: relative;
  z-index: 1;
  margin-top: auto;
  color: rgba(255,255,255,.64);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.bank-balance {
  position: relative;
  z-index: 1;
  margin: 5px 0 14px;
  color: #fff;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.bank-balance .rupee { margin-right: 4px; color: rgba(255,255,255,.62); font-size: .62em; font-weight: 600; }
.bank-meta {
  justify-content: space-between;
  gap: 12px;
  color: rgba(255,255,255,.68);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0;
  text-transform: uppercase;
}
.bank-meta b { color: #fff; font-size: 10px; letter-spacing: 0; white-space: nowrap; }
.bank-progress {
  position: relative;
  z-index: 1;
  height: 4px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
}
.bank-progress i {
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: #fff;
  box-shadow: 0 0 18px rgba(255,255,255,.48);
  transform-origin: left center;
  animation: bankProgress .9s .24s cubic-bezier(.16,1,.3,1) both;
}

.bank-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid #e9eef5;
  background: #fff;
}
.bank-stat {
  min-width: 0;
  padding: 14px 15px 13px;
  border-right: 1px solid #e9eef5;
}
.bank-stat:last-child { border-right: 0; }
.bank-stat span {
  display: block;
  overflow: hidden;
  color: #7c8798;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.bank-stat b {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #172033;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bank-stat b .rupee { color: #94a3b8; font-size: .82em; }
.bank-stat.good b { color: #087a55; }
.bank-stat.warn b { color: #b54708; }
.loan.bank-loan .warn-banner {
  margin: 0;
  border-radius: 0;
  padding: 11px 18px;
}
.loan.bank-loan .loan-foot {
  gap: 10px;
  margin: 0;
  padding: 13px 15px 14px;
  border: 0;
  border-radius: 0;
  background: #f8fafc;
}
.loan.bank-loan .loan-foot .nextdue { color: #687386; font-size: 11px; }
.loan.bank-loan .loan-foot .nextdue b { color: #172033; }
.loan.bank-loan .loan-actions { gap: 7px; }
.loan.bank-loan .chip,
.loan.bank-loan .linkbtn,
.loan.bank-loan .iconbtn { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.loan.bank-loan .chip:hover,
.loan.bank-loan .linkbtn:hover,
.loan.bank-loan .iconbtn:hover { transform: translateY(-2px); }
.loan.bank-loan .linkbtn { margin-left: auto; color: #516176; border-color: #dbe4ef; }
.loan.bank-loan:hover .tap-hint { color: #175cd3; }

@keyframes bankDealIn {
  from { opacity: 0; transform: translateY(24px) scale(.975); }
  to { opacity: 1; transform: none; }
}
@keyframes bankProgress {
  from { transform: scaleX(0); opacity: .4; }
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes bankSheen {
  0% { left: -45%; opacity: 0; }
  22% { opacity: .8; }
  100% { left: 125%; opacity: 0; }
}
@keyframes sectionFloatIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.view.active > .section { animation: sectionFloatIn .48s cubic-bezier(.2,.8,.2,1) both; }
.view.active > .section:nth-of-type(2) { animation-delay: 60ms; }
.view.active > .section:nth-of-type(3) { animation-delay: 120ms; }
.view.active > .section:nth-of-type(4) { animation-delay: 180ms; }
button:active { transform: scale(.97); }

@media (max-width: 760px) {
  .loans > .loan.bank-loan { flex-basis: 89%; padding: 0; border-radius: 24px; }
  .bank-face { min-height: 204px; padding: 17px 17px 16px; }
  .bank-balance { margin-bottom: 12px; font-size: 31px; }
  .bank-state { max-width: 106px; }
  .bank-stat { padding: 12px 9px; }
  .bank-stat span { font-size: 8px; }
  .bank-stat b { font-size: 11px; }
  .loan.bank-loan .loan-foot { padding: 12px; }
  .loan.bank-loan .loan-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .loan.bank-loan .loan-actions::-webkit-scrollbar { display: none; }
  .loan.bank-loan .linkbtn { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .loan.bank-loan:hover,
  .loan.bank-loan:active,
  button:active { transform: none !important; }
}

/* ==========================================================================
   LEN-DEN + PORTFOLIO + DEBT SHARE
   Visual ledgers built for scanning and swiping, with the spreadsheet feel
   removed from people and asset tracking.
   ========================================================================== */
#view-people {
  position: relative;
  isolation: isolate;
  padding-bottom: 30px;
}
#view-people::before {
  content: '';
  position: absolute;
  inset: 82px -24px 6px -24px;
  z-index: -1;
  border: 1px solid rgba(216,228,241,.58);
  border-radius: 36px;
  background:
    linear-gradient(90deg, rgba(37,99,235,.045) 1px, transparent 1px) 0 0 / 58px 58px,
    linear-gradient(180deg, rgba(255,255,255,.46), rgba(238,246,255,.58) 42%, rgba(255,255,255,.28));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.ledger-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
  gap: 0;
  margin-bottom: 14px;
  padding: 14px 14px;
  border: 1px solid rgba(216,228,241,.9);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(247,251,255,.72)),
    repeating-linear-gradient(90deg, rgba(37,99,235,.035) 0 1px, transparent 1px 48px);
  box-shadow: 0 18px 42px -34px rgba(15,23,42,.38);
}
.ledger-strip > span { min-width: 0; padding: 0 18px; border-right: 1px solid #dfe8f2; }
.ledger-strip > span:first-child { padding-left: 2px; }
.ledger-strip b {
  display: block;
  overflow: hidden;
  color: #172033;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ledger-strip.receive > span:first-child b { color: #087a55; }
.ledger-strip.repay > span:first-child b { color: #c03645; }
.ledger-strip b .rupee { color: #94a3b8; font-size: .68em; }
.ledger-strip small { display: block; margin-top: 3px; color: #7c8798; font-size: 10px; letter-spacing: 0; }
.rail-controls { display: flex; gap: 7px; padding-left: 14px; }
.rail-controls button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #dbe4ef;
  border-radius: 50%;
  color: #516176;
  background: #fff;
  box-shadow: 0 8px 20px -16px rgba(15,23,42,.4);
  cursor: pointer;
  font-family: var(--serif);
  font-size: 19px;
}
.rail-controls button:hover { color: #175cd3; border-color: #b6cef0; transform: translateY(-2px); }

.khata-rail,
.holding-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 7px 2px 22px;
  scroll-padding: 2px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.khata-rail::-webkit-scrollbar,
.holding-rail::-webkit-scrollbar { display: none; }
.khata-card {
  --khata-color: #0c8a61;
  --khata-soft: rgba(12,138,97,.08);
  flex: 0 0 calc((100% - 28px) / 3);
  min-width: 245px;
  min-height: 334px;
  padding: 20px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(216,228,241,.95);
  border-radius: 26px;
  color: #172033;
  background:
    linear-gradient(145deg, rgba(255,255,255,.98) 0%, rgba(248,252,255,.94) 58%, color-mix(in srgb, var(--khata-color) 7%, white) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 30px 70px -50px rgba(15,23,42,.72),
    0 1px 0 rgba(15,23,42,.03);
  scroll-snap-align: start;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
}
.khata-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--khata-color);
}
.khata-card::after {
  content: '';
  position: absolute;
  inset: 5px 0 auto;
  height: 138px;
  pointer-events: none;
  background:
    linear-gradient(112deg, color-mix(in srgb, var(--khata-color) 9%, transparent) 0 17%, transparent 17% 34%, color-mix(in srgb, var(--khata-color) 5%, transparent) 34% 52%, transparent 52%),
    linear-gradient(180deg, color-mix(in srgb, var(--khata-color) 8%, transparent), transparent);
  opacity: .75;
}
.khata-card > * { position: relative; z-index: 1; }
.khata-card.repay {
  --khata-color: #d04452;
  --khata-soft: rgba(208,68,82,.08);
}
.khata-card:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 38px 78px -48px rgba(15,23,42,.76);
}
.khata-card.done { opacity: .74; }
.khata-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.khata-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: var(--khata-color);
  box-shadow: 0 16px 30px -18px var(--khata-color);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}
.khata-direction {
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--khata-color);
  background: color-mix(in srgb, var(--khata-color) 10%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--khata-color) 9%, white);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.khata-person { margin-top: 18px; min-width: 0; }
.khata-person b { display: block; overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.khata-person small { display: block; margin-top: 3px; overflow: hidden; color: #7c8798; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.khata-origin {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
  padding: 9px 0;
  border-top: 1px solid #edf1f6;
  border-bottom: 1px solid #edf1f6;
  color: #7c8798;
  font-size: 9px;
  text-transform: uppercase;
}
.khata-origin b { overflow: hidden; color: #516176; font-family: var(--mono); font-size: 9px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.khata-balance { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 4px 8px; margin-top: 13px; }
.khata-balance > span { color: #7c8798; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.khata-balance > b { color: var(--khata-color); font-family: var(--serif); font-size: 29px; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.khata-balance > b .rupee { color: #94a3b8; font-size: .66em; }
.khata-balance > small { grid-column: 2; color: #94a3b8; font-family: var(--mono); font-size: 9px; text-align: right; }
.khata-balance > small .rupee { font-size: .85em; }
.khata-progress { height: 6px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: #e9eff6; box-shadow: inset 0 1px 2px rgba(15,23,42,.04); }
.khata-progress i { display: block; height: 100%; border-radius: inherit; background: var(--khata-color); transform-origin: left; animation: bankProgress .8s .16s cubic-bezier(.16,1,.3,1) both; }
.khata-last { display: flex; justify-content: space-between; gap: 10px; margin-top: 11px; color: #7c8798; font-size: 9px; }
.khata-last > span { text-transform: uppercase; }
.khata-last > b { color: #172033; font-family: var(--mono); font-size: 9px; letter-spacing: 0; text-align: right; }
.khata-last > b .rupee { color: #94a3b8; font-size: .84em; }
.khata-last.empty > b { color: #94a3b8; font-weight: 600; }
.khata-amount {
  margin-top: 12px;
  color: var(--khata-color);
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.khata-amount .rupee { color: #94a3b8; font-size: .66em; }
.khata-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(224,233,243,.92); }
.khata-status {
  min-width: 0;
  overflow: hidden;
  padding: 8px 11px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--khata-color);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.khata-tools { display: flex; gap: 6px; flex: 0 0 auto; }
.khata-card .iconbtn,
.holding-card .iconbtn { width: 29px; height: 29px; border-radius: 11px; }
.khata-add {
  align-items: center;
  justify-content: center;
  border: 1px dashed color-mix(in srgb, var(--khata-color) 36%, white);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72);
  cursor: pointer;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(255,255,255,.62), color-mix(in srgb, var(--khata-color) 6%, white)),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--khata-color) 7%, transparent) 0 1px, transparent 1px 15px);
}
.khata-add::before { display: block; height: 5px; background: color-mix(in srgb, var(--khata-color) 52%, white); }
.khata-add > span,
.holding-add > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: var(--khata-color, #1677ff);
  background: rgba(255,255,255,.78);
  box-shadow: 0 16px 30px -24px rgba(15,23,42,.45);
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
}
.khata-add b,
.holding-add b { margin-top: 8px; color: #172033; font-size: 15px; }
.khata-add small,
.holding-add small { margin-top: 4px; color: #7c8798; font-size: 11px; }

.people-hero.net-negative .tab-copy h1,
.people-hero.net-negative .tab-copy h1 .rupee { color: #ffd0d5; }
.people-hero.net-negative .tab-copy p { color: rgba(255,224,226,.9); }

.khata-insights {
  display: grid;
  grid-template-columns: minmax(230px,.85fr) minmax(0,1.5fr);
  gap: 26px;
  padding: 20px;
  border: 1px solid rgba(216,228,241,.94);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,252,255,.86)),
    repeating-linear-gradient(90deg, rgba(37,99,235,.03) 0 1px, transparent 1px 52px);
  box-shadow: 0 22px 56px -42px rgba(15,23,42,.5);
}
.khata-insight-main { padding-left: 17px; border-left: 4px solid #12a879; }
.khata-insights.pressure .khata-insight-main { border-left-color: #d04452; }
.khata-insight-main > span { color: #087a55; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.khata-insights.pressure .khata-insight-main > span { color: #c03645; }
.khata-insight-main p { margin: 7px 0 5px; color: #172033; font-size: 17px; font-weight: 700; line-height: 1.4; }
.khata-insight-main p b { color: #087a55; }
.khata-insights.pressure .khata-insight-main p b { color: #c03645; }
.khata-insight-main p .rupee { color: #94a3b8; font-size: .75em; }
.khata-insight-main small { color: #7c8798; font-size: 11px; line-height: 1.5; }
.khata-insight-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; overflow: hidden; border: 1px solid #e3eaf2; border-radius: 16px; background: #e3eaf2; }
.khata-insight-stats > div { min-width: 0; padding: 13px; background: #fff; }
.khata-insight-stats span { display: block; color: #7c8798; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.khata-insight-stats b { display: block; margin-top: 5px; overflow: hidden; color: #172033; font-family: var(--mono); font-size: 14px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.khata-insight-stats b .rupee { color: #94a3b8; font-size: .82em; }
.khata-insight-stats small { display: block; margin-top: 2px; overflow: hidden; color: #94a3b8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.khata-payment-modal { max-width: 560px; }
.khata-payment-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; overflow: hidden; margin-bottom: 12px; border: 1px solid #e3eaf2; border-radius: 14px; background: #e3eaf2; }
.khata-payment-summary > span { min-width: 0; padding: 12px; background: #f8fafc; }
.khata-payment-summary small { display: block; color: #7c8798; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.khata-payment-summary b { display: block; margin-top: 5px; overflow: hidden; color: #172033; font-family: var(--mono); font-size: 14px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.khata-payment-summary b .rupee { color: #94a3b8; font-size: .82em; }
.khata-payment-summary .remaining b { color: #c03645; }
.khata-payment-summary .complete b { color: #087a55; }
.khata-full-btn { width: 100%; margin-bottom: 14px; padding: 10px 12px; border: 1px solid rgba(18,168,121,.24); border-radius: 11px; color: #087a55; background: #eefbf6; cursor: pointer; font-size: 11px; font-weight: 800; }
.khata-full-btn .rupee { color: #6b9b89; }
.khata-payment-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.khata-history { margin-top: 16px; border-top: 1px solid #e3eaf2; }
.khata-history-title { padding: 12px 0 5px; color: #516176; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.khata-history-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #edf1f6; }
.khata-history-row > span { min-width: 0; }
.khata-history-row b { display: block; color: #172033; font-family: var(--mono); font-size: 13px; letter-spacing: 0; }
.khata-history-row b .rupee { color: #94a3b8; font-size: .82em; }
.khata-history-row small { display: block; margin-top: 2px; overflow: hidden; color: #7c8798; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.khata-history-empty { margin-top: 14px; padding: 12px; border: 1px dashed #dbe4ef; border-radius: 11px; color: #7c8798; font-size: 11px; text-align: center; }

.payment-metric { appearance: none; text-align: left; cursor: pointer; }
.payment-metric small { display: block; margin-top: 5px; color: #175cd3; font-size: 9px; font-weight: 800; }
.payment-metric:hover { transform: translateY(-2px); border-color: #aac8ef; box-shadow: var(--shadow-lift); }
.up-row.payment-focus { position: relative; z-index: 1; animation: paymentFocus 1.8s ease both; }
@keyframes paymentFocus {
  0%,100% { background: transparent; box-shadow: none; }
  18%,72% { background: #fff4dd; box-shadow: inset 4px 0 #f59e0b, 0 8px 26px -20px rgba(180,83,9,.5); }
}

.portfolio-board {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 22px 0 26px;
  border-top: 1px solid #dfe8f2;
  border-bottom: 1px solid #dfe8f2;
}
.portfolio-donut {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--allocation);
  box-shadow: 0 18px 42px -30px rgba(15,23,42,.6);
  animation: donutArrive .7s cubic-bezier(.16,1,.3,1) both;
}
.portfolio-donut::before {
  content: '';
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e6edf5;
}
.portfolio-donut > span { position: relative; z-index: 1; max-width: 130px; text-align: center; }
.portfolio-donut small { display: block; color: #7c8798; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.portfolio-donut b { display: block; margin-top: 5px; overflow: hidden; color: #172033; font-family: var(--serif); font-size: 23px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.portfolio-donut b .rupee { color: #94a3b8; font-size: .7em; }
.allocation-list { min-width: 0; }
.allocation-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.allocation-title b { color: #172033; font-size: 15px; }
.allocation-title span { color: #7c8798; font-size: 11px; }
.allocation-row { display: grid; grid-template-columns: 10px minmax(0,1fr) auto 42px; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid #edf1f6; }
.allocation-row i { width: 9px; height: 9px; border-radius: 3px; }
.allocation-row span { overflow: hidden; color: #516176; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.allocation-row b { color: #172033; font-family: var(--mono); font-size: 12px; letter-spacing: 0; }
.allocation-row b .rupee { color: #94a3b8; font-size: .82em; }
.allocation-row small { color: #7c8798; font-family: var(--mono); font-size: 10px; text-align: right; }
.allocation-empty { padding: 30px 0; color: #7c8798; font-size: 12px; }
.holding-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 22px 0 12px; }
.holding-rail-head > div:first-child b { display: block; color: #172033; font-size: 16px; }
.holding-rail-head > div:first-child span { display: block; margin-top: 2px; color: #7c8798; font-size: 11px; }
.holding-card {
  --holding-color: #1677ff;
  flex: 0 0 calc((100% - 28px) / 3);
  min-width: 245px;
  min-height: 210px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  border: 1px solid #dfe8f2;
  border-radius: 22px;
  color: #172033;
  background: #fff;
  box-shadow: 0 24px 54px -42px rgba(15,23,42,.58);
  scroll-snap-align: start;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
}
.holding-card:hover { transform: translateY(-5px); box-shadow: 0 32px 60px -42px rgba(15,23,42,.62); }
.holding-top { display: flex; align-items: center; gap: 9px; color: #7c8798; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.holding-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--holding-color); font-family: var(--mono); font-size: 9px; letter-spacing: 0; }
.holding-name { margin-top: 18px; overflow: hidden; color: #516176; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.holding-value { margin-top: 5px; color: #172033; font-family: var(--serif); font-size: 28px; font-weight: 700; letter-spacing: 0; }
.holding-value .rupee { color: #94a3b8; font-size: .68em; }
.holding-share { height: 5px; margin-top: 15px; overflow: hidden; border-radius: 999px; background: #edf1f6; }
.holding-share i { display: block; height: 100%; border-radius: inherit; background: var(--holding-color); animation: bankProgress .8s .18s cubic-bezier(.16,1,.3,1) both; transform-origin: left; }
.holding-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 13px; color: #7c8798; font-size: 10px; }
.holding-add { align-items: center; justify-content: center; border-style: dashed; box-shadow: none; cursor: pointer; text-align: center; }
.holding-add > span { color: #1677ff; }

.debt-mix-card { margin-top: 14px; padding: 20px 0 4px; border-top: 1px solid #dfe8f2; }
.debt-mix-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.debt-mix-head span { display: block; color: #175cd3; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.debt-mix-head b { display: block; margin-top: 3px; color: #172033; font-size: 16px; }
.debt-mix-head > small { color: #7c8798; font-size: 11px; }
.debt-mix-body { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 24px; align-items: center; margin-top: 18px; }
.debt-mix-donut {
  width: 174px;
  height: 174px;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 50%;
  background: var(--debt-mix);
  animation: donutArrive .7s cubic-bezier(.16,1,.3,1) both;
}
.debt-mix-donut::before { content: ''; position: absolute; inset: 23px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #e6edf5; }
.debt-mix-donut span { position: relative; z-index: 1; text-align: center; }
.debt-mix-donut b { display: block; color: #172033; font-family: var(--serif); font-size: 28px; letter-spacing: 0; }
.debt-mix-donut small { display: block; color: #7c8798; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.debt-mix-row { display: grid; grid-template-columns: 10px minmax(0,1fr) auto 38px; gap: 9px; align-items: center; padding: 8px 0; border-top: 1px solid #edf1f6; }
.debt-mix-row:first-child { border-top: 0; }
.debt-mix-row i { width: 9px; height: 9px; border-radius: 3px; }
.debt-mix-row span { overflow: hidden; color: #516176; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.debt-mix-row b { color: #172033; font-family: var(--mono); font-size: 11px; letter-spacing: 0; }
.debt-mix-row b .rupee { color: #94a3b8; font-size: .82em; }
.debt-mix-row small { color: #7c8798; font-family: var(--mono); font-size: 9px; text-align: right; }
.debt-mix-note { margin-top: 12px; padding: 11px 13px; border-left: 3px solid #1677ff; color: #516176; background: #f5f9ff; font-size: 12px; line-height: 1.45; }
.debt-mix-note b { color: #172033; }

.sim-hero-v { display: flex; align-items: baseline; gap: 9px; }
.sim-hero-v span { color: var(--green); }
.sim-hero-v small { color: var(--muted); font-family: var(--sans); font-size: 12px; font-weight: 800; }
.sim-hero-time { display: flex; align-items: center; gap: 9px; margin-top: 6px; }
.sim-hero-time b { color: var(--ink); font-size: 13px; }
.sim-hero-time span { color: var(--red); font-size: 11px; font-weight: 800; }
.avalanche-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 15px; }
.avalanche-steps > div { display: flex; gap: 9px; align-items: flex-start; padding-top: 11px; border-top: 1px solid rgba(35,113,77,.18); }
.avalanche-steps i { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-family: var(--mono); font-size: 9px; font-style: normal; font-weight: 800; }
.avalanche-steps span { color: var(--ink-2); font-size: 11px; line-height: 1.45; }

@keyframes donutArrive {
  from { opacity: 0; transform: scale(.82) rotate(-18deg); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  #view-people::before { inset: 62px -10px 4px -10px; border-radius: 26px; }
  .ledger-strip { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ledger-strip > span { padding: 0 9px; }
  .ledger-strip b { font-size: 16px; }
  .ledger-strip small { font-size: 8px; line-height: 1.3; }
  .ledger-strip .rail-controls { display: none; }
  .khata-card,
  .holding-card { flex-basis: 84%; min-width: 0; }
  .khata-card { min-height: 336px; }
  .khata-insights { grid-template-columns: 1fr; gap: 18px; }
  .khata-payment-fields { grid-template-columns: 1fr; gap: 0; }
  .khata-payment-summary b { font-size: 11px; }
  .portfolio-board { grid-template-columns: 1fr; gap: 20px; padding-top: 16px; }
  .portfolio-donut { width: 178px; height: 178px; }
  .holding-rail-head .rail-controls { display: none; }
  .debt-mix-body { grid-template-columns: 1fr; justify-items: center; }
  .debt-mix-list { width: 100%; }
  .avalanche-steps { grid-template-columns: 1fr; gap: 4px; }
  .sim-hero-time { align-items: flex-start; flex-direction: column; gap: 2px; }
}
/* add-buttons row: its own grid BELOW the loan cards (not inside the mobile carousel) */
.add-row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.add-row-4:empty { display: none; }
@media (max-width: 980px) { .add-row-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .add-row-4 .list-card.add { min-height: 118px; } }

/* ============================================================================
   COMPACT LOAN/GOLD/OD/CARD SUMMARY CARDS  +  DETAIL MODAL
   ========================================================================== */
.lc { background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; padding: 16px 18px;
  box-shadow: var(--shadow); cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.lc:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--line); }
.lc:active { transform: translateY(0); }
.lc.done { opacity: .6; }
.lc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lc-name { font-weight: 700; font-size: 15.5px; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lc-name .led { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.lc-name small { flex-basis: 100%; margin-left: 17px; color: var(--faint); font-weight: 500; font-size: 11.5px; font-family: var(--mono); }
.lc-tag { font-family: var(--mono); font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--green); background: var(--green-soft); border-radius: 6px; padding: 4px 9px; white-space: nowrap; }
.lc-tag.muted { color: var(--muted); background: var(--paper-2); }
.lc-tag.warn { color: var(--red); background: var(--red-soft); }
.lc-tag.alt { color: var(--ink-2); background: var(--paper-2); }
.lc-big { font-family: var(--serif); font-size: 27px; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
  margin-top: 12px; font-variant-numeric: tabular-nums; }
.lc-big small { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 7px; letter-spacing: 0; }
.lc-bar { height: 6px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line-2); overflow: hidden; margin-top: 11px; }
.lc-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--jade-deep), var(--green)); }
.lc-bot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; }
.lc-foot { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.lc-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.lc-chip { font-family: var(--mono); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 5px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.lc-chip.up { color: var(--red); background: var(--red-soft); border: 1px solid rgba(178,58,42,.3); }
.lc-chip.paid { color: var(--green); background: var(--green-soft); border: 1px solid rgba(35,113,77,.3); }
.lc-more { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; }
.led.card { background: #3b5bdb; }

/* detail modal: reuse the full .loan layout, but frameless inside the modal */
#detailModal { z-index: 48; }
.detail-modal { max-width: 520px; position: relative; }
.detail-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--paper-2); color: var(--muted); cursor: pointer; font-size: 13px; }
.detail-close:hover { color: var(--ink); border-color: var(--ink-2); }
.detail-modal .loan { border: none; box-shadow: none; padding: 4px 0 0; background: none; }
.detail-modal .loan:hover { transform: none; box-shadow: none; }

/* ---------- detailed cards: tappable + actions row + schedule popup ---------- */
.loan.tappable { cursor: pointer; }
.loan-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tap-hint { pointer-events: none; color: var(--faint); font-family: var(--mono); font-size: 11.5px; margin-left: auto; }
.loan.tappable:hover .tap-hint { color: var(--green); }
.sched-pop-title { font-family: var(--serif); font-size: 21px; font-weight: 700; margin-bottom: 16px; }
.sched-pop-title small { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--faint); font-weight: 500; margin-top: 4px; }
.sched-sec { margin-top: 16px; }
.sched-sec:first-of-type { margin-top: 0; }

/* loan-foot: date on its own line, actions below (prevents vertical word-wrap) */
.loan .loan-foot { display: flex !important; flex-direction: column; align-items: stretch; gap: 12px; grid-template-columns: none !important; }
.loan .loan-foot .nextdue { width: 100%; white-space: normal; }
.loan .loan-actions { width: 100%; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* clear-all warning + collapsible payment history in schedule popup */
.clear-warn { background: var(--red-soft); border: 1px solid rgba(178,58,42,.35); color: var(--red-deep);
  border-radius: 10px; padding: 12px 14px; font-size: 13px; font-weight: 600; line-height: 1.5; margin-bottom: 4px; }
.hist-details { margin-top: 16px; border-top: 1px solid var(--line-2); padding-top: 12px; }
.hist-details > summary { cursor: pointer; font-family: var(--mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted); list-style: none; padding: 4px 0; }
.hist-details > summary::-webkit-details-marker { display: none; }
.hist-details > summary::before { content: '▸ '; color: var(--faint); }
.hist-details[open] > summary::before { content: '▾ '; }
.hist-details > summary:hover { color: var(--ink); }