:root{
  --bg:#F6F1E7; --surface:#FFFDF8; --sunk:#EEE6D8; --ink:#2A2118; --muted:#76685A; --line:#E2D7C5;
  --accent:#A9472A; --accent-soft:#F3DDD2; --on-accent:#FFFFFF; --mark:#E8B04A; --danger:#A3392B;
  --k-ing:#2F6B4F; --k-step:#A9472A; --k-note:#7A5AA6; --k-title:#2A2118; --k-skip:#9A8C7C;
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --body:"Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --tabh:4rem;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1A1613; --surface:#241F1A; --sunk:#2E2721; --ink:#F0E8DC; --muted:#A89A8A; --line:#3A322A;
    --accent:#E08A5E; --accent-soft:#3D2A20; --on-accent:#1A1613; --mark:#E8B04A; --danger:#E98A7C;
    --k-ing:#7CC2A0; --k-step:#E08A5E; --k-note:#B9A0E0; --k-title:#F0E8DC; --k-skip:#8A7C6C;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1A1613; --surface:#241F1A; --sunk:#2E2721; --ink:#F0E8DC; --muted:#A89A8A; --line:#3A322A;
  --accent:#E08A5E; --accent-soft:#3D2A20; --on-accent:#1A1613; --mark:#E8B04A; --danger:#E98A7C;
  --k-ing:#7CC2A0; --k-step:#E08A5E; --k-note:#B9A0E0; --k-title:#F0E8DC; --k-skip:#8A7C6C;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.55 var(--body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body.has-tabs{padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px))}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--mark);outline-offset:2px;border-radius:6px}
.wrap{max-width:42rem;margin:0 auto;padding:0 1rem 2.5rem}
.note{color:var(--muted);font-size:.95rem}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* topo */
.top{position:sticky;top:0;z-index:5;background:var(--bg);padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid var(--line)}
.topin{display:flex;align-items:center;gap:.5rem;padding-top:.6rem;padding-bottom:.6rem;min-height:3.4rem}
.brand{font:700 1.4rem/1.1 var(--display);letter-spacing:-.01em;margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{font:400 .95rem var(--body);color:var(--muted);margin-left:.45rem}
.toptitle{flex:1;min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;color:var(--muted)}
.iconbtn{background:none;border:0;padding:.45rem .55rem;border-radius:10px;font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:.25rem;min-height:2.6rem;white-space:nowrap}
.iconbtn.back{margin-left:-.55rem}
.iconbtn svg{width:1.4rem;height:1.4rem}
.spacer{flex:1}

/* botões */
.btn{border:0;border-radius:999px;padding:.7rem 1.25rem;font-weight:700;background:var(--accent);color:var(--on-accent);min-height:2.9rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;text-decoration:none;text-align:center}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.soft{background:var(--accent-soft);color:var(--accent)}
.btn.danger{background:transparent;color:var(--danger);box-shadow:inset 0 0 0 1.5px currentColor}
.btn.small{padding:.4rem .9rem;min-height:2.3rem;font-size:.95rem}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:default}
.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.25rem}
.actions .btn{flex:1 1 10rem}
.linkbtn{background:none;border:0;padding:.2rem 0;color:var(--accent);font-weight:700}

/* barra inferior */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:center;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar[hidden]{display:none}
.tabbar .tabs{display:flex;width:100%;max-width:42rem}
.tab{flex:1;background:none;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;height:var(--tabh);font-size:.8rem;font-weight:700;color:var(--muted)}
.tab svg{width:1.5rem;height:1.5rem}
.tab[aria-current="page"]{color:var(--accent)}
.tab.add span.pill{display:flex;align-items:center;justify-content:center;width:3rem;height:2rem;border-radius:999px;background:var(--accent);color:var(--on-accent)}

/* início */
h1.page{font:700 clamp(1.7rem,7vw,2.3rem)/1.1 var(--display);letter-spacing:-.015em;margin:1.3rem 0 .4rem}
h2.sec{font:700 1.25rem/1.2 var(--display);margin:1.8rem 0 .7rem;display:flex;align-items:baseline;gap:.75rem}
h2.sec .linkbtn{margin-left:auto;font:700 .95rem var(--body)}
.inbox{display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;margin-top:1.1rem;padding:.9rem 1rem;border-radius:16px;border:0;background:var(--accent-soft);color:var(--ink)}
.inbox .n{font:700 1.8rem/1 var(--display);color:var(--accent);min-width:2.2rem;text-align:center}
.inbox b{display:block}
.inbox small{color:var(--muted);font-size:.9rem}
.inbox .chev{margin-left:auto;color:var(--accent)}
.cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
@media (min-width:34rem){.cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:7.2rem;padding:.8rem .9rem;border-radius:16px;border:1px solid var(--line);background:var(--surface);text-align:left;overflow:hidden;color:var(--ink)}
.cat .cn{font:700 1.15rem/1.15 var(--display);position:relative;z-index:1;overflow-wrap:anywhere}
.cat .cc{font-size:.88rem;color:var(--muted);position:relative;z-index:1}
.cat .big{position:absolute;right:-.2rem;top:-.9rem;font:700 5.5rem/1 var(--display);color:var(--sunk);z-index:0}
.cat.photo{border:0;color:#fff}
.cat.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 25%,rgba(0,0,0,.65))}
.cat.photo .cn,.cat.photo .cc{z-index:2;color:#fff}
.cat.new{border:1.5px dashed var(--line);background:transparent;color:var(--accent);justify-content:center;align-items:center;font-weight:700}
.cat.muted:not(.photo) .cn{color:var(--muted)}

/* listas */
ul.rlist{list-style:none;margin:0;padding:0}
.rrow{display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;background:none;border:0;padding:.6rem 0;color:var(--ink)}
ul.rlist li+li .rrow{border-top:1px solid var(--line)}
.thumb{flex:none;width:3.2rem;height:3.2rem;border-radius:12px;object-fit:cover;background:var(--sunk)}
.thumb.ph{display:flex;align-items:center;justify-content:center;font:700 1.35rem/1 var(--display);color:var(--muted)}
.rt{flex:1;min-width:0}
.rt .t{display:block;font:600 1.12rem/1.25 var(--display);overflow-wrap:anywhere}
.rt .m{display:block;color:var(--muted);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--accent)}
.group{display:grid;grid-template-columns:2.4rem 1fr;gap:0 .6rem;padding:.4rem 0;border-bottom:1px solid var(--line)}
.letter{font:700 1.9rem/1 var(--display);color:var(--accent);padding-top:.7rem}
.search{width:100%;margin:1rem 0 .4rem;padding:.8rem 1rem;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);font-size:1.05rem}
.search::placeholder{color:var(--muted)}
.empty{padding:2.5rem 0 1rem}
.empty h1{font:700 clamp(1.9rem,8vw,2.6rem)/1.05 var(--display);letter-spacing:-.02em;margin:0 0 .75rem}
.empty p{color:var(--muted);margin:0 0 1.25rem;max-width:30rem}

/* formulários */
label.f{display:block;font-weight:700;margin:1.1rem 0 .35rem}
label.f span{font-weight:400;color:var(--muted);font-size:.9rem}
.inp{width:100%;padding:.7rem .9rem;border-radius:12px;border:1.5px solid var(--line);background:var(--surface)}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 1.1rem) 55%,calc(100% - .8rem) 55%;background-size:.3rem .3rem;background-repeat:no-repeat;padding-right:2rem}
textarea.inp{min-height:8rem;resize:vertical;line-height:1.5}
textarea.paste{min-height:15rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 .75rem}
.status{margin-top:1rem;padding:.8rem 1rem;border-radius:12px;background:var(--surface);border-left:4px solid var(--mark)}
.status.err{border-left-color:var(--danger)}
.photo-edit{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.photo-edit img{width:5rem;height:5rem;border-radius:12px;object-fit:cover}
.seg{display:flex;padding:.25rem;border-radius:999px;background:var(--sunk);margin:1.4rem 0 .5rem}
.seg button{flex:1;border:0;background:none;border-radius:999px;padding:.55rem .5rem;font-weight:700;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.savebar{position:sticky;bottom:0;margin:1.5rem -1rem 0;padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--bg) 30%)}
.legend{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.85rem;color:var(--muted);margin:.25rem 0 .5rem}
.legend i{display:inline-block;width:.7rem;height:.7rem;border-radius:3px;margin-right:.3rem;vertical-align:-.05rem}

/* organizador de linhas */
.lines{list-style:none;margin:0;padding:0}
.ln{display:flex;gap:.6rem;align-items:flex-start;width:100%;text-align:left;border:0;background:var(--surface);color:var(--ink);padding:.55rem .7rem;border-radius:10px;margin:.3rem 0;border-left:4px solid var(--kc)}
.ln .kl{flex:none;width:6.3rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--kc);padding-top:.2rem}
.ln .lt{flex:1;min-width:0;overflow-wrap:anywhere}
.ln.k-skip .lt{color:var(--muted);text-decoration:line-through}
.k-ing{--kc:var(--k-ing)} .k-step{--kc:var(--k-step)} .k-note{--kc:var(--k-note)} .k-title{--kc:var(--k-title)} .k-skip{--kc:var(--k-skip)}
.ln.k-title .lt{font:700 1.1rem/1.3 var(--display)}

/* detalhe */
.hero{margin:0 -1rem;aspect-ratio:16/10;max-height:22rem;overflow:hidden;background:var(--sunk)}
@media (min-width:44rem){.hero{margin:1rem 0 0;border-radius:18px}}
.hero img{width:100%;height:100%;object-fit:cover}
.meta{color:var(--muted);display:flex;flex-wrap:wrap;gap:.2rem .9rem}
.meta .catlink{color:var(--accent);font-weight:700;background:none;border:0;padding:0}
.review{display:flex;gap:.75rem;align-items:center;margin-top:1rem;padding:.75rem .9rem;border-radius:14px;background:var(--accent-soft)}
.review p{margin:0;flex:1;font-size:.95rem}
.servings{display:flex;align-items:center;gap:.5rem;margin:1.3rem 0 .25rem;padding:.55rem .7rem;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.servings .lab{flex:1;font-weight:700}
.servings .lab small{display:block;font-weight:400;color:var(--muted);font-size:.86rem}
.step{width:2.6rem;height:2.6rem;border-radius:50%;border:0;background:var(--sunk);font:700 1.35rem/1 var(--body);color:var(--accent)}
.svnum{min-width:2.4rem;text-align:center;font:700 1.45rem/1 var(--display)}
ul.ing{list-style:none;margin:0;padding:0}
ul.ing li{padding:.5rem 0;border-bottom:1px solid var(--line)}
ul.ing li.grp,ol.steps li.grp{font:700 1.02rem/1.3 var(--display);color:var(--accent);border-bottom:0;padding-top:1rem}
.qs{font-weight:700;background:linear-gradient(transparent 60%,color-mix(in srgb,var(--mark) 45%,transparent) 60%)}
ol.steps{margin:0;padding:0;list-style:none}
ol.steps li{display:grid;grid-template-columns:1.9rem 1fr;gap:.5rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
ol.steps li.grp{display:block}
ol.steps .sn{font:700 1.1rem/1.45 var(--display);color:var(--accent)}
textarea.notes{min-height:8rem}
.saved{font-size:.86rem;color:var(--muted);min-height:1.3em;margin-top:.3rem}
details.orig{margin-top:1.5rem}
details.orig summary{cursor:pointer;color:var(--muted)}
details.orig pre{white-space:pre-wrap;font:inherit;font-size:.93rem;color:var(--muted);background:var(--surface);padding:1rem;border-radius:12px;overflow-wrap:anywhere}
.cookbar{margin-top:1.1rem}
.cookbar .btn{width:100%;font-size:1.1rem;min-height:3.3rem}

/* gerenciar categorias */
.mrow{display:flex;align-items:center;gap:.4rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.mrow .mn{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere}
.mrow .mn small{display:block;font-weight:400;color:var(--muted);font-size:.86rem}
.mini{width:2.4rem;height:2.4rem;border-radius:10px;border:0;background:var(--sunk);color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.mini svg{width:1.1rem;height:1.1rem}
.mini:disabled{opacity:.35}
.mini.del{color:var(--danger)}
.setting{padding:1rem 0;border-bottom:1px solid var(--line)}
.setting h3{margin:0 0 .25rem;font:700 1.1rem var(--display)}
.setting p{margin:0 0 .75rem;color:var(--muted);font-size:.95rem}

/* modo cozinha */
#cook{position:fixed;inset:0;z-index:20;background:var(--bg);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
#cook[hidden]{display:none}
.ck-top{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem}
.ck-title{flex:1;min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.ck-progress{height:6px;background:var(--line);margin:0 1rem;border-radius:3px;overflow:hidden}
.ck-progress div{height:100%;background:var(--accent);transition:width .25s ease}
.ck-body{flex:1;overflow-y:auto;padding:1.5rem 1.25rem;max-width:44rem;width:100%;margin:0 auto}
.ck-group{font-weight:700;color:var(--accent);margin:0 0 .5rem}
.ck-count{font:700 clamp(3.5rem,18vw,6rem)/.9 var(--display);color:var(--accent);letter-spacing:-.03em}
.ck-count small{font:700 1rem var(--body);color:var(--muted);letter-spacing:0;margin-left:.35rem}
.ck-text{font:500 clamp(1.4rem,5.4vw,2.1rem)/1.38 var(--display);margin:1rem 0 0}
.ck-done{font:700 clamp(2rem,9vw,3rem)/1.05 var(--display)}
.ck-nav{display:flex;gap:.75rem;padding:.8rem 1rem 1rem;max-width:44rem;width:100%;margin:0 auto}
.ck-nav .btn{flex:1;min-height:3.7rem;font-size:1.12rem}
.ck-sheet{border-top:1px solid var(--line);background:var(--surface);max-height:45vh;overflow-y:auto;padding:.5rem 1.25rem 1rem}
.ck-sheet[hidden]{display:none}
.ck-sheet label{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem 0;border-bottom:1px solid var(--line);font-size:1.08rem}
.ck-sheet label.grp{font-weight:700;color:var(--accent);border-bottom:0}
.ck-sheet input{width:1.3rem;height:1.3rem;margin-top:.2rem;accent-color:var(--accent);flex:none}
.ck-sheet input:checked+span{text-decoration:line-through;color:var(--muted)}
.ck-sheet textarea{width:100%;min-height:8rem;margin:.6rem 0 0}

#toast{position:fixed;left:50%;bottom:calc(var(--tabh) + 1rem + env(safe-area-inset-bottom,0px));transform:translate(-50%,1rem);background:var(--ink);color:var(--bg);padding:.65rem 1.1rem;border-radius:999px;font-weight:700;font-size:.95rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:30;max-width:calc(100vw - 2rem);text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}