/* ===== 一锅出 · 样式 ===== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* hidden 属性优先于一切 display 声明（防止 .timer-mask 等 flex/grid 样式把它盖掉） */
[hidden]{ display:none !important; }
:root{
  --bg:#faf6f0; --card:#fff; --ink:#2b2420; --sub:#8a7f76;
  --accent:#e8601f; --accent-soft:#fdeee4; --line:#eee3d8;
  --green:#2e9e5b; --warn:#c0392b;
  --radius:16px; --shadow:0 2px 10px rgba(80,50,20,.07);
}
html{ scroll-behavior:smooth; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6; padding-bottom:40px;
}
.wrap{ max-width:860px; margin:0 auto; padding:0 16px; }

/* ---- 顶栏 ---- */
.topbar{ position:sticky; top:0; z-index:50; background:rgba(250,246,240,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.topbar-in{ display:flex; align-items:center; gap:12px; height:56px; }
.logo{ background:none;border:none;font-size:20px;font-weight:800;color:var(--ink);cursor:pointer;white-space:nowrap; }
.logo:hover{ color:var(--accent); }
.brand-sub{ font-size:11px; color:var(--sub); white-space:nowrap; }
.nav{ margin-left:auto; display:flex; gap:6px; }
.nav-btn{ position:relative; border:1px solid transparent; background:none; padding:7px 12px; border-radius:999px; font-size:14px; color:var(--sub); cursor:pointer; transition:.15s; }
.nav-btn.active{ background:var(--ink); color:#fff; }
.nav-btn:not(.active):hover{ color:var(--ink); background:var(--card); border-color:var(--line); }
.badge{ display:inline-block; min-width:18px; padding:0 5px; margin-left:3px; border-radius:999px; background:var(--accent); color:#fff; font-size:11px; line-height:18px; text-align:center; }
.badge.warn{ background:var(--warn); }

/* ---- 视图切换 ---- */
.view{ display:none; animation:fade .25s ease; }
.view.active{ display:block; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* ---- Hero ---- */
.hero{ text-align:center; padding:38px 0 8px; }
.hero h1{ font-size:30px; letter-spacing:.5px; }
.hero h1 em{ font-style:normal; color:var(--accent); position:relative; }
.hero p{ color:var(--sub); margin-top:8px; font-size:15px; }

/* ---- 厨具选择 ---- */
.tool-select{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:24px 0 14px; }
.tool-card{ background:var(--card); border:1.5px solid var(--line); border-radius:var(--radius); padding:12px 10px; text-align:center; cursor:pointer; transition:.15s; box-shadow:var(--shadow); }
.tool-card:hover{ transform:translateY(-2px); border-color:#e8b48f; }
.tool-card.active{ border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent) inset; }
.t-icon{ font-size:24px; display:block; }
.t-name{ font-weight:700; font-size:14px; display:block; margin-top:2px; }
.t-desc{ font-size:11px; color:var(--sub); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- 筛选行 ---- */
.filter-row{ display:flex; gap:8px; margin-bottom:18px; }
#searchInput{ flex:1; border:1.5px solid var(--line); border-radius:12px; padding:10px 14px; font-size:14px; background:var(--card); outline:none; }
#searchInput:focus{ border-color:var(--accent); }
#timeFilter{ border:1.5px solid var(--line); border-radius:12px; padding:10px 8px; font-size:13px; background:var(--card); color:var(--ink); outline:none; }

/* ---- 菜谱卡片 ---- */
.recipe-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; cursor:pointer; transition:.15s; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.card:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(80,50,20,.12); }
.card .tagbar{ display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.tag{ font-size:10.5px; padding:2px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent); }
.tag.gray{ background:#f2ede7; color:var(--sub); }
.card h3{ font-size:17px; margin-bottom:6px; }
.card .meta{ display:flex; gap:12px; font-size:12.5px; color:var(--sub); flex-wrap:wrap; }
.card .meta b{ color:var(--ink); }
.card .mod{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); font-size:11.5px; color:var(--sub); display:flex; gap:6px; flex-wrap:wrap; }
.card .mod span{ background:#f6f1ea; padding:2px 7px; border-radius:8px; }
.card .add-btn{ position:absolute; right:12px; bottom:12px; border:none; background:var(--ink); color:#fff; border-radius:999px; padding:6px 12px; font-size:12px; cursor:pointer; }
.card .add-btn:hover{ background:var(--accent); }
.card .add-btn.done{ background:var(--green); }

/* ---- 详情 ---- */
.back-btn{ margin:20px 0 12px; border:1.5px solid var(--line); background:var(--card); padding:8px 16px; border-radius:999px; cursor:pointer; font-size:14px; color:var(--ink); }
.back-btn:hover{ border-color:var(--accent); color:var(--accent); }
.detail{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:var(--shadow); margin-bottom:20px; }
.detail-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.detail h2{ font-size:26px; }
.detail .tool-chip{ background:var(--accent-soft); color:var(--accent); font-weight:700; padding:4px 12px; border-radius:999px; font-size:13px; }
.detail .meta-row{ display:flex; gap:16px; color:var(--sub); font-size:13.5px; margin:8px 0 4px; flex-wrap:wrap; }
.mod-strip{ display:flex; gap:8px; margin:14px 0 6px; flex-wrap:wrap; }
.mod-strip .m{ flex:1; min-width:110px; background:#f7f2ec; border-radius:12px; padding:8px 12px; text-align:center; }
.mod-strip .m .lab{ font-size:10.5px; color:var(--sub); display:block; }
.mod-strip .m .val{ font-weight:700; font-size:13.5px; }

.detail h4{ margin:20px 0 8px; font-size:15px; display:flex; align-items:center; gap:6px; }
.ing-list{ list-style:none; display:grid; gap:6px; }
.ing-list li{ display:flex; align-items:center; gap:10px; background:#faf6f1; border-radius:10px; padding:7px 12px; font-size:14px; cursor:pointer; user-select:none; }
.ing-list li:hover{ background:var(--accent-soft); }
.ing-list input{ accent-color:var(--green); width:16px; height:16px; }
.ing-list .amt{ margin-left:auto; color:var(--sub); font-size:12.5px; }
.ing-list .pre{ display:block; width:100%; font-size:11.5px; color:var(--accent); padding-left:26px; margin-top:-2px; }
.ing-list li.checked .nm{ text-decoration:line-through; color:var(--sub); }
.ing-note{ font-size:12px; color:var(--sub); margin-top:6px; }
.buy-progress{ height:6px; background:var(--line); border-radius:99px; overflow:hidden; margin-top:8px; }
.buy-progress i{ display:block; height:100%; background:var(--green); width:0; transition:.3s; }

.step-list{ list-style:none; counter-reset:st; }
.step-list li{ counter-increment:st; display:flex; gap:12px; padding:10px 0; border-bottom:1px dashed var(--line); font-size:14.5px; }
.step-list li:last-child{ border-bottom:none; }
.step-list li::before{ content:counter(st); flex:0 0 26px; height:26px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.step-list li:nth-child(1)::before{ background:#4a90d9; }
.step-list li:nth-child(2)::before{ background:var(--accent); }
.step-list li:nth-child(3)::before{ background:var(--green); }

.tips-box{ background:#fff8e6; border:1px solid #f0e0b0; border-radius:12px; padding:10px 14px; font-size:13px; color:#8a6d1a; margin-top:14px; }

.detail-actions{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.btn{ border:none; border-radius:12px; padding:11px 20px; font-size:14.5px; font-weight:600; cursor:pointer; transition:.15s; }
.btn:active{ transform:scale(.97); }
.btn.primary{ background:var(--accent); color:#fff; box-shadow:0 4px 14px rgba(232,96,31,.35); }
.btn.primary:hover{ filter:brightness(1.08); }
.btn.green{ background:var(--green); color:#fff; }
.btn.ghost{ background:#f2ede7; color:var(--ink); }
.btn.ghost:hover{ background:var(--line); }
.btn.big{ padding:13px 26px; font-size:16px; border-radius:14px; }
.btn.on{ background:var(--green) !important; }

/* ---- 页面头 ---- */
.page-head{ padding:28px 0 10px; }
.page-head h2{ font-size:24px; }
.page-sub{ color:var(--sub); font-size:13.5px; margin-top:4px; }
.page-sub strong{ color:var(--accent); }

/* ---- 菜单列表 ---- */
.plan-list{ display:grid; gap:10px; margin-top:14px; }
.plan-item{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:13px 16px; display:flex; align-items:center; gap:12px; box-shadow:var(--shadow); }
.plan-item .nm{ font-weight:600; font-size:15px; }
.plan-item .mt{ font-size:12px; color:var(--sub); }
.plan-item .x{ margin-left:auto; border:none; background:#f2ede7; color:var(--sub); width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:14px; }
.plan-item .x:hover{ background:var(--warn); color:#fff; }
.plan-actions{ display:flex; gap:10px; margin:18px 0 10px; align-items:center; flex-wrap:wrap; }

/* ---- 购物清单 ---- */
.shop-cat{ margin-top:16px; }
.shop-cat h3{ font-size:14px; color:var(--sub); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.shop-cat h3::after{ content:""; flex:1; height:1px; background:var(--line); }
.shop-list{ list-style:none; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.shop-list li{ display:flex; align-items:center; gap:10px; padding:10px 14px; font-size:14px; border-bottom:1px solid var(--line); }
.shop-list li:last-child{ border-bottom:none; }
.shop-list input{ accent-color:var(--green); width:16px; height:16px; }
.shop-list .amt{ margin-left:auto; color:var(--sub); font-size:12.5px; text-align:right; }
.shop-list .src{ font-size:10.5px; color:#b3a79c; background:#f6f1ea; border-radius:6px; padding:1px 6px; margin-left:6px; white-space:nowrap; }
.shop-list li.done{ opacity:.5; }
.shop-list li.done .nm{ text-decoration:line-through; }
.hint{ font-size:12.5px; color:var(--sub); }

.empty{ text-align:center; color:var(--sub); background:var(--card); border:1.5px dashed var(--line); border-radius:16px; padding:40px 20px; margin-top:14px; font-size:14px; }
.empty a{ color:var(--accent); text-decoration:none; font-weight:600; }

/* ---- 倒计时 ---- */
.timer-mask{ position:fixed; inset:0; background:rgba(30,20,10,.55); backdrop-filter:blur(4px); z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; }
.timer-card{ background:var(--card); border-radius:24px; padding:28px 24px; width:min(360px,100%); text-align:center; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.timer-close{ position:absolute; top:12px; right:14px; border:none; background:#f2ede7; width:30px; height:30px; border-radius:50%; cursor:pointer; color:var(--sub); font-size:14px; }
.timer-close:hover{ background:var(--line); }
.timer-name{ font-size:19px; font-weight:800; padding-right:20px; }
.timer-cook{ color:var(--accent); font-weight:700; font-size:13px; margin:4px 0 8px; }
.timer-display{ font-size:64px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:2px; line-height:1.1; }
.timer-display.go{ color:var(--accent); animation:pulse 1s infinite; }
@keyframes pulse{ 50%{ opacity:.55; } }
.timer-controls{ display:flex; gap:10px; justify-content:center; margin-top:16px; }
.timer-tip{ font-size:12px; color:var(--sub); margin-top:14px; min-height:18px; }

/* ---- footer ---- */
.foot{ margin-top:50px; text-align:center; color:#b9ada2; font-size:12px; border-top:1px solid var(--line); padding-top:20px; }

/* ---- 响应式 ---- */
@media (max-width:560px){
  .brand-sub{ display:none; }
  .hero h1{ font-size:24px; }
  .recipe-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .card{ padding:13px; }
  .card h3{ font-size:15px; }
  .filter-row{ flex-direction:column; }
  .detail{ padding:16px; }
}