/* ============================================================
   kol-salary.css — KOL 工资额度与推广奖励（R6，挂总官网「邀请」下）
   浅色主题，复用 genesis-value.css 的 --gv-* 变量
   ============================================================ */

.ks-salary-section { margin-top: 24px; }

/* 身份卡 */
.ks-id-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: var(--gv-radius);
  background: linear-gradient(135deg, #f6f3ff, #eef7ff);
  border: 1px solid rgba(109, 67, 255, 0.18);
  flex-wrap: wrap;
}
.ks-id-avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: linear-gradient(135deg, #6d43ff, #2f9fed);
  color: #fff;
  flex: 0 0 auto;
}
.ks-id-meta { min-width: 180px; }
.ks-id-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ks-id-name b { font-size: 18px; color: var(--gv-ink); }
.ks-id-badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6d43ff, #2f9fed);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.ks-id-meta p { margin: 6px 0 0; color: var(--gv-copy); font-size: 13px; }
.ks-id-stats { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
.ks-id-stats div span { display: block; font-size: 12px; color: var(--gv-muted); }
.ks-id-stats div strong { font-size: 16px; color: var(--gv-ink); }
.ks-cta {
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #6d43ff, #2f9fed);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* 活动横幅 */
.ks-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 16px 20px;
  border-radius: var(--gv-radius-sm);
  background: linear-gradient(90deg, rgba(240, 124, 31, 0.12), rgba(240, 124, 31, 0.05));
  border: 1px solid rgba(240, 124, 31, 0.3);
  flex-wrap: wrap;
}
.ks-banner > div:first-child span { font-weight: 800; color: #d9640b; font-size: 15px; }
.ks-banner > div:first-child p { margin: 4px 0 0; color: var(--gv-copy); font-size: 13px; }
.ks-banner-meta { display: flex; align-items: center; gap: 16px; color: var(--gv-copy); font-size: 13px; flex-wrap: wrap; }
.ks-banner-meta b { color: var(--gv-ink); }
.ks-go {
  padding: 8px 16px;
  border-radius: 999px;
  background: #f07c1f;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

/* 三档申请卡 */
.ks-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
@media (max-width: 920px) { .ks-tier-grid { grid-template-columns: 1fr; } }
.ks-tier-card {
  position: relative;
  padding: 22px;
  border-radius: var(--gv-radius);
  background: var(--gv-surface);
  border: 1px solid var(--gv-line);
  box-shadow: var(--gv-shadow);
}
.ks-tier-card.is-recommended {
  border-color: rgba(109, 67, 255, 0.5);
  background: linear-gradient(180deg, rgba(109, 67, 255, 0.06), var(--gv-surface));
}
.ks-tier-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(109, 67, 255, 0.1);
  color: var(--gv-t15);
  font-size: 12px;
  font-weight: 700;
}
.ks-tier-card.is-recommended .ks-tier-tag {
  background: linear-gradient(135deg, #6d43ff, #2f9fed);
  color: #fff;
}
.ks-tier-card h3 { margin: 14px 0 10px; font-size: 17px; color: var(--gv-ink); }
.ks-tier-card h3 b { color: var(--gv-t15); }
.ks-tier-card p { margin: 4px 0; color: var(--gv-copy); font-size: 13px; }
.ks-tier-card button {
  width: 100%;
  margin-top: 14px;
  padding: 11px;
  border: 1px solid rgba(109, 67, 255, 0.35);
  border-radius: 999px;
  background: var(--gv-surface);
  color: var(--gv-t15);
  font-weight: 700;
  cursor: pointer;
}
.ks-tier-card.is-recommended button {
  background: linear-gradient(135deg, #6d43ff, #2f9fed);
  border-color: transparent;
  color: #fff;
}

/* 通用块 */
.ks-block {
  margin-top: 16px;
  padding: 20px;
  border-radius: var(--gv-radius);
  background: var(--gv-surface);
  border: 1px solid var(--gv-line);
  box-shadow: var(--gv-shadow);
}
.ks-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.ks-block-head h3 { margin: 0; font-size: 16px; color: var(--gv-ink); }
.ks-float-tag {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(14, 167, 124, 0.12);
  color: var(--gv-t13);
  font-size: 12px;
  font-weight: 700;
}

/* 工资额度 */
.ks-salary-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ks-salary-top strong { font-size: 26px; color: var(--gv-t15); }
.ks-salary-top span { color: var(--gv-copy); font-size: 13px; }
.ks-salary-top span b { color: var(--gv-ink); }
.ks-bar { margin: 12px 0; height: 10px; }
.ks-bar i { background: linear-gradient(90deg, #6d43ff, #0ea77c); }
.ks-salary-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--gv-copy);
  font-size: 13px;
}
.ks-salary-meta b { color: var(--gv-ink); }

/* 推广奖励 */
.ks-reward-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: stretch;
}
@media (max-width: 920px) { .ks-reward-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ks-reward-grid div {
  padding: 14px 16px;
  border-radius: var(--gv-radius-sm);
  background: var(--gv-bg-soft);
}
.ks-reward-grid div span { display: block; font-size: 12px; color: var(--gv-muted); }
.ks-reward-grid div strong { font-size: 18px; color: var(--gv-ink); }
.ks-reward-grid div.is-highlight strong { color: var(--gv-t15); }
.ks-reward-grid button {
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #6d43ff, #2f9fed);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.ks-reward-grid button:disabled { opacity: 0.55; cursor: not-allowed; }

/* 推广数据 */
.ks-data-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 920px) { .ks-data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ks-data-grid div {
  padding: 14px 16px;
  border-radius: var(--gv-radius-sm);
  background: var(--gv-bg-soft);
}
.ks-data-grid div span { display: block; font-size: 12px; color: var(--gv-muted); }
.ks-data-grid div strong { font-size: 16px; color: var(--gv-ink); }
.ks-tools {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.ks-tools button {
  padding: 9px 16px;
  border: 1px solid var(--gv-line);
  border-radius: 999px;
  background: var(--gv-surface);
  color: var(--gv-copy);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ks-tools button:disabled { opacity: 0.5; cursor: not-allowed; }
.ks-tools button[data-ks-refresh] { border-color: rgba(109, 67, 255, 0.35); color: var(--gv-t15); }

/* 订单表 */
.ks-order-table th { white-space: nowrap; }
.ks-order-table td { white-space: nowrap; }

/* 排行 */
.ks-rank-top .invite-leaderboard-row { grid-template-columns: 44px 1fr 1fr 1fr; }
.ks-rank-mine { color: var(--gv-copy); }

/* 底部召唤 */
.ks-cta-strip {
  margin-top: 16px;
  padding: 22px;
  border-radius: var(--gv-radius);
  background: linear-gradient(135deg, #6d43ff, #2f9fed);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ks-cta-strip h3 { margin: 0 0 6px; font-size: 17px; }
.ks-cta-strip p { margin: 0; font-size: 13px; opacity: 0.85; }
.ks-cta-strip button {
  padding: 11px 22px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--gv-t15);
  font-weight: 800;
  cursor: pointer;
}
.ks-cta-strip button:disabled { opacity: 0.6; cursor: not-allowed; }