/* ========== 全局重置 ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

:root {
  --primary: #FF5722;
  --primary-light: #FF8A65;
  --primary-dark: #E64A19;
  --primary-bg: #FFF3EE;
  --success: #4CAF50;
  --warning: #FF9800;
  --danger: #F44336;
  --info: #2196F3;
  --text-main: #333333;
  --text-secondary: #666666;
  --text-hint: #999999;
  --bg-page: #F5F5F5;
  --bg-card: #FFFFFF;
  --border: #EEEEEE;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-strong: 0 4px 20px rgba(0, 0, 0, 0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
}

body {
  background: linear-gradient(135deg, #f0f0f5 0%, #e8e8f0 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px 0;
}

/* ========== 手机外框 ========== */
#phone-frame {
  width: 390px;
  height: 844px;
  background: var(--bg-page);
  border-radius: 40px;
  box-shadow: 0 0 0 12px #1a1a1a, 0 0 0 14px #333, 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 状态栏 */
.status-bar {
  height: 36px;
  background: #FFFFFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  flex-shrink: 0;
  position: relative;
  z-index: 100;
}

.status-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 28px;
  background: #1a1a1a;
  border-radius: 0 0 18px 18px;
}

.status-time {
  position: relative;
  z-index: 1;
}

.status-icons {
  position: relative;
  z-index: 1;
  font-size: 12px;
}

/* ========== App容器 ========== */
#app {
  flex: 1;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
  contain: layout paint;
  /* 关键：固定一个 stacking context + 阻止子元素撑大 scrollWidth */
}

/* ========== 页面通用 ========== */
.page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.3s ease, opacity 0.3s ease;
  background: var(--bg-page);
  /* 关键：contain: paint 防止子元素 paint 溢出 + overflow: hidden 防止子元素撑大 */
  overflow: hidden;
  contain: paint;
  will-change: transform;
}

.page.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  z-index: 1;
}

/* 页面头部 */
.page-header {
  background: #FFFFFF;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 48px;
}

.home-header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  flex-direction: column;
  padding: 16px;
  border-bottom: none;
}

.app-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-icon {
  font-size: 28px;
}

.logo-text {
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
}

.header-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  margin-top: 4px;
}

.header-back {
  font-size: 20px;
  cursor: pointer;
  color: var(--text-main);
  width: 28px;
  text-align: center;
}

.header-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-main);
  flex: 1;
}

/* 页面内容区 */
.page-body {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
}

.page-body::-webkit-scrollbar {
  display: none;
}

/* ========== 首页 ========== */
/* 平台入口 */
.platform-grid {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.platform-card {
  flex: 1;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
  box-shadow: var(--shadow);
}

.platform-card:active {
  transform: scale(0.96);
}

.platform-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 8px;
  border: 2px solid;
}

.platform-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.platform-tag {
  font-size: 11px;
  color: var(--text-hint);
  margin-top: 2px;
}

/* 链接输入 */
.link-input-section {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.section-more {
  margin-left: auto;
  font-size: 13px;
  color: var(--primary);
  font-weight: 400;
  cursor: pointer;
}

.link-input-box {
  display: flex;
  gap: 8px;
  align-items: center;
}

.link-input-box input {
  flex: 1;
  height: 40px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  font-size: 13px;
  background: var(--bg-page);
  color: var(--text-secondary);
  cursor: pointer;
}

.link-input-box {
  position: relative;
  display: flex;
  align-items: center;
}

.btn-link-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #E0E0E0;
  color: #666;
  border: none;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  z-index: 2;
}

.btn-link-clear:active {
  background: #BDBDBD;
}

.link-input-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.btn-link-action {
  flex: 1;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-link-action.primary {
  background: var(--primary);
  color: #FFFFFF;
}

.btn-link-action.primary:active {
  background: var(--primary-dark);
  transform: scale(0.98);
}

.btn-link-action.secondary {
  background: var(--bg-page);
  color: var(--text-main);
  border: 1px solid var(--border);
}

.btn-link-action.secondary:active {
  background: #F0F0F0;
  transform: scale(0.98);
}

.match-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px;
  vertical-align: middle;
}

.match-badge.exact {
  background: #E8F5E9;
  color: #2E7D32;
}

.match-badge.platform {
  background: #E3F2FD;
  color: #1565C0;
}

.match-badge.keyword {
  background: #FFF3E0;
  color: #E65100;
}

.match-badge.shortlink {
  background: #F3E5F5;
  color: #6A1B9A;
}

.link-preview-product,
.link-preview-product-sub,
.link-preview-match {
  /* 样式已迁移至下方 link-preview 组件块（避免与 .link-preview 分离） */
  font-size: 0;
  margin: 0;
  line-height: 0;
}

.link-preview-match b {
  color: var(--primary);
}

.link-preview.match-exact {
  border-left: 3px solid #2E7D32;
}

.link-preview.match-platform {
  border-left: 3px solid #1565C0;
}

.link-preview.match-keyword {
  border-left: 3px solid #E65100;
}

.link-preview.match-shortlink {
  border-left: 3px solid #6A1B9A;
}

/* 预选菜品样式 */
.menu-item.pre-selected {
  background: linear-gradient(135deg, #FFF8E1 0%, #FFFEF7 100%);
  border: 1.5px solid #FFC107;
  animation: preSelectPulse 0.6s ease;
}

.pre-select-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px;
  background: linear-gradient(135deg, #FFC107, #FF9800);
  color: #fff;
  vertical-align: middle;
}

.virtual-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px;
  background: #F3E5F5;
  color: #6A1B9A;
  vertical-align: middle;
  border: 1px dashed #9C27B0;
}

@keyframes preSelectPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.6); }
  50% { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(255, 193, 7, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

.highlight-flash {
  animation: highlightFlashAnim 2.5s ease;
}

@keyframes highlightFlashAnim {
  0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
  20% { box-shadow: 0 0 0 6px rgba(255, 193, 7, 0.5); }
  60% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0.2); }
  100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

.link-hint {
  font-size: 12px;
  color: var(--text-hint);
  margin-top: 8px;
}

/* 省钱数据 */
.stats-section {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.stat-card {
  flex: 1;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px 8px;
  text-align: center;
  box-shadow: var(--shadow);
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
}

.stat-label {
  font-size: 11px;
  color: var(--text-hint);
  margin-top: 4px;
}

/* 餐厅列表 */
.restaurant-section {
  margin-bottom: 16px;
}

.restaurant-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.restaurant-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: all 0.2s;
}

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

.restaurant-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

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

.restaurant-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.restaurant-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.rating {
  color: var(--warning);
  font-weight: 600;
}

.platform-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.restaurant-tags {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--primary-bg);
  color: var(--primary);
}

.restaurant-arrow {
  color: var(--text-hint);
  font-size: 18px;
}

/* 裂变Banner */
.referral-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  margin-bottom: 20px;
}

.referral-banner-content {
  flex: 1;
}

.referral-banner-title {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
}

.referral-banner-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 4px;
}

.referral-banner-arrow {
  font-size: 20px;
  color: #FFFFFF;
}

/* ========== 餐厅列表页 ========== */
.platform-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

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

.platform-tab {
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--bg-card);
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid transparent;
  box-shadow: var(--shadow);
  transition: all 0.2s;
}

.platform-tab.active {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
}

/* ========== 菜单页 ========== */
.restaurant-info-bar {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}

.restaurant-info-bar .restaurant-name {
  font-size: 17px;
}

.restaurant-info-bar .restaurant-meta {
  margin-top: 6px;
}

.menu-list {
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 80px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

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

.menu-item-img {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

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

.menu-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.menu-item-name .hot-badge {
  font-size: 10px;
  background: var(--danger);
  color: #FFFFFF;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
}

.menu-item-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  margin-top: 4px;
}

.menu-item-price::before {
  content: '¥';
  font-size: 12px;
}

.menu-item-action {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 300;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}

.menu-item-action:active {
  transform: scale(0.9);
}

.menu-item-action.added {
  background: var(--success);
}

.menu-item-qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qty-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--primary);
  background: #FFFFFF;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
}

.qty-num {
  font-size: 14px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

/* 购物车栏 */
.cart-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-top: 1px solid var(--border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 50;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}

.cart-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-count {
  background: var(--danger);
  color: #FFFFFF;
  font-size: 12px;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.cart-total {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
}

.cart-total::before {
  content: '¥';
  font-size: 14px;
}

.btn-coudan {
  background: var(--primary);
  color: #FFFFFF;
  border: none;
  border-radius: 24px;
  padding: 0 28px;
  height: 44px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-coudan:disabled {
  background: #CCCCCC;
}

.btn-coudan:not(:disabled):active {
  background: var(--primary-dark);
}

/* ========== 凑单结果页 ========== */
.result-hero {
  background: linear-gradient(135deg, var(--success) 0%, #45a049 100%);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
  color: #FFFFFF;
}

.result-hero-title {
  font-size: 14px;
  opacity: 0.9;
}

.result-hero-saved {
  font-size: 36px;
  font-weight: 700;
  margin: 8px 0;
}

.result-hero-saved::before {
  content: '省了 ¥';
  font-size: 16px;
}

.result-hero-desc {
  font-size: 13px;
  opacity: 0.9;
}

/* 价格对比 */
.price-compare {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.compare-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.compare-row:last-child {
  border-bottom: none;
}

.compare-label {
  font-size: 14px;
  color: var(--text-secondary);
}

.compare-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
}

.compare-value.highlight {
  color: var(--success);
  font-size: 20px;
}

.compare-value.strike {
  text-decoration: line-through;
  color: var(--text-hint);
}

.compare-value.commission {
  color: var(--text-hint);
  font-size: 13px;
  font-weight: 400;
}

/* 方案列表 */
.plan-list {
  margin-bottom: 16px;
}

.plan-card-result {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}

.plan-card-result.best {
  border-color: var(--success);
  background: #F1F8E9;
}

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

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.plan-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}

.best-tag {
  background: var(--success);
  color: #FFFFFF;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
}

.plan-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
}

.plan-price::before {
  content: '¥';
  font-size: 14px;
}

.plan-items {
  margin: 8px 0;
}

.plan-item-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 4px 0;
}

.plan-item-row.added {
  color: var(--success);
  font-weight: 500;
}

.plan-coupons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.coupon-tag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--primary-bg);
  color: var(--primary);
}

.coupon-tag.discount {
  background: #E8F5E9;
  color: var(--success);
}

/* 下单按钮 */
.btn-order {
  width: 100%;
  background: var(--primary);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius);
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 20px;
}

.btn-order:active {
  background: var(--primary-dark);
}

/* ========== 订阅页 ========== */
.subscribe-hero {
  text-align: center;
  padding: 24px 16px;
}

.subscribe-hero-icon {
  font-size: 48px;
}

.subscribe-hero-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  margin-top: 8px;
}

.subscribe-hero-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.subscribe-features {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

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

.feature-icon {
  font-size: 24px;
  width: 40px;
  text-align: center;
}

.feature-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.feature-desc {
  font-size: 12px;
  color: var(--text-hint);
  margin-top: 2px;
}

/* 套餐选择 */
.subscribe-plans {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.plan-card {
  flex: 1;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 20px 12px;
  text-align: center;
  border: 2px solid var(--border);
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

.plan-card.plan-recommended {
  border-color: var(--primary);
  background: var(--primary-bg);
}

.plan-badge {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.plan-badge-hot {
  color: var(--primary);
  font-weight: 600;
}

.hot-tag {
  background: var(--primary);
  color: #FFFFFF;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  margin-left: 4px;
}

.plan-price {
  margin: 8px 0;
}

.plan-price-symbol {
  font-size: 14px;
  color: var(--text-main);
  font-weight: 600;
}

.plan-price-num {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-main);
}

.plan-recommended .plan-price-num {
  color: var(--primary);
}

.plan-price-unit {
  font-size: 13px;
  color: var(--text-hint);
}

.plan-desc {
  font-size: 12px;
  color: var(--text-hint);
}

.plan-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto 0;
  font-size: 12px;
  color: transparent;
}

.plan-check-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
}

/* 订阅说明 */
.subscribe-note {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.note-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
}

.note-item {
  font-size: 12px;
  color: var(--text-hint);
  line-height: 1.8;
}

/* 订阅按钮 */
.subscribe-btn-area {
  padding: 0 0 20px;
}

.btn-subscribe {
  width: 100%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius);
  padding: 16px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 87, 34, 0.3);
}

.btn-subscribe:active {
  opacity: 0.9;
}

/* ========== 裂变中心 ========== */
.referral-hero {
  text-align: center;
  padding: 28px 16px 20px;
}

.referral-hero-icon {
  font-size: 48px;
}

.referral-hero-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  margin-top: 8px;
}

.referral-hero-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.6;
}

/* 进度条 */
.referral-progress-section {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 20px 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 16px;
}

.progress-count b {
  color: var(--primary);
  font-size: 18px;
}

.progress-bar-container {
  position: relative;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  margin-bottom: 24px;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.progress-nodes {
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  transform: translateY(0);
}

.progress-node {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-hint);
  transition: all 0.3s;
}

.progress-node.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
}

.progress-reward {
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}

.progress-reward b {
  color: var(--primary);
}

/* 邀请码 */
.invite-code-section {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.invite-code-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--primary-bg);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.invite-code {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 2px;
}

.btn-copy {
  background: var(--primary);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.invite-link-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.invite-link-label {
  font-size: 13px;
  color: var(--text-hint);
  flex-shrink: 0;
}

.invite-link {
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-buttons {
  display: flex;
  gap: 8px;
}

.btn-share {
  flex: 1;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: #FFFFFF;
}

.btn-wechat {
  background: #07C160;
}

.btn-qq {
  background: #12B7F5;
}

.btn-link {
  background: var(--text-secondary);
}

/* 推荐记录 */
.referral-records {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.records-empty {
  text-align: center;
  padding: 20px 0;
  color: var(--text-hint);
}

.records-empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

/* ========== 管理员后台 ========== */
.admin-section {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}

.admin-section .section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-main);
}

.admin-badge {
  display: inline-block;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--warning);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 20px;
  margin-left: auto;
}

.admin-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 12px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.switch input { display: none; }
.slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.2s;
}
.slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider::before { transform: translateX(20px); }

.admin-qr-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.admin-qr-row:last-of-type { border-bottom: 0; }

.admin-qr-plan-group {
  margin-top: 14px;
  padding: 12px;
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}
.admin-qr-plan-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.admin-qr-label {
  width: 80px;
  font-size: 13px;
  color: var(--text-secondary);
  padding-top: 16px;
  flex-shrink: 0;
}

.admin-qr-uploader {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-qr-preview {
  width: 100%;
  height: 140px;
  padding: 8px;
  background: var(--bg-page);
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: 0.2s;
  font: inherit;
  color: inherit;
}
.admin-qr-preview:hover { border-color: var(--primary); background: var(--primary-bg); }
.admin-qr-preview:focus-visible { outline: 3px solid rgba(225, 37, 27, 0.18); outline-offset: 2px; }
.admin-qr-preview:active { background: var(--bg-hover); }
.admin-qr-placeholder {
  font-size: 13px;
  color: var(--text-hint);
}
.admin-qr-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.admin-btn-clear {
  align-self: flex-end;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}
.admin-btn-clear:active { background: var(--bg-hover); }

.admin-note-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-note-row label {
  font-size: 13px;
  color: var(--text-secondary);
}
.admin-note-row input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
  box-sizing: border-box;
  background: var(--bg-page);
  color: var(--text-main);
}
.admin-note-row input:focus {
  outline: none;
  border-color: var(--primary);
}

.admin-requests-list { display: flex; flex-direction: column; gap: 10px; }

.admin-empty {
  text-align: center;
  padding: 24px 12px;
  color: var(--text-hint);
  font-size: 13px;
}

.admin-req-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--bg-page);
}

.req-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.req-plan {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}
.status-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.status-badge.confirmed { background: #E8F5E9; color: #2E7D32; }
.status-badge.rejected { background: #FFEBEE; color: #C62828; }
.status-badge.cancelled { background: #ECEFF1; color: #607D8B; }
.status-badge.pending { background: #FFF3E0; color: #EF6C00; }

.req-body { display: flex; flex-direction: column; gap: 3px; }
.req-meta { font-size: 12px; color: var(--text-secondary); }
.req-reject { font-size: 12px; color: #C62828; margin-top: 2px; }

.req-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.btn-req-confirm, .btn-req-reject {
  flex: 1;
  padding: 8px 0;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-req-confirm {
  background: var(--primary);
  color: #fff;
}
.btn-req-confirm:active { background: var(--primary-dark); }
.btn-req-reject {
  background: #FFEBEE;
  color: #C62828;
}
.btn-req-reject:active { background: #FFCDD2; }

.profile-admin-entry {
  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
}
.profile-admin-entry:active { background: linear-gradient(135deg, #FFE0B2 0%, #FFCC80 100%); }

/* ========== 收款码支付弹窗 ========== */
.modal-qr { max-width: 360px; }
.qr-empty { text-align: center; padding: 12px 0 4px; }
.qr-empty-icon { font-size: 48px; margin-bottom: 8px; }
.qr-empty-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; color: var(--text-main); }
.qr-empty-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px; padding: 0 8px; }
.qr-empty-detail {
  text-align: left;
  background: var(--bg-page);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 14px;
}
.btn-go-admin {
  width: 100%;
  padding: 10px 0;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 6px;
}
.btn-go-admin:active { background: var(--primary-dark); }

.qr-display {
  text-align: center;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.qr-display-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
}
.qr-display-img-wrap {
  width: 200px;
  height: 200px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.qr-display-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.qr-display-amount {
  font-size: 16px;
  color: var(--text-main);
  margin-bottom: 4px;
}
.qr-display-amount b { color: var(--primary); font-size: 18px; }
.qr-display-note {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.qr-display-tip {
  font-size: 12px;
  color: var(--text-hint);
  margin-top: 4px;
  background: var(--bg-page);
  padding: 6px 12px;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}

.payment-footer-hint {
  text-align: center;
  font-size: 11px;
  color: var(--text-hint);
  margin-top: 6px;
  line-height: 1.5;
}

/* ========== 待支付确认卡 ========== */
.subscribe-pending {
  text-align: center;
  padding: 24px 16px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  margin: 12px 0;
  box-shadow: var(--shadow-sm);
  border: 1px dashed var(--warning);
}
.pending-icon { font-size: 48px; margin-bottom: 8px; }
.pending-title { font-size: 17px; font-weight: 600; color: var(--text-main); margin-bottom: 6px; }
.pending-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 14px; }
.pending-info {
  text-align: left;
  background: var(--bg-page);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pending-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
}
.pending-info-row span:last-child { color: var(--text-main); font-weight: 500; }
.btn-cancel-pending {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 8px 24px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.btn-cancel-pending:active { background: var(--bg-hover); }

.records-empty-hint {
  font-size: 12px;
  margin-top: 4px;
}

/* 链接预览组件 */
.link-preview {
  margin-top: 8px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: #E8F5E9;
  border: 1px solid #A5D6A7;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  animation: fadeInUp 0.3s ease;
  overflow: hidden;
  word-break: break-word;
}

.link-preview.error {
  background: #FFF3E0;
  border-color: #FFCC80;
}

.link-preview-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}

.link-preview-info {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.link-preview-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-preview-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-preview-product {
  font-size: 12px;
  color: var(--text-main);
  margin-top: 4px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-preview-product-sub {
  font-size: 11px;
  color: var(--text-hint);
  margin-top: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-preview-product b {
  color: var(--primary);
  font-weight: 600;
}

.link-preview-btn {
  background: var(--primary);
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
}

.link-preview-btn:active {
  background: var(--primary-dark);
}

/* 成就徽章 */
.achievement-section {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.achievement-item {
  text-align: center;
  padding: 10px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  opacity: 0.35;
  transition: all 0.3s;
}

.achievement-item.unlocked {
  opacity: 1;
  background: #FFF8E1;
  border: 1px solid #FFE082;
}

.achievement-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.achievement-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-main);
}

.achievement-desc {
  font-size: 10px;
  color: var(--text-hint);
  margin-top: 2px;
}

/* 跨平台比价组件 */
.cross-platform-compare {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}

.platform-price-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.platform-price-row:last-child {
  border-bottom: none;
}

.platform-price-icon {
  font-size: 20px;
  width: 32px;
  text-align: center;
}

.platform-price-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-main);
  font-weight: 500;
}

.platform-price-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.platform-price-value.best {
  color: var(--success);
}

.platform-price-value.higher {
  color: var(--danger);
}

.platform-price-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #E8F5E9;
  color: var(--success);
  font-weight: 600;
}

.platform-price-badge.best-badge {
  background: #FFEB3B;
  color: #E65100;
  font-size: 11px;
  padding: 2px 8px;
}

.platform-price-row.best-row {
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  border-radius: 6px;
  margin: 4px 0;
  padding: 8px 8px;
  border-bottom: none;
}

.platform-switch-tip {
  margin-top: 8px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  border-radius: 8px;
  text-align: center;
}

/* 凑单加菜推荐 */
.combo-suggestion {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: #FFF8E1;
  border: 1px dashed #FFB300;
  display: none;
}

.combo-suggestion.show {
  display: block;
  animation: fadeInUp 0.3s ease;
}

.combo-suggestion-title {
  font-size: 12px;
  font-weight: 600;
  color: #F57F17;
  margin-bottom: 6px;
}

.combo-suggestion-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text-main);
}

.combo-suggestion-add {
  margin-left: auto;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--primary);
  color: #FFFFFF;
  border: none;
  cursor: pointer;
}

.combo-suggestion-save {
  font-size: 11px;
  color: var(--success);
  font-weight: 500;
}

/* 数据统计图表 */
.stats-chart-section {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.stats-chart-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 10px;
}

.stats-chart-bars {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  height: 60px;
  padding: 0 4px;
}

.stats-chart-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  min-height: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #FFFFFF;
  font-weight: 600;
  position: relative;
  transition: height 0.5s ease;
}

.stats-chart-label {
  font-size: 9px;
  color: var(--text-hint);
  text-align: center;
  margin-top: 4px;
}

/* 排行榜 */
.leaderboard-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

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

.leaderboard-rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  flex-shrink: 0;
}

.leaderboard-rank.gold {
  background: #FFD700;
}
.leaderboard-rank.silver {
  background: #C0C0C0;
}
.leaderboard-rank.bronze {
  background: #CD7F32;
}
.leaderboard-rank.normal {
  background: var(--text-hint);
}

.record-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

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

.record-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.record-info {
  flex: 1;
}

.record-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.record-time {
  font-size: 12px;
  color: var(--text-hint);
  margin-top: 2px;
}

.record-status {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 500;
}

.record-status.success {
  background: #E8F5E9;
  color: var(--success);
}

.record-status.pending {
  background: #FFF3E0;
  color: var(--warning);
}

/* 规则说明 */
.referral-rules {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.rule-item {
  font-size: 12px;
  color: var(--text-hint);
  line-height: 2;
}

/* ========== 我的页面 ========== */
.profile-card {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: var(--radius);
  padding: 20px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
}

.profile-tag {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.15);
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
}

.profile-edit {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.7);
}

.profile-stats {
  display: flex;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px 0;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.profile-stat {
  flex: 1;
  text-align: center;
  border-right: 1px solid var(--border);
}

.profile-stat:last-child {
  border-right: none;
}

.profile-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
}

.profile-stat-label {
  font-size: 12px;
  color: var(--text-hint);
  margin-top: 4px;
}

.profile-menu {
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

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

.profile-menu-item:active {
  background: var(--bg-page);
}

.menu-item-icon {
  font-size: 20px;
  width: 28px;
  text-align: center;
}

.menu-item-text {
  flex: 1;
  font-size: 15px;
  color: var(--text-main);
}

.menu-item-value {
  font-size: 13px;
  color: var(--text-hint);
}

.menu-item-arrow {
  color: var(--text-hint);
  font-size: 16px;
}

/* ========== 底部导航栏 ========== */
.tabbar {
  height: 60px;
  background: #FFFFFF;
  border-top: 1px solid var(--border);
  display: flex;
  flex-shrink: 0;
  position: relative;
  z-index: 100;
}

.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: all 0.2s;
}

.tabbar-icon {
  font-size: 22px;
}

.tabbar-label {
  font-size: 11px;
  color: var(--text-hint);
}

.tabbar-item.active .tabbar-label {
  color: var(--primary);
  font-weight: 600;
}

/* ========== 弹窗 ========== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

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

.modal-content {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  width: 340px;
  max-height: 80%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalIn 0.3s ease;
}

@keyframes modalIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-main);
}

.modal-close {
  font-size: 18px;
  color: var(--text-hint);
  cursor: pointer;
}

.modal-body {
  padding: 16px;
  overflow-y: auto;
}

/* 管理员审核操作弹窗 */
.modal-admin-action .modal-body label {
  display: block;
  font-size: 14px;
  color: var(--text-main);
  margin-bottom: 8px;
  font-weight: 500;
}

.modal-admin-action .modal-body textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.admin-action-warning {
  background: #FFF3E0;
  border: 1px solid #FFCC80;
  border-radius: var(--radius-md);
  padding: 12px;
  font-size: 13px;
  color: #E65100;
  margin-bottom: 12px;
  line-height: 1.5;
}

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

.modal-actions button {
  flex: 1;
  padding: 12px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

/* 链接选择弹窗 */
.link-sample-hint {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.link-sample-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.link-sample-item {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.2s;
}

.link-sample-item:active {
  border-color: var(--primary);
}

.link-sample-url {
  font-size: 12px;
  color: var(--text-secondary);
  word-break: break-all;
}

.link-sample-info {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  margin-top: 4px;
}

/* 支付弹窗 */
.payment-amount {
  text-align: center;
  padding: 20px 0;
}

.payment-amount-value {
  font-size: 40px;
  font-weight: 700;
  color: var(--primary);
}

.payment-amount-value::before {
  content: '¥';
  font-size: 20px;
}

.payment-amount-label {
  font-size: 14px;
  color: var(--text-hint);
  margin-top: 4px;
}

.payment-detail {
  background: var(--bg-page);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 16px;
}

.payment-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 6px 0;
  color: var(--text-secondary);
}

.payment-detail-row.total {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 10px;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-main);
}

.payment-methods {
  margin-bottom: 16px;
}

.payment-method {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  cursor: pointer;
}

.payment-method.selected {
  border-color: var(--primary);
  background: var(--primary-bg);
}

.payment-method-icon {
  font-size: 24px;
}

.payment-method-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
}

.payment-method-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
}

.payment-method.selected .payment-method-check {
  background: var(--primary);
  border-color: var(--primary);
  position: relative;
}

.payment-method.selected .payment-method-check::after {
  content: '✓';
  color: #FFFFFF;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn-confirm-pay {
  width: 100%;
  background: var(--primary);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.btn-confirm-pay:active {
  background: var(--primary-dark);
}

/* 订单记录 */
.order-record-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

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

.order-record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.order-record-restaurant {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.order-record-time {
  font-size: 12px;
  color: var(--text-hint);
}

.order-record-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-record-saved {
  font-size: 13px;
  color: var(--success);
  font-weight: 500;
}

.order-record-price {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}

.order-record-payment {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--bg-page);
  color: var(--text-secondary);
  font-size: 11px;
  text-align: right;
}

/* ========== Toast ========== */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  color: #FFFFFF;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  max-width: 280px;
  text-align: center;
}

.toast.show {
  opacity: 1;
}

/* ========== 动画 ========== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page.active .page-body > * {
  animation: fadeInUp 0.4s ease;
}

/* ========== 新增样式 ========== */
.coupon-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.coupon-preview .coupon-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--primary-bg);
  color: var(--primary);
  white-space: nowrap;
}

/* 优惠券标签（通用） */
.coupon-tag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--primary-bg);
  color: var(--primary);
  white-space: nowrap;
}

.coupon-tag.discount {
  background: #E8F5E9;
  color: var(--success);
}

/* 结果页小贴士 */
.result-tips {
  background: #FFF8E1;
  border: 1px solid #FFE082;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.tip-title {
  font-size: 13px;
  font-weight: 600;
  color: #F57F17;
  margin-bottom: 6px;
}

.tip-line {
  font-size: 12px;
  color: #795548;
  padding: 3px 0;
}

/* 省钱对比柱状图 */
.save-compare {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 40px;
  margin-bottom: 6px;
}

.save-bar {
  flex: 1;
  text-align: center;
}

.save-bar-fill {
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  margin: 0 auto;
  transition: height 0.5s ease;
}

.save-bar-label {
  font-size: 10px;
  color: var(--text-hint);
  margin-top: 4px;
}

/* 进度条状态 */
.progress-reward .btn-copy {
  padding: 4px 12px;
  font-size: 12px;
  background: var(--primary);
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 8px;
  vertical-align: middle;
}

/* 空状态 */
.records-empty {
  text-align: center;
  padding: 20px 0;
  color: var(--text-hint);
}

.records-empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

/* ========== 管理员后台 ========== */
.admin-section {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}

.admin-section .section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-main);
}

.admin-badge {
  display: inline-block;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--warning);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 20px;
  margin-left: auto;
}

.admin-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 12px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.switch input { display: none; }
.slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.2s;
}
.slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider::before { transform: translateX(20px); }

.admin-qr-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.admin-qr-row:last-of-type { border-bottom: 0; }

.admin-qr-plan-group {
  margin-top: 14px;
  padding: 12px;
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}
.admin-qr-plan-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.admin-qr-label {
  width: 80px;
  font-size: 13px;
  color: var(--text-secondary);
  padding-top: 16px;
  flex-shrink: 0;
}

.admin-qr-uploader {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-qr-preview {
  width: 100%;
  height: 140px;
  padding: 8px;
  background: var(--bg-page);
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: 0.2s;
  font: inherit;
  color: inherit;
}
.admin-qr-preview:hover { border-color: var(--primary); background: var(--primary-bg); }
.admin-qr-preview:focus-visible { outline: 3px solid rgba(225, 37, 27, 0.18); outline-offset: 2px; }
.admin-qr-preview:active { background: var(--bg-hover); }
.admin-qr-placeholder {
  font-size: 13px;
  color: var(--text-hint);
}
.admin-qr-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.admin-btn-clear {
  align-self: flex-end;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}
.admin-btn-clear:active { background: var(--bg-hover); }

.admin-note-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-note-row label {
  font-size: 13px;
  color: var(--text-secondary);
}
.admin-note-row input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
  box-sizing: border-box;
  background: var(--bg-page);
  color: var(--text-main);
}
.admin-note-row input:focus {
  outline: none;
  border-color: var(--primary);
}

.admin-requests-list { display: flex; flex-direction: column; gap: 10px; }

.admin-empty {
  text-align: center;
  padding: 24px 12px;
  color: var(--text-hint);
  font-size: 13px;
}

.admin-req-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--bg-page);
}

.req-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.req-plan {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}
.status-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.status-badge.confirmed { background: #E8F5E9; color: #2E7D32; }
.status-badge.rejected { background: #FFEBEE; color: #C62828; }
.status-badge.cancelled { background: #ECEFF1; color: #607D8B; }
.status-badge.pending { background: #FFF3E0; color: #EF6C00; }

.req-body { display: flex; flex-direction: column; gap: 3px; }
.req-meta { font-size: 12px; color: var(--text-secondary); }
.req-reject { font-size: 12px; color: #C62828; margin-top: 2px; }

.req-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.btn-req-confirm, .btn-req-reject {
  flex: 1;
  padding: 8px 0;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-req-confirm {
  background: var(--primary);
  color: #fff;
}
.btn-req-confirm:active { background: var(--primary-dark); }
.btn-req-reject {
  background: #FFEBEE;
  color: #C62828;
}
.btn-req-reject:active { background: #FFCDD2; }

.profile-admin-entry {
  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
}
.profile-admin-entry:active { background: linear-gradient(135deg, #FFE0B2 0%, #FFCC80 100%); }

/* ========== 收款码支付弹窗 ========== */
.modal-qr { max-width: 360px; }
.qr-empty { text-align: center; padding: 12px 0 4px; }
.qr-empty-icon { font-size: 48px; margin-bottom: 8px; }
.qr-empty-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; color: var(--text-main); }
.qr-empty-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px; padding: 0 8px; }
.qr-empty-detail {
  text-align: left;
  background: var(--bg-page);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 14px;
}
.btn-go-admin {
  width: 100%;
  padding: 10px 0;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 6px;
}
.btn-go-admin:active { background: var(--primary-dark); }

.qr-display {
  text-align: center;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.qr-display-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
}
.qr-display-img-wrap {
  width: 200px;
  height: 200px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.qr-display-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.qr-display-amount {
  font-size: 16px;
  color: var(--text-main);
  margin-bottom: 4px;
}
.qr-display-amount b { color: var(--primary); font-size: 18px; }
.qr-display-note {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.qr-display-tip {
  font-size: 12px;
  color: var(--text-hint);
  margin-top: 4px;
  background: var(--bg-page);
  padding: 6px 12px;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}

.payment-footer-hint {
  text-align: center;
  font-size: 11px;
  color: var(--text-hint);
  margin-top: 6px;
  line-height: 1.5;
}

/* ========== 待支付确认卡 ========== */
.subscribe-pending {
  text-align: center;
  padding: 24px 16px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  margin: 12px 0;
  box-shadow: var(--shadow-sm);
  border: 1px dashed var(--warning);
}
.pending-icon { font-size: 48px; margin-bottom: 8px; }
.pending-title { font-size: 17px; font-weight: 600; color: var(--text-main); margin-bottom: 6px; }
.pending-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 14px; }
.pending-info {
  text-align: left;
  background: var(--bg-page);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pending-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
}
.pending-info-row span:last-child { color: var(--text-main); font-weight: 500; }
.btn-cancel-pending {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 8px 24px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.btn-cancel-pending:active { background: var(--bg-hover); }

/* ========== 服务端支付状态 ========== */
.payment-service-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.payment-service-status.ready { border-color: #A5D6A7; background: #F1F8E9; }
.payment-service-status.blocked { border-color: #FFCC80; background: #FFF8E1; }
.payment-service-icon, .payment-result-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  background: var(--warning);
}
.payment-service-status.ready .payment-service-icon { background: var(--success); }
.payment-service-copy { min-width: 0; }
.payment-service-title { font-size: 14px; font-weight: 700; color: var(--text-main); }
.payment-service-desc { margin-top: 3px; font-size: 12px; line-height: 1.55; color: var(--text-secondary); }
.payment-status-line {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.payment-status-line.pending { color: #E65100; background: #FFF8E1; }
.payment-status-line.checking { color: #1565C0; background: #E3F2FD; }
.payment-status-line.paid { color: #1B5E20; background: #E8F5E9; }
.payment-status-line.blocked { color: #B71C1C; background: #FFEBEE; }
.payment-security-hint, .payment-order-context, .admin-payment-security-note, .subscribed-server-note {
  margin-top: 10px;
  padding: 10px 11px;
  border-radius: 7px;
  background: #F5F7FA;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.65;
}
.admin-payment-security-note code { color: var(--primary); font-weight: 700; }
.payment-order-context { margin: 0 0 10px; background: #E3F2FD; color: #0D47A1; }
.payment-result-card { text-align: center; padding: 22px 8px 8px; }
.payment-result-card .payment-result-icon { margin: 0 auto 12px; }
.payment-result-title { font-size: 18px; font-weight: 700; color: var(--text-main); }
.payment-result-desc { margin: 8px 0 16px; color: var(--text-secondary); font-size: 13px; line-height: 1.7; }
.payment-setup-steps {
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 8px;
  background: #FFF8E1;
  color: #5D4037;
  text-align: left;
  font-size: 12px;
  line-height: 1.65;
}
.payment-setup-steps code { color: var(--primary); font-weight: 700; }
.payment-setup-divider { height: 1px; background: #FFE0B2; margin: 9px 0; }
.btn-secondary-payment {
  width: 100%;
  margin-top: 8px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
}
.btn-secondary-payment:active { background: var(--bg-hover); }

/* ========== 已停用的旧交易尾号样式（仅兼容旧缓存） ========== */
.pay-verify-input {
  text-align: center;
  padding: 12px 4px 4px;
}

.verify-input-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-bg);
  font-size: 30px;
}

.verify-input-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
}

.verify-input-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
}

.verify-input-desc b { color: var(--primary); }

.verify-input-amount {
  margin: 12px 0;
  padding: 9px 12px;
  background: var(--bg-page);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.6;
}

.verify-input-amount b {
  color: var(--primary);
  font-size: 16px;
}

.verify-input-code-box { margin: 12px 0 8px; }

.verify-input-code {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-main);
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 8px;
  outline: none;
}

.verify-input-code::placeholder {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-hint);
}

.verify-input-code:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(225, 37, 27, 0.1);
}

.verify-input-hint {
  margin: 6px 0 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #FFEBEE;
  font-size: 12px;
  line-height: 1.5;
}

.qr-display-afterpay {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #FFF8E1;
  color: #E65100;
  font-size: 12px;
  line-height: 1.55;
}

.pay-verifying {
  text-align: center;
  padding: 32px 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.verifying-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.verifying-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 6px;
}

.verifying-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.6;
}

.verifying-amount {
  font-size: 14px;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 16px;
  padding: 6px 16px;
  background: var(--primary-bg);
  border-radius: 16px;
}

.verifying-steps {
  text-align: left;
  width: 100%;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.verify-step {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--bg-page);
  color: var(--text-hint);
}
.verify-step.done { color: #2E7D32; background: #E8F5E9; }
.verify-step.waiting { color: #EF6C00; background: #FFF3E0; }
.verify-step.pending { color: var(--text-hint); }

/* 二次确认弹窗 */
.pay-verify-result {
  text-align: center;
  padding: 16px 8px 8px;
}

.verify-result-icon {
  font-size: 48px;
  margin-bottom: 8px;
}

.verify-result-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
}

.verify-result-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 12px;
  padding: 0 4px;
}

.verify-result-amount {
  font-size: 15px;
  color: var(--text-main);
  margin-bottom: 16px;
  padding: 8px 12px;
  background: var(--bg-page);
  border-radius: var(--radius-sm);
}

.verify-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.verify-actions button {
  flex: 1;
  padding: 12px 0;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.btn-verify-cancel {
  background: var(--bg-page);
  color: var(--text-secondary);
  border: 1px solid var(--border) !important;
}
.btn-verify-cancel:active { background: var(--bg-hover); }

.btn-verify-confirm {
  background: var(--primary);
  color: #fff;
}
.btn-verify-confirm:active { background: var(--primary-dark); }

.verify-footer-tip {
  font-size: 11px;
  color: var(--warning);
  text-align: center;
  line-height: 1.5;
}

/* ========== 邀请码输入（订阅页） ========== */
.subscribe-invite-section {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 14px;
  margin: 12px 0;
  box-shadow: var(--shadow-sm);
  border: 1px dashed var(--primary-bg);
}

.subscribe-invite-section .section-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-main);
}

.invite-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.invite-code-input {
  flex: 1;
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: 6px;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
  outline: none;
  box-sizing: border-box;
  background: var(--bg-page);
  color: var(--text-main);
  transition: border-color 0.2s;
}

.invite-code-input:focus {
  border-color: var(--primary);
}

.invite-code-input::placeholder {
  text-transform: none;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--text-hint);
}

.invite-code-status {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  min-width: 60px;
  text-align: center;
}

.invite-discount-badge {
  margin-top: 8px;
  padding: 6px 10px;
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  border-radius: 6px;
  font-size: 13px;
  color: #E65100;
  text-align: center;
  animation: fadeInUp 0.3s ease;
}

.invite-discount-badge b {
  color: #E65100;
  font-size: 15px;
}

/* ========== 价格聚合工具说明（订阅页底部）========== */
.subscribe-aggregator-notice {
  margin: 16px 12px 24px;
  padding: 14px 14px;
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
  border-radius: var(--radius-md);
  border: 1px solid #FFE082;
  box-shadow: var(--shadow-sm);
}

.aggregator-notice-title {
  font-size: 14px;
  font-weight: 700;
  color: #E65100;
  margin-bottom: 8px;
}

.aggregator-notice-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aggregator-notice-line {
  font-size: 12px;
  color: var(--text-main);
  line-height: 1.6;
}

.aggregator-notice-line b {
  color: #E65100;
  font-weight: 700;
}

/* ========== 支付弹窗：价格聚合提示 ========== */
.payment-aggregator-hint {
  margin: 12px 0 4px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-main);
  line-height: 1.6;
  border: 1px solid #FFE082;
}

.payment-aggregator-hint b {
  color: #E65100;
}

.payment-privacy-hint {
  margin-top: 6px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  border-radius: 8px;
  font-size: 12px;
  color: #2E7D32;
  line-height: 1.6;
  text-align: center;
  border: 1px solid #A5D6A7;
}

/* ========== 支付弹窗：配送信息提示 ========== */
.payment-delivery-hint {
  margin: 12px 0 6px;
  padding: 12px;
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  border-radius: 8px;
  border: 1px solid #90CAF9;
  border-left: 4px solid #1976D2;
}

.delivery-hint-title {
  font-size: 13px;
  font-weight: 700;
  color: #0D47A1;
  margin-bottom: 6px;
}

.delivery-hint-content {
  font-size: 12px;
  color: #1565C0;
  line-height: 1.7;
}

.delivery-hint-content b {
  color: #0D47A1;
  font-weight: 700;
}

.admin-login-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.admin-login-form input,
.manual-field-input { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--text-main); font-size: 14px; }
.admin-session-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; margin-bottom: 12px; border-radius: var(--radius-sm); color: #1B5E20; background: #E8F5E9; font-size: 12px; }
.admin-session-bar button { border: 1px solid #A5D6A7; background: #fff; color: #1B5E20; border-radius: 4px; padding: 5px 10px; cursor: pointer; }
.manual-payment-status { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 16px; box-shadow: var(--shadow); }
.manual-payment-status.ready { border-left: 4px solid var(--info); }
.manual-payment-status.pending { border-left: 4px solid var(--warning); background: #FFF8E1; }
.manual-payment-status.rejected { border-left: 4px solid var(--danger); background: #FFEBEE; }
.manual-payment-status.blocked { border-left: 4px solid var(--text-hint); }
.manual-status-head { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--text-main); }
.manual-status-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.6; margin: 8px 0; }
.manual-methods { display: flex; gap: 8px; margin: 10px 0 4px; }
.manual-method-btn { flex: 1; padding: 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--text-secondary); cursor: pointer; }
.manual-method-btn.selected { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); font-weight: 600; }
.manual-field-label { display: block; margin: 10px 0 5px; font-size: 12px; color: var(--text-secondary); text-align: left; }
.qr-display-tip.danger { color: #C62828; background: #FFEBEE; }

/* ========== 支付弹窗：去平台下单 ========== */
.payment-go-platform {
  margin: 10px 0 4px;
  text-align: center;
}

.btn-go-platform {
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, #FFF, #FAFAFA);
  border: 2px solid var(--primary);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
}

.btn-go-platform:active {
  background: var(--primary);
  color: #FFF;
  transform: scale(0.98);
}

.go-platform-hint {
  font-size: 11px;
  color: var(--text-hint);
  margin-top: 4px;
  line-height: 1.5;
}

/* ========== 结果页：下单 CTA 组 ========== */
.order-cta-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 20px;
  padding: 0 4px;
}

.btn-go-platform-result {
  width: 100%;
  padding: 12px 16px;
  background: #FFF;
  border: 2px solid var(--primary);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-go-platform-result:active {
  background: var(--primary);
  color: #FFF;
  transform: scale(0.98);
}

.order-cta-hint {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  padding: 8px 10px;
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
  border-radius: 8px;
  border: 1px solid #FFE082;
  text-align: left;
}

.order-cta-hint b {
  color: #E65100;
}

/* ========== 数据来源说明（结果页） ========== */
.data-source-notice {
  margin-top: 8px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #ECEFF1, #CFD8DC);
  border-radius: 8px;
  border: 1px solid #B0BEC5;
  text-align: left;
}
.data-source-title {
  font-size: 13px;
  font-weight: 700;
  color: #37474F;
  margin-bottom: 4px;
}
.data-source-content {
  font-size: 12px;
  color: #455A64;
  line-height: 1.7;
}
.data-source-content b {
  color: #C62828;
  font-weight: 700;
}

/* ========== 已开通会员卡（含有效期） ========== */
.subscribed-card {
  text-align: center;
  padding: 20px 16px;
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  border-radius: var(--radius-md);
  margin: 12px 0;
  box-shadow: var(--shadow-sm);
  border: 1px solid #A5D6A7;
}

.subscribed-card-icon {
  font-size: 40px;
  margin-bottom: 6px;
}

.subscribed-card-title {
  font-size: 17px;
  font-weight: 700;
  color: #2E7D32;
  margin-bottom: 12px;
}

.subscribed-card-dates {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  background: rgba(255,255,255,0.6);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.subscribed-date-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.date-label {
  color: var(--text-secondary);
}

.date-value {
  font-weight: 600;
  color: var(--text-main);
}

.date-value.days {
  color: #2E7D32;
  font-size: 14px;
}

.btn-cancel-subscribe {
  background: transparent;
  border: 1px solid #A5D6A7;
  color: #2E7D32;
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.btn-cancel-subscribe:active {
  background: rgba(255,255,255,0.5);
}

/* ========== 本地演示模式横幅 ========== */
.local-mode-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(90deg, #FFB74D, #FF9800);
  color: #4E2A00;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* ========== 订阅页本地模式提示 ========== */
.subscribe-local-notice {
  margin-top: 14px;
  padding: 14px 16px;
  background: #FFF3E0;
  border: 1px dashed #FFB74D;
  border-radius: 12px;
  color: #5D4037;
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
}