/* ============================================================
   趣味点菜 PWA — "Warm Whiskers" 设计系统
   参照: DESIGN.md
   ============================================================ */

/* --------------------------------------------------------
   CSS 自定义属性（设计令牌）
   -------------------------------------------------------- */
:root {
  /* ===== 主色调 ===== */
  --color-primary: #984630;
  --color-on-primary: #FFFFFF;
  --color-primary-container: #F28C71;
  --color-on-primary-container: #6D2512;

  /* ===== 背景与表面 ===== */
  --color-bg: #FFF8F6;
  --color-surface: #FFF1ED;
  --color-surface-high: #FBE3DD;
  --color-surface-highest: #F5DDD8;
  --color-card: #FFFFFF;

  /* ===== 文字 ===== */
  --color-text: #251915;
  --color-text-secondary: rgba(37, 25, 21, 0.7);
  --color-text-tertiary: rgba(37, 25, 21, 0.45);

  /* ===== 轮廓与分割 ===== */
  --color-outline: #88726D;
  --color-outline-variant: #DBC1BA;

  /* ===== 辅助色 ===== */
  --color-secondary: #3F6562;
  --color-on-secondary: #FFFFFF;
  --color-secondary-container: #C1EBE7;
  --color-on-secondary-container: #456B68;

  --color-tertiary: #725764;
  --color-on-tertiary: #FFFFFF;
  --color-tertiary-container: #BF9FAE;
  --color-on-tertiary-container: #4E3642;

  /* ===== 功能色 ===== */
  --color-error: #BA1A1A;
  --color-on-error: #FFFFFF;
  --color-error-container: #FFDAD6;
  --color-on-error-container: #93000A;

  --color-success: #3F6562;
  --color-warning: #E8852E;
  --color-danger: #BA1A1A;

  /* ===== 马卡龙标签色（分类标签）===== */
  --tag-meat: #F28C71;
  --tag-meat-text: #6D2512;
  --tag-veggie: #B8E1DD;
  --tag-veggie-text: #3F6562;
  --tag-soup: #E2D1F9;
  --tag-soup-text: #725764;
  --tag-staple: #F7E7B0;
  --tag-staple-text: #7A6518;
  --tag-all-bg: #984630;
  --tag-all-text: #FFFFFF;

  /* ===== 底部导航 ===== */
  --nav-active: #984630;
  --nav-inactive: rgba(37, 25, 21, 0.45);
  --nav-bg: #FFFFFF;

  /* ===== 圆角 ===== */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 48px;
  --radius-full: 9999px;

  /* ===== Neumorphism 阴影 ===== */
  /* 凸起元素（卡片、按钮默认态）*/
  --shadow-raised: -4px -4px 12px rgba(255, 255, 255, 1), 6px 6px 16px rgba(152, 70, 48, 0.12);

  /* 凸起 - 大元素（Hero 按钮）*/
  --shadow-raised-lg: -6px -6px 16px rgba(255, 255, 255, 1), 8px 8px 24px rgba(152, 70, 48, 0.15);

  /* 凹陷元素（输入框默认态）*/
  --shadow-inset: 4px 4px 8px rgba(152, 70, 48, 0.08) inset, -4px -4px 8px rgba(255, 255, 255, 0.9) inset;

  /* 按下态（按钮 :active）*/
  --shadow-pressed: inset -2px -2px 4px rgba(255, 255, 255, 0.7), inset 3px 3px 8px rgba(152, 70, 48, 0.15);

  /* FAB 阴影 */
  --shadow-fab: -4px -4px 12px rgba(255, 255, 255, 1), 6px 6px 20px rgba(152, 70, 48, 0.18);

  /* ===== 字号（参照 DESIGN.md typography）===== */
  --fs-h1: 28px;
  --fs-h2: 22px;
  --fs-h3: 16px;
  --fs-body: 16px;
  --fs-caption: 12px;
  --fs-small: 10px;

  /* ===== 字重 ===== */
  --fw-extra-bold: 800;
  --fw-bold: 700;
  --fw-semi-bold: 600;
  --fw-medium: 500;
  --fw-regular: 400;

  /* ===== 行高 ===== */
  --lh-h1: 36px;
  --lh-h2: 28px;
  --lh-body: 24px;
  --lh-caption: 16px;

  /* ===== 间距（8px 网格）===== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ===== 尺寸 ===== */
  --btn-height: 48px;
  --input-height: 52px;
  --nav-height: 68px;
  --topbar-height: 52px;
  --fab-size: 56px;

  /* ===== 字体族 ===== */
  --font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* --------------------------------------------------------
   全局重置
   -------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  color-scheme: light only;
}

body {
  font-family: var(--font-family);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: var(--lh-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

button {
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, box-shadow 0.2s, background-color 0.2s;
}

input {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
  background: none;
}

img {
  max-width: 100%;
  display: block;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* --------------------------------------------------------
   应用容器
   -------------------------------------------------------- */
#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  background-color: var(--color-bg);
  overflow-x: hidden;
}

/* --------------------------------------------------------
   页面布局
   -------------------------------------------------------- */
.page {
  display: block;
  padding: var(--sp-5);
  padding-top: calc(var(--topbar-height) + var(--sp-5));
  padding-bottom: calc(var(--nav-height) + var(--sp-8));
  min-height: 100vh;
  min-height: 100dvh;
}

.page-hidden {
  display: none !important;
}

/* --------------------------------------------------------
   顶部栏 (.top-bar)
   -------------------------------------------------------- */
.top-bar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-5);
  background-color: var(--color-bg);
  z-index: 100;
}

.top-bar-btn {
  width: 36px;
  height: 36px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  border-radius: var(--radius-full);
}

.top-bar-btn-placeholder {
  width: 36px;
}

.top-bar-avatar {
  font-size: 28px;
  line-height: 1;
}

.top-bar-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

/* --------------------------------------------------------
   底部导航 — 悬浮式 (.bottom-nav)
   -------------------------------------------------------- */
.bottom-nav {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: calc(480px - 32px);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: var(--nav-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised-lg);
  z-index: 100;
  padding: 0 var(--sp-2);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  min-width: 48px;
  min-height: 44px;
  color: var(--nav-inactive);
  transition: color 0.2s, transform 0.2s;
  position: relative;
}

.nav-item.active {
  color: var(--nav-active);
  transform: translateY(-2px);
}

/* 猫耳指示器 */
.nav-item.active::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--nav-active);
}

.nav-icon {
  font-size: 22px;
  line-height: 1;
}

.nav-label {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------
   按钮
   -------------------------------------------------------- */

/* 主色调按钮 */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-semi-bold);
  height: var(--btn-height);
  padding: 0 var(--sp-6);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-raised);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.2s;
}

.btn-primary:active {
  transform: scale(0.97);
  box-shadow: var(--shadow-pressed);
}

.btn-primary.btn-full {
  width: 100%;
}

/* 次要按钮 */
.btn-secondary {
  background-color: var(--color-card);
  color: var(--color-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-semi-bold);
  height: var(--btn-height);
  padding: 0 var(--sp-6);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-raised);
  border: 1.5px solid var(--color-outline-variant);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.2s;
}

.btn-secondary:active {
  transform: scale(0.97);
  box-shadow: var(--shadow-pressed);
  background-color: var(--color-surface);
}

.btn-secondary.btn-full {
  width: 100%;
}

/* 文字危险按钮 */
.btn-text-danger {
  color: var(--color-danger);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  padding: var(--sp-2);
}

/* --------------------------------------------------------
   大按钮：今天吃什么 (.btn-hero)
   -------------------------------------------------------- */
.btn-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  height: 80px;
  background-color: var(--color-primary-container);
  color: var(--color-on-primary-container);
  font-size: var(--fs-h1);
  font-weight: var(--fw-extra-bold);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-raised-lg);
  letter-spacing: -0.02em;
  transition: transform 0.15s, box-shadow 0.2s;
}

.btn-hero:active {
  transform: scale(0.96);
  box-shadow: var(--shadow-pressed);
}

.btn-hero-text {
  flex-shrink: 0;
}

.btn-hero-paw {
  font-size: 24px;
  animation: paw-bounce 0.6s ease-out;
}

@keyframes paw-bounce {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* --------------------------------------------------------
   首页区块
   -------------------------------------------------------- */
.hero-section {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding: var(--sp-2) 0;
}

/* --------------------------------------------------------
   搜索框 — 凹陷式 (.search-box)
   -------------------------------------------------------- */
.search-box {
  display: flex;
  align-items: center;
  background-color: var(--color-surface);
  border-radius: var(--radius-full);
  padding: 0 var(--sp-5);
  height: var(--input-height);
  box-shadow: var(--shadow-inset);
  margin-bottom: var(--sp-4);
}

.search-icon {
  font-size: 16px;
  color: var(--color-text-tertiary);
  margin-right: var(--sp-2);
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  height: 100%;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  background: transparent;
}

.search-input::placeholder {
  color: var(--color-text-tertiary);
}

/* --------------------------------------------------------
   分类标签 — pill 马卡龙 (.category-tabs / .category-tag)
   -------------------------------------------------------- */
.category-tabs {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}

.category-tag {
  height: 36px;
  padding: 0 var(--sp-5);
  border-radius: var(--radius-full);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  background-color: var(--color-card);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-raised);
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

.category-tag.active {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-raised-lg);
}

/* 水平滚动分类（全部菜品页） */
.category-scroll {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding: var(--sp-2) 0;
  margin-bottom: var(--sp-4);
  -webkit-overflow-scrolling: touch;
}

.category-tag-sm {
  height: 32px;
  padding: 0 var(--sp-4);
  border-radius: var(--radius-full);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  background-color: var(--color-card);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-raised);
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.category-tag-sm.active {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-raised);
}

/* --------------------------------------------------------
   推荐卡片 — 新拟态凸起 (.recommend-card)
   -------------------------------------------------------- */
.recommend-card {
  background-color: var(--color-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-raised);
  border: 1px solid var(--color-outline-variant);
  margin-bottom: var(--sp-8);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.recommend-badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  background-color: var(--color-primary-container);
  color: var(--color-on-primary-container);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
}

.recommend-image {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-inset);
}

.recommend-name {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h2);
  margin-bottom: var(--sp-2);
}

.recommend-category {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--sp-5);
}

.recommend-actions {
  display: flex;
  gap: var(--sp-3);
  width: 100%;
}

.btn-refresh {
  flex: 1;
  height: 40px;
  background-color: var(--color-card);
  color: var(--color-text-secondary);
  border-radius: var(--radius-full);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow-raised);
  border: 1px solid var(--color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
}

.btn-refresh:active {
  box-shadow: var(--shadow-pressed);
}

.btn-confirm {
  flex: 2;
  height: 40px;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-full);
  font-size: var(--fs-body);
  font-weight: var(--fw-semi-bold);
  box-shadow: var(--shadow-raised);
}

.btn-confirm:active {
  transform: scale(0.96);
  box-shadow: var(--shadow-pressed);
}

/* --------------------------------------------------------
   快捷入口 (.quick-entries)
   -------------------------------------------------------- */
.quick-entries {
  display: flex;
  gap: var(--sp-3);
}

.quick-card {
  flex: 1;
  background-color: var(--color-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-3);
  box-shadow: var(--shadow-raised);
  border: 1px solid var(--color-outline-variant);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  transition: transform 0.15s, box-shadow 0.2s;
}

.quick-card:active {
  transform: scale(0.95);
  box-shadow: var(--shadow-pressed);
}

.quick-icon {
  font-size: 32px;
  line-height: 1;
}

.quick-label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------
   日期选择器 — pill (.date-picker)
   -------------------------------------------------------- */
.date-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  background-color: var(--color-card);
  border-radius: var(--radius-full);
  padding: var(--sp-3) var(--sp-5);
  box-shadow: var(--shadow-raised);
  margin-bottom: var(--sp-4);
}

.date-arrow {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--color-text-secondary);
  border-radius: var(--radius-full);
}

.date-display {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  min-width: 160px;
  text-align: center;
}

/* --------------------------------------------------------
   菜单列表 (.menu-list)
   -------------------------------------------------------- */
.menu-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.menu-item {
  background-color: var(--color-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-raised);
  border: 1px solid var(--color-outline-variant);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.2s;
  user-select: none;
}

.menu-item:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-pressed);
}

.menu-item-image {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
}

.menu-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.menu-item-name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi-bold);
  margin-bottom: 2px;
}

.menu-item-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.menu-item-added-by {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-text-tertiary);
}

.menu-item-category {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
}

/* 长按删除提示 */
.menu-item.deleting {
  background-color: var(--color-error-container);
  border: 2px solid var(--color-error);
}

/* 菜单项 — 留言备注 */
.menu-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.menu-item-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* 留言入口按钮 */
.menu-item-note-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-text-tertiary);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-full);
  transition: color 0.2s, background-color 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.menu-item-note-toggle:hover,
.menu-item-note-toggle:active {
  color: var(--color-primary);
  background-color: var(--color-surface);
}

.menu-item-note-toggle.has-note {
  color: var(--color-primary);
  background-color: var(--color-primary-container);
  opacity: 0.85;
}

.menu-item-note-toggle-icon {
  font-size: 14px;
  line-height: 1;
}

/* 留言内容展示条 */
.menu-item-note-bubble {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-1);
  line-height: var(--lh-caption);
  cursor: pointer;
  transition: background-color 0.2s;
}

.menu-item-note-bubble:active {
  background-color: var(--color-surface-high);
}

.menu-item-note-bubble-icon {
  flex-shrink: 0;
  font-size: 12px;
  line-height: var(--lh-caption);
}

.menu-item-note-bubble-text {
  flex: 1;
  word-break: break-all;
}

/* 留言编辑器（内联）*/
.note-editor {
  margin-top: var(--sp-2);
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.note-editor input {
  flex: 1;
  height: 40px;
  background-color: var(--color-surface);
  border-radius: var(--radius-full);
  padding: 0 var(--sp-4);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  box-shadow: var(--shadow-inset);
  border: 1.5px solid transparent;
  transition: border-color 0.2s;
}

.note-editor input:focus {
  border-color: var(--color-primary);
}

.note-editor input::placeholder {
  color: var(--color-text-tertiary);
}

.note-editor .btn-note-save {
  height: 40px;
  padding: 0 var(--sp-4);
  background-color: var(--color-primary-container);
  color: var(--color-on-primary-container);
  border-radius: var(--radius-full);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  box-shadow: var(--shadow-raised);
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.2s;
}

.note-editor .btn-note-save:active {
  transform: scale(0.96);
  box-shadow: var(--shadow-pressed);
}

.note-editor .btn-note-clear {
  height: 40px;
  width: 40px;
  padding: 0;
  background-color: var(--color-card);
  color: var(--color-text-tertiary);
  border-radius: var(--radius-full);
  font-size: 14px;
  box-shadow: var(--shadow-raised);
  border: 1px solid var(--color-outline-variant);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.2s;
}

.note-editor .btn-note-clear:active {
  transform: scale(0.96);
  box-shadow: var(--shadow-pressed);
}

/* --------------------------------------------------------
   菜品网格 (.dish-grid)
   -------------------------------------------------------- */
.dish-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  padding-bottom: calc(var(--fab-size) + var(--sp-8));
}

.dish-card {
  background-color: var(--color-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-raised);
  border: 1px solid var(--color-outline-variant);
  position: relative;
  transition: transform 0.15s, box-shadow 0.2s;
}

.dish-card:active {
  transform: scale(0.96);
  box-shadow: var(--shadow-pressed);
}

.dish-card-image {
  width: 100%;
  aspect-ratio: 1;
  background-color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.dish-card-body {
  padding: var(--sp-3);
}

.dish-card-name {
  font-size: var(--fs-body);
  font-weight: var(--fw-semi-bold);
  margin-bottom: var(--sp-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dish-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dish-card-tag {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-full);
}

.dish-card-fav {
  font-size: 16px;
  opacity: 0.4;
  transition: opacity 0.2s, transform 0.2s;
}

.dish-card-fav.liked {
  opacity: 1;
  transform: scale(1.2);
}

/* --------------------------------------------------------
   悬浮按钮 — 容器色 (.fab)
   -------------------------------------------------------- */
.fab {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--sp-4) + 12px);
  right: calc(max(var(--sp-5), (100% - 480px) / 2 + var(--sp-5)));
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: var(--radius-full);
  background-color: var(--color-primary-container);
  color: var(--color-on-primary-container);
  font-size: 28px;
  font-weight: 300;
  box-shadow: var(--shadow-fab);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  transition: transform 0.2s, box-shadow 0.2s;
}

.fab:active {
  transform: scale(0.9);
  box-shadow: var(--shadow-pressed);
}

/* --------------------------------------------------------
   冰箱表单 (.fridge-form)
   -------------------------------------------------------- */
.fridge-form {
  background-color: var(--color-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-raised);
  border: 1px solid var(--color-outline-variant);
  margin-bottom: var(--sp-8);
}

.fridge-dates {
  display: flex;
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
}

.date-field {
  flex: 1;
}

.date-field label {
  display: block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin-bottom: var(--sp-1);
}

/* --------------------------------------------------------
   冰箱列表 (.fridge-list)
   -------------------------------------------------------- */
.fridge-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.fridge-item {
  background-color: var(--color-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-raised);
  border: 1px solid var(--color-outline-variant);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  position: relative;
  transition: box-shadow 0.2s;
}

.fridge-item.warning {
  border-left: 4px solid var(--color-warning);
}

.fridge-item.expired {
  border-left: 4px solid var(--color-danger);
  opacity: 0.7;
}

.fridge-item-icon {
  font-size: 28px;
}

.fridge-item-info {
  flex: 1;
  min-width: 0;
}

.fridge-item-name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi-bold);
}

.fridge-item-dates {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
}

.fridge-item-delete {
  font-size: 16px;
  color: var(--color-text-tertiary);
  padding: var(--sp-2);
}

/* --------------------------------------------------------
   我的页面 (.profile)
   -------------------------------------------------------- */
.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-8) 0;
}

.profile-avatar {
  font-size: 72px;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-card);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-raised);
  margin-bottom: var(--sp-4);
}

.profile-nickname {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h2);
  color: var(--color-text);
}

/* 家庭组卡片 */
.family-card {
  background-color: var(--color-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-raised);
  border: 1px solid var(--color-outline-variant);
  margin-bottom: var(--sp-8);
}

.family-name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-4);
  text-align: center;
}

.family-members {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.family-member-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.family-share-code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-4);
  border: 1.5px dashed var(--color-primary-container);
}

.share-label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.share-code-value {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extra-bold);
  color: var(--color-primary);
  letter-spacing: 4px;
  font-family: "Courier New", monospace;
}

.family-hint {
  text-align: center;
  color: var(--color-text-secondary);
  margin-bottom: var(--sp-5);
  font-weight: var(--fw-medium);
}

.family-not-joined {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.join-family {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

/* 设置区 */
.settings-section {
  background-color: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  border: 1px solid var(--color-outline-variant);
  overflow: hidden;
}

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-outline-variant);
  transition: background-color 0.2s;
}

.settings-item:last-child {
  border-bottom: none;
}

.settings-item:active {
  background-color: var(--color-surface);
}

/* --------------------------------------------------------
   全宽输入框 — 凹陷式 (.input-full)
   -------------------------------------------------------- */
.input-full {
  width: 100%;
  height: var(--input-height);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 0 var(--sp-5);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  box-shadow: var(--shadow-inset);
  border: 1.5px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input-full:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-inset-light);
}

.input-full::placeholder {
  color: var(--color-text-tertiary);
}

/* 全宽输入 — 有默认边框的变体（兼容旧边框样式） */
input.input-full[type="date"] {
  border: 1.5px solid var(--color-outline-variant);
}

/* --------------------------------------------------------
   区块标题 (.section-title)
   -------------------------------------------------------- */
.section-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-4);
  padding-left: var(--sp-1);
  color: var(--color-text);
}

/* --------------------------------------------------------
   缺省状态 (.empty-state)
   -------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-10) 0;
  text-align: center;
}

.empty-state.hidden {
  display: none;
}

.empty-illustration {
  font-size: 80px;
  margin-bottom: var(--sp-4);
  opacity: 0.85;
}

.empty-text {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--sp-5);
}

/* --------------------------------------------------------
   弹窗 (.modal)
   -------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 200;
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.modal-overlay.show {
  display: flex;
}

.modal-content {
  background-color: var(--color-card);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  padding: var(--sp-6) var(--sp-5);
  position: relative;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.modal-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  font-size: 16px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface);
}

.modal-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-5);
  text-align: center;
}

/* 菜品详情弹窗 */
.modal-dish-image {
  width: 100%;
  height: 200px;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  margin-bottom: var(--sp-4);
}

.modal-dish-name {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h2);
  text-align: center;
  margin-bottom: var(--sp-2);
}

.modal-dish-category {
  display: block;
  text-align: center;
  margin-bottom: var(--sp-4);
}

.modal-dish-link-section {
  margin-bottom: var(--sp-4);
}

.modal-dish-link-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
}

.modal-dish-link-view a {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  word-break: break-all;
  flex: 1;
  min-width: 0;
}

.modal-dish-link-edit {
  margin-top: var(--sp-2);
}

.btn-text-sm {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi-bold);
  color: var(--color-primary);
  padding: var(--sp-1) var(--sp-2);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: var(--sp-2);
}

/* 添加菜品弹窗 */
.modal-form .input-full {
  margin-bottom: var(--sp-4);
}

.form-categories {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}

.form-categories .category-tag {
  cursor: pointer;
}

/* --------------------------------------------------------
   Toast 提示
   -------------------------------------------------------- */
.toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background-color: var(--color-text);
  color: #FFFFFF;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-full);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  z-index: 300;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast.success {
  background-color: var(--color-success);
}

.toast.error {
  background-color: var(--color-danger);
}

/* --------------------------------------------------------
   马卡龙标签颜色
   -------------------------------------------------------- */
.tag-meat {
  background-color: var(--tag-meat);
  color: var(--tag-meat-text);
}

.tag-veggie {
  background-color: var(--tag-veggie);
  color: var(--tag-veggie-text);
}

.tag-soup {
  background-color: var(--tag-soup);
  color: var(--tag-soup-text);
}

.tag-staple {
  background-color: var(--tag-staple);
  color: var(--tag-staple-text);
}

/* --------------------------------------------------------
   工具类
   -------------------------------------------------------- */
.text-center { text-align: center; }
.mt-sm { margin-top: var(--sp-2); }
.mt-md { margin-top: var(--sp-3); }
.mt-lg { margin-top: var(--sp-4); }
.mb-sm { margin-bottom: var(--sp-2); }
.mb-md { margin-bottom: var(--sp-3); }
.mb-lg { margin-bottom: var(--sp-4); }
.hidden { display: none !important; }

/* --------------------------------------------------------
   响应式微调
   -------------------------------------------------------- */
@media screen and (min-width: 481px) {
  .fab {
    right: calc((100% - 480px) / 2 + var(--sp-5));
  }
  .bottom-nav {
    width: calc(480px - 32px);
  }
}