:root{--bg:#fbf7f2;--card:#fff;--ink:#2b2522;--muted:#8a7f78;--accent:#e8613c;--accent2:#ffd9c9;--radius:16px;--shadow:0 6px 24px rgba(60,30,10,.08)}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.container{max-width:1180px;margin:0 auto;padding:24px 20px 60px}
.hidden{display:none}.muted{color:var(--muted);margin:0}
.topbar{position:sticky;top:0;z-index:10;display:flex;gap:16px;align-items:center;padding:12px 24px;background:rgba(251,247,242,.92);backdrop-filter:blur(8px);border-bottom:1px solid #eee3d9}
.brand{font-weight:800;font-size:20px;white-space:nowrap}
.search{flex:1;display:flex;max-width:520px}
.search input{flex:1;padding:10px 14px;border:1px solid #e5d8cc;border-radius:999px 0 0 999px;outline:none;font-size:14px}
.search button{border:0;background:var(--accent);color:#fff;padding:0 18px;border-radius:0 999px 999px 0;cursor:pointer}
.fav-link{margin-left:auto;white-space:nowrap}
.btn{display:inline-block;border:1px solid #e5d8cc;background:#fff;padding:10px 16px;border-radius:999px;cursor:pointer;font-size:14px;transition:.15s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.alert{background:#fff0ec;border:1px solid var(--accent2);padding:14px;border-radius:12px;margin-bottom:16px}
.section-title{margin:40px 0 16px;font-size:22px}
/* hero */
.hero{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:center;background:linear-gradient(135deg,#fff,#fff3ec);padding:36px;border-radius:24px;box-shadow:var(--shadow)}
.greet{color:var(--accent);font-weight:600;margin:0}
.hero h1{font-size:38px;margin:6px 0 22px;line-height:1.25}
.moods{display:flex;flex-wrap:wrap;gap:10px}
.pick{background:var(--card);border-radius:var(--radius);overflow:hidden;min-height:340px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.pick>img{height:240px;object-fit:cover;width:100%}
.pick-body{padding:18px 20px}.pick-body h2{margin:4px 0 8px}
.pick-empty{margin:auto;text-align:center;color:var(--muted);font-size:18px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.spinner{width:32px;height:32px;border:3px solid var(--accent2);border-top-color:var(--accent);border-radius:50%;margin:0 auto 10px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* grids */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.grid.small{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.card{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.2s}
.card:hover{transform:translateY(-4px)}
.card img{aspect-ratio:1/1;object-fit:cover;width:100%}
.card-body{padding:12px 14px}.card h3{margin:0 0 4px;font-size:16px}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px}
.cat{background:#fff;border-radius:var(--radius);padding:12px;text-align:center;box-shadow:var(--shadow);transition:.2s}
.cat:hover{background:var(--accent2)}
.cat{display:flex;flex-direction:column;align-items:center;gap:2px}.cat-icon{font-size:34px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip{background:#fff;border:1px solid #eadfd5;padding:6px 14px;border-radius:999px;font-size:14px}
a.chip:hover{border-color:var(--accent);color:var(--accent)}
/* detail */
.meal-hero{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.meal-img{width:100%;border-radius:24px;box-shadow:var(--shadow);aspect-ratio:1/1;object-fit:cover}
.crumbs{color:var(--accent);margin:0}.meal-info h1{font-size:36px;margin:4px 0 12px;line-height:1.2}
.intro{font-size:16px}
.stats{list-style:none;padding:0;margin:18px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stats li{background:#fff;border-radius:12px;padding:12px;text-align:center;box-shadow:var(--shadow)}
.stats b{display:block;font-size:20px;color:var(--accent)}.stats span{font-size:13px;color:var(--muted)}
.meal-body{display:grid;grid-template-columns:380px 1fr;gap:28px;margin-top:36px;align-items:start}
.panel{background:#fff;border-radius:20px;padding:24px;box-shadow:var(--shadow)}
.panel h2{margin-top:0}
.ingredients{list-style:none;padding:0;margin:0}
.ingredients li{border-bottom:1px dashed #efe5dc}
.ingredients label{display:flex;align-items:center;gap:10px;padding:8px 0;cursor:pointer}
.ingredients img{width:40px;height:40px;object-fit:contain}
.ing-name{flex:1;font-weight:500}.ing-measure{color:var(--muted);font-size:14px;text-align:right}
.ingredients input:checked~.ing-name{text-decoration:line-through;color:var(--muted)}
.tip{font-size:13px;margin-top:12px}
.steps{list-style:none;padding:0;margin:0 0 24px}
.steps li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid #f3ebe4}
.steps .num{flex:none;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700}
.steps p{margin:4px 0 0}
.video{position:relative;padding-top:56.25%;border-radius:14px;overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.footer{text-align:center;color:var(--muted);font-size:13px;padding:30px}
@media(max-width:860px){.hero,.meal-hero,.meal-body{grid-template-columns:1fr}.hero{padding:22px}.hero h1{font-size:28px}.search{display:none}.stats{grid-template-columns:repeat(2,1fr)}}

/* 占位图 & 懒加载封面 */
.ph{aspect-ratio:1/1;display:grid;place-items:center;background:linear-gradient(135deg,#ffe9dd,#fff6ef);background-size:cover;background-position:center;font-size:56px}
.ph.loaded span{display:none}.ph.big{font-size:96px;border-radius:24px}
.pick .ph.big{aspect-ratio:auto;height:240px;border-radius:0}
.pick-intro{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 6px}
.stars{color:#f5a623;letter-spacing:1px}
.label{margin:14px 0 0;font-weight:600;font-size:14px}
/* 图集 */
.thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto}
.thumbs img{width:72px;height:72px;object-fit:cover;border-radius:10px;cursor:pointer;opacity:.6;border:2px solid transparent}
.thumbs img.active{opacity:1;border-color:var(--accent)}
/* Markdown 内容 */
.panel+.panel,aside .panel+.panel{margin-top:22px}
.md ul,.md ol{padding-left:1.3em;margin:8px 0}.md li{margin:6px 0}
.md h3{font-size:16px;margin:18px 0 6px;color:var(--accent)}
.md p{margin:8px 0}.md blockquote{margin:10px 0;padding:8px 14px;background:#fff6ef;border-left:4px solid var(--accent);border-radius:8px}
.md .md-img{border-radius:12px;margin:10px 0;max-height:420px}
.md a{color:var(--accent);text-decoration:underline}
.table-wrap{overflow-x:auto}.md table{border-collapse:collapse;width:100%;font-size:14px}.md th,.md td{border:1px solid #eee3d9;padding:6px 10px;text-align:left}.md th{background:#fff6ef}
.ing{background:var(--accent2);color:#a63d1e;padding:1px 6px;border-radius:6px;font-size:.95em}
.intro p{margin:0 0 8px;font-size:16px}
.steps-panel ol>li{cursor:pointer;padding:4px 6px;border-radius:8px;transition:.15s}
.steps-panel ol>li:hover{background:#fff8f3}
.steps-panel ol>li.done{opacity:.45;text-decoration:line-through}
/* 视频 */
#videos{margin-top:22px}
.vlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:14px}
.vitem{position:relative;text-align:left;background:#fff;border:2px solid transparent;border-radius:12px;padding:0 0 8px;cursor:pointer;overflow:hidden;font:inherit;display:flex;flex-direction:column;gap:4px}
.vitem.active{border-color:var(--accent)}
.vitem img{width:100%;aspect-ratio:16/10;object-fit:cover}
.vitem .dur{position:absolute;right:6px;top:6px;background:rgba(0,0,0,.65);color:#fff;font-size:12px;padding:1px 6px;border-radius:6px}
.vitem .vt{padding:0 8px;font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vitem .muted{padding:0 8px;font-size:12px}