/* ------------------------------------------------------------------ tokens */
:root {
  --green-300:#86efac; --green-400:#4ade80; --green-500:#22c55e; --green-600:#16a34a;
  --violet:#a78bfa; --coral:#fb7185; --amber:#fbbf24; --sky:#38bdf8; --mint:#5eead4;

  --bg:#0d1211;
  --bg-glow:radial-gradient(1200px 600px at 15% -10%, rgba(34,197,94,.16), transparent 60%),
            radial-gradient(900px 500px at 100% 0%, rgba(56,189,248,.10), transparent 55%);
  --surface:rgba(255,255,255,.045);
  --surface-solid:#151c1a;
  --surface-2:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --text:#e9f1ec;
  --text-dim:#a9bab2;
  --muted:#7e938a;
  --accent:var(--green-400);
  --accent-ink:#052e16;
  --danger:#f87171;
  --shadow:0 18px 40px -24px rgba(0,0,0,.9);
  --radius:20px;
  --radius-sm:12px;
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --sidebar-w:236px;
}

html[data-theme="light"] {
  --bg:#f4f7f4;
  --bg-glow:radial-gradient(1100px 560px at 12% -12%, rgba(34,197,94,.18), transparent 60%),
            radial-gradient(800px 420px at 100% 0%, rgba(56,189,248,.12), transparent 55%);
  --surface:rgba(255,255,255,.85);
  --surface-solid:#ffffff;
  --surface-2:rgba(16,32,26,.05);
  --line:rgba(16,40,30,.10);
  --line-strong:rgba(16,40,30,.18);
  --text:#122019;
  --text-dim:#3d554a;
  --muted:#63796d;
  --accent:var(--green-600);
  --accent-ink:#ffffff;
  --shadow:0 18px 40px -28px rgba(9,40,25,.45);
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; font-family:var(--font); color:var(--text);
  background:var(--bg); background-image:var(--bg-glow); background-attachment:fixed;
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.5;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4 { margin:0; font-weight:650; letter-spacing:-.02em; }
h1 { font-size:22px; }
h2 { font-size:17px; }
h3 { font-size:15px; }
p { margin:0; }
button, input, select, textarea { font:inherit; color:inherit; }
a { color:var(--accent); text-decoration:none; }
.muted { color:var(--muted); font-size:13px; }
.dim { color:var(--text-dim); }
[hidden] { display:none !important; }
::selection { background:rgba(74,222,128,.28); }

/* ------------------------------------------------------------------- boot */
.boot { position:fixed; inset:0; display:grid; place-items:center; background:var(--bg); z-index:99; }
.boot-mark { width:46px; height:46px; border-radius:14px;
  background:linear-gradient(140deg,var(--green-300),var(--green-500)); animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ transform:scale(.9); opacity:.55 } 50%{ transform:scale(1.05); opacity:1 } }

/* ------------------------------------------------------------------ shell */
.app-shell { display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100dvh; }
.sidebar {
  position:sticky; top:0; height:100dvh; padding:22px 16px; display:flex; flex-direction:column;
  gap:20px; border-right:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
}
.brand { display:flex; align-items:center; gap:10px; padding:0 6px; }
.brand-mark { width:26px; height:26px; border-radius:9px; background:linear-gradient(140deg,var(--green-300),var(--green-500));
  box-shadow:0 6px 18px -6px rgba(34,197,94,.8); }
.brand-name { font-weight:700; letter-spacing:-.03em; font-size:18px; }
.nav { display:flex; flex-direction:column; gap:2px; }
.nav-item {
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:12px;
  color:var(--text-dim); background:none; border:0; cursor:pointer; text-align:left; width:100%;
  font-size:14.5px; font-weight:500; transition:background .16s, color .16s;
}
.nav-item:hover { background:var(--surface-2); color:var(--text); }
.nav-item.active { background:var(--surface-2); color:var(--text); font-weight:600; }
.nav-item.active .nav-icon { color:var(--accent); }
.nav-icon { width:19px; height:19px; flex:none; color:var(--muted); }
.nav-badge { margin-left:auto; font-size:11px; font-weight:700; background:var(--accent); color:var(--accent-ink);
  border-radius:99px; padding:1px 7px; }
.sidebar-foot { margin-top:auto; }
.sidebar-pet { border:1px solid var(--line); border-radius:16px; padding:12px; background:var(--surface);
  display:flex; gap:10px; align-items:center; cursor:pointer; }
.sidebar-pet:hover { border-color:var(--line-strong); }

.main { min-width:0; padding:22px 30px 60px; max-width:1180px; }
.topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.topbar-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.tabbar { display:none; }

/* ------------------------------------------------------------------ cards */
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; backdrop-filter:blur(14px); box-shadow:var(--shadow);
}
.card.tight { padding:14px; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.card-head h2 { display:flex; align-items:center; gap:8px; }
.grid { display:grid; gap:16px; }
.grid.cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid.cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.dash { display:grid; grid-template-columns:1.15fr .85fr; gap:16px; align-items:start; }
.stack { display:flex; flex-direction:column; gap:16px; }
.row { display:flex; align-items:center; gap:10px; }
.row.wrap { flex-wrap:wrap; }
.spread { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.spacer { flex:1; }

/* --------------------------------------------------------------- controls */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 14px; border-radius:12px; border:1px solid var(--line-strong);
  background:var(--surface-2); color:var(--text); font-weight:560; font-size:14px;
  cursor:pointer; transition:transform .12s, background .16s, border-color .16s; white-space:nowrap;
}
.btn:hover { background:var(--line); }
.btn:active { transform:scale(.97); }
.btn.primary { background:linear-gradient(140deg,var(--green-400),var(--green-500)); color:var(--accent-ink);
  border-color:transparent; font-weight:650; box-shadow:0 10px 24px -14px rgba(34,197,94,.9); }
.btn.primary:hover { filter:brightness(1.06); }
.btn.ghost { background:none; border-color:transparent; color:var(--text-dim); }
.btn.ghost:hover { background:var(--surface-2); color:var(--text); }
.btn.danger { color:var(--danger); border-color:rgba(248,113,113,.3); background:rgba(248,113,113,.08); }
.btn.sm { padding:6px 10px; font-size:13px; border-radius:10px; }
.btn.block { width:100%; }
.btn.icon { padding:8px; width:36px; height:36px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

.field { display:flex; flex-direction:column; gap:6px; }
.field > label { font-size:12.5px; font-weight:600; color:var(--text-dim); letter-spacing:.01em; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=time], input[type=search], select, textarea {
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--text); outline:none; transition:border-color .15s, background .15s;
}
input:focus, select:focus, textarea:focus { border-color:var(--accent); background:var(--surface); }
textarea { resize:vertical; min-height:80px; line-height:1.55; }
input[type=range] { width:100%; accent-color:var(--accent); }
select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:32px; }
.inline-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }

.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip {
  padding:7px 12px; border-radius:99px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--text-dim); font-size:13px; font-weight:550; cursor:pointer; transition:.15s;
}
.chip:hover { color:var(--text); border-color:var(--line-strong); }
.chip.active { background:var(--accent); border-color:transparent; color:var(--accent-ink); font-weight:650; }
.chip.tone-violet.active { background:var(--violet); }
.chip.tone-coral.active { background:var(--coral); }
.chip.tone-amber.active { background:var(--amber); color:#3a2a00; }
.chip.tone-sky.active { background:var(--sky); color:#04283a; }
.chip.tone-mint.active { background:var(--mint); color:#03302b; }

.pill { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:650; letter-spacing:.02em;
  padding:3px 8px; border-radius:99px; background:var(--surface-2); color:var(--text-dim); border:1px solid var(--line); }
.pill.green { background:rgba(74,222,128,.14); color:var(--green-300); border-color:rgba(74,222,128,.25); }
.pill.violet { background:rgba(167,139,250,.14); color:var(--violet); border-color:rgba(167,139,250,.25); }
.pill.coral { background:rgba(251,113,133,.14); color:var(--coral); border-color:rgba(251,113,133,.25); }
.pill.amber { background:rgba(251,191,36,.14); color:var(--amber); border-color:rgba(251,191,36,.25); }
.pill.sky { background:rgba(56,189,248,.14); color:var(--sky); border-color:rgba(56,189,248,.25); }

code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.88em;
  background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:1px 5px; }
.num { font-variant-numeric:tabular-nums; }
.big-num { font-size:34px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.1; }
.stat { display:flex; flex-direction:column; gap:2px; }
.stat .label { font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:650; }
.stat .value { font-size:19px; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* -------------------------------------------------------------- progress */
.bar { height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.bar > span { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--green-400),var(--green-300));
  transition:width .5s cubic-bezier(.2,.8,.2,1); }
.bar.thin { height:5px; }
.bar.over > span { background:linear-gradient(90deg,var(--amber),var(--coral)); }

.macro-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.macro { display:flex; flex-direction:column; gap:5px; }
.macro .top { display:flex; justify-content:space-between; font-size:12.5px; }
.macro .name { color:var(--muted); font-weight:600; }

/* ------------------------------------------------------------------- list */
.list { display:flex; flex-direction:column; }
.list-item { display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid var(--line); }
.list-item:last-child { border-bottom:0; }
.list-item .grow { flex:1; min-width:0; }
.list-item .title { font-weight:560; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-item .sub { font-size:12.5px; color:var(--muted); }
.empty { text-align:center; padding:26px 14px; color:var(--muted); font-size:13.5px; }
.empty strong { display:block; color:var(--text-dim); font-size:15px; margin-bottom:4px; font-weight:600; }

.slot-head { display:flex; align-items:center; gap:8px; margin:16px 0 6px; }
.slot-head h3 { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.slot-head .line { flex:1; height:1px; background:var(--line); }

/* ---------------------------------------------------------------- recipes */
.recipe-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.recipe-card { position:relative; border:1px solid var(--line); border-radius:18px; padding:0; overflow:hidden;
  background:var(--surface); cursor:pointer; transition:transform .16s, border-color .16s; display:flex; flex-direction:column; }
.recipe-card:hover { transform:translateY(-2px); border-color:var(--line-strong); }
.recipe-thumb { height:76px; position:relative; display:flex; align-items:flex-end; padding:10px 12px; }
.recipe-thumb.savory { background:linear-gradient(135deg,rgba(74,222,128,.34),rgba(56,189,248,.18)); }
.recipe-thumb.sweet { background:linear-gradient(135deg,rgba(244,114,182,.34),rgba(251,191,36,.26)); }
.recipe-thumb .flavor { position:absolute; top:10px; left:12px; font-size:10.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.75); }
html[data-theme="light"] .recipe-thumb .flavor { color:rgba(10,30,20,.55); }
.recipe-thumb .kcal { font-size:20px; font-weight:700; letter-spacing:-.02em; }
.recipe-thumb .kcal small { font-size:11px; font-weight:600; color:var(--text-dim); margin-left:3px; }
.recipe-body { padding:11px 12px 13px; display:flex; flex-direction:column; gap:7px; flex:1; }
.recipe-body .title { font-weight:600; font-size:14.5px; line-height:1.3; }
.recipe-meta { display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; }
.fav-star { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.32); border:0; border-radius:50%;
  width:28px; height:28px; display:grid; place-items:center; cursor:pointer; color:#fff; }
.fav-star.on { color:var(--amber); }

/* --------------------------------------------------------------- calendar */
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-head { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); text-align:center;
  font-weight:650; padding-bottom:4px; }
.cal-day { border:1px solid var(--line); border-radius:12px; min-height:78px; padding:6px; background:var(--surface-2);
  cursor:pointer; display:flex; flex-direction:column; gap:4px; transition:.15s; }
.cal-day:hover { border-color:var(--line-strong); }
.cal-day.today { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.cal-day.other { opacity:.32; }
.cal-day.selected { background:var(--surface); border-color:var(--accent); }
.cal-day .n { font-size:12px; font-weight:650; color:var(--text-dim); }
.cal-dots { display:flex; flex-wrap:wrap; gap:3px; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--muted); }
.dot.mint{background:var(--mint)} .dot.violet{background:var(--violet)} .dot.coral{background:var(--coral)}
.dot.amber{background:var(--amber)} .dot.sky{background:var(--sky)}
.dot.done { box-shadow:0 0 0 2px rgba(74,222,128,.35); }
.cal-day .kcal-mini { margin-top:auto; font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------ week budget */
.week-strip { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.week-day { border:1px solid var(--line); border-radius:12px; padding:8px 6px; text-align:center; background:var(--surface-2);
  cursor:pointer; transition:.15s; }
.week-day:hover { border-color:var(--line-strong); }
.week-day.today { border-color:var(--accent); }
.week-day.anchor { background:rgba(74,222,128,.12); }
.week-day .wd { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:650; }
.week-day .goal { font-size:13.5px; font-weight:650; font-variant-numeric:tabular-nums; margin-top:2px; }
.week-day .delta { font-size:10.5px; font-variant-numeric:tabular-nums; }
.delta-up { color:var(--green-300); } .delta-down { color:var(--amber); }

/* -------------------------------------------------------------------- pet */
.pet-stage { position:relative; display:grid; place-items:center; padding:14px 0 6px; }
.pet-stage svg { width:min(230px,60vw); height:auto; overflow:visible; }
.pet-aura { position:absolute; width:190px; height:190px; border-radius:50%; filter:blur(34px); opacity:.5;
  background:radial-gradient(circle,var(--green-400),transparent 68%); }
.pet-aura.sad { background:radial-gradient(circle,var(--amber),transparent 68%); opacity:.32; }
.pet-aura.bad { background:radial-gradient(circle,var(--coral),transparent 68%); opacity:.3; }
@keyframes bob { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }
@keyframes sway { 0%,100%{ transform:rotate(-2.5deg) } 50%{ transform:rotate(2.5deg) } }
@keyframes blink { 0%,92%,100%{ transform:scaleY(1) } 96%{ transform:scaleY(.08) } }
.pet-float { animation:bob 3.6s ease-in-out infinite; }
.pet-leaf { transform-origin:50% 100%; animation:sway 4.2s ease-in-out infinite; }
.pet-eye { transform-origin:center; animation:blink 5.5s infinite; }
.pet-mini { width:38px; height:38px; }
.xp-bar { height:6px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.xp-bar > span { display:block; height:100%; background:linear-gradient(90deg,var(--violet),var(--sky)); }

.achievements { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; }
.achv { border:1px solid var(--line); border-radius:14px; padding:11px 9px; text-align:center; background:var(--surface-2); }
.achv .ic { font-size:20px; }
.achv .nm { font-size:11.5px; font-weight:650; margin-top:5px; }
.achv .ht { font-size:10.5px; color:var(--muted); margin-top:2px; line-height:1.35; }
.achv.locked { opacity:.42; }

/* ------------------------------------------------------------------ sheet */
.sheet-backdrop { position:fixed; inset:0; background:rgba(4,10,8,.62); backdrop-filter:blur(3px); z-index:60;
  opacity:0; animation:fade .18s forwards; }
@keyframes fade { to { opacity:1 } }
.sheet { position:fixed; z-index:61; background:var(--surface-solid); border:1px solid var(--line);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.85); display:flex; flex-direction:column; }
@media (min-width:861px) {
  .sheet { top:50%; left:50%; transform:translate(-50%,-50%); width:min(620px,92vw); max-height:88vh; border-radius:22px; }
}
@media (max-width:860px) {
  .sheet { left:0; right:0; bottom:0; max-height:92dvh; border-radius:22px 22px 0 0; animation:slideup .24s cubic-bezier(.2,.8,.2,1); }
  @keyframes slideup { from { transform:translateY(30px); opacity:.4 } to { transform:none; opacity:1 } }
}
.sheet-head { padding:16px 18px 12px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; gap:12px; }
.sheet-body { padding:16px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.sheet-foot { padding:12px 18px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); display:flex; gap:8px; }
.sheet-grab { width:38px; height:4px; border-radius:99px; background:var(--line-strong); margin:8px auto 0; }

/* ----------------------------------------------------------------- toasts */
.toasts { position:fixed; z-index:80; bottom:calc(78px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:min(420px,92vw); }
@media (min-width:861px) { .toasts { bottom:24px; left:auto; right:24px; transform:none; align-items:flex-end; } }
.toast { background:var(--surface-solid); border:1px solid var(--line-strong); border-radius:14px; padding:10px 14px;
  box-shadow:var(--shadow); font-size:13.5px; display:flex; align-items:center; gap:9px; animation:toastin .22s ease; }
@keyframes toastin { from { transform:translateY(8px); opacity:0 } }
.toast.good { border-color:rgba(74,222,128,.4); }
.toast.bad { border-color:rgba(248,113,113,.45); }
.toast .xp { font-weight:700; color:var(--green-300); }

/* ------------------------------------------------------------------- auth */
.auth { min-height:100dvh; display:grid; place-items:center; padding:24px; }
.auth-card { width:min(420px,100%); }
.auth-hero { text-align:center; margin-bottom:20px; }
.auth-hero .mark { width:56px; height:56px; border-radius:18px; margin:0 auto 12px;
  background:linear-gradient(140deg,var(--green-300),var(--green-500)); box-shadow:0 14px 34px -14px rgba(34,197,94,.9); }
.steps { display:flex; gap:6px; margin-bottom:16px; }
.step-dot { height:4px; flex:1; border-radius:99px; background:var(--surface-2); }
.step-dot.on { background:var(--accent); }

/* ------------------------------------------------------------------ misc */
.scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.divider { height:1px; background:var(--line); margin:4px 0; }
.kv { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--line); font-size:14px; }
.kv:last-child { border-bottom:0; }
.kv .k { color:var(--muted); }
.kv .v { font-weight:600; font-variant-numeric:tabular-nums; }
.thumb { width:46px; height:46px; border-radius:12px; object-fit:cover; border:1px solid var(--line); }
.note-box { background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:13px; color:var(--text-dim); line-height:1.55; }
.check { width:22px; height:22px; border-radius:7px; border:1.5px solid var(--line-strong); background:none; cursor:pointer;
  display:grid; place-items:center; flex:none; transition:.15s; }
.check.on { background:var(--accent); border-color:transparent; color:var(--accent-ink); }
.strike { text-decoration:line-through; opacity:.45; }
.ingredient-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); }
.ingredient-row:last-child { border-bottom:0; }
.ingredient-row .amt { font-variant-numeric:tabular-nums; color:var(--text-dim); font-size:13.5px; min-width:78px; text-align:right; }
.steps-list { counter-reset:step; display:flex; flex-direction:column; gap:10px; }
.steps-list li { list-style:none; display:flex; gap:11px; font-size:14px; line-height:1.55; color:var(--text-dim); }
.steps-list li::before { counter-increment:step; content:counter(step); flex:none; width:22px; height:22px; border-radius:8px;
  background:var(--surface-2); color:var(--accent); font-size:11.5px; font-weight:700; display:grid; place-items:center; margin-top:1px; }
.photo-drop { border:1.5px dashed var(--line-strong); border-radius:16px; padding:22px; text-align:center; cursor:pointer;
  color:var(--muted); font-size:13.5px; transition:.15s; }
.photo-drop:hover { border-color:var(--accent); color:var(--text-dim); }
.photo-preview { width:100%; border-radius:14px; border:1px solid var(--line); max-height:260px; object-fit:cover; }
.loading-dots::after { content:'.'; animation:dots 1.2s steps(4,end) infinite; }
@keyframes dots { 0%{content:'.'} 33%{content:'..'} 66%{content:'...'} }

/* ------------------------------------------------------------- responsive */
@media (max-width:860px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .main { padding:14px 14px calc(96px + env(safe-area-inset-bottom)); }
  .topbar { position:sticky; top:0; z-index:20; padding:10px 0; margin:-14px 0 12px;
    background:linear-gradient(var(--bg) 70%, transparent); backdrop-filter:blur(8px); }
  h1 { font-size:20px; }
  .dash, .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns:1fr; }
  .tabbar {
    display:grid; grid-template-columns:repeat(5,1fr); position:fixed; bottom:0; left:0; right:0; z-index:40;
    padding:8px 6px calc(8px + env(safe-area-inset-bottom)); gap:2px;
    background:color-mix(in srgb, var(--surface-solid) 88%, transparent); backdrop-filter:blur(18px);
    border-top:1px solid var(--line);
  }
  .tab { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px; border:0; background:none;
    color:var(--muted); font-size:10.5px; font-weight:600; cursor:pointer; border-radius:12px; }
  .tab.active { color:var(--accent); }
  .tab svg { width:21px; height:21px; }
  .recipe-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .cal-day { min-height:56px; padding:4px; }
  .macro-row { gap:8px; }
}
@media (min-width:861px) and (max-width:1080px) { :root { --sidebar-w:200px; } .main { padding:20px; } }

/* ------------------------------------------------------------ icon sizing */
.btn svg, .pill svg, .check svg, .fav-star svg { width:17px; height:17px; flex:none; }
.btn.icon svg { width:18px; height:18px; }
.check svg { width:14px; height:14px; }
.tab svg { width:21px; height:21px; }
.nav-icon { width:19px; height:19px; }
.pet-eye { transform-box:fill-box; transform-origin:center; }
.pet-leaf { transform-box:fill-box; transform-origin:50% 100%; }

/* -------------------------------------------------- overflow containment */
/* Flex and grid children default to min-width:auto, which lets long numbers
   and fixed-size charts push the page wider than a phone screen. */
.grid > *, .dash > *, .stack > *, .macro-row > *, .row > *, .list-item > *, .spread > * { min-width:0; }
.card svg[viewBox] { max-width:100%; }
.list-item .title, .list-item .sub { overflow:hidden; text-overflow:ellipsis; }
body { overflow-x:hidden; }

@media (max-width:860px) {
  .macro-row { grid-template-columns:1fr; gap:6px; }
  .macro .top { font-size:12px; }
  .week-strip { gap:4px; }
  .week-day { padding:7px 2px; }
  .week-day .goal { font-size:12px; }
  .week-day .wd { font-size:9.5px; }
  .stat .value { font-size:17px; }
  .card { padding:15px; }
  .topbar-actions .btn { padding:8px 11px; font-size:13px; }
}
@media (max-width:860px) { .ring-wrap { margin:0 auto; } }

/* ------------------------------------------- light theme colour contrast */
html[data-theme="light"] .pill.green { background:rgba(22,163,74,.12); color:#15803d; border-color:rgba(22,163,74,.28); }
html[data-theme="light"] .pill.violet { background:rgba(124,58,237,.10); color:#6d28d9; border-color:rgba(124,58,237,.25); }
html[data-theme="light"] .pill.coral { background:rgba(225,29,72,.10); color:#be123c; border-color:rgba(225,29,72,.24); }
html[data-theme="light"] .pill.amber { background:rgba(180,83,9,.12); color:#b45309; border-color:rgba(180,83,9,.24); }
html[data-theme="light"] .pill.sky { background:rgba(2,132,199,.10); color:#0369a1; border-color:rgba(2,132,199,.24); }
html[data-theme="light"] .delta-up { color:#15803d; }
html[data-theme="light"] .delta-down { color:#b45309; }
html[data-theme="light"] .toast .xp { color:#15803d; }
html[data-theme="light"] .fav-star { background:rgba(255,255,255,.72); color:#3d554a; }
html[data-theme="light"] .fav-star.on { color:#b45309; }
html[data-theme="light"] .pet-aura { opacity:.35; }
.grow { flex:1; min-width:0; }

/* ========================================================== social layer */
.bell { position:relative; flex:none; }
.bell-dot { position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px;
  border-radius:99px; background:var(--coral); color:#fff; font-size:10px; font-weight:700;
  display:grid; place-items:center; line-height:1; }
.notif.unread .title { font-weight:650; }

/* members */
.member-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; }
.member { display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--line);
  border-radius:16px; background:var(--surface-2); }
.member.me { border-color:var(--accent); background:rgba(74,222,128,.07); }
.member-pet { width:72px; height:72px; flex:none; }
.member-pet svg { width:72px; height:72px; }
.member-name { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; font-size:15px; }
.member-title { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--line-strong); border-radius:99px; padding:1px 7px; }
.member-actions { display:flex; flex-direction:column; gap:6px; align-self:center; }

/* challenges */
.challenge { display:block; width:100%; text-align:left; cursor:pointer; margin-bottom:10px;
  padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2);
  color:inherit; font:inherit; transition:border-color .15s, transform .12s; }
.challenge:hover { border-color:var(--line-strong); transform:translateY(-1px); }
.challenge.past { opacity:.6; }
.challenge-title { font-weight:650; font-size:15.5px; }
.post-strip { display:flex; gap:6px; margin-top:10px; }
.post-strip img { width:44px; height:44px; border-radius:10px; object-fit:cover; border:1px solid var(--line); }
.post-chip { font-size:11px; padding:4px 8px; border-radius:8px; background:var(--surface); color:var(--muted); }
.rank { width:26px; height:26px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:var(--surface-2); font-size:12.5px; font-weight:700; color:var(--muted); }
.rank.gold { background:linear-gradient(140deg,#fde68a,#f59e0b); color:#3a2a00; }

/* challenge posts */
.post { border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-bottom:12px; background:var(--surface-2); }
.post img { width:100%; max-height:280px; object-fit:cover; display:block; }
.post-body { padding:12px 14px 14px; }
.comments { margin-top:10px; display:flex; flex-direction:column; gap:6px; font-size:13.5px;
  color:var(--text-dim); border-left:2px solid var(--line); padding-left:10px; }
.comments strong { color:var(--text); }

.invite-code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:30px; font-weight:700;
  letter-spacing:.22em; text-align:center; padding:18px; border:1px dashed var(--line-strong);
  border-radius:16px; background:var(--surface-2); }

/* shop */
.shop-grid { display:flex; flex-direction:column; gap:10px; }
.shop-item { display:flex; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--line);
  border-radius:14px; background:var(--surface-2); }
.shop-item.on { border-color:var(--accent); background:rgba(74,222,128,.08); }
.shop-item.locked { opacity:.6; }
.shop-swatch { width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line); }
.dot-big { width:26px; height:26px; border-radius:50%; display:block; }

.stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:14px; }

@media (max-width:860px) {
  .member-grid { grid-template-columns:1fr; }
  .member-pet, .member-pet svg { width:58px; height:58px; }
  .invite-code { font-size:24px; letter-spacing:.16em; }
}

@media (max-width:860px) {
  /* Phone topbar: title on its own line, actions scroll sideways, bell pinned. */
  .topbar { flex-wrap:wrap; position:relative; padding-right:44px; }
  .topbar-title { flex:1 1 100%; min-width:0; }
  .topbar-title h1 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar-actions { flex:1 1 100%; justify-content:flex-start; flex-wrap:nowrap;
    overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .topbar-actions::-webkit-scrollbar { display:none; }
  #notif-bell { position:absolute; top:8px; right:0; }
}

/* ------------------------------------------------------------------- goals */
.goal-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:10px; }
.goal-card { position:relative; display:flex; flex-direction:column; gap:6px; text-align:left; cursor:pointer;
  padding:13px 14px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2);
  color:inherit; font:inherit; transition:border-color .15s, transform .12s, background .15s; }
.goal-card:hover { border-color:var(--line-strong); transform:translateY(-1px); }
.goal-card.active { border-color:var(--goal-color,var(--accent)); background:var(--surface);
  box-shadow:0 0 0 1px var(--goal-color,var(--accent)) inset; }
.goal-card .goal-top { display:flex; align-items:center; gap:9px; }
.goal-card .goal-mark { width:30px; height:30px; flex:none; border-radius:10px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--goal-color,var(--accent)) 18%, transparent); color:var(--goal-color,var(--accent)); }
.goal-card .goal-mark svg { width:17px; height:17px; }
.goal-card .goal-name { font-weight:650; font-size:14.5px; letter-spacing:-.01em; }
.goal-card .goal-tag { font-size:12.5px; color:var(--muted); line-height:1.45; }
.goal-card .goal-facts { display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.goal-card .goal-check { position:absolute; top:11px; right:12px; color:var(--goal-color,var(--accent)); }
.goal-card .goal-check svg { width:16px; height:16px; }

.goal-banner { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px;
  border:1px solid var(--line); background:var(--surface-2); }
.goal-banner .goal-mark { width:34px; height:34px; flex:none; border-radius:11px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--goal-color,var(--accent)) 18%, transparent); color:var(--goal-color,var(--accent)); }
.goal-banner .goal-mark svg { width:18px; height:18px; }

/* focus tiles: the one or two numbers the current goal cares about */
.focus-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.focus-tile { border:1px solid var(--line); border-radius:14px; padding:11px 12px; background:var(--surface-2);
  display:flex; flex-direction:column; gap:7px; }
.focus-tile.done { border-color:rgba(74,222,128,.35); background:rgba(74,222,128,.07); }
.focus-tile .f-label { font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:650; }
.focus-tile .f-value { font-size:20px; font-weight:680; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.focus-tile .f-value small { font-size:12.5px; font-weight:600; color:var(--muted); margin-left:2px; }
.focus-tile .f-hint { font-size:11.5px; color:var(--muted); line-height:1.4; }

/* weekly training mix */
.mix-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.mix-row:last-child { border-bottom:0; }
.mix-row .mix-grow { flex:1; min-width:0; }
.mix-row .mix-top { display:flex; justify-content:space-between; gap:10px; font-size:13.5px; margin-bottom:5px; }
.mix-row .mix-why { font-size:11.5px; color:var(--muted); line-height:1.4; margin-top:5px; }
.mix-row .mix-tick { width:20px; height:20px; flex:none; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-strong); color:var(--muted); }
.mix-row.done .mix-tick { background:var(--accent); border-color:transparent; color:var(--accent-ink); }
.mix-row .mix-tick svg { width:12px; height:12px; }

/* coach */
.insight { border-left:3px solid var(--line-strong); padding:2px 0 2px 12px; margin-bottom:14px; }
.insight:last-child { margin-bottom:0; }
.insight.good { border-left-color:var(--green-400); }
.insight.warn { border-left-color:var(--amber); }
.insight.info { border-left-color:var(--sky); }
.insight h4 { font-size:14px; font-weight:650; margin-bottom:3px; }
.insight p { font-size:13px; color:var(--text-dim); line-height:1.55; }
.insight .btn { margin-top:8px; }
.coach-suggest { border:1px solid var(--accent); background:rgba(74,222,128,.08); border-radius:16px;
  padding:13px 14px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.coach-suggest .cs-nums { font-size:19px; font-weight:680; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.coach-suggest .cs-nums s { color:var(--muted); font-weight:600; text-decoration-color:var(--muted); }

@media (max-width:860px) {
  .goal-grid { grid-template-columns:1fr; }
  .focus-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

input[type=checkbox] { accent-color:var(--accent); width:16px; height:16px; }