/* KleanUp base: colours, type, form controls, buttons. Every other stylesheet uses these variables. */
:root{
  --bg:#f3f8fb; --surface:#ffffff; --ink:#18212b; --muted:#5e6873; --line:#d9e4ec;
  --accent:#5bbcf2; --accent-ink:#0b2a40; --accent-soft:#e4f4fd; --accent-text:#1673ad; --accent-deep:#2f9fe0;
  --sun:#ffc61a; --sun-soft:#fff5d1; --sun-text:#8a6200;
  --good:#1f7a4d; --good-soft:#dcf1e5; --warn:#a15c00; --warn-soft:#fbefd6; --info:#2b5d9b; --info-soft:#e0eaf7;
  --chrome:#ffffff; --chrome-ink:#18212b;
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"Figtree", "Segoe UI", system-ui, sans-serif;
  --r:10px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--body)}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.15}
h2{font-size:22px} h3{font-size:17px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

header{background:var(--chrome);color:var(--chrome-ink);border-bottom:1px solid var(--line)}
.bar{max-width:1080px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em}
.brand{display:block;font-size:28px;white-space:nowrap}
.brand .c{color:var(--accent-deep)}
.brand .u{color:var(--sun)}
.brand svg.uarr{width:.9em;height:1em;margin:0 0 0 .04em;vertical-align:-.03em}
.brand svg.k{width:.84em;height:1em;margin:0 -.04em 0 0;vertical-align:-.03em;overflow:visible}
.tabs{display:flex;gap:4px;background:var(--bg);border:1px solid var(--line);padding:4px;border-radius:999px;margin-left:auto}
.tabs button{border:0;background:none;color:var(--chrome-ink);padding:7px 16px;border-radius:999px;cursor:pointer;font-weight:600;opacity:.75}
.tabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);opacity:1}
.mode{font-size:12px;color:var(--muted);width:100%}

main{max-width:1080px;margin:0 auto;padding:20px;display:grid;gap:20px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.stat b{display:block;font-family:var(--display);font-size:24px}
.stat small{color:var(--muted)}
.stat.money b{color:var(--accent-text)}

.cols{display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:14px}
.panel p.lead{margin:0;color:var(--muted)}
label{display:grid;gap:4px;font-weight:600;font-size:13px}
input,select,textarea{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:9px 10px;font-weight:400;font-size:15px;width:100%}
textarea{min-height:72px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{border:0;border-radius:8px;padding:10px 16px;font-weight:700;cursor:pointer;background:var(--accent);color:var(--accent-ink)}
.btn:hover{background:var(--accent-deep)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.small{padding:6px 12px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}

.note{font-size:13px;color:var(--muted);margin:0}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:10px 18px;border-radius:999px;font-weight:600;opacity:0;transition:opacity .2s;pointer-events:none;z-index:20;max-width:90vw}
#toast.show{opacity:1}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion: reduce){ #toast{transition:none} }