/* components.css — 共用 UI 元件（昭和食堂菜单印刷感）
 * 依赖 tokens.css + base.css
 *
 * 元件清单：
 *  · 按钮 .btn / .btn-ghost / .btn-soft / .btn-mint / .btn-danger
 *  · 卡片 .card / .card-warm / .card-double / .card-stamp
 *  · 印章 .stamp / .stamp-mini
 *  · 票根 .ticket
 *  · Chip / Badge / Pill
 *  · 导航 .nav-top / .tab-bar
 *  · Hero 大菜单牌
 *  · 抽签按钮 .draw-pad / .draw-btn
 *  · 抽签结果 .lottery-card
 *  · 时间线 .timeline
 *  · KPI .kpi
 *  · Toggle / Segmented / Period tabs
 *  · 空状态 .empty
 *  · 食谱卡 .recipe-card
 *  · 投放区 .drop-zone
 *  · Flash / Reminder / outbox-badge
 */

/* ============================================================
 *  按钮 — 印章式 · 方正 · 按下时下移
 * ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  font-weight: 700;
  font-size: var(--fs-base);
  font-family: var(--font-zh);
  letter-spacing: 0.06em;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-primary-deep);
  background: var(--color-primary);
  color: #FFFCF1;
  box-shadow: 3px 3px 0 var(--color-primary-deep);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
}
.btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--color-primary-deep);
  background: var(--color-primary);
}
.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--color-primary-deep);
}
.btn:focus-visible { outline: 3px solid var(--color-yolk); outline-offset: 2px; }

.btn-ghost {
  background: var(--color-surface);
  color: var(--color-primary-deep);
  border-color: var(--color-rule);
  box-shadow: 2px 2px 0 var(--color-rule);
}
.btn-ghost:hover {
  background: var(--color-cream);
  box-shadow: 3px 3px 0 var(--color-rule);
}
.btn-ghost:active { box-shadow: 1px 1px 0 var(--color-rule); }

.btn-soft {
  background: var(--color-cream-deep);
  color: var(--color-primary-ink);
  border-color: var(--color-line-dash);
  box-shadow: 2px 2px 0 var(--color-line-dash);
}
.btn-soft:hover {
  background: var(--color-yolk-pale);
  box-shadow: 3px 3px 0 var(--color-line-dash);
}
.btn-soft:active { box-shadow: 1px 1px 0 var(--color-line-dash); }

.btn-mint {
  background: var(--color-matcha);
  border-color: var(--color-matcha-deep);
  box-shadow: 3px 3px 0 var(--color-matcha-deep);
  color: #1B3D14;
}
.btn-mint:hover { background: #88C170; box-shadow: 4px 4px 0 var(--color-matcha-deep); }
.btn-mint:active { box-shadow: 1px 1px 0 var(--color-matcha-deep); }

.btn-yolk {
  background: var(--color-yolk);
  border-color: var(--color-yolk-deep);
  box-shadow: 3px 3px 0 var(--color-yolk-deep);
  color: #5C3F00;
}
.btn-yolk:hover { background: #FFD876; }
.btn-yolk:active { box-shadow: 1px 1px 0 var(--color-yolk-deep); }

.btn-danger {
  background: var(--color-danger);
  border-color: #6E1F18;
  box-shadow: 3px 3px 0 #6E1F18;
}
.btn-danger:hover { background: #C04030; }

.btn-sm { padding: 0.3rem 0.75rem; font-size: var(--fs-sm); box-shadow: 2px 2px 0 var(--color-primary-deep); }
.btn-sm.btn-ghost { box-shadow: 2px 2px 0 var(--color-rule); }
.btn-sm.btn-soft  { box-shadow: 2px 2px 0 var(--color-line-dash); }
.btn-sm.btn-mint  { box-shadow: 2px 2px 0 var(--color-matcha-deep); }
.btn-sm:hover { box-shadow: 3px 3px 0 var(--color-primary-deep); }
.btn-sm.btn-ghost:hover { box-shadow: 3px 3px 0 var(--color-rule); }
.btn-sm.btn-soft:hover  { box-shadow: 3px 3px 0 var(--color-line-dash); }
.btn-sm.btn-mint:hover  { box-shadow: 3px 3px 0 var(--color-matcha-deep); }

.btn-lg { padding: 0.85rem 1.6rem; font-size: var(--fs-md); }
.btn-block { width: 100%; }

/* ============================================================
 *  卡片 — 报纸方框感
 * ============================================================ */
.card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper);
  padding: var(--gap-4);
  position: relative;
}
.card.card-warm   { background: var(--color-surface-warm); }
.card.card-bordered { box-shadow: none; }
.card.card-elev   { box-shadow: var(--shadow-lg); }

/* 双线卡（报纸框）—— 外细内粗双线 */
.card.card-double {
  border: 1.5px solid var(--color-rule);
  padding: calc(var(--gap-4) + 4px);
}
.card.card-double::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid var(--color-rule);
  border-radius: calc(var(--radius-md) - 5px);
  pointer-events: none;
}

/* 带印章的卡（角上压印） */
.card.card-stamp {
  padding-right: calc(var(--gap-4) + 60px);
}
.card.card-stamp .stamp {
  position: absolute;
  top: var(--gap-3);
  right: var(--gap-3);
}

.card-title {
  font-size: var(--fs-md);
  font-weight: 700;
  margin: 0 0 var(--gap-3);
  color: var(--color-primary-deep);
  letter-spacing: 0.05em;
  position: relative;
  padding-left: 1em;
}
.card-title::before {
  content: '';
  position: absolute;
  left: 0; top: 0.45em;
  width: 0.65em; height: 0.65em;
  background: var(--color-primary);
  border-radius: 1px;
  transform: rotate(45deg);
}
.card-title.no-mark { padding-left: 0; }
.card-title.no-mark::before { display: none; }

.card-meta { font-size: var(--fs-sm); color: var(--color-ink-muted); }
.card-grid {
  display: grid;
  gap: var(--gap-3);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* ============================================================
 *  印章 · 招牌戳
 * ============================================================ */
.stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  width: 64px;
  height: 64px;
  padding: 0.3rem;
  border: 2.5px solid var(--color-primary);
  border-radius: 50%;
  color: var(--color-primary);
  background: rgba(255, 252, 241, 0.85);
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1.05;
  letter-spacing: 0.04em;
  transform: rotate(-7deg);
  position: relative;
  box-shadow: 0 0 0 1px var(--color-primary) inset;
  font-family: var(--font-zh);
}
.stamp::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  pointer-events: none;
}
.stamp.stamp-square {
  border-radius: 4px;
  width: 60px; height: 60px;
}
.stamp.stamp-square::before {
  border-radius: 2px;
}
.stamp.stamp-mini {
  width: auto; height: auto;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-xs);
  font-size: 0.7rem;
  background: var(--color-primary);
  color: var(--color-bg);
  box-shadow: none;
}
.stamp.stamp-mini::before { display: none; }
.stamp.stamp-matcha { color: var(--color-matcha-deep); border-color: var(--color-matcha-deep); box-shadow: 0 0 0 1px var(--color-matcha-deep) inset; }
.stamp.stamp-matcha::before { border-color: var(--color-matcha-deep); }
.stamp.stamp-indigo { color: var(--color-indigo); border-color: var(--color-indigo); box-shadow: 0 0 0 1px var(--color-indigo) inset; }
.stamp.stamp-indigo::before { border-color: var(--color-indigo); }

/* ============================================================
 *  票根 — 餐券 / 抽签结果背景
 * ============================================================ */
.ticket {
  --ticket-bg: var(--color-surface);
  --ticket-border: var(--color-primary-deep);
  position: relative;
  background: var(--ticket-bg);
  border: 2px solid var(--ticket-border);
  border-radius: var(--radius-sm);
  padding: var(--gap-4);
  /* 半圆形剪角 */
  mask:
    radial-gradient(8px at 0 50%, transparent 98%, #000) -8px 50% / 100% 16px no-repeat,
    radial-gradient(8px at 100% 50%, transparent 98%, #000) calc(100% + 8px) 50% / 100% 16px no-repeat,
    linear-gradient(#000, #000) 0 0 / 100% calc(50% - 8px) no-repeat,
    linear-gradient(#000, #000) 0 100% / 100% calc(50% - 8px) no-repeat;
}
/* 票根中间虚线（票根撕角处） */
.ticket-tear {
  position: relative;
  height: 1px;
  margin: var(--gap-3) calc(-1 * var(--gap-4));
  background: repeating-linear-gradient(to right,
    var(--color-line-dash) 0, var(--color-line-dash) 4px,
    transparent 4px, transparent 8px);
}

/* ============================================================
 *  Chip / Pill / Badge
 * ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--color-cream-deep);
  color: var(--color-primary-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  border: 1.5px solid var(--color-line-dash);
  cursor: default;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  letter-spacing: 0.03em;
}
.chip-matcha { background: var(--color-matcha-pale); color: var(--color-matcha-deep); border-color: var(--color-matcha); }
.chip-mint   { background: var(--color-matcha-pale); color: var(--color-matcha-deep); border-color: var(--color-matcha); }
.chip-sky    { background: var(--color-indigo-pale); color: var(--color-indigo); border-color: var(--color-indigo); }
.chip-rose   { background: var(--color-primary-pale); color: var(--color-primary-ink); border-color: var(--color-primary); }
.chip-warn   { background: var(--color-yolk-pale); color: #5C3F00; border-color: var(--color-yolk-deep); }
.chip-yolk   { background: var(--color-yolk); color: #5C3F00; border-color: var(--color-yolk-deep); }
.chip-clickable { cursor: pointer; }
.chip-clickable:hover { transform: translate(-1px, -1px); }
.chip-clickable.is-active {
  background: var(--color-primary);
  color: var(--color-bg);
  border-color: var(--color-primary-deep);
}

.badge {
  display: inline-block;
  padding: 0.08rem 0.55rem;
  border-radius: var(--radius-xs);
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--color-cream-deep);
  color: var(--color-primary-ink);
  letter-spacing: 0.08em;
  border: 1px solid var(--color-line);
}
.badge-ok    { background: var(--color-matcha); color: #1B3D14; border-color: var(--color-matcha-deep); }
.badge-warn  { background: var(--color-yolk); color: #5C3F00; border-color: var(--color-yolk-deep); }
.badge-empty { background: var(--color-bg-soft); color: var(--color-ink-muted); border-color: var(--color-line); }
.badge-info  { background: var(--color-indigo-pale); color: var(--color-indigo); border-color: var(--color-indigo); }
.badge-danger{ background: var(--color-primary-pale); color: var(--color-primary-ink); border-color: var(--color-primary); }

/* ============================================================
 *  Flash / Banner / Reminder
 * ============================================================ */
.flash {
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--gap-3);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-left: 5px solid currentColor;
}
.flash.ok,
.flash-ok   { background: var(--color-success-bg); color: var(--color-success); }
.flash.err,
.flash-err  { background: var(--color-danger-bg);  color: var(--color-danger); }
.flash.warn,
.flash-warn { background: var(--color-warning-bg); color: var(--color-warning); }

.reminder {
  background: var(--color-yolk-pale);
  color: #5C3F00;
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.95rem;
  margin: var(--gap-2) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
  border: 1.5px solid var(--color-yolk-deep);
  border-left-width: 5px;
}
.reminder a { color: #5C3F00; white-space: nowrap; }

.outbox-badge {
  background: var(--color-yolk-pale);
  color: #5C3F00;
  border: 1.5px solid var(--color-yolk-deep);
  border-left-width: 5px;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.9rem;
  margin-bottom: var(--gap-3);
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-2);
}

/* ============================================================
 *  导航：桌面顶部 + 移动底部 tab
 *  设计：菜单的店头招牌
 * ============================================================ */
.nav-top {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  padding: var(--gap-3) 0 var(--gap-3);
  margin-bottom: var(--gap-4);
  position: relative;
  border-bottom: 3px double var(--color-primary);
}
.nav-top .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
  letter-spacing: 0.1em;
  padding: 0.25em 0.55em;
  background: var(--color-ink);
  color: var(--color-bg);
  border-radius: var(--radius-xs);
  position: relative;
}
.nav-top .brand::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid var(--color-bg);
  border-radius: 1px;
  pointer-events: none;
}
.nav-top .brand:hover { color: var(--color-yolk); }
.nav-top .brand .brand-emoji {
  font-size: 1.05em;
  filter: saturate(1.2);
}
.nav-top .links { display: flex; gap: 0.15rem; margin-left: auto; align-items: center; }
.nav-top .links a {
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-xs);
  color: var(--color-ink-soft);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: all var(--dur-fast) var(--ease-out);
  border: 1.5px solid transparent;
}
.nav-top .links a:hover {
  color: var(--color-primary-deep);
  background: var(--color-yolk-wash);
  border-color: var(--color-line-soft);
}
.nav-top .links a.is-active {
  background: var(--color-primary);
  color: var(--color-bg);
  border-color: var(--color-primary-deep);
}
.nav-top .links .icon-link {
  width: 2.1rem; height: 2.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}

/* 移动 bottom tab — 木牌式 */
.tab-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--color-surface);
  border-top: 3px double var(--color-primary);
  box-shadow: 0 -4px 16px rgba(74, 56, 32, 0.10);
  padding: 0.3rem 0 calc(0.3rem + var(--safe-bottom));
  justify-content: space-around;
  z-index: 50;
}
.tab-bar a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
  padding: 0.35rem 0;
  font-size: 0.7rem;
  color: var(--color-ink-muted);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: color var(--dur-fast);
}
.tab-bar a .tab-icon { font-size: 1.35rem; line-height: 1; }
.tab-bar a.is-active { color: var(--color-primary-deep); }
.tab-bar a.is-active .tab-icon { transform: translateY(-1px); }

@media (max-width: 640px) {
  .nav-top .links { display: none; }
  .nav-top { margin-bottom: var(--gap-3); padding-bottom: var(--gap-2); }
  .tab-bar { display: flex; }
  body { padding-bottom: calc(60px + var(--safe-bottom)); }
}

/* ============================================================
 *  Hero / 大菜单牌
 *  设计：木挂牌感（顶头挂绳 · 双线框 · 中间大字招牌）
 * ============================================================ */
.hero {
  position: relative;
  border-radius: var(--radius-md);
  overflow: visible;
  background:
    linear-gradient(135deg, var(--color-cream-deep) 0%, var(--color-yolk-pale) 100%);
  padding: var(--gap-5) var(--gap-5) var(--gap-4);
  margin-bottom: var(--gap-4);
  margin-top: 0.5rem;
  border: 2.5px solid var(--color-rule);
  box-shadow: 4px 4px 0 var(--color-rule);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--color-rule);
  border-radius: calc(var(--radius-md) - 6px);
  pointer-events: none;
}
.hero img.art { display: none; }
.hero .hero-text {
  position: relative;
  z-index: 1;
}
.hero .hero-text h1,
.hero .hero-text h2 {
  background: none;
  color: var(--color-primary-deep);
  margin: 0 0 0.2em;
  font-size: var(--fs-xl);
  letter-spacing: 0.06em;
  padding: 0;
  text-shadow: 1px 1px 0 var(--color-yolk);
}
.hero .hero-text h2::before { display: none; }
.hero .hero-text p {
  margin: 0;
  color: var(--color-ink-soft);
  font-weight: 500;
}
.hero .hero-stamp,
.hero .hero-text > .stamp:first-child {
  position: absolute;
  top: -16px;
  right: var(--gap-5);
  z-index: 2;
}

/* 时段标签 morning/noon/evening/night */
.hero.hero-morning  { background: linear-gradient(135deg, #FFF6DA 0%, #F4C95D 100%); }
.hero.hero-noon     { background: linear-gradient(135deg, #FBE5BF 0%, #D94B3E 60%, #A8362B 100%); color: var(--color-bg); }
.hero.hero-noon .hero-text h1, .hero.hero-noon .hero-text h2 { color: var(--color-bg); text-shadow: 1px 1px 0 var(--color-primary-deep); }
.hero.hero-noon .hero-text p { color: rgba(255,252,241,0.9); }
.hero.hero-evening  { background: linear-gradient(135deg, #F4C95D 0%, #D94B3E 100%); color: var(--color-bg); }
.hero.hero-evening .hero-text h1, .hero.hero-evening .hero-text h2 { color: var(--color-bg); text-shadow: 1px 1px 0 var(--color-primary-deep); }
.hero.hero-evening .hero-text p { color: rgba(255,252,241,0.9); }
.hero.hero-night    { background: linear-gradient(135deg, #3B5A7B 0%, #1F2D3D 100%); color: var(--color-bg); }
.hero.hero-night .hero-text h1, .hero.hero-night .hero-text h2 { color: var(--color-yolk); text-shadow: 1px 1px 0 rgba(0,0,0,0.4); }
.hero.hero-night .hero-text p { color: rgba(255,252,241,0.9); }

/* 圆角的通用艺术图（保留） */
img.art {
  border-radius: var(--radius-md);
  background: var(--color-cream-deep);
}
img.art-circle { border-radius: 50%; }
img.art-mascot {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--color-cream);
  box-shadow: var(--shadow-md);
  padding: 0.4rem;
  border: 2px solid var(--color-rule);
}

/* ============================================================
 *  抽签按钮 — 大木牌
 * ============================================================ */
.draw-pad {
  display: grid;
  gap: var(--gap-3);
  grid-template-columns: 1fr 1fr;
  margin-block: var(--gap-4);
}
.draw-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: var(--gap-5) var(--gap-3);
  border-radius: var(--radius-md);
  border: 2.5px solid var(--color-ink);
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--color-ink);
  background: var(--color-surface);
  box-shadow: 5px 5px 0 var(--color-ink);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  letter-spacing: 0.1em;
  overflow: hidden;
}
.draw-btn::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid var(--color-ink);
  border-radius: calc(var(--radius-md) - 5px);
  pointer-events: none;
  z-index: 1;
}
.draw-btn .draw-emoji {
  font-size: 2.6rem;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.1));
  z-index: 1;
}
.draw-btn:hover  {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--color-ink);
}
.draw-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--color-ink);
}
.draw-btn-lunch  {
  background: linear-gradient(135deg, #FFF6DA 0%, #F4C95D 100%);
  color: var(--color-ink);
}
.draw-btn-dinner {
  background: linear-gradient(135deg, #FBD4CE 0%, #D94B3E 100%);
  color: var(--color-bg);
  border-color: var(--color-primary-deep);
  box-shadow: 5px 5px 0 var(--color-primary-deep);
}
.draw-btn-dinner::before { border-color: var(--color-bg); }
.draw-btn-dinner:hover  { box-shadow: 7px 7px 0 var(--color-primary-deep); }
.draw-btn-dinner:active { box-shadow: 2px 2px 0 var(--color-primary-deep); }

/* 单 CTA 版本（首页时间感知按钮，全宽大牌） */
.draw-pad-single {
  margin-block: var(--gap-4);
}
.draw-btn-solo {
  width: 100%;
  padding-block: var(--gap-6);
  font-size: var(--fs-xl);
  border-radius: var(--radius-lg);
}
.draw-btn-solo .draw-emoji {
  font-size: 3.2rem;
}
.draw-btn-solo .draw-sub {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.78;
  margin-top: 0.2rem;
}
.draw-btn-solo.draw-btn-dinner .draw-sub { opacity: 0.85; }

/* 模型推荐占位条 */
.reco-box {
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-md);
  padding: var(--gap-3) var(--gap-4);
  margin-block: var(--gap-3);
  position: relative;
  background: var(--color-cream);
  box-shadow: 3px 3px 0 var(--color-line);
}
.reco-pending {
  background: repeating-linear-gradient(
    -45deg,
    var(--color-cream) 0 8px,
    var(--color-cream-deep) 8px 16px
  );
}
.reco-ready {
  background: linear-gradient(135deg, var(--color-matcha-wash) 0%, var(--color-cream) 80%);
  border-color: var(--color-matcha-deep);
  box-shadow: 3px 3px 0 var(--color-matcha-deep);
}
.reco-tag {
  display: inline-block;
  font-family: var(--font-zh);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  padding: 0.1rem 0.6rem;
  background: var(--color-ink);
  color: var(--color-bg);
  margin-bottom: 0.4rem;
}
.reco-name {
  font-family: var(--font-zh);
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--color-primary-deep);
  letter-spacing: 0.1em;
  margin: 0.3rem 0;
}
.reco-progress {
  font-family: var(--font-num);
  font-size: var(--fs-lg);
  color: var(--color-ink);
  margin: 0.3rem 0;
}
.reco-progress strong { color: var(--color-primary); font-weight: 800; }
.reco-hint {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  margin: 0.2rem 0 0;
  line-height: var(--lh-base);
}

/* 食谱卡片远/近切换按钮 */
.distance-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.dist-btn {
  border: 1.5px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  font-family: var(--font-zh);
  font-size: var(--fs-xs);
  padding: 0.1rem 0.55rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.dist-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.dist-btn.is-active {
  background: var(--color-primary);
  color: var(--color-bg);
  border-color: var(--color-primary-deep);
  font-weight: 700;
}

/* Today 页临时清单的「从库选」可展开 chips */
.quick-chips-wrap {
  margin: 0 0 var(--gap-4);
}
.quick-chips-wrap > summary {
  cursor: pointer;
  font-family: var(--font-zh);
  font-size: var(--fs-sm);
  color: var(--color-primary-deep);
  letter-spacing: 0.08em;
  padding: 0.3rem 0;
  list-style: none;
  user-select: none;
}
.quick-chips-wrap > summary::-webkit-details-marker { display: none; }
.quick-chips-wrap > summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.quick-chips-wrap[open] > summary::before {
  transform: rotate(90deg);
}
.quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: var(--gap-2);
  padding: var(--gap-3);
  background: var(--color-cream);
  border: 1px dashed var(--color-line-dash);
  border-radius: var(--radius-sm);
}
.quick-chips .chip-clickable {
  background: var(--color-surface);
  border: 1.5px solid var(--color-line);
  color: var(--color-ink);
  font-family: var(--font-zh);
  font-size: var(--fs-sm);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.quick-chips .chip-clickable:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
}
.quick-chips .chip-clickable.is-active {
  background: var(--color-primary);
  color: var(--color-bg);
  border-color: var(--color-primary-deep);
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--color-primary-deep);
}
.chip-dist {
  margin-left: 0.3rem;
  font-size: 0.75em;
  opacity: 0.75;
}

/* 首次登录引导弹窗 */
.onboarding {
  position: fixed; inset: 0;
  background: rgba(20, 16, 12, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: var(--gap-4);
  backdrop-filter: blur(4px);
  animation: onb-fade-in 0.25s var(--ease-out);
}
.onboarding.hidden { display: none; }
@keyframes onb-fade-in { from { opacity: 0; } to { opacity: 1; } }

.onboarding-card {
  background: var(--color-surface);
  border: 3px solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: 6px 6px 0 var(--color-primary-deep);
  padding: var(--gap-5) var(--gap-4) var(--gap-4);
  max-width: 480px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  position: relative;
  animation: onb-pop 0.32s var(--ease-stamp);
}
@keyframes onb-pop {
  from { transform: scale(0.85) rotate(-2deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.onboarding-close {
  position: absolute; top: 6px; right: 10px;
  background: none; border: none;
  font-size: 1.8rem; line-height: 1;
  color: var(--color-ink-soft); cursor: pointer;
  padding: 0.2rem 0.5rem;
}
.onboarding-close:hover { color: var(--color-primary); }
.onboarding-step { display: none; }
.onboarding-step.is-active { display: block; }
.onboarding-pill {
  display: inline-block;
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-zh);
  font-size: var(--fs-xs);
  letter-spacing: 0.25em;
  padding: 0.15rem 0.7rem;
  margin-bottom: var(--gap-3);
}
.onboarding-step h2 {
  font-family: var(--font-zh);
  font-size: var(--fs-xl);
  letter-spacing: 0.18em;
  color: var(--color-primary-deep);
  margin: 0 0 var(--gap-3);
}
.onboarding-step p {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--color-ink);
  margin: 0 0 var(--gap-2);
}
.onboarding-list {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  padding-left: 1.2em;
  margin: var(--gap-2) 0;
  color: var(--color-ink);
}
.onboarding-list strong { color: var(--color-primary-deep); }

.onboarding-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--gap-4);
  padding-top: var(--gap-3);
  border-top: 1px dashed var(--color-line-soft);
}
.onboarding-dots { display: flex; gap: 0.4rem; }
.onb-dot {
  width: 8px; height: 8px;
  background: var(--color-line-soft);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.onb-dot.is-active {
  background: var(--color-primary);
  transform: scale(1.3);
}

/* 登录 / 注册页 — 单列居中 + 大印章 */
.auth-page {
  max-width: 440px;
  margin: 0 auto;
  padding-top: var(--gap-5);
  text-align: center;
}
.auth-stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 84px; height: 84px;
  background: var(--color-primary);
  color: var(--color-bg);
  font-family: var(--font-zh);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  line-height: 1.1;
  border: 3px solid var(--color-primary-deep);
  border-radius: 12px;
  box-shadow: 0 0 0 4px var(--color-bg), 0 0 0 6px var(--color-primary-deep),
              5px 5px 0 rgba(168, 54, 43, 0.25);
  transform: rotate(-6deg);
  margin: 0 auto var(--gap-4);
}
.auth-stamp-yolk {
  background: var(--color-yolk);
  color: var(--color-ink);
  border-color: var(--color-yolk-deep);
  box-shadow: 0 0 0 4px var(--color-bg), 0 0 0 6px var(--color-yolk-deep),
              5px 5px 0 rgba(201, 154, 28, 0.25);
}
.auth-title {
  font-family: var(--font-zh);
  font-weight: 800;
  font-size: var(--fs-2xl);
  letter-spacing: 0.2em;
  margin: var(--gap-3) 0 0.3rem;
  color: var(--color-ink);
}
.auth-sub {
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  margin: 0 0 var(--gap-4);
}
.auth-form {
  text-align: left;
  margin: 0 auto var(--gap-3);
}
.auth-links {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  letter-spacing: 0.02em;
  margin-top: var(--gap-4);
}
.auth-links a {
  color: var(--color-primary-deep);
}
.auth-sep {
  margin: 0 0.4rem;
  opacity: 0.5;
}

/* 临时清单抽签栏 */
.quick-pad {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gap-2);
  align-items: stretch;
  margin-bottom: var(--gap-2);
}
.quick-pad input[type="text"] {
  font-family: var(--font-zh);
  font-size: var(--fs-md);
  padding: var(--gap-3) var(--gap-4);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 2px 2px 0 var(--color-line);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  min-width: 0;
}
.quick-pad input[type="text"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 2px 2px 0 var(--color-primary-pale);
}
.quick-pad input[type="text"]::placeholder {
  color: var(--color-ink-muted);
  font-style: italic;
}
.quick-pad button {
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding-inline: var(--gap-4);
}
.quick-pad .quick-hint {
  grid-column: 1 / -1;
  font-size: var(--fs-xs);
  padding-left: 0.2rem;
  letter-spacing: 0.02em;
}
@media (max-width: 480px) {
  .quick-pad {
    grid-template-columns: 1fr;
  }
}

/* 抽签结果卡 — 票根感 */
.lottery-card {
  background: var(--color-surface);
  border: 2.5px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--gap-5);
  text-align: center;
  box-shadow: 4px 4px 0 var(--color-primary-deep);
  position: relative;
  animation: stamp-in var(--dur-slow) var(--ease-stamp);
  margin-top: var(--gap-4);
}
.lottery-card::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px dashed var(--color-primary);
  border-radius: calc(var(--radius-md) - 5px);
  pointer-events: none;
}
.lottery-card .lottery-meta {
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.5rem;
  font-family: var(--font-num);
  position: relative;
}
.lottery-card .lottery-meta::before,
.lottery-card .lottery-meta::after {
  content: '';
  display: inline-block;
  width: 1.5em;
  height: 1px;
  background: var(--color-line-dash);
  vertical-align: middle;
  margin: 0 0.5em;
}
.lottery-card h2 {
  font-size: var(--fs-2xl);
  color: var(--color-primary-deep);
  margin: 0 0 0.4rem;
  background: none;
  padding: 0;
  display: block;
  letter-spacing: 0.08em;
  text-shadow: 2px 2px 0 var(--color-yolk-pale);
}
.lottery-card h2::before { display: none; }
.lottery-card .cand {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  margin-block: var(--gap-3);
  padding: var(--gap-2) 0;
  border-top: 1px dashed var(--color-line-dash);
  border-bottom: 1px dashed var(--color-line-dash);
}
.lottery-card .actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

@keyframes stamp-in {
  0%   { transform: scale(0.7) rotate(-5deg); opacity: 0; }
  50%  { transform: scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

/* ============================================================
 *  时间线 — 菜单条目流
 * ============================================================ */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: var(--gap-4);
}
.timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) center top / 100% 100% no-repeat;
  border-left: 1px solid var(--color-primary);
  border-right: 1px solid var(--color-primary);
  background: var(--color-bg);
  border-radius: 2px;
}
.timeline::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--color-primary);
}
.timeline-day {
  position: relative;
  margin-top: var(--gap-4);
  margin-left: calc(-1 * var(--gap-4));
  padding-left: var(--gap-4);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-primary-deep);
  letter-spacing: 0.08em;
  background: var(--color-bg);
  padding-block: 0.3rem;
}
.timeline-day::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-primary);
  z-index: 1;
}
.timeline-item {
  position: relative;
  padding: var(--gap-3) 0;
  border-bottom: 1px dashed var(--color-line-soft);
  display: flex;
  justify-content: space-between;
  gap: var(--gap-3);
  align-items: flex-start;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-item .meal-name  { font-weight: 700; font-size: var(--fs-md); color: var(--color-ink); }
.timeline-item .meal-meta  { font-size: var(--fs-sm); color: var(--color-ink-muted); margin-top: 4px; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.timeline-item .meal-time  {
  font-size: var(--fs-sm);
  color: var(--color-ink);
  white-space: nowrap;
  font-family: var(--font-num);
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  background: var(--color-yolk-pale);
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-yolk-deep);
}

/* ============================================================
 *  Toggle 开关
 * ============================================================ */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-3);
  cursor: pointer;
  user-select: none;
}
.toggle input { display: none; }
.toggle-slider {
  position: relative;
  width: 46px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-cream-deep);
  border: 1.5px solid var(--color-line-dash);
  transition: background var(--dur-base) var(--ease-out);
  flex-shrink: 0;
}
.toggle-slider::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1.5px solid var(--color-line-dash);
  top: 2px; left: 2px;
  transition: left var(--dur-base) var(--ease-bounce), background var(--dur-base);
}
.toggle input:checked ~ .toggle-slider {
  background: var(--color-primary);
  border-color: var(--color-primary-deep);
}
.toggle input:checked ~ .toggle-slider::after {
  left: 25px;
  background: var(--color-yolk);
  border-color: var(--color-primary-deep);
}

/* Segmented 控件 — 像格子 */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  background: var(--color-cream-deep);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
  border: 1.5px solid var(--color-line-dash);
}
.segmented label {
  position: relative;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-xs);
  font-size: var(--fs-sm);
  cursor: pointer;
  margin: 0;
  color: var(--color-ink-soft);
  transition: all var(--dur-fast);
  letter-spacing: 0.04em;
}
.segmented input { display: none; }
.segmented input:checked + span,
.segmented label:has(input:checked) {
  background: var(--color-primary);
  color: var(--color-bg);
  box-shadow: 1px 1px 0 var(--color-primary-deep);
  border-radius: var(--radius-xs);
}
.segmented label:hover { color: var(--color-primary-deep); }

/* ============================================================
 *  KPI — 票券风
 * ============================================================ */
.kpi-grid {
  display: grid;
  gap: var(--gap-3);
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  margin-bottom: var(--gap-4);
}
.kpi {
  background: var(--color-surface);
  border: 2px solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: var(--gap-3);
  text-align: center;
  box-shadow: 3px 3px 0 var(--color-rule);
  position: relative;
  transition: transform var(--dur-fast) var(--ease-out);
}
.kpi::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px dashed var(--color-line);
  border-radius: 2px;
  pointer-events: none;
}
.kpi:hover { transform: translate(-1px, -1px); }
.kpi-num {
  font-family: var(--font-num);
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--color-primary-deep);
  line-height: 1.05;
  font-feature-settings: 'tnum' 1;
  position: relative;
  z-index: 1;
}
.kpi-label {
  font-size: var(--fs-xs);
  color: var(--color-ink-soft);
  margin-top: var(--gap-1);
  font-weight: 700;
  letter-spacing: 0.1em;
  position: relative;
  z-index: 1;
}
.kpi-accent-mint { background: var(--color-matcha-pale); border-color: var(--color-matcha-deep); box-shadow: 3px 3px 0 var(--color-matcha-deep); }
.kpi-accent-mint .kpi-num { color: var(--color-matcha-deep); }
.kpi-accent-rose { background: var(--color-primary-pale); border-color: var(--color-primary-deep); box-shadow: 3px 3px 0 var(--color-primary-deep); }
.kpi-accent-rose .kpi-num { color: var(--color-primary-ink); }
.kpi-accent-sky  { background: var(--color-indigo-pale); border-color: var(--color-indigo); box-shadow: 3px 3px 0 var(--color-indigo); }
.kpi-accent-sky  .kpi-num { color: var(--color-indigo); }
.kpi-accent-yolk { background: var(--color-yolk-pale); border-color: var(--color-yolk-deep); box-shadow: 3px 3px 0 var(--color-yolk-deep); }
.kpi-accent-yolk .kpi-num { color: var(--color-yolk-deep); }

/* ============================================================
 *  条形图 / 周报
 * ============================================================ */
.hbars { display: flex; flex-direction: column; gap: 0.5rem; }
.hbar-row {
  display: grid;
  grid-template-columns: 5em 1fr 3em;
  gap: 0.6rem;
  align-items: center;
  font-size: var(--fs-sm);
}
.hbar-label { color: var(--color-ink); text-align: right; font-weight: 700; }
.hbar-track {
  background: var(--color-cream-deep);
  border-radius: var(--radius-xs);
  height: 16px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  position: relative;
}
.hbar-fill {
  background:
    repeating-linear-gradient(45deg,
      var(--color-primary) 0, var(--color-primary) 6px,
      var(--color-primary-deep) 6px, var(--color-primary-deep) 12px);
  height: 100%;
  transition: width var(--dur-slow) var(--ease-out);
}
.hbar-val {
  color: var(--color-ink-soft);
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.daychart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 140px;
  margin-bottom: var(--gap-3);
  padding: var(--gap-2);
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}
.daychart-col {
  flex: 1 1 0;
  display: flex; flex-direction: column;
  align-items: stretch;
  min-width: 14px;
}
.daychart-bar {
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
  border-radius: 2px 2px 0 0;
  margin-top: auto;
  position: relative;
  min-height: 2px;
  box-shadow: 1px 0 0 var(--color-primary-deep);
}
.daychart-n {
  position: absolute;
  top: -1.3em; left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-xs);
  color: var(--color-primary-deep);
  font-family: var(--font-num);
  font-weight: 700;
}
.daychart-x {
  font-size: 0.62rem;
  color: var(--color-ink-muted);
  text-align: center;
  margin-top: 0.25rem;
  font-family: var(--font-num);
  letter-spacing: 0.05em;
}

/* ============================================================
 *  空状态 — 残页感
 * ============================================================ */
.empty {
  text-align: center;
  padding: var(--gap-6) var(--gap-3);
  color: var(--color-ink-muted);
  position: relative;
}
.empty img.art {
  width: 180px;
  max-width: 55%;
  margin: 0 auto var(--gap-3);
  border-radius: var(--radius-md);
  opacity: 0.85;
}
.empty h3 {
  font-size: var(--fs-md);
  color: var(--color-ink-soft);
  margin-bottom: 0.4rem;
  padding-left: 0;
}
.empty h3::before { display: none; }
.empty p { font-size: var(--fs-sm); }

/* ============================================================
 *  食谱卡
 *  设计：菜牌 — 顶部菜系小印章 + 名字 + 价目式 meta
 * ============================================================ */
.recipe-card {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: var(--gap-3) var(--gap-3) var(--gap-3);
  box-shadow: 3px 3px 0 var(--color-rule);
  border: 2px solid var(--color-rule);
  position: relative;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.recipe-card:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--color-rule); }
.recipe-card.inactive { opacity: 0.5; filter: grayscale(0.4); }
.recipe-card h4 {
  margin: 0 0 var(--gap-1);
  font-size: var(--fs-md);
  color: var(--color-ink);
  letter-spacing: 0.04em;
}
.recipe-card .meta { font-size: var(--fs-sm); color: var(--color-ink-muted); }
.recipe-card .cuisine-tag {
  position: absolute;
  top: -10px; left: 14px;
  background: var(--color-primary);
  color: var(--color-bg);
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-xs);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  border: 2px solid var(--color-primary-deep);
  box-shadow: 1px 1px 0 var(--color-primary-deep);
}
.recipe-card .actions {
  display: flex;
  gap: 0.4rem;
  margin-top: var(--gap-2);
}

/* ============================================================
 *  Form rows
 * ============================================================ */
.form-row { margin-bottom: var(--gap-3); }
.form-row label { display: block; margin-bottom: var(--gap-1); }
.form-help { font-size: var(--fs-xs); color: var(--color-ink-muted); margin-top: 0.25rem; }

/* 投放区（log 拍照） */
.drop-zone {
  border: 2.5px dashed var(--color-line-dash);
  border-radius: var(--radius-md);
  padding: var(--gap-5);
  text-align: center;
  background: var(--color-cream);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  cursor: pointer;
  position: relative;
}
.drop-zone:hover { border-color: var(--color-primary); background: var(--color-cream-deep); }
.drop-zone .drop-emoji { font-size: 2.5rem; display: block; margin-bottom: 0.4rem; }
.drop-zone .drop-hint { font-size: var(--fs-sm); color: var(--color-ink-muted); margin-top: 0.3rem; }
.drop-zone input[type="file"] {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}
.drop-zone.has-file { border-style: solid; border-color: var(--color-primary); }
.drop-zone img.preview {
  max-height: 240px;
  margin: 0 auto;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-rule);
}

/* 食物识别 chips */
.dish-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: var(--gap-2);
}

/* ============================================================
 *  Period tabs（stats / dev）
 * ============================================================ */
.period-tabs {
  display: inline-flex;
  gap: 0.3rem;
  background: var(--color-cream-deep);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: var(--gap-4);
  border: 1.5px solid var(--color-line-dash);
  flex-wrap: wrap;
}
.period-tab {
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-xs);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  color: var(--color-ink-soft);
  transition: all var(--dur-fast);
  letter-spacing: 0.05em;
}
.period-tab:hover { color: var(--color-primary-deep); background: var(--color-bg); }
.period-tab.active {
  background: var(--color-primary);
  color: var(--color-bg);
  box-shadow: 1px 1px 0 var(--color-primary-deep);
}

/* ============================================================
 *  details / summary
 * ============================================================ */
details.card {
  cursor: default;
}
details.card summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-primary-deep);
  letter-spacing: 0.05em;
}
details.card summary:hover { color: var(--color-primary); }

/* ============================================================
 *  Strategy row (settings 抽签策略)
 * ============================================================ */
.strategy-row {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-2);
  padding: var(--gap-3);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-line);
  cursor: pointer;
  transition: all var(--dur-fast);
  background: var(--color-surface);
}
.strategy-row:hover { border-color: var(--color-line-dash); background: var(--color-cream); }
.strategy-row.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-wash);
  box-shadow: 2px 2px 0 var(--color-primary-deep);
}

/* ============================================================
 *  Setting row (admin API key)
 * ============================================================ */
.setting-row {
  padding: var(--gap-3) 0;
  border-top: 1px dashed var(--color-line-soft);
}
.setting-row:first-child { border-top: none; }

/* 简短的水平花纹分割（菜单装饰条） */
.divider-deco {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  color: var(--color-line-dash);
  font-size: var(--fs-sm);
  letter-spacing: 0.3em;
  margin: var(--gap-4) 0;
}
.divider-deco::before,
.divider-deco::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-line);
}