/* ==========================================================================
   Wishfill app theme - "Gloop Arcade" (the design direction chosen for the website, now used by the
   parent app, login, admin, gift page and install page).
   Cream + grape, hot-pink buttons, chunky borders, hard shadows, Fredoka + Nunito (self-hosted).
   The kid screen keeps its own dark layout but uses the same palette and type.
   ========================================================================== */
@font-face{font-family:"Fredoka";src:url("/static/fonts/fredoka.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Nunito";src:url("/static/fonts/nunito.woff2") format("woff2");font-weight:200 1000;font-display:swap}

:root{
  color-scheme:light;
  --font-display:"Fredoka",system-ui,sans-serif; --font-body:"Nunito",system-ui,sans-serif;
  --bg:#fff6ea; --bg-alt:#ffe9cf; --ink:#2a1a58; --mute:#5b4a8a; --line:#2a1a58; --card:#ffffff; --field:#fffaf3;
  --accent:#d42a62; --accent-ink:#ffffff; --purple:#6a3de8; --yellow:#ffcf3f; --mint:#2fbf8f; --mint-ink:#06281c;
  --ok-text:#0f7a58; --danger:#b81e3c; --danger-ink:#ffffff; --accent-text:#d42a62; --gold:#f2b134;
  --bw:3px; --r-s:12px; --r-m:20px; --r-l:28px;
  --shadow:5px 5px 0 var(--line); --shadow-s:3px 3px 0 var(--line); --shadow-l:8px 8px 0 var(--line);
  --dots:color-mix(in srgb,var(--ink) 9%,transparent);
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --bg:#160a38; --bg-alt:#1d0f45; --ink:#fff6ea; --mute:#c6b9ea; --line:#7d68c9; --card:#241552; --field:#1d0f45;
    --purple:#9a78ff; --ok-text:#58e0b2; --danger:#ff7a93; --danger-ink:#2a1a58; --accent-text:#ff8fb3;
    --shadow:5px 5px 0 #0b0422; --shadow-s:3px 3px 0 #0b0422; --shadow-l:8px 8px 0 #0b0422;
    --dots:color-mix(in srgb,var(--ink) 7%,transparent);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--font-body);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(var(--dots) 1.4px,transparent 1.6px);background-size:26px 26px}
h1,h2,h3,.display{font-family:var(--font-display);margin:0;letter-spacing:-.01em}
h2{font-size:1.6rem;line-height:1.1;font-weight:700}
h3{font-size:1.2rem;font-weight:700}
a{color:var(--accent-text);font-weight:700}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.hidden,[hidden]{display:none!important}
.row{display:flex;align-items:center;gap:10px}.sp{justify-content:space-between}
.mute{color:var(--mute);font-size:14px}
.err{color:var(--danger);font-size:14px;min-height:18px;font-weight:700}

/* ---------- cards, buttons, fields ---------- */
.card{background:var(--card);color:var(--ink);border:var(--bw) solid var(--line);border-radius:var(--r-m);padding:16px;margin-bottom:16px;box-shadow:var(--shadow)}
button,.btn{font:700 1rem/1 var(--font-display);border:var(--bw) solid var(--line);border-radius:999px;padding:12px 18px;background:var(--accent);color:var(--accent-ink);
  cursor:pointer;box-shadow:var(--shadow-s);transition:transform .12s,box-shadow .12s,filter .12s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem}
button:hover,.btn:hover{filter:brightness(1.07);transform:translate(-1px,-1px)}
button:active,.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
button:disabled{opacity:.6;cursor:default;transform:none}
button.ghost,.btn.ghost{background:var(--card);color:var(--ink)}
button.small,.btn.small{padding:8px 13px;font-size:.9rem;box-shadow:2px 2px 0 var(--line)}
button.ok{background:var(--mint);color:var(--mint-ink)}
button.danger{background:var(--card);color:var(--danger);border-color:var(--danger);box-shadow:2px 2px 0 var(--danger)}
button.bad{background:var(--danger);color:var(--danger-ink);border-color:var(--line)}
input,select,textarea{font:inherit;width:100%;padding:11px 13px;border-radius:14px;border:2px solid var(--line);background:var(--field);color:var(--ink)}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--mute) 70%,transparent)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
label,.lbl{display:block;font-size:13px;font-weight:800;color:var(--mute);margin:12px 0 5px;letter-spacing:.02em}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.chip{border:2px solid var(--line);background:var(--card);color:var(--ink);padding:8px 14px;border-radius:99px;font:700 .95rem/1 var(--font-display);cursor:pointer;box-shadow:2px 2px 0 var(--line);transition:transform .12s}
.chip:hover{transform:translate(-1px,-1px)}
.tag{font:700 .78rem/1 var(--font-display);padding:4px 9px;border-radius:99px;background:var(--yellow);color:#2a1a58;border:2px solid #2a1a58;display:inline-block}
.dot{width:14px;height:14px;border-radius:50%;flex:none;border:2px solid var(--line)}
.bar{height:14px;background:var(--bg-alt);border:2px solid var(--line);border-radius:99px;overflow:hidden;margin-top:8px}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:99px}
.bar.ok>i{background:var(--mint)}
.note{padding:12px 0;border-bottom:2px dashed color-mix(in srgb,var(--line) 35%,transparent)}.note:last-child{border:0}.note.unread{font-weight:800}
img.qr{width:160px;height:160px;image-rendering:pixelated;border-radius:12px;background:#fff;border:var(--bw) solid var(--line);padding:6px}
dialog{border:var(--bw) solid var(--line);border-radius:var(--r-l);padding:20px;max-width:440px;width:calc(100% - 32px);background:var(--card);color:var(--ink);box-shadow:var(--shadow-l)}
dialog::backdrop{background:#160a38b8}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.pop{animation:pop .45s ease-out;background:var(--mint)!important;color:var(--mint-ink)!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- brand ---------- */
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink)}
.brand svg{width:30px;height:38px;flex:none}
.brand b{font:800 1.45rem/1 var(--font-display);letter-spacing:-.02em;color:var(--ink)}