/* 明亮轻快的配色：浅暖白底 + 鲜橙 + 柠檬黄点缀 */
:root {
  --bg: #fffcf5;
  --card: #ffffff;
  --ink: #2e2a26;
  --muted: #9a918a;
  --line: #f1ebe2;
  --accent: #ff8a3d;
  --accent-soft: #fff1dc;
  --sun: #ffd166;
  --radius: 18px;
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* 背景只放 html，body 透明，否则会盖住 z-index:-1 的爱心层 */
html { background: var(--bg); }
body { margin: 0; color: var(--ink); }
body {
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 0 max(16px, env(safe-area-inset-left)) calc(110px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right));
}
.wrap { max-width: 960px; margin: 0 auto; }
header { padding: calc(28px + env(safe-area-inset-top)) 0 14px; }
/* 顶部一道淡淡的暖光渐变 */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: 260px; z-index: -1; background: linear-gradient(180deg, #fff3d6, transparent); }
h1 { font-weight: 800; font-size: 32px; margin: 0; letter-spacing: -.5px; }
h1 em { font-style: normal; color: var(--accent); }
.sub { color: var(--muted); margin: 4px 0 0; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); font-size: 18px; line-height: 1; }
.stepper button.add { background: var(--accent); border-color: var(--accent); color: #fff; }
.stepper span { min-width: 20px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

/* 分类标签栏，滚动时吸顶 */
.tabs { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; gap: 8px; overflow-x: auto; padding: 12px 0; margin-top: 8px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { white-space: nowrap; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 14px; }
.tabs button.on { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); }

section h2 { font-size: 15px; color: var(--muted); font-weight: 500; margin: 18px 0 10px; scroll-margin-top: 64px; }
.grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid { grid-template-columns: repeat(3, 1fr); } h1 { font-size: 36px; } }
.dish { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: 0 2px 10px rgba(255, 138, 61, .06); transition: border-color .15s, transform .15s, box-shadow .15s; }
.dish:active { transform: scale(.98); }
button.dish { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.dish .check { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); font-size: 18px; font-weight: 600; }
.dish.picked .check { background: var(--accent); color: #fff; }
.dish.picked { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 45%, var(--card)); box-shadow: 0 6px 16px rgba(255, 138, 61, .15); }
.dish .ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; font-size: 26px; background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--sun) 30%, var(--card))); border-radius: 14px; }
.dish .name { flex: 1; font-weight: 500; }
.tag { display: inline-block; font-size: 11px; color: #8a5a00; background: var(--sun); border-radius: 6px; padding: 0 6px; margin-left: 6px; vertical-align: 2px; }
.tag.new { color: #fff; background: #ff6f91; }

/* 底部结算栏，适配 iPhone 底部安全区 */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: 12px max(16px, env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; gap: 12px; }
.bar .info { flex: 1; color: var(--muted); font-size: 14px; }
.bar .info b { color: var(--ink); font-size: 16px; }
.primary { background: linear-gradient(135deg, #ffa24c, #ff7a3d); color: #fff; padding: 12px 26px; border-radius: 999px; font-weight: 600; box-shadow: 0 6px 16px rgba(255, 122, 61, .3); }
.primary:disabled { opacity: .4; cursor: default; }

/* 确认弹层 */
.mask { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.35); display: none; align-items: flex-end; justify-content: center; }
.mask.show { display: flex; }
.sheet { width: 100%; max-width: 520px; background: var(--card); border-radius: 20px 20px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); max-height: 85vh; overflow: auto; }
@media (min-width: 640px) { .mask { align-items: center; } .sheet { border-radius: 20px; } }
.sheet h3 { margin: 0 0 12px; font-size: 20px; font-weight: 700; }
.sheet ul { list-style: none; padding: 0; margin: 0 0 12px; }
.sheet li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); }
textarea, input[type=text], input[type=password] { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
textarea { resize: none; height: 72px; }
.actions { display: flex; gap: 10px; margin-top: 14px; }
.actions button { flex: 1; }
.ghost { padding: 12px; border-radius: 999px; border: 1px solid var(--line); }
.done { text-align: center; padding: 70px 0; }
.done .big { font-size: 56px; }
.empty { color: var(--muted); text-align: center; padding: 40px 0; }

/* 背景漂浮小爱心：低透明度，不抢内容 */
.hearts { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hearts span { position: absolute; bottom: -40px; color: #ff9aa2; opacity: 0; animation: rise linear infinite; }
@keyframes rise {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: var(--o); }
  50% { transform: translate(var(--sway), -55vh) rotate(12deg); }
  90% { opacity: var(--o); }
  100% { transform: translate(0, -115vh) rotate(-8deg); opacity: 0; }
}
/* 系统开启"减弱动态效果"时不播放动画 */
@media (prefers-reduced-motion: reduce) { .hearts { display: none; } }
/* 卡片半透明，让爱心隐约透出来 */
.dish, .panel, .tabs button:not(.on) { background: rgba(255, 255, 255, .72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.dish.picked { background: rgba(255, 241, 220, .8); }