/* ========== 味来时光 v4.0 - AI智能风格 ========== */

/* ===== 字体系统 ===== */
:root {
  --font-display: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
}
body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
h1, h2, h3, h4, .score-display, .price-display, .nav-tab, button {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* 粒子背景 — 暖色系美食元素 */
#particles {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.particle {
  position: absolute;
  border-radius: 50%;
  animation: floatUp 8s infinite ease-in;
  opacity: 0;
  font-size: 24px;
}
@keyframes floatUp {
  0% { transform: translateY(100vh) scale(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.5; }
  90% { opacity: 0.08; }
  100% { transform: translateY(-10vh) scale(1.8) rotate(180deg); opacity: 0; }
}

/* 美食暖色光晕背景 */
body::before {
  content: '';
  position: fixed;
  top: -50%;
  right: -30%;
  width: 80%;
  height: 100%;
  background: radial-gradient(ellipse, rgba(251,191,36,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  bottom: -40%;
  left: -20%;
  width: 70%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(245,158,11,0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* 导航标签 */
.nav-tab {
  color: #6b7280;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  position: relative;
}
.nav-tab:hover { color: #d97706; background: #fffbeb; }
.nav-tab.active {
  color: #d97706;
  border-bottom-color: #d97706;
  background: linear-gradient(180deg, rgba(217,119,6,0.08) 0%, transparent 100%);
}
.nav-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 50%;
  transform: translateX(-50%);
  width: 60%; height: 2px;
  background: #d97706;
  border-radius: 2px 2px 0 0;
}

/* 玻璃态卡片 — 世界级 */
.glass-card {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 12px 32px rgba(217,119,6,0.12);
  border-color: rgba(217,119,6,0.2);
  transform: translateY(-2px);
}
.glass-card:active {
  transform: scale(0.985);
  transition: transform 0.15s ease;
}

/* AI渐变动画边框 */
.ai-border {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}
.ai-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: linear-gradient(135deg, #d97706, #e11d48, #f59e0b, #d97706);
  background-size: 300% 300%;
  animation: gradientRotate 4s ease infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s;
}
.ai-border:hover::before { opacity: 1; }

@keyframes gradientRotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 骨架屏 */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 定位加载动画 */
.location-overlay {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s, visibility 0.5s;
  touch-action: none;
}
.location-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
}
.location-pulse {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(217,119,6,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s infinite;
}
.location-pulse-inner {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #d97706;
  box-shadow: 0 0 30px rgba(217,119,6,0.5);
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

/* 聊天区域折叠过渡 */
/* AI搜索浮动返回按钮（悬浮，滚动时始终可见） */
#aiReturnFab {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 20px;
  z-index: 45;
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #fff;
  padding: 8px 16px;
  border-radius: 24px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 4px 20px rgba(217,119,6,0.4);
  transition: all 0.2s ease;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
#aiReturnFab:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(217,119,6,0.55);
}
#aiReturnFab.visible {
  display: flex;
}

/* 评分进度条流光 */
.score-bar {
  position: relative;
  overflow: hidden;
}
.score-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: barShine 2s infinite;
}
@keyframes barShine {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 卡片入场动画 */
.food-card {
  animation: cardIn 0.5s ease-out both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Toast */
#toast {
  animation: slideUp 0.3s ease-out;
  bottom: 130px !important;
  z-index: 9999 !important;
}
@keyframes slideUp {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* 对话消息滑入 */
.animate-slideUp {
  animation: msgSlideUp 0.4s ease-out both;
}
@keyframes msgSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* AI思考闪烁光标 */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.typing-cursor::after {
  content: '|';
  animation: cursorBlink 0.8s infinite;
  color: #d97706;
  font-weight: bold;
}

/* 快捷标签hover缩放 */
#quickChips button {
  transition: all 0.2s ease;
}
#quickChips button:hover {
  transform: scale(1.05);
}

/* 对话输入框聚焦光环 */
#aiQueryInput:focus {
  box-shadow: 0 0 0 4px rgba(217,119,6,0.1), 0 4px 20px rgba(217,119,6,0.15);
}

/* 弹窗 */
.modal-enter {
  animation: scaleIn 0.25s ease-out;
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

/* 滚动条 */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #fcd34d; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #d97706; }

/* 选中标签动画 */
.tag-selected {
  animation: popIn 0.3s ease-out;
}
@keyframes popIn {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* 平滑滚动 */
html { scroll-behavior: smooth; }

/* 页面底部留白，避免被AI底部栏遮挡 */
body {
  padding-bottom: 48px;
}

/* 响应式 */
@media (max-width: 768px) {
  .nav-tab { padding: 8px 14px; font-size: 13px; }
  #recommendList { grid-template-columns: 1fr; gap: 12px; padding: 0 2px; }
  .glass-card { backdrop-filter: blur(10px); }
  #recommendList .food-card { margin-bottom: 2px; }
  /* 页头在移动端更紧凑 */
  #mainContent > .flex.items-center.justify-between {
    flex-wrap: wrap;
    gap: 10px;
  }
  /* 移动端标题更紧凑 */
  h2.text-2xl { font-size: 1.35rem; }
  /* 移动端骨架屏 */
  .skeleton-card { margin-bottom: 8px; }
}

/* ========== 非Tailwind关键fallback ========== */
.hidden { display: none; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.relative { position: relative; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.overflow-y-auto { overflow-y: auto; }
.shrink-0 { flex-shrink: 0; }
.flex-1 { flex: 1 1 0%; }
.rounded-2xl { border-radius: 1rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }
.bg-white { background-color: #fff; }
.text-white { color: #fff; }
.text-center { text-align: center; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
.transition { transition-property: all; transition-duration: 0.15s; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.border { border-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-t { border-top-width: 1px; }
.border-l { border-left-width: 1px; }
.border-gray-100 { border-color: #f3f4f6; }
.border-gray-200 { border-color: #e5e7eb; }
.border-orange-200 { border-color: #fde68a; }
.border-orange-400 { border-color: #f59e0b; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-orange-50 { background-color: #fffbeb; }
.bg-orange-100 { background-color: #fef3c7; }
.bg-red-50 { background-color: #fef2f2; }
.bg-green-50 { background-color: #f0fdf4; }
.bg-blue-50 { background-color: #eff6ff; }
.bg-purple-50 { background-color: #faf5ff; }
.bg-amber-50 { background-color: #fffbeb; }
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-orange-400 { color: #f59e0b; }
.text-orange-500 { color: #d97706; }
.text-orange-600 { color: #b45309; }
.text-orange-700 { color: #92400e; }
.text-orange-800 { color: #9a3412; }
.text-red-500 { color: #ef4444; }
.text-red-600 { color: #dc2626; }
.text-green-600 { color: #16a34a; }
.text-blue-600 { color: #2563eb; }
.text-blue-700 { color: #1d4ed8; }
.text-purple-600 { color: #9333ea; }
.text-purple-700 { color: #7e22ce; }
.text-teal-600 { color: #0d9488; }
.text-indigo-600 { color: #4f46e5; }
.text-pink-600 { color: #db2777; }
.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
.hover\:bg-gray-200:hover { background-color: #e5e7eb; }
.hover\:bg-orange-100:hover { background-color: #fef3c7; }
.hover\:text-gray-600:hover { color: #4b5563; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.min-w-0 { min-width: 0; }
.w-full { width: 100%; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-\[60\] { z-index: 60; }
.z-\[70\] { z-index: 70; }
.z-\[100\] { z-index: 100; }
.max-w-7xl { max-width: 80rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-lg { max-width: 32rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.cursor-pointer { cursor: pointer; }
.pointer-events-none { pointer-events: none; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-bounce { animation: bounce 1s infinite; }
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-25%); }
}

/* AI思考动画 */
.thinking-dots { display: flex; gap: 4px; padding: 4px 0; }
.thinking-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #d97706;
  animation: dotBounce 1.4s infinite both;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* 霓虹发光按钮 */
.btn-glow {
  position: relative;
  overflow: hidden;
}
.btn-glow::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}
.btn-glow:hover::after { opacity: 1; }

/* 推荐分值颜色 */
.score-high { color: #16a34a; }
.score-medium { color: #d97706; }
.score-low { color: #9ca3af; }

/* 店铺照片画廊 */
.food-card img {
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.food-card:hover img {
  transform: scale(1.08);
}

/* 卡片照片渐变遮罩 */
.card-photo-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.4) 40%, transparent 100%);
  pointer-events: none;
}

/* 套餐卡片悬停 */
.package-card {
  transition: all 0.2s ease;
}
.package-card:hover {
  border-color: #f59e0b;
  box-shadow: 0 2px 12px rgba(217,119,6,0.1);
}

/* 预约弹窗动画 */
#reserveModal .modal-content {
  animation: modalSlideUp 0.3s ease-out;
}
@keyframes modalSlideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 图片加载失败回退 */
.img-fallback {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%);
}

/* 预约按钮脉冲 */
.reserve-pulse {
  animation: reservePulse 2s infinite;
}
@keyframes reservePulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(217,119,6,0.3); }
  50% { box-shadow: 0 4px 24px rgba(217,119,6,0.5); }
}

/* 分数条动画 */
.score-bar .h-full {
  animation: scoreFill 1s ease-out;
}
@keyframes scoreFill {
  from { width: 0 !important; }
}

/* ========== 右侧滑出面板 ========== */
#chatPanel, #profilePanel, #algorithmPanel {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  max-width: 480px;
  z-index: 50;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  background: #fff;
  visibility: hidden;
  box-shadow: -8px 0 40px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
}

/* 遮罩层 */
#chatOverlay, #profileOverlay, #algorithmOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 40;
  display: none;
}

/* 面板内容区 */
#profileContent, #algorithmContent {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* 面板头部 */
#chatPanel > div:first-child,
#profilePanel > div:first-child,
#algorithmPanel > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
  background: linear-gradient(to right, #fffbeb, #fffbeb);
}

/* 面板关闭按钮 */
#chatPanel button,
#profilePanel button,
#algorithmPanel button {
  cursor: pointer;
}

/* 底部栏消息区滚动条 */
#chatMessagesWrap::-webkit-scrollbar { width: 4px; }
#chatMessagesWrap::-webkit-scrollbar-track { background: transparent; }
#chatMessagesWrap::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 2px; }
#chatMessagesWrap::-webkit-scrollbar-thumb:hover { background: #d1d5db; }

/* ========== AI 美食管家 — 底部专属栏（世界级设计） ========== */
#aiBottomBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: 0.5px solid rgba(0,0,0,0.06);
  box-shadow: 0 -1px 0 rgba(0,0,0,0.03), 0 -12px 40px rgba(0,0,0,0.08);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 对话消息区 — 搜索直接显示卡片，无需聊天窗口 */
#chatMessagesWrap {
  display: none;
}
#chatMessages {
  padding: 0 16px;
}

/* 加载状态 */
#chatLoading {
  display: none;
  text-align: center;
  padding: 8px 0;
}
#chatLoading.visible {
  display: block;
}

/* 底部栏输入框聚焦 */
#aiQueryInput:focus {
  border-color: transparent !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.25), 0 4px 20px rgba(0,0,0,0.08) !important;
  background: #fff !important;
}
#aiQueryInput::placeholder {
  color: #9ca3af;
  font-size: 14px;
}

/* 发送按钮 */
#aiSendBtn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#aiSendBtn:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 24px rgba(217,119,6,0.5) !important;
}
#aiSendBtn:active {
  transform: scale(0.9) !important;
}

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

/* 悬浮返回按钮缓慢弹跳 */
@keyframes bounceSlow {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
  60% { transform: translateY(0); }
}
.animate-bounce-slow {
  animation: bounceSlow 2s ease-in-out infinite;
}

/* ========== 移动端底部导航 — 世界级玻璃态设计 ========== */
#mobileNav {
  display: none;
  height: 64px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 -0.5px 0 rgba(0,0,0,0.06), 0 -8px 32px rgba(0,0,0,0.06);
}
.mobile-nav-indicator {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-nav-tab.active .mobile-nav-indicator,
.mobile-nav-tab.text-primary-600 .mobile-nav-indicator {
  background: linear-gradient(135deg, #f59e0b, #d97706, #ea580c);
  width: 28px;
  box-shadow: 0 1px 6px rgba(217,119,6,0.35);
}
.mobile-nav-tab {
  position: relative;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-nav-tab:active {
  transform: scale(0.92);
}
@media (max-width: 767px) {
  #mobileNav {
    display: flex;
  }
  #mobileNav .mobile-nav-tab {
    min-height: 56px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    gap: 2px;
  }
  #mobileNav .mobile-nav-tab svg {
    width: 24px;
    height: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  #mobileNav .mobile-nav-tab.text-primary-600 svg {
    filter: drop-shadow(0 2px 4px rgba(217,119,6,0.3));
  }
  #aiBottomBar {
    display: none;
    bottom: 64px !important;
    padding-bottom: 0 !important;
    background: #fff !important;
    border-top: none !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.12) !important;
    border-radius: 20px 20px 0 0;
  }
  #aiBottomBar.ai-bar-visible {
    display: block;
  }
  #floatingReturnBtn {
    bottom: 134px !important;
  }
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  /* AI管家 tab 激活态 */
  #mobileNav .ai-nav-tab.text-primary-600,
  #mobileNav .ai-nav-tab.active {
    color: #fff !important;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
    box-shadow: 0 -6px 24px rgba(234,88,12,0.45) !important;
  }
  #mobileNav .ai-nav-tab.text-primary-600 svg,
  #mobileNav .ai-nav-tab.active svg {
    filter: drop-shadow(0 2px 6px rgba(255,255,255,0.5));
  }
}

/* 响应式 */
@media (max-width: 640px) {
  #profilePanel { width: 100% !important; }
  #algorithmPanel { width: 100% !important; }
}

/* ========== 横屏适配 ========== */
@media (max-height: 500px) and (orientation: landscape) {
  nav { height: 48px !important; }
  nav .text-lg { font-size: 0.875rem !important; }
  #mobileNav { height: 40px; }
  #mobileNav .mobile-nav-tab { padding-top: 2px; padding-bottom: 2px; }
  #aiBottomBar { height: auto; }
  #aiBottomBar #aiQueryInput { padding: 6px 10px; font-size: 12px; }
  #aiBottomBar #aiSendBtn { width: 36px; height: 36px; }
  .food-card .card-photo-area { height: 140px !important; }
  body {
    padding-bottom: calc(40px + 52px + env(safe-area-inset-bottom, 0px));
  }
}

/* ========== 深色模式 ========== */
.dark { color-scheme: dark; }

/* 背景与文字 */
.dark body,
.dark .bg-white { background-color: #0f172a; }
.dark .bg-gray-50 { background-color: #1e293b; }
.dark .bg-gray-100 { background-color: #1e293b; }
.dark body { color: #e2e8f0; }

/* 导航栏 */
.dark nav {
  background: rgba(15,23,42,0.85) !important;
  border-bottom-color: rgba(100,116,139,0.15) !important;
}
.dark nav h1 { color: #f1f5f9; }
.dark nav p { color: #94a3b8; }

/* 卡片 */
.dark .glass-card,
.dark .food-card {
  background: rgba(30,41,59,0.85) !important;
  backdrop-filter: blur(16px);
  border-color: rgba(100,116,139,0.15) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.dark .glass-card:hover,
.dark .food-card:hover {
  background: rgba(30,41,59,0.95) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.dark .food-card h3 { color: #e2e8f0; }
.dark .food-card .text-gray-800 { color: #e2e8f0; }
.dark .food-card .text-gray-500 { color: #94a3b8; }
.dark .food-card .text-gray-400 { color: #94a3b8; }

/* 卡片照片渐变遮罩 - 深色 */
.dark .card-photo-fade {
  background: linear-gradient(to top, rgba(15,23,42,0.95) 0%, rgba(15,23,42,0.5) 40%, transparent 100%);
}
/* 新的卡片渐变遮罩 (from-black/50) - 深色 */
.dark .food-card .bg-gradient-to-t.from-black\\/50 {
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%) !important;
}

/* 卡片价格/套餐区 */
.dark .food-card .border-gray-100\/50 { border-color: rgba(100,116,139,0.15); }
.dark .food-card .bg-gradient-to-r.from-red-50 { background: linear-gradient(to right, rgba(239,68,68,0.08), rgba(249,115,22,0.08)); }
.dark .food-card .bg-gradient-to-r.from-accent-50 { background: linear-gradient(to right, rgba(244,63,94,0.1), rgba(217,119,6,0.1)); }

/* 底部卡片层叠 */
.dark .stacked-cards-container .food-card:nth-child(3) {
  background: rgba(30,41,59,0.4) !important;
}

/* 标签 */
.dark #quickChips2 button,
.dark #chatQuickChips button {
  background: rgba(217,119,6,0.1);
  color: #fbbf24;
  border-color: rgba(217,119,6,0.2);
}

/* AI 底部栏 */
.dark #aiBottomBar {
  background: rgba(15,23,42,0.94) !important;
  border-top-color: rgba(100,116,139,0.12) !important;
}
/* 移动端 AI 弹出栏深色 */
@media (max-width: 767px) {
  .dark #aiBottomBar.ai-bar-visible {
    background: #0f172a !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.5) !important;
  }
  .dark #mobileNav .ai-nav-tab {
    box-shadow: 0 -6px 20px rgba(234,88,12,0.25) !important;
  }
}
.dark #aiQueryInput {
  background: rgba(30,41,59,0.8) !important;
  border-color: rgba(100,116,139,0.3) !important;
  color: #e2e8f0 !important;
}
.dark #aiQueryInput::placeholder { color: #64748b; }
.dark #aiQueryInput:focus {
  background: #1e293b !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.2), 0 4px 20px rgba(0,0,0,0.3) !important;
}

/* 按钮 */
.dark button.bg-gray-100,
.dark #langBtn,
.dark #darkModeBtn {
  background: #1e293b !important;
  color: #94a3b8 !important;
  border-color: rgba(100,116,139,0.2) !important;
}
.dark button.bg-gray-100:hover,
.dark #langBtn:hover,
.dark #darkModeBtn:hover {
  background: #334155 !important;
  color: #e2e8f0 !important;
}
/* 卡片 AI探店 按钮 — 深色 */
.dark .food-card button.bg-white {
  background: #1e293b !important;
  color: #cbd5e1;
  border-color: rgba(100,116,139,0.25) !important;
}
.dark .food-card button.bg-white:hover {
  background: #334155 !important;
  border-color: rgba(245,158,11,0.3) !important;
}
/* 卡片预约按钮 — 深色 */
.dark .reserve-btn {
  box-shadow: 0 4px 16px rgba(217,119,6,0.25) !important;
}

/* 模态框 */
.dark .fixed.inset-0.bg-black\/50 { background: rgba(0,0,0,0.7); }
.dark #detailModal > div,
.dark #detailContent {
  background: #1e293b !important;
  color: #e2e8f0;
}
.dark #detailContent .text-gray-700 { color: #cbd5e1; }
.dark #detailContent .text-gray-600 { color: #94a3b8; }
.dark #detailContent .text-gray-500 { color: #94a3b8; }
.dark #detailContent .text-gray-400 { color: #64748b; }
.dark #detailContent .bg-gray-50 { background: #0f172a; }
.dark #detailContent .bg-white { background: #1e293b; }
.dark #detailContent .border-gray-200 { border-color: rgba(100,116,139,0.2); }
.dark #detailContent .from-gray-50 { background: linear-gradient(to bottom right, #1e293b, #0f172a); }

/* 滑出面板 */
.dark #profilePanel,
.dark #algorithmPanel {
  background: #0f172a !important;
  border-left-color: rgba(100,116,139,0.15) !important;
}
.dark #profilePanel h3,
.dark #algorithmPanel h3 { color: #f1f5f9; }
.dark #profilePanel p,
.dark #algorithmPanel p { color: #94a3b8; }
.dark #profilePanel .border-b { border-bottom-color: rgba(100,116,139,0.15); }
.dark #profileContent,
.dark #algorithmContent { color: #e2e8f0; }

/* 城市下拉 */
.dark #cityDropdown,
.dark #cityDropdown.bg-white\/95 {
  background: rgba(30,41,59,0.98) !important;
  border-color: rgba(100,116,139,0.15) !important;
}
.dark #cityDropdown input { background: #0f172a; border-color: rgba(100,116,139,0.2); color: #e2e8f0; }
.dark #cityDropdown .text-gray-700 { color: #e2e8f0; }
.dark #cityDropdown .text-gray-500 { color: #94a3b8; }
.dark #cityDropdown .text-gray-400 { color: #64748b; }
.dark #cityDropdown button:hover { background: #334155; }

/* Toast 通知 */
.dark #toast { background: #1e293b; color: #e2e8f0; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }

/* 移动端底部导航 - 深色 */
.dark #mobileNav {
  background: rgba(15,23,42,0.95);
  border-top-color: rgba(100,116,139,0.15);
}
.dark #mobileNav .mobile-nav-tab.text-gray-400 { color: #64748b; }
.dark #mobileNav .mobile-nav-tab.text-primary-600 { color: #f59e0b; }

/* 汉堡菜单 - 深色 */
.dark #hamburgerMenu {
  background: rgba(30,41,59,0.97);
  border-color: rgba(100,116,139,0.15);
}
.dark #hamburgerMenu .text-gray-400 { color: #64748b; }
.dark #hamburgerMenu .border-gray-100 { border-color: rgba(100,116,139,0.12); }
.dark #hamburgerMenu button { color: #cbd5e1; }
.dark #hamburgerMenu button:hover { background: rgba(100,116,139,0.12); }
.dark #hamburgerBtn { background: #1e293b; color: #cbd5e1; border-color: rgba(100,116,139,0.15); }
.dark .mobile-nav-indicator { } /* placeholder */
.dark .mobile-nav-tab.active .mobile-nav-indicator,
.dark .mobile-nav-tab.text-primary-600 .mobile-nav-indicator {
  background: #f59e0b;
}

/* 面板关闭按钮 - 移动端底部 */
@media (max-width: 640px) {
  #profilePanel .sticky.top-0 button,
  #algorithmPanel .sticky.top-0 button {
    min-width: 44px;
    min-height: 44px;
  }
}

/* 问卷弹窗 */
.dark #questionnaireModal > div {
  background: #1e293b;
  color: #e2e8f0;
}
.dark #questionnaireModal .text-gray-700 { color: #cbd5e1; }
.dark #questionnaireModal .text-gray-500 { color: #94a3b8; }
.dark #questionnaireModal .bg-gray-50 { background: #0f172a; }
.dark #questionnaireModal .border-gray-200 { border-color: rgba(100,116,139,0.2); }

/* ========== 骨架屏加载 ========== */
.skeleton-box {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.skeleton-line {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.skeleton-box::after,
.skeleton-line::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  animation: skeleton-shimmer 2s ease-in-out infinite;
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 深色模式骨架屏 */
.dark .skeleton-card { background: #1e293b; border-color: rgba(100,116,139,0.12); }
.dark .skeleton-box { background: #334155; }
.dark .skeleton-line { background: #334155; }
.dark .skeleton-line.bg-gray-100 { background: #1e293b; }
.dark .skeleton-line.bg-gray-200 { background: #334155; }
.dark .skeleton-box::after,
.dark .skeleton-line::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
}

/* 加载/空状态 */
.dark #recommendLoading { color: #94a3b8; }
.dark #recommendEmpty { color: #64748b; }
.dark #recommendEmpty .bg-gray-50 { background: #1e293b; }

/* 来源统计栏 */
.dark #sourceStatsBar { background: rgba(30,41,59,0.9); border-color: rgba(100,116,139,0.15); }
.dark #sourceStatsBar .text-gray-600 { color: #94a3b8; }

/* 预约弹窗 */
.dark #reserveModal > div { background: #1e293b; color: #e2e8f0; }
.dark #reserveModal .text-gray-600,
.dark #reserveModal .text-gray-500 { color: #94a3b8; }
.dark #reserveModal .border-gray-200 { border-color: rgba(100,116,139,0.2); }
.dark #reserveModal .bg-gray-50 { background: #0f172a; }

/* 输入框通用 */
.dark input[type="text"],
.dark input[type="date"],
.dark input[type="time"],
.dark select,
.dark textarea {
  background: #1e293b;
  border-color: rgba(100,116,139,0.2);
  color: #e2e8f0;
}
.dark input::placeholder { color: #64748b; }

/* 分割线 */
.dark .border-t { border-top-color: rgba(100,116,139,0.15); }
.dark .border-b { border-bottom-color: rgba(100,116,139,0.15); }
.dark .border-gray-100 { border-color: rgba(100,116,139,0.12); }
.dark .border-gray-200 { border-color: rgba(100,116,139,0.15); }

/* 标签色系适配 */
.dark .bg-primary-50 { background: rgba(217,119,6,0.1); }
.dark .bg-red-50 { background: rgba(239,68,68,0.1); }
.dark .bg-amber-50 { background: rgba(245,158,11,0.1); }
.dark .bg-blue-50 { background: rgba(59,130,246,0.1); }
.dark .bg-purple-50 { background: rgba(168,85,247,0.1); }
.dark .bg-teal-50 { background: rgba(20,184,166,0.1); }
.dark .bg-surf-50 { background: rgba(16,185,129,0.1); }
.dark .bg-indigo-50 { background: rgba(99,102,241,0.1); }
.dark .bg-green-100 { background: rgba(16,185,129,0.15); }

/* 悬浮返回按钮 */
.dark #floatingReturnBtn { color: #fff; }
.dark #aiReturnBtn { background: rgba(30,41,59,0.95); border-color: rgba(100,116,139,0.15); }

/* 粒子背景 */
.dark #particles { opacity: 0.3; }

/* AI 边框动画 */
.dark .ai-border {
  --border-color-start: rgba(217,119,6,0.4);
  --border-color-end: rgba(244,63,94,0.4);
}

/* 套餐卡片 */
.dark .package-card:hover {
  background: rgba(30,41,59,0.95);
  border-color: rgba(217,119,6,0.3);
}

/* 评论/探店笔记区域 */
.dark #aiReviewSection { background: linear-gradient(to bottom right, #1e293b, #0f172a, #1e293b); }
.dark #aiReviewSection .text-gray-700 { color: #cbd5e1; }
.dark #aiReviewSection .text-gray-600 { color: #94a3b8; }

/* Scrollbar */
.dark ::-webkit-scrollbar-track { background: #1e293b; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }
.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Tab 导航 */
.dark .nav-tab { color: #94a3b8; }
.dark .nav-tab:hover { color: #f59e0b; background: rgba(217,119,6,0.08); }
.dark .nav-tab.active { color: #f59e0b; border-bottom-color: #f59e0b; }

/* 地图/定位相关 */
.dark #locationOverlay > div { background: #1e293b; color: #e2e8f0; }
.dark .map-container, .dark .map-placeholder { background: #1e293b; }

/* ========== 无障碍 ========== */
/* 焦点环 */
*:focus-visible {
  outline: 2px solid #d97706 !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* 仅对键盘用户显示跳过导航 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}
.focus\:not-sr-only:focus {
  position: static;
  width: auto; height: auto;
  padding: 0; margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}