/* ============================================
   点菜APP v2 - 温暖手账风（暖色调 + 手绘感 + 治愈）
   ============================================ */

/* --- CSS 变量 --- */
:root {
  --primary: #E8913A;
  --primary-dark: #D47A2A;
  --primary-light: #FFF5E6;
  --bg: #FFF9F0;
  --card-bg: #FFFFFF;
  --text: #4A3F35;
  --text-light: #9E8E7E;
  --border: #F0E0CC;
  --success: #6BAF5E;
  --danger: #E07060;
  --shadow: 3px 3px 0px rgba(200, 160, 100, 0.2);
  --shadow-hover: 4px 4px 0px rgba(200, 160, 100, 0.35);
  --radius: 18px;
  --radius-sm: 14px;
  --max-width: 480px;
  --font: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: #FDF5E6 url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23F0E0CC' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  color: var(--text);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  line-height: 1.6;
}

/* 手机容器 */
.app-container {
  width: 100%;
  max-width: var(--max-width);
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  overflow-x: hidden;
}

/* --- 顶部导航栏（手账风） --- */
.app-header {
  background: linear-gradient(135deg, #F5D0A0 0%, #F0C080 50%, #E8B060 100%);
  color: #5A4030;
  padding: 20px 20px 16px;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 3px dashed #E0C090;
}

.app-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
}

.app-header .header-sub {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-top: 4px;
}

/* 管理页面头部 */
.header-admin {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(135deg, #7A6A5A 0%, #9A8A7A 100%);
  color: #FFF8F0;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px dashed #B0A090;
}

.header-admin h1 {
  font-size: 1.2rem;
}

.header-admin .tab-nav {
  display: flex;
  gap: 6px;
}

.header-admin .tab-btn {
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.8);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font);
}

.header-admin .tab-btn.active {
  background: rgba(255,255,255,0.3);
  color: #fff;
  font-weight: 600;
  border-color: rgba(255,255,255,0.4);
}

/* --- 主体内容区 --- */
.content {
  padding: 16px 16px 100px;
}

/* --- 分类标签栏 --- */
.category-tabs {
  display: flex;
  overflow-x: auto;
  padding: 12px 16px 8px;
  gap: 8px;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 90;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.category-tabs::-webkit-scrollbar {
  display: none;
}

.category-tab {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 0.78rem;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font);
  color: var(--text-light);
  font-weight: 600;
  box-shadow: 1px 1px 0px rgba(200, 160, 100, 0.15);
  flex-shrink: 0;
}

.category-tab:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
  transform: translateY(-1px);
}

.category-tab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 2px 2px 0px rgba(200, 130, 50, 0.3);
}

/* --- 点单次数角标（我爱吃的） --- */
.order-count-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: var(--primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  box-shadow: 1px 1px 0px rgba(200, 140, 60, 0.3);
}

/* --- 菜品卡片网格 --- */
.dish-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 4px 0;
}

.dish-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid var(--border);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  /* 冰箱贴立体感：多层阴影模拟厚度 + 边缘高光 */
  box-shadow:
    /* 左上边缘高光（纸张厚度） */
    inset 1px 1px 0px rgba(255, 255, 255, 0.8),
    inset 2px 2px 0px rgba(255, 255, 255, 0.5),
    /* 右下厚度层叠 */
    1px 1px 0px rgba(200, 180, 160, 0.4),
    2px 2px 0px rgba(200, 180, 160, 0.35),
    3px 3px 0px rgba(200, 180, 160, 0.3),
    4px 4px 0px rgba(200, 180, 160, 0.25),
    5px 5px 0px rgba(200, 180, 160, 0.2),
    6px 6px 0px rgba(200, 180, 160, 0.15),
    /* 地面投影 */
    8px 10px 20px rgba(0, 0, 0, 0.1);
}

/* 未选中时的过渡效果 - 只过渡非 transform 属性 */
.dish-card {
  transition: box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.dish-card:hover {
  transform: translateY(-6px) rotate(-2deg);
  box-shadow:
    inset 1px 1px 0px rgba(255, 255, 255, 0.9),
    inset 2px 2px 0px rgba(255, 255, 255, 0.6),
    1px 1px 0px rgba(200, 180, 160, 0.5),
    2px 2px 0px rgba(200, 180, 160, 0.45),
    3px 3px 0px rgba(200, 180, 160, 0.4),
    4px 4px 0px rgba(200, 180, 160, 0.35),
    5px 5px 0px rgba(200, 180, 160, 0.3),
    6px 6px 0px rgba(200, 180, 160, 0.25),
    10px 14px 24px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.dish-card:active {
  transform: scale(0.97) rotate(0deg);
}

/* 选中状态：贴纸晃动 + 钉子钉入 + 翘边 */
.dish-card.selected {
  border-color: var(--primary);
  background: var(--primary-light);
  /* 选中时右上方翘起，阴影偏移更大 */
  box-shadow:
    inset 1px 1px 0px rgba(255, 255, 255, 0.7),
    inset 2px 2px 0px rgba(255, 255, 255, 0.4),
    2px 2px 0px rgba(232, 145, 58, 0.35),
    4px 4px 0px rgba(232, 145, 58, 0.3),
    6px 6px 0px rgba(232, 145, 58, 0.25),
    8px 8px 0px rgba(232, 145, 58, 0.2),
    10px 10px 0px rgba(232, 145, 58, 0.15),
    12px 14px 24px rgba(0, 0, 0, 0.12);
  animation: stickerWiggle 0.6s ease forwards;
}

/* 选中后右下边缘卷曲效果 */
.dish-card.selected::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, transparent 50%, rgba(232, 145, 58, 0.15) 50%, rgba(200, 160, 100, 0.3) 100%);
  border-radius: 0 0 0 18px;
  box-shadow: -2px -2px 4px rgba(0,0,0,0.05);
  pointer-events: none;
  z-index: 5;
}

/* 选中后右下边缘翻起的纸片效果 */
.dish-card.selected::before {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, transparent 45%, rgba(255, 240, 220, 0.9) 45%, rgba(240, 220, 190, 0.8) 100%);
  border-radius: 0 0 0 14px;
  box-shadow: -1px -1px 3px rgba(0,0,0,0.08);
  pointer-events: none;
  z-index: 6;
}

/* 贴纸晃动效果 */
@keyframes stickerWiggle {
  0% { transform: rotate(0deg) scale(1); }
  12% { transform: rotate(-6deg) scale(1.04); }
  24% { transform: rotate(5deg) scale(1.04); }
  36% { transform: rotate(-4deg) scale(1.03); }
  48% { transform: rotate(3deg) scale(1.03); }
  60% { transform: rotate(-2deg) scale(1.02); }
  72% { transform: rotate(1deg) scale(1.02); }
  84% { transform: rotate(-0.5deg) scale(1.01); }
  100% { transform: rotate(1deg) scale(1.01); }
}

/* 取消选中：纸张回落 */
.dish-card.unselecting {
  animation: stickerSettle 0.4s ease forwards;
}

@keyframes stickerSettle {
  0% { transform: rotate(1deg) scale(1.01); }
  30% { transform: rotate(-2deg) scale(1.02); }
  60% { transform: rotate(1deg) scale(1.01); }
  100% { transform: rotate(0deg) scale(1); }
}

/* 钉子图标 */
.dish-card .nail {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 35% 35%, #D4B896, #9A7B5B);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25), inset -1px -1px 2px rgba(0,0,0,0.15);
  opacity: 0;
  z-index: 10;
  pointer-events: none;
}

.dish-card .nail::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  background: radial-gradient(circle at 30% 30%, #E8D8C0, #B09878);
  border-radius: 50%;
}

/* 钉子钉入 - 从上方掉落，所有卡片统一速度 */
.dish-card .nail.nail-in {
  animation: nailDrop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes nailDrop {
  0% { transform: translateX(-50%) translateY(-30px) scale(1.8); opacity: 0; }
  50% { transform: translateX(-50%) translateY(3px) scale(0.85); opacity: 1; }
  75% { transform: translateX(-50%) translateY(-1px) scale(1.05); opacity: 1; }
  100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}

/* 钉子拔出 - 向上飞走 */
.dish-card .nail.nail-out {
  animation: nailPull 0.3s ease forwards;
}

@keyframes nailPull {
  0% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
  40% { transform: translateX(-50%) translateY(-5px) scale(1.2); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-35px) scale(0.3); opacity: 0; }
}

.dish-card .dish-img {
  width: 100%;
  height: 120px;
  background: linear-gradient(135deg, #FFF0E0 0%, #FFE8D0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border-bottom: 2px dashed var(--border);
}

.dish-card .dish-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dish-card .dish-img .placeholder-icon {
  font-size: 2.6rem;
  opacity: 0.6;
}

.dish-card .dish-name {
  padding: 10px 12px 4px;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  color: var(--text);
}

.dish-card .dish-rating {
  padding: 0 12px 10px;
  font-size: 0.78rem;
  text-align: center;
  color: #D4A030;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.dish-card .dish-rating .rating-num {
  font-weight: 700;
  color: var(--text-light);
  margin-left: 4px;
}

/* 选中勾勾 */
.dish-card .check-mark {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dish-card.selected .check-mark {
  opacity: 1;
  transform: scale(1);
}

/* 已选数量角标 */
.dish-card .selected-count {
  position: absolute;
  top: -8px;
  left: -8px;
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0px rgba(200, 140, 60, 0.4);
  border: 2px solid #fff;
}

/* --- 已选菜品预览条 --- */
.selected-bar {
  background: #FFF8F0;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 2px dashed #E0C090;
  box-shadow: 2px 2px 0px rgba(200, 160, 100, 0.15);
}

.selected-bar .bar-title {
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.selected-bar .bar-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selected-bar .bar-tag {
  background: #fff;
  border: 2px solid var(--primary);
  color: var(--primary-dark);
  padding: 5px 12px;
  border-radius: 18px;
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 1px 1px 0px rgba(200, 140, 60, 0.2);
}

.selected-bar .bar-tag .tag-remove {
  cursor: pointer;
  opacity: 0.5;
  font-size: 1rem;
  margin-left: 2px;
}

.selected-bar .bar-tag .tag-remove:hover {
  opacity: 1;
}

/* --- 表单区域 --- */
.form-section {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 18px;
  margin-top: 16px;
  box-shadow: var(--shadow);
  border: 2px solid var(--border);
}

.form-section label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 10px;
  color: var(--text);
}

.form-section textarea {
  width: 100%;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 0.95rem;
  font-family: var(--font);
  resize: vertical;
  min-height: 70px;
  background: #FFFDF8;
  transition: border-color 0.2s;
}

.form-section textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
}

.form-section select {
  width: 100%;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.95rem;
  font-family: var(--font);
  background: #FFFDF8;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239E8E7E' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.form-section select:focus {
  outline: none;
  border-color: var(--primary);
}

/* --- 按钮 --- */
.btn {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 30px;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  letter-spacing: 1px;
}

.btn-primary {
  background: linear-gradient(135deg, #E8913A 0%, #F0A050 100%);
  color: #fff;
  box-shadow: 3px 3px 0px rgba(200, 130, 50, 0.3);
}

.btn-primary:active {
  transform: translateY(2px);
  box-shadow: 1px 1px 0px rgba(200, 130, 50, 0.3);
}

.btn-primary:disabled {
  background: #DDD;
  color: #999;
  box-shadow: none;
  cursor: not-allowed;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 0.85rem;
  border-radius: 20px;
  width: auto;
  display: inline-block;
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-submit-wrap {
  padding: 16px;
  position: sticky;
  bottom: 0;
  background: var(--bg);
  border-top: 2px dashed var(--border);
  z-index: 50;
}

/* --- Toast 提示 --- */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-120px);
  background: #5A4A3A;
  color: #FFF8F0;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 9999;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 6px 24px rgba(0,0,0,0.2);
  max-width: 90vw;
  text-align: center;
  white-space: nowrap;
}

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

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

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

/* --- 密码门 --- */
.password-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 20px;
}

.password-gate .gate-icon {
  font-size: 3.5rem;
  margin-bottom: 16px;
}

.password-gate h2 {
  font-size: 1.2rem;
  margin-bottom: 24px;
  color: var(--text-light);
}

.password-gate input {
  width: 100%;
  max-width: 300px;
  border: 2px solid var(--border);
  border-radius: 30px;
  padding: 12px 20px;
  font-size: 1rem;
  text-align: center;
  font-family: var(--font);
  margin-bottom: 16px;
  letter-spacing: 2px;
  background: #FFFDF8;
}

.password-gate input:focus {
  outline: none;
  border-color: var(--primary);
}

.password-gate .gate-btn {
  width: 200px;
}

.password-gate .gate-error {
  color: var(--danger);
  font-size: 0.85rem;
  margin-top: 10px;
  min-height: 20px;
}

/* --- 订单卡片 --- */
.order-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all 0.25s ease;
  border: 2px solid var(--border);
}

.order-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px) rotate(-0.5deg);
}

.order-card:active {
  transform: scale(0.98);
}

.order-card .order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}

.order-card .order-card-date {
  font-weight: 700;
  font-size: 1rem;
  color: var(--primary-dark);
}

.order-card .order-card-badge {
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid #F0D0A0;
}

.order-card .order-card-dishes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.order-card .order-card-dish-tag {
  background: #FFF8F0;
  border: 1px solid #F0D0A0;
  color: var(--text);
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

.order-card .order-card-dish-tag .tag-emoji {
  font-size: 1rem;
}

.order-card .order-card-meta {
  margin-top: 10px;
  font-size: 0.75rem;
  color: #BBB;
}

/* --- 订单详情页 --- */
.order-detail-page {
  animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

.order-detail-header {
  background: linear-gradient(135deg, #F5D0A0 0%, #E8C090 100%);
  color: #5A4030;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 3px dashed #D0B080;
}

.order-detail-header .back-btn {
  background: rgba(255,255,255,0.3);
  border: 2px solid rgba(255,255,255,0.4);
  color: #5A4030;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.2s;
}

.order-detail-header .back-btn:hover {
  background: rgba(255,255,255,0.5);
}

.order-detail-header .detail-title {
  font-size: 1.1rem;
  font-weight: 700;
}

/* 订单中的菜品列表 */
.order-dish-list {
  padding: 16px;
}

.order-dish-item {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  border: 2px solid var(--border);
}

.order-dish-item .dish-item-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.order-dish-item .dish-item-emoji {
  font-size: 2.2rem;
}

.order-dish-item .dish-item-name {
  font-weight: 700;
  font-size: 1.05rem;
  flex: 1;
}

.order-dish-item .dish-item-taste {
  font-size: 0.82rem;
  color: var(--text-light);
  background: #FFF8F0;
  padding: 4px 12px;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 10px;
  border: 1px dashed #E0D0C0;
}

.order-dish-item .dish-item-taste:empty {
  display: none;
}

/* 评价区域 */
.review-area {
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  margin-top: 8px;
}

.review-area .review-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: 6px;
}

.review-area .review-stars-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.review-area .review-star-btn {
  font-size: 1.8rem;
  color: #E0D8D0;
  cursor: pointer;
  transition: all 0.15s;
  background: none;
  border: none;
  padding: 0 2px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.review-area .review-star-btn:hover {
  color: #F0C860;
  transform: scale(1.2);
  text-shadow: 0 0 8px rgba(240, 200, 96, 0.4);
}

.review-area .review-star-btn.active {
  color: #E8A030;
  transform: scale(1.15);
  text-shadow: 0 0 12px rgba(232, 160, 48, 0.5), 0 2px 4px rgba(0,0,0,0.15);
}

.review-area .review-star-btn:active {
  transform: scale(0.85);
}

.review-area .review-comment-input {
  width: 100%;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.88rem;
  font-family: var(--font);
  resize: vertical;
  min-height: 50px;
  background: #FFFDF8;
  transition: border-color 0.2s;
}

.review-area .review-comment-input:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
}

.review-area .review-submit-btn {
  margin-top: 8px;
  padding: 8px 20px;
  font-size: 0.85rem;
}

/* 已评价展示 */
.review-done {
  background: linear-gradient(135deg, #E8F5E0 0%, #F0F8E8 100%);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: 8px;
  border: 1px dashed #A0D080;
}

.review-done .review-done-stars {
  color: #D4A030;
  font-size: 1rem;
}

.review-done .review-done-text {
  font-size: 0.85rem;
  color: var(--text);
  margin-top: 4px;
}

.review-done .review-done-time {
  font-size: 0.72rem;
  color: #999;
  margin-top: 2px;
}

/* --- 菜单管理 --- */
.menu-admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.menu-admin-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 2px solid var(--border);
}

.menu-admin-card .dish-img {
  width: 100%;
  height: 110px;
  background: linear-gradient(135deg, #FFF0E0 0%, #FFE8D0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-bottom: 2px dashed var(--border);
}

.menu-admin-card .dish-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-admin-card .dish-img .upload-hint {
  position: absolute;
  bottom: 4px;
  right: 6px;
  background: rgba(90, 70, 50, 0.7);
  color: #fff;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.2s;
}

.menu-admin-card .dish-img:hover .upload-hint {
  opacity: 1;
}

.menu-admin-card .dish-info {
  padding: 8px 10px;
}

.menu-admin-card .dish-name-input {
  width: 100%;
  border: none;
  background: transparent;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  font-family: var(--font);
  color: var(--text);
  padding: 4px;
}

.menu-admin-card .dish-name-input:focus {
  outline: none;
  border-bottom: 2px solid var(--primary);
}

.menu-admin-card .card-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 6px 10px 10px;
}

.menu-admin-card .card-actions button {
  padding: 5px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
}

.menu-admin-card .card-actions button:active {
  background: #F5F5F5;
}

/* 添加新菜按钮 */
.add-dish-card {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  cursor: pointer;
  transition: all 0.25s ease;
  background: #FFFDF8;
}

.add-dish-card:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-3px) rotate(-1deg);
}

.add-dish-card:active {
  transform: scale(0.97);
}

.add-dish-card .add-icon {
  font-size: 2.2rem;
  color: #CCC;
  transition: all 0.3s ease;
}

.add-dish-card:hover .add-icon {
  color: var(--primary);
  transform: rotate(90deg);
}

.add-dish-card .add-text {
  font-size: 0.85rem;
  color: #AAA;
  margin-top: 6px;
}

/* --- 设置区域 --- */
.settings-section {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
  border: 2px solid var(--border);
}

.settings-section h3 {
  font-size: 1rem;
  margin-bottom: 14px;
  color: var(--primary-dark);
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}

.settings-section .field {
  margin-bottom: 14px;
}

.settings-section .field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--text-light);
}

.settings-section .field input[type="text"],
.settings-section .field input[type="password"] {
  width: 100%;
  border: 2px solid var(--border);
  border-radius: 22px;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-family: var(--font);
  background: #FFFDF8;
}

.settings-section .field input:focus {
  outline: none;
  border-color: var(--primary);
}

/* --- 二维码 --- */
.qr-container {
  text-align: center;
  padding: 16px;
}

.qr-container img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 200px;
  border: 2px solid var(--border);
}

.qr-container .qr-url {
  font-size: 0.75rem;
  color: var(--text-light);
  margin-top: 10px;
  word-break: break-all;
}

/* --- 文件上传隐藏 --- */
.hidden-file-input {
  display: none;
}

/* --- 评分星星 --- */
.star-rating {
  display: inline-flex;
  gap: 2px;
  cursor: pointer;
}

.star-rating .star {
  font-size: 1.4rem;
  color: #DDD;
  transition: color 0.15s;
}

.star-rating .star.active {
  color: #E8B030;
}

/* --- 空状态 --- */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #CCC;
}

.empty-state .empty-icon {
  font-size: 3.5rem;
  margin-bottom: 12px;
}

.empty-state .empty-text {
  font-size: 0.9rem;
}

/* --- 模态弹窗 --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(80, 60, 40, 0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-box {
  background: #FFFBF5;
  border-radius: var(--radius);
  padding: 24px;
  width: 100%;
  max-width: 380px;
  box-shadow: 4px 4px 0px rgba(180, 150, 100, 0.3);
  border: 2px solid var(--border);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-box h3 {
  margin-bottom: 16px;
  text-align: center;
  color: var(--text);
}

.modal-box .rating-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
}

.modal-box .rating-stars .star {
  font-size: 2rem;
  cursor: pointer;
  color: #DDD;
  transition: color 0.15s;
}

.modal-box .rating-stars .star.active {
  color: #E8B030;
}

.modal-box textarea {
  width: 100%;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  font-family: var(--font);
  font-size: 0.9rem;
  resize: vertical;
  min-height: 60px;
  margin-bottom: 14px;
  background: #FFFDF8;
}

.modal-box .modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* --- 历史评价展示 --- */
.reviews-list {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.review-item {
  font-size: 0.78rem;
  color: var(--text-light);
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.review-item .review-stars {
  color: #E8B030;
  font-size: 0.8rem;
}

/* --- 响应式微调 --- */
@media (min-width: 481px) {
  .app-container {
    border-radius: 20px;
    margin: 20px 0;
    min-height: calc(100vh - 40px);
    border: 3px solid var(--border);
  }
}

/* 打印二维码样式 */
@media print {
  body { background: #fff; }
  .app-container { box-shadow: none; max-width: 100%; border: none; }
}

/* --- 提交成功庆祝动画 --- */
.celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  display: none;
}

.celebration-overlay.active {
  display: block;
}

.celebration-overlay .confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  top: -10px;
  animation: confettiFall 2.5s ease-out forwards;
}

@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* 成功弹窗 */
.success-modal {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(80, 60, 40, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

.success-modal.active {
  display: flex;
}

.success-modal .success-box {
  background: #FFFBF5;
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  max-width: 300px;
  width: 100%;
  box-shadow: 4px 4px 0px rgba(180, 150, 100, 0.3);
  border: 2px solid var(--border);
  animation: successPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes successPop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.success-modal .success-icon {
  font-size: 4rem;
  animation: successIconBounce 0.6s ease 0.2s both;
}

@keyframes successIconBounce {
  0% { transform: scale(0); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.success-modal .success-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--success);
  margin-top: 12px;
}

.success-modal .success-sub {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-top: 6px;
}

.success-modal .success-btn {
  margin-top: 20px;
}

/* --- 我的订单列表（点菜界面用） --- */
.my-orders-list {
  max-height: 60vh;
  overflow-y: auto;
}

.my-order-item {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 10px;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
}

.my-order-item:hover {
  border-color: var(--primary);
  transform: translateX(4px);
}

.my-order-item .my-order-date {
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 0.95rem;
}

.my-order-item .my-order-dishes {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-top: 4px;
}

.my-order-item .my-order-status {
  font-size: 0.72rem;
  margin-top: 6px;
}

.my-order-item .my-order-status.reviewed {
  color: var(--success);
}

.my-order-item .my-order-status.pending {
  color: var(--primary);
}