*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none !important}

:root{
  --paper:#F5F7F9; --surface:#FFFFFF; --surface-2:#EDF0F4; --surface-3:#E2E7ED;
  --ink:#111720; --ink-2:#4A5563; --ink-3:#79838F;
  --rule:#DDE2E8; --rule-2:#C2C9D3;
  --accent:#27548A; --x-soft:#E3EBF5;
  --accent-2:#A15C1E; --y-soft:#F7EBDC;
  --debit:#9E2A2B; --credit:#136F63;
  --focus:#27548A; --on-accent:#FFFFFF;
  color-scheme:light;
  --shadow-1:0 1px 2px rgba(17,23,32,.06);
  --shadow-2:0 2px 4px rgba(17,23,32,.05), 0 12px 32px -14px rgba(17,23,32,.24);
  --shadow-3:0 8px 20px -6px rgba(17,23,32,.18), 0 32px 64px -24px rgba(17,23,32,.35);
  --f-display:"Zilla Slab", Georgia, "Times New Roman", serif;
  --f-sans:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0D1116; --surface:#151B23; --surface-2:#1D2530; --surface-3:#27313D;
    --ink:#E8EDF3; --ink-2:#A7B2C0; --ink-3:#7C8899;
    --rule:#28313D; --rule-2:#3C4753;
    --accent:#8DB2E4; --x-soft:#1B2B41;
    --accent-2:#E0A264; --y-soft:#382718;
    --debit:#EE8B8B; --credit:#59C4AC;
    --focus:#8DB2E4; --on-accent:#0D1116;
  color-scheme:dark;
    color-scheme:dark;
    --shadow-1:0 1px 2px rgba(0,0,0,.45);
    --shadow-2:0 2px 4px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.7);
    --shadow-3:0 8px 20px -6px rgba(0,0,0,.5), 0 32px 64px -24px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#0D1116; --surface:#151B23; --surface-2:#1D2530; --surface-3:#27313D;
  --ink:#E8EDF3; --ink-2:#A7B2C0; --ink-3:#7C8899;
  --rule:#28313D; --rule-2:#3C4753;
  --accent:#8DB2E4; --x-soft:#1B2B41;
  --accent-2:#E0A264; --y-soft:#382718;
  --debit:#EE8B8B; --credit:#59C4AC;
  --focus:#8DB2E4; --on-accent:#0D1116;
  --shadow-1:0 1px 2px rgba(0,0,0,.45);
  --shadow-2:0 2px 4px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.7);
  --shadow-3:0 8px 20px -6px rgba(0,0,0,.5), 0 32px 64px -24px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--f-sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--f-display); font-weight:600; text-wrap:balance; margin:0}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}
.lbl{font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}

.login-screen{min-height:100vh; min-height:100dvh; display:flex; align-items:center;
  justify-content:center; padding:24px; background:var(--paper)}
.login-card{width:100%; max-width:340px; background:var(--surface); border:1px solid var(--rule);
  border-radius:14px; padding:30px 28px 26px; box-shadow:var(--shadow-2);
  display:flex; flex-direction:column; gap:15px}
.login-card .lock{width:30px; height:30px; color:var(--ink-3); align-self:center; margin-bottom:2px}
.login-card .form-msg{margin:0; min-height:1em}
.field{display:flex; flex-direction:column; gap:5px; min-width:0}
input[type="password"]{font:inherit; font-size:16px; padding:9px 11px; width:100%;
  background:var(--paper); color:var(--ink); border:1px solid var(--rule-2); border-radius:8px}
.form-msg{font-size:12.5px; color:var(--debit); font-weight:500}
.btn{font:inherit; font-size:13.5px; font-weight:600; padding:11px 18px; border-radius:8px;
  border:1px solid transparent; cursor:pointer; width:100%}
.btn-primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent); box-shadow:var(--shadow-1)}
.btn-primary:hover{filter:brightness(1.09)}
.btn-primary:disabled{opacity:.6; cursor:default}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}