:root {
  --cell-h: 132px;
  --reel-w: 150px;
  --yellow: #ffd166;
  --orange: #ff9f1c;
  --red: #ef476f;
  --green: #06d6a0;
  --blue: #4cc9f0;
  --ink: #3a2e2a;
  --cream: #fff7e6;
  --radius: 22px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: linear-gradient(180deg, #ffe9a8 0%, #ffd9c0 45%, #ffd3e2 100%);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 背景漂浮的云 */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.cloud { position: absolute; font-size: 46px; opacity: 0.7; animation: drift 26s linear infinite; }
.c1 { top: 12%; left: -12%; animation-duration: 32s; }
.c2 { top: 30%; left: -20%; font-size: 64px; animation-duration: 40s; animation-delay: -8s; }
.c3 { top: 8%;  left: -30%; font-size: 38px; animation-duration: 24s; animation-delay: -4s; }
@keyframes drift { to { transform: translateX(140vw); } }

/* ===== 内容板块宽度（首页 .stage / .result-bar、菜品列表 .dish-list / .explore-search 等共用） =====
 * 简化策略：直接给 max-width 一个具体数值，规避 CSS 变量 + min() 在某些浏览器/环境下取值异常。
 * 1000px 是宽屏下内容板块的最大宽度；窄屏走 100%（由 padding 控制边距）。
 * 一切用 100% / 100vw / 具体像素，无 CSS 变量参与。 */
.topbar, .stage, .foot,
.page-nav,
.dish-list,
.list-pager,
.explore-search {
  position: relative; z-index: 1; width: 100%; max-width: 1000px;
  margin-left: auto; margin-right: auto;
  padding-left: 16px; padding-right: 16px; box-sizing: border-box;
}
.topbar { text-align: center; margin-top: 22px; }
.page-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; margin-bottom: 18px; }
.dish-list { display: grid; gap: 12px; padding-top: 0; padding-bottom: 40px; }
.list-pager { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; margin-bottom: 4px; }
.explore-search { display: flex; align-items: center; margin-top: 8px; margin-bottom: 14px; position: relative; }

/* 老虎机机身单独约束：和内容板块同宽，但继承 .stage 的居中 */
.machine { margin-left: auto; margin-right: auto; }

/* 探索 / 我的 / 摇菜 底部留白，避免被 Dock 遮挡 */
#view-explore .dish-list, #view-me .dish-list { padding-bottom: 16px; }
#view-explore, #view-me, #view-spin { padding-bottom: 110px; }
#view-spin .chosen-area { margin-bottom: 24px; }
.login-btn {
  position: absolute; top: 0; right: 16px;
  border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.85);
  color: #a2634a; font-size: 13px; font-weight: 700;
  padding: 6px 12px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(239, 71, 111, 0.2);
}
.login-btn:hover { background: #fff; }
@media (max-width: 480px) { .login-btn { font-size: 12px; padding: 5px 10px; } }
.logo {
  margin: 0;
  font-size: clamp(28px, 7vw, 44px);
  color: #fff;
  text-shadow: 0 3px 0 var(--orange), 0 6px 14px rgba(239, 71, 111, 0.35);
  letter-spacing: 2px;
}
.slogan { margin: 8px 0 0; color: #a2634a; font-size: clamp(13px, 3.4vw, 16px); }

/* ===== 老虎机机身 ===== */
.machine {
  margin: 22px auto 0;
  background: linear-gradient(160deg, #ff8c42, #ef476f);
  border-radius: 30px;
  padding: 18px 18px 22px;
  box-shadow: var(--shadow), inset 0 -6px 0 rgba(0, 0, 0, 0.12);
  border: 4px solid #fff;
}
.machine-top { display: flex; justify-content: center; gap: 12px; margin-bottom: 14px; }
.bulb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 10px var(--yellow);
  animation: blink 1.1s ease-in-out infinite;
}
.bulb:nth-child(2) { animation-delay: 0.2s; }
.bulb:nth-child(3) { animation-delay: 0.4s; }
.bulb:nth-child(4) { animation-delay: 0.6s; }
.bulb:nth-child(5) { animation-delay: 0.8s; }
@keyframes blink { 50% { opacity: 0.35; box-shadow: none; } }

.reels {
  display: flex;
  justify-content: center;
  gap: 10px;
  background: #2b2320;
  padding: 14px;
  border-radius: var(--radius);
  box-shadow: inset 0 4px 16px rgba(0, 0, 0, 0.5);
}

.reel {
  position: relative;
  width: var(--reel-w);
  height: var(--cell-h);
  overflow: hidden;
  border-radius: 16px;
  background: var(--cream);
  box-shadow: inset 0 0 0 3px #fff, inset 0 10px 20px rgba(0,0,0,.06);
}
/* 上下渐隐，突出中间中奖格 */
.reel::before, .reel::after {
  content: ""; position: absolute; left: 0; right: 0; height: 34px; z-index: 2; pointer-events: none;
}
.reel::before { top: 0;    background: linear-gradient(#fff7e6, rgba(255,247,230,0)); }
.reel::after  { bottom: 0; background: linear-gradient(rgba(255,247,230,0), #fff7e6); }
.reel.win { animation: pop 0.5s ease; }
@keyframes pop { 30% { transform: scale(1.06); } }

.strip { display: flex; flex-direction: column; will-change: transform; }
.cell {
  height: var(--cell-h);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px; text-align: center; padding: 6px;
}
.cell .emoji { font-size: 44px; line-height: 1; }
.cell .name { font-size: 17px; font-weight: 700; }
.cell .tag {
  font-size: 11px; color: #fff; padding: 1px 8px; border-radius: 999px;
  background: var(--orange);
}

.machine-bottom { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 16px; }
.lever {
  border: none; cursor: pointer;
  padding: 14px 40px; border-radius: 999px;
  font-size: 20px; font-weight: 800; letter-spacing: 4px; color: #fff;
  background: linear-gradient(180deg, #06d6a0, #04a37a);
  box-shadow: 0 6px 0 #037a5c, 0 10px 20px rgba(4,163,122,.4);
  transition: transform .08s, box-shadow .08s;
}
.lever:active { transform: translateY(4px); box-shadow: 0 2px 0 #037a5c; }
.lever[disabled] { filter: grayscale(.5) brightness(.9); cursor: not-allowed; }

/* 设置按钮（齿轮图标） */
.setting-btn {
  flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: 50%;
  border: none; cursor: pointer;
  font-size: 24px; line-height: 1;
  background: #fff;
  box-shadow: 0 6px 0 #e6b980, 0 10px 20px rgba(255, 159, 28, .35);
  transition: transform .12s, box-shadow .12s;
}
.setting-btn:hover { transform: rotate(30deg); }
.setting-btn:active { transform: translateY(4px) rotate(30deg); box-shadow: 0 2px 0 #e6b980; }

/* ===== 结果条 ===== */
.result-bar {
  margin: 18px auto 0; background: #fff; border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); text-align: center;
  animation: rise .4s ease;
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.result-title { font-weight: 800; color: var(--red); }
.chosen-title { color: var(--green); }
.result-tip { margin: 6px 0 0; font-size: 12px; color: #b98a6f; }
.result-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.result-list .r-item {
  display: flex; align-items: center; gap: 6px;
  background: var(--cream); border-radius: 999px; padding: 6px 14px; font-weight: 700;
  cursor: pointer; border: 2px solid transparent; transition: transform .1s, border-color .12s, background .12s;
  user-select: none;
}
.result-list .r-item:hover { transform: translateY(-2px); border-color: var(--orange); }
.result-list .r-item:active { transform: scale(.96); }
.result-list .r-item small { color: #a2634a; font-weight: 500; }

/* 已选清单：就是它们了 */
.chosen-bar .result-list .r-item { background: #eafff7; }
.chosen-bar .result-list .r-item:hover { border-color: var(--green); }
.chosen-actions {
  margin-top: 14px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.act-btn {
  border: none; cursor: pointer;
  padding: 10px 22px; border-radius: 999px;
  font-size: 15px; font-weight: 800; letter-spacing: 1px; color: #fff;
  transition: transform .08s, box-shadow .08s;
}
.act-btn:active { transform: translateY(3px); }

.copy-btn {
  background: linear-gradient(180deg, #4cc9f0, #2a9fd6);
  box-shadow: 0 5px 0 #1d7fae, 0 8px 16px rgba(42, 159, 214, .35);
}
.copy-btn:active { box-shadow: 0 2px 0 #1d7fae; }
.copy-btn.copied { background: linear-gradient(180deg, #06d6a0, #04a37a); box-shadow: 0 5px 0 #037a5c; }

.cook-btn {
  background: linear-gradient(180deg, #ffb703, #f48c06);
  box-shadow: 0 5px 0 #c96a04, 0 8px 16px rgba(244, 140, 6, .35);
}
.cook-btn:active { box-shadow: 0 2px 0 #c96a04; }

.order-btn {
  background: linear-gradient(180deg, #ffd60a, #ffb703);
  color: #6b3f00;
  box-shadow: 0 5px 0 #d99800, 0 8px 16px rgba(255, 183, 3, .35);
}
.order-btn:active { box-shadow: 0 2px 0 #d99800; }

/* 轻提示 toast */
.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(12px);
  z-index: 80; padding: 11px 22px; border-radius: 999px;
  background: rgba(30, 30, 40, .92); color: #fff; font-size: 14px; font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== 设置弹窗 modal ===== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(58, 46, 42, .45);
  backdrop-filter: blur(4px);
  animation: fade .2s ease;
}
/* hidden 属性的默认 display:none 会被上面的 display:flex 覆盖，这里显式恢复隐藏 */
.modal-overlay[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.modal {
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow);
  animation: rise .28s ease;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.modal-head h2 { margin: 0; font-size: 20px; }
.modal-close {
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  font-size: 16px; font-weight: 800; color: var(--ink);
  background: var(--cream); transition: background .12s;
}
.modal-close:hover { background: #ffe0b3; }

/* ===== 控制面板（弹窗内容） ===== */
.modal-body { margin-top: 6px; }
.switch { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; cursor: pointer; user-select: none; }
.switch input { width: 20px; height: 20px; accent-color: var(--green); }

.lock-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.lock-item { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #a2634a; }
.lock-item select {
  padding: 8px; border-radius: 12px; border: 2px solid #ffe0b3; background: var(--cream);
  font-size: 14px; color: var(--ink); font-weight: 600;
}

.filter-box { margin-top: 10px; border: 2px solid #ffe9c9; border-radius: 14px; padding: 6px 12px; }
.filter-box summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; }
.chip {
  font-size: 13px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  background: var(--cream); border: 2px solid transparent; user-select: none; transition: .12s;
}
.chip.on { background: var(--green); color: #fff; border-color: #04a37a; }
.chip.exclude.on { background: var(--red); border-color: #c22e52; }
.mini-btn {
  margin: 4px 0 8px; font-size: 12px; padding: 4px 12px; border-radius: 999px;
  border: 2px solid #ffd9a8; background: #fff; cursor: pointer;
}
.pool-hint { margin: 12px 2px 0; font-size: 13px; color: #a2634a; }

.foot { text-align: center; color: #b98a6f; font-size: 12px; padding: 22px 0 30px; margin-top: auto; }

/* ===== 响应式 ===== */
@media (max-width: 480px) {
  :root { --cell-h: 112px; --reel-w: 100%; }
  .reels { gap: 6px; padding: 10px; }
  .reel { flex: 1; }
  .cell .emoji { font-size: 38px; }
  .cell .name { font-size: 15px; }
  .lever { padding: 13px 30px; font-size: 18px; letter-spacing: 3px; }
}

/* ===== 登录 / 注册弹窗 ===== */
.auth-modal { max-width: 400px; }
.auth-tabs {
  display: flex; gap: 8px; padding: 5px; margin-bottom: 16px;
  background: var(--cream); border-radius: 999px;
}
.auth-tab {
  flex: 1; border: none; cursor: pointer;
  padding: 9px 0; border-radius: 999px;
  font-size: 14px; font-weight: 800; color: #a2634a;
  background: transparent; transition: background .15s, color .15s, box-shadow .15s;
}
.auth-tab.active {
  color: var(--ink); background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.auth-field { display: block; margin-bottom: 14px; }
.auth-label { display: block; font-size: 13px; font-weight: 700; color: #a2634a; margin-bottom: 6px; }
.auth-input {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px; border: 2px solid #ffe0b3; border-radius: 14px;
  font-size: 15px; color: var(--ink); background: #fffdf8;
  outline: none; transition: border-color .15s;
}
.auth-input:focus { border-color: var(--green); }

.auth-code-row { display: flex; gap: 10px; }
.auth-code-row .auth-input { flex: 1; }
.send-code-btn {
  flex: 0 0 auto; white-space: nowrap; border: none; cursor: pointer;
  padding: 0 16px; border-radius: 14px;
  font-size: 14px; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, #4cc9f0, #2a9fd6);
  box-shadow: 0 4px 0 #1d7fae;
  transition: transform .08s, box-shadow .08s, opacity .15s;
}
.send-code-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #1d7fae; }
.send-code-btn:disabled { cursor: not-allowed; opacity: .55; background: #b9c3c9; box-shadow: 0 4px 0 #94a0a6; }

.auth-msg {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 12px;
  font-size: 13px; font-weight: 700; text-align: center;
}
.auth-msg.err { color: #a01f43; background: #ffe3ec; }
.auth-msg.ok { color: #04815f; background: #d9fff2; }

.auth-submit {
  width: 100%; border: none; cursor: pointer;
  padding: 13px 0; border-radius: 16px;
  font-size: 16px; font-weight: 800; letter-spacing: 2px; color: #fff;
  background: linear-gradient(180deg, #ffb703, #f48c06);
  box-shadow: 0 5px 0 #c96a04, 0 8px 16px rgba(244, 140, 6, .35);
  transition: transform .08s, box-shadow .08s;
}
.auth-submit:active { transform: translateY(3px); box-shadow: 0 2px 0 #c96a04; }
.auth-hint { margin: 12px 0 0; font-size: 12px; color: #b08968; text-align: center; line-height: 1.5; }

/* ===== 个人中心 / 我自己做 页面通用 ===== */
/* .page-nav 已在上面统一规则中定义，这里只保留 nav-btn 样式。 */
.nav-btn {
  border: none; cursor: pointer; padding: 10px 20px; border-radius: 999px;
  font-size: 15px; font-weight: 800; color: #a2634a; background: rgba(255,255,255,.85);
  box-shadow: 0 3px 10px rgba(0,0,0,.08); transition: transform .1s, background .15s, color .15s;
}
.nav-btn.active { color: #fff; background: linear-gradient(180deg, #ffb703, #f48c06); box-shadow: 0 4px 0 #c96a04; }
.nav-btn.ghost { color: #2a9fd6; }
.nav-btn:hover { transform: translateY(-1px); }

/* 菜品列表（探索 / 我的 / 我自己做 共用）
 * 宽度跟随首页 .stage / .result-bar（已在上面统一为 max-width: 1000px）。
 * 屏幕越宽列表越宽，但每个菜品栏始终居中。 */
/* .dish-list 已在上面统一规则中定义 */

/* 「我自己做」页顶部多留些空位 */
/* 关键：body 是 flex column + align-items:center，块级 <main> 若不撑满会收缩到内容宽度导致列表很窄。
 * 与首页 .app-main 保持一致（width:100% + 居中列布局），菜品列表宽度即可跟随 .dish-list 的 max-width:1000px 响应式对齐。 */
.cook-main { width: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 28px; }
.cook-main .dish-list { margin-top: 12px; }
.cook-main .list-empty { padding-top: 60px; }

/* 旧的「我自己做」「我的」两处 media query 已被 --content-max 替代，无需重复限制。 */
.dish-card {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: #fff; border-radius: 18px; box-shadow: 0 4px 14px rgba(0,0,0,.07);
  cursor: pointer; transition: transform .1s, box-shadow .1s;
}
.dish-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.dish-card .d-icon { font-size: 30px; flex: 0 0 auto; }
.dish-card .d-main { flex: 1; min-width: 0; }
.dish-card .d-name { font-size: 16px; font-weight: 800; color: var(--ink); }
.dish-card .d-cat { margin-top: 3px; font-size: 12px; color: #a2634a; }
.dish-card .d-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.list-empty { text-align: center; color: #b08968; padding: 40px 0; font-weight: 700; }

/* 探索页：创建者头像 + 昵称（靠右排列，再右边是收藏按钮） */
.dish-card .d-owner {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; margin: 0 10px 0 0;
  font-size: 11px; color: #a2634a; flex: 0 0 auto;
  min-width: 36px;
}
.dish-card .d-owner-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff7e6; display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; overflow: hidden;
  border: 1px solid #ffe0b3;
  aspect-ratio: 1 / 1; flex: 0 0 28px;
}
.dish-card .d-owner-avatar img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.dish-card .d-owner-name {
  font-weight: 700; color: #a2634a;
  max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 收藏按钮（探索页：最右只有 ☆/★ 符号按钮）
 * ☆ 空心 = 未收藏（点击可保存到自己的菜）
 * ★ 实心 = 已在自己的菜（禁用，点击无效） */
.fav-btn {
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: transparent; font-size: 22px; line-height: 1;
  cursor: pointer; color: #d9d2c8;
  transition: color .12s, transform .12s, background .12s;
  flex: 0 0 auto;
  padding: 0;
}
.fav-btn:hover:not(:disabled) { color: var(--orange); transform: scale(1.1); background: #fff7e6; }
.fav-btn.is-on, .fav-btn:disabled {
  color: var(--orange); cursor: not-allowed; background: transparent;
}

/* 公开开关（iOS 风格） */
.pub-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.pub-switch input { opacity: 0; width: 0; height: 0; }
.pub-slider {
  position: absolute; inset: 0; cursor: pointer; border-radius: 999px;
  background: #d9d2c8; transition: background .18s;
}
.pub-slider::before {
  content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.pub-switch input:checked + .pub-slider { background: var(--green); }
.pub-switch input:checked + .pub-slider::before { transform: translateX(20px); }
.pub-label { font-size: 11px; color: #a2634a; margin-right: 2px; }

/* 小动作按钮（怎么做 / 复制食材） */
.mini-act {
  border: none; cursor: pointer; padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 800; color: #fff; white-space: nowrap;
  transition: transform .08s, box-shadow .08s;
}
.mini-act.how { background: linear-gradient(180deg, #4cc9f0, #2a9fd6); box-shadow: 0 3px 0 #1d7fae; }
.mini-act.copy { background: linear-gradient(180deg, #06d6a0, #04a37a); box-shadow: 0 3px 0 #037a5c; }
.mini-act:active { transform: translateY(2px); box-shadow: none; }

/* 菜品详情弹窗内的 markdown 排版 */
.md-body { margin-top: 8px; line-height: 1.7; color: var(--ink); }
.md-body h1, .md-body h2, .md-body h3 { margin: 14px 0 6px; }
.md-body h2 { font-size: 18px; border-left: 4px solid var(--orange); padding-left: 8px; }
.md-body h3 { font-size: 15px; color: #d9534f; }
.md-body p { margin: 6px 0; }
.md-body ul { margin: 6px 0; padding-left: 20px; }
.md-body table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 14px; }
.md-body th, .md-body td { border: 1px solid #f0e2c8; padding: 6px 8px; text-align: left; }
.md-body th { background: var(--cream); }
/* 弹窗内图片自适应：跟随容器宽度缩放，且保持原比例不溢出 */
.md-body img,
.md-body video,
.md-body iframe {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 8px auto;
  border-radius: 8px;
  box-sizing: border-box;
}
/* 弹窗外、卡片内部出现的图片（如头像）也走同一规则，避免被拉伸或溢出 */
.dish-card img,
.modal-body img,
#dishModalBody img,
#edContent img {
  max-width: 100%;
  height: auto;
}

.modal-foot { margin-top: 14px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* 菜品详情 / 「怎么做」弹窗：横向铺满 + 复制食材按钮居中（覆盖 .modal-foot 的默认 flex-end）。
 * 注意：必须把 border-top / padding-top 也清掉，否则会贴出一道分隔线，和居中按钮放在一起很怪。 */
.dish-modal {
  max-width: none;
  width: 100%;
}
.dish-modal .modal-foot {
  justify-content: center;
  padding-top: 0;
  border-top: 0;
}

/* 页头头像入口 */
.avatar-emoji { font-size: 18px; display: inline-flex; width: 30px; height: 30px; vertical-align: middle; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; aspect-ratio: 1 / 1; flex: 0 0 30px; }
.avatar-emoji img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }

/* 我的页身份头部：昵称更紧凑，头像保持独立的圆形展示。 */
#view-me .logo { display:flex; align-items:center; justify-content:center; gap:8px; font-size:clamp(23px,5vw,32px); }
#view-me #meAvatar { width:42px; height:42px; flex:0 0 42px; font-size:25px; border:2px solid rgba(255,255,255,.96); background:var(--cream); box-shadow:0 4px 10px rgba(120,70,40,.32); overflow:hidden; aspect-ratio: 1 / 1; }
#view-me #meAvatar img { border-radius:50%; width:100%; height:100%; object-fit:cover; aspect-ratio: 1 / 1; }
#view-me #meName { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== 摇菜页：「开始摇菜」左侧的用户按钮 ===== */
.user-btn {
  flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  box-shadow: 0 6px 0 #e6b980, 0 10px 20px rgba(255, 159, 28, .35);
  transition: transform .12s, box-shadow .12s, background .2s;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.user-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #e6b980; }
/* 未登录：灰色头像 */
.user-btn.guest { background: #cfc7bc; box-shadow: 0 6px 0 #a99e90, 0 10px 20px rgba(0, 0, 0, .12); }
.user-btn .ub-guest { width: 27px; height: 27px; color: #fff; display: flex; }
.user-btn .ub-guest svg { width: 100%; height: 100%; }
.user-btn .ub-avatar { display: none; font-size: 27px; line-height: 1; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; aspect-ratio: 1 / 1; }
.user-btn:not(.guest) .ub-guest { display: none; }
.user-btn:not(.guest) .ub-avatar { display: flex; align-items: center; justify-content: center; }

.user-btn .ub-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; aspect-ratio: 1 / 1; }

/* ===== 个人中心：昵称下一行的按钮（回去摇 / 退出登录） ===== */
.me-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.logout-inline {
  border: none; cursor: pointer;
  background: rgba(255, 255, 255, .85); color: #a2634a;
  font-size: 13px; font-weight: 700; padding: 6px 16px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(239, 71, 111, .2);
  transition: background .12s;
}
.logout-inline:hover { background: #fff; }
.logout-inline.back-spin { color: #2a9fd6; }

/* ===== 我的菜：添加按钮 + 卡片操作（编辑/分享/删除） ===== */
.me-actions .add-dish-btn { padding: 6px 16px; box-shadow: 0 2px 0 #037a5c, 0 4px 10px rgba(4, 163, 122, .25); }
.add-dish-btn {
  border: none; cursor: pointer; padding: 9px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, #06d6a0, #04a37a);
  box-shadow: 0 4px 0 #037a5c, 0 8px 16px rgba(4, 163, 122, .32);
  transition: transform .08s, box-shadow .08s;
}
.add-dish-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #037a5c; }
.card-ops { display: flex; align-items: center; gap: 6px; }
.op-btn {
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  font-size: 15px; line-height: 1; background: var(--cream);
  transition: transform .1s, background .12s;
  display: inline-flex; align-items: center; justify-content: center;
}
.op-btn:hover { background: #ffe0b3; }
.op-btn:active { transform: scale(.92); }
/* 取消收藏（★ 实心） */
.op-btn.op-unfav { background: #fff7e6; color: #c96a04; font-size: 17px; }
.op-btn.op-unfav:hover { background: #ffe0b3; }
/* 删除（❌ 红色） */
.op-btn.op-del { background: #fee2e2; color: #c0392b; font-size: 16px; }
.op-btn.op-del:hover { background: #fca5a5; color: #fff; }

/* ===== 菜品编辑弹窗 ===== */
.edit-modal { max-width: 760px; }
.edit-select { appearance: auto; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; min-height: 6px; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--cream); border-radius: 999px; padding: 4px 6px 4px 12px;
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.tag-chip .tag-x {
  width: 18px; height: 18px; border: none; cursor: pointer; border-radius: 50%;
  background: #ffd9a8; color: #a2634a; font-size: 13px; line-height: 1; font-weight: 800;
}
.tag-chip .tag-x:hover { background: var(--red); color: #fff; }
.tag-add-row { display: flex; gap: 10px; }
.tag-add-row .auth-input { flex: 1; }
.edit-content-host { border: 2px solid #ffe0b3; border-radius: 14px; overflow: hidden; min-height: 120px; }
.edit-content-host .list-empty { padding: 24px 0; }
.edit-textarea { border: none; border-radius: 0; width: 100%; height: 300px; resize: vertical; font-family: inherit; }

/* ===== 通用确认弹窗 ===== */
.confirm-modal { max-width: 360px; }
.confirm-msg { margin: 6px 0 4px; font-size: 15px; line-height: 1.6; color: var(--ink); }
.confirm-actions { margin-top: 18px; display: flex; gap: 12px; justify-content: center; }
.confirm-no { background: #e9e0d4; color: #7a5a48; box-shadow: 0 4px 0 #cbbda9; }
.confirm-no:active { box-shadow: 0 1px 0 #cbbda9; }
.confirm-yes { background: linear-gradient(180deg, #ef476f, #c22e52); box-shadow: 0 4px 0 #9e2544; }
.confirm-yes:active { box-shadow: 0 1px 0 #9e2544; }

/* ===== 单页视图（摇一摇 / 探索 / 我的 切换，不再跳转页面） ===== */
.app-main { width: 100%; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; }
.view { width: 100%; display: flex; flex-direction: column; align-items: center; }
.view[hidden] { display: none; }
.view.enter { animation: viewIn .34s cubic-bezier(.16, 1, .3, 1); }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } }
/* 探索 / 我的 / 摇菜 底部留白，避免被 Dock 遮挡 */
#view-explore .dish-list, #view-me .dish-list { padding-bottom: 16px; }
#view-explore, #view-me, #view-spin { padding-bottom: 110px; }
#view-spin .chosen-area { margin-bottom: 24px; }

/* ===== 列表分页器 ===== */
/* .list-pager 已在上面统一规则中定义 */
.list-pager[hidden] { display: none; }
.pager-btn {
  border: none; cursor: pointer; padding: 8px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 800; color: #a2634a; background: rgba(255, 255, 255, .9);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .08); transition: transform .1s, background .15s;
}
.pager-btn:hover:not(:disabled) { transform: translateY(-1px); background: #fff; }
.pager-btn:disabled { opacity: .45; cursor: not-allowed; }
.pager-info { font-size: 13px; font-weight: 700; color: #a2634a; white-space: nowrap; }
.pager-size { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #a2634a; }
.pager-size select {
  padding: 6px 10px; border-radius: 10px; border: 2px solid #ffe0b3; background: var(--cream);
  font-size: 13px; color: var(--ink); font-weight: 700; cursor: pointer;
}

/* ===== 底部悬浮导航栏（Dock，仿 iOS 26 玻璃拟态） ===== */
.dock {
  position: fixed; left: 50%; bottom: 18px;
  transform: translate(-50%, 160%);
  z-index: 200;
  display: flex; align-items: flex-end; gap: 10px;
  padding: 8px 22px;
  border-radius: 32px;
  background: rgba(255, 255, 255, .42);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 12px 40px rgba(120, 70, 40, .28), inset 0 1px 0 rgba(255, 255, 255, .65);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  opacity: 0;
  pointer-events: none;
  /* 缓慢出现 / 隐藏 */
  transition: transform .8s cubic-bezier(.16, 1, .3, 1), opacity .8s cubic-bezier(.16, 1, .3, 1);
}
.dock.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.dock-item {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 74px; padding: 6px 0; text-decoration: none;
  color: #7a5a48;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), color .2s;
}
.dock-item .dock-ico { width: 32px; height: 32px; display: flex; }
.dock-item .dock-ico svg { width: 100%; height: 100%; }
/* 文字：图标上方浮现，无背景、黑色常规字重（参考 macos_demo 的 tooltip 位置） */
.dock-item .dock-label {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -60%);
  font-size: 12px; font-weight: 400; white-space: nowrap;
  color: #000;
  opacity: 0; pointer-events: none;
  transition: opacity .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1);
}
.dock-item:hover .dock-label,
.dock-item.active .dock-label { opacity: 1; transform: translate(-50%, -120%); }
.dock-item:hover { transform: translateY(-3px) scale(1.06); }
/* 当前视图对应图标放大突出 */
.dock-item.active { color: var(--red); transform: translateY(-6px) scale(1.2); }
@media (max-width: 480px) {
  .dock { bottom: 14px; gap: 6px; padding: 8px 16px; }
  .dock-item { width: 62px; }
}

/* Dock 之上仍可见的浮层：弹窗高于 Dock，toast 亦然 */
.modal-overlay { z-index: 1000; }
.toast { bottom: 96px; z-index: 300; }

/* ===== 同名菜审批确认弹窗（#approvalModal） ===== */
.modal-sub { color: var(--muted, #6b7280); font-size: 13px; margin: 0 0 14px; line-height: 1.55; }
.modal-field { display: block; margin-bottom: 4px; }
.modal-field > span { display: block; font-size: 12px; color: var(--muted, #6b7280); margin-bottom: 4px; font-weight: 600; }
.modal-input {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 14px; font-family: inherit; background: #fff; color: #111827;
  transition: border-color .12s, box-shadow .12s;
}
.modal-input:focus { outline: none; border-color: #f48c06; box-shadow: 0 0 0 3px rgba(244, 140, 6, .12); }
.modal-input.is-invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); }
.modal-hint { font-size: 11px; color: var(--muted, #6b7280); margin-top: 4px; display: block; }
.modal-err { color: #b91c1c; font-size: 12px; padding: 8px 10px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; margin-bottom: 8px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #f1f1f1; }
.modal-btn { padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background .12s, border-color .12s, color .12s; }
.modal-btn-ghost { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }
.modal-btn-ghost:hover { background: #e5e7eb; color: #111827; }
.modal-btn-primary { background: #f48c06; color: #fff; border-color: #f48c06; }
.modal-btn-primary:hover { background: #c96a04; border-color: #c96a04; }
.modal-btn:disabled { opacity: .55; cursor: not-allowed; }

/* 「审批中」徽章：跟 fork 卡片一起出现 */
.pub-pending {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: #fff4e0; color: #c96a04; border: 1px solid #fbd39b;
  font-size: 11px; font-weight: 600; line-height: 1.4;
}

/* ===== 菜品 emoji 选择器（编辑/新增弹窗） ===== */
.emoji-row {
  display: flex; align-items: flex-start; gap: 6px;
}
.emoji-picker {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px;
  flex: 1 1 auto;
  align-content: flex-start;
}
/* 折叠态：只显示一行 emoji，剩下的被裁掉。emoji 数量 + 折叠按钮数量由容器宽度动态决定。 */
.emoji-picker.is-collapsed {
  max-height: 38px;
  overflow: hidden;
}
.emoji-picker button {
  width: 38px; height: 38px;
  border: 2px solid transparent; border-radius: 10px;
  background: #fff7e6; font-size: 22px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  transition: transform .12s, border-color .12s, background .12s;
}
.emoji-picker button:hover { transform: translateY(-1px); background: #ffe0b3; }
.emoji-picker button.active { border-color: #f48c06; background: #ffe0b3; }
/* 折叠按钮：放在 picker 右侧作为兄弟节点，始终可见；
 * 大小对齐 emoji 按钮，展开态下换肤作为状态提示。 */
.emoji-toggle {
  flex: 0 0 38px;
  align-self: flex-start; margin-top: 8px;
  width: 38px; height: 38px;
  border: 2px solid transparent; border-radius: 10px;
  background: #fff7e6; color: #f48c06; font-size: 18px; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; padding: 0;
  transition: background .12s, transform .12s, border-color .12s;
}
.emoji-toggle:hover { background: #ffe0b3; transform: translateY(-1px); border-color: #ffe0b3; }
.emoji-toggle[hidden] { display: none; }
.emoji-toggle.is-expanded { background: #ffe0b3; border-color: #f48c06; }

/* ===== 编辑菜品「已有标签池」折叠区 ===== */
.tag-pool {
  margin: 4px 0 8px;
  border: 1px dashed #f0d9b3;
  border-radius: 8px;
  background: #fffaf1;
  padding: 0 8px;
}
.tag-pool > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 700;
  color: #a2634a;
  user-select: none;
  outline: none;
}
.tag-pool > summary::-webkit-details-marker { display: none; }
.tag-pool > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  transition: transform .12s;
}
.tag-pool[open] > summary::before { content: "▾"; }
.tag-pool-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px 0 10px;
}
.tag-pool-chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  background: #fff7e6; border: 1px solid #f0d9b3;
  font-size: 12px; color: #6b4a2a; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.tag-pool-chip:hover { background: #ffe0b3; }
.tag-pool-chip.is-selected {
  background: #04a37a; color: #fff; border-color: #04a37a;
  cursor: default;
}

/* ===== 探索页搜索框 ===== */
/* .explore-search 已在上面统一规则中定义 */
.explore-search-input {
  flex: 1 1 auto; padding: 9px 38px 9px 14px;
  border: 1px solid #f0d9b3; border-radius: 999px;
  background: #fffaf1; font: 400 14px inherit; color: #6b4a2a;
  outline: none; transition: border-color .12s, box-shadow .12s;
}
.explore-search-input::placeholder { color: #b89372; }
.explore-search-input:focus { border-color: #f48c06; box-shadow: 0 0 0 3px rgba(244,140,6,.12); }
/* 隐藏浏览器内置的 type=search 清除按钮，避免和自定义按钮叠加 */
.explore-search-input::-webkit-search-cancel-button,
.explore-search-input::-webkit-search-decoration,
.explore-search-input::-webkit-search-results-button,
.explore-search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.explore-search-input { -webkit-appearance: none; appearance: none; }
.explore-search-clear {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: #f3f4f6; color: #6b7280; font-size: 13px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.explore-search-clear:hover { background: #e5e7eb; color: #111827; }

/* ===== AI 生成菜品弹窗 ===== */
.ai-modal { max-width: 640px; }
.ai-modal .modal-body { max-height: 70vh; overflow-y: auto; }
.ai-spinner {
  width: 36px; height: 36px; margin: 16px auto 8px;
  border: 3px solid #fde7c5; border-top-color: #f48c06;
  border-radius: 50%; animation: ai-spin .9s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-poll-text { text-align: center; margin: 14px 0 4px; color: #4b5563; font-size: 14px; }
.ai-poll-sub { color: #9ca3af; font-size: 12px; }
.ai-preview-img {
  margin-bottom: 12px; border-radius: 8px; overflow: hidden;
  background: #f9fafb; max-height: 240px; display: flex; align-items: center; justify-content: center;
}
.ai-preview-img img { max-width: 100%; max-height: 240px; display: block; }
.ai-preview-content {
  font-size: 14px; line-height: 1.7; color: #1f2937;
  border-top: 1px solid #f3f4f6; padding-top: 12px;
}
.ai-preview-content h1, .ai-preview-content h2, .ai-preview-content h3 { margin: 14px 0 8px; font-size: 16px; }
.ai-preview-content p { margin: 0 0 10px; }
.ai-preview-content table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13px; }
.ai-preview-content th, .ai-preview-content td { border: 1px solid #e5e7eb; padding: 6px 10px; text-align: left; }
.ai-preview-content code { background: #f3f4f6; padding: 1px 6px; border-radius: 3px; font-size: 13px; }
.ai-preview-meta {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid #f3f4f6;
  font-size: 13px; color: #4b5563;
}
.ai-preview-meta .meta-line { margin-bottom: 6px; }
.ai-preview-meta .tag-chip {
  display: inline-block; padding: 2px 10px; margin: 2px 4px 2px 0;
  background: #fef3c7; color: #92400e; border-radius: 12px; font-size: 12px;
}
.auth-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; cursor: pointer; user-select: none; font-size: 13px; color: #4b5563; }
.auth-check input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

/* 图片风格 chip 选择器 */
.ai-style-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.ai-style-chip {
  display: inline-block; padding: 5px 12px; margin: 0;
  background: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb;
  border-radius: 16px; font-size: 13px; cursor: pointer; user-select: none;
  transition: background .12s, color .12s, border-color .12s;
}
.ai-style-chip:hover { background: #fde7c5; border-color: #f48c06; color: #92400e; }
.ai-style-chip.is-active {
  background: #f48c06; color: #fff; border-color: #c96a04;
}
.ai-style-muted { color: #9ca3af; font-size: 13px; padding: 4px 0; }

/* ===== AI 弹窗：可编辑结果表单（菜名 / 分类 / 图标 / 标签 / 做法） ===== */
.ai-edit-field { margin-bottom: 12px; }
.ai-edit-field > label {
  display: block; font-size: 12px; color: #4b5563;
  margin-bottom: 4px; font-weight: 600;
}
.ai-edit-row {
  display: grid; grid-template-columns: 1fr 100px; gap: 10px;
}
.ai-edit-icon { text-align: center; font-size: 18px; padding: 8px 6px; }
.ai-edit-textarea { height: 200px; min-height: 140px; }
@media (max-width: 480px) {
  .ai-edit-row { grid-template-columns: 1fr; }
}