:root { --ink:#16202c; --muted:#5f6b7a; --line:#e2e8f0; --bg:#f4f6fa; --brand:#12207b; color-scheme: light; }
* { box-sizing: border-box; }
/* `hidden` is only display:none in the UA sheet, so .layout's display:grid would beat it. */
[hidden] { display:none !important; }
body { margin:0; font:15px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--ink); }
.topbar { display:flex; align-items:center; gap:24px; padding:14px 24px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.brand { font-weight:700; color:var(--brand); font-size:18px; }
.nav { display:flex; gap:4px; margin-left:12px; }
.nav-item { padding:8px 14px; border-radius:8px; color:var(--muted); text-decoration:none; font-weight:500; }
.nav-item.active { background:#eef2ff; color:var(--brand); }
.account { margin-left:auto; position:relative; }
.account-menu { position:absolute; right:0; top:calc(100% + 8px); min-width:230px; padding:6px;
  background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 28px rgba(0,0,0,.14); z-index:20; }
.account-menu[hidden] { display:none; }
.account-menu .group { padding:7px 10px 4px; font-size:10px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted); }
.account-menu button { display:block; width:100%; text-align:left; padding:8px 10px; border:0; border-radius:7px;
  background:none; font:inherit; color:inherit; cursor:pointer; }
.account-menu button:hover { background:#f3f4f6; }
.account-menu button .who { display:block; font-weight:600; }
.account-menu button .what { display:block; font-size:11px; color:var(--muted); }
.account-menu .sep { height:1px; margin:6px 4px; background:var(--line); }
.avatar { margin-left:0; width:34px; height:34px; border-radius:50%; background:var(--brand); color:#fff; border:0; font-size:13px; font-weight:600; cursor:pointer; }
.layout { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; padding:24px; max-width:1100px; margin:0 auto 90px; }
.panel { background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; }
.balance-card { background:linear-gradient(135deg,#12207b,#3b6fd4); color:#fff; border-radius:12px; padding:20px; display:grid; gap:4px; }
.balance-card .label { font-size:13px; opacity:.85; }
.balance-card .amount { font-size:30px; font-weight:700; }
.balance-card .sub { font-size:13px; opacity:.9; }
.section-title { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:22px 0 10px; }
.accounts, .txns { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.accounts li, .txns li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px; border-radius:10px; }
.accounts li:nth-child(odd), .txns li:nth-child(odd) { background:#f8fafc; }
.accounts small { display:block; color:var(--muted); font-size:12px; }
.accounts span, .txns span:last-child { font-variant-numeric:tabular-nums; font-weight:600; }
.txns .pos { color:#15803d; }
.row { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
button { font:inherit; border-radius:9px; padding:10px 16px; cursor:pointer; border:1px solid transparent; }
button.primary { background:var(--brand); color:#fff; font-weight:600; }
button.ghost { background:#fff; border-color:var(--line); color:var(--ink); }
button.wide { width:100%; margin-top:4px; }
.field { display:grid; gap:6px; margin-bottom:14px; }
.field span { font-size:13px; color:var(--muted); font-weight:500; }
.field input, .field select { font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.devbar { position:fixed; left:0; right:0; bottom:0; background:#101826; color:#e6edf6; padding:10px 20px; display:flex; align-items:center; gap:12px; font-size:12px; font-family:ui-monospace,Menlo,monospace; }
.devbar strong { text-transform:uppercase; letter-spacing:.08em; color:#93a4bb; font-size:11px; }
.devbar .spacer { margin-left:auto; }
#jb-state { color:#8fd3a0; }
#jb-config { color:#7fb3ff; }
.nav-item { cursor:pointer; }
.wide-panel { grid-column:1 / -1; }
.insight { background:#f8fafc; border:1px solid var(--line); border-radius:12px; padding:18px; display:grid; gap:4px; }
.insight .label { font-size:13px; color:var(--muted); }
.insight .amount { font-size:26px; font-weight:700; }
.insight .sub { font-size:13px; color:#15803d; }
.row select, .row input[type=text] { font:inherit; padding:9px 12px; border:1px solid var(--line); border-radius:9px; background:#fff; }
#jb-screen { color:#f0c674; font-weight:600; }
.devbar-link { color:#7fb3ff; text-decoration:underline; margin-left:16px; }

/* Signed out there is nowhere to navigate to, and no avatar to open. */
body.signed-out .nav, body.signed-out .account { display:none; }

/* Sign in */
.signin { display:grid; place-items:center; padding:56px 24px 90px; }
.signin-card { width:100%; max-width:420px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:28px; }
.signin-card h1 { margin:0 0 6px; font-size:20px; }
.signin-sub { margin:0 0 20px; color:var(--muted); font-size:13px; }
.signin-people { display:grid; gap:8px; }
.signin-person { display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; text-align:left;
  background:#fff; border:1px solid var(--line); border-radius:10px; font:inherit; color:inherit; cursor:pointer; }
.signin-person:hover { border-color:var(--brand); background:#f8faff; }
.signin-person .mark { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:50%;
  background:var(--brand); color:#fff; font-size:12px; font-weight:600; }
.signin-person .who { display:block; font-weight:600; }
.signin-person .what { display:block; font-size:12px; color:var(--muted); }
.signin-or { display:flex; align-items:center; gap:10px; margin:18px 0; color:var(--muted); font-size:12px; }
.signin-or::before, .signin-or::after { content:""; flex:1; height:1px; background:var(--line); }
.signin-custom { display:grid; gap:6px; }
.signin-custom label { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.signin-custom input, .signin-custom select { font:inherit; padding:9px 10px; border:1px solid var(--line); border-radius:8px; }
.signin-go { margin-top:10px; padding:10px; border:0; border-radius:8px; background:var(--brand); color:#fff;
  font:inherit; font-weight:600; cursor:pointer; }
.signin-go:disabled { opacity:.5; cursor:not-allowed; }