/* ============================================================
   MOKA B2C 设计令牌与公共样式（与设计稿/设计系统一致）
   主色 #FF6700 / 浅底 #FFF5F0 / 正文 #1A1A1C / 页底 #F5F5F5
   ============================================================ */
:root {
  --brand: #FF6700;
  --brand-hover: #F25700;
  --brand-light: #FFF5F0;
  --text: #1A1A1C;
  --text-sub: #666666;
  --text-muted: #999999;
  --page-bg: #F5F5F5;
  --card-bg: #FFFFFF;
  --border: #E8E8E8;
  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;
  --radius-card: 12px;
  --radius-btn: 8px;
  --radius-pill: 999px;
  --content-width: 1200px;
  --font: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 14px; }
body { font-family: var(--font); color: var(--text); background: var(--page-bg); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }
img { max-width: 100%; display: block; }

h1 { font-size: 40px; font-weight: 700; }
h2 { font-size: 24px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 500; }
.muted { color: var(--text-sub); }

.container { max-width: var(--content-width); margin: 0 auto; padding: 0 16px; }

.card {
  background: var(--card-bg);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.btn-primary {
  display: inline-block;
  background: var(--brand); color: #fff;
  border: none; border-radius: var(--radius-btn);
  padding: 10px 28px; font-size: 14px; cursor: pointer;
  transition: background .2s;
}
.btn-primary:hover { background: var(--brand-hover); color: #fff; }
.btn-plain {
  display: inline-block; background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-btn);
  padding: 10px 28px; cursor: pointer;
}

.tag { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 12px; }
.tag-brand { background: var(--brand-light); color: var(--brand); }
.tag-success { background: #ECFDF5; color: var(--success); }
.tag-warning { background: #FFFBEB; color: var(--warning); }
.tag-danger { background: #FEF2F2; color: var(--danger); }
.tag-grey { background: #F3F4F6; color: var(--text-sub); }

/* ---- 错误页（P-19） ---- */
.error-page { text-align: center; padding: 120px 16px; }
.error-code { font-size: 96px; font-weight: 700; color: var(--brand); line-height: 1; }
.error-msg { font-size: 18px; color: var(--text-sub); margin: 16px 0 8px; }
.error-trace { font-size: 12px; color: var(--text-muted); margin-bottom: 24px; }
.error-trace code { background: #F3F4F6; padding: 2px 8px; border-radius: 4px; }

/* ---- 三档响应式断点：>=1200 / 768-1199 / <768 ---- */
@media (max-width: 1199px) { .container { max-width: 100%; } h1 { font-size: 32px; } }
@media (max-width: 767px) { h1 { font-size: 26px; } h2 { font-size: 20px; } .card { padding: 16px; } }