/* ============================================================================
   推广分佣页面（代理商前台）· 视觉改版样式
   ----------------------------------------------------------------------------
   【2026-09-19 新增】独立文件，不改动 style.css，避免影响其它页面。
   命名空间：所有类名一律 `ac-` 前缀，与本页原有 `.agent-*` 类名互不干扰。
   主题适配：全部颜色取自项目已有的 CSS 变量（--bg-card / --primary-color /
   --border-color / --text-* / --radius-*），因此 4 套主题自动跟随，无需各写一套。
   形状系统：卡片 18px · 控件 10px · 胶囊 999px（全页统一，不混用）
   ============================================================================ */

/* ---------- 1. 本页专用派生令牌（只挂在 .agent-promo-page 上，不外泄到其它页面） ---------- */
.agent-promo-page {
  --ac-r-card: 18px;
  --ac-r-ctl: 10px;
  --ac-r-pill: 999px;
  --ac-ink: var(--text-primary);
  --ac-ink-2: var(--text-secondary);
  --ac-ink-3: var(--text-muted);
  --ac-hair: var(--border-color);
  --ac-surface: var(--bg-card);
  --ac-sunken: var(--bg-tertiary);
  --ac-elev: 0 1px 2px rgba(16, 22, 42, .04), 0 10px 28px -14px rgba(16, 22, 42, .22);
  --ac-elev-hi: 0 2px 4px rgba(16, 22, 42, .05), 0 18px 42px -16px rgba(16, 22, 42, .28);
  --ac-gloss: inset 0 1px 0 rgba(255, 255, 255, .55);
  --ac-ring: 0 0 0 3px var(--primary-light);
  --ac-ease: cubic-bezier(.16, 1, .3, 1);
  gap: 16px;
}

/* 数字统一等宽对齐，滚动/刷新时不会左右跳 */
.ac-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* 入场动效：默认隐藏，由 JS 加 .ac-in 后入场；JS 未执行（脚本报错）时也不会永久隐藏 */
.ac-rise { opacity: 0; transform: translateY(18px); }
.ac-rise.ac-in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ac-ease), transform .55s var(--ac-ease);
}
@media (prefers-reduced-motion: reduce) {
  .ac-rise { opacity: 1; transform: none; }
  .ac-rise.ac-in { transition: none; }
}

/* ---------- 2. 统计卡片区 ---------- */
.ac-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

/* 五张卡片各自一个色相（蓝 / 绿 / 琥珀 / 紫 / 玫红）。
   这套是**固定分类色**，不随主题变化：否则在"海洋"主题下第 1 张会和主题蓝撞色、
   在"清新"主题下第 2 张会和主题绿撞色。按钮/链接/图表仍跟随主题色。 */
.ac-stat {
  position: relative;
  overflow: hidden;
  padding: 15px 16px 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--hue, var(--primary-color)) 11%, var(--ac-surface)) 0%,
      color-mix(in srgb, var(--hue, var(--primary-color)) 4%, var(--ac-surface)) 46%,
      var(--ac-surface) 72%);
  /* 卡片不显示边线（用户要求） */
  border: 0;
  border-radius: var(--ac-r-card);
  box-shadow: var(--ac-elev), var(--ac-gloss);
  transition: transform .26s var(--ac-ease), box-shadow .26s var(--ac-ease), border-color .26s var(--ac-ease);
}
/* 悬浮：轻微抬起 + 跟随鼠标的柔光（--mx/--my 由 JS 写 CSS 变量，不触发重排） */
.ac-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--ac-elev-hi), var(--ac-gloss);
}
.ac-stat::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .3s var(--ac-ease);
  background: radial-gradient(240px 160px at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--hue, var(--primary-color)) 13%, transparent), transparent 70%);
}
.ac-stat:hover::before { opacity: 1; }
/* 卡片顶部不加任何横线 / 色条（业务方明确要求），类别靠图标底色与徽标区分 */

.ac-stat-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ac-stat-ico {
  width: 28px; height: 28px; flex: none; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--hue, var(--primary-color)) 14%, transparent);
  color: var(--hue, var(--primary-color));
}
.ac-stat-ico svg { width: 15px; height: 15px; display: block; }
.ac-stat-label { font-size: 12px; font-weight: 600; color: var(--ac-ink-2); letter-spacing: .1px; }
.ac-stat-badge {
  margin-left: auto; height: 19px; padding: 0 7px; border-radius: var(--ac-r-pill);
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
  background: color-mix(in srgb, var(--hue, var(--primary-color)) 12%, transparent);
  color: var(--hue, var(--primary-color));
}

/* 主数值：每张卡片的视觉锚点 */
.ac-stat-val { display: flex; align-items: baseline; gap: 3px; line-height: 1; }
.ac-stat-val .ac-cur { font-size: 15px; font-weight: 600; color: var(--ac-ink-2); margin-right: 1px; }
.ac-stat-val .ac-n { font-size: 30px; font-weight: 700; letter-spacing: -1px; color: var(--ac-ink); }
.ac-stat-val .ac-u { font-size: 12px; font-weight: 600; color: var(--ac-ink-3); margin-left: 3px; }
.ac-stat-cap { margin-top: 6px; font-size: 11px; color: var(--ac-ink-3); min-height: 16px; }

/* 微指标条：把"直推 5 人 ｜ 含下级代理商发展的客户"这类散文改成结构化网格，
   三列等分、标签在上数值在下，五张卡片横向对齐 */
.ac-metrics {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  margin: 13px -16px 0; padding: 0 0 13px;
  border-top: 0;
}
.ac-m { padding: 11px 12px 0; min-width: 0; }
.ac-m + .ac-m { border-left: 0; }
.ac-m-k { display: block; font-size: 10.5px; color: var(--ac-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-m-v { display: block; margin-top: 3px; font-size: 14px; font-weight: 700; color: var(--ac-ink); letter-spacing: -.2px; }
.ac-m-v.ac-hi { color: var(--hue, var(--primary-color)); }
.ac-m-v small { font-size: 10.5px; font-weight: 600; color: var(--ac-ink-3); margin-left: 2px; letter-spacing: 0; }
.ac-m-bar { margin-top: 5px; height: 3px; border-radius: 2px; background: var(--ac-sunken); overflow: hidden; }
.ac-m-bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--hue, var(--primary-color)); transition: width .9s var(--ac-ease); }

/* ---------- 3. 通用卡片 ---------- */
.ac-card {
  display: flex; flex-direction: column;
  background: var(--ac-surface); border: 0; border-radius: var(--ac-r-card);
  box-shadow: var(--ac-elev), var(--ac-gloss); overflow: hidden;
}
/* 卡头统一高度 56px：卡头里有分段控件的图表卡原本会比别的卡高 14px，
   会把同一行两张图表的画布撑成不一样高（228 vs 214），定死高度后彻底对齐。 */
.ac-card-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  box-sizing: border-box; min-height: 56px;
  padding: 13px 16px; border-bottom: 0;
}
.ac-card-title { font-size: 13px; font-weight: 700; color: var(--ac-ink); display: inline-flex; align-items: center; gap: 7px; }
.ac-card-title svg { width: 14px; height: 14px; color: var(--ac-ink-3); }
.ac-card-sub { font-size: 11.5px; color: var(--ac-ink-3); }
.ac-card-head-r { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-card-body { padding: 14px 16px; flex: 1 1 auto; display: flex; flex-direction: column; }
/* 底部信息条：贴卡片底，把"凑等高"多出来的空间变成一块真有内容的地方 */
.ac-card-foot {
  margin-top: auto; padding: 10px 16px; border-top: 0;
  font-size: 11px; color: var(--ac-ink-3); line-height: 1.6;
}
.ac-card-foot svg { width: 12px; height: 12px; vertical-align: -1.5px; margin-right: 5px; color: var(--primary-color); }

/* 全页统一两栏网格：上下两行都用同一套「1fr : 1fr + 12px」，
   所以四张卡片宽度严格一致；同行两卡默认 stretch → 高度也一致。 */
.ac-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }

/* ---------- 4. 推广链接卡 ---------- */
.ac-linkbox { display: flex; flex-direction: column; gap: 10px; }
.ac-linkbar {
  display: flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 6px 0 12px;
  background: var(--ac-sunken); border: 0; border-radius: var(--ac-r-ctl);
  transition: box-shadow .2s var(--ac-ease);
}
.ac-linkbar:focus-within { box-shadow: var(--ac-ring); }
.ac-linkbar .ac-tag {
  font-size: 10.5px; font-weight: 700; color: var(--primary-color); background: var(--primary-light);
  padding: 2px 7px; border-radius: var(--ac-r-pill); flex: none;
}
.ac-linkbar .ac-url {
  flex: 1; min-width: 0; font-family: Consolas, "SF Mono", Menlo, monospace; font-size: 12px;
  color: var(--ac-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 推广效果小结：与统计卡的微指标条同一套语言 */
.ac-link-stats {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--ac-sunken); border: 0; border-radius: var(--ac-r-ctl);
}
.ac-ls { padding: 10px 12px; min-width: 0; }
.ac-ls + .ac-ls { border-left: 0; }
.ac-ls-k { display: block; font-size: 10.5px; color: var(--ac-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-ls-v { font-size: 17px; font-weight: 700; color: var(--primary-color); letter-spacing: -.3px; margin-top: 2px; }
.ac-ls-u { font-size: 11px; font-weight: 600; color: var(--ac-ink-3); margin-left: 3px; }

/* ---------- 5. 按钮 ---------- */
.ac-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: var(--ac-r-ctl); cursor: pointer;
  border: 1px solid var(--ac-hair); background: var(--ac-surface); color: var(--ac-ink-2);
  font-size: 12px; font-weight: 600; white-space: nowrap; font-family: inherit;
  transition: transform .16s var(--ac-ease), background .2s var(--ac-ease),
              border-color .2s var(--ac-ease), color .2s var(--ac-ease), box-shadow .2s var(--ac-ease);
}
.ac-btn svg { width: 13px; height: 13px; }
.ac-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
.ac-btn:active { transform: translateY(1px) scale(.985); }
.ac-btn-primary { background: var(--primary-color); border-color: var(--primary-color); color: #fff; box-shadow: 0 2px 8px -2px var(--primary-color); }
.ac-btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.ac-btn-sm { height: 28px; padding: 0 11px; font-size: 11.5px; }

/* ---------- 6. 表单 ---------- */
.ac-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ac-field > label { font-size: 11.5px; font-weight: 600; color: var(--ac-ink-2); }
.ac-input {
  height: 38px; padding: 0 12px; width: 100%; box-sizing: border-box;
  border: 1px solid var(--ac-hair); border-radius: var(--ac-r-ctl);
  background: var(--bg-input); color: var(--ac-ink); font-size: 12.5px; font-family: inherit;
  transition: border-color .2s var(--ac-ease), box-shadow .2s var(--ac-ease), background .2s var(--ac-ease);
}
.ac-input::placeholder { color: var(--ac-ink-3); }
.ac-input:focus { outline: none; border-color: var(--primary-color); background: var(--ac-surface); box-shadow: var(--ac-ring); }
.ac-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ac-inline-form {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--ac-r-ctl);
  background: var(--ac-sunken); border: 1px dashed var(--ac-hair);
}
.ac-inline-form .ac-input { width: 108px; height: 32px; }
.ac-msg { font-size: 11.5px; font-weight: 600; color: var(--success-color); }
.ac-msg.ac-err { color: var(--danger-color); }
.ac-result {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--ac-r-ctl);
  background: var(--primary-light);
  border: 1px solid color-mix(in srgb, var(--primary-color) 28%, transparent);
}
.ac-result code {
  font-family: Consolas, "SF Mono", Menlo, monospace; font-size: 14px; font-weight: 700;
  letter-spacing: .1em; color: var(--primary-color);
}

/* ---------- 7. 图表卡 ---------- */
/* 图表容器撑满剩余高度：左右两张图表卡等高，画布也跟着等高 */
.ac-chart-box { position: relative; flex: 1 1 auto; min-height: 214px; }
.ac-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ac-ink-3); }
.ac-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* 分段控件（图表时间范围切换） */
.ac-seg {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--ac-sunken); border: 1px solid var(--ac-hair); border-radius: var(--ac-r-pill);
}
.ac-seg button {
  height: 22px; padding: 0 10px; border: 0; border-radius: var(--ac-r-pill); cursor: pointer;
  background: transparent; color: var(--ac-ink-3); font-size: 11.5px; font-weight: 600; font-family: inherit;
  transition: background .2s var(--ac-ease), color .2s var(--ac-ease);
}
.ac-seg button:hover { color: var(--ac-ink); }
.ac-seg button[aria-selected="true"] { background: var(--ac-surface); color: var(--primary-color); box-shadow: var(--shadow-sm); }

/* 图表外部 HTML 提示气泡 */
.ac-tip {
  position: absolute; pointer-events: none; z-index: 5; opacity: 0;
  transform: translate(-50%, -112%) scale(.96);
  transition: opacity .16s ease, transform .16s cubic-bezier(.16, 1, .3, 1);
  background: var(--text-primary); color: var(--bg-card);
  border-radius: 10px; padding: 8px 11px;
  font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap;
  box-shadow: 0 10px 30px -8px rgba(16, 22, 42, .45);
}

/* ---------- 8. 表格卡：表格本身沿用项目原有 .data-table / .agent-table，样式不变 ---------- */
.ac-table-wrap { overflow-x: auto; }
.ac-table-wrap::-webkit-scrollbar { height: 6px; }
.ac-table-wrap::-webkit-scrollbar-thumb { background: var(--ac-hair); border-radius: 3px; }
.ac-locked {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; color: var(--ac-ink-3);
  background: var(--ac-sunken); border: 1px solid var(--ac-hair);
  padding: 2px 8px; border-radius: var(--ac-r-pill);
}
.ac-locked svg { width: 11px; height: 11px; }

/* 下级代理商汇总条 */
.ac-sum { font-size: 12px; color: var(--ac-ink-3); }
.ac-sum b { color: var(--ac-ink); }

/* ---------- 10. 响应式 ---------- */
@media (max-width: 1240px) {
  .ac-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ac-two-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ac-stats { grid-template-columns: minmax(0, 1fr); }
  .ac-stat-val .ac-n { font-size: 26px; }
  .ac-form-grid { grid-template-columns: 1fr; }
}

/* ---------- 11. 不支持 color-mix 的旧内核兜底：退化为纯色，不报错、不透明 ---------- */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .ac-stat { background: var(--ac-surface); border-color: var(--ac-hair); }
  .ac-stat-ico, .ac-stat-badge { background: var(--primary-light); color: var(--primary-color); }
  .ac-stat::before { background: none; }
  .ac-result { border-color: var(--primary-color); }
}