/* ════════════════════════════════════════════════
   超强英语全能力 · Super English · 全局主题（v4 - 极简 B2B）
   设计 DNA：
   - 4 色：ink + bg + brand + money
   - 3 级字号节奏：display / heading / body
   - 数字一律 tabular-nums
   - 不用渐变光晕，不用阴影炫技
   ════════════════════════════════════════════════ */

:root {
  /* ─── 颜色：首页同款深蓝 + 电光蓝品牌体系 ─── */

  /* 主色：首页 CTA 与图标蓝 */
  --brand:       #315BFF;
  --brand-dark:  #253CDB;
  --brand-darker:#071CA8;
  --brand-light: #DCE5FF;
  --brand-tint:  #F2F6FF;
  --brand-line:  rgba(49,91,255,.30);
  --brand-glow:  rgba(49,91,255,.20);
  --brand-grad:  linear-gradient(135deg, #4D79FF 0%, #253CDB 100%);

  /* Accent：只做品牌辅助，不再使用橙色 CTA */
  --accent:      #6048FF;
  --accent-dark: #3A2FD6;
  --accent-tint: #F1F0FF;

  /* 中性：白底浅蓝边框，对齐首页功能区 */
  --ink:    #071341;
  --ink-2:  #172453;
  --ink-3:  #314064;
  --bg:     #F6F8FF;
  --surface:#FFFFFF;
  --border: #DCE5FF;
  --border-strong: #B8C8FF;
  --text:   #071341;
  --text-2: rgba(7,19,65,.70);
  --text-3: rgba(7,19,65,.48);
  --text-placeholder: rgba(7,19,65,.30);

  /* 状态色 */
  --money:       #059669;   /* emerald — 金额 */
  --money-tint:  #ECFDF5;
  --warn:        #F59E0B;
  --danger:      #DC2626;

  /* ─── panel（深色 chrome — 对齐参考图深 navy 调） ─── */
  --panel-bg:       #050B3D;
  --panel-bg-deep:  #02091F;
  --panel-bg-2:     #111C5A;
  --panel-text:     #E2E8F0;        /* slate-200 — panel 主文字 */
  --panel-text-2:   #94A3B8;        /* slate-400 — panel 副文字 */
  --panel-border:   rgba(148,163,184,.10);

  /* ─── 兼容旧变量 ─── */
  --brand-red:    #315BFF;     /* 旧名指向新蓝主色 */
  --brand-blue:   #315BFF;
  --brand-orange: #F59E0B;
  --brand-yellow: #F59E0B;
  --finance:      #059669;
  --finance-bg:   #ECFDF5;
  --finance-light:#D1FAE5;
  --trust:        #315BFF;
  --trust-light:  #DCE5FF;
  --brand-bg:     #F2F6FF;
  --brand-light:  #DCE5FF;
  --orange:       #F59E0B;
  --orange-light: #FEF3C7;
  --red:          #DC2626;
  --red-light:    #FECACA;
  --blue:         #315BFF;
  --blue-bg:      #DCE5FF;
  --blue-light:   #DCE5FF;
  --yellow:       #F59E0B;
  --yellow-light: #FEF3C7;
  --green:        #059669;
  --purple:       #6048FF;
  --surface-alt:  #F8FAFF;
  --text-secondary: rgba(7,19,65,.66);
  --text-tertiary:  rgba(7,19,65,.42);
  --border-light:   #EEF3FF;

  /* ─── 字号节奏 ─── */
  --t-display:   28px;
  --t-h1:        22px;
  --t-h2:        17px;
  --t-h3:        14px;
  --t-body:      14px;
  --t-caption:   12px;
  --t-mono:      'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* ─── 阴影（克制） ─── */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --shadow:    0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-lg: 0 8px 24px rgba(15,23,42,.06);
  --shadow-card: var(--shadow);
  --shadow-xl:   0 12px 36px rgba(15,23,42,.10);
  --shadow-brand: 0 10px 26px rgba(49,91,255,.18);

  /* ─── 圆角（antd 节奏：2 / 4 / 6 / 8） ─── */
  --radius-xs:  2px;
  --radius-sm:  2px;
  --radius:     4px;
  --radius-lg:  6px;
  --radius-xl:  8px;
  --radius-full: 9999px;

  /* ─── 字体 ─── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Helvetica Neue", sans-serif;
  --font-display: var(--font-sans);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 数字默认等宽，B2B 表格对齐关键 */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" on;
}
a { color: inherit; text-decoration: none; transition: color .12s; }
a:hover { color: var(--brand); }

/* ════════ 按钮（antd 标尺：32 / 24 / 40） ════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 16px; border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--t-body); font-weight: 400; cursor: pointer;
  transition: all .3s cubic-bezier(.645,.045,.355,1);
  gap: 6px; user-select: none;
}
.btn:active { transform: translateY(0); }
/* Primary CTA — 对齐首页电光蓝按钮 */
.btn-primary {
  background: var(--brand-grad);
  color: #fff; border-color: var(--brand);
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #5C86FF 0%, #253CDB 100%);
  border-color: var(--brand-dark);
}
/* Secondary 次要操作 — 同品牌蓝，弱化阴影 */
.btn-blue {
  background: var(--brand-grad);
  color: #fff; border-color: var(--brand);
}
.btn-blue:hover {
  background: linear-gradient(135deg, #5C86FF 0%, #253CDB 100%);
  border-color: var(--brand-dark);
}
.btn-ghost {
  background: var(--surface); color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); }
.btn-text { background: transparent; color: var(--text-2); }
.btn-text:hover { color: var(--text); background: var(--bg); }
.btn-lg { height: 40px; padding: 0 24px; font-size: 15px; }
.btn-sm { height: 24px; padding: 0 10px; font-size: 12px; }

/* ════════ 顶栏（公开页 — 白底，对齐参考图） ════════ */
.top-nav {
  height: 64px; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 32px;
  position: sticky; top: 0; z-index: 100;
}
.top-nav .logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 700;
  color: var(--text); letter-spacing: -0.01em;
}
.top-nav .logo-icon {
  width: 30px; height: 30px;
  background: var(--brand-grad);
  color: #fff;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.top-nav .logo .brand-img {
  height: 32px; width: auto; display: block;
}
.top-nav .logo .brand-cn {
  font-size: 16px; font-weight: 700; color: var(--text);
  letter-spacing: -0.01em;
}
.top-nav .nav-list {
  display: flex; gap: 28px; margin-left: 40px; flex: 1;
}
.top-nav .nav-list a {
  color: var(--text-2); font-size: var(--t-body); font-weight: 500;
  padding: 4px 0; position: relative;
}
.top-nav .nav-list a:hover { color: var(--text); }
.top-nav .nav-list a.active { color: var(--brand); font-weight: 600; }
.top-nav .nav-list a.active::after {
  content: ''; position: absolute; bottom: -22px; left: 0; right: 0;
  height: 2px; background: var(--brand);
  border-radius: 1px;
}
.top-nav .actions { display: flex; gap: 8px; align-items: center; }

/* ════════ 卡片 ════════ */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.card:hover { border-color: var(--border-strong); }
.card-padded { padding: 20px; }

/* ════════ 标题 ════════ */
.section-title {
  font-size: 28px; font-weight: 700;
  text-align: center; margin: 64px 0 8px;
  letter-spacing: -0.02em; line-height: 1.25;
  color: var(--text);
}
.section-sub {
  font-size: 14px; color: var(--text-2);
  text-align: center; margin-bottom: 36px;
  max-width: 640px; margin-left: auto; margin-right: auto;
  line-height: 1.7;
}
.section-title em {
  font-style: normal;
  color: var(--brand);
}

/* ════════ 容器 ════════ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ════════ 滚动条 ════════ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: #CBD5E1; border-radius: 999px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
::-webkit-scrollbar-track { background: transparent; }

/* ════════ Tag ════════ */
.tag {
  display: inline-flex; align-items: center;
  font-size: var(--t-caption); font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  background: var(--bg); color: var(--text-2);
  border: 1px solid var(--border);
}
.tag-brand   { background: var(--brand-tint); color: var(--brand); border-color: var(--brand-line); }
.tag-money   { background: var(--money-tint); color: var(--money); border-color: rgba(5,150,105,.20); }
.tag-warn    { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.tag-danger  { background: #FEE2E2; color: var(--danger); border-color: #FECACA; }
/* 兼容旧名 */
.tag-red     { background: var(--brand-tint); color: var(--brand); border-color: var(--brand-line); }
.tag-yellow  { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.tag-green   { background: var(--money-tint); color: var(--money); border-color: rgba(5,150,105,.20); }

/* ════════ 数字工具类 ════════ */
.tabular-nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" on; }
.money         { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" on; }
.money-positive { color: var(--money); font-weight: 600; }
.money-negative { color: var(--brand); font-weight: 600; }

/* ════════ Element Plus 精修 ════════ */
.el-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.el-button {
  border-radius: var(--radius) !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
}
.el-button--primary {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}
.el-button--primary:hover {
  background: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
}
.el-button--default:hover {
  color: var(--brand) !important;
  border-color: var(--brand) !important;
  background: var(--brand-tint) !important;
}
.el-input__wrapper {
  border-radius: var(--radius) !important;
  box-shadow: 0 0 0 1px var(--border) inset !important;
}
.el-input__wrapper.is-focus,
.el-input__wrapper:hover {
  box-shadow: 0 0 0 1px var(--border-strong) inset !important;
}
.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 2px var(--brand) inset !important;
}
.el-tag {
  border-radius: var(--radius-xs) !important;
  border: 1px solid var(--border) !important;
  font-weight: 500 !important;
  background: var(--bg) !important;
  color: var(--text-2) !important;
}
.el-tag.el-tag--success {
  background: var(--money-tint) !important;
  color: var(--money) !important;
  border-color: rgba(5,150,105,.20) !important;
}
.el-tag.el-tag--warning {
  background: #FEF3C7 !important;
  color: #92400E !important;
  border-color: #FDE68A !important;
}
.el-tag.el-tag--danger {
  background: #FEE2E2 !important;
  color: var(--danger) !important;
  border-color: #FECACA !important;
}
.el-tag.el-tag--info {
  background: var(--bg) !important;
  color: var(--text-2) !important;
  border-color: var(--border) !important;
}
.el-table {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" on;
  --el-table-border-color: var(--border) !important;
}
.el-table th.el-table__cell {
  background: var(--surface-alt) !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 12px !important;
  letter-spacing: .03em;
}
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #FAFBFC !important;
}
.el-table .el-table__body tr:hover > td.el-table__cell {
  background: var(--brand-tint) !important;
}
.el-radio-button__inner:hover { color: var(--brand) !important; }
.el-radio-button__original-radio:checked + .el-radio-button__inner {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  box-shadow: -1px 0 0 0 var(--brand) !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label { color: var(--brand) !important; }
.el-tabs__item.is-active { color: var(--brand) !important; }
.el-tabs__active-bar     { background: var(--brand) !important; }
.el-dropdown-menu__item:not(.is-disabled):hover { background: var(--brand-tint) !important; color: var(--brand) !important; }

/* ════════ 动画 ════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeUp .35s cubic-bezier(.4,0,.2,1) both; }