/* ============================================================
   学习中心 · 共用样式
   手机优先（375px 基准），大字、大间距、多色分区，方便团长/代理/商家自己看
   ============================================================ */

:root {
  /* 主色（与经营助手一致的中国红） */
  --brand: #D7000F;
  --brand-soft: #FFF1F1;

  /* 三角色主题色 */
  --leader: #EA580C;      --leader-bg: #FFF7ED;   /* 团长 · 橙 */
  --agent: #7C3AED;       --agent-bg: #F5F3FF;    /* 代理 · 紫 */
  --merchant: #0E7490;    --merchant-bg: #ECFEFF; /* 商家 · 青 */

  /* 语义色 */
  --good: #15803D;  --good-bg: #F0FDF4;
  --warn: #B45309;  --warn-bg: #FFFBEB;
  --bad:  #B91C1C;  --bad-bg:  #FEF2F2;
  --info: #1D4ED8;  --info-bg: #EFF6FF;

  --text: #1C1917;
  --muted: #78716C;
  --line: #E7E5E4;
  --surface: #FFFFFF;
  --page: #F7F6F4;

  --radius: 14px;
  --shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  padding: 0 0 56px;
  background: var(--page);
  color: var(--text);
  font: 16px/1.75 -apple-system, BlinkMacSystemFont, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ---------- 顶部 ---------- */

.doc-hero {
  padding: 26px 20px 22px;
  background: var(--role-color, var(--brand));
  color: #fff;
}
.doc-hero.leader   { --role-color: var(--leader); }
.doc-hero.agent    { --role-color: var(--agent); }
.doc-hero.merchant { --role-color: var(--merchant); }

.doc-hero-kicker {
  font-size: 13px;
  opacity: .85;
  letter-spacing: .08em;
}
.doc-hero h1 {
  margin: 6px 0 8px;
  font-size: 27px;
  line-height: 1.25;
  font-weight: 800;
}
.doc-hero p {
  margin: 0;
  font-size: 15px;
  opacity: .95;
}

/* 返回经营助手 */
.back-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
}
.back-bar a { color: var(--brand); text-decoration: none; }

/* ---------- 正文容器 ---------- */

.wrap { padding: 4px 16px; max-width: 760px; margin: 0 auto; }

section {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 16px;
  margin: 14px 0;
}

h2 {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 9px;
}
h2 .n {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--role-color, var(--brand));
  color: #fff;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
h3 {
  margin: 20px 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
h3:first-of-type { margin-top: 4px; }

p { margin: 9px 0; }
ul, ol { margin: 9px 0; padding-left: 22px; }
li { margin: 6px 0; }

strong { font-weight: 700; }
code {
  background: #F5F5F4;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 14px;
}

/* ---------- 表格（手机上可横向滚动，不挤成一坨） ---------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px -4px; }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 320px;
  font-size: 15px;
}
th, td {
  padding: 10px 11px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  background: #FAFAF9;
  font-weight: 700;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }

/* ---------- 分值胶囊 ---------- */

.pts {
  display: inline-block;
  min-width: 44px;
  padding: 2px 9px;
  border-radius: 100px;
  background: var(--good-bg);
  color: var(--good);
  font-weight: 800;
  font-size: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pts.big   { background: var(--brand-soft); color: var(--brand); }
.pts.zero  { background: #F5F5F4; color: var(--muted); }

/* 等级徽章 */
.lv {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 800;
  background: #F5F5F4;
  color: var(--text);
}
.lv.c0,.lv.m1,.lv.v1 { background: #F1F5F9; color: #475569; }
.lv.c1,.lv.m2 { background: #DCFCE7; color: #15803D; }
.lv.c2,.lv.m3 { background: #DBEAFE; color: #1D4ED8; }
.lv.c3,.lv.m4,.lv.v2 { background: #FEF3C7; color: #B45309; }
.lv.c4,.lv.m5,.lv.v3 { background: #FEE2E2; color: #B91C1C; }

/* ---------- 提示块 ---------- */

.callout {
  border-radius: 12px;
  padding: 12px 14px;
  margin: 14px 0;
  font-size: 15px;
  border-left: 4px solid;
}
.callout .t { font-weight: 800; display: block; margin-bottom: 3px; }
.callout.tip   { background: var(--good-bg);  border-color: var(--good);  color: #14532D; }
.callout.warn  { background: var(--warn-bg);  border-color: var(--warn);  color: #78350F; }
.callout.bad   { background: var(--bad-bg);   border-color: var(--bad);   color: #7F1D1D; }
.callout.info  { background: var(--info-bg);  border-color: var(--info);  color: #1E3A8A; }

/* ---------- 步骤 ---------- */

.steps { counter-reset: s; list-style: none; padding: 0; margin: 12px 0; }
.steps li {
  counter-increment: s;
  position: relative;
  padding: 0 0 14px 40px;
  margin: 0;
}
.steps li::before {
  content: counter(s);
  position: absolute;
  left: 0; top: 1px;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: var(--role-color, var(--brand));
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px; top: 30px; bottom: 2px;
  width: 2px;
  background: var(--line);
}
.steps li b { display: block; }

/* ---------- 卡片网格（学习中心首页） ---------- */

.cards { display: grid; gap: 13px; margin: 16px 0; }
.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 17px 16px;
  border-left: 5px solid var(--k, var(--brand));
  transition: transform .15s ease;
}
.card:active { transform: scale(.985); }
.card .ico { font-size: 26px; line-height: 1; }
.card .ttl { font-size: 18px; font-weight: 800; margin: 8px 0 4px; }
.card .sub { font-size: 14px; color: var(--muted); margin: 0; }
.card .tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.card .tag {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 100px;
  background: #F5F5F4;
  color: var(--muted);
}
.card.leader   { --k: var(--leader); }
.card.agent    { --k: var(--agent); }
.card.merchant { --k: var(--merchant); }

/* ---------- 商家手册：三条收入卡（2026-11-05） ---------- */
.income-list {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}
.income-card {
  --k: var(--brand);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid var(--k);
  border-radius: var(--radius);
  padding: 14px 15px;
  box-shadow: var(--shadow);
}
.income-card.retail { --k: var(--brand); }
.income-card.distribution { --k: var(--merchant); }
.income-card.wholesale { --k: var(--warn); }
.income-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.income-name {
  font-size: 17px;
  font-weight: 800;
}
.income-badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: #F5F5F4;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.income-flow {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-break: strict;
}
.income-money {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 14px;
}
.income-money strong {
  display: block;
  margin-bottom: 3px;
  color: var(--k);
  font-size: 12px;
  letter-spacing: .04em;
}
.income-money p { margin: 0; line-break: strict; }

/* ---------- 折叠（可选） ---------- */

details {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 14px;
  margin: 10px 0;
  background: #FDFDFC;
}
details summary {
  cursor: pointer;
  padding: 12px 0;
  font-weight: 700;
  font-size: 15px;
  list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: " ＋"; color: var(--muted); }
details[open] summary::after { content: " −"; }
details > :not(summary) { margin-bottom: 12px; }

/* ---------- 页脚 ---------- */

.foot {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 22px 16px 8px;
}