:root {
  --bg:#f6f3ff; --bg2:#fff3ea; --card:#ffffffcc; --solid:#fff; --ink:#241f33; --muted:#7b7590; --line:#e6e1f2;
  --accent:#7c5cff; --accent2:#ff8a4c; --ok:#18a774; --warn:#e5484d; --warnbg:#ffe9ea; --gold:#f5b301;
  --shadow:0 8px 30px #4b3a9a1a; --r:20px; --spring:cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-color-scheme: dark) { :root {
  --bg:#14111f; --bg2:#1d1424; --card:#241f35cc; --solid:#241f35; --ink:#f3f0ff; --muted:#a49fbd; --line:#37304f;
  --accent:#9b82ff; --accent2:#ff9d68; --ok:#3ddba0; --warn:#ff7b80; --warnbg:#3a1d26; --shadow:0 8px 30px #0006;
} }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font:16px/1.45 "Inter", system-ui, sans-serif; min-height:100vh;
  background:radial-gradient(900px 500px at 10% -10%, #7c5cff33, transparent 60%), radial-gradient(800px 500px at 100% 0%, #ff8a4c2e, transparent 55%), var(--bg);
  background-attachment:fixed; padding-bottom:110px; }
h1,h2,h3 { margin:0; letter-spacing:-.02em; }
.wrap { max-width:760px; margin:0 auto; padding:0 16px; }

/* header */
.top { display:flex; align-items:center; justify-content:space-between; padding:18px 0 10px; }
.brand { font-weight:800; font-size:1.3rem; display:flex; gap:8px; align-items:center; }
.brand span { display:inline-block; animation:wiggle 4s ease-in-out infinite; transform-origin:70% 80%; }
.chips { display:flex; gap:8px; align-items:center; }
.chip { display:flex; align-items:center; gap:6px; background:var(--card); backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:99px; padding:6px 12px; font-weight:700; font-size:.9rem; box-shadow:var(--shadow); cursor:pointer; }
.chip.fire.on .ico { animation:flame 1.2s ease-in-out infinite; }
.chip .ico { display:inline-block; }
.lvl { position:relative; overflow:hidden; }
.lvl .fill { position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg, #7c5cff40, #ff8a4c40); transition:width 1s var(--spring); }
.lvl b { position:relative; }
.gear { border:0; background:var(--card); border:1px solid var(--line); width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:1rem; color:var(--ink); transition:transform .4s var(--spring); }
.gear:hover { transform:rotate(60deg); }

/* cards */
.card { background:var(--card); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:var(--r); padding:16px; margin-bottom:14px; box-shadow:var(--shadow); transition:transform .25s var(--spring), box-shadow .25s; }
.card.hover:hover { transform:translateY(-3px); }
.card h3 { font-size:1.1rem; }
.row { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.muted { color:var(--muted); font-size:.9rem; }
.ok { color:var(--ok); }
.hero { background:linear-gradient(135deg, var(--accent), #b25cff 55%, var(--accent2)); color:#fff; border:0; position:relative; overflow:hidden; }
.hero::after { content:""; position:absolute; width:220px; height:220px; right:-60px; top:-80px; border-radius:50%; background:#ffffff22; animation:float 7s ease-in-out infinite; }
.hero .muted { color:#ffffffcc; }
.hero h2 { font-size:1.5rem; }
.ringbox { display:flex; align-items:center; gap:16px; }
.ring { width:92px; height:92px; flex:none; }
.ring circle { fill:none; stroke-width:9; stroke-linecap:round; }
.ring .bg { stroke:#ffffff40; }
.ring .fg { stroke:#fff; transition:stroke-dashoffset 1.1s var(--spring); transform:rotate(-90deg); transform-origin:50% 50%; }
.ring text { fill:#fff; font-weight:800; font-size:20px; text-anchor:middle; dominant-baseline:central; }

.alert { display:flex; gap:10px; align-items:center; background:var(--warnbg); color:var(--warn); border-radius:16px; padding:12px 14px; margin-bottom:10px; font-weight:600; animation:pop .5s var(--spring) both; animation-delay:calc(var(--i,0)*60ms); }
.allgood { display:flex; gap:10px; align-items:center; color:var(--ok); font-weight:700; }

/* cats */
.avatar { width:46px; height:46px; border-radius:16px; display:grid; place-items:center; font-size:1.6rem; flex:none; background:linear-gradient(135deg, var(--c1), var(--c2)); box-shadow:0 6px 16px var(--c1)55; }
.catHead { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.catHead .grow { flex:1; min-width:0; }
.mood { height:8px; border-radius:6px; background:var(--line); overflow:hidden; margin-top:4px; }
.mood i { display:block; height:100%; background:linear-gradient(90deg, var(--accent), var(--accent2)); border-radius:6px; transition:width .8s var(--spring); }

.meal { display:flex; align-items:center; gap:10px; padding:10px 4px; border-top:1px dashed var(--line); transition:opacity .3s; }
.meal:first-of-type { border-top:0; }
.meal.done { opacity:.6; }
.meal .time { font-weight:800; font-variant-numeric:tabular-nums; min-width:3.4rem; color:var(--accent); }
.meal .what { flex:1; min-width:0; }
.check { width:38px; height:38px; border-radius:50%; border:2px solid var(--line); background:var(--solid); display:grid; place-items:center; cursor:pointer; transition:all .3s var(--spring); flex:none; padding:0; }
.check:hover { transform:scale(1.12); border-color:var(--accent); }
.check svg { width:20px; height:20px; stroke:#fff; stroke-width:3.2; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:24; stroke-dashoffset:24; }
.meal.done .check { background:var(--ok); border-color:var(--ok); }
.meal.done .check svg { stroke-dashoffset:0; transition:stroke-dashoffset .4s .1s ease-out; }

/* buttons */
button { font:inherit; }
.btn { border:1px solid var(--line); background:var(--solid); color:var(--ink); padding:8px 14px; border-radius:12px; cursor:pointer; font-weight:600; transition:transform .2s var(--spring), box-shadow .2s, background .2s; }
.btn:hover { transform:translateY(-1px); box-shadow:var(--shadow); }
.btn:active { transform:scale(.95); }
.btn.primary { background:linear-gradient(135deg, var(--accent), #a259ff); color:#fff; border:0; box-shadow:0 6px 18px #7c5cff55; }
.btn.danger { color:var(--warn); }
.btn.sm { padding:5px 10px; font-size:.85rem; border-radius:10px; }
.btn.big { padding:14px 22px; font-size:1.05rem; border-radius:16px; }
.btn[disabled] { opacity:.5; pointer-events:none; }

/* supplies */
.bar { height:10px; background:var(--line); border-radius:6px; overflow:hidden; margin-top:10px; }
.bar i { display:block; height:100%; background:linear-gradient(90deg, #18a774, #7be0b4); border-radius:6px; transition:width 1s var(--spring); }
.bar.low i { background:linear-gradient(90deg, #e5484d, #ff9a62); }
.kind { font-size:1.6rem; }

/* rewards */
.badges { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.badge { text-align:center; padding:16px 10px; border-radius:var(--r); background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); transition:transform .3s var(--spring); }
.badge .big { font-size:2.4rem; display:block; }
.badge.locked { filter:grayscale(1); opacity:.5; }
.badge.got { background:linear-gradient(160deg, #7c5cff22, #ff8a4c22); border-color:var(--accent); }
.badge.got:hover { transform:rotate(-3deg) scale(1.05); }
.badge b { display:block; margin-top:4px; }

/* bottom nav */
.dock { position:fixed; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:2px; padding:6px; background:var(--card); backdrop-filter:blur(18px); border:1px solid var(--line); border-radius:24px; box-shadow:0 12px 40px #2a1f6a33; z-index:20; max-width:calc(100vw - 20px); }
.dock button { border:0; background:none; color:var(--muted); padding:8px 12px; border-radius:18px; cursor:pointer; display:flex; flex-direction:column; align-items:center; font-size:.72rem; font-weight:700; gap:1px; position:relative; transition:color .2s, background .3s, transform .3s var(--spring); }
.dock button span.i { font-size:1.35rem; transition:transform .35s var(--spring); }
.dock button.on { color:var(--accent); background:#7c5cff1f; }
.dock button.on span.i { transform:translateY(-2px) scale(1.15); }
.dock .dot { position:absolute; top:4px; right:8px; background:var(--warn); color:#fff; font-size:.65rem; border-radius:9px; padding:0 5px; min-width:16px; text-align:center; animation:pop .5s var(--spring); }

/* view transition + stagger */
.enter > * { animation:rise .55s var(--spring) both; animation-delay:calc(var(--i,0)*55ms); }
.pop { animation:pop .5s var(--spring) both; }

/* dialog */
dialog { border:1px solid var(--line); border-radius:24px; background:var(--solid); color:var(--ink); width:min(440px,92vw); box-shadow:0 30px 80px #0005; padding:22px; }
dialog[open] { animation:pop .4s var(--spring); }
dialog::backdrop { background:#150f2ecc; backdrop-filter:blur(4px); animation:fade .3s; }
label { display:block; margin:12px 0 4px; font-size:.85rem; font-weight:600; color:var(--muted); }
input, select, textarea { width:100%; font:inherit; padding:11px 12px; border-radius:12px; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); transition:border-color .2s, box-shadow .2s; }
input:focus, select:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 4px #7c5cff22; }
input[type=checkbox] { width:auto; margin-right:8px; accent-color:var(--accent); }
.actions { display:flex; gap:8px; justify-content:flex-end; margin-top:18px; }
.err { color:var(--warn); margin-top:8px; font-weight:600; }

/* onboarding */
#wiz { position:fixed; inset:0; z-index:50; background:radial-gradient(900px 600px at 20% 0%, #7c5cff55, transparent 60%), radial-gradient(800px 600px at 100% 100%, #ff8a4c44, transparent 60%), var(--bg); overflow:auto; animation:fade .4s; }
#wiz .inner { max-width:560px; margin:0 auto; padding:24px 18px 40px; min-height:100%; display:flex; flex-direction:column; }
.dots { display:flex; gap:6px; margin-bottom:22px; }
.dots i { flex:1; height:6px; border-radius:4px; background:var(--line); overflow:hidden; position:relative; }
.dots i::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--accent),var(--accent2)); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--spring); }
.dots i.on::after { transform:scaleX(1); }
.step { flex:1; animation:slide .5s var(--spring); }
.step.back { animation-name:slideBack; }
.step h2 { font-size:1.7rem; margin-bottom:6px; }
.bigemoji { font-size:4.5rem; display:block; margin:10px 0; animation:bounce 2s ease-in-out infinite; }
.nav { display:flex; justify-content:space-between; gap:10px; margin-top:24px; }
.seg { display:flex; gap:8px; }
.seg button { flex:1; padding:12px; border-radius:14px; border:2px solid var(--line); background:var(--solid); color:var(--ink); cursor:pointer; font-weight:700; transition:all .25s var(--spring); }
.seg button.on { border-color:var(--accent); background:#7c5cff1f; color:var(--accent); transform:scale(1.04); }
.tags { display:flex; flex-wrap:wrap; gap:8px; }
.tags button { padding:9px 14px; border-radius:99px; border:2px solid var(--line); background:var(--solid); color:var(--ink); cursor:pointer; font-weight:600; transition:all .25s var(--spring); }
.tags button.on { border-color:var(--accent); background:#7c5cff1f; color:var(--accent); }
.preview { background:linear-gradient(135deg,#7c5cff1f,#ff8a4c1f); border-radius:16px; padding:12px 14px; margin-top:12px; font-weight:600; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* toasts + fx */
#toasts { position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast { background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:99px; font-weight:700; box-shadow:0 10px 30px #0005; animation:toast 3.4s var(--spring) forwards; }
.float { position:fixed; z-index:90; font-weight:800; color:var(--accent); font-size:1.2rem; pointer-events:none; animation:floatUp 1.1s ease-out forwards; text-shadow:0 2px 8px #fff8; }
#fx { position:fixed; inset:0; pointer-events:none; z-index:100; }

@keyframes rise { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes pop { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:none; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@keyframes slide { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:none; } }
@keyframes slideBack { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:none; } }
@keyframes bounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes wiggle { 0%,90%,100% { transform:rotate(0); } 93% { transform:rotate(-14deg); } 96% { transform:rotate(12deg); } }
@keyframes flame { 0%,100% { transform:scale(1) rotate(-3deg); } 50% { transform:scale(1.2) rotate(4deg); } }
@keyframes float { 0%,100% { transform:translate(0,0); } 50% { transform:translate(-20px,16px); } }
@keyframes floatUp { from { opacity:1; transform:translateY(0) scale(.8); } to { opacity:0; transform:translateY(-70px) scale(1.3); } }
@keyframes toast { 0% { opacity:0; transform:translateY(-20px) scale(.9); } 10%,85% { opacity:1; transform:none; } 100% { opacity:0; transform:translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important; } }

.step.still { animation:none; }
.dock { bottom:calc(12px + env(safe-area-inset-bottom)); }
body { padding-bottom:calc(110px + env(safe-area-inset-bottom)); }
.top { padding-top:calc(18px + env(safe-area-inset-top)); }
#wiz .inner { padding-bottom:calc(40px + env(safe-area-inset-bottom)); }

/* ---------- mobile first: base styles above target phones; wider screens enhance below ---------- */
body { font-size:15.5px; }
.wrap { padding:0 12px; }
.brand { font-size:1.15rem; }
.chip { padding:6px 10px; }
.card { padding:14px; border-radius:18px; }
.hero h2 { font-size:1.3rem; }
.ring { width:78px; height:78px; }
.ringbox { gap:12px; }
.btn { min-height:44px; }
.btn.sm { padding:9px 12px; min-height:40px; }
.check { width:44px; height:44px; }
.row { gap:8px; }
.row > span:last-child { display:flex; gap:6px; flex-wrap:wrap; }
.meal { gap:8px; flex-wrap:wrap; }
.meal .what { flex-basis:calc(100% - 140px); }
.dock { left:10px; right:10px; transform:none; justify-content:space-between; border-radius:22px; max-width:none; }
.dock button { flex:1; padding:8px 2px; font-size:.68rem; }
.badges { grid-template-columns:1fr 1fr; gap:10px; }
.badge { padding:14px 8px; }
.two { grid-template-columns:1fr; }
.step h2 { font-size:1.45rem; }
.bigemoji { font-size:3.6rem; }
dialog { width:100%; max-width:none; margin:auto 0 0; border-radius:24px 24px 0 0; padding:20px 16px calc(20px + env(safe-area-inset-bottom)); max-height:92vh; }
dialog[open] { animation:sheet .4s var(--spring); }
.actions .btn { flex:1; }
#wiz .nav { position:sticky; bottom:0; margin:20px -18px 0; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(transparent, var(--bg) 35%); }
#wiz .nav .btn.big { flex:1; }
@keyframes sheet { from { transform:translateY(100%); } to { transform:none; } }
@media (max-width: 360px) { .dock button span.i { font-size:1.15rem; } .chip b { font-size:.8rem; } .brand { font-size:1.05rem; } }

/* tablets and up */
@media (min-width: 561px) {
  body { font-size:16px; }
  .wrap { max-width:760px; padding:0 16px; }
  .brand { font-size:1.3rem; }
  .chip { padding:6px 12px; }
  .card { padding:16px; border-radius:var(--r); }
  .hero h2 { font-size:1.5rem; }
  .ring { width:92px; height:92px; }
  .ringbox { gap:16px; }
  .btn { min-height:0; }
  .btn.sm { padding:5px 10px; min-height:0; }
  .check { width:38px; height:38px; }
  .meal .what { flex-basis:0; }
  .meal { flex-wrap:nowrap; gap:10px; }
  .dock { left:50%; right:auto; transform:translateX(-50%); justify-content:flex-start; border-radius:24px; max-width:calc(100vw - 20px); }
  .dock button { flex:none; padding:8px 14px; font-size:.72rem; }
  .badges { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .badge { padding:16px 10px; }
  .two { grid-template-columns:1fr 1fr; }
  .step h2 { font-size:1.7rem; }
  .bigemoji { font-size:4.5rem; }
  dialog { width:min(440px,92vw); margin:auto; border-radius:24px; padding:22px; max-height:none; }
  dialog[open] { animation:pop .4s var(--spring); }
  .actions .btn { flex:none; }
  #wiz .nav { position:static; margin:24px 0 0; padding:0; background:none; }
  #wiz .nav .btn.big { flex:none; }
}

/* desktop: two columns of cards */
@media (min-width: 900px) {
  .wrap { max-width:920px; }
  #main { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; align-items:start; }
  #main > .hero, #main > .alert, #main > h3, #main > .row, #main > .badges, #main > div:not(.card), #main > .card:has(.allgood) { grid-column:1 / -1; }
  .badges { grid-template-columns:repeat(4,1fr); }
}

/* tips */
.tipcard { cursor:pointer; border-style:dashed; border-color:var(--accent); }
button.tip { width:100%; text-align:left; display:flex; align-items:center; gap:12px; color:var(--ink); cursor:pointer; font:inherit; }
button.tip .grow { flex:1; }
.tip .tipicon { font-size:1.6rem; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:#7c5cff1f; flex:none; }
.tip.locked .tipicon { animation:wiggle 3.5s ease-in-out infinite; }
.tip.locked { background:linear-gradient(135deg, #7c5cff14, #ff8a4c14); border-style:dashed; }
.tip.found p { margin:8px 0 0; }
.tiphead { display:flex; align-items:center; gap:12px; }
.tip.reveal { animation:reveal .8s var(--spring); }
@keyframes reveal { 0% { transform:scale(.9) rotate(-2deg); box-shadow:0 0 0 0 #7c5cff88; } 60% { transform:scale(1.03); box-shadow:0 0 0 18px #7c5cff00; } 100% { transform:none; } }
@media (min-width: 900px) { #main > button.tip { grid-column:auto; } }

/* splash: same gradient and drifting circles as the greeting card on Today */
#splash { position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; text-align:center; padding:24px; overflow:hidden;
  background:linear-gradient(135deg, var(--accent), #b25cff 55%, var(--accent2)); background-size:160% 160%; animation:gradShift 8s ease-in-out infinite; color:#fff; transition:opacity .7s ease, transform .7s ease; }
#splash.out { opacity:0; transform:scale(1.08); pointer-events:none; }
.orb { position:absolute; border-radius:50%; background:#ffffff22; pointer-events:none; }
.orb.o1 { width:300px; height:300px; right:-90px; top:-110px; animation:float 7s ease-in-out infinite; }
.orb.o2 { width:220px; height:220px; left:-80px; bottom:8%; animation:float 9s -3s ease-in-out infinite reverse; }
.orb.o3 { width:120px; height:120px; right:12%; bottom:-40px; background:#ffffff18; animation:float 6s -1s ease-in-out infinite; }
#mute { position:absolute; top:calc(14px + env(safe-area-inset-top)); right:14px; width:44px; height:44px; border-radius:50%; border:0; background:#ffffff2e; color:#fff; font-size:1.2rem; cursor:pointer; backdrop-filter:blur(8px); z-index:1; }
.logo { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.swing { display:flex; flex-direction:column; align-items:center; transform-origin:50% 0; animation:swing 2.6s ease-in-out infinite, dropIn .9s var(--spring) both; }
.thread { width:2px; height:46px; background:#ffffff99; border-radius:2px; }
.pendant { font-size:5.2rem; line-height:1; margin-top:-4px; filter:drop-shadow(0 10px 14px #0003); }
#splash.purring .swing { animation-duration:.9s, .9s; }
.splash-title { font-size:2.6rem; font-weight:800; margin:6px 0 0; letter-spacing:-.03em; animation:rise .8s .3s var(--spring) both; }
.splash-sub { position:relative; z-index:1; margin:4px 0 0; opacity:.92; font-weight:600; animation:rise .8s .5s var(--spring) both, pulseText 2s 1.3s ease-in-out infinite; }
.heart { position:absolute; font-size:1.6rem; opacity:0; }
#splash.purring .heart { animation:heart 1.8s ease-out infinite; }
.heart.h1 { left:-30px; top:90px; } .heart.h2 { right:-34px; top:110px; animation-delay:.5s !important; } .heart.h3 { left:48%; top:40px; animation-delay:1s !important; }
@keyframes swing { 0%,100% { transform:rotate(-24deg); } 50% { transform:rotate(24deg); } }
@keyframes dropIn { from { opacity:0; translate:0 -60px; } to { opacity:1; translate:0 0; } }
@keyframes gradShift { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
@keyframes heart { 0% { opacity:0; transform:translateY(20px) scale(.6); } 20% { opacity:1; } 100% { opacity:0; transform:translateY(-70px) scale(1.2) rotate(12deg); } }
@keyframes pulseText { 0%,100% { opacity:.65; } 50% { opacity:1; } }