/* ============================================================
   美商 (MeiShang) 设计系统 v2.0
   原则：
   1. 垂直韵律 (Vertical Rhythm) — 所有间距为 8 的倍数 (8/16/24/32/40/48)
   2. 字体层级 — 16px body / 24px section / 32px page
   3. WCAG AA 色彩 — 正文对比度 >= 4.5:1
   4. 极简主义 — 无渐变背景、无冗余阴影、无装饰乱码
   ============================================================ */

:root {
  /* ── 品牌色 (WCAG AA 验证通过) ── */
  --ms-primary: #059669;        /* emerald-600 — 4.6:1 on white */
  --ms-primary-dark: #047857;   /* emerald-700 — 6.8:1 on white */
  --ms-primary-light: #d1fae5;  /* emerald-100 */
  --ms-accent: #f59e0b;         /* amber-500 — 正常使用仅用于非文字元素 */
  --ms-rose: #e11d48;           /* rose-700 — 4.7:1 on white */

  /* ── 中性色 ── */
  --ms-white: #ffffff;
  --ms-bg: #f8f9fa;            /* 页面背景 */
  --ms-card: #ffffff;
  --ms-border: #e5e7eb;        /* gray-200 */
  --ms-text-primary: #111827;  /* gray-900 — 19:1 on white */
  --ms-text-secondary: #4b5563;/* gray-600 — 8.4:1 on white */
  --ms-text-tertiary: #6b7280; /* gray-500 — 5.4:1 on white ✅ WCAG AA */
  --ms-text-placeholder: #9ca3af; /* gray-400 — 仅占位符，非正文 */

  /* ── 间距 (8px 网格) ── */
  --ms-space-1: 8px;
  --ms-space-2: 16px;
  --ms-space-3: 24px;
  --ms-space-4: 32px;
  --ms-space-5: 40px;
  --ms-space-6: 48px;
  --ms-space-7: 56px;
  --ms-space-8: 64px;
  --ms-radius: 12px;
  --ms-radius-sm: 8px;
  --ms-radius-xs: 4px;

  /* ── 字体层级 ── */
  --ms-font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --ms-text-xs: 12px;       /* 辅助文字 */
  --ms-text-sm: 14px;       /* 次级正文 */
  --ms-text-base: 16px;     /* 正文 */
  --ms-text-lg: 24px;       /* 区块标题 */
  --ms-text-xl: 32px;       /* 页面标题 */
  --ms-text-2xl: 40px;      /* 大数字/强调 */
  --ms-line-height: 1.6;    /* 行高保证可读性 */

  /* ── 阴影 (极简) ── */
  --ms-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --ms-shadow: 0 1px 3px rgba(0,0,0,0.08);
  --ms-shadow-lg: 0 4px 12px rgba(0,0,0,0.08);
}


/* ── iOS Safe Area ── */
body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
}

/* ── 触摸反馈 ── */
a, button, [role="button"], .clickable {
  cursor: pointer;
  touch-action: manipulation;
}
a:active, button:active, .clickable:active {
  opacity: 0.8;
  transition: opacity 0.05s;
}

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

/* ── 禁止长按菜单 (仅对非输入元素) ── */
img, a, .no-callout {
  -webkit-touch-callout: none;
  user-select: none;
}
input, textarea {
  user-select: auto;
  -webkit-user-select: auto;
}

/* ── 自适应图片 ── */
img {
  max-width: 100%;
  height: auto;
}

/* ── 按钮最小触摸目标 (44px) ── */
.btn, button, [role="button"], .nav-item, .tab-item {
  min-height: 44px;
}

/* ── 加载过渡动画 ── */
.page-loading {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.page-loaded {
  opacity: 1;
}
/* ── Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--ms-font-family);
  font-size: var(--ms-text-base);
  line-height: var(--ms-line-height);
  color: var(--ms-text-primary);
  background: var(--ms-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
  padding-bottom: var(--ms-space-8);
}
a { color: var(--ms-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea, select {
  font-family: inherit;
  font-size: var(--ms-text-base);
  outline: none;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
  padding: 0 var(--ms-space-2);
  height: 44px;
  width: 100%;
  transition: border-color 0.15s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--ms-primary);
  box-shadow: 0 0 0 2px var(--ms-primary-light);
}
textarea { height: auto; padding: var(--ms-space-1); }

/* ── 字体层级 ── */
h1 { font-size: var(--ms-text-xl); font-weight: 700; line-height: 1.3; }
h2 { font-size: var(--ms-text-lg); font-weight: 600; line-height: 1.4; }
h3 { font-size: 20px; font-weight: 600; }
p  { font-size: var(--ms-text-base); line-height: var(--ms-line-height); color: var(--ms-text-primary); }

/* ── 顶部导航 ── */
.top-bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--ms-white);
  display: flex; align-items: center;
  height: 48px; padding: 0 var(--ms-space-2);
  border-bottom: 1px solid var(--ms-border);
}
.top-bar .back {
  font-size: 20px; margin-right: var(--ms-space-1);
  cursor: pointer; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ms-text-primary);
}
.top-bar .title {
  flex: 1; text-align: center;
  font-size: var(--ms-text-base); font-weight: 600;
  color: var(--ms-text-primary);
}
.top-bar .right {
  font-size: var(--ms-text-sm); color: var(--ms-text-secondary);
  cursor: pointer;
}

/* ── 底部导航 ── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: var(--ms-white);
  display: flex; align-items: center;
  border-top: 1px solid var(--ms-border);
  height: 56px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav a {
  flex: 1; text-align: center;
  padding: var(--ms-space-1) 0;
  font-size: 10px; color: var(--ms-text-tertiary);
  text-decoration: none;
}
.bottom-nav a .nav-icon { font-size: 22px; display: block; margin-bottom: 2px; }
.bottom-nav a.active { color: var(--ms-primary); font-weight: 600; }

/* ── 卡片 ── */
.card {
  background: var(--ms-card); border-radius: var(--ms-radius);
  padding: var(--ms-space-2); margin: 0 var(--ms-space-2) var(--ms-space-1);
  box-shadow: var(--ms-shadow-sm);
}
.card-header {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: var(--ms-space-1);
}
.card-title { font-size: var(--ms-text-base); font-weight: 600; }

/* ── 按钮 ── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 var(--ms-space-4);
  background: var(--ms-primary); color: var(--ms-white);
  border-radius: 24px; font-size: var(--ms-text-base); font-weight: 600;
  cursor: pointer; transition: background 0.15s;
}
.btn-primary:hover { background: var(--ms-primary-dark); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary.small { height: 36px; padding: 0 var(--ms-space-3); font-size: var(--ms-text-sm); border-radius: 18px; }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 var(--ms-space-3);
  border: 1.5px solid var(--ms-border); border-radius: 18px;
  background: var(--ms-white); color: var(--ms-text-primary);
  font-size: var(--ms-text-sm); cursor: pointer;
}

/* ── Toast ── */
.toast {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.8); color: var(--ms-white);
  padding: var(--ms-space-1) var(--ms-space-3);
  border-radius: var(--ms-radius-sm);
  font-size: var(--ms-text-sm); z-index: 999;
  display: none; max-width: 80%;
  text-align: center;
}
.toast.show { display: block; }

/* ── 加载 ── */
.loading { text-align: center; padding: var(--ms-space-5); color: var(--ms-text-tertiary); }
.loading .spin {
  display: inline-block; width: 24px; height: 24px;
  border: 3px solid var(--ms-border);
  border-top-color: var(--ms-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 空状态 ── */
.empty-state { text-align: center; padding: var(--ms-space-6) var(--ms-space-3); }
.empty-state .icon { font-size: 48px; display: block; margin-bottom: var(--ms-space-1); }
.empty-state p { color: var(--ms-text-tertiary); font-size: var(--ms-text-sm); }

/* ── 弹窗 ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.4);
  display: none;
}
.modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%); z-index: 201;
  background: var(--ms-white); border-radius: var(--ms-radius);
  width: 88%; max-width: 400px; max-height: 80vh; overflow-y: auto;
  display: none;
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--ms-space-2); border-bottom: 1px solid var(--ms-border);
}
.modal-header h3 { font-size: var(--ms-text-base); font-weight: 600; }
.modal-header .close { font-size: 20px; color: var(--ms-text-tertiary); cursor: pointer; }
.modal-body { padding: var(--ms-space-2); }

/* ── 标签栏 ── */
.tabs-bar {
  display: flex; background: var(--ms-white);
  border-bottom: 1px solid var(--ms-border);
}
.tabs-bar .tab-item {
  flex: 1; text-align: center;
  padding: var(--ms-space-1) 0; font-size: var(--ms-text-sm);
  color: var(--ms-text-tertiary); cursor: pointer;
  position: relative; font-weight: 500;
}
.tabs-bar .tab-item.active {
  color: var(--ms-primary); font-weight: 600;
}
.tabs-bar .tab-item.active::after {
  content: ""; position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%); width: 24px; height: 3px;
  background: var(--ms-primary); border-radius: 2px;
}

/* ── 表单 ── */
.field-group { margin-bottom: var(--ms-space-2); }
.field-label {
  display: block; font-size: var(--ms-text-sm);
  font-weight: 500; color: var(--ms-text-secondary);
  margin-bottom: var(--ms-space-1);
}

/* ── 通知栏 ── */
.notification-bar {
  padding: var(--ms-space-1) var(--ms-space-2);
  font-size: var(--ms-text-sm);
  border-radius: var(--ms-radius-sm);
  margin-bottom: var(--ms-space-1);
}
.notification-bar.success { background: var(--ms-primary-light); color: var(--ms-primary-dark); }
.notification-bar.info { background: #e0f2fe; color: #0369a1; }

/* ── 帮助面板 ── */
.help-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 901;
  background: var(--ms-white);
  border-radius: var(--ms-radius) var(--ms-radius) 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.1);
  display: none; overflow: hidden; max-height: 60vh; overflow-y: auto;
}
.help-panel.show { display: block; }
.help-panel .hdr {
  padding: var(--ms-space-2) var(--ms-space-2);
  font-size: var(--ms-text-base); font-weight: 600;
  color: var(--ms-white); background: var(--ms-primary);
  display: flex; justify-content: space-between; align-items: center;
}
.help-item {
  display: flex; align-items: center; gap: var(--ms-space-1);
  padding: var(--ms-space-1) var(--ms-space-2);
  border-bottom: 1px solid var(--ms-border);
  cursor: pointer; font-size: var(--ms-text-sm); color: var(--ms-text-primary);
}

/* ── Overlay ── */
.overlay { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.4); display: none; }
.overlay.show { display: block; }

/* ── 动画 ── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ── 商家助手专属 ── */
.panel { display: none !important; padding: var(--ms-space-1); }
.panel.active { display: block !important; }
.prod-header {
  display: flex; align-items: center; gap: var(--ms-space-1);
  padding: var(--ms-space-1) var(--ms-space-2);
  background: var(--ms-white);
  border-bottom: 1px solid var(--ms-border);
  position: sticky; top: 0; z-index: 5;
}
.ph-search {
  flex: 1; height: 36px;
  border: 1.5px solid var(--ms-border);
  border-radius: var(--ms-radius-sm);
  padding: 0 var(--ms-space-1);
  font-size: var(--ms-text-sm);
  background: var(--ms-bg);
  transition: border-color 0.15s;
}
.ph-search:focus { border-color: var(--ms-primary); background: var(--ms-white); }
.ph-btn {
  height: 36px; padding: 0 var(--ms-space-2);
  border-radius: var(--ms-radius-sm);
  font-size: var(--ms-text-sm); font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.ph-btn.primary { background: var(--ms-primary); color: var(--ms-white); }
.ph-btn.outline { background: var(--ms-white); border: 1.5px solid var(--ms-primary); color: var(--ms-primary); }

.prod-card {
  display: flex; gap: var(--ms-space-1);
  background: var(--ms-white); border-radius: var(--ms-radius);
  padding: var(--ms-space-1); margin-bottom: 1px;
  box-shadow: var(--ms-shadow-sm);
}
.prod-card .pc-img { width: 72px; height: 72px; border-radius: var(--ms-radius-sm); overflow: hidden; flex-shrink: 0; background: var(--ms-bg); }
.prod-card .pc-img img { width: 100%; height: 100%; object-fit: cover; }
.prod-card .pc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.prod-card .pc-name { font-size: var(--ms-text-sm); font-weight: 600; color: var(--ms-text-primary); }
.prod-card .pc-price { font-size: 18px; font-weight: 700; color: var(--ms-rose); }
.prod-card .pc-price .sym { font-size: var(--ms-text-xs); }
.prod-card .pc-badge { font-size: 10px; padding: 2px 8px; border-radius: var(--ms-radius-xs); font-weight: 600; }
.pc-badge.on { background: var(--ms-primary-light); color: var(--ms-primary-dark); }
.pc-badge.off { background: #fee2e2; color: var(--ms-rose); }

.prod-filters {
  display: flex; gap: var(--ms-space-1);
  padding: var(--ms-space-1) var(--ms-space-2);
  background: var(--ms-bg); overflow-x: auto;
  border-bottom: 1px solid var(--ms-border);
}
.pf-chip {
  padding: 4px 12px; border-radius: 12px;
  font-size: 11px; cursor: pointer; white-space: nowrap;
  background: var(--ms-white); border: 1px solid var(--ms-border);
  color: var(--ms-text-tertiary); transition: all 0.1s;
}
.pf-chip.active { background: var(--ms-primary); color: var(--ms-white); border-color: var(--ms-primary); }
.pf-chip .cnt { font-size: 10px; margin-left: 3px; }

/* ── 商家登录页 ── */
.login-wrap { min-height: 100vh; display: flex; flex-direction: column; background: var(--ms-white); }
.login-hero {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--ms-space-8) var(--ms-space-3);
}
.login-logo { font-size: 64px; margin-bottom: var(--ms-space-2); }
.login-title { font-size: var(--ms-text-xl); font-weight: 800; color: var(--ms-text-primary); }
.login-desc { font-size: var(--ms-text-sm); color: var(--ms-text-tertiary); margin-top: var(--ms-space-1); }
.login-card { padding: var(--ms-space-3); background: var(--ms-bg); border-radius: var(--ms-radius) var(--ms-radius) 0 0; }

/* ── 商品详情页 ── */
.gallery { background: var(--ms-white); }
.gallery .main-img { width: 100%; aspect-ratio: 1/1; background: var(--ms-bg); display: flex; align-items: center; justify-content: center; }
.price-section { background: var(--ms-white); padding: var(--ms-space-1) var(--ms-space-2); }
.price-row .price { font-size: 28px; font-weight: 700; color: var(--ms-rose); }
.title-section { background: var(--ms-white); padding: 0 var(--ms-space-2) var(--ms-space-1); }

/* ── 订单详情 ── */
.detail-card {
  background: var(--ms-white); border-radius: var(--ms-radius);
  padding: var(--ms-space-2); margin: var(--ms-space-1) var(--ms-space-2);
  box-shadow: var(--ms-shadow-sm);
}

/* ── 信用分卡片 ── */
.profile-credit-card { position: relative; z-index: 2; margin-top: -20px; }

/* ── 购物车徽标 ── */
.cart-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; line-height: 18px;
  text-align: center; border-radius: 9px;
  font-size: 10px; font-weight: 700; color: var(--ms-white);
  background: var(--ms-rose); box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ── 商品网格 ── */
.prod-grid { display: grid; grid-template-columns: 1fr; gap: var(--ms-space-1); padding: var(--ms-space-1) var(--ms-space-2) var(--ms-space-8); }

/* ── 订单列表 ── */
.order-card { padding: var(--ms-space-2); margin-bottom: var(--ms-space-1); }

/* ── 支付二维码区域 ── */
.payment-qr-area { text-align: center; padding: var(--ms-space-3) 0; border-top: 1px solid var(--ms-border); margin-top: var(--ms-space-2); }


/* ── 向下兼容旧变量名 ── */
:root {
  --primary: var(--ms-primary);
  --primary-dark: var(--ms-primary-dark);
  --primary-light: var(--ms-primary-light);
  --dark: var(--ms-text-primary);
  --text: var(--ms-text-primary);
  --text2: var(--ms-text-secondary);
  --text3: var(--ms-text-tertiary);
  --border: var(--ms-border);
  --bg: var(--ms-bg);
  --card: var(--ms-card);
  --radius: var(--ms-radius);
  --green: var(--ms-primary);
  --green-dark: var(--ms-primary-dark);
  --green-light: var(--ms-primary-light);
  --shadow: var(--ms-shadow-sm);
  --shadow-lg: var(--ms-shadow-lg);
}


/* ── 向下兼容 mt-* 旧变量名 ── */
:root {
  --mt-green: var(--ms-primary);
  --mt-green-dark: var(--ms-primary-dark);
  --mt-green-light: var(--ms-primary-light);
  --mt-gold: #f59e0b;
  --mt-gold-dark: #d97706;
  --mt-rose: var(--ms-rose);
  --mt-amber: #f59e0b;
  --mt-bg: var(--ms-bg);
  --mt-card: var(--ms-card);
  --mt-radius: var(--ms-radius);
  --mt-radius-sm: var(--ms-radius-sm);
  --mt-shadow: var(--ms-shadow-sm);
  --mt-shadow-lg: var(--ms-shadow-lg);
  --mt-text1: var(--ms-text-primary);
  --mt-text2: var(--ms-text-secondary);
  --mt-text3: var(--ms-text-tertiary);
  --mt-border: var(--ms-border);
  --mt-font: var(--ms-font-family);
}

/* ── 骨架屏加载动画 ── */
@keyframes ms-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.ms-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: ms-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--ms-radius-sm, 8px);
}

/* ── 内容淡入 ── */
@keyframes ms-fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ms-fadeIn {
  animation: ms-fadeIn 0.3s ease both;
}

/* ── Toast 提示 ── */
.ms-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.78);
  color: #fff;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14px;
  z-index: 9999;
  pointer-events: none;
  animation: ms-fadeIn 0.2s ease both;
}

/* ── 空状态 ── */
.ms-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--ms-text-tertiary, #9ca3af);
  font-size: var(--ms-text-sm, 14px);
}
.ms-empty .ms-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* ── 卡片 ── */
.ms-card {
  background: var(--ms-card, #fff);
  border-radius: var(--ms-radius, 12px);
  padding: var(--ms-space-2, 16px);
  box-shadow: var(--ms-shadow, 0 1px 3px rgba(0,0,0,0.08));
  margin-bottom: var(--ms-space-1, 8px);
}

/* ── 分隔线 ── */
.ms-divider {
  height: 1px;
  background: var(--ms-border, #e5e7eb);
  margin: var(--ms-space-2, 16px) 0;
}

/* ── 徽章 ── */
.ms-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.ms-badge-success { background: #d1fae5; color: #059669; }
.ms-badge-warning { background: #fef3c7; color: #d97706; }
.ms-badge-danger { background: #fee2e2; color: #dc2626; }
.ms-badge-info { background: #dbeafe; color: #2563eb; }
.help-fab {
  position: fixed; bottom: 70px; right: 16px; z-index: 150;
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #f97316, #ec4899);
  color: #fff; font-size: 20px; border: none;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
  cursor: pointer;
}
.help-fab:active { transform: scale(0.95); }
.help-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3); z-index: 900; display: none;
}
.help-overlay.show { display: block; }