@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#f4f5f2; --surface:#fff; --ink:#201e1d; --ink-panel:#181716;
  --accent:#2036c9; --accent-hover:#1a2da8; --accent-deep:#142285;
  --accent-tint:#eceefb; --accent-on-dark:#7d90ff;
  --danger:#c0230b; --danger-tint:#fdeae6; --success:#155c3c; --success-tint:#e6f0ea;
  --muted:rgba(32,30,29,.6); --muted-2:rgba(32,30,29,.5);
  --divider:rgba(32,30,29,.4); --hair:rgba(32,30,29,.16);
  --mono:"IBM Plex Mono",ui-monospace,monospace; --sans:"Archivo",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55}
a{color:var(--accent);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--sans);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0}
img{display:block;max-width:100%}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--accent) 26%,transparent)}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.hidden{display:none}
.right{text-align:right}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* kicker + page title */
.kicker{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.kicker.danger{color:var(--danger)}
.page-title{font-size:27px;font-weight:800;letter-spacing:-.025em;margin:0}
.hero-title{font-size:34px;font-weight:800;letter-spacing:-.025em;margin:0 0 8px}
.lead{color:var(--muted);margin:0 0 24px;max-width:520px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;height:42px;padding:0 16px;font-family:var(--sans);font-weight:800;font-size:14px;line-height:1;cursor:pointer;border:2px solid transparent;border-radius:0;text-decoration:none;background:transparent;color:var(--ink)}
.btn svg{display:block}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-pri{background:var(--accent);color:#fff}
.btn-pri:hover{background:var(--accent-hover)}
.btn-pri:active{background:var(--accent-deep)}
.btn-sec{border-color:var(--divider);color:var(--ink)}
.btn-sec:hover{background:rgba(32,30,29,.06)}
.btn-red{background:var(--danger);color:#fff}
.btn-ghost{color:var(--accent);border:0;padding:0 4px;background:none}
.btn-ghost:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.btn-sm{height:34px;padding:0 12px;font-size:12px}
.btn-block{width:100%;height:52px;justify-content:space-between;padding:0 18px;font-size:15px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* inputs */
.field{margin-bottom:14px}
.field label,.label{display:block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.input,select.input,textarea.input{width:100%;min-height:44px;padding:0 12px;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--surface);border:2px solid var(--divider);border-radius:0}
textarea.input{padding:10px 12px;min-height:96px;resize:vertical;line-height:1.5}
.input:focus-visible{outline:none;border-color:var(--accent)}
.input.mono{font-family:var(--mono);font-size:12px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:640px){.grid-2{grid-template-columns:1fr}}

/* segmented control */
.seg{display:inline-flex;border:2px solid var(--divider)}
.seg label{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer}
.seg label+label{border-left:2px solid var(--divider)}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg label:has(input:checked){background:var(--accent);color:#fff}

/* status pills */
.st{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:0}
.st-ok{background:var(--accent-tint);color:var(--accent-deep)}
.st-match,.st-paid,.st-success{background:var(--success-tint);color:var(--success)}
.st-warn,.st-danger{background:var(--danger-tint);color:var(--danger)}
.st-mut{background:#eae7e7;color:#605d5d}

/* tables */
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{text-align:left;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px;border-bottom:2px solid var(--divider)}
.table td{padding:10px 8px;border-bottom:1px solid var(--hair)}
.table tbody tr:hover{background:rgba(32,30,29,.03)}

/* panels + cards + kpis */
.panel{background:var(--surface);border:2px solid var(--divider);padding:18px 20px}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.panel-head h3{font-size:14px;font-weight:800;margin:0}
.row{display:flex;justify-content:space-between;padding:8px 0;font-size:13px;border-bottom:1px solid var(--hair)}
.row:last-child{border-bottom:0}
.row .k{color:var(--muted)}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--divider);border:2px solid var(--divider)}
.kpi-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.kpi-grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.kpi-grid,.kpi-grid.cols-3{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--surface);padding:15px 16px}
.kpi .l{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.kpi .v{font-size:26px;font-weight:800;line-height:1;margin-top:9px}
.kpi .s{font-size:11px;margin-top:3px;color:var(--muted-2)}
.kpi .v.danger,.kpi .s.danger{color:var(--danger)}
.kpi .s.up{color:var(--success)}
.cols{display:grid;gap:20px}
.cols.c-13{grid-template-columns:1.3fr 1fr}
.cols.c-11{grid-template-columns:1fr 1fr}
@media(max-width:900px){.cols.c-13,.cols.c-11{grid-template-columns:1fr}}
.note{border-left:3px solid var(--accent);background:var(--bg);padding:12px 16px;font-size:13px;color:var(--muted)}
.note.danger{border-color:var(--danger)}
.callout{border:2px solid var(--accent);background:var(--accent-tint);padding:14px 16px}
/* Danger callouts keep readable body text; only the kicker carries the alarm colour.
   Theme variables (never hard-coded hex) so dark mode stays legible. */
.callout.danger{border-color:var(--danger);background:var(--danger-tint);color:inherit}
.callout.danger .kicker{color:var(--danger)}
.callout.danger h3,.callout.danger b{color:inherit}
.attn{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--hair);font-size:13px}
.attn:last-child{border-bottom:0}
.dot{width:8px;height:8px;flex:none}
.dot.blue{background:var(--accent)}.dot.red{background:var(--danger)}.dot.grey{background:#605d5d}

/* brand badge */
.badge{background:var(--accent);display:grid;place-items:center;flex:none;color:#fff}

/* ── FAMILY SHELL ── */
.topbar{height:58px;background:var(--ink-panel);color:#f4f5f2;display:flex;align-items:center;gap:16px;padding:0 22px;position:sticky;top:0;z-index:10}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px}
.topnav{display:flex;gap:24px;margin-left:14px}
.topnav a{color:rgba(244,245,242,.55);text-decoration:none;font-weight:600;font-size:13px;height:58px;display:flex;align-items:center;border-bottom:2px solid transparent}
.topnav a:hover{color:#fff}
.topnav a.on{color:#fff;border-bottom-color:var(--accent)}
.topbar .household{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:600;color:rgba(244,245,242,.75)}
.avatar{width:32px;height:32px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px}
.container{max-width:1180px;margin:0 auto;padding:30px 28px 80px}
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px}

/* ── ADMIN SHELL ── */
.admin{display:flex;min-height:100vh}
.sidebar{width:212px;flex:none;background:var(--ink-panel);color:#f4f5f2;display:flex;flex-direction:column;padding:18px 0;position:sticky;top:0;height:100vh;overflow:auto}
.sbrand{padding:0 20px 16px;display:flex;gap:10px;align-items:center;border-bottom:2px solid rgba(244,245,242,.16);margin-bottom:8px}
.sbrand .t{font-weight:800;font-size:14px;line-height:1}
.sbrand .k{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-on-dark);margin-top:3px}
.sgroup{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,245,242,.32);padding:14px 20px 5px}
.sitem{padding:8px 20px;font-weight:600;font-size:13px;color:rgba(244,245,242,.6);display:flex;gap:10px;align-items:center;text-decoration:none}
.sitem:hover{color:#fff}
.sitem.on{color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 3px 0 0 var(--accent)}
.admin-main{flex:1;min-width:0;padding:26px 30px 60px}

/* ── AUTH SHELL ── */
.auth{min-height:100vh;display:flex;align-items:stretch;background:var(--bg)}
.auth-scr{margin:auto;display:flex;width:min(960px,100%);min-height:600px;border:2px solid var(--ink);background:var(--bg);box-shadow:0 6px 30px rgba(0,0,0,.14)}
.auth-pane{flex:1;padding:52px 48px;display:flex;flex-direction:column}
.auth-pane.center{justify-content:center}
.auth-poster{flex:0 0 340px;background:var(--ink-panel);color:#f4f5f2;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:34px}
.auth-poster .grid{position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,transparent 0,transparent 47px,rgba(244,245,242,.09) 47px,rgba(244,245,242,.09) 48px)}
.auth-poster .mono-mark{position:absolute;top:-4px;right:-14px;font-family:var(--sans);font-weight:800;font-size:150px;line-height:.8;letter-spacing:-.05em;color:var(--accent)}
/* Branded poster: the family seal sits behind, the wordmarks stack in front. */
.auth-poster .poster-seal{position:absolute;top:26px;right:-58px;width:250px;opacity:.2;pointer-events:none}
.auth-poster .poster-stack{position:relative;margin:auto 0;display:flex;flex-direction:column;gap:16px}
.auth-poster .poster-st{width:190px;max-width:78%;height:auto;display:block}
.auth-poster .poster-rule{width:44px;height:2px;background:var(--accent)}
.auth-poster .poster-secured{display:flex;flex-direction:column;gap:8px}
.auth-poster .poster-secured span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,245,242,.45)}
.auth-poster .poster-keeper{width:118px;height:auto;display:block;opacity:.92}
@media(max-width:820px){.auth-poster .poster-seal{width:220px;top:-40px;right:-60px}.auth-poster .poster-st{width:150px}}
.auth-poster .lbl{position:relative;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,245,242,.55)}
.auth-poster .foot{position:relative;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,245,242,.5);border-top:2px solid rgba(244,245,242,.24);padding-top:12px}
.orr{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin:16px 0}
.orr::before,.orr::after{content:"";flex:1;height:2px;background:var(--divider)}
.brandmark{display:flex;align-items:center;gap:12px}
.brandmark .t{font-weight:800;font-size:15px;line-height:1}
.brandmark .k{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-top:3px}
.stack-mb{margin-bottom:auto}
.mt-a{margin-top:auto}
.flash{padding:12px 16px;border:2px solid var(--divider);margin-bottom:18px;font-size:14px}
.flash.err{border-color:var(--danger);background:var(--danger-tint);color:var(--danger)}
.flash.ok{border-color:var(--success);background:var(--success-tint);color:var(--success)}

.hr{height:2px;border:0;background:var(--divider);margin:20px 0}
.section-gap{margin-top:20px}
.stack{display:flex;flex-direction:column;gap:16px}
.spread{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}

/* theme toggle control */
.theme-toggle{display:inline-grid;place-items:center;width:32px;height:32px;border:0;background:transparent;color:inherit;cursor:pointer;text-decoration:none;opacity:.7}
.theme-toggle:hover{opacity:1}

/* ── DARK MODE ── stamped as <html data-theme="dark"> (server-side, no flash) */
:root[data-theme="dark"]{
  --bg:#0e0e10; --surface:#17181b; --ink:#f4f5f2; --ink-panel:#000;
  --accent:#6b7dff; --accent-hover:#8a98ff; --accent-deep:#b3bcff;
  --accent-tint:rgba(107,125,255,.15); --accent-on-dark:#8a98ff;
  --danger:#ff6a4d; --danger-tint:rgba(255,106,77,.15); --success:#4ecb8b; --success-tint:rgba(78,203,139,.15);
  --muted:rgba(244,245,242,.6); --muted-2:rgba(244,245,242,.45);
  --divider:rgba(244,245,242,.28); --hair:rgba(244,245,242,.14);
}
:root[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
:root[data-theme="dark"] .st-mut{background:rgba(244,245,242,.1);color:rgba(244,245,242,.7)}
:root[data-theme="dark"] .table tbody tr:hover{background:rgba(244,245,242,.05)}
:root[data-theme="dark"] .btn-sec:hover{background:rgba(244,245,242,.08)}
:root[data-theme="dark"] .note,:root[data-theme="dark"] .callout{background:var(--surface)}
/* …but a danger callout keeps its tint in dark mode, or it loses all urgency. */
:root[data-theme="dark"] .callout.danger{background:var(--danger-tint);color:var(--ink)}
:root[data-theme="dark"] .flash.err{background:var(--danger-tint);color:var(--ink);border-color:var(--danger)}
:root[data-theme="dark"] .kpi-grid,:root[data-theme="dark"] .panel{border-color:var(--divider)}

[data-bg="grid"] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M40 0H0V40' fill='none' stroke='%23201e1d' stroke-opacity='.06'/%3E%3C/svg%3E");background-attachment:fixed}:root[data-theme="dark"][data-bg="grid"] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M40 0H0V40' fill='none' stroke='%23f4f5f2' stroke-opacity='.05'/%3E%3C/svg%3E")}
[data-bg="dots"] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1.3' fill='%23201e1d' fill-opacity='.09'/%3E%3C/svg%3E");background-attachment:fixed}:root[data-theme="dark"][data-bg="dots"] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1.3' fill='%236b7dff' fill-opacity='.14'/%3E%3C/svg%3E")}
[data-bg="keys"] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg transform='translate(24 22) scale(.5)' fill='none' stroke='%232036c9' stroke-opacity='.10' stroke-width='3' stroke-linejoin='miter' stroke-linecap='square'%3E%3Cpath d='M6 22 24 8 42 22'/%3E%3Cpath d='M11 20v20h26V20'/%3E%3Ccircle cx='24' cy='26' r='3.5'/%3E%3Cpath d='M24 29.5v6.5'/%3E%3C/g%3E%3C/svg%3E");background-attachment:fixed}:root[data-theme="dark"][data-bg="keys"] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg transform='translate(24 22) scale(.5)' fill='none' stroke='%236b7dff' stroke-opacity='.13' stroke-width='3' stroke-linejoin='miter' stroke-linecap='square'%3E%3Cpath d='M6 22 24 8 42 22'/%3E%3Cpath d='M11 20v20h26V20'/%3E%3Ccircle cx='24' cy='26' r='3.5'/%3E%3Cpath d='M24 29.5v6.5'/%3E%3C/g%3E%3C/svg%3E")}
[data-bg="mesh"] body{background-image:radial-gradient(720px circle at 12% 0%, rgba(32,54,201,.07), transparent 55%), radial-gradient(560px circle at 92% 88%, rgba(32,54,201,.06), transparent 55%);background-attachment:fixed}:root[data-theme="dark"][data-bg="mesh"] body{background-image:radial-gradient(720px circle at 12% 0%, rgba(107,125,255,.14), transparent 55%), radial-gradient(560px circle at 92% 88%, rgba(107,125,255,.10), transparent 55%)}
[data-bg="lattice"] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 0 56 28 28 56 0 28Z' fill='none' stroke='%23182448' stroke-opacity='.07'/%3E%3C/svg%3E");background-attachment:fixed}:root[data-theme="dark"][data-bg="lattice"] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 0 56 28 28 56 0 28Z' fill='none' stroke='%23CEA649' stroke-opacity='.10'/%3E%3C/svg%3E")}
[data-bg="seal"] body{background-image:url(/gimg/rba-seal);background-repeat:no-repeat;background-position:right -70px bottom -70px;background-size:400px;background-attachment:fixed}@media(max-width:820px){[data-bg="seal"] body{background-size:260px;background-position:right -50px bottom -50px}}