/* Family Fun 1.0 — design tokens from the "Family Fun" design system: sun = main action, sky = working colour,
   leaf = savings only, coral = rare. Rounded 18px cards, borders not shadows. */
:root{
  --surface:#F3F7FB; --card:#FFFFFF; --ink:#14243A; --muted:#5D6C82; --line:#DDE5EF;
  --sky:#1A6BCB; --sky-soft:#E3EFFF; --sun:#FFC531; --on-sun:#5A4100; --leaf:#16A06B; --leaf-ink:#0E7A50; --leaf-soft:#DDF5EA;
  --coral:#C2412F; --coral-soft:#FBE4E0;
  --display:"Varela Round","Assistant",system-ui,sans-serif; --body:"Assistant",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:18px; --r-s:14px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --surface:#0D1522; --card:#162235; --ink:#EAF1FB; --muted:#9FB0C7; --line:#24344C;
  --sky:#5AA2FF; --sky-soft:#1A2F4F; --sun:#FFCF4F; --on-sun:#2A1F00; --leaf:#3DCC93; --leaf-ink:#3DCC93; --leaf-soft:#123629;
  --coral:#FF7B69; --coral-soft:#3A1E1A; color-scheme:dark}}
:root[data-theme="dark"]{
  --surface:#0D1522; --card:#162235; --ink:#EAF1FB; --muted:#9FB0C7; --line:#24344C;
  --sky:#5AA2FF; --sky-soft:#1A2F4F; --sun:#FFCF4F; --on-sun:#2A1F00; --leaf:#3DCC93; --leaf-ink:#3DCC93; --leaf-soft:#123629;
  --coral:#FF7B69; --coral-soft:#3A1E1A; color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;min-height:100%}
body{background:var(--surface);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--sky)}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}

.app{max-width:560px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);display:flex;align-items:center;gap:10px;
  padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);min-width:0}
.brand img{width:34px;height:34px}
.brand b{font-family:var(--display);font-weight:400;font-size:20px;display:block;line-height:1.1}
.brand small{display:block;font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .sp{flex:1}
.acct{width:40px;height:40px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--sky),var(--leaf));color:#fff;font-weight:800;font-size:17px;display:grid;place-items:center;flex:none}
.offline{margin:0 16px 4px;background:var(--sky-soft);color:var(--ink);border-radius:12px;padding:8px 12px;font-size:14px;font-weight:600}

main{flex:1;padding:4px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:20px;outline:none}
.boot{display:grid;place-items:center;min-height:50vh}
.boot img{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
h1{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.2;margin:0;text-wrap:balance}
h2{font-family:var(--display);font-weight:400;font-size:19px;margin:0 0 10px}
.sub{color:var(--muted);margin:4px 0 0;font-size:15px}
.linkish{border:0;background:none;padding:0;color:var(--sky);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none;margin:0 -16px;padding-inline:16px}
.chips::-webkit-scrollbar{display:none}
.chips.wrap{flex-wrap:wrap;overflow:visible;margin:0;padding-inline:0}
.chip{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:8px 14px;font-size:14px;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;min-height:40px}
.chip[aria-pressed="true"]{background:var(--sky);border-color:var(--sky);color:#fff}
.chip.small{min-height:32px;padding:4px 10px;font-size:13px}
.ctx{display:flex;flex-direction:column;gap:8px}
.ctxline{display:flex;gap:6px;flex-wrap:wrap;color:var(--muted);font-size:14px;font-weight:600;align-items:center}
.ctxline button{border:1px dashed var(--line);background:none;border-radius:99px;padding:4px 10px;color:var(--ink);font-weight:700;font-size:14px}

.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 2px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;font-weight:700;text-align:center;min-height:84px}
.cat .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center}
.cat .ic svg{width:22px;height:22px}

.list{display:flex;flex-direction:column;gap:10px}
.place{background:var(--card);border:1px solid var(--line);border-radius:var(--r);display:grid;grid-template-columns:76px 1fr;gap:12px;padding:10px;text-align:start;width:100%;color:var(--ink)}
.thumb{border-radius:var(--r-s);aspect-ratio:1;display:grid;place-items:center;width:76px}
.thumb svg{width:34px;height:34px}
.pbody{min-width:0;display:flex;flex-direction:column;gap:4px}
.pname{font-weight:800;font-size:16px;line-height:1.25}
.meta{color:var(--muted);font-size:13px;display:flex;gap:4px 10px;flex-wrap:wrap}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:12px;font-weight:700;border-radius:8px;padding:2px 8px;background:var(--sky-soft);color:var(--sky)}
.tag.deal{background:var(--leaf-soft);color:var(--leaf-ink)}
.tag.warn{background:var(--coral-soft);color:var(--coral)}
.price{font-variant-numeric:tabular-nums;font-size:14px}
.price s{color:var(--muted);margin-inline-start:6px}
.price b{color:var(--leaf-ink)}

.sponsor,.house{border:1px dashed var(--line);border-radius:var(--r);padding:14px;display:flex;gap:12px;align-items:center;background:var(--card);text-align:start;width:100%;color:var(--ink);text-decoration:none}
.sponsor small{color:var(--muted);display:block;font-size:12px;font-weight:700}
.house{border-style:solid}
.house .ic{width:44px;height:44px;border-radius:12px;background:var(--sun);color:var(--on-sun);display:grid;place-items:center;flex:none}

.filters{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.filters .chips{margin:0;padding-inline:0}
.flabel{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:6px}
.field{width:100%;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--r-s);padding:12px 14px;font-size:16px;min-height:48px}
textarea.field{min-height:84px;resize:vertical}
label.lbl{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:14px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.check input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--sky)}
.count{color:var(--muted);font-size:14px}
.empty{text-align:center;color:var(--muted);padding:24px 10px;background:var(--card);border:1px dashed var(--line);border-radius:var(--r)}

.hero{border-radius:22px;aspect-ratio:16/8;display:grid;place-items:center;position:relative}
.hero svg{width:72px;height:72px}
.hero small{position:absolute;bottom:10px;inset-inline-start:12px;font-size:12px;font-weight:700;opacity:.75}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fact{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px}
.fact small{display:block;color:var(--muted);font-size:12px;font-weight:700}
.fact b{font-size:15px}
.dealbox{background:var(--leaf-soft);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:6px}
.dealbox .big{font-family:var(--display);font-size:22px;color:var(--leaf-ink)}
.dealbox.none{background:var(--card);border:1px solid var(--line)}
.dealbox.none .big{color:var(--ink);font-size:18px}
.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.btn{border:1px solid var(--line);background:var(--card);border-radius:var(--r-s);padding:11px 8px;font-weight:700;font-size:15px;text-align:center;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px}
.btn.primary{background:var(--sun);border-color:var(--sun);color:var(--on-sun);font-size:17px;padding:14px}
.btn.sky{background:var(--sky);border-color:var(--sky);color:#fff}
.btn.wide{grid-column:1/-1;width:100%}
.btn.danger{color:var(--coral);border-color:var(--coral)}
.btn[aria-pressed="true"]{border-color:var(--sun);background:color-mix(in srgb,var(--sun) 18%,var(--card))}
.btn:disabled{opacity:.55;cursor:default}
.back{border:0;background:none;font-weight:700;color:var(--sky);padding:6px 0;align-self:flex-start;display:inline-flex;gap:6px;align-items:center;font-size:16px}
[dir="rtl"] .back svg{transform:scaleX(-1)}
.note{font-size:13px;color:var(--muted)}
.what{margin:0;font-size:16px}

.coupon{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.code{font-family:ui-monospace,Menlo,monospace;font-size:20px;letter-spacing:.1em;background:var(--surface);border:2px dashed var(--leaf);border-radius:10px;padding:6px 12px;direction:ltr;font-weight:700}

.tabs{position:fixed;bottom:0;left:0;right:0;z-index:6;background:var(--card);border-top:1px solid var(--line);
  padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);display:flex;justify-content:center}
.tabs>div{width:100%;max-width:560px;display:grid;grid-template-columns:repeat(4,1fr)}
.tabs button{border:0;background:none;padding:8px 0 9px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;font-weight:700;color:var(--muted);min-height:58px}
.tabs button svg{width:24px;height:24px}
.tabs button[aria-current="page"]{color:var(--sky)}

.sheet-wrap{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet-bg{position:absolute;inset:0;background:rgba(10,20,35,.45)}
.sheet{position:relative;background:var(--surface);width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:22px 22px 0 0;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}
.sheet .head{display:flex;align-items:center;gap:12px}
.sheet .head .acct{width:52px;height:52px;font-size:22px}
.sheet .x{margin-inline-start:auto;border:0;background:var(--card);border-radius:50%;width:40px;height:40px;display:grid;place-items:center}
.menu{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.menu>*{display:flex;align-items:center;gap:10px;padding:13px 14px;border:0;border-bottom:1px solid var(--line);background:none;text-align:start;text-decoration:none;color:var(--ink);font-weight:600;min-height:50px}
.menu>*:last-child{border-bottom:0}
.menu select{margin-inline-start:auto;border:1px solid var(--line);border-radius:10px;padding:6px 8px;background:var(--surface);max-width:55%}
.menu .val{margin-inline-start:auto;color:var(--muted);font-size:14px}
.kids{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.kid{display:inline-flex;align-items:center;gap:4px;background:var(--sky-soft);color:var(--sky);border-radius:99px;padding:4px 6px 4px 12px;font-weight:800}
[dir="rtl"] .kid{padding:4px 12px 4px 6px}
.kid button{border:0;background:none;color:inherit;width:28px;height:28px;display:grid;place-items:center;border-radius:50%}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:10px;text-align:center}
.stat b{display:block;font-size:22px;font-family:var(--display);font-weight:400}
.stat small{color:var(--muted);font-size:12px;font-weight:700}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px}

.toast{position:fixed;bottom:calc(86px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:12px;font-weight:700;z-index:30;max-width:calc(100% - 32px);text-align:center}
.foot{padding:8px 16px 20px;text-align:center;font-size:13px;color:var(--muted);display:flex;gap:6px 14px;justify-content:center;flex-wrap:wrap}
.foot a{color:var(--muted)}
@media (prefers-reduced-motion:no-preference){.screen{animation:in .18s ease-out}@keyframes in{from{opacity:.4;transform:translateY(6px)}}}
@media (min-width:420px){.cats{grid-template-columns:repeat(4,1fr)}}

/* type tiles: pastel on light, muted on dark */
.thumb,.hero,.cat .ic[style]{background:var(--t);color:var(--k)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .thumb,:root:not([data-theme="light"]) .hero,:root:not([data-theme="light"]) .cat .ic[style]{background:color-mix(in srgb,var(--t) 16%,var(--card));color:color-mix(in srgb,var(--t) 85%,#fff)}}
:root[data-theme="dark"] .thumb,:root[data-theme="dark"] .hero,:root[data-theme="dark"] .cat .ic[style]{background:color-mix(in srgb,var(--t) 16%,var(--card));color:color-mix(in srgb,var(--t) 85%,#fff)}