/* ==========================================================================
   FinLearn 彩色体系（Category Colors）
   --------------------------------------------------------------------------
   用户反馈"颜色太单调"。审计确认：全站只有一个蓝色主色，所有板块同色，
   导致界面平板。Tabler 官方页之所以丰富，是因为它给不同业务对象分配了
   不同色相（Sales 蓝 / Orders 绿 / Shares 黑 / Likes 蓝），而不是全程单色。

   本层建立一套 6 色分类体系，用于：
     · KPI 卡与指标卡的图标方块
     · 能力条 / 功能入口
     · 图表系列
     · 板块标题的色相区分
   每色含：实心（底/字）、浅底（bg-lt）、描边、图表填充 四个用途。
   全部色值已核验对白底的对比度（文字 ≥ 4.5:1）。
   ========================================================================== */

:root {
  /* ---------- 蓝（主色，业务主对象） ---------- */
  --cat-blue: #0554a8;
  --cat-blue-600: #0668c9;
  --cat-blue-400: #3d94e8;
  --cat-blue-bg: #e8f1fb;
  --cat-blue-border: #bcd6f0;

  /* ---------- 紫（AI / 智能） ---------- */
  --cat-violet: #6d28d9;
  --cat-violet-600: #7c3aed;
  --cat-violet-400: #a78bfa;
  --cat-violet-bg: #f1eafe;
  --cat-violet-border: #d8c7f7;

  /* ---------- 青（数据 / 看板） ---------- */
  --cat-teal: #0f766e;
  --cat-teal-600: #0d9488;
  --cat-teal-400: #2dd4bf;
  --cat-teal-bg: #e2f5f3;
  --cat-teal-border: #b3e3dd;

  /* ---------- 琥珀（时效 / 提醒） ---------- */
  --cat-amber: #a16207;
  --cat-amber-600: #ca8a04;
  --cat-amber-400: #fbbf24;
  --cat-amber-bg: #fdf3dc;
  --cat-amber-border: #f0dba6;

  /* ---------- 玫红（风险 / 异常） ---------- */
  --cat-rose: #be123c;
  --cat-rose-600: #e11d48;
  --cat-rose-400: #fb7185;
  --cat-rose-bg: #fde8ec;
  --cat-rose-border: #f6c2cd;

  /* ---------- 靛蓝（案例 / 档案） ---------- */
  --cat-indigo: #3730a3;
  --cat-indigo-600: #4f46e5;
  --cat-indigo-400: #818cf8;
  --cat-indigo-bg: #eae9fb;
  --cat-indigo-border: #c9c6f2;

  /* ---------- 翠绿（完成 / 达标） ---------- */
  --cat-emerald: #047857;
  --cat-emerald-600: #059669;
  --cat-emerald-400: #34d399;
  --cat-emerald-bg: #e0f5ec;
  --cat-emerald-border: #a8dfc9;
}

/* ==========================================================================
   1. 彩色图标方块（.fl-icon 扩展为 7 色）
   ========================================================================== */
.fl-icon--blue    { background: linear-gradient(145deg, var(--cat-blue-600), var(--cat-blue)); color: #fff; }
.fl-icon--violet  { background: linear-gradient(145deg, var(--cat-violet-600), var(--cat-violet)); color: #fff; }
.fl-icon--teal    { background: linear-gradient(145deg, var(--cat-teal-600), var(--cat-teal)); color: #fff; }
.fl-icon--amber   { background: linear-gradient(145deg, var(--cat-amber-600), var(--cat-amber)); color: #fff; }
.fl-icon--rose    { background: linear-gradient(145deg, var(--cat-rose-600), var(--cat-rose)); color: #fff; }
.fl-icon--indigo  { background: linear-gradient(145deg, var(--cat-indigo-600), var(--cat-indigo)); color: #fff; }
.fl-icon--emerald { background: linear-gradient(145deg, var(--cat-emerald-600), var(--cat-emerald)); color: #fff; }

/* 浅底版本（放在白卡里更轻） */
.fl-icon--blue-soft    { background: var(--cat-blue-bg);    color: var(--cat-blue); }
.fl-icon--violet-soft  { background: var(--cat-violet-bg);  color: var(--cat-violet); }
.fl-icon--teal-soft    { background: var(--cat-teal-bg);    color: var(--cat-teal); }
.fl-icon--amber-soft   { background: var(--cat-amber-bg);   color: var(--cat-amber); }
.fl-icon--rose-soft    { background: var(--cat-rose-bg);    color: var(--cat-rose); }
.fl-icon--indigo-soft  { background: var(--cat-indigo-bg);  color: var(--cat-indigo); }
.fl-icon--emerald-soft { background: var(--cat-emerald-bg); color: var(--cat-emerald); }

/* ==========================================================================
   2. 彩色指标卡（顶边 + 图标 + 数值同色相）
   ========================================================================== */
.fl-stat {
  position: relative;
  overflow: hidden;
  padding: var(--sp-5);
  border: 1px solid var(--c-border, #e4eaf1);
  border-radius: var(--rd-lg);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.fl-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(16, 24, 40, .12);
}

/* 顶边色条：按色相区分业务对象 */
.fl-stat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--fl-accent, var(--cat-blue));
}

.fl-stat__label {
  display: block;
  font-size: var(--fz-micro);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #55616f;
  margin-bottom: var(--sp-2);
}

.fl-stat__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--tblr-font-monospace, ui-monospace, monospace);
  font-size: var(--fz-2xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--fl-accent, var(--cat-blue));
  font-variant-numeric: tabular-nums;
}

.fl-stat__value i {
  font-family: var(--tblr-font-sans-serif, system-ui, sans-serif);
  font-size: var(--fz-sm);
  font-style: normal;
  font-weight: 500;
  color: #6b7684;
  letter-spacing: 0;
}

.fl-stat__hint {
  margin-top: var(--sp-2);
  font-size: var(--fz-xs);
  color: #55616f;
  line-height: 1.5;
}

/* 色相修饰符 */
.fl-stat--blue    { --fl-accent: var(--cat-blue); }
.fl-stat--violet  { --fl-accent: var(--cat-violet); }
.fl-stat--teal    { --fl-accent: var(--cat-teal); }
.fl-stat--amber   { --fl-accent: var(--cat-amber); }
.fl-stat--rose    { --fl-accent: var(--cat-rose); }
.fl-stat--indigo  { --fl-accent: var(--cat-indigo); }
.fl-stat--emerald { --fl-accent: var(--cat-emerald); }

/* 图标与数值同色相 */
.fl-stat--blue .fl-icon    { background: var(--cat-blue-bg);    color: var(--cat-blue); }
.fl-stat--violet .fl-icon  { background: var(--cat-violet-bg);  color: var(--cat-violet); }
.fl-stat--teal .fl-icon    { background: var(--cat-teal-bg);    color: var(--cat-teal); }
.fl-stat--amber .fl-icon   { background: var(--cat-amber-bg);   color: var(--cat-amber); }
.fl-stat--rose .fl-icon    { background: var(--cat-rose-bg);    color: var(--cat-rose); }
.fl-stat--indigo .fl-icon  { background: var(--cat-indigo-bg);  color: var(--cat-indigo); }
.fl-stat--emerald .fl-icon { background: var(--cat-emerald-bg); color: var(--cat-emerald); }

/* ==========================================================================
   3. 彩色徽标
   ========================================================================== */
.fl-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--sp-2);
  border-radius: var(--rd-xs);
  font-size: var(--fz-micro);
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid transparent;
}

.fl-tag--blue    { background: var(--cat-blue-bg);    border-color: var(--cat-blue-border);    color: var(--cat-blue); }
.fl-tag--violet  { background: var(--cat-violet-bg);  border-color: var(--cat-violet-border);  color: var(--cat-violet); }
.fl-tag--teal    { background: var(--cat-teal-bg);    border-color: var(--cat-teal-border);    color: var(--cat-teal); }
.fl-tag--amber   { background: var(--cat-amber-bg);   border-color: var(--cat-amber-border);   color: var(--cat-amber); }
.fl-tag--rose    { background: var(--cat-rose-bg);    border-color: var(--cat-rose-border);    color: var(--cat-rose); }
.fl-tag--indigo  { background: var(--cat-indigo-bg);  border-color: var(--cat-indigo-border);  color: var(--cat-indigo); }
.fl-tag--emerald { background: var(--cat-emerald-bg); border-color: var(--cat-emerald-border); color: var(--cat-emerald); }

/* ==========================================================================
   4. 彩色区块标题（不同业务模块用不同色相）
   ========================================================================== */
.fl-section--violet  { --fl-head: var(--cat-violet); }
.fl-section--teal    { --fl-head: var(--cat-teal); }
.fl-section--amber   { --fl-head: var(--cat-amber); }
.fl-section--indigo  { --fl-head: var(--cat-indigo); }
.fl-section--emerald { --fl-head: var(--cat-emerald); }
.fl-section--rose    { --fl-head: var(--cat-rose); }

.page-body .section__head-text h2::before {
  background: linear-gradient(180deg, var(--fl-head, var(--cat-blue)), color-mix(in srgb, var(--fl-head, var(--cat-blue)) 45%, #fff));
}

/* ==========================================================================
   5. 彩色条形与环形（数据可视化用）
   ========================================================================== */
.fl-bars { display: grid; gap: var(--sp-3); }

.fl-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--sp-3);
  align-items: center;
  font-size: var(--fz-sm);
}

.fl-bar__label { color: #26313f; }
.fl-bar__value { font-family: var(--tblr-font-monospace, monospace); font-variant-numeric: tabular-nums; color: #55616f; font-size: var(--fz-xs); }

.fl-bar__track {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: var(--rd-full);
  background: #eef2f7;
  overflow: hidden;
}

.fl-bar__fill {
  height: 100%;
  border-radius: var(--rd-full);
  background: var(--fl-accent, var(--cat-blue));
  transform-origin: left center;
  transition: transform 900ms var(--ease-out);
}

.fl-bar--blue    { --fl-accent: linear-gradient(90deg, var(--cat-blue-400), var(--cat-blue)); }
.fl-bar--violet  { --fl-accent: linear-gradient(90deg, var(--cat-violet-400), var(--cat-violet)); }
.fl-bar--teal    { --fl-accent: linear-gradient(90deg, var(--cat-teal-400), var(--cat-teal)); }
.fl-bar--amber   { --fl-accent: linear-gradient(90deg, var(--cat-amber-400), var(--cat-amber)); }
.fl-bar--rose    { --fl-accent: linear-gradient(90deg, var(--cat-rose-400), var(--cat-rose)); }
.fl-bar--indigo  { --fl-accent: linear-gradient(90deg, var(--cat-indigo-400), var(--cat-indigo)); }
.fl-bar--emerald { --fl-accent: linear-gradient(90deg, var(--cat-emerald-400), var(--cat-emerald)); }

/* ==========================================================================
   6. 彩色能力条（首页 8 项功能入口，每项不同色相）
   ========================================================================== */
.cap-strip .cap:nth-child(7n+1) .cap__icon { background: var(--cat-blue-bg);    color: var(--cat-blue); }
.cap-strip .cap:nth-child(7n+2) .cap__icon { background: var(--cat-violet-bg);  color: var(--cat-violet); }
.cap-strip .cap:nth-child(7n+3) .cap__icon { background: var(--cat-teal-bg);    color: var(--cat-teal); }
.cap-strip .cap:nth-child(7n+4) .cap__icon { background: var(--cat-amber-bg);   color: var(--cat-amber); }
.cap-strip .cap:nth-child(7n+5) .cap__icon { background: var(--cat-indigo-bg);  color: var(--cat-indigo); }
.cap-strip .cap:nth-child(7n+6) .cap__icon { background: var(--cat-emerald-bg); color: var(--cat-emerald); }
.cap-strip .cap:nth-child(7n+7) .cap__icon { background: var(--cat-rose-bg);    color: var(--cat-rose); }

.cap-strip .cap:nth-child(7n+1):hover .cap__icon { background: var(--cat-blue);    color: #fff; }
.cap-strip .cap:nth-child(7n+2):hover .cap__icon { background: var(--cat-violet);  color: #fff; }
.cap-strip .cap:nth-child(7n+3):hover .cap__icon { background: var(--cat-teal);    color: #fff; }
.cap-strip .cap:nth-child(7n+4):hover .cap__icon { background: var(--cat-amber);   color: #fff; }
.cap-strip .cap:nth-child(7n+5):hover .cap__icon { background: var(--cat-indigo);  color: #fff; }
.cap-strip .cap:nth-child(7n+6):hover .cap__icon { background: var(--cat-emerald); color: #fff; }
.cap-strip .cap:nth-child(7n+7):hover .cap__icon { background: var(--cat-rose);    color: #fff; }

/* ==========================================================================
   7. 彩色工具卡（首页三个工具入口）
   ========================================================================== */
.tool:nth-child(1) { --fl-accent: var(--cat-blue); }
.tool:nth-child(2) { --fl-accent: var(--cat-teal); }
.tool:nth-child(3) { --fl-accent: var(--cat-violet); }

.page-body .tool__icon { background: color-mix(in srgb, var(--fl-accent, var(--cat-blue)) 12%, #fff); color: var(--fl-accent, var(--cat-blue)); }
.page-body .tool:hover .tool__icon { background: var(--fl-accent, var(--cat-blue)); color: #fff; }
.page-body .tool::before { background: linear-gradient(90deg, var(--fl-accent, var(--cat-blue)), color-mix(in srgb, var(--fl-accent, var(--cat-blue)) 40%, #fff)); }
.page-body .tool__go { color: var(--fl-accent, var(--cat-blue)); }

/* ==========================================================================
   8. 彩色侧栏分类标记（每个导航项左侧小色点）
   ========================================================================== */
.navbar-vertical .nav-item:nth-child(7n+1) .nav-link-icon { color: var(--cat-blue) !important; }
.navbar-vertical .nav-item:nth-child(7n+2) .nav-link-icon { color: var(--cat-violet) !important; }
.navbar-vertical .nav-item:nth-child(7n+3) .nav-link-icon { color: var(--cat-teal) !important; }
.navbar-vertical .nav-item:nth-child(7n+4) .nav-link-icon { color: var(--cat-amber) !important; }
.navbar-vertical .nav-item:nth-child(7n+5) .nav-link-icon { color: var(--cat-indigo) !important; }
.navbar-vertical .nav-item:nth-child(7n+6) .nav-link-icon { color: var(--cat-emerald) !important; }
.navbar-vertical .nav-item:nth-child(7n+7) .nav-link-icon { color: var(--cat-rose) !important; }

/* hover / 当前项仍然统一为主色，保持"当前状态"的唯一性 */
.navbar-vertical .nav-link:hover .nav-link-icon,
.navbar-vertical .nav-link.active .nav-link-icon { color: var(--cat-blue) !important; }

/* ==========================================================================
   9. 渐变强调元素（打破纯平的蓝）
   ========================================================================== */
.fl-gradient-bar {
  height: 3px;
  border-radius: var(--rd-full);
  background: linear-gradient(90deg,
    var(--cat-blue) 0%, var(--cat-violet) 24%, var(--cat-teal) 48%,
    var(--cat-emerald) 66%, var(--cat-amber) 84%, var(--cat-rose) 100%);
}

/* 数字带：多色相分段 */
.stat-band__list .stat-band__item:nth-child(1) { border-image: linear-gradient(180deg, #3d94e8, rgba(61,148,232,.05)) 1; }
.stat-band__list .stat-band__item:nth-child(2) { border-image: linear-gradient(180deg, #a78bfa, rgba(167,139,250,.05)) 1; }
.stat-band__list .stat-band__item:nth-child(3) { border-image: linear-gradient(180deg, #2dd4bf, rgba(45,212,191,.05)) 1; }
.stat-band__list .stat-band__item:nth-child(4) { border-image: linear-gradient(180deg, #fbbf24, rgba(251,191,36,.05)) 1; }

/* ==========================================================================
   10. 进度条按语义着色
   ========================================================================== */
.fl-progress--blue    { background: linear-gradient(90deg, var(--cat-blue-400), var(--cat-blue)) !important; }
.fl-progress--teal    { background: linear-gradient(90deg, var(--cat-teal-400), var(--cat-teal)) !important; }
.fl-progress--amber   { background: linear-gradient(90deg, var(--cat-amber-400), var(--cat-amber)) !important; }
.fl-progress--rose    { background: linear-gradient(90deg, var(--cat-rose-400), var(--cat-rose)) !important; }
.fl-progress--emerald { background: linear-gradient(90deg, var(--cat-emerald-400), var(--cat-emerald)) !important; }
.fl-progress--violet  { background: linear-gradient(90deg, var(--cat-violet-400), var(--cat-violet)) !important; }