/* 分销中心（P4 用户前台）独立页样式 — 2026-09-22 从 index.html 抽出为独立页面 dist.html
   仅本页使用；外壳复用 admin-shell.css，下方补充分销模块专属布局与主题变量。 */

:root {
  --primary: #2E6CEC;
  --primary-dark: #1F57C7;
  --primary-light: #EEF4FF;
  --page: #F5F6F8;
  --card: #FFFFFF;
  --text: #1F2329;
  --muted: #646A73;
  --line: #E5E6EB;
  --soft: #F7F8FA;
  --danger: #C9363E;
  --warning: #B26A00;
  --success: #16845B;
  --radius-lg: 10px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --text-secondary: #8F959E;
  --text-tertiary: #B0B5BF;
  --border-subtle: #F0F1F2;
}

/* 卡片基础类（分销模块用 .card / .card-head / .card-body，admin-shell.css 未提供，这里补齐） */
.card {
  margin-bottom: 10px; flex-shrink: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--card); transition: border-color .15s;
}
.card:hover { border-color: #D7D9DE; }
.card-head { padding: 14px 16px 8px; }
.card-head h3 { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 15px; font-weight: 650; }
.card-head h3 .ico { color: var(--muted); font-size: 18px; }
.card-head p { margin-top: 4px; padding-left: 24px; color: var(--text-secondary); font-size: 13px; }
.card-body { padding: 7px 16px 16px; }

/* ───────────── 分销中心专属布局（原 style.css 中「分销中心（P4 用户前台）」段） ───────────── */
/* 2026-10-16（用户要求：去掉仪表盘右侧滚动条）：原 4px 0 40px 的底部 40px 是整页滚动时代的遗留，
   与 .admin-content 的 padding-bottom（dist.html 覆盖为 48px，为固定备案号留位）重复计底 ＝ 幽灵留白，
   直接砍掉；顶 4px 保留（与 Hero 卡呼吸感） */
.dist-stage { padding: 4px 0 0; max-width: 960px; margin: 0 auto; }
.dist-wrap { display: flex; flex-direction: column; gap: 14px; }
/* 侧栏一级菜单分区：仅显示当前分区（.on） */
.dist-sec { display: none; flex-direction: column; gap: 14px; }
.dist-sec.on { display: flex; }
.dist-card { background: var(--card); }
.dist-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dist-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; }
.dist-stat.primary { border-color: var(--primary); background: var(--primary-light); }
/* 统计卡可点（看明细）：hover 提亮 + 右下角「查看明细 ›」 */
.dist-stat.stat-link { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; position: relative; }
.dist-stat.stat-link:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(46,108,236,.14); transform: translateY(-2px); }
.dist-stat.stat-link::after { content: '查看明细 ›'; position: absolute; right: 10px; bottom: 8px; font-size: 12px; color: var(--primary); opacity: 0; transition: opacity .15s; }
.dist-stat.stat-link:hover::after { opacity: 1; }
.dist-stat-label { color: var(--muted); font-size: 13px; }
.dist-stat-value { margin-top: 6px; color: var(--text); font-size: 22px; font-weight: 650; }
/* 冻结佣金卡片：警示色 + 子注释 */
.dist-stat.warn { border-color: #F0B4B7; background: #FEF6F6; }
.dark .dist-stat.warn { border-color: #5A3A3C; background: #2A1E1F; }
.dist-stat-sub { display: block; margin-top: 6px; font-size: 12px; font-weight: 400; color: #C9363E; line-height: 1.4; }
.dark .dist-stat-sub { color: #F2A6A9; }
.dist-identity-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dist-identity-name { font-size: 15px; font-weight: 600; }
.dist-flex { flex: 1 1 auto; }
.dist-tag { display: inline-block; padding: 2px 8px; border-radius: 10px; background: var(--soft); color: var(--muted); font-size: 13px; }
.dist-tag.ok { background: #E8F6EF; color: var(--success); }
.dist-tag.warn { background: #FFF3E0; color: var(--warning); }
.dist-tag.muted { background: var(--border-subtle); color: var(--text-tertiary); }
/* 2026-10-15 续费提醒三档：剩 ≤7 天/已过期=red，8~30 天=amber，>30 天/永久=ok */
.dist-tag.expire-warn { background: #FFF3E0; color: #C77700; }
.dist-tag.expire-danger { background: #FEE; color: #C9363E; animation: distTagPulse 2s ease-in-out infinite; }
/* 2026-10-15 续费按钮（修复：原选择器写成 .dist-tag .renew-btn 后代关系，实际按钮是标签的兄弟节点导致样式全不生效） */
.renew-btn {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 12px;
  border-radius: 11px;
  background: linear-gradient(135deg, #1677FF 0%, #4096FF 100%);
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  vertical-align: middle;
  box-shadow: 0 1px 4px rgba(22, 119, 255, .28);
  transition: box-shadow .15s ease, transform .15s ease, background .15s ease;
}
.renew-btn:hover { background: linear-gradient(135deg, #0E5FD8 0%, #2E7FE8 100%); box-shadow: 0 2px 8px rgba(22, 119, 255, .38); }
.renew-btn:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(22, 119, 255, .3); }
.renew-btn.wechat-pay { background: linear-gradient(135deg, #07C160 0%, #25D366 100%); box-shadow: 0 1px 4px rgba(7, 193, 96, .28); }
.renew-btn.wechat-pay:hover { background: linear-gradient(135deg, #05A050 0%, #1FB855 100%); box-shadow: 0 2px 8px rgba(7, 193, 96, .38); }
.renew-btn.wechat-pay:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(7, 193, 96, .3); }
@keyframes distTagPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(201,54,62,0); } 50% { box-shadow: 0 0 0 4px rgba(201,54,62,.18); } }
.dist-promo { display: flex; flex-direction: column; gap: 8px; }
.dist-promo-item { display: flex; align-items: center; gap: 10px; }
.dist-promo-label { width: 72px; color: var(--muted); font-size: 14px; }
.dist-promo-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--text); }
.dist-promo-value.link { color: var(--primary); }
.dist-sub-title { margin: 14px 0 8px; color: var(--text); font-size: 14px; font-weight: 600; }
.dist-form-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.dist-form-row .text-input { flex: 1 1 220px; min-width: 0; }
.dist-form-row .dist-sub2 { flex: 1 1 260px; }
.dist-form-row .dist-w100 { flex: 1 1 100%; }
.dist-hint { color: var(--text-secondary); font-size: 13px; }
.dist-empty { padding: 14px 0; color: var(--text-secondary); font-size: 14px; }
.dist-table-wrap { overflow-x: auto; }
.dist-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dist-table th, .dist-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); text-align: left; white-space: nowrap; }
.dist-table th { color: var(--muted); font-weight: 600; background: var(--soft); }
.mini-btn.ghost { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.mini-btn.ghost:hover { background: var(--primary-light); }

/* ───────────── 统计卡明细弹窗（与 portal.html 的 payMask 弹窗壳同款观感） ───────────── */
.dist-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.dist-modal { width: 780px; max-width: 92vw; max-height: 82vh; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.18); display: flex; flex-direction: column; }
.dist-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.dist-modal-head b { color: var(--text); font-size: 15px; }
.dist-modal-close { border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.dist-modal-close:hover { color: var(--text); }
.dist-modal-body { padding: 14px 18px 18px; overflow-y: auto; }
.dist-detail-search { max-width: 280px; }

/* ───────────── 付款弹窗（与分站后台 portal 的进货付款弹窗同一套皮肤，改一处请同步那边） ─────────────
   说明：样式源在 portal.html 内联 <style>，本文件是它的同款副本（portal.head / dist.css 两处需同改）。 */
.dist-pay-modal { width: 420px; max-width: 92vw; }
/* 2026-10-16（用户要求）：收银台改版——顶部品名 / 大额金额 / 订单号，支付通道做大号品牌卡片；
   商户已配置时不再渲染下方「扫码支付（备用）」区。 */
.dist-pay-info {
  text-align: center; padding: 16px 14px 14px; margin-bottom: 14px;
  background: linear-gradient(180deg, #FFF6F1 0%, #FFFDFC 100%);
  border: 1px solid #F6E2D8; border-radius: var(--radius-lg);
}
.dist-pay-info .pm-goods { font-size: 13px; color: #646A73; }
.dist-pay-info .pm-amount { margin-top: 6px; font-size: 32px; font-weight: 700; color: #1D2129; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.dist-pay-info .pm-amt-cur { font-size: 18px; font-weight: 600; margin-right: 2px; vertical-align: 2px; }
.dist-pay-info .pm-order { margin-top: 6px; font-size: 12px; color: #9296A0; }
.pm-sec { padding: 2px 0; }
.pm-sec-title { font-size: 14px; font-weight: 600; color: #1F2D3D; margin-bottom: 12px; text-align: center; }
.pm-amt-mini { text-align: center; font-size: 13px; color: #646A73; margin-bottom: 10px; }
.pm-amt-mini b { color: #C9363E; font-size: 16px; }
.pm-channels { display: flex; flex-direction: column; gap: 10px; }
.pm-channel {
  display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer;
  padding: 13px 14px; border-radius: 12px; border: 1px solid transparent;
  color: #fff; text-align: left; transition: transform .12s ease, box-shadow .12s ease;
}
.pm-channel.wechat { background: linear-gradient(135deg, #0AC169, #06A855); box-shadow: 0 4px 14px rgba(7, 193, 96, .22); }
.pm-channel.alipay { background: linear-gradient(135deg, #2E8CFF, #1172E8); box-shadow: 0 4px 14px rgba(22, 119, 255, .22); }
.pm-channel:hover { transform: translateY(-1px); }
.pm-channel:active { transform: translateY(0); }
.pm-ch-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .18); display: inline-flex; align-items: center; justify-content: center; }
.pm-ch-txt { flex: 1 1 auto; min-width: 0; }
.pm-ch-txt b { display: block; font-size: 15px; font-weight: 600; }
.pm-ch-txt i { display: block; font-style: normal; font-size: 12px; opacity: .85; margin-top: 2px; }
.pm-ch-go { flex: none; font-size: 18px; opacity: .8; }
.pm-note { margin-top: 12px; font-size: 12px; color: #8F959E; text-align: center; line-height: 1.6; }
.pm-qr-wrap { display: flex; justify-content: center; margin: 4px 0 2px; }
.dist-pay-note { font-size: 13px; color: var(--text-secondary); margin-top: 14px; line-height: 1.6; }
.pay-qrs { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.pay-qr { text-align: center; }
.pay-qr img { width: 160px; height: 160px; object-fit: contain; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: #fff; }
.pay-qr .pay-qr-name { font-size: 13px; color: var(--muted); margin-top: 6px; }
.pay-qr-missing { font-size: 13px; color: var(--danger); }
/* 在线支付面板（展示层切换：商户已配置且启用时优先展示，真实链路未接通前点击回落扫码） */
.pay-online { border: 1px solid #E3EAF7; background: #F5F8FF; border-radius: var(--radius-lg); padding: 14px; margin-bottom: 16px; }
.pay-online-title { font-size: 14px; font-weight: 600; color: #1F2D3D; margin-bottom: 10px; }
.pay-online-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.online-pay-btn { border: none; color: #fff; background: #07C160; padding: 9px 18px; font-size: 13px; border-radius: var(--radius-sm); cursor: pointer; }
.online-pay-btn[data-ch="alipay"] { background: #1677FF; }
.online-pay-btn:hover { opacity: .92; }
.pay-online-tip { font-size: 13px; color: var(--text-secondary); margin-top: 10px; line-height: 1.6; }
.pay-offline-note { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; }
.pay-qr-section-title { font-size: 14px; font-weight: 600; color: #1F2D3D; margin-bottom: 10px; text-align: center; }

/* ---------------- 佣金提现（照搬代理后台 portal「提现管理」版式，2026-09-22） ----------------
   .logo-upload-btn / .logo-preview-wrap / .admin-actions / .d-btn / .text-input / .mini-btn
   均来自 admin-shell.css（dist.html 已引入），本段只补表单行与提现专属样式，
   色值与 portal.html 内联样式逐条一致；.p-form / .form-row 用作用域前缀限定在提现区，
   避免这类通用类名外溢影响页面其它区块。 */
[data-sec="withdraw"] .p-form { margin: 6px 0; }
[data-sec="withdraw"] { --wd-input-h: 32px; } /* 提现区表单输入框统一高度，标签对齐依赖它 */
[data-sec="withdraw"] .form-row { display: flex; align-items: center; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
/* 2026-10-15（用户要求）：表单标签必须与其输入框在同一行、垂直居中。
   坑：行内右侧若含会折行的内容（如「（提现需实名时必填）」被挤到输入框下一行），整块变高，
   .form-row 的 align-items:center 会把标签压到「输入框 + 提示」整块的垂直中点 ⇒ 视觉上标签掉到输入框下方。
   做法：标签改与行首对齐（align-self: flex-start）并锁定行高 = 输入框高度，使其垂直中心严格落在输入框中心；
   输入框高度也显式钉死，二者恒定一致（不再依赖各平台字体度量）。 */
[data-sec="withdraw"] .form-row > label {
  width: 84px; flex: 0 0 auto; font-size: 14px; color: #454851;
  align-self: flex-start; line-height: var(--wd-input-h); white-space: nowrap;
}
[data-sec="withdraw"] .form-row input, [data-sec="withdraw"] .form-row select { font-size: 14px; }
[data-sec="withdraw"] .form-row .text-input { height: var(--wd-input-h); }
.num { font-variant-numeric: tabular-nums; }
.wd-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 12px 0 4px; }
.wd-balance-bar { display: inline-flex; align-items: center; gap: 4px; background: #F2F7FF; border: 1px solid #D6E4FF; border-radius: 8px; padding: 7px 12px; margin: 0; font-size: 13px; color: #454851; min-width: 260px; }
.wd-balance-bar b { color: #1D2129; font-size: 16px; }
/* 冻结说明（2026-10-15）：余额扣除冻结后，补一句「冻结中 ¥X（佣金余额 ¥Y · 锁定 N 天）」，
   说明为何「可提现/可转」小于佣金余额。用继承色 + 降透明度，天然适配浅/深色主题。 */
.wd-frozen-tip { font-size: 12px; opacity: .72; margin-left: 2px; }
.wd-amount-field { display: inline-flex; align-items: center; gap: 8px; }
.wd-amount-field > label { font-size: 14px; color: #454851; flex: 0 0 auto; }
.wd-amount-input { min-width: 0; width: 130px; height: 32px; }
.wd-rules { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.wd-rule-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #646A73; background: #F7F8FA; border: 1px solid #E5E6EB; border-radius: 4px; padding: 3px 8px; }
.wd-rule-tag:first-child { color: #2E6CEC; background: #EEF4FF; border-color: #D6E4FF; }
.wd-qr-panel { background: #FAFBFC; border: 1px solid #EBEDF0; border-radius: 10px; padding: 14px; margin: 10px 0 16px; }
.wd-qr-title { font-size: 14px; color: #1D2129; font-weight: 600; margin-bottom: 10px; }
/* 2026-10-15（用户要求）：微信 / 支付宝收款码左右平行——固定两列栅格（minmax(0,1fr) 允许收窄，
   窄屏 ≤480px 回落单列）；子项 min-width:0 防止长文案把列撑破。 */
.wd-qr-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-items: start; }
.wd-qr-wrap > div { min-width: 0; }
.wd-qr-label { font-size: 13px; color: #646A73; margin-bottom: 8px; }
/* 收款码规格说明（2026-10-15 用户要求）：由「上传微信收款码」下方的小列容器移出，
   改放「保存收款码」按钮上方——容器由半列变整宽，文案恒定单行（不再折行）；与按钮一同居中。 */
.wd-qr-spec { font-size: 13px; color: #8b929c; margin: 16px 0 0; text-align: center; }
/* 保存收款码按钮居中：作用域限定在提现区收款码面板内，不改全局 .admin-actions（portal 后台共用同一份） */
.wd-qr-panel > .admin-actions { justify-content: center; margin-top: 10px; }
/* 收款账号操作行（2026-10-15 用户要求）：保存 / 修改 / 必填 从输入框右侧下移到实名提示下方，排成一行 */
.wd-acc-actions-in { display: flex; align-items: center; gap: 10px; flex: 1; flex-wrap: wrap; }
.wd-req-badge { font-size: 12px; color: #C9363E; border: 1px solid #F0B4B7; border-radius: 10px; padding: 1px 8px; }
.wd-qr-wrap .logo-preview-wrap img { max-width: 140px; max-height: 140px; border: 1px solid #EBEDF0; border-radius: 8px; }
/* 收款码脱敏（2026-10-15 用户要求）：保存后预览打码，悬停临时查看 */
.wd-qr-masked img { filter: blur(8px); transition: filter .15s; }
.wd-qr-masked:hover img { filter: none; }

/* ===== 佣金转积分（2026-10-15 新增） ===== */
.cv-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 12px; color: #9296A0; font-size: 13px; }
.cv-divider::before, .cv-divider::after { content: ''; flex: 1; height: 1px; background: #EBEDF0; }
.cv-box { background: #F6F9FF; border: 1px solid #DCE7FB; border-radius: 12px; padding: 16px; }
.cv-box .wd-amount-field { margin: 0 0 10px; }
.cv-box .wd-rule-tag:first-child { color: #2E6CEC; background: #EEF4FF; border-color: #D6E4FF; }
.cv-preview-tip { font-size: 13px; color: #8F959E; margin: 4px 0 12px; }
.cv-preview-tip b { color: #2E6CEC; font-size: 15px; }
.cv-list-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border: 1px solid #EBEDF0; border-radius: 8px; margin-bottom: 8px; background: #fff; }
.cv-list-row .cv-l-amt { font-weight: 600; color: #1D2129; }
.cv-list-row .cv-l-cr { color: #2E6CEC; font-weight: 600; }
.cv-list-row .cv-l-time { font-size: 12px; color: #9296A0; }

/* ===== B9 · 分销中心移动端响应式（2026-10-03，精准补齐缺口） ===== */
@media (max-width: 768px) {
  .dist-stage { padding: 4px 12px 36px; }
  .dist-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dist-detail-search { max-width: 100%; }
  .dist-form-row .text-input { flex-basis: 100%; }
  .dist-modal { max-width: 94vw; max-height: 88vh; }
  .dist-modal-head, .dist-modal-body { padding-left: 14px; padding-right: 14px; }
  .dist-pay-modal { width: auto; }
  .card-head, .card-body { padding-left: 14px; padding-right: 14px; }
  .dist-promo-label { width: 64px; }
}
@media (max-width: 480px) {
  .dist-grid4 { grid-template-columns: 1fr; }
  .dist-stat-value { font-size: 20px; }
  .pay-qr img { width: 140px; height: 140px; }
  .wd-balance-bar { min-width: 0; width: 100%; }
  .wd-qr-wrap { grid-template-columns: 1fr; }
}

/* ===== 分销中心左侧菜单栏字号放大（仅本页作用域，不改动 admin-shell.css，不影响后台） ===== */
html[data-page="dist"] .side-logo b { font-size: 16px; }
html[data-page="dist"] .side-logo p { font-size: 12px; }
html[data-page="dist"] .side-nav .side-item { font-size: 14px; }
html[data-page="dist"] .side-foot a { font-size: 15px; }