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

:root{
  --bg:#FAFAF8; --surface:#F1F0EA; --ink:#16231F; --ink-soft:#4A5550; --ink-faint:#8B958F;
  --gold:#A9824C; --sage:#7C8F7A; --line:#DEDCD3; --negative:#A8442E;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{ font-family:'Inter', sans-serif; background:var(--bg); color:var(--ink); max-width:480px; margin:0 auto; padding-bottom:90px; }
.serif{ font-family:'Fraunces', serif; font-weight:500; line-height:1.1; }
.hero-number{ font-size:40px; margin-top:4px; }
.eyebrow{ font-size:13px; color:var(--ink-soft); margin-bottom:4px; }
.muted{ color:var(--ink-soft); font-size:14px; }
.faint{ color:var(--ink-faint); font-size:12px; line-height:1.5; }
.divider{ height:1px; background:var(--line); margin:20px 0; }

.topbar{ display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-bottom:1px solid var(--line); }
.brand{ font-family:'Fraunces', serif; font-weight:600; font-size:18px; }
.screen-content{ padding:24px; }

.bottom-nav{ position:fixed; bottom:0; left:0; right:0; max-width:480px; margin:0 auto; display:flex; background:var(--bg); border-top:1px solid var(--line); }
.bottom-nav a{ flex:1; text-align:center; padding:14px 0; font-size:12px; color:var(--ink-faint); text-decoration:none; }
.bottom-nav a.active{ color:var(--ink); font-weight:600; }

.btn-primary, .btn-secondary{ display:block; width:100%; text-align:center; padding:14px 16px; border-radius:8px; font-weight:600; font-size:14px; border:none; cursor:pointer; text-decoration:none; margin-top:18px; }
.btn-primary{ background:var(--ink); color:var(--bg); }
.btn-secondary{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-text{ background:none; border:none; color:var(--ink); font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

form label{ display:block; font-size:13px; color:var(--ink-soft); margin-top:14px; }
form input{ display:block; width:100%; padding:12px; margin-top:6px; border:1px solid var(--line); border-radius:8px; font-family:'Inter',sans-serif; font-size:14px; background:var(--bg); color:var(--ink); }

.chip-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.chip{ border:1px solid var(--line); border-radius:8px; padding:14px 12px; display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
.chip input{ width:auto; margin:0; }

.code-box{ border:1px solid var(--line); border-radius:8px; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:14px; font-weight:600; word-break:break-all; }

.stat-row{ display:flex; gap:24px; margin-top:16px; }
.stat b{ display:block; font-size:16px; }
.stat span{ font-size:12px; color:var(--ink-faint); }

.list-row{ display:flex; justify-content:space-between; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.list-row:last-child{ border-bottom:none; }
.name{ font-size:14px; font-weight:600; }
.sub{ font-size:12px; color:var(--ink-faint); margin-top:2px; }
.amt{ font-size:14px; font-weight:600; }
.amt.pos{ color:var(--sage); }
.amt.neg{ color:var(--negative); }
.tag{ font-size:10.5px; padding:2px 8px; border-radius:20px; border:1px solid var(--line); color:var(--ink-soft); height:fit-content; }

.auth-card{ max-width:400px; margin:60px auto; padding:32px 24px; }
.auth-card h1{ font-family:'Fraunces', serif; font-size:24px; font-weight:500; margin-bottom:20px; }
.error{ color:var(--negative); font-size:13px; margin-top:12px; }
.hint{ color:var(--ink-soft); font-size:13px; margin-top:16px; }