/* CATwaale.in shared tokens and base styles (from the original mini mock design) */
:root{
  --paper:#eef1f5; --grid:rgba(15,27,61,.05); --surface:#ffffff;
  --ink:#0f1b3d; --muted:#556084; --line:#d3d9e5;
  --hi:#ffd23f; --hi-soft:rgba(255,210,63,.3); --on-hi:#0f1b3d;
  --btn:#0f1b3d; --on-btn:#ffffff; --focus:#2f6bff;
  --ok:#1f8a4c; --on-ok:#ffffff; --ok-bg:#e2f3e9;
  --bad:#c53030; --bad-bg:#fbe6e6;
  --mark:#6b46c1; --on-mark:#ffffff;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0c1124; --grid:rgba(255,255,255,.035); --surface:#151c38;
    --ink:#e9edfb; --muted:#9ba6c9; --line:#28325c;
    --hi-soft:rgba(255,210,63,.16);
    --btn:#ffd23f; --on-btn:#0f1b3d; --focus:#ffd23f;
    --ok:#46c47a; --on-ok:#082414; --ok-bg:#15352a;
    --bad:#ff8b85; --bad-bg:#3b1f27;
    --mark:#b7a2ff; --on-mark:#170f33;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); color:var(--ink); line-height:1.55;
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;
}
h1,h2,h3{font-family:var(--display); line-height:1.1; margin:0; letter-spacing:-.01em}
p{margin:0 0 .8em}
button{font:inherit; cursor:pointer}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.wrap{max-width:1180px; margin:0 auto; padding:16px}
.narrow{max-width:640px}
.fine{color:var(--muted); font-size:.9rem}

/* buttons */
.btn{
  border:1.5px solid var(--ink); background:var(--surface); color:var(--ink);
  padding:9px 14px; border-radius:8px; font-weight:600; font-size:.95rem; min-height:44px;
}
.btn:hover{background:var(--hi-soft)}
.btn.primary{background:var(--btn); color:var(--on-btn); border-color:var(--btn)}
.btn.primary:hover{filter:brightness(1.18)}
.btn.ghost{border-color:var(--line)}
.btn.big{padding:13px 24px; font-size:1.05rem; border-radius:10px}
.btn.small{min-height:36px; padding:5px 10px; font-size:.85rem}
.btn.block{width:100%}
.btn:disabled{opacity:.4; cursor:not-allowed}