/* =========================================================
   EYE OF THE COQUÍ · stylesheet
   palette: deep jungle black + coquí gold + boricua flag
   ========================================================= */

:root{
  --bg-0: #050a08;
  --bg-1: #0a1410;
  --bg-2: #0f1d17;
  --ink-0: #f7faf6;
  --ink-1: #c4d2c9;
  --ink-2: #8aa097;
  --ink-3: #4a5a52;
  --line:  #1c2a23;
  --coqui: #f59e0b;       /* coquí eye gold */
  --coqui-hi: #fde68a;
  --moss:  #2dd4bf;        /* jungle moss */
  --moss-d: #0d9488;
  --pr-red: #ef3340;
  --pr-blue: #0050f0;
  --pr-white: #ffffff;
  --danger: #ef4444;
  --warn: #f59e0b;
  --ok: #22c55e;
  --shadow-1: 0 4px 24px rgba(0,0,0,.5);
  --shadow-2: 0 12px 48px rgba(0,0,0,.7);
  --grad-coqui: linear-gradient(135deg, #f59e0b 0%, #fb923c 50%, #ef3340 100%);
  --grad-jungle: linear-gradient(180deg, #0a1410 0%, #061008 100%);
  --grad-flag: linear-gradient(180deg,#ef3340 0 20%,#fff 20% 40%,#ef3340 40% 60%,#fff 60% 80%,#ef3340 80% 100%);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:var(--bg-0);color:var(--ink-0);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Inter,system-ui,sans-serif;overscroll-behavior:none;}
body{min-height:100dvh;}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:0;outline:0;}
.hidden{display:none !important;}

/* ============== AMBIENT FX ============== */
.ambient{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.ambient-jungle{
  position:absolute; inset:-10%;
  background:
    radial-gradient(60% 50% at 80% 0%, rgba(45,212,191,.10), transparent 70%),
    radial-gradient(50% 40% at 10% 100%, rgba(245,158,11,.08), transparent 70%),
    radial-gradient(40% 30% at 50% 50%, rgba(239,51,64,.05), transparent 70%),
    var(--grad-jungle);
  animation: jungle-drift 24s ease-in-out infinite alternate;
}
@keyframes jungle-drift{
  0%   { transform: translate3d(0,0,0)  scale(1);   filter: hue-rotate(0deg); }
  100% { transform: translate3d(-2%,1%,0) scale(1.05); filter: hue-rotate(-10deg); }
}
.ambient-vignette{
  position:absolute; inset:0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(0,0,0,.75) 100%);
}
#fireflies{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.7;
}

/* ============== SPLASH ============== */
.splash{
  position:fixed; inset:0; z-index:100;
  background: radial-gradient(60% 50% at 50% 40%, #0a1410, #000 90%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px;
  animation: splash-out 0.7s ease 2.4s forwards;
}
@keyframes splash-out{
  to { opacity: 0; visibility: hidden; transform: scale(1.05); }
}
.splash-eye{
  width:min(60vw,300px); aspect-ratio:1; position:relative;
  filter: drop-shadow(0 0 60px rgba(245,158,11,.35));
  animation: eye-zoom 1.2s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes eye-zoom{
  0%   { transform: scale(.4); opacity: 0; filter: blur(20px) drop-shadow(0 0 0 #f59e0b); }
  60%  { opacity: 1; filter: blur(0) drop-shadow(0 0 80px #f59e0b); }
  100% { transform: scale(1); }
}
.eye-svg{ width:100%; height:100%; }
.eye-iris{ transform-origin: 100px 100px; animation: iris-pulse 2.4s ease-in-out infinite; }
.eye-pupil{ transform-origin: 100px 100px; animation: pupil-pulse 2.4s ease-in-out infinite; }
@keyframes iris-pulse{
  0%,100%{ transform: scale(1); }
  50%    { transform: scale(1.04); }
}
@keyframes pupil-pulse{
  0%,100%{ transform: scaleY(1); }
  50%    { transform: scaleY(.92); }
}
.eye-lid{ transform-origin: 100px 100px; }
.eye-lid-top    { animation: blink-top    4.5s ease-in-out infinite; }
.eye-lid-bottom { animation: blink-bottom 4.5s ease-in-out infinite; }
@keyframes blink-top   { 0%,92%,100%{transform:translateY(-95px)} 95%{transform:translateY(0)} }
@keyframes blink-bottom{ 0%,92%,100%{transform:translateY(95px)}  95%{transform:translateY(0)} }

.splash-title{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  letter-spacing:.2em; font-weight:900;
  animation: title-rise 1s ease .6s both;
}
.splash-title .t-1{ color: var(--ink-1); font-size:14px; }
.splash-title .t-2{ color: var(--coqui-hi); font-size:32px; text-shadow: 0 0 24px rgba(245,158,11,.5);}
.splash-tag{ color: var(--moss); letter-spacing:.4em; font-size:11px; animation: title-rise 1s ease .9s both;}
@keyframes title-rise{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)} }

/* ============== ADD TO HOME SCREEN ============== */
.a2hs{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  padding: max(20px,var(--safe-top)) 16px max(20px,var(--safe-bot));
  background: radial-gradient(80% 60% at 50% 0%, rgba(245,158,11,.12), transparent 70%), rgba(0,0,0,.85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  animation: fade-in .4s ease both;
  overflow-y: auto;
}
@keyframes fade-in{ from{opacity:0} to{opacity:1} }
.a2hs-card{
  width:min(100%, 440px);
  max-height: calc(100dvh - max(40px, var(--safe-top) + var(--safe-bot) + 16px));
  overflow-y: auto;
  background: linear-gradient(180deg, #0d1814, #050a08);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 22px 18px;
  text-align:center;
  box-shadow: var(--shadow-2), 0 0 80px rgba(245,158,11,.15);
  animation: a2hs-pop .6s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes a2hs-pop{ from{opacity:0; transform:translateY(40px) scale(.95)} to{opacity:1;transform:none} }
.a2hs-eye{
  width: clamp(64px, 18vw, 84px); aspect-ratio:1; margin:0 auto 10px;
  filter: drop-shadow(0 0 24px rgba(245,158,11,.4));
  animation: eye-bob 3s ease-in-out infinite;
}
@keyframes eye-bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.a2hs-card h1{
  margin: 4px 0 6px;
  font-size: clamp(20px, 5.5vw, 24px); font-weight: 800;
  background: var(--grad-coqui); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.a2hs-sub{ color: var(--ink-1); margin: 0 0 12px; line-height: 1.4; font-size: clamp(13px, 3.8vw, 15px);}
.a2hs-sub.small{ font-size: 12px; color: var(--ink-2);}
.a2hs-platform{ display:none; }
.a2hs-platform.show{ display:block; animation: fade-in .3s ease both;}
.a2hs-steps{
  list-style:none; padding:0; margin: 14px 0 18px;
  text-align:left; display:flex; flex-direction:column; gap:12px;
}
.a2hs-steps li{
  display:flex; align-items:flex-start; gap: 12px;
  background: rgba(45,212,191,.06);
  border: 1px solid rgba(45,212,191,.18);
  padding: 10px 12px; border-radius: 12px;
  color: var(--ink-1);
}
.a2hs-steps strong{ color: var(--coqui-hi);}
.step-n{
  flex:0 0 26px; width:26px; height:26px;
  display:grid; place-items:center;
  background: var(--coqui); color:#000; border-radius: 50%;
  font-weight: 800; font-size: 13px;
}
.ios-share-icon{
  display:inline-grid; place-items:center;
  width:22px;height:22px;
  background:#0050f0;color:#fff;border-radius:6px;
  vertical-align:middle; margin:0 2px;
  font-size:13px;
}

/* ============== BUTTONS ============== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 18px; border-radius: 14px;
  font-weight: 700; font-size: 15px; cursor: pointer;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  width: 100%;
  -webkit-user-select:none; user-select:none;
}
.btn:active{ transform: scale(.97); }
.btn-coqui{
  background: var(--grad-coqui); color: #1a0f02;
  box-shadow: 0 8px 24px rgba(245,158,11,.3), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-coqui::after{
  content:""; position:absolute;
}
.btn-coqui:hover{ filter: brightness(1.05); }
.btn-ghost{
  background: transparent; color: var(--ink-1);
  border:1px solid var(--line);
  margin-top: 8px;
}
.btn-ghost:hover{ background: rgba(255,255,255,.03); }

/* ============== TUTORIAL ============== */
.tutorial{
  position:fixed; inset:0; z-index:85;
  display:flex; align-items:center; justify-content:center;
  padding: max(20px,var(--safe-top)) 16px max(20px,var(--safe-bot));
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.tut-card{
  width:min(100%, 440px);
  max-height: calc(100dvh - max(40px, var(--safe-top) + var(--safe-bot) + 16px));
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0d1814, #050a08);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px;
  position: relative;
  box-shadow: var(--shadow-2);
}
.tut-progress{
  display:flex; gap: 6px; margin-bottom: 14px;
  flex: 0 0 auto;
}
.tut-progress span{
  flex:1; height: 4px; border-radius: 2px;
  background: var(--line);
  transition: background .3s ease;
}
.tut-progress span.on{ background: var(--coqui); box-shadow: 0 0 12px rgba(245,158,11,.5);}
.tut-slide{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 4px;
  animation: tut-in .5s cubic-bezier(.2,.9,.2,1) both;
}
.tut-slide[hidden]{ display: none !important; }
@keyframes tut-in{ from{opacity:0; transform:translateX(40px)} to{opacity:1; transform:none} }
.tut-art{
  width: clamp(96px, 28vw, 130px); aspect-ratio: 1;
  margin-bottom: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(245,158,11,.3), transparent 70%);
  display:grid; place-items:center;
  font-size: clamp(44px, 12vw, 60px);
  animation: art-spin 8s linear infinite;
  flex: 0 0 auto;
}
@keyframes art-spin{ to { transform: rotate(360deg); } }
.tut-art-eye::after{ content:"👁️"; animation: none; }
.tut-art-search::after{ content:"🔍"; }
.tut-art-price::after{ content:"💰"; }
.tut-art-portal::after{ content:"🏝️"; }
.tut-slide h2{
  margin: 4px 0 8px; font-size: clamp(18px, 5.2vw, 22px); line-height: 1.2;
}
.tut-slide h2 em{ color: var(--coqui-hi); font-style: normal;}
.tut-slide p{
  color: var(--ink-1); line-height: 1.45; max-width: 320px;
  font-size: clamp(13px, 3.8vw, 15px);
  margin: 0;
}
.tut-slide p strong{ color: var(--moss);}
.tut-slide p em{ font-style: italic; color: var(--coqui-hi);}
.tut-actions{
  display:flex; gap: 10px; margin-top: 14px;
  flex: 0 0 auto;
}
.tut-actions .btn{ flex:1; margin: 0; padding: 12px 16px; font-size: 14px;}

/* ============== APP TOP BAR ============== */
.app{
  position: relative; z-index: 10;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bot);
  min-height: 100dvh;
  animation: app-in .5s ease both;
}
@keyframes app-in{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

.topbar{
  display:flex; align-items:center; gap: 10px;
  padding: 14px 16px 8px;
  position: sticky; top: var(--safe-top); z-index: 20;
  background: linear-gradient(180deg, rgba(5,10,8,.95), rgba(5,10,8,.7));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.topbar-back, .topbar-icon{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  color: var(--ink-0);
  font-size: 22px; font-weight: 600;
  cursor:pointer; transition: background .2s ease;
}
.topbar-back:hover, .topbar-icon:hover{ background: rgba(255,255,255,.1); }
.topbar-logo{
  flex: 1; display:flex; align-items:center; gap: 10px;
}
.logo-eye{
  width:34px; height:34px;
  filter: drop-shadow(0 0 8px rgba(245,158,11,.4));
  animation: logo-pulse 3s ease-in-out infinite;
}
@keyframes logo-pulse{
  0%,100%{ filter: drop-shadow(0 0 6px rgba(245,158,11,.3)); }
  50%    { filter: drop-shadow(0 0 16px rgba(245,158,11,.7)); }
}
.logo-text{ display:flex; flex-direction:column; line-height:1;}
.logo-text span{ font-size:9px; letter-spacing:.25em; color: var(--ink-2);}
.logo-text strong{ font-size:16px; letter-spacing:.1em; color: var(--coqui-hi); font-weight: 800;}

/* ============== SEARCH STRIP ============== */
.search-strip{ padding: 8px 16px 0; position:sticky; top: calc(var(--safe-top) + 60px); z-index: 19; background: linear-gradient(180deg, rgba(5,10,8,.95), rgba(5,10,8,.5)); backdrop-filter: blur(12px);}
.search-box{
  display:flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.search-box:focus-within{
  border-color: var(--coqui);
  box-shadow: 0 0 0 4px rgba(245,158,11,.12);
}
.search-box svg{ color: var(--ink-2); flex: 0 0 auto;}
.search-box input{
  flex: 1; padding: 4px 0; font-size: 15px;
}
.search-box input::placeholder{ color: var(--ink-3);}
.clear-search{
  width:22px;height:22px; border-radius:50%; background: var(--line); color: var(--ink-1); cursor: pointer; font-size: 16px; line-height: 1;
}
.filters{
  display:flex; gap:6px; overflow-x:auto; padding: 10px 0 6px;
  scrollbar-width:none;
}
.filters::-webkit-scrollbar{ display:none;}
.chip{
  flex:0 0 auto;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor:pointer;
  transition: all .2s ease;
  letter-spacing: .02em;
}
.chip:hover{ color: var(--ink-1); border-color: var(--ink-3);}
.chip.chip-on{
  background: var(--coqui); color: #1a0f02; border-color: var(--coqui);
  box-shadow: 0 0 16px rgba(245,158,11,.3);
}

/* ============== HERO ============== */
.hero{
  position:relative;
  margin: 14px 16px 6px;
  padding: 22px 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(45,212,191,.08), rgba(245,158,11,.06));
  border: 1px solid var(--line);
  overflow: hidden;
}
.hero-flag{
  position:absolute; right:-20px; top:-20px; width:140px; height:90px;
  opacity: .15;
  transform: rotate(8deg);
  pointer-events: none;
}
.flag-stripes{
  position:absolute; inset:0;
  background: var(--grad-flag);
  border-radius: 6px;
}
.flag-triangle{
  position:absolute; left:0; top:0; width:0; height:0;
  border-left: 70px solid #0050f0;
  border-top: 45px solid transparent;
  border-bottom: 45px solid transparent;
}
.flag-star{
  position:absolute; left:14px; top:50%; transform: translateY(-50%);
  width:18px; height:18px; background:#fff;
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.hero-eyebrow{
  margin:0 0 6px; font-size:10px; letter-spacing:.4em; color: var(--moss); font-weight: 700;
}
.hero h1{
  margin:0 0 8px; font-size: 26px; line-height: 1.15; font-weight: 800;
}
.hero h1 em{ color: var(--coqui-hi); font-style: italic; }
.hero-sub{ margin: 0; color: var(--ink-1); font-size:14px;}
.hero-stat{
  display:flex; gap: 16px; margin-top: 16px;
  border-top: 1px dashed var(--line); padding-top: 14px;
}
.hero-stat > div{ display:flex; flex-direction:column;}
.hero-stat strong{ font-size:22px; color: var(--coqui-hi); font-weight: 800;}
.hero-stat span{ font-size:10px; letter-spacing:.2em; color: var(--ink-3); text-transform: uppercase;}

/* ============== CATEGORY STRIP ============== */
.cat-strip{
  display:flex; gap:8px; overflow-x:auto;
  padding: 14px 16px 4px;
  scrollbar-width:none;
}
.cat-strip::-webkit-scrollbar{ display:none;}
.cat{
  flex:0 0 auto;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  color: var(--ink-1); font-size: 13px; font-weight: 600; cursor:pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.cat:hover{ background: rgba(255,255,255,.08); }
.cat.cat-on{
  background: linear-gradient(135deg, var(--moss-d), var(--moss));
  color: #02201b; border-color: var(--moss);
  box-shadow: 0 6px 18px rgba(45,212,191,.25);
}

/* ============== RECIPE GRID ============== */
.recipes{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 14px 16px;
}
@media (min-width: 640px){
  .recipes{ grid-template-columns: repeat(3, 1fr);}
}
@media (min-width: 900px){
  .recipes{ grid-template-columns: repeat(4, 1fr);}
}
.recipe-card{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg-1);
  aspect-ratio: 0.78;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  isolation: isolate;
}
.recipe-card:hover{
  transform: translateY(-3px);
  border-color: var(--coqui);
  box-shadow: 0 12px 30px rgba(245,158,11,.18);
}
.recipe-card:active{ transform: scale(.98);}
.recipe-card .rc-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .6s cubic-bezier(.2,.9,.2,1), filter .4s ease;
  filter: saturate(1.05) contrast(1.05);
}
.recipe-card:hover .rc-photo{ transform: scale(1.08); filter: saturate(1.15) contrast(1.1) brightness(1.05);}
.recipe-card .rc-bg{
  position:absolute; inset:0;
  background: linear-gradient(135deg, var(--c1, #f59e0b) 0%, var(--c2, #1a0f02) 100%);
  opacity: .25;
  z-index: -1;
  mix-blend-mode: overlay;
}
.recipe-card .rc-pattern{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.10), transparent 50%),
    linear-gradient(180deg, transparent 30%, rgba(0,0,0,.4) 70%, rgba(5,10,8,.92) 100%);
  z-index: -1;
}
.recipe-card .rc-hero{
  position:absolute; top: 12px; right: 12px;
  font-size: 28px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.7));
  transition: transform .3s ease;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.15);
}
.recipe-card:hover .rc-hero{ transform: rotate(-6deg) scale(1.1);}
.recipe-card .rc-body{
  position:absolute; left:0; right:0; bottom:0;
  padding: 14px;
  background: linear-gradient(180deg, transparent, rgba(5,10,8,.85) 30%, rgba(5,10,8,.98));
}
.recipe-card h3{
  margin: 0 0 4px; font-size: 15px; font-weight: 800; line-height: 1.1;
}
.recipe-card .rc-tag{
  margin:0 0 8px; font-size: 11px; color: var(--ink-2); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;
}
.recipe-card .rc-meta{
  display:flex; align-items:center; justify-content: space-between;
  font-size: 11px;
}
.recipe-card .rc-price{
  display:flex; flex-direction:column;
  color: var(--moss);
}
.recipe-card .rc-price strong{ font-size: 14px; color: var(--ink-0); font-weight: 800;}
.recipe-card .rc-price span{ font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);}

/* ============== COQUI RATING ============== */
.coqui-rating{
  display: inline-flex; align-items: center; gap: 2px;
  --size: 14px;
}
.coqui-rating.lg{ --size: 18px;}
.coqui-rating.xl{ --size: 22px;}
.coqui-icon{
  position: relative;
  width: var(--size); height: var(--size);
  display: inline-block;
}
.coqui-icon svg{ width:100%; height:100%; display:block; }
.coqui-icon .coqui-fill{
  position:absolute; inset:0; overflow:hidden;
  width: var(--fill, 100%);
}
.coqui-icon .coqui-fill svg path{ fill: var(--coqui); stroke: var(--coqui-hi);}
.coqui-icon .coqui-base svg path{ fill: #1a2520; stroke: var(--ink-3);}
.coqui-rating-num{
  margin-left: 6px;
  font-size: calc(var(--size) * .78);
  font-weight: 700; color: var(--coqui-hi);
}
.coqui-rating-label{
  margin-left: 6px;
  font-size: 10px; letter-spacing:.15em; text-transform: uppercase; color: var(--ink-3);
}
.coqui-rating-row{ display:flex; align-items:center; gap: 8px;}

/* ============== CHEFS RAIL ============== */
.chefs-rail{ padding: 14px 0 24px;}
.rail-title{
  margin: 0 16px 12px; font-size: 18px; font-weight: 800;
}
.rail-title span{ color: var(--ink-3); font-weight: 400;}
.rail{
  display:flex; gap: 10px; overflow-x:auto;
  padding: 6px 16px 16px; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar{ display:none;}
.chef-card{
  flex: 0 0 160px;
  scroll-snap-align: start;
  background: linear-gradient(135deg, rgba(255,255,255,.03), transparent);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease;
}
.chef-card:hover{ transform: translateY(-3px); border-color: var(--moss);}
.chef-avatar{
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c, var(--coqui)), #050a08);
  display: grid; place-items: center;
  font-size: 26px;
  margin-bottom: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.chef-card h4{
  margin: 0 0 2px; font-size: 14px; font-weight: 800;
}
.chef-card .chef-where{
  margin: 0; font-size: 11px; color: var(--ink-2);
}
.chef-card .chef-recipes{
  margin-top: 8px; font-size: 10px; letter-spacing: .15em; color: var(--moss); text-transform: uppercase;
}

/* ============== RECIPE DETAIL ============== */
.recipe-view{
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg-0);
  overflow-y: auto;
  animation: rv-in .35s ease both;
}
@keyframes rv-in{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none}}
.rv-hero{
  position: relative;
  height: 320px;
  background: linear-gradient(135deg, var(--c1, #f59e0b), var(--c2, #1a0f02));
  display: grid; place-items: center;
  overflow: hidden;
}
.rv-hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(5,10,8,.85) 100%);
  pointer-events: none;
}
.rv-img{
  position: relative; width: 100%; height: 100%;
  display: grid; place-items: center;
  animation: rv-img-float 6s ease-in-out infinite;
}
.rv-img .rv-photo{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.05);
}
.rv-img .rv-emoji{
  position: absolute; bottom: 14px; left: 14px;
  font-size: 28px;
  width: 50px; height: 50px;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.15);
  z-index: 2;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.7));
}
.rv-img.no-photo .rv-photo{ display: none;}
.rv-img.no-photo .rv-emoji{
  position: static; font-size: 120px; background: none; width:auto; height:auto; border:0;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.5));
}
@keyframes rv-img-float{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-3px)}
}
.rv-back{
  position: absolute; top: calc(var(--safe-top) + 14px); left: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(10px);
  color: #fff; font-size: 24px; font-weight: 600; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.1);
  z-index: 2;
}
.rv-badge{
  position: absolute; bottom: 14px; right: 14px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(0,0,0,.6); backdrop-filter: blur(10px);
  font-size: 11px; letter-spacing: .2em; font-weight: 700;
  color: var(--coqui-hi);
}
.rv-body{
  padding: 18px 18px max(60px, var(--safe-bot)); margin-top: -28px;
  background: var(--bg-0);
  border-radius: 28px 28px 0 0;
  position: relative;
  z-index: 1;
}
.rv-body h1{
  margin: 0 0 6px; font-size: 30px; font-weight: 800;
}
.rv-tag{
  margin: 0 0 18px; color: var(--ink-1);
}
.rv-section{ margin: 22px 0;}
.rv-section h3{
  margin: 0 0 12px; font-size: 14px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-2);
}
.rv-section h3 em{ font-style: italic; color: var(--coqui); text-transform: none; letter-spacing: 0;}

.variants{ display: flex; flex-direction: column; gap: 10px;}
.variant{
  border: 1px solid var(--line); border-radius: 14px; padding: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.02), transparent);
  cursor: pointer;
  transition: all .2s ease;
}
.variant:hover{ border-color: var(--coqui);}
.variant.variant-on{
  border-color: var(--coqui);
  background: linear-gradient(135deg, rgba(245,158,11,.08), transparent);
  box-shadow: 0 0 0 1px var(--coqui), 0 8px 24px rgba(245,158,11,.15);
}
.variant-top{
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
}
.variant-avatar{
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c, var(--coqui)), #050a08);
  display: grid; place-items: center; font-size: 20px;
  flex: 0 0 auto;
}
.variant-info{ flex: 1; min-width: 0;}
.variant-info h4{ margin: 0; font-size: 15px; font-weight: 700;}
.variant-info p{ margin: 1px 0 0; font-size: 11px; color: var(--ink-2);}
.variant-note{
  margin: 0; font-size: 13px; color: var(--ink-1); line-height: 1.4;
  padding-left: 52px;
}
.variant-meta{
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding-top: 10px; padding-left: 52px;
  border-top: 1px dashed var(--line);
}
.variant-cheap{
  font-size: 12px; color: var(--moss); font-weight: 700;
}
.variant-cheap strong{ color: var(--ink-0);}

.ingredients{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.ingredients li{
  display: flex; justify-content: space-between;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  font-size: 14px;
}
.ingredients li .ing-name{ color: var(--ink-0);}
.ingredients li .ing-qty{ color: var(--ink-2); font-feature-settings: "tnum";}

.stores{ display: grid; grid-template-columns: repeat(2,1fr); gap: 10px;}
.store{
  border: 1px solid var(--line); border-radius: 14px;
  padding: 14px;
  position: relative;
  background: linear-gradient(135deg, var(--s-c, #1c2a23)18, transparent);
  cursor: pointer;
  transition: all .2s ease;
  overflow: hidden;
}
.store::before{
  content: ""; position: absolute; left:0; top:0; bottom:0; width: 3px;
  background: var(--s-c, var(--coqui));
}
.store.store-best{
  border-color: var(--moss);
  box-shadow: 0 0 0 1px var(--moss), 0 8px 24px rgba(45,212,191,.15);
}
.store-name{
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 700;
}
.store-kind{
  font-size: 9px; letter-spacing: .15em; color: var(--ink-3); text-transform: uppercase;
}
.store-total{
  margin-top: 8px; font-size: 28px; font-weight: 800; font-feature-settings: "tnum";
  color: var(--ink-0);
}
.store-total .dol{ color: var(--moss); font-size: 18px; vertical-align: top;}
.store.store-best .store-total{ color: var(--moss);}
.store-badge{
  position: absolute; top: 10px; right: 10px;
  padding: 3px 8px; border-radius: 999px;
  background: var(--moss); color: #02201b;
  font-size: 9px; letter-spacing: .15em; font-weight: 800;
}
.store-foot{
  font-size: 11px; color: var(--ink-3); margin-top: 10px;
}

.steps{
  list-style: none; padding: 0; margin: 0; counter-reset: step;
  display: flex; flex-direction: column; gap: 10px;
}
.steps li{
  position: relative;
  padding: 12px 14px 12px 48px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  counter-increment: step;
  font-size: 14px; line-height: 1.45; color: var(--ink-1);
}
.steps li::before{
  content: counter(step);
  position: absolute; left: 12px; top: 12px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--grad-coqui); color: #1a0f02;
  display: grid; place-items: center;
  font-weight: 800; font-size: 13px;
}
.rv-cta{
  display: flex; gap: 10px;
}
.rv-cta .btn{ flex: 1; margin: 0;}

/* ============== PORTAL ============== */
.portal-view{
  position: fixed; inset: 0; z-index: 60;
  background: var(--bg-0);
  overflow-y: auto;
  padding-top: var(--safe-top);
  animation: rv-in .35s ease both;
}
.portal-top{
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.portal-top h1{ margin: 0; font-size: 18px; flex: 1;}
.portal-top .rv-back{ position: static; }
.portal-badge{
  font-size: 10px; padding: 3px 8px; border-radius: 999px;
  background: var(--moss); color: #02201b; font-weight: 800; letter-spacing: .15em;
}
.portal-tabs{ display: flex; padding: 12px 16px; gap: 6px;}
.ptab{
  flex: 1; padding: 10px; border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  color: var(--ink-1); font-size: 13px; font-weight: 600; cursor: pointer;
}
.ptab.ptab-on{ background: var(--coqui); color: #1a0f02; border-color: var(--coqui);}
.ppanel{ padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;}
.portal-sub{ margin: 0 0 8px; color: var(--ink-1);}
.portal-sub.small{ font-size: 12px;}
.ppanel label{
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; letter-spacing: .1em; color: var(--ink-2); text-transform: uppercase;
}
.ppanel input, .ppanel textarea{
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  color: var(--ink-0); font-size: 15px;
  letter-spacing: normal; text-transform: none;
  transition: border-color .2s ease;
}
.ppanel input:focus, .ppanel textarea:focus{
  border-color: var(--coqui);
  box-shadow: 0 0 0 4px rgba(245,158,11,.12);
}
.portal-note{ font-size: 11px; color: var(--ink-3); margin: 4px 0 0;}
.portal-note code{ background: rgba(245,158,11,.12); color: var(--coqui-hi); padding: 1px 5px; border-radius: 4px;}

.tiers{ display: flex; flex-direction: column; gap: 8px;}
.tier{
  display: block; cursor: pointer;
}
.tier input{ display: none;}
.tier > span{
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  padding: 14px; border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  transition: all .2s ease;
}
.tier:hover > span{ border-color: var(--ink-3);}
.tier.tier-on > span{
  border-color: var(--coqui);
  background: linear-gradient(135deg, rgba(245,158,11,.08), transparent);
  box-shadow: 0 0 0 1px var(--coqui);
}
.tier strong{ font-size: 15px; color: var(--ink-0);}
.tier em{ font-style: normal; color: var(--coqui-hi); font-weight: 800; font-size: 15px;}
.tier small{ grid-column: 1 / -1; font-size: 11px; color: var(--ink-2);}

.dash-hello{
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px;
  align-items: center;
  padding: 16px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(245,158,11,.1), transparent);
  border: 1px solid var(--line);
}
.dash-hello .btn{ width: auto; padding: 10px 14px; margin: 0;}
.dash-avatar{
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad-coqui); display: grid; place-items: center;
  font-size: 18px; font-weight: 800; color: #1a0f02;
}
.dash-stats{
  display: grid; grid-template-columns: repeat(3,1fr); gap: 8px;
  margin-top: 8px;
}
.dash-stats > div{
  padding: 12px; border-radius: 12px; text-align: center;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
}
.dash-stats strong{ display: block; font-size: 20px; color: var(--coqui-hi); font-weight: 800;}
.dash-stats span{ font-size: 10px; letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase;}
.dash-title{ margin: 18px 0 8px; font-size: 14px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-2);}
.dash-list{ display: flex; flex-direction: column; gap: 8px;}
.dash-recipe{
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
}
.dash-recipe-emoji{ font-size: 26px;}
.dash-recipe-info{ flex: 1;}
.dash-recipe-info strong{ display: block; font-size: 14px;}
.dash-recipe-info span{ font-size: 11px; color: var(--ink-2);}
.dash-recipe-edit{
  padding: 6px 10px; border-radius: 8px;
  background: rgba(245,158,11,.12); color: var(--coqui-hi);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
}

/* ============== FOOTER ============== */
.foot{
  text-align: center; padding: 32px 16px;
  color: var(--ink-3); font-size: 12px;
}
.foot p em{ color: var(--coqui);}
.foot-link{
  margin-top: 6px;
  color: var(--moss); font-size: 12px; cursor: pointer; text-decoration: underline;
}

/* ============== TOAST ============== */
.toast{
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 200;
  padding: 12px 18px;
  background: rgba(20, 30, 25, .95);
  backdrop-filter: blur(20px);
  border: 1px solid var(--coqui);
  border-radius: 12px;
  font-size: 14px; color: var(--ink-0);
  box-shadow: 0 12px 36px rgba(0,0,0,.6), 0 0 30px rgba(245,158,11,.2);
  animation: toast-in .35s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes toast-in{ from{opacity:0; transform:translate(-50%, 30px)} to{opacity:1; transform:translate(-50%, 0)}}
.toast.fade-out{ animation: toast-out .3s ease both;}
@keyframes toast-out{ to{opacity:0; transform:translate(-50%, 30px)}}

/* ============== RIPPLES & MICRO FX ============== */
.recipe-card, .variant, .chef-card, .store{
  will-change: transform;
}
.shimmer{
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer{ from{ background-position: -200% 0;} to{ background-position: 200% 0;} }

/* ============== TINY ============== */
@media (max-width: 380px){
  .hero h1{ font-size: 22px;}
  .recipes{ gap: 10px;}
}