/* Monza Bank — online banking. Mobile-first; no framework, no web fonts.
   System fonts are deliberate: a bank's login screen should not wait on, or
   leak a request to, a third-party font host. */

:root{
  --paper:#F4F6F9; --surface:#FFFFFF; --ink:#111C2E; --muted:#5B6678;
  --hairline:#DCE2EA; --navy:#1C3357; --navy-soft:#2A4776; --gold:#8F7028;
  --ok:#1F6B48; --bad:#9B2C2C; --tint:#EDF1F6;
  --radius:12px;
  --shadow:0 1px 2px rgba(17,28,46,.05), 0 10px 24px -16px rgba(17,28,46,.30);
  --safe-b:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0C1320; --surface:#141D2C; --ink:#E6EBF3; --muted:#94A1B5;
    --hairline:#25314A; --navy:#8FADD8; --navy-soft:#A9C2E4; --gold:#D3AF62;
    --ok:#67BE92; --bad:#E08585; --tint:#1A2333;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 24px -16px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink); min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important}

.wordmark{
  font-weight:700; letter-spacing:.22em; color:var(--navy); font-size:1.35rem;
}

/* ---------------------------------------------------------------- boot --- */
.boot{
  position:fixed; inset:0; display:grid; place-items:center; background:var(--paper);
}

/* --------------------------------------------------------------- login --- */
.login{ min-height:100vh; display:grid; place-items:center; padding:1.5rem; }
.login-card{
  width:100%; max-width:23rem; background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:2rem 1.5rem;
  text-align:center;
}
.tagline{ margin:.35rem 0 1.75rem; color:var(--muted); font-size:.9rem;
  letter-spacing:.04em; text-transform:uppercase; }

/* ---------------------------------------------------------------- form --- */
form{ text-align:left; display:flex; flex-direction:column; gap:.3rem; }
label{
  font-size:.78rem; font-weight:600; color:var(--muted);
  letter-spacing:.05em; text-transform:uppercase; margin-top:.85rem;
}
.optional{ text-transform:none; letter-spacing:0; font-weight:400; }
input,select{
  font:inherit; color:var(--ink); background:var(--surface);
  border:1px solid var(--hairline); border-radius:8px; padding:.7rem .75rem; width:100%;
}
input:focus-visible,select:focus-visible,button:focus-visible{
  outline:2px solid var(--navy); outline-offset:2px;
}
button{ font:inherit; cursor:pointer; border-radius:8px; }
.primary{
  margin-top:1.4rem; background:var(--navy); color:#fff; border:1px solid var(--navy);
  padding:.8rem 1rem; font-weight:600;
}
.secondary{
  margin-top:1.2rem; background:transparent; color:var(--navy);
  border:1px solid var(--navy); padding:.7rem 1rem; font-weight:600;
}
.primary[disabled],.secondary[disabled]{ opacity:.55; cursor:default; }
.linkish{
  margin-top:1.1rem; background:none; border:none; color:var(--navy);
  text-decoration:underline; font-size:.9rem; padding:.4rem;
}

.error,.success{
  margin:.9rem 0 0; padding:.6rem .75rem; border-radius:8px; font-size:.9rem;
}
.error{ background:color-mix(in srgb, var(--bad) 12%, transparent); color:var(--bad); }
.success{ background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok); }

/* -------------------------------------------------------------- shell --- */
.topbar{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:.5rem;
  background:var(--navy); color:#fff; padding:.8rem 1rem;
}
.topbar-title{ font-weight:600; flex:1; text-align:center; }
.iconbtn{
  background:transparent; border:none; color:#fff; font-size:.88rem; padding:.35rem .5rem;
}
.content{ padding:1.1rem 1rem calc(5.5rem + var(--safe-b)); max-width:40rem; margin:0 auto; }
.greeting{ margin:0 0 1rem; color:var(--muted); font-size:.92rem; }
.section-title{ font-size:.78rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--muted); margin:1.8rem 0 .7rem; }
.muted{ color:var(--muted); font-size:.9rem; }
.empty{
  color:var(--muted); background:var(--tint); border-radius:var(--radius);
  padding:1.1rem; text-align:center; font-size:.92rem;
}

/* -------------------------------------------------------------- cards --- */
.cards{ display:flex; flex-direction:column; gap:.8rem; }
.acct{
  display:block; width:100%; text-align:left; background:var(--surface);
  border:1px solid var(--hairline); border-radius:var(--radius); padding:1rem;
  box-shadow:var(--shadow);
}
.acct-top{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.acct-name{ font-weight:600; }
.acct-no{ font-variant-numeric:tabular-nums; color:var(--muted); font-size:.82rem;
  letter-spacing:.02em; }
.acct-bal{ font-size:1.35rem; font-weight:600; font-variant-numeric:tabular-nums;
  margin-top:.5rem; }
.pill{
  font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.15rem .45rem; border-radius:999px; border:1px solid currentColor; white-space:nowrap;
}
.pill.active{ color:var(--ok); } .pill.other{ color:var(--muted); }

/* ------------------------------------------------------------- account --- */
.balance-block{
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:1.2rem; box-shadow:var(--shadow);
}
.balance-block .label{ margin:0; color:var(--muted); font-size:.85rem; }
.balance{ margin:.3rem 0 .2rem; font-size:2rem; font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.balance-block .muted{ margin:0; font-variant-numeric:tabular-nums; }

.facts{ margin:1.2rem 0 0; display:grid; grid-template-columns:1fr auto; gap:.55rem 1rem; }
.facts dt{ color:var(--muted); font-size:.88rem; }
.facts dd{ margin:0; text-align:right; font-size:.92rem; font-variant-numeric:tabular-nums; }

.txn{
  display:grid; grid-template-columns:1fr auto; gap:.2rem 1rem;
  padding:.8rem 0; border-bottom:1px solid var(--hairline);
}
.txn:last-child{ border-bottom:none }
.txn-type{ font-weight:600; font-size:.95rem; }
.txn-date{ color:var(--muted); font-size:.82rem; }
.txn-amt{ font-variant-numeric:tabular-nums; font-weight:600; text-align:right; }
.txn-amt.in{ color:var(--ok) } .txn-amt.out{ color:var(--ink) }
.txn-run{ color:var(--muted); font-size:.82rem; text-align:right;
  font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------- tabbar --- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; display:flex;
  background:var(--surface); border-top:1px solid var(--hairline);
  padding-bottom:var(--safe-b);
}
.tab{
  flex:1; background:none; border:none; border-radius:0; padding:.85rem .5rem;
  color:var(--muted); font-size:.8rem; font-weight:600;
}
.tab.is-active{ color:var(--navy); box-shadow:inset 0 2px 0 var(--navy); }

/* ---------------------------------------------------------------- busy --- */
.busy{ position:fixed; inset:0; display:grid; place-items:center;
  background:color-mix(in srgb, var(--paper) 65%, transparent); z-index:20; }
.spinner{
  width:2rem; height:2rem; border-radius:50%;
  border:3px solid var(--hairline); border-top-color:var(--navy);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .spinner{ animation-duration:2.4s } }

@media (min-width:40rem){
  .cards{ display:grid; grid-template-columns:repeat(2,1fr); }
}