:root{
  --bg:#FFF9F2; --surface:#FFFFFF; --ink:#3B3A5C; --muted:#6b6a86;
  --waiting:#CDBFEA; --almost:#FFD66B; --next:#FFB27A; --called:#7ED6B8; --missed:#F28B8B;
  --indigo:#4B4A8F; --line:#ECE3D6;
}
.dark{
  --bg:#1F1E33; --surface:#2A2945; --ink:#F4F1FF; --muted:#B9B6D6; --line:#3C3B5E; --indigo:#BDB8FF;
}
html{font-size:16px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Nunito,system-ui,sans-serif;
  background-image:radial-gradient(circle at 10% 0%,rgba(205,191,234,.35),transparent 40%),radial-gradient(circle at 100% 30%,rgba(126,214,184,.22),transparent 40%);
  background-attachment:fixed;min-height:100vh}
h1,h2,h3,.font-display{font-family:Fredoka,"Baloo 2",Nunito,sans-serif}
.card{background:var(--surface);border:2px solid var(--line);border-radius:22px;box-shadow:0 6px 0 rgba(59,58,92,.06)}
.pill{border-radius:999px;min-height:48px;padding:0 20px;font-weight:800;border:2px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s}
.pill:active{transform:translateY(2px)}
.pill:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.dark .btn-primary{color:#1F1E33}
.btn-soft{background:var(--surface);color:var(--ink)}
.btn-called{background:var(--called);color:#3B3A5C}
.btn-almost{background:var(--almost);color:#3B3A5C}
.btn-missed{background:var(--missed);color:#3B3A5C}
.inp{min-height:48px;border-radius:16px;border:2px solid var(--line);padding:0 14px;background:var(--surface);color:var(--ink);width:100%}
.inp:focus,.pill:focus-visible,button:focus-visible{outline:3px solid var(--indigo);outline-offset:2px}
.st-waiting{background:var(--waiting);color:#3B3A5C}
.st-almost{background:var(--almost);color:#3B3A5C}
.st-next{background:var(--next);color:#3B3A5C}
.st-called{background:var(--called);color:#3B3A5C}
.st-completed{background:#E9D7B8;color:#3B3A5C}
.st-missed{background:var(--missed);color:#3B3A5C}
.tab{min-height:44px;padding:0 14px;border-radius:999px;font-weight:800;white-space:nowrap}
.tab.on{background:var(--ink);color:var(--bg)}
.muted{color:var(--muted)}
.bob{animation:bob 3.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.breathe{animation:br 4s ease-in-out infinite}
@keyframes br{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.flashsoft{animation:fs 2s ease-in-out 2}
@keyframes fs{0%,100%{background:transparent}50%{background:rgba(126,214,184,.45)}}
.rise{animation:rise .5s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.display-bg{background:#2A2945;color:#FFF9F2;min-height:100vh}
.scroll-x{overflow-x:auto;scrollbar-width:none}
.scroll-x::-webkit-scrollbar{display:none}