/* ============ Huellitas Vitales — Design System ============ */
:root{
  --coral:#ff7a59; --coral-d:#f2603c; --coral-l:#ffd9cd;
  --teal:#1fb4a6; --teal-d:#159286; --teal-l:#c9f0eb;
  --sun:#ffc24b; --sun-l:#ffe9bd;
  --grape:#8b7be8; --grape-l:#e6e1fb;   /* gato */
  --sky:#3fa9ec; --sky-l:#d4ecfb;       /* perro */
  --pink:#ff6f9c;

  --bg:#fff7f0; --bg2:#fdeee2;
  --card:#ffffff; --card-2:#fff3ea;
  --ink:#3b2b26; --ink-2:#7a6a62; --ink-3:#a99a91;
  --line:#f0e0d4; --line-2:#eaddcc;
  --ok:#37b24d;

  --r:20px; --r-sm:14px; --r-lg:28px;
  --sh-sm:0 2px 8px rgba(120,72,48,.08);
  --sh:0 10px 30px rgba(120,72,48,.12);
  --sh-lg:0 20px 50px rgba(120,72,48,.18);
  --side-w:280px;
  --head:'Baloo 2', system-ui, sans-serif;
  --body:'Nunito', system-ui, -apple-system, sans-serif;
  --maxread:760px;
}
:root[data-theme="dark"]{
  --bg:#211a1f; --bg2:#2a2029;
  --card:#2c2530; --card-2:#342a35;
  --ink:#f6eee9; --ink-2:#c8b8b0; --ink-3:#9a8a82;
  --line:#3c3038; --line-2:#443743;
  --coral-l:#5a3327; --teal-l:#173f3b; --sun-l:#4a3a1c; --grape-l:#332a52; --sky-l:#1d3547;
  --sh-sm:0 2px 8px rgba(0,0,0,.3); --sh:0 10px 30px rgba(0,0,0,.4); --sh-lg:0 20px 50px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--body); color:var(--ink);
  background:
    radial-gradient(1200px 500px at 100% -5%, var(--coral-l) 0%, transparent 55%),
    radial-gradient(1000px 500px at -10% 8%, var(--teal-l) 0%, transparent 50%),
    var(--bg);
  background-attachment:fixed;
  font-size:16px; line-height:1.55; overflow-x:hidden;
  padding-top:env(safe-area-inset-top);
}
h1,h2,h3,h4{font-family:var(--head); font-weight:700; line-height:1.15; margin:0 0 .4em; color:var(--ink); letter-spacing:.2px}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font-family:inherit}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important; transition-duration:.001s!important}}

/* scroll progress */
#scroll-progress{position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--coral),var(--sun),var(--teal)); z-index:60; transition:width .1s}

/* ============ Topbar ============ */
.topbar{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:12px;
  padding:10px clamp(12px,3vw,22px); background:color-mix(in srgb,var(--card) 82%, transparent);
  backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line);
  padding-top:calc(10px + env(safe-area-inset-top))}
.brand{display:flex; align-items:center; gap:9px; font-family:var(--head); font-weight:800; font-size:1.15rem; margin-right:auto}
.brand-mark{font-size:1.5rem; filter:drop-shadow(0 3px 4px rgba(242,96,60,.35))}
.brand-name{background:linear-gradient(90deg,var(--coral-d),var(--coral)); -webkit-background-clip:text; background-clip:text; color:transparent}
.topbar-actions{display:flex; align-items:center; gap:8px}
.icon-btn{width:42px; height:42px; border:none; border-radius:14px; background:var(--card-2); color:var(--ink);
  font-size:1.15rem; cursor:pointer; display:grid; place-items:center; box-shadow:var(--sh-sm); transition:transform .15s, background .2s}
.icon-btn:hover{transform:translateY(-2px)}
.icon-btn:active{transform:scale(.94)}
.menu-btn{display:none}
.level-chip{display:flex; align-items:center; gap:5px; padding:7px 12px 7px 9px; border-radius:14px;
  background:linear-gradient(135deg,var(--sun),var(--coral)); color:#fff; font-family:var(--head); font-weight:800; box-shadow:var(--sh-sm)}
.level-emoji{font-size:1.05rem}

/* popover (language) */
.popover{position:fixed; top:60px; right:14px; z-index:70; background:var(--card); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--sh-lg); padding:6px; min-width:170px; animation:pop .18s}
@keyframes pop{from{opacity:0; transform:translateY(-6px) scale(.98)}to{opacity:1}}
.popover button{display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; border:none; background:none;
  border-radius:11px; cursor:pointer; font-size:.98rem; color:var(--ink); text-align:left}
.popover button:hover{background:var(--card-2)}
.popover button.active{background:var(--coral-l); font-weight:700}
.popover .fl{font-size:1.2rem}

/* ============ Layout ============ */
.layout{display:grid; grid-template-columns:var(--side-w) 1fr; max-width:1320px; margin:0 auto}
.sidebar{position:sticky; top:64px; align-self:start; height:calc(100dvh - 64px); overflow-y:auto;
  padding:22px 16px; display:flex; flex-direction:column; gap:14px}
.nav{display:flex; flex-direction:column; gap:6px}
.nav-link{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; font-weight:700; color:var(--ink-2);
  transition:background .18s, color .18s, transform .12s}
.nav-link .ni{font-size:1.2rem; width:24px; text-align:center}
.nav-link:hover{background:var(--card-2); color:var(--ink)}
.nav-link.active{background:linear-gradient(135deg,var(--coral),var(--coral-d)); color:#fff; box-shadow:var(--sh-sm)}
.sidebar-progress{margin-top:6px}
.install-cta{display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border:2px dashed var(--teal);
  color:var(--teal-d); background:var(--teal-l); border-radius:14px; font-weight:800; cursor:pointer}
.sidebar-note{font-size:.76rem; color:var(--ink-3); margin-top:auto; line-height:1.4}

.scrim{position:fixed; inset:0; background:rgba(30,16,10,.45); z-index:44; display:none}
.main{min-width:0; padding:clamp(16px,3vw,30px) clamp(14px,3.5vw,40px) 90px; min-height:100dvh; outline:none}

/* ============ Buttons / chips ============ */
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:14px; border:none; cursor:pointer;
  font-family:var(--head); font-weight:700; font-size:1rem; transition:transform .15s, box-shadow .2s; text-decoration:none}
.btn:active{transform:scale(.96)}
.btn-primary{background:linear-gradient(135deg,var(--coral),var(--coral-d)); color:#fff; box-shadow:var(--sh)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--sh-lg)}
.btn-ghost{background:var(--card); color:var(--ink); box-shadow:var(--sh-sm); border:1px solid var(--line)}
.btn-ghost:hover{transform:translateY(-2px)}

.badge{display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px; font-size:.78rem; font-weight:800;
  background:var(--card-2); color:var(--ink-2); white-space:nowrap}
.badge .bi{font-size:.9rem}
.badge.dog{background:var(--sky-l); color:#1f6ea0}
.badge.cat{background:var(--grape-l); color:#5a44b8}
.badge.stage{background:var(--sun-l); color:#a9701a}
.badge.time{background:var(--teal-l); color:var(--teal-d)}
.badge.diff-fácil,.badge.diff-easy{background:#dff5e2; color:#2c8a3d}
.badge.diff-media,.badge.diff-medium{background:var(--sun-l); color:#a9701a}
.badge.diff-avanzada,.badge.diff-hard{background:var(--coral-l); color:var(--coral-d)}
.badge.protein{background:#ffe9e0; color:var(--coral-d)}
.badge.type{background:var(--teal-l); color:var(--teal-d)}
.badge.obj{background:#e6f7ee; color:#1f9d63}
:root[data-theme="dark"] .badge.obj{background:#173f2b; color:#5fd39a}
.badge.done{background:var(--ok); color:#fff}
.rc-bonus{position:absolute; top:9px; right:9px; z-index:2; background:linear-gradient(135deg,var(--sun),var(--coral));
  color:#fff; font-weight:800; font-size:.68rem; padding:4px 9px; border-radius:999px; box-shadow:var(--sh-sm)}
.rcard.done .rc-bonus{right:40px}
.obj-card .emoji{filter:drop-shadow(0 3px 5px rgba(31,157,99,.25))}
.obj-card{border-color:#d6f0e2}
:root[data-theme="dark"] .obj-card{border-color:#2a4a39}

/* ============ Home ============ */
.section{margin-bottom:38px; animation:fade .4s}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1}}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.section-head h2{margin:0; font-size:clamp(1.25rem,3.5vw,1.6rem)}
.section-head .link{color:var(--coral-d); font-weight:800; font-size:.9rem}

.hero{position:relative; overflow:hidden; border-radius:var(--r-lg); padding:clamp(24px,5vw,52px);
  background:linear-gradient(135deg,var(--coral) 0%, var(--coral-d) 55%, #e04e2c 100%); color:#fff; box-shadow:var(--sh-lg); margin-bottom:34px}
.hero::before{content:"🐾"; position:absolute; font-size:16rem; right:-2rem; top:-3rem; opacity:.13; transform:rotate(-18deg)}
.hero::after{content:"🦴"; position:absolute; font-size:8rem; right:22%; bottom:-2rem; opacity:.12; transform:rotate(12deg)}
.hero h1{color:#fff; font-size:clamp(1.7rem,5vw,2.8rem); max-width:16ch; margin-bottom:.35em}
.hero p{max-width:52ch; font-size:clamp(1rem,2.4vw,1.18rem); opacity:.96; font-weight:600}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}
.hero .btn-primary{background:#fff; color:var(--coral-d)}
.hero .btn-ghost{background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.35)}
.hero-stats{display:flex; gap:26px; margin-top:26px; flex-wrap:wrap}
.hstat b{font-family:var(--head); font-size:1.7rem; display:block; line-height:1}
.hstat span{font-size:.82rem; opacity:.9; font-weight:700}

/* species cards */
.grid{display:grid; gap:16px}
.grid.species{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.species-card{position:relative; overflow:hidden; border-radius:var(--r); padding:22px; color:#fff; cursor:pointer;
  box-shadow:var(--sh); transition:transform .18s, box-shadow .2s; min-height:130px; display:flex; flex-direction:column; justify-content:space-between}
.species-card:hover{transform:translateY(-4px); box-shadow:var(--sh-lg)}
.species-card.dog{background:linear-gradient(135deg,var(--sky),#2b8fd0)}
.species-card.cat{background:linear-gradient(135deg,var(--grape),#6d59d8)}
.species-card.all{background:linear-gradient(135deg,var(--teal),var(--teal-d))}
.species-card .emoji{font-size:2.6rem}
.species-card h3{color:#fff; margin:0; font-size:1.35rem}
.species-card small{opacity:.92; font-weight:700}
.species-card .big-emoji{position:absolute; right:-8px; bottom:-14px; font-size:6rem; opacity:.22}

/* stage cards */
.grid.stages{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.stage-card{background:var(--card); border-radius:var(--r); padding:18px; box-shadow:var(--sh-sm); cursor:pointer;
  border:1px solid var(--line); transition:transform .16s, box-shadow .2s; text-align:center}
.stage-card:hover{transform:translateY(-3px); box-shadow:var(--sh)}
.stage-card .emoji{font-size:2.2rem}
.stage-card h4{margin:.3em 0 .1em; font-size:1.1rem}
.stage-card small{color:var(--ink-3); font-weight:700}

/* ============ Recipe cards ============ */
.grid.recipes{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.rcard{position:relative; background:var(--card); border-radius:var(--r); overflow:hidden; cursor:pointer;
  box-shadow:var(--sh-sm); border:1px solid var(--line); transition:transform .16s, box-shadow .2s; display:flex; flex-direction:column}
.rcard:hover{transform:translateY(-4px); box-shadow:var(--sh)}
.rcard-top{position:relative; height:112px; display:grid; place-items:center; overflow:hidden}
.rcard-top .rc-emoji{font-size:3.4rem; filter:drop-shadow(0 6px 8px rgba(0,0,0,.15)); z-index:1}
.rcard-top::after{content:""; position:absolute; right:-20px; bottom:-20px; font-size:5rem; opacity:.5}
.rcard.sp-dog .rcard-top{background:linear-gradient(135deg,var(--sky-l),#eaf6ff)}
.rcard.sp-cat .rcard-top{background:linear-gradient(135deg,var(--grape-l),#f2effe)}
:root[data-theme="dark"] .rcard.sp-dog .rcard-top{background:linear-gradient(135deg,#1d3547,#16283a)}
:root[data-theme="dark"] .rcard.sp-cat .rcard-top{background:linear-gradient(135deg,#332a52,#241d3d)}
.rc-species{position:absolute; top:9px; left:9px; z-index:2}
.rc-done{position:absolute; top:9px; right:9px; z-index:2; width:26px; height:26px; border-radius:50%; background:var(--ok); color:#fff;
  display:none; place-items:center; font-size:.85rem; box-shadow:var(--sh-sm)}
.rcard.done .rc-done{display:grid}
.rcard.done::before{content:""; position:absolute; inset:0; border:2.5px solid var(--ok); border-radius:var(--r); z-index:3; pointer-events:none}
.rcard-body{padding:13px 14px 15px; display:flex; flex-direction:column; gap:9px; flex:1}
.rcard-body h3{font-size:1.02rem; margin:0; line-height:1.2}
.rcard-badges{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto}
.rcard-badges .badge{font-size:.7rem; padding:4px 9px}

/* ============ Toolbar (recipes) ============ */
.toolbar{position:sticky; top:60px; z-index:30; background:color-mix(in srgb,var(--bg) 90%, transparent);
  backdrop-filter:blur(8px); padding:12px 0; margin-bottom:8px}
.searchbar{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:12px 16px; box-shadow:var(--sh-sm)}
.searchbar input{border:none; background:none; outline:none; flex:1; font-size:1rem; color:var(--ink); font-family:inherit}
.searchbar .si{font-size:1.15rem; opacity:.6}
.tool-row{display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap}
.chip-btn{padding:9px 15px; border-radius:12px; border:1px solid var(--line); background:var(--card); cursor:pointer; font-weight:800;
  font-size:.86rem; color:var(--ink-2); display:inline-flex; align-items:center; gap:7px; transition:all .15s}
.chip-btn:hover{border-color:var(--coral); color:var(--coral-d)}
.chip-btn.active{background:var(--coral); color:#fff; border-color:var(--coral)}
.chip-btn .count{background:rgba(255,255,255,.3); padding:1px 7px; border-radius:8px; font-size:.75rem}
.result-count{color:var(--ink-2); font-weight:700; font-size:.9rem; margin-left:auto}
select.sortsel{padding:9px 14px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-weight:700; font-family:inherit; cursor:pointer}

/* filter drawer */
.filter-panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; margin-top:10px; box-shadow:var(--sh-sm); animation:fade .25s}
.filter-group{margin-bottom:14px}
.filter-group h4{font-size:.82rem; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-3); margin-bottom:8px}
.filter-opts{display:flex; flex-wrap:wrap; gap:7px}
.fopt{padding:7px 13px; border-radius:11px; border:1px solid var(--line); background:var(--bg); cursor:pointer; font-weight:700; font-size:.84rem; color:var(--ink-2); transition:all .14s}
.fopt:hover{border-color:var(--coral)}
.fopt.active{background:var(--coral-l); border-color:var(--coral); color:var(--coral-d)}

/* ============ Recipe detail ============ */
.detail{max-width:var(--maxread); margin:0 auto}
.detail-back{display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); font-weight:800; margin-bottom:14px; cursor:pointer}
.detail-hero{border-radius:var(--r-lg); padding:26px; color:#fff; position:relative; overflow:hidden; box-shadow:var(--sh); margin-bottom:20px}
.detail-hero.sp-dog{background:linear-gradient(135deg,var(--sky),#2b8fd0)}
.detail-hero.sp-cat{background:linear-gradient(135deg,var(--grape),#6d59d8)}
.detail-hero .dh-emoji{position:absolute; right:-6px; bottom:-16px; font-size:8rem; opacity:.25}
.detail-hero h1{color:#fff; font-size:clamp(1.5rem,4.5vw,2.2rem); max-width:18ch; position:relative}
.detail-badges{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px}
.detail-badges .badge{background:rgba(255,255,255,.9)}
.detail-hero .detail-badges{margin-top:14px; margin-bottom:0}

.card-block{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; margin-bottom:18px; box-shadow:var(--sh-sm)}
.card-block h2{font-size:1.15rem; display:flex; align-items:center; gap:9px; margin-bottom:14px}
.ingr-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px}
.ingr-list li{display:flex; align-items:flex-start; gap:12px; padding:10px 8px; border-radius:11px; cursor:pointer; transition:background .15s}
.ingr-list li:hover{background:var(--card-2)}
.ingr-check{width:22px; height:22px; border-radius:7px; border:2px solid var(--teal); flex-shrink:0; margin-top:1px; display:grid; place-items:center; color:#fff; font-size:.8rem; transition:background .15s}
.ingr-list li.checked .ingr-check{background:var(--teal)}
.ingr-list li.checked span{text-decoration:line-through; color:var(--ink-3)}
.steps-list{list-style:none; padding:0; margin:0; counter-reset:step; display:flex; flex-direction:column; gap:14px}
.steps-list li{display:flex; gap:14px; align-items:flex-start}
.step-num{counter-increment:step; flex-shrink:0; width:32px; height:32px; border-radius:11px; background:linear-gradient(135deg,var(--coral),var(--coral-d));
  color:#fff; font-family:var(--head); font-weight:800; display:grid; place-items:center; box-shadow:var(--sh-sm)}
.step-num::before{content:counter(step)}
.steps-list li p{margin:3px 0 0}
.keypoints{display:flex; flex-wrap:wrap; gap:8px}
.kp{background:var(--teal-l); color:var(--teal-d); padding:7px 13px; border-radius:11px; font-weight:800; font-size:.85rem}
.info-row{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line)}
.info-row .ir-ico{font-size:1.3rem}
.info-row b{display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-3)}

.done-btn{width:100%; padding:16px; border-radius:16px; border:none; cursor:pointer; font-family:var(--head); font-weight:800; font-size:1.1rem;
  background:linear-gradient(135deg,var(--teal),var(--teal-d)); color:#fff; box-shadow:var(--sh); transition:transform .15s; display:flex; align-items:center; justify-content:center; gap:10px}
.done-btn:hover{transform:translateY(-2px); box-shadow:var(--sh-lg)}
.done-btn.is-done{background:linear-gradient(135deg,var(--ok),#2c9a40)}
.detail-nav{display:flex; justify-content:space-between; gap:12px; margin-top:22px}
.detail-nav a{flex:1; padding:14px; border-radius:14px; background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-sm); font-weight:800; color:var(--ink-2)}
.detail-nav a.n{text-align:right}
.detail-nav a:hover{color:var(--coral-d)}
.detail-nav small{display:block; font-size:.72rem; color:var(--ink-3); text-transform:uppercase}

/* ============ Guide ============ */
.guide-wrap{max-width:var(--maxread); margin:0 auto}
.guide-tabs{display:flex; gap:10px; margin-bottom:20px}
.guide-tab{flex:1; padding:14px; border-radius:16px; border:1px solid var(--line); background:var(--card); cursor:pointer; font-family:var(--head);
  font-weight:800; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:var(--sh-sm); transition:all .15s}
.guide-tab.active{background:linear-gradient(135deg,var(--teal),var(--teal-d)); color:#fff; border-color:transparent}
.guide-item{background:var(--card); border:1px solid var(--line); border-radius:var(--r); margin-bottom:14px; box-shadow:var(--sh-sm); overflow:hidden}
.guide-item summary{padding:18px 20px; cursor:pointer; font-family:var(--head); font-weight:700; font-size:1.08rem; display:flex; align-items:center; gap:12px; list-style:none}
.guide-item summary::-webkit-details-marker{display:none}
.guide-item summary .gi-ico{width:38px; height:38px; border-radius:11px; background:var(--teal-l); display:grid; place-items:center; font-size:1.2rem; flex-shrink:0}
.guide-item summary .chev{margin-left:auto; transition:transform .2s; color:var(--ink-3)}
.guide-item[open] summary .chev{transform:rotate(180deg)}
.guide-body{padding:0 20px 20px 70px}
.guide-body p{margin:0 0 10px; color:var(--ink-2)}
.table-note{background:var(--sun-l); color:#8a5a12; border-left:4px solid var(--sun); padding:12px 14px; border-radius:10px; font-weight:600; font-size:.9rem; margin-bottom:12px; line-height:1.45}
:root[data-theme="dark"] .table-note{color:#ffd98a}
.ration-table{overflow-x:auto; margin-top:14px; border-radius:14px; border:1px solid var(--line); -webkit-overflow-scrolling:touch}
.ration-table table{border-collapse:collapse; width:100%; min-width:420px; font-size:.92rem}
.ration-table th{background:linear-gradient(135deg,var(--teal),var(--teal-d)); color:#fff; font-family:var(--head); font-weight:700;
  padding:12px 14px; text-align:center; font-size:.85rem; position:sticky; top:0}
.ration-table td{padding:11px 14px; text-align:center; border-top:1px solid var(--line); color:var(--ink-2)}
.ration-table tbody tr:nth-child(even){background:var(--card-2)}
.ration-table td.wcell{font-weight:800; color:var(--ink); background:var(--sun-l)}
.guide-item.is-table summary .gi-ico{background:var(--sun-l)}

/* ============ Achievements ============ */
.achv-wrap{max-width:900px; margin:0 auto}
.level-card{background:linear-gradient(135deg,var(--coral),var(--coral-d)); color:#fff; border-radius:var(--r-lg); padding:26px; box-shadow:var(--sh-lg); position:relative; overflow:hidden; margin-bottom:22px}
.level-card::after{content:"🏆"; position:absolute; right:-10px; top:-16px; font-size:9rem; opacity:.16}
.level-card .lc-emoji{font-size:3rem}
.level-card h2{color:#fff; margin:.2em 0 0; font-size:1.8rem}
.level-card .lc-sub{opacity:.92; font-weight:700}
.xp-bar{height:14px; border-radius:999px; background:rgba(255,255,255,.28); margin-top:16px; overflow:hidden}
.xp-fill{height:100%; border-radius:999px; background:#fff; transition:width .6s cubic-bezier(.2,.8,.2,1)}
.xp-label{display:flex; justify-content:space-between; margin-top:8px; font-weight:800; font-size:.85rem}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-bottom:24px}
.stat-box{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px; text-align:center; box-shadow:var(--sh-sm)}
.stat-box .sb-emoji{font-size:1.7rem}
.stat-box b{display:block; font-family:var(--head); font-size:1.9rem; color:var(--coral-d); line-height:1.1; margin-top:4px}
.stat-box span{font-size:.8rem; color:var(--ink-2); font-weight:700}

.achv-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px}
.achv{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px 14px; text-align:center; box-shadow:var(--sh-sm); transition:transform .15s; position:relative}
.achv.unlocked{border-color:var(--sun)}
.achv.unlocked .achv-emoji{filter:none}
.achv .achv-emoji{font-size:2.4rem; filter:grayscale(1) opacity(.35)}
.achv.unlocked::after{content:"✓"; position:absolute; top:8px; right:10px; color:var(--ok); font-weight:900}
.achv h4{font-size:.9rem; margin:.5em 0 .2em}
.achv small{font-size:.74rem; color:var(--ink-3)}

/* ============ Assistant ============ */
.fab{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:55; width:60px; height:60px; border-radius:20px; border:none;
  background:linear-gradient(135deg,var(--teal),var(--teal-d)); color:#fff; font-size:1.6rem; cursor:pointer; box-shadow:var(--sh-lg); transition:transform .2s}
.fab:hover{transform:translateY(-3px) scale(1.05)}
.fab.hidden-fab{transform:scale(0)}
.assistant-panel{position:fixed; right:14px; bottom:calc(88px + env(safe-area-inset-bottom)); z-index:56; width:min(400px,calc(100vw - 28px));
  max-height:min(560px,70dvh); background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:var(--sh-lg);
  display:flex; flex-direction:column; overflow:hidden; animation:pop .2s}
.ap-head{padding:16px 18px; background:linear-gradient(135deg,var(--teal),var(--teal-d)); color:#fff}
.ap-head h3{color:#fff; margin:0; font-size:1.15rem}
.ap-head p{margin:2px 0 0; font-size:.8rem; opacity:.9}
.ap-search{padding:12px; border-bottom:1px solid var(--line)}
.ap-search input{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; font-size:1rem; outline:none; font-family:inherit; background:var(--bg); color:var(--ink)}
.ap-body{overflow-y:auto; padding:8px 12px 14px; flex:1}
.ap-section-t{font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-3); font-weight:800; margin:10px 6px 6px}
.ap-item{padding:12px 14px; border-radius:12px; cursor:pointer; margin-bottom:6px; background:var(--bg); transition:background .15s}
.ap-item:hover{background:var(--card-2)}
.ap-item h5{margin:0 0 3px; font-size:.94rem; font-family:var(--body); font-weight:800}
.ap-item p{margin:0; font-size:.82rem; color:var(--ink-2)}
.ap-item .ap-go{color:var(--teal-d); font-weight:800; font-size:.8rem; margin-top:5px; display:inline-block}
.ap-empty{text-align:center; color:var(--ink-3); padding:24px; font-weight:700}

/* ============ Toast + misc ============ */
.toast-wrap{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none}
.toast{background:var(--ink); color:#fff; padding:14px 22px; border-radius:16px; font-weight:800; box-shadow:var(--sh-lg); display:flex; align-items:center; gap:10px; animation:toastIn .3s}
.toast.big{background:linear-gradient(135deg,var(--sun),var(--coral)); font-size:1.05rem}
.toast .t-emoji{font-size:1.4rem}
@keyframes toastIn{from{opacity:0; transform:translateY(20px) scale(.9)}to{opacity:1}}
#confetti{position:fixed; inset:0; pointer-events:none; z-index:79}
.to-top{position:fixed; left:18px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:54; width:46px; height:46px; border-radius:14px; border:none;
  background:var(--card); color:var(--ink); box-shadow:var(--sh); cursor:pointer; font-size:1.2rem; font-weight:800}

.beta-tag{display:inline-flex; align-items:center; gap:6px; background:var(--sun-l); color:#a9701a; padding:6px 12px; border-radius:10px; font-size:.78rem; font-weight:800; margin-bottom:14px}
.empty-state{text-align:center; padding:48px 20px; color:var(--ink-2)}
.empty-state .es-emoji{font-size:3.5rem; margin-bottom:10px}
.skeleton{background:linear-gradient(90deg,var(--card-2) 25%, var(--line) 37%, var(--card-2) 63%); background-size:400% 100%; animation:sk 1.3s infinite; border-radius:var(--r); height:200px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* progress ring in sidebar */
.mini-progress{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:var(--sh-sm)}
.mini-progress .mp-top{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.mini-progress .mp-emoji{font-size:1.5rem}
.mini-progress .mp-lvl{font-family:var(--head); font-weight:800; font-size:.95rem; line-height:1.1}
.mini-progress .mp-sub{font-size:.75rem; color:var(--ink-3); font-weight:700}
.mini-bar{height:9px; border-radius:999px; background:var(--card-2); overflow:hidden}
.mini-bar i{display:block; height:100%; background:linear-gradient(90deg,var(--coral),var(--sun)); border-radius:999px; transition:width .5s}
.mini-stats{display:flex; justify-content:space-between; margin-top:9px; font-size:.75rem; color:var(--ink-2); font-weight:800}

/* ============ Responsive ============ */
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .menu-btn{display:grid}
  .sidebar{position:fixed; top:0; left:0; height:100dvh; width:min(80vw,300px); z-index:45; background:var(--card);
    transform:translateX(-100%); transition:transform .28s cubic-bezier(.2,.8,.2,1); box-shadow:var(--sh-lg); padding-top:calc(22px + env(safe-area-inset-top))}
  .sidebar.open{transform:translateX(0)}
  .scrim.show{display:block}
  .toolbar{top:56px}
  .assistant-panel{right:8px; left:8px; width:auto}
}
@media (min-width:901px){
  .scrim{display:none!important}
}
@media (max-width:560px){
  .hero-stats{gap:18px}
  .grid.recipes{grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:12px}
  .detail-nav{flex-direction:column}
  .main{padding-bottom:100px}
}