/* ---------- tema ---------- */
:root{
  --bg:#fbf4e7; --bg-2:#f5ead6; --bg-3:#efe1c8; --card:#fffdf9; --ink:#1f2547; --ink-soft:#7a7690;
  --pink:#d3315b; --pink-soft:#f4d3dc; --gold:#f2b30a; --gold-2:#e19a00; --wine:#2d6070;
  --line:#ece1cd; --edge:rgba(31,37,71,.06);
  --shadow-sm:0 1px 2px rgba(31,37,71,.06);
  --shadow:0 2px 6px rgba(31,37,71,.06), 0 18px 40px -16px rgba(31,37,71,.22);
  --shadow-lg:0 4px 12px rgba(31,37,71,.08), 0 32px 60px -20px rgba(31,37,71,.28);
  --glass:rgba(251,244,231,.82);
  --serif:"Fraunces","Lora",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e1119; --bg-2:#141926; --bg-3:#1a2030; --card:#1b2130; --ink:#eef1f8; --ink-soft:#98a0b8;
    --pink:#ff779a; --pink-soft:#3a2530; --gold:#f7bd18; --gold-2:#f7bd18; --wine:#63aec2;
    --line:#28304050; --edge:rgba(255,255,255,.05);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 2px 8px rgba(0,0,0,.4), 0 20px 44px -16px rgba(0,0,0,.65);
    --shadow-lg:0 6px 16px rgba(0,0,0,.45), 0 36px 70px -22px rgba(0,0,0,.7);
    --glass:rgba(14,17,25,.82);
  }
}
:root[data-theme="dark"]{
  --bg:#0e1119; --bg-2:#141926; --bg-3:#1a2030; --card:#1b2130; --ink:#eef1f8; --ink-soft:#98a0b8;
  --pink:#ff779a; --pink-soft:#3a2530; --gold:#f7bd18; --gold-2:#f7bd18; --wine:#63aec2;
  --line:#28304050; --edge:rgba(255,255,255,.05);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 8px rgba(0,0,0,.4), 0 20px 44px -16px rgba(0,0,0,.65);
  --shadow-lg:0 6px 16px rgba(0,0,0,.45), 0 36px 70px -22px rgba(0,0,0,.7);
  --glass:rgba(14,17,25,.82);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font:16px/1.6 var(--sans);color:var(--ink);
  font-feature-settings:"kern","liga","calt";
  background:
    radial-gradient(140% 50% at 12% -8%, var(--bg-2), transparent 55%),
    radial-gradient(120% 45% at 92% 0%, var(--bg-3), transparent 50%),
    var(--bg);
  background-attachment:fixed;min-height:100vh;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-tap-highlight-color:transparent;
}
#app{max-width:620px;margin:0 auto;min-height:100vh;padding-bottom:150px}
#app>*{animation:fade .34s var(--ease) both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(211,49,91,.4)}50%{box-shadow:0 0 0 8px rgba(211,49,91,0)}}

h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
h1{font-size:1.7rem}
h2{font-size:1.22rem;margin:1.7rem 0 .55rem}
a{color:var(--pink);text-underline-offset:3px}
p{overflow-wrap:anywhere}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;transition:transform .14s var(--ease)}
button:active{transform:scale(.96)}

/* ---- topo (fica grudado no rolar, com desfoque) ---- */
.top{position:sticky;top:0;z-index:12;display:flex;align-items:center;gap:.75rem;
  padding:calc(1rem + env(safe-area-inset-top)) 1.3rem .7rem;
  background:linear-gradient(var(--glass),var(--glass));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.top h1{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .ava{width:42px;height:42px;border-radius:50%;box-shadow:var(--shadow-sm),0 0 0 3px var(--card);flex:none}
.hgreet{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.hgreet .hi{font-family:var(--serif);font-weight:600;font-size:1.3rem;letter-spacing:-.02em}
.hgreet .hsub{font-size:.78rem;color:var(--ink-soft);margin-top:.1rem}
.iconbtn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--ink);background:var(--card);box-shadow:var(--shadow-sm);flex:none;
  border:1px solid var(--edge)}
.iconbtn:active{background:var(--bg-2)}

/* ---- login ---- */
.center{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.6rem;padding:2rem}
.brand{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.brand .mark{width:92px;height:92px;border-radius:28px;box-shadow:var(--shadow-lg);
  animation:pop .5s var(--ease) both}
.brand h1{font-size:2rem}
.brand .tag{color:var(--ink-soft);font-size:.9rem;margin-top:-.5rem}

/* ---- cartões / formulários ---- */
.card{background:var(--card);border-radius:24px;padding:1.2rem;box-shadow:var(--shadow);
  border:1px solid var(--edge);width:100%;max-width:calc(100% - 2.4rem);margin:0 auto}
.form{display:flex;flex-direction:column;gap:.5rem}
.form label{font-size:.7rem;color:var(--ink-soft);margin-top:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em}
input,textarea,select{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);
  border-radius:14px;padding:.85rem .95rem;transition:border-color .16s,box-shadow .16s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(242,179,10,.18)}
textarea{resize:vertical;min-height:96px;line-height:1.5}
select{-webkit-appearance:none;appearance:none;padding-right:2.6rem;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%238a8a9a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 8l5 5 5-5'/></svg>");
  background-repeat:no-repeat;background-position:right .95rem center;background-size:1.15rem}
.btn{background:linear-gradient(180deg,#ffd35a,var(--gold) 55%,var(--gold-2));color:#3a2c00;font-weight:700;
  border-radius:16px;padding:.95rem 1rem;text-align:center;box-shadow:0 10px 24px -8px rgba(225,154,0,.55);
  transition:transform .14s var(--ease),box-shadow .2s}
.btn:active{box-shadow:0 4px 12px -6px rgba(225,154,0,.5)}
.btn-ghost{background:var(--card);border:1.5px solid var(--line);color:var(--ink);box-shadow:var(--shadow-sm);font-weight:600}
.btn-pink{background:var(--card);border:1.5px solid var(--pink);color:var(--pink);box-shadow:var(--shadow-sm);font-weight:700}
.err{color:var(--pink);font-size:.86rem;min-height:1em;font-weight:600}
.hint{color:var(--ink-soft);font-size:.86rem}

/* ---- chips ---- */
.chipwrap{position:relative}
.chipwrap::after{content:"";position:absolute;right:0;top:0;bottom:0;width:32px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--bg))}
.chips{display:flex;gap:.5rem;overflow-x:auto;overflow-y:hidden;padding:.75rem 1.3rem;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;scroll-snap-align:start;padding:.52rem 1.05rem;border-radius:999px;font-size:.85rem;font-weight:700;
  background:var(--card);color:var(--ink-soft);box-shadow:var(--shadow-sm);border:1.5px solid var(--line);white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease),transform .12s var(--ease),box-shadow .2s}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink);box-shadow:var(--shadow)}

.sbar{padding:.4rem 1.3rem .2rem}
.sbar input{background:var(--card);box-shadow:var(--shadow-sm)}

/* ---- feed ---- */
.feed{display:flex;flex-direction:column;gap:1.2rem;padding:.6rem 1.3rem}
.feed .rcard{animation:rise .42s var(--ease) both}
.feed .rcard:nth-child(1){animation-delay:.02s}
.feed .rcard:nth-child(2){animation-delay:.06s}
.feed .rcard:nth-child(3){animation-delay:.1s}
.feed .rcard:nth-child(4){animation-delay:.14s}
.feed .rcard:nth-child(5){animation-delay:.18s}
.feed .rcard:nth-child(n+6){animation-delay:.22s}
.rcard{position:relative;background:var(--card);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);
  border:1px solid var(--edge);text-align:left;display:block;width:100%;
  transition:transform .16s var(--ease),box-shadow .2s var(--ease)}
.rcard:active{transform:scale(.985);box-shadow:var(--shadow-sm)}
.rcard>img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  background:linear-gradient(135deg,var(--bg-2),var(--bg-3));transition:transform .5s var(--ease)}
.rcard:active>img{transform:scale(1.04)}
.rcard .body{padding:1rem 1.1rem 1.15rem}
.rcard .body .t{font-family:var(--serif);font-weight:600;font-size:1.24rem;color:var(--ink);line-height:1.22;letter-spacing:-.015em}
.rcard .body .m{color:var(--ink-soft);font-size:.8rem;margin-top:.4rem;letter-spacing:.02em}
.rcard .favdot{position:absolute;top:.75rem;right:.75rem;width:32px;height:32px;border-radius:50%;
  background:var(--card);color:var(--pink);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm),0 0 0 4px rgba(255,255,255,.15);font-size:.92rem}
.rcard.noimg{display:flex;align-items:center;gap:.95rem;padding:.95rem 1.05rem}
.rcard.noimg .thumb{flex:none;width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.75rem;background:linear-gradient(135deg,var(--bg-2),var(--bg-3))}
.rcard.noimg .body{padding:0;flex:1;min-width:0}
.rcard.noimg .body .t{font-size:1.06rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcard .favdot.sm{position:static;width:auto;height:auto;background:none;box-shadow:none;font-size:1rem}
.empty{text-align:center;color:var(--ink-soft);padding:3.5rem 1.5rem;line-height:1.9;font-size:.95rem}

/* ---- barra de baixo ---- */
.tabbar{position:fixed;left:0;right:0;bottom:0;max-width:620px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:.4rem .8rem calc(.4rem + env(safe-area-inset-bottom));
  background:linear-gradient(var(--glass),var(--glass));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--edge);z-index:15}
.tabbar .tab{display:flex;flex-direction:column;align-items:center;gap:.2rem;color:var(--ink-soft);font-size:.66rem;font-weight:600;padding:.3rem;position:relative}
.tabbar .tab.on{color:var(--ink)}
.tabbar .tab.on::after{content:"";position:absolute;top:-.15rem;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.fab{place-self:center;width:62px;height:62px;border-radius:50%;
  background:radial-gradient(120% 120% at 30% 22%,#ffd863,var(--gold) 48%,var(--gold-2));
  color:#3a2c00;display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 32px -6px rgba(225,154,0,.6),0 0 0 6px rgba(242,179,10,.15);
  transform:translateY(-16px);animation:fabin .42s var(--ease) both}
.fab svg{width:28px;height:28px}
.fab:active{transform:translateY(-16px) scale(.92)}
@keyframes fabin{from{opacity:0;transform:translateY(-16px) scale(.7)}to{opacity:1;transform:translateY(-16px) scale(1)}}

/* ---- aviso rápido ---- */
.toast{position:fixed;left:50%;bottom:120px;transform:translate(-50%,18px);z-index:50;
  background:var(--ink);color:var(--bg);padding:.72rem 1.15rem;border-radius:14px;font-size:.85rem;
  font-weight:600;box-shadow:var(--shadow-lg);opacity:0;transition:.3s var(--ease);max-width:88vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---- folha "Salvar receita" ---- */
.sheet{padding:.4rem 1.3rem 0}
.sheet .grab{width:44px;height:5px;border-radius:3px;background:var(--line);margin:.3rem auto 1.3rem}
.sheet h2{text-align:center;margin:.2rem 0;font-size:1.55rem}
.sheet .sub{text-align:center;color:var(--ink-soft);font-size:.92rem;margin-bottom:1.3rem}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.tile{background:var(--card);border-radius:20px;box-shadow:var(--shadow);border:1px solid var(--edge);
  padding:1.2rem .9rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;
  transition:transform .16s var(--ease),box-shadow .2s}
.tile:active{transform:scale(.97)}
.tile.wide{grid-column:1/-1;flex-direction:row;justify-content:flex-start;text-align:left;gap:.9rem;padding:1.05rem 1.15rem}
.tile svg{width:26px;height:26px;color:var(--wine);flex:none}
.tile .tl{font-weight:700;color:var(--ink);font-size:.98rem}
.tile .ts{color:var(--ink-soft);font-size:.76rem;line-height:1.4}
.sheet-close{margin:1.7rem auto 0;width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.sheet-close svg{width:20px;height:20px}
details{margin-top:.4rem}
details summary{color:var(--pink);font-size:.86rem;font-weight:700;cursor:pointer;margin:.6rem 0;list-style:none}
details summary::-webkit-details-marker{display:none}

/* ---- galeria de fotos (form) ---- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.4rem}
.galitem{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;border:1px solid var(--edge);animation:pop .3s var(--ease) both}
.galitem img{width:100%;height:100%;object-fit:cover;display:block}
.galx{position:absolute;top:.28rem;right:.28rem;width:25px;height:25px;border-radius:50%;
  background:rgba(15,17,25,.78);color:#fff;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.galadd{aspect-ratio:1;border-radius:16px;border:1.5px dashed var(--line);background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;
  color:var(--ink-soft);font-size:.66rem;font-weight:700;text-align:center;padding:.3rem}
.galadd svg{color:var(--wine)}

/* ---- caderninhos editáveis (perfil) ---- */
.cadrow{gap:.6rem}
.cadname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cadacts{display:flex;gap:.4rem;flex:none}
.cadbtn{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);background:var(--bg-2);flex:none}
.cadbtn.cadrm{color:var(--pink);background:var(--pink-soft)}
.cadadd{color:var(--wine);font-weight:700;gap:.5rem;justify-content:flex-start}
.cadadd svg{flex:none}
.cadinput{flex:1;min-width:0;padding:.55rem .7rem}
.cadok{width:38px;height:38px;border-radius:12px;background:var(--gold);color:#3a2c00;display:flex;align-items:center;justify-content:center;flex:none}

/* ---- detalhe / modo cozinha ---- */
.recipe{padding:0 0 1.5rem}
.recipe .pad{padding:0 1.3rem}
.recipe .hero{display:block;border-radius:0 0 28px 28px;overflow:hidden;box-shadow:var(--shadow)}
.recipe .hero img{width:100%;aspect-ratio:16/11;object-fit:cover;display:block}
.recipe .hero.multi{display:flex;gap:.5rem;overflow-x:auto;overflow-y:hidden;padding:0 1.3rem;
  border-radius:0;box-shadow:none;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.recipe .hero.multi::-webkit-scrollbar{display:none}
.recipe .hero.multi img{flex:0 0 86%;scroll-snap-align:center;border-radius:22px;box-shadow:var(--shadow)}
.recipe h1{font-size:2rem;margin:1.1rem 0 .35rem}
.recipe .meta{color:var(--ink-soft);font-size:.9rem}
.cookprog{display:flex;align-items:center;gap:.65rem;margin-top:1rem;font-size:.78rem;font-weight:700;color:var(--ink-soft)}
.cookprog .bar{flex:1;height:7px;border-radius:999px;background:var(--bg-3);overflow:hidden}
.cookprog .bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--pink));
  width:0;transition:width .35s var(--ease)}
.stepper{display:inline-flex;align-items:center;gap:.2rem;background:var(--card);border-radius:999px;padding:.3rem;box-shadow:var(--shadow-sm);border:1px solid var(--edge);margin-top:1rem}
.stepper b{padding:0 .8rem;font-variant-numeric:tabular-nums;font-weight:700}
.stepper .iconbtn{width:38px;height:38px;box-shadow:none;background:var(--bg-2);border:none}
.check{list-style:none;display:flex;flex-direction:column;gap:.1rem;margin-top:.3rem}
.check li{display:flex;gap:.85rem;align-items:flex-start;padding:.62rem .1rem;cursor:pointer}
.check li .box{flex:none;width:25px;height:25px;border:2px solid var(--ink);border-radius:8px;margin-top:.05rem;display:flex;align-items:center;justify-content:center;transition:.18s var(--ease)}
.check li .box svg{width:15px;height:15px;transform:scale(.3);opacity:0;transition:.18s var(--ease)}
.check li.done .box{background:var(--gold);border-color:var(--gold);transform:scale(1.05)}
.check li.done .box svg{opacity:1;transform:scale(1);color:#3a2c00}
.check li.done .tx{opacity:.4;text-decoration:line-through}
ol.check li .box{border-radius:50%}
.tx{line-height:1.5}
.tbtn{display:inline-flex;align-items:center;gap:.3rem;margin-left:.45rem;padding:.22rem .65rem;border-radius:999px;background:var(--ink);color:var(--bg);font-size:.76rem;font-weight:700;vertical-align:middle}
.tbtn.running{background:var(--pink);animation:pulse 1.6s ease-in-out infinite}
.row{display:flex;gap:.7rem;margin:1.9rem 0 .3rem}
.row .btn,.row .btn-ghost,.row .btn-pink{flex:1;padding:.85rem}
.src{display:inline-block;margin-top:1.1rem;font-size:.9rem;font-weight:600}

/* ---- perfil / ajustes ---- */
.settings{padding:0 1.3rem}
.seclabel{font-size:.7rem;color:var(--ink-soft);font-weight:700;text-transform:uppercase;letter-spacing:.09em;margin:1.6rem .3rem .5rem}
.opts{background:var(--card);border-radius:20px;box-shadow:var(--shadow-sm);border:1px solid var(--edge);overflow:hidden}
.opt{display:flex;align-items:center;justify-content:space-between;width:100%;padding:1rem 1.1rem;text-align:left;font-weight:500}
.opt+.opt{border-top:1px solid var(--line)}
.opt .ck{color:var(--pink);font-weight:700;font-size:.8rem}
.profcard{display:flex;align-items:center;gap:1rem;padding:.5rem .3rem 1rem}
.profcard .pic{width:58px;height:58px;border-radius:50%;box-shadow:var(--shadow-sm),0 0 0 3px var(--card)}
.thumbup{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;border:1px solid var(--edge);margin-top:.4rem}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rcard>img{animation:none}
}