/* ==========================================================================
 * PAY-UI：全站唯一设计系统（对标 IDC tailwind.config.js + main.css token 层）
 * --------------------------------------------------------------------------
 * 规矩：
 * 1. 所有“长相”决策（色值/圆角/字号/间距/组件样式）只在这里定义；
 * 2. admin.html 内联 <style>、merchant.html Tailwind 工具类只写布局，
 *    不得再出现按钮/徽标/卡片/输入/表格的视觉属性；
 * 3. idc-theme.css / nimbus-palette.css 只保留深色模式与真正的页面特例，
 *    不得再定义本文件已有的组件；
 * 4. 改动本文件即改全站，提交前双端截图验证。
 * ========================================================================== */

:root {
  /* 主色（Nimbus 靛蓝，对标 IDC primary） */
  --pay-primary: #5e6ad2;
  --pay-primary-strong: #4f5bc9;
  /* 墨 / 雾 / 线 / 面 / 底 */
  --pay-text: #0b0e14;
  --pay-muted: #525a68;
  --pay-line: #e9ebf0;
  --pay-surface: #ffffff;
  --pay-bg: #fbfbfc;
  --pay-soft: #f4f5f7;
  /* 语义色（对标 IDC tailwind.config.js） */
  --pay-success: #16a34a;
  --pay-warning: #d97706;
  --pay-danger: #dc2626;
  --pay-info: #0284c7;
  /* 圆角：按钮全胶囊 */
  --pay-radius-btn: 999px;
  --pay-radius-card: 12px;
  --pay-radius-input: 8px;
  --pay-radius-pill: 999px;
  /* 字阶 */
  --pay-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --pay-text-sm: 14px;
  --pay-text-xs: 12px;
  /* 阴影（内容卡片） */
  --pay-shadow: 0 0 0 1px rgb(17 17 26 / 0.04), 0 1px 2px rgb(17 17 26 / 0.04),
    0 8px 24px -14px rgb(17 17 26 / 0.12);
}

/* ==========================================================================
 * 按钮（对标 IDC .btn 体系：扁平实心主钮 + 幽灵次钮 + tint 语义钮）
 * ========================================================================== */
.pay-btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  height: 36px;
  padding: 0 16px;
  font-size: var(--pay-text-sm);
  font-weight: 500;
  background: transparent;
  border: 1px solid #d1d5db;
  border-radius: var(--pay-radius-btn);
  color: #111827;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, filter 0.15s ease;
}
/* 链接型按钮（a.pay-btn）所有状态都不允许下划线 */
.pay-btn:hover, .pay-btn:focus, .pay-btn:active, .pay-btn:visited,
.btn:hover, .btn:focus, .btn:active, .btn:visited { text-decoration: none; }
.pay-btn:hover,
.btn:hover { background: rgba(0, 0, 0, 0.04); }
.pay-btn:disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pay-btn:active,
.btn:active { transform: scale(0.97); }

.pay-btn-primary,
.btn-primary {
  background: var(--pay-primary);
  border-color: var(--pay-primary);
  color: #fff;
}
.pay-btn-primary:hover,
.btn-primary:hover { background: var(--pay-primary-strong); border-color: var(--pay-primary-strong); }

.pay-btn-secondary,
.btn-secondary {
  background: transparent;
  border-color: #d1d5db;
  color: #111827;
}
.pay-btn-secondary:hover,
.btn-secondary:hover { background: rgba(0, 0, 0, 0.04); }

.pay-btn-ghost,
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: #6b7280;
}
.pay-btn-ghost:hover,
.btn-ghost:hover { background: rgba(0, 0, 0, 0.04); }

.pay-btn-danger,
.btn-danger {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.25);
  color: var(--pay-danger);
}
.pay-btn-danger:hover,
.btn-danger:hover { background: rgba(220, 38, 38, 0.14); }

.pay-btn-warning,
.btn-warning {
  background: rgba(217, 119, 6, 0.10);
  border-color: rgba(217, 119, 6, 0.28);
  color: var(--pay-warning);
}
.pay-btn-warning:hover,
.btn-warning:hover { background: rgba(217, 119, 6, 0.16); }

.pay-btn-success,
.btn-success {
  background: rgba(22, 163, 74, 0.10);
  border-color: rgba(22, 163, 74, 0.28);
  color: var(--pay-success);
}
.pay-btn-success:hover,
.btn-success:hover { background: rgba(22, 163, 74, 0.16); }

/* 尺寸（对标 IDC btn-sm；xs 用于表内迷你按钮；高度固定、宽度随内容自适应） */
.pay-btn-sm,
.btn-sm { height: 30px; padding: 0 12px; font-size: var(--pay-text-xs); }
.pay-btn-xs,
.btn-xs { height: 24px; padding: 0 8px; font-size: var(--pay-text-xs); }
.pay-btn i,
.btn i { line-height: 1; }

/* ==========================================================================
 * 徽标（对标 IDC rounded-full tint badge）
 * ========================================================================== */
.pay-badge,
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--pay-radius-pill);
  font-size: var(--pay-text-xs);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.pay-badge-success,
.badge-success {
  background: rgba(22, 163, 74, 0.10) !important;
  color: var(--pay-success) !important;
}
.pay-badge-warning,
.badge-warning {
  background: rgba(217, 119, 6, 0.12) !important;
  color: var(--pay-warning) !important;
}
.pay-badge-danger,
.badge-danger {
  background: rgba(220, 38, 38, 0.08) !important;
  color: var(--pay-danger) !important;
}
.pay-badge-info,
.badge-info {
  background: rgba(2, 132, 199, 0.10) !important;
  color: var(--pay-info) !important;
}

/* 二维码缩略图保持 8px（不跟按钮走胶囊） */
.pay-qr {
  border-radius: 8px !important;
}

/* ==========================================================================
 * 数据卡（管理/商户仪表盘通用，对标 IDC 六卡：图标标题/语义数值/明细双列）
 * ========================================================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .stats-grid { grid-template-columns: repeat(6, 1fr); }
}
.stat-card {
  background: var(--pay-surface);
  padding: 20px;
  border: 1px solid var(--pay-line);
  border-radius: var(--pay-radius-card);
  box-shadow: var(--pay-shadow);
}
.stat-card h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pay-muted);
  margin: 0 0 8px;
}
.stat-card h3 i { font-size: 16px; }
.stat-card .value {
  font-size: 24px;
  font-weight: 700;
  color: var(--pay-text);
  font-variant-numeric: tabular-nums;
}
.stat-card .sub {
  font-size: 12px;
  color: var(--pay-muted);
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--pay-line);
  line-height: 1.6;
}
.stat-sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.stat-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.stat-kv span:first-child { color: var(--pay-muted); white-space: nowrap; }
.stat-kv span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-card.tone-blue .value, .stat-card.tone-blue h3 i,
.stat-card.tone-blue .stat-kv span:last-child { color: #2563eb !important; }
.stat-card.tone-violet .value, .stat-card.tone-violet h3 i,
.stat-card.tone-violet .stat-kv span:last-child { color: #7c3aed !important; }
.stat-card.tone-amber .value, .stat-card.tone-amber h3 i,
.stat-card.tone-amber .stat-kv span:last-child { color: #d97706 !important; }
.stat-card.tone-cyan .value, .stat-card.tone-cyan h3 i,
.stat-card.tone-cyan .stat-kv span:last-child { color: #0891b2 !important; }
.stat-card.tone-rose .value, .stat-card.tone-rose h3 i,
.stat-card.tone-rose .stat-kv span:last-child { color: #e11d48 !important; }
.stat-card.tone-emerald .value, .stat-card.tone-emerald h3 i,
.stat-card.tone-emerald .stat-kv span:last-child { color: #059669 !important; }
html.dark .stat-card { background: #131417; border-color: #1e222b; }
html.dark .stat-card h3,
html.dark .stat-card .sub,
html.dark .stat-card .stat-kv span:first-child { color: #98a1b0 !important; }
html.dark .stat-card.tone-blue .value, html.dark .stat-card.tone-blue h3 i,
html.dark .stat-card.tone-blue .stat-kv span:last-child { color: #8b8ff5 !important; }
html.dark .stat-card.tone-violet .value, html.dark .stat-card.tone-violet h3 i,
html.dark .stat-card.tone-violet .stat-kv span:last-child { color: #a78bfa !important; }
html.dark .stat-card.tone-amber .value, html.dark .stat-card.tone-amber h3 i,
html.dark .stat-card.tone-amber .stat-kv span:last-child { color: #fbbf24 !important; }
html.dark .stat-card.tone-cyan .value, html.dark .stat-card.tone-cyan h3 i,
html.dark .stat-card.tone-cyan .stat-kv span:last-child { color: #22d3ee !important; }
html.dark .stat-card.tone-rose .value, html.dark .stat-card.tone-rose h3 i,
html.dark .stat-card.tone-rose .stat-kv span:last-child { color: #fb7185 !important; }
html.dark .stat-card.tone-emerald .value, html.dark .stat-card.tone-emerald h3 i,
html.dark .stat-card.tone-emerald .stat-kv span:last-child { color: #34d399 !important; }

/* ==========================================================================
 * 内容面板（管理端 .card 同构；间距归页面层，见 admin 内联 .page .pay-panel）
 * ========================================================================== */
.pay-panel {
  background: var(--pay-surface);
  border: 1px solid var(--pay-line);
  border-radius: var(--pay-radius-card);
  box-shadow: var(--pay-shadow);
}

/* ==========================================================================
 * 表单输入（对标 IDC .input：12px 字 / 12px 14px 垫衬 / 8px 圆角 / 聚焦紫环）
 * ========================================================================== */
.pay-input {
  width: 100%;
  padding: 12px 14px;
  font-size: var(--pay-text-sm);
  border: 1px solid #d1d5db;
  border-radius: var(--pay-radius-input);
  background: #fff;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.pay-input:focus {
  background: #fff;
  border-color: var(--pay-primary);
  box-shadow: 0 0 0 3px rgba(94, 106, 210, 0.18);
}
.pay-input::placeholder {
  color: var(--pay-muted);
  opacity: 1;
}

/* ---------- 链路状态表：前后台同一套行高/间距（显式写死，覆盖 UA 默认 separate+2px 与 Tailwind preflight 差异） ---------- */
.chain-table { border-collapse: collapse !important; border-spacing: 0 !important; width: 100% !important; }
.chain-table th,
.chain-table td { padding: 10px 12px !important; text-align: left !important; vertical-align: middle !important; }

/* ---------- 内容卡头/卡体：前后台同一套标题高度（原仅管理端页内 style 有定义，商户端缺失） ---------- */
.card-header { padding: 16px 20px !important; border-bottom: 1px solid #e9ebf0 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; }
.card-header h2 { font-size: 16px !important; font-weight: 700 !important; margin: 0 !important; }
.card-body { padding: 20px !important; }