/* =============================================================================
   艾克夫 AKF · 应用视觉层 (app.css)
   ─────────────────────────────────────────────────────────────────────────
   作用：把 JS 实际渲染的旧类名（.btn/.card/.b-*/.stat/.gN/.tb/.tabs/.fld…）
        用 design-system.css 的统一令牌绘制为 AKF 现代企业风：
        · 主色 艾克夫橙 #E84A1A · 副色 工业蓝 #1A4789
        · 暖白底 + 1px 边框 + 微投影 + 紧致圆角
        · 信息密集：紧凑表格、KPI 大数字、清晰业务入口
   原则：不改 public/js/* 业务逻辑；保留所有类名。
   ============================================================================= */

/* ---------- 入场动画（指数缓动） ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.card, .stat, .course-card, .onb-card, .kpi { animation: fadeUp var(--dur-slow) var(--ease-out) both; }

/* ===================== 按钮令牌兼容（.btn / .full / .sm / .lg / .gray / .ghost / .danger） ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-weight: var(--fw-semibold); font-size: var(--fs-base); line-height: 1;
  padding: 0 var(--s-5); height: 40px; min-height: 40px;
  border-radius: var(--r); white-space: nowrap; border: 1px solid transparent;
  background: var(--pri); color: var(--on-pri);
  box-shadow: var(--shadow-1);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
  cursor: pointer;
}
.btn:hover:not(:disabled) { background: var(--pri-hover); box-shadow: var(--shadow-pri); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn.full { width: 100%; padding: 0 var(--s-5); }
.btn.sm { height: 32px; min-height: 32px; padding: 0 var(--s-3); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn.lg { height: 48px; padding: 0 var(--s-6); font-size: var(--fs-md); }
.btn.gray { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn.gray:hover:not(:disabled) { background: var(--surface-3); transform: none; box-shadow: var(--shadow-1); border-color: var(--border-strong); }
.btn.ghost { background: transparent; color: var(--pri); border-color: var(--pri); }
.btn.ghost:hover:not(:disabled) { background: var(--pri-soft); transform: none; box-shadow: none; }
.btn.danger { background: var(--err); color: #fff; }
.btn.danger:hover:not(:disabled) { background: var(--err-d); box-shadow: var(--shadow-2); }
.btn.ok { background: var(--ok); color: #fff; }
.btn.ok:hover:not(:disabled) { background: var(--ok-d); }

/* ===================== 表单（.fld） ===================== */
.fld { margin-bottom: var(--s-4); }
.fld label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); margin-bottom: var(--s-2); }
.fld label b, .fld label .req { color: var(--err); margin-left: 2px; }
.fld input, .fld select, .fld textarea,
.input, .select, .textarea {
  width: 100%; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r);
  padding: 0 var(--s-3); height: 40px; font-size: var(--fs-base);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.fld textarea, .textarea { height: auto; padding: var(--s-3); line-height: 1.6; resize: vertical; min-height: 96px; }
.fld input:focus, .fld select:focus, .fld textarea:focus,
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--pri); box-shadow: 0 0 0 3px rgba(232, 74, 26, 0.16); outline: none;
}
.fld.is-error input, .fld.is-error select { border-color: var(--err); box-shadow: 0 0 0 3px rgba(196, 53, 60, 0.14); }
.input--sm { height: 32px; padding: 0 var(--s-2); font-size: var(--fs-sm); }

/* ===================== 卡片 ===================== */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-6); margin-bottom: var(--s-4);
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur);
}
.card--hover:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); }
.card h3 {
  font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: -.01em;
  margin-bottom: var(--s-4); display: flex; align-items: center; gap: var(--s-2);
}

/* ===================== 徽章 ===================== */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1; padding: 4px 10px; border-radius: var(--r-sm); white-space: nowrap; }
.b-blue { background: var(--pri-soft); color: var(--pri); }
.b-green { background: var(--ok-s); color: var(--ok-d); }
.b-orange { background: var(--warn-s); color: var(--warn-d); }
.b-red { background: var(--err-s); color: var(--err-d); }
.b-gray { background: var(--surface-3); color: var(--text-2); }
.b-sec { background: var(--sec-soft); color: var(--sec); }

/* ===================== 表格（信息密集可扫描） ===================== */
.tb { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tb-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tb-scroll .tb { min-width: 1080px; }
.tb-scroll .tb td { white-space: nowrap; }
.tb th {
  text-align: left; background: var(--surface-2); color: var(--text-3);
  font-weight: var(--fw-semibold); padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em;
  position: sticky; top: 0; z-index: 1;
}
.tb td {
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border);
  vertical-align: middle;
  transition: background var(--dur-fast);
}
.tb tbody tr { transition: background-color var(--dur-fast); }
.tb tbody tr:hover { background: var(--surface-2); }

/* ===================== 选项卡 ===================== */
.tabs { display: flex; gap: var(--s-4); border-bottom: 1px solid var(--border); margin-bottom: var(--s-5); flex-wrap: wrap; }
.tabs button { background: none; border: none; padding: var(--s-3) 0; font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur-fast), border-color var(--dur-fast); cursor: pointer; }
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--pri); border-bottom-color: var(--pri); }

/* ===================== 栅格 ===================== */
.grid { display: grid; gap: var(--s-4); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g6 { grid-template-columns: repeat(6, 1fr); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-4); }
@media (max-width: 960px) { .g6, .g4 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .g2, .g3, .g4, .g6, .row2, .row3 { grid-template-columns: 1fr; } }

/* ===================== KPI / 统计块 ===================== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-bottom: var(--s-5); }
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-5);
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur);
}
.stat:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); }
.stat .n {
  font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: -.02em;
  line-height: 1; margin-top: var(--s-2); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat.hl .n { color: var(--pri); }
.stat .t { font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--s-2); }
.stat .ic { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--pri-soft); color: var(--pri); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--s-2); }
.stat .ic i { width: 18px; height: 18px; }
@media (max-width: 960px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ===================== 课程卡片（员工端） ===================== */
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.course-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-5); cursor: pointer;
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur);
}
.course-card:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); }
.course-card .cv { font-size: 32px; }
.course-card h4 { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: var(--s-3) 0 var(--s-2); }
.course-card .meta { font-size: var(--fs-sm); color: var(--text-3); display: flex; gap: 10px; margin-bottom: var(--s-3); }
.course-card .foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
@media (max-width: 960px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .course-grid { grid-template-columns: 1fr; } }

/* ===================== 环形进度 ===================== */
.ring { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.ring .pv { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--pri); }

/* ===================== 章节 / 考试 ===================== */
.lesson { display: flex; justify-content: space-between; align-items: center; padding: var(--s-2) var(--s-3); border-radius: var(--r); cursor: pointer; gap: 10px; transition: background-color var(--dur-fast); }
.lesson:hover { background: var(--surface-2); }
.lesson.on { background: var(--pri-soft); }
.lesson .nm { flex: 1; font-size: var(--fs-base); }
.q-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); margin-bottom: var(--s-4); transition: border-color var(--dur-fast); }
.q-item:hover { border-color: var(--border-strong); }
.q-item h4 { font-size: var(--fs-base); margin-bottom: var(--s-3); line-height: 1.6; font-weight: var(--fw-semibold); }
.opt { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: var(--r); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-2); cursor: pointer; font-size: var(--fs-base); transition: border-color var(--dur-fast), background var(--dur-fast); }
.opt:hover { border-color: var(--pri); }
.opt.sel { border-color: var(--pri); background: var(--pri-soft); }
.exam-top { position: sticky; top: 0; background: var(--bg); padding: var(--s-3) 0; z-index: var(--z-sticky); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); margin-bottom: var(--s-4); }

/* ===================== 键值 / 杂项 ===================== */
.kv { display: grid; grid-template-columns: 110px 1fr; font-size: var(--fs-base); border-bottom: 1px dashed var(--border); padding: var(--s-2) 0; }
.kv b { color: var(--text-3); font-weight: 400; }
.mini { font-size: var(--fs-sm); color: var(--text-3); }
.empty { color: var(--text-3); text-align: center; padding: var(--s-10) 0; font-size: var(--fs-sm); }
.toolbar { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); align-items: center; }
.toolbar input, .toolbar select { border: 1px solid var(--border-strong); border-radius: var(--r); padding: var(--s-2) var(--s-3); outline: none; font-size: var(--fs-base); background: var(--surface); color: var(--text); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.toolbar input:focus, .toolbar select:focus { border-color: var(--pri); box-shadow: 0 0 0 3px rgba(232, 74, 26, 0.14); }
.bar { height: 8px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--pri); border-radius: inherit; transition: width var(--dur-slow) var(--ease-out); }

/* ===================== 播放器（保留原实现） ===================== */
.player { position: relative; background: #0f172a; border-radius: var(--r-lg); aspect-ratio: 16/9; overflow: hidden; color: #fff; -webkit-user-select: none; user-select: none; }
.player .scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.player .big { font-size: 56px; }
.pptx-deck-host { width: 100%; height: 100%; display: flex; flex-direction: column; }
.player.pptx-fakefs { position: fixed; inset: 0; z-index: 99999; border-radius: 0; aspect-ratio: auto; overflow: hidden; }
.player.pptx-fakefs .pptx-stagewrap { flex: 1; border-radius: 0; }
.player.pptx-fakefs .pbar, .player.pptx-fakefs .pctrl, .player.pptx-fakefs .marquee { display: none; }
.player.pptx-fakefs .pptx-bar { position: absolute; bottom: 10px !important; z-index: 20; }
.marquee { position: absolute; white-space: nowrap; color: rgba(255,255,255,.35); font-size: 15px; pointer-events: none; z-index: 3; text-shadow: 0 0 4px rgba(0,0,0,.4); }
.pbar { position: absolute; left: 0; right: 0; bottom: 44px; height: 5px; background: rgba(255,255,255,.2); cursor: pointer; z-index: 4; }
.pbar i { display: block; height: 100%; background: var(--pri); }
.pbar .buf { position: absolute; top: 0; left: 0; height: 100%; background: rgba(255,255,255,.28); }
.pctrl { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: rgba(0,0,0,.45); z-index: 4; font-size: 13px; }
.pctrl button { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; }
.pause-mask { position: absolute; inset: 0; background: rgba(0,0,0,.55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; z-index: 5; }
.detail-wrap { display: grid; gap: var(--s-4); }
@media (max-width: 768px) { .detail-wrap { grid-template-columns: 1fr !important; } }

/* ===================== 员工学习平台外壳 ===================== */
/* 内嵌布局：紧凑的顶栏 + 内容区，logo + nav 胶囊 + 头像 */
#app { max-width: 1080px; margin: 0 auto; padding: 0 16px 96px; }
.top { display: flex; justify-content: space-between; align-items: center; padding: var(--s-4) 0; flex-wrap: wrap; gap: var(--s-3); }
.top .brand { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -.01em; display: inline-flex; align-items: center; gap: var(--s-2); }
.top .brand i[data-icon] { width: 22px; height: 22px; color: var(--pri); }
.top-nav {
  display: flex; gap: 4px; background: var(--surface-2);
  padding: 4px; border-radius: var(--r-pill);
  border: 1px solid var(--border);
}
.top-nav button {
  background: none; border: none; padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--text-2); transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); cursor: pointer;
}
.top-nav button:hover { color: var(--text); }
.top-nav button.on {
  background: var(--surface); color: var(--pri);
  box-shadow: var(--shadow-1);
}
.who { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: var(--text-2); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--pri-soft); color: var(--pri);
  display: grid; place-items: center; font-size: 15px; font-weight: var(--fw-semibold);
  flex-shrink: 0; border: 1px solid var(--border);
}
#page { min-height: 40vh; }
.h5-nav { display: none; }
@media (max-width: 768px) {
  .top-nav { display: none; }
  .h5-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: var(--z-sticky); padding: 6px 4px;
  }
  .h5-nav button {
    flex: 1; background: none; border: none; padding: var(--s-2) 0;
    font-size: 11px; color: var(--text-3);
    display: flex; flex-direction: column; gap: 2px; align-items: center;
    cursor: pointer; transition: color var(--dur-fast);
  }
  .h5-nav button.on { color: var(--pri); }
  .h5-nav button i { font-style: normal; font-size: 19px; }
  .course-grid { grid-template-columns: 1fr; }
}

/* ===================== 登录分栏（AKF 现代企业风：深空蓝 + 橙红点缀弧形） ===================== */
.login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 16px;
}
.split {
  display: grid; grid-template-columns: 1.05fr 1fr; min-height: 620px;
  width: 960px; max-width: 96vw; border-radius: var(--r-xl);
  overflow: hidden; box-shadow: var(--shadow-3);
  border: 1px solid var(--border); background: var(--surface);
}
.split .aside {
  position: relative;
  background:
    radial-gradient(900px 480px at 0% 0%, rgba(232, 74, 26, 0.18), transparent 55%),
    radial-gradient(700px 420px at 100% 100%, rgba(26, 71, 137, 0.40), transparent 60%),
    linear-gradient(155deg, #16223b 0%, #0c1626 100%);
  color: #fff; padding: var(--s-10) var(--s-10);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.split .aside::before {
  /* 右上橙色弧（呼应 LOGO 上弧） */
  content: ''; position: absolute; right: -240px; top: -180px;
  width: 540px; height: 540px;
  border: 38px solid var(--pri);
  border-bottom: none; border-left: none;
  border-radius: 50%; opacity: 0.20;
}
.split .aside::after {
  /* 左下蓝色弧（呼应 LOGO 下弧） */
  content: ''; position: absolute; left: -180px; bottom: -180px;
  width: 460px; height: 460px;
  border: 32px solid var(--sec);
  border-top: none; border-right: none;
  border-radius: 50%; opacity: 0.28;
}
.split .aside .brand-lg {
  font-size: 26px; font-weight: var(--fw-bold); letter-spacing: -.02em;
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: var(--s-3);
}
.split .aside .brand-lg img, .split .aside .brand-lg svg { width: 40px; height: 40px; }
.split .aside .tagline {
  font-size: var(--fs-md); line-height: 1.7; color: rgba(255,255,255,.82);
  max-width: 36ch; position: relative; z-index: 1;
}
.split .aside .feat { display: flex; flex-direction: column; gap: var(--s-3); position: relative; z-index: 1; }
.split .aside .feat div {
  display: flex; gap: var(--s-3); align-items: center;
  font-size: var(--fs-sm); color: rgba(255,255,255,.86);
  padding: var(--s-3) var(--s-4); border-radius: var(--r);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.06);
}
.split .aside .feat .ic {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.14);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.split .aside .feat .ic i { width: 16px; height: 16px; color: #fff; }
.split .form { padding: var(--s-10) var(--s-12); display: flex; flex-direction: column; justify-content: center; }
.split .form h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -.02em; margin-bottom: var(--s-2); }
.split .form .sub { color: var(--text-2); margin-bottom: var(--s-8); }
.tip-acc {
  margin-top: var(--s-5); background: var(--pri-soft); border-radius: var(--r);
  padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); color: var(--pri); line-height: 1.9;
}
.tip-acc a { font-weight: var(--fw-semibold); }
@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; min-height: auto; }
  .split .aside { padding: var(--s-8) var(--s-5); min-height: 220px; }
  .split .aside .feat { display: none; }
  .split .form { padding: var(--s-8) var(--s-5); }
  .split .aside::before, .split .aside::after { display: none; }
}

/* ===================== 管理后台外壳（左侧稳定侧栏 + 右侧内容） ===================== */
#app { display: none; min-height: 100vh; }
/* 后台主外壳：暗色侧栏 + 白底内容（差异于员工端，明示"工作台"语境）*/
.side {
  position: fixed; left: 0; top: 0; bottom: 0; width: 248px;
  background: var(--surface); color: var(--text); border-right: 1px solid var(--border);
  overflow-y: auto; z-index: var(--z-sticky);
}
.logo {
  padding: var(--s-4) var(--s-5); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text);
  display: flex; align-items: center; gap: var(--s-3);
  border-bottom: 1px solid var(--border); min-height: var(--top-h);
}
.logo img, .logo svg { width: 30px; height: 30px; }
.logo .sub { display: block; font-size: var(--fs-2xs); color: var(--text-3); font-weight: var(--fw-medium); letter-spacing: 0.04em; margin-top: 2px; text-transform: uppercase; }

.nav-group {
  padding: var(--s-5) var(--s-5) var(--s-2); font-size: var(--fs-2xs); color: var(--text-3);
  font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase;
}
.nav a {
  display: flex; align-items: center; gap: var(--s-3); padding: 10px var(--s-5);
  color: var(--text-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  border-left: 3px solid transparent;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast); text-decoration: none;
}
.nav a i { width: 16px; height: 16px; opacity: .8; }
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.on { background: var(--pri-soft); color: var(--pri); border-left-color: var(--pri); }
.nav a.on i { color: var(--pri); opacity: 1; }

.main { margin-left: 248px; flex: 1; min-height: 100vh; display: flex; flex-direction: column; }
.main .topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: var(--s-4) var(--s-8); display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.main .topbar h2 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
.main .page { padding: var(--s-8); flex: 1; background: var(--bg); }
@media (max-width: 960px) {
  .side { transform: translateX(-100%); transition: transform var(--dur) var(--ease-out); }
  .side.open { transform: none; }
  .main { margin-left: 0; }
}

/* ===================== 主题切换 ===================== */
.theme-toggle { position: fixed; bottom: var(--s-6); right: var(--s-6); width: 44px; height: 44px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-2); display: flex; align-items: center; justify-content: center; z-index: var(--z-tip); border: 1px solid var(--border); }
.theme-toggle i { width: 18px; height: 18px; color: var(--text-2); }
.theme-toggle:hover { border-color: var(--pri); color: var(--pri); }

/* ===================== 入职自助填报（Modern Corporate） ===================== */
.wrap { max-width: var(--container); margin: 0 auto; padding: var(--s-6); }
.head { padding: var(--s-8) 0 var(--s-6); border-bottom: 1px solid var(--border); margin-bottom: var(--s-6); }
.head h1 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: -.02em; color: var(--text); margin-bottom: var(--s-2); }
.head p { color: var(--text-2); font-size: var(--fs-md); line-height: var(--lh-snug); }

.tabbar { display: inline-flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: var(--r-pill); border: 1px solid var(--border); margin-bottom: var(--s-5); }
.tabbar button { background: none; border: none; padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); cursor: pointer; transition: color var(--dur-fast), background var(--dur-fast); }
.tabbar button:hover { color: var(--text); }
.tabbar button.on { background: var(--surface); color: var(--pri); box-shadow: var(--shadow-1); }

.onb-wrap { max-width: var(--container-narrow); margin: 0 auto; padding: var(--s-8) var(--s-5) var(--s-16); }
.onb-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-8); box-shadow: var(--shadow-1); margin-bottom: var(--s-4); }
.onb-card h2 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); margin-bottom: var(--s-2); letter-spacing: -.02em; color: var(--text); }
.onb-card h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin-bottom: var(--s-4); color: var(--text); display: flex; align-items: center; gap: var(--s-2); }
.onb-card .step-sub { color: var(--text-2); font-size: var(--fs-sm); margin-bottom: var(--s-6); }
.onb-step-bar { display: flex; gap: var(--s-2); margin-bottom: var(--s-6); }
.onb-step-bar > .onb-step { flex: 1; height: 6px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.onb-step-bar > .onb-step.done { background: var(--pri); }
.onb-step-bar > .onb-step.on { background: linear-gradient(90deg, var(--pri-soft) 0%, var(--pri) 100%); }

/* 步骤指示器（保留旧 .steps 兼容） */
.steps { position: relative; display: flex; justify-content: space-between; margin-bottom: var(--s-8); }
.steps .step { flex: 1; text-align: center; position: relative; z-index: 1; font-size: var(--fs-xs); color: var(--text-3); }
.steps .step .dot { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: var(--s-2); transition: all var(--dur) var(--ease-out); }
.steps .step.cur .dot { background: var(--pri); color: var(--on-pri); border-color: var(--pri); box-shadow: 0 0 0 4px var(--pri-soft); }
.steps .step.done .dot { background: var(--pri); color: var(--on-pri); border-color: var(--pri); }
.steps .step.done { color: var(--text-2); }
.steps .step.cur { color: var(--pri); font-weight: var(--fw-semibold); }
.steps .ln { position: absolute; top: 14px; left: 8%; right: 8%; height: 2px; background: var(--border-strong); z-index: 0; }
.steps-row { display: flex; gap: 0; margin-bottom: var(--s-6); }
.steps-row > div { flex: 1; text-align: center; font-size: var(--fs-xs); color: var(--text-3); padding: var(--s-3); position: relative; }
.steps-row > div.on { color: var(--pri); font-weight: var(--fw-semibold); }
.steps-row > div::after { content: ''; position: absolute; bottom: 0; left: 12px; right: 12px; height: 2px; background: var(--surface-3); }
.steps-row > div.on::after { background: var(--pri); }
.steps-row > div:last-child::after { display: none; }

/* 附件上传块（onb-card 内子元素）*/
.atch { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px dashed var(--border-strong); border-radius: var(--r); background: var(--surface-2); transition: border-color var(--dur-fast), background var(--dur-fast); }
.atch:hover { border-color: var(--pri); }
.atch .name { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--text); }
.atch .ic { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--pri-soft); color: var(--pri); display: inline-flex; align-items: center; justify-content: center; }
.atch .ic i { width: 18px; height: 18px; }

/* ===================== 工具类 ===================== */
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); }
.mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); }
.fs-xs { font-size: var(--fs-xs); } .fs-sm { font-size: var(--fs-sm); } .fs-md { font-size: var(--fs-md); } .fs-lg { font-size: var(--fs-lg); }
.fw-sb { font-weight: var(--fw-semibold); } .fw-b { font-weight: var(--fw-bold); }
.text-pri { color: var(--pri); } .text-sec { color: var(--sec); }
.text-2 { color: var(--text-2); } .text-3 { color: var(--text-3); }