/* Mean Mone$y — one look for every page.
   Semantics are fixed: green is money arriving, red is money leaving, gold is the brand. Nothing else is
   coloured, so when something is, it means something. Type is Space Grotesk for names and numbers that
   need presence, the system stack for reading. */

:root{
  color-scheme:dark;
  --bg:#07090b; --bg-2:#0b0f12; --surface:#10151a; --surface-2:#161d23; --surface-3:#1c252d;
  --line:rgba(255,255,255,.06); --line-2:rgba(255,255,255,.11); --line-3:rgba(255,255,255,.18);
  --ink:#eef2f4; --ink-2:#aab4bc; --ink-3:#77838d; --ink-4:#4f5a63;
  --in:#37e39a; --in-soft:rgba(55,227,154,.12); --in-line:rgba(55,227,154,.38);
  --out:#ff6f6f; --out-soft:rgba(255,111,111,.12); --out-line:rgba(255,111,111,.38);
  --gold:#f2c44f; --gold-soft:rgba(242,196,79,.10); --gold-line:rgba(242,196,79,.36);
  --warn:var(--gold);
  --r-sm:7px; --r:11px; --r-lg:16px; --r-xl:22px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --fs-xs:10.5px; --fs-sm:12px; --fs-base:14px; --fs-md:15px; --fs-lg:17px; --fs-xl:22px; --fs-2xl:30px;
  --display:"Space Grotesk",ui-sans-serif,-apple-system,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
  --text:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:400 var(--fs-base)/1.55 var(--text);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 420px at 15% -10%, rgba(55,227,154,.07), transparent 60%),
    radial-gradient(700px 380px at 95% -5%, rgba(242,196,79,.06), transparent 60%),
    var(--bg);}
b,strong{font-weight:600}
a{color:var(--in)}
code{font:12.5px var(--mono);background:var(--bg-2);border:1px solid var(--line);padding:1px 6px;border-radius:5px;color:var(--ink-2)}

/* ---- the brand lockup ------------------------------------------------------------------------------ */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0}
.mark{width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(145deg,#12201a,#0d1417);border:1px solid var(--in-line);
  box-shadow:0 0 0 3px rgba(55,227,154,.07), inset 0 1px 0 rgba(255,255,255,.05)}
.mark svg{display:block}
.wordmark{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.wordmark .name{font:700 var(--fs-lg)/1.05 var(--display);letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.wordmark .name .s{color:var(--gold)}
.wordmark .sub{font:500 var(--fs-xs)/1.2 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:3px;white-space:nowrap}

/* ---- buttons -------------------------------------------------------------------------------------- */
button,.btn{font:inherit;cursor:pointer;border-radius:var(--r);border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);padding:10px 16px;
  transition:border-color .12s,background .12s,transform .06s;text-decoration:none;display:inline-block;text-align:center}
button:hover:not(:disabled),.btn:hover{border-color:var(--line-3);background:var(--surface-3)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.45;cursor:default}
.primary,a.primary{background:var(--in);border-color:var(--in);color:#04140c;font-weight:600;text-decoration:none}
.primary:hover:not(:disabled),a.primary:hover{background:#4feca7;border-color:#4feca7}
.ghost{background:transparent}
.mini{padding:5px 10px;font-size:var(--fs-sm);border-radius:var(--r-sm)}

/* ---- cards, chips, notes -------------------------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin-bottom:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 10px 30px -22px rgba(0,0,0,.8)}
.card h2,.eyebrow{font:600 var(--fs-xs)/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:999px;padding:2px 8px;color:var(--ink-2);white-space:nowrap}
.chip.gold{color:var(--gold);border-color:var(--gold-line);background:var(--gold-soft)}
.chip.in{color:var(--in);border-color:var(--in-line);background:var(--in-soft)}
.chip.out{color:var(--out);border-color:var(--out-line);background:var(--out-soft)}
.hint{color:var(--ink-3);font-size:13px;line-height:1.55}
.hint.ok{color:var(--in)}.hint.bad{color:var(--warn)}
.ok{color:var(--in)}
.note{padding:var(--s2) var(--s3);border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);font-size:var(--fs-sm);color:var(--ink-2)}
.note.ok{color:var(--in);border-color:var(--in-line)}.note.bad{color:var(--out);border-color:var(--out-line)}.note.warn{color:var(--gold);border-color:var(--gold-line)}

/* ---- inputs --------------------------------------------------------------------------------------- */
input[type=text],input[type=number]{font:inherit;color:var(--ink);background:var(--bg-2);border:1px solid var(--line-2);border-radius:9px;padding:9px 11px;min-width:0;width:100%}
input:focus{outline:none;border-color:var(--in)}
.row-in{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.row-in input{flex:1 1 180px}

/* ---- footer --------------------------------------------------------------------------------------- */
.foot{color:var(--ink-3);font-size:12.5px;line-height:1.65}
.foot a{color:var(--ink-2)}
.foot .fine{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.foot .fine .s{color:var(--gold)}

[hidden]{display:none !important}