/* ===== 小榆生活站 · 公共设计 token 与组件样式 ===== */
:root {
  /* 品牌色：单一主色（校园绿）+ 中性色 */
  --yu-green: #2E8B63;
  --yu-green-dark: #1F6B4A;
  --yu-cream: #FFF8F0;
  --yu-ink: #333333;
  --yu-ink-secondary: #636E72;
  --yu-ink-tertiary: #999999;
  --yu-line: #EEEEEE;
  --yu-white: #FFFFFF;

  /* 头部渐变断点 */
  --yu-gradient-start: #2E8B63;
  --yu-gradient-mid: #1F6B4A;
  --yu-gradient-end: #175239;

  /* 语义主题 token */
  --yu-background: var(--yu-cream);
  --yu-foreground: var(--yu-ink);
  --yu-card: var(--yu-white);
  --yu-card-foreground: var(--yu-ink);
  --yu-popover: var(--yu-white);
  --yu-popover-foreground: var(--yu-ink);
  --yu-primary: var(--yu-green);
  --yu-primary-foreground: var(--yu-white);
  --yu-muted: #E7F2EC;
  --yu-muted-foreground: var(--yu-ink-secondary);
  --yu-border: var(--yu-line);
  --yu-input: var(--yu-line);
  --yu-ring: var(--yu-green);

  /* 状态色（允许的语义强调色） */
  --yu-state-info: #E7F2EC;
  --yu-state-info-hover: #DDECE5;
  --yu-state-info-foreground: #1F6B4A;
  --yu-state-warning: #FF8C42;
  --yu-state-warning-foreground: #FFFFFF;
  --yu-state-success: #6BCB77;
  --yu-state-error: #FF6B6B;
  --yu-state-star: #FFB400;

  /* 圆角刻度：克制的 4/8/12/16px */
  --yu-radius-sm: 4px;
  --yu-radius-md: 8px;
  --yu-radius-lg: 12px;
  --yu-radius-xl: 16px;
  --yu-radius-pill: 999px;

  /* 字体 */
  --yu-font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --yu-font-display: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;

  /* 安全区 */
  --yu-tab-h: 64px;
}

/* ===== 基础 ===== */
* { -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body { background: var(--yu-background); color: var(--yu-foreground); font-family: var(--yu-font-sans); }
td, th { word-break: break-all; }
th { white-space: nowrap; }
img { -webkit-user-drag: none; user-select: none; }
a { text-decoration: none; color: inherit; }
input, textarea, button { font-family: inherit; }

/* 应用容器：移动端居中，桌面端自适应边栏 */
.app-shell {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--yu-background);
  position: relative;
  box-shadow: 0 0 40px rgba(0,0,0,.04);
}
@media (min-width: 768px) {
  .app-shell { max-width: 420px; }
}
.page-pad { padding-bottom: calc(var(--yu-tab-h) + 12px); }
.page-pad.no-tab { padding-bottom: 12px; }

/* ===== 语义 token 兜底工具类（与 Tailwind 语义类同名） ===== */
.bg-background { background-color: var(--yu-background); }
.text-background { color: var(--yu-background); }
.bg-foreground { background-color: var(--yu-foreground); }
.text-foreground { color: var(--yu-foreground); }
.bg-card { background-color: var(--yu-card); }
.text-card { color: var(--yu-card); }
.text-card-foreground { color: var(--yu-card-foreground); }
.bg-popover { background-color: var(--yu-popover); }
.text-popover-foreground { color: var(--yu-popover-foreground); }
.bg-primary { background-color: var(--yu-primary); }
.text-primary { color: var(--yu-primary); }
.border-primary { border-color: var(--yu-primary); }
.bg-primary-foreground { background-color: var(--yu-primary-foreground); }
.text-primary-foreground { color: var(--yu-primary-foreground); }
.bg-muted { background-color: var(--yu-muted); }
.text-muted { color: var(--yu-muted); }
.text-muted-foreground { color: var(--yu-muted-foreground); }
.bg-border { background-color: var(--yu-border); }
.border-border { border-color: var(--yu-border); }
.bg-input { background-color: var(--yu-input); }
.border-input { border-color: var(--yu-input); }
.bg-ring { background-color: var(--yu-ring); }

/* 状态色工具类 */
.bg-state-info { background-color: var(--yu-state-info); }
.hover\:bg-state-info-hover:hover { background-color: var(--yu-state-info-hover); }
.text-state-info-foreground { color: var(--yu-state-info-foreground); }
.bg-state-warning { background-color: var(--yu-state-warning); }
.text-state-warning-foreground { color: var(--yu-state-warning-foreground); }
.bg-state-error { background-color: var(--yu-state-error); }
.bg-state-success { background-color: var(--yu-state-success); }

/* ===== 工具类 ===== */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hairline-top { box-shadow: inset 0 1px 0 var(--yu-line); }
.tap-scale { transition: transform .15s ease; }
.tap-scale:active { transform: scale(.97); }
.tap-card:active { transform: scale(.98); }
.tap-card { transition: transform .15s ease; }

/* ===== 通用导航栏（子页顶部） ===== */
.nav-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 12px;
  background: var(--yu-card);
  border-bottom: 1px solid var(--yu-line);
}
.nav-bar .nav-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px; flex-shrink: 0;
}
.nav-bar .nav-title { font-size: 16px; font-weight: 600; color: var(--yu-foreground); }
.nav-bar .nav-title.center { position: absolute; left: 50%; transform: translateX(-50%); }
.nav-bar .nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ===== 底部 TabBar ===== */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--yu-white);
  border-top: 1px solid var(--yu-line);
}
.tabbar-inner {
  width: 100%; max-width: 480px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  height: var(--yu-tab-h);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 0 4px; color: var(--yu-ink-tertiary); min-width: 0;
}
.tabbar a .tt-ic { width: 24px; height: 24px; flex-shrink: 0; }
.tabbar a .tt-tx { font-size: 11px; line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar a.active { color: var(--yu-primary); font-weight: 600; }

/* ===== Toast ===== */
.toast-wrap { position: fixed; z-index: 999; left: 50%; top: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.toast-item {
  background: rgba(31,107,74,.92); color: #fff; padding: 10px 16px; border-radius: 12px;
  font-size: 14px; line-height: 1.4; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.18);
  animation: toastIn .2s ease, toastOut .2s ease 1.5s forwards; max-width: 260px;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(6px) scale(.96);} to {opacity:1; transform:none;} }
@keyframes toastOut { to { opacity: 0; transform: translateY(-4px) scale(.98);} }

/* ===== 评分星 ===== */
.stars { display: inline-flex; align-items: center; gap: 1px; color: var(--yu-state-star); }
.stars i { width: 12px; height: 12px; }

/* ===== 空状态 ===== */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 24px; color: var(--yu-ink-tertiary); text-align: center; }
.empty-state .es-ic { width: 72px; height: 72px; margin-bottom: 12px; opacity: .5; }

/* ===== 主按钮 ===== */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--yu-primary); color: #fff; font-weight: 600; font-size: 14px;
  border: none; border-radius: var(--yu-radius-pill); padding: 12px 20px; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.btn-primary:active { transform: scale(.97); background: var(--yu-green-dark); }
.btn-primary:disabled { background: var(--yu-ink-tertiary); cursor: not-allowed; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--yu-white); color: var(--yu-primary); font-weight: 600; font-size: 14px;
  border: 1px solid var(--yu-primary); border-radius: var(--yu-radius-pill); padding: 11px 20px; cursor: pointer;
  transition: transform .15s ease;
}
.btn-ghost:active { transform: scale(.97); }

/* ===== 渐隐底色占位（食物图缺省兜底） ===== */
.ph-food { background: linear-gradient(135deg, #E7F2EC, #DDECE5); }
.ph-warm { background: linear-gradient(135deg, #FFF3E6, #FFE6D1); }

/* 行截断 */
.truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }