/* spl/t — shared design tokens. One font, four text sizes (32 / 20 / 16 / 14), three weights (400 / 600 / 700),
   one gutter, an 8-based spacing scale, two radii (12 controls, 16 cards) plus pills. Warm off-white, hairline cards, one blue accent. */
:root{
  --bg:#FAFAF9;--surface:#fff;--ink:#0A0A0B;--ink2:#5F5F68;--ink3:#767680;
  --line:#E4E4E2;--edge:#CFCFCA;--field:#9B9BA3;
  --accent:#2F4BFF;--soft:#EEF1FF;--ok:#1F9D55;--bad:#C62828;--badbg:#FEF2F2;--okbg:#EDF8F1;
  --g:20px;--r:12px;--rc:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
a{color:var(--accent)}a:hover{color:var(--ink)}
button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.4}
input,select,textarea{font:inherit;color:inherit}
.num,.mono{font-variant-numeric:tabular-nums}
.mono{font-family:inherit}
.brand{font-weight:700;letter-spacing:-.04em}.brand i{font-style:normal;color:var(--accent)}
.card{background:var(--surface);border:1px solid var(--edge);border-radius:var(--rc);padding:20px}
.muted{color:var(--ink2)}.small{font-size:14px}
.label{font-size:14px;font-weight:600;color:var(--ink2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r);border:1px solid var(--edge);background:#fff;color:var(--ink);font-weight:600;font-size:16px;text-decoration:none}
.btn:hover{border-color:var(--field)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.pill{border-radius:999px;min-height:52px;padding:0 20px;background:var(--accent);border-color:var(--accent);color:#fff;width:100%;font-size:16px}
.btn.pill:disabled{background:#c8cdf5;border-color:#c8cdf5}
.btn.small{min-height:36px;padding:0 12px;font-size:14px;border-radius:var(--r)}
.btn.danger{color:var(--bad);border-color:#f0c9c9}
input[type=text],input[type=email],input[type=number],input[type=search],input[type=datetime-local],input[type=password],select,textarea{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--field);border-radius:var(--r);background:#fff;font-size:16px}
textarea{padding:12px 14px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
label.f{display:block;margin:16px 0 8px;font-size:14px;font-weight:600}
.banner{padding:12px 20px;border-radius:var(--r);font-size:14px;margin:12px 0;border:1px solid}
.banner.ok{background:var(--okbg);border-color:#bfe3cc;color:#14653a}
.banner.bad{background:var(--badbg);border-color:#f0c9c9;color:#8f1d1d}
.banner.info{background:var(--soft);border-color:#d3dafc;color:#22308f}
.row{display:flex;align-items:center;gap:12px}.between{justify-content:space-between}
.chip{display:inline-block;padding:4px 10px;border-radius:999px;font-size:14px;font-weight:600;line-height:1.3;background:#F0F0EE;color:var(--ink2)}
.chip.ok{background:var(--okbg);color:#14653a}.chip.bad{background:var(--badbg);color:#8f1d1d}.chip.blue{background:var(--soft);color:#22308f}
.hide{display:none!important}
.sr{position:absolute;left:-9999px}
.spinner{width:20px;height:20px;border:2px solid #d9dcf7;border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}