/* ==========================================================================
   FinLearn 设计令牌与组件档位（最终收敛层）
   --------------------------------------------------------------------------
   审计发现的问题：全站内边距有 18—19 种取值、圆角有 8—9 种、字号有 8—9 种。
   例如内边距同时存在 9px 12px / 10px 12px / 8px 12px / 3px 12px / 2px 7px / 2px 8px，
   圆角同时存在 2/4/5/6/8/10/12px —— 这就是"每个小板块没有统一节奏"的根因。

   本层职责：定义唯一一套档位，并把所有组件收敛到这套档位上。
     间距：4 / 8 / 12 / 16 / 20 / 24 / 32 / 40
     圆角：4 / 6 / 8 / 12 / 全圆
     字号：11 / 12 / 13 / 14 / 16 / 18 / 22 / 28 / 32
     字重：400 / 500 / 600 / 700
   规则：不再新增档位外的取值。
   ========================================================================== */

:root {
  /* ---------- 间距档位 ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ---------- 圆角档位 ---------- */
  --rd-xs: 4px;
  --rd-sm: 6px;
  --rd-md: 8px;
  --rd-lg: 12px;
  --rd-full: 9999px;

  /* ---------- 字号档位（中文界面下 13/14 为正文，11/12 为标签） ---------- */
  --fz-micro: 11px;
  --fz-xs: 12px;
  --fz-sm: 13px;
  --fz-base: 14px;
  --fz-md: 16px;
  --fz-lg: 18px;
  --fz-xl: 22px;
  --fz-2xl: 28px;
  --fz-3xl: 32px;

  /* ---------- 字重档位 ---------- */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- 组件内边距（唯一来源） ---------- */
  --pad-card: var(--sp-5);          /* 卡片体 20px */
  --pad-card-head: var(--sp-3) var(--sp-5);   /* 卡片头 12px 20px */
  --pad-cell: var(--sp-2) var(--sp-3);        /* 表格单元格 8px 12px */
  --pad-cell-head: var(--sp-3);               /* 表头 12px */
  --pad-field: 6px var(--sp-3);               /* 输入框 6px 12px */
  --pad-btn: 6px var(--sp-4);                 /* 按钮 6px 16px */
  --pad-btn-sm: 4px var(--sp-3);              /* 小按钮 4px 12px */
  --pad-badge: 2px var(--sp-2);               /* 徽标 2px 8px */
  --pad-chip: 4px var(--sp-3);                /* 筛选片 4px 12px */
}

/* ==========================================================================
   1. 卡片：统一头/体/脚节奏
   ========================================================================== */
.card > .card-body,
.viz__body,
.card__body,
.panel__body {
  padding: var(--pad-card);
}

.card > .card-header,
.viz__head,
.card__head,
.panel__head {
  padding: var(--pad-card-head);
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.card > .card-footer,
.card__foot {
  padding: var(--pad-card-head);
  border-top: 1px solid var(--tblr-border-color, #e6e7e9);
}

.card-title,
.viz__title,
.card__title,
.panel__title {
  font-size: var(--fz-base);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  margin: 0;
}

.viz__subtitle,
.card__subtitle {
  font-size: var(--fz-xs);
  color: #5c6672;
}

/* ==========================================================================
   2. 表格：单元格内边距与行高全部收敛
   ========================================================================== */
.ws-table td,
.kpi-table td,
.card-table td,
.table td {
  padding: var(--pad-cell);
  font-size: var(--fz-sm);
  line-height: 1.5;
}

.ws-table thead th,
.kpi-table thead th,
.card-table thead th,
.table thead th {
  padding: var(--pad-cell-head);
  font-size: var(--fz-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* 表格容器：圆角与卡片一致，且裁掉单元格溢出的底色 */
.ws-table-wrap,
.table-responsive {
  border-radius: var(--rd-lg);
  overflow: hidden;
}

.ws-table-wrap .ws-table { margin: 0; }

/* ==========================================================================
   3. 按钮：三档尺寸，内边距固定
   ========================================================================== */
.btn {
  padding: var(--pad-btn);
  font-size: var(--fz-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--rd-md);
  line-height: 1.5;
  min-height: 34px;
}

.btn-sm,
.btn--sm {
  padding: var(--pad-btn-sm);
  font-size: var(--fz-xs);
  min-height: 28px;
  border-radius: var(--rd-sm);
}

.btn-lg {
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fz-base);
  min-height: 40px;
  border-radius: var(--rd-md);
}

.btn-icon,
.btn--icon {
  padding: var(--sp-2);
  min-width: 34px;
  border-radius: var(--rd-md);
}

/* ==========================================================================
   4. 徽标与筛选片
   ========================================================================== */
.badge,
.st,
.pill {
  padding: var(--pad-badge);
  font-size: var(--fz-micro);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  border-radius: var(--rd-xs);
  letter-spacing: .01em;
}

.chip {
  padding: var(--pad-chip);
  font-size: var(--fz-xs);
  font-weight: var(--fw-medium);
  border-radius: var(--rd-full);
  line-height: 1.5;
  min-height: 28px;
}

.chip__count {
  font-size: var(--fz-micro);
  font-weight: var(--fw-semibold);
  margin-left: var(--sp-1);
}

/* ==========================================================================
   5. 表单控件
   ========================================================================== */
.input, .select, .textarea,
input[type="search"], input[type="text"], input[type="number"], select, textarea {
  padding: var(--pad-field);
  font-size: var(--fz-sm);
  border-radius: var(--rd-md);
  min-height: 34px;
  line-height: 1.5;
}

.field__label,
label {
  font-size: var(--fz-xs);
  font-weight: var(--fw-medium);
}

/* ==========================================================================
   6. 数值与标签：全站统一
   ========================================================================== */
.stat__value,
.board-card__value,
.figure--hero,
.metric-mini__value,
.hero__stat dd {
  font-size: var(--fz-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -.02em;
  line-height: 1.1;
}

.stat__label,
.subheader,
.field__label,
.viz__source,
.metric-mini__label {
  font-size: var(--fz-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.4;
}

.stat__hint,
.board-card__hint,
.metric-mini__note,
.text-secondary.small {
  font-size: var(--fz-xs);
  line-height: 1.5;
}

/* 正文与链接 */
.page-body p,
.page-body li {
  font-size: var(--fz-sm);
  line-height: 1.7;
}

.page-body h1 { font-size: var(--fz-2xl); font-weight: var(--fw-bold); line-height: 1.25; }
.page-body h2 { font-size: var(--fz-xl); font-weight: var(--fw-bold); line-height: 1.3; }
.page-body h3 { font-size: var(--fz-md); font-weight: var(--fw-semibold); line-height: 1.4; }
.page-body h4 { font-size: var(--fz-base); font-weight: var(--fw-semibold); line-height: 1.4; }

/* ==========================================================================
   7. 区块间距：统一垂直节奏
   ========================================================================== */
.page-body .section { padding-block: var(--sp-5); }
.page-body .section--tight { padding-block: var(--sp-4); }
.page-body .section__head { margin-bottom: var(--sp-4); }
.page-body .section__head-text h2 { margin: 0 0 var(--sp-1); }
.page-body .section__note { font-size: var(--fz-xs); line-height: 1.6; }

/* 栅格间距统一到 16px，避免各页不一致 */
.page-body .row { --tblr-gutter-x: var(--sp-4); --tblr-gutter-y: var(--sp-4); }
.page-body .grid { gap: var(--sp-4); }
.page-body .grid--2 { gap: var(--sp-4); }
.page-body .grid--3 { gap: var(--sp-4); }
.page-body .grid--4 { gap: var(--sp-4); }

/* ==========================================================================
   8. 提示条 / 教学要点
   ========================================================================== */
.callout,
.viz__insight {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fz-sm);
  line-height: 1.65;
  border-radius: var(--rd-md);
}

.callout__icon { flex: 0 0 auto; }

/* ==========================================================================
   9. 空态 / 错误态 / 加载态：三态统一
   ========================================================================== */
.state,
.ws__empty,
.ws-empty {
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  font-size: var(--fz-sm);
  line-height: 1.7;
  color: #5c6672;
}

.skeleton {
  border-radius: var(--rd-md);
  background: linear-gradient(90deg, #eef2f6 25%, #f6f9fc 37%, #eef2f6 63%);
  background-size: 400% 100%;
  animation: fl-shimmer 1.4s ease-in-out infinite;
}

.skeleton--card { height: 140px; }

@keyframes fl-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: #eef2f6; }
}

/* ==========================================================================
   10. 工作台侧栏导航：与 Tabler 侧栏同一套尺度
   ========================================================================== */
.ws-nav { padding: var(--sp-2); border-radius: var(--rd-lg); }

.ws-nav button,
.ws-nav a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--pad-field);
  border: 0;
  border-radius: var(--rd-sm);
  background: transparent;
  color: var(--tblr-body-color, #1b2434);
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.ws-nav button:hover,
.ws-nav a:hover { background: #f4f7fa; }

.ws-nav button[aria-current="true"] {
  background: #e8f1fb;
  color: #055bb0;
  font-weight: var(--fw-semibold);
  box-shadow: inset 2px 0 0 #066fd1;
}

.ws-nav__group {
  display: block;
  padding: var(--sp-3) var(--sp-2) var(--sp-1);
  font-size: var(--fz-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5c6672;
}

.ws-nav__count {
  margin-left: auto;
  padding: 1px var(--sp-2);
  border-radius: var(--rd-full);
  background: #eef2f6;
  font-size: var(--fz-micro);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: #4a5462;
}

.ws-nav button[aria-current="true"] .ws-nav__count { background: #d3e5f8; color: #055bb0; }

/* ==========================================================================
   11. 工具条
   ========================================================================== */
.ws-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
  background: #fbfcfe;
}

.ws-toolbar label { margin-bottom: var(--sp-1); }
.ws-toolbar .select,
.ws-toolbar .input { min-width: 140px; }

/* ==========================================================================
   12. 进度条：统一高度与圆角
   ========================================================================== */
.progress { height: 8px; border-radius: var(--rd-full); background: #eef2f6; }
.progress-sm { height: 4px; border-radius: var(--rd-full); }
.progress-lg { height: 12px; border-radius: var(--rd-full); }
.progress-bar { border-radius: var(--rd-full); }

.sla-bar { height: 6px; border-radius: var(--rd-full); background: #eef2f6; display: inline-block; width: 56px; vertical-align: middle; }
.sla-bar__fill { height: 100%; border-radius: var(--rd-full); }

/* ==========================================================================
   13. 品牌标记补充（审计发现的未定义类名）
   ========================================================================== */
.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--rd-md);
  background: var(--tblr-primary, #066fd1);
  color: #fff;
  font-size: var(--fz-xs);
  font-weight: var(--fw-bold);
  letter-spacing: -.02em;
  flex: 0 0 auto;
}

/* ==========================================================================
   14. 档位外取值的收尾（审计实测剩 9 种，逐一归位）
   ========================================================================== */

/* 分页按钮：0 8px → 4px 8px，且与 --rd-sm 一致 */
.ws-pager { padding: var(--sp-3) var(--sp-5); gap: var(--sp-3); font-size: var(--fz-xs); }
.ws-pager__btn {
  min-width: 28px; height: 28px;
  padding: var(--pad-badge);
  border-radius: var(--rd-sm);
  font-size: var(--fz-xs);
}
.ws-pager__gap { padding: 0 var(--sp-1); }
.ws-pager__select { min-height: 28px; padding: 2px var(--sp-6) 2px var(--sp-2); font-size: var(--fz-xs); border-radius: var(--rd-sm); }

/* 工作台侧栏计数与分组标签 */
.ws-nav__count { padding: 1px var(--sp-2); border-radius: var(--rd-full); font-size: var(--fz-micro); }
.ws-nav__group { padding: var(--sp-3) var(--sp-2) var(--sp-1); }

/* 内容区容器：统一左右留白 */
.page-body > .container-xl { padding-inline: var(--sp-5); }
@media (max-width: 992px) { .page-body > .container-xl { padding-inline: var(--sp-4); } }

/* 区块上下留白 */
.page-body .section { padding-block: var(--sp-5); }
.page-body .section--tight { padding-block: var(--sp-4); }

/* 勾选项：与输入控件同一套内边距 */
.check, .checklist label, label.check {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--rd-sm);
  font-size: var(--fz-sm);
  line-height: 1.5;
}

/* 卡片脚与列表项 */
.card__foot, .card > .card-footer { padding: var(--pad-card-head); }
.news__item { padding: var(--sp-3) 0; }
.news__tag { padding: var(--pad-badge); border-radius: var(--rd-xs); font-size: var(--fz-micro); }
.news__text { font-size: var(--fz-sm); line-height: 1.65; }

/* 首页三栏与工具卡内边距归位 */
.tri__col { padding: var(--pad-card); }
.tri__head { padding-bottom: var(--sp-3); }
.who__card { padding: var(--sp-4); }
.tool { padding: var(--sp-6); }
.tool__desc { font-size: var(--fz-sm); line-height: 1.65; }
.cap { padding: var(--sp-3) var(--sp-2); }

/* 学习路径卡 */
.path-item { padding: var(--pad-card); }
.path-item__tasks li { padding: var(--sp-2) 0; font-size: var(--fz-sm); }
.path-item__side { padding-top: var(--sp-3); }

/* 财务图表卡 */
.viz__insight { padding: var(--sp-3) var(--sp-4); }
.figure--hero { font-size: var(--fz-3xl); }

/* 首页首屏与数据带的内边距 */
.home-hero { padding-block: var(--sp-10); }
.stat-band { padding-block: var(--sp-8); }
.stat-band__item { padding-left: var(--sp-4); }

/* 弹窗 */
.dialog { border-radius: var(--rd-lg); }
.dialog__head { padding: var(--pad-card-head); }
.dialog__body { padding: var(--pad-card); }
.dialog__foot { padding: var(--pad-card-head); }

/* 主题片与筛选行 */
.chip-row { gap: var(--sp-2); }
.theme-chip, .segmented { gap: var(--sp-2); }