/* ============================================================
   词鲸英语 · 全栈品牌样式（与官网严格同步）
   来源：cijingyu.com.cn / style.css
   ============================================================ */

/* ---------- 设计变量（从官网 style.css 完全继承） ---------- */
:root {
  --c-primary: #6366F1;
  --c-violet:  #8B5CF6;
  --c-violet-deep: #7C3AED;
  --c-pink:    #EC4899;
  --c-orange:  #FB923C;
  --c-yellow:  #FEF3C7;
  --c-mint:    #10B981;
  --c-blue:    #3B82F6;
  --c-cyan:    #22D3EE;
  --c-sky:     #38BDF8;
  --c-red:     #EF4444;
  --c-amber:   #F59E0B;

  --c-text:    #1F2937;
  --c-sub:     #4B5563;
  --c-muted:   #9CA3AF;
  --c-line:    #E5E7EB;

  --c-bg:      #FAFAFC;
  --c-bg-alt:  #F3F0FF;
  --c-bg-dark: #1F1B3D;
  --c-bg-deeper:#0F0A24;

  --shadow-sm: 0 4px 12px rgba(99, 102, 241, 0.06);
  --shadow-md: 0 12px 30px rgba(99, 102, 241, 0.08);
  --shadow-lg: 0 24px 60px rgba(99, 102, 241, 0.14);
  --shadow-violet: 0 8px 20px rgba(139, 92, 246, 0.35);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --grad-brand: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
  --grad-soft:  linear-gradient(135deg, #EEF2FF 0%, #FCE7F3 100%);
  --grad-violet-pink: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
  --grad-card:  linear-gradient(180deg, #F5F3FF 0%, #FCF7FF 50%, #FAFAFC 100%);

  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", "Helvetica Neue", "Hiragino Sans GB", Arial,
    sans-serif;
}

/* ---------- 全局重置 ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--c-text);
  background: var(--c-bg);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; outline: none; }
table { border-collapse: collapse; width: 100%; }

/* ---------- 品牌渐变文字 ---------- */
.gradient-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- 按钮 ---------- */
/* 注意：模板里大量地方只写 class="btn-primary" / "btn-outline"，并没有带上 .btn。
   所以基础样式必须同时挂在这三个类上，否则那些按钮会掉成浏览器默认的方角。
   （2026-09-12：29 处 btn-primary 曾经全站是方的，就是栽在这） */
.btn, .btn-primary, .btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600; font-size: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--shadow-violet);
  padding: 10px 20px;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(139, 92, 246, .45); }
.btn-primary.block { display: block; width: 100%; padding: 14px; }
.btn-outline {
  background: #fff;
  color: var(--c-violet);
  border: 1.5px solid rgba(139, 92, 246, .25);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
}
.btn-outline:hover { background: var(--c-bg-alt); }

/* ---------- Badge / Tag / Pill ---------- */
.badge, .tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--c-bg-alt);
  color: var(--c-violet);
}
.tag-mini { padding: 2px 8px; font-size: 11px; }
.tag-blue { background: rgba(59,130,246,.1); color: #3B82F6; }
.tag-cyan { background: rgba(34,211,238,.1); color: #06B6D4; }
.tag-green { background: rgba(16,185,129,.1); color: #10B981; }
.tag-purple { background: rgba(139,92,246,.1); color: #8B5CF6; }
.tag-orange { background: rgba(251,146,60,.1); color: #FB923C; }
.tag-amber { background: rgba(245,158,11,.1); color: #F59E0B; }
.tag-pink { background: rgba(236,72,153,.1); color: #EC4899; }
.tag-red { background: rgba(239,68,68,.1); color: #EF4444; }
.tag-gray { background: #F3F4F6; color: #6B7280; }

/* ---------- 卡片 ---------- */
.card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 16px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover { box-shadow: var(--shadow-md); border-color: rgba(139, 92, 246, .18); }
.card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.more {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-violet);
  cursor: pointer;
}
.more:hover { text-decoration: underline; }

/* ---------- KPI Grid ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.kpi {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.kpi-label { font-size: 13px; color: var(--c-sub); font-weight: 500; }
.kpi-value {
  font-size: 32px;
  font-weight: 800;
  margin-top: 6px;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  line-height: 1.1;
}
.kpi-unit { font-size: 14px; color: var(--c-muted); margin-left: 4px; font-weight: 500; }
.kpi::after {
  content: "";
  position: absolute;
  right: -30px; top: -30px;
  width: 80px; height: 80px;
  border-radius: 50%;
  opacity: .15;
}
.kpi-blue::after { background: #3B82F6; }
.kpi-cyan::after { background: #22D3EE; }
.kpi-green::after { background: #10B981; }
.kpi-purple::after { background: #8B5CF6; }
.kpi-orange::after { background: #FB923C; }
.kpi-pink::after { background: #EC4899; }
.kpi-amber::after { background: #F59E0B; }
.kpi-red::after { background: #EF4444; }

/* ---------- Grid 2-col ---------- */
.grid-2 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

/* ---------- 表格 ---------- */
.t {
  width: 100%;
  font-size: 13px;
}
.t th {
  background: var(--c-bg-alt);
  color: var(--c-sub);
  font-weight: 600;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--c-line);
}
.t td {
  padding: 12px;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-text);
}
.t tbody tr:hover { background: var(--c-bg-alt); }
.t tbody tr:last-child td { border-bottom: none; }

/* ---------- 条形图 ---------- */
/* 柱状图：柱子列自成一个 flex 列，日期标签独立在图表外，
   避免标签被当成 flex 项挤进绘图区（此前的错位重叠就是这样来的） */
.bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  height: 170px;
  padding: 20px 4px 0;
  border-bottom: 1px solid var(--c-line);
}
.bar-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 100%;
}
.bar-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-violet);
  line-height: 1;
  height: 12px;
}
.bar {
  width: 100%;
  max-width: 26px;
  background: var(--grad-brand);
  border-radius: 6px 6px 2px 2px;
  transition: opacity .2s, transform .2s;
}
.bar:hover { opacity: .85; transform: scaleY(1.03); }
.bar-labels {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 8px;
  padding: 0 4px;
}
.bar-labels span {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: 10px;
  color: var(--c-muted);
  white-space: nowrap;
  transform: rotate(-38deg);
  transform-origin: center;
}
.bar-summary {
  margin-top: 14px;
  font-size: 12px;
  color: var(--c-sub);
}
.bar-summary b { color: var(--c-violet); font-size: 13px; }
.card-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--c-muted);
  margin-left: 6px;
}

/* ---------- Empty / Loading ---------- */
.empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--c-muted);
  font-size: 13px;
}
.loading {
  text-align: center;
  padding: 36px 16px;
  color: var(--c-violet);
  font-size: 13px;
}

/* ---------- Alert Row ---------- */
.alert-row {
  padding: 10px 14px;
  background: rgba(251, 146, 60, 0.06);
  border-left: 3px solid var(--c-orange);
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 8px;
  color: var(--c-sub);
}

/* ---------- 表单 ---------- */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 12px;
  color: var(--c-sub);
  font-weight: 600;
  margin-bottom: 6px;
}
.input, .select, .search, textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--c-line);
  background: #FAFAFC;
  font-size: 14px;
  color: var(--c-text);
  outline: none;
  transition: border-color .2s;
}
.input:focus, .select:focus, .search:focus, textarea:focus {
  border-color: var(--c-violet);
  background: #fff;
}

/* ---------- Page Actions ---------- */
.page-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.page-actions .search { flex: 1; min-width: 200px; }
.page-actions .select { width: auto; min-width: 140px; }

/* ---------- 基础工具类（离线兜底，不依赖 Tailwind CDN） ---------- */
.hidden { display: none !important; }

/* ---------- 登录页背景 ----------
   原先只有一层极淡的 #F5F3FF→#FAFAFC 渐变 + 55% 透明模糊块，
   整屏发白、层次全无。这里改为多层径向渐变打底 + 高饱和色块，
   让登录页有明确的品牌色域与空间层次。 */
.login-bg {
  min-height: 100vh;
  background:
    radial-gradient(1100px 620px at 8% -12%, #E4DBFF 0%, rgba(228,219,255,0) 62%),
    radial-gradient(880px 540px at 98% 4%,  #FFD9EC 0%, rgba(255,217,236,0) 64%),
    radial-gradient(820px 560px at 76% 104%, #CFE3FF 0%, rgba(207,227,255,0) 62%),
    linear-gradient(158deg, #EFE9FF 0%, #F6F0FF 38%, #FFF1F8 72%, #FFF7FB 100%);
  display: flex;
  position: relative;
  overflow: hidden;
}
.login-bg::before {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  top: -170px; left: -130px;
  background: radial-gradient(circle at 30% 30%, #9B7BFF 0%, #C4B5FD 60%, rgba(196,181,253,0) 72%);
  border-radius: 50%;
  filter: blur(46px);
  opacity: .78;
  pointer-events: none;
}
.login-bg::after {
  content: "";
  position: absolute;
  width: 560px; height: 560px;
  top: 40px; right: -180px;
  background: radial-gradient(circle at 40% 40%, #FF9ECB 0%, #FBCFE8 58%, rgba(251,207,232,0) 72%);
  border-radius: 50%;
  filter: blur(46px);
  opacity: .72;
  pointer-events: none;
}
/* 登录区容器：让登录卡片水平 + 垂直居中 */
.login-panel {
  flex: 1 1 auto;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  position: relative;
  z-index: 1;
}
.login-side {
  flex: 0 0 50%;
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.login-side h1 {
  font-size: 56px;
  font-weight: 800;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin: 24px 0 12px;
  letter-spacing: -1.5px;
}
.login-side p {
  font-size: 18px;
  color: var(--c-sub);
  max-width: 460px;
  line-height: 1.7;
}
.login-side .brand-tag {
  margin-top: 32px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(139, 92, 246, .1);
  color: var(--c-violet);
  font-size: 13px;
  font-weight: 600;
}
.login-form {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  position: relative;
  z-index: 1;
}

/* ============================================================
   登录页 · 左侧产品展示区（2026-09-24 新增）
   布局：左展示（动态）+ 右登录；窄屏自动叠成上下
   ============================================================ */
.login-2col { flex-wrap: wrap; }
.login-2col .login-side {
  flex: 1 1 54%;
  min-height: 100vh;
  padding: 56px 64px;
  justify-content: center;
  overflow: hidden;
}
.login-2col .login-form {
  flex: 0 1 46%;
  min-height: 100vh;
  padding: 40px 28px;
}
@media (max-width: 1080px) {
  .login-2col .login-side, .login-2col .login-form { flex: 1 1 100%; min-height: auto; }
  .login-2col .login-side { padding: 44px 28px 28px; }
  .login-2col .login-form { padding: 8px 20px 48px; }
  .ls-h1 { font-size: 38px !important; }
}

/* 漂浮光斑 */
.ls-glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(52px); opacity: .5;
}
.ls-glow-a {
  width: 420px; height: 420px; top: -80px; left: -60px;
  background: radial-gradient(circle at 35% 35%, #A78BFA, rgba(167,139,250,0));
  animation: lsFloat1 13s ease-in-out infinite;
}
.ls-glow-b {
  width: 380px; height: 380px; bottom: -70px; right: 4%;
  background: radial-gradient(circle at 45% 45%, #F9A8D4, rgba(249,168,212,0));
  animation: lsFloat2 16s ease-in-out infinite;
}
@keyframes lsFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(28px, 34px) scale(1.09); }
}
@keyframes lsFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-32px, -26px) scale(1.07); }
}

/* 漂浮的单词气泡（JS 注入） */
.ls-words { position: absolute; inset: 0; pointer-events: none; }
.ls-w {
  position: absolute; padding: 7px 15px; border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(196, 181, 253, .7);
  box-shadow: 0 6px 18px rgba(109, 40, 217, .1);
  font-weight: 700; color: #5B21B6; white-space: nowrap;
  backdrop-filter: blur(6px);
  animation: lsDrift linear infinite;
}
.ls-w i {
  font-style: normal; font-weight: 500; font-size: .78em;
  color: #A78BFA; margin-left: 6px;
}
@keyframes lsDrift {
  0%   { transform: translateY(14px) rotate(-1.4deg); opacity: 0; }
  12%  { opacity: .95; }
  88%  { opacity: .95; }
  100% { transform: translateY(-26px) rotate(1.4deg); opacity: 0; }
}

/* 文案区 */
.ls-head { position: relative; z-index: 2; }
.ls-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; }
.ls-logo {
  width: 58px; height: 58px; border-radius: 17px;
  box-shadow: 0 10px 26px rgba(109, 40, 217, .24);
}
.ls-name { font-size: 23px; font-weight: 800; color: #4C1D95; letter-spacing: -.4px; }
.ls-sub { font-size: 13px; color: #8B7BA8; margin-top: 2px; }
.ls-h1 {
  font-size: 50px; font-weight: 800; line-height: 1.14; letter-spacing: -1.6px;
  margin: 0 0 20px;
  background: linear-gradient(120deg, #6D28D9, #8B5CF6 42%, #DB2777);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ls-h1 .ls-line { display: block; }
.ls-p {
  font-size: 16px; line-height: 1.85; color: #6B5B8A; max-width: 520px;
  margin: 0 0 26px;
}
.ls-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 38px; }
.ls-tag {
  padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: #5B21B6; background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(196, 181, 253, .8);
  box-shadow: 0 3px 10px rgba(109, 40, 217, .07);
}
.ls-stats {
  display: flex; gap: 38px; padding-top: 26px;
  border-top: 1px solid rgba(196, 181, 253, .5);
}
.ls-stat b {
  display: block; font-size: 31px; font-weight: 800; color: #6D28D9;
  letter-spacing: -.8px; font-variant-numeric: tabular-nums;
  animation: lsPop .72s cubic-bezier(.34, 1.42, .64, 1) both;
}
.ls-stat:nth-child(2) b { animation-delay: .13s; }
.ls-stat:nth-child(3) b { animation-delay: .26s; }
@keyframes lsPop {
  from { opacity: 0; transform: translateY(12px) scale(.84); }
  to   { opacity: 1; transform: none; }
}
.ls-tag { animation: lsPop .7s ease-out both; }
.ls-tag:nth-child(2) { animation-delay: .07s; }
.ls-tag:nth-child(3) { animation-delay: .14s; }
.ls-tag:nth-child(4) { animation-delay: .21s; }
.ls-tag:nth-child(5) { animation-delay: .28s; }
.ls-stat span { font-size: 12.5px; color: #8B7BA8; }

.login-card {
  width: 100%;
  max-width: 468px;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 42px 40px;
  box-shadow: 0 26px 70px rgba(109, 40, 217, .22), 0 3px 10px rgba(109, 40, 217, .06);
  border: 1px solid rgba(233, 213, 255, .9);
}
.login-card h2 { font-size: 27px; font-weight: 800; margin: 0 0 4px; }
.login-card .hint { color: var(--c-sub); font-size: 13.5px; margin-bottom: 28px; }

/* 登录页品牌头部（此前 .login-title / .login-subtitle 未定义，
   标题一直按 body 默认 14px 渲染，所以看起来"字特别小"） */
.login-brand-row { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
/* 官网主 LOGO（蓝鲸 + 紫粉渐变圆角底）。用 drop-shadow 而非 box-shadow，
   让阴影跟随图标实际轮廓而不是方形边框盒。 */
.login-mascot {
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  display: block;
  border-radius: 22px;
  filter: drop-shadow(0 12px 24px rgba(124, 58, 237, .32));
}
.login-title {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.8px;
}
.login-subtitle {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-sub);
  margin-top: 4px;
  letter-spacing: .4px;
}
.login-slogan {
  font-size: 12.5px;
  color: var(--c-violet-deep);
  font-weight: 600;
  margin-top: 6px;
  background: var(--c-bg-alt);
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
}
.quick-login {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--c-line);
}
.quick-label { font-size: 12px; color: var(--c-muted); margin-right: 8px; }
.chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--c-bg-alt);
  color: var(--c-violet);
  font-size: 12px;
  font-weight: 600;
  margin: 4px 4px 0 0;
}
.chip:hover { background: var(--c-violet); color: #fff; }
.row { display: flex; gap: 8px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: 999px;
  background: rgba(31, 41, 55, .92);
  color: #fff;
  font-size: 14px;
  z-index: 9999;
  box-shadow: 0 12px 30px rgba(0,0,0,.2);
}
.toast-ok { background: rgba(16, 185, 129, .92); }
.toast-err { background: rgba(239, 68, 68, .92); }
.toast-warn { background: rgba(245, 158, 11, .92); }
.toast-info { background: rgba(59, 130, 246, .92); }

/* ---------- Modal ---------- */
.modal-mask {
  position: fixed; inset: 0;
  background: rgba(15, 10, 36, .4);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.modal {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 32px;
  width: 480px;
  max-width: 92vw;
  box-shadow: var(--shadow-lg);
}
.modal-title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 20px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .login-side { display: none; }
  .login-form { flex: 1; }
}
@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .login-card { padding: 28px 22px; }
}
/* ============================================================
   小程序专用样式（移动端 480px 容器）
   ============================================================ */
.app-frame {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--c-bg);
  position: relative;
  box-shadow: 0 0 40px rgba(99,102,241,.06);
}

.mini-hero {
  background: var(--grad-card);
  position: relative;
  overflow: hidden;
  border-radius: 0 0 28px 28px;
}
.mini-hero::before {
  content: ""; position: absolute;
  width: 200px; height: 200px;
  top: -60px; left: -40px;
  background: #C7B8FF;
  border-radius: 50%;
  filter: blur(60px); opacity: .55;
}
.mini-hero::after {
  content: ""; position: absolute;
  width: 220px; height: 220px;
  top: 40px; right: -60px;
  background: #FBC4D6;
  border-radius: 50%;
  filter: blur(60px); opacity: .55;
}

/* 小程序 Hero Card (home page) */
.hero-card {
  background: var(--grad-soft);
  border-radius: var(--radius-lg);
  padding: 22px;
  text-align: center;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.hero-emoji { font-size: 36px; }
.hero-title { font-size: 18px; font-weight: 700; margin: 8px 0 14px; }
.hero-stats {
  display: flex;
  justify-content: space-around;
  background: rgba(255,255,255,.6);
  border-radius: var(--radius-md);
  padding: 14px;
}
.hero-stats > div { text-align: center; }
.hero-stats b {
  display: block;
  font-size: 22px;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero-stats span { font-size: 11px; color: var(--c-sub); }

/* Section Title */
.section-title {
  font-size: 16px;
  font-weight: 700;
  margin: 18px 0 12px;
  color: var(--c-text);
}

/* Lesson Card */
.lesson-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  border: 1px solid var(--c-line);
  transition: transform .15s;
}
.lesson-card:active { transform: scale(.98); }
.lesson-time {
  font-size: 18px;
  font-weight: 800;
  color: var(--c-violet);
  min-width: 56px;
  font-variant-numeric: tabular-nums;
}
.lesson-info { flex: 1; }
.lesson-info b { font-size: 14px; }
.lesson-status {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--c-bg-alt);
  color: var(--c-violet);
}

/* Recommend Card */
.recommend-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(135deg, #FCE7F3 0%, #EDE9FE 100%);
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform .15s;
}
.recommend-card:active { transform: scale(.98); }
.rec-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  box-shadow: var(--shadow-sm);
}
.rec-body { flex: 1; }
.rec-title { font-weight: 700; font-size: 15px; }
.rec-sub { font-size: 12px; color: var(--c-sub); margin-top: 2px; }
.rec-arrow { color: var(--c-violet); font-size: 22px; }

/* Sub card (工具区) */
.sub-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  border: 1px solid var(--c-line);
  cursor: pointer;
  transition: transform .15s;
}
.sub-card:active { transform: scale(.98); }
.sub-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--c-bg-alt);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.sub-info { flex: 1; }
.sub-title { font-weight: 700; font-size: 14px; }
.sub-desc { font-size: 12px; color: var(--c-sub); }

/* Tabs pill */
.tabs-pill {
  display: inline-flex;
  padding: 4px;
  background: var(--c-bg-alt);
  border-radius: 999px;
  margin-bottom: 14px;
  gap: 2px;
}
.tabs-pill > div {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-sub);
  cursor: pointer;
}
.tabs-pill > div.active {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--shadow-violet);
}

/* Recording card (speaking) */
.rec-result {
  padding: 18px;
  background: var(--c-bg-alt);
  border-radius: var(--radius-md);
  text-align: center;
}
.rec-score {
  font-size: 36px;
  font-weight: 800;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.rec-result-text { font-size: 13px; color: var(--c-sub); margin-top: 4px; }

/* Progress bar (mini) */
.mini-progress {
  height: 8px;
  background: var(--c-bg-alt);
  border-radius: 999px;
  overflow: hidden;
}
.mini-progress-fill {
  height: 100%;
  background: var(--grad-brand);
  border-radius: 999px;
  transition: width .3s;
}

/* ============================================================
   表单基础件（教务 / 销售 / 小程序 三端共用）
   Tailwind CDN 不可用时的兜底，保证输入框始终有品牌样式
   ============================================================ */
.brand-input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  color: var(--c-text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: var(--font-sans);
}
.brand-input::placeholder { color: var(--c-muted); }
.brand-input:focus {
  border-color: var(--c-violet);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

/* ============================================================
   小程序端组件（绑定页 / 首页 / 教材树 / 拼读 / 复习 / 我的）
   ============================================================ */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  max-width: 480px; margin: 0 auto;
  display: flex; padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--c-line);
  z-index: 50;
}
.tab-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 11px; color: var(--c-muted); cursor: pointer; transition: color .15s;
}
.tab-item.active { color: var(--c-violet); font-weight: 700; }
.tab-icon { font-size: 20px; line-height: 1; }

.section-title {
  font-size: 15px; font-weight: 800; color: var(--c-text);
  margin: 20px 0 10px; display: flex; align-items: center; gap: 6px;
}
.text-muted { color: var(--c-muted); }
.arr { color: var(--c-muted); margin-left: auto; font-size: 14px; }
.link { color: var(--c-violet); cursor: pointer; }
.small { padding: 7px 14px !important; font-size: 12px !important; }
.recording { animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }

/* ---- 返回条 ---- */
.back-bar {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 14px; margin-bottom: 12px;
  border-radius: 999px; background: #fff;
  border: 1px solid var(--c-line);
  font-size: 13px; font-weight: 600; color: var(--c-violet);
  cursor: pointer;
}
.back-bar:hover { background: var(--c-bg-alt); }

/* ---- 统计小卡 ---- */
.stat-grid, .stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 6px;
}
.stat-box, .stats-card {
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius-md, 14px); padding: 14px 10px; text-align: center;
}
.sb-val { font-size: 22px; font-weight: 800; color: var(--c-violet); line-height: 1.2; }
.sb-label, .stats-title { font-size: 11px; color: var(--c-sub); margin-top: 4px; }

/* ---- 教材卡片 ---- */
.tb-card {
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius-md, 14px);
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.tb-card:active { transform: scale(.99); }
.tb-card:hover { box-shadow: var(--shadow-md); border-color: #DDD3FB; }
.tb-name { font-size: 15px; font-weight: 800; color: var(--c-text); }
.tb-version { font-size: 12px; color: var(--c-violet); margin-top: 3px; font-weight: 600; }
.tb-desc {
  font-size: 12px; color: var(--c-sub); margin-top: 6px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- 单元 / 课次 ---- */
.unit-card {
  background: #fff; border: 1px solid var(--c-line); border-left: 4px solid var(--c-violet);
  border-radius: 12px; padding: 13px 16px; margin-bottom: 9px;
  font-size: 14px; font-weight: 600; color: var(--c-text); cursor: pointer;
}
.unit-card:hover { background: var(--c-bg-alt); }
.unit-desc { font-size: 12px; color: var(--c-sub); font-weight: 400; margin-top: 4px; }
.lesson-row {
  background: #fff; border: 1px solid var(--c-line); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 8px; font-size: 13px; color: var(--c-sub);
}

/* ---- 单词卡 ---- */
.word-card {
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius-lg, 18px); padding: 20px; margin-bottom: 12px;
}
.word-name {
  font-size: 30px; font-weight: 800; letter-spacing: -.5px;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.word-pron { font-size: 14px; color: var(--c-violet); margin-top: 2px; font-family: var(--font-mono, monospace); }
.word-mean { font-size: 14px; color: var(--c-text); margin-top: 10px; font-weight: 600; }
.word-example { font-size: 13px; color: var(--c-sub); margin-top: 8px; line-height: 1.6; }
.ex-en { color: var(--c-text); }
.ex-zh { color: var(--c-muted); margin-top: 2px; }
.word-info { display: flex; flex-direction: column; }
.word-actions { display: flex; gap: 10px; margin-top: 14px; }

/* ---- 复习卡 ---- */
.review-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
  padding: 16px; margin-bottom: 10px;
}
.rv-stage { font-size: 11px; font-weight: 700; color: #FB923C; }
.rv-word { font-size: 24px; font-weight: 800; color: var(--c-text); margin-top: 6px; }
.rv-pron { font-size: 13px; color: var(--c-sub); margin-top: 3px; }
.rv-actions { display: flex; gap: 10px; margin-top: 12px; }

/* ---- 顶部横幅 ---- */
.banner-card {
  display: flex; align-items: center; gap: 16px;
  border-radius: var(--radius-lg, 18px); padding: 20px;
  color: #fff; background: var(--grad-brand); margin-bottom: 14px;
  box-shadow: var(--shadow-violet);
}
.banner-emoji { font-size: 40px; }

/* ---- AI 拼读 ---- */
.speaking-card {
  text-align: center; padding: 28px 20px; margin-bottom: 14px;
  border-radius: var(--radius-lg, 18px); background: var(--grad-card);
  border: 1px solid var(--c-line);
}
.sp-emoji { font-size: 46px; }
.sp-title { font-size: 18px; font-weight: 800; color: var(--c-text); margin-top: 6px; }
.sp-sub { font-size: 13px; color: var(--c-sub); margin-top: 4px; }
.result-card, .res-feedback {
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
  padding: 16px; margin-bottom: 12px; text-align: center;
}
.res-score { font-size: 34px; font-weight: 800; color: var(--c-violet); }
.res-detail { font-size: 13px; color: var(--c-sub); margin-top: 6px; }

/* ---- 学习工具九宫格 ---- */
.tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tool {
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
  padding: 14px 6px; text-align: center; font-size: 11px;
  color: var(--c-sub); cursor: pointer; transition: all .15s;
}
.tool:hover { border-color: #DDD3FB; color: var(--c-violet); }
.ti { font-size: 22px; margin-bottom: 5px; }

/* ---- 我的 ---- */
.me-card {
  background: var(--grad-brand); color: #fff; border-radius: var(--radius-lg, 18px);
  padding: 22px; margin-bottom: 14px; box-shadow: var(--shadow-violet);
}
.me-avatar {
  width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.24);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800;
}
.me-name { font-size: 19px; font-weight: 800; }
.me-grade { font-size: 12px; opacity: .85; margin-top: 2px; }
.me-balance { font-size: 26px; font-weight: 800; text-align: right; }
.me-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.me-row {
  background: #fff; border: 1px solid var(--c-line); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 8px; font-size: 14px;
  display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--c-text);
}
.me-row:hover { background: var(--c-bg-alt); }

/* ---- 语法大全 ---- */
.grammar-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
  padding: 16px; margin-bottom: 12px;
}
.g-title { font-size: 15px; font-weight: 800; color: var(--c-text); }
.g-cat { font-size: 11px; color: var(--c-violet); margin-top: 3px; font-weight: 600; }
.g-formula {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--c-bg-alt); font-size: 13px; color: var(--c-text);
  font-family: var(--font-mono, monospace); white-space: pre-wrap;
}
.g-exp, .g-pit { font-size: 13px; color: var(--c-sub); margin-top: 9px; line-height: 1.65; }
.g-pit { color: #D97706; }
.g-details { margin-top: 10px; font-size: 13px; color: var(--c-sub); }
.g-details pre { white-space: pre-wrap; font-family: inherit; margin: 6px 0 0; }

/* ---- 学习进度条 ---- */
.db-bar { height: 7px; border-radius: 999px; background: var(--c-bg-alt); overflow: hidden; margin-top: 6px; }
.db-fill { height: 100%; border-radius: 999px; background: var(--grad-brand); transition: width .3s; }
.db-label { font-size: 12px; color: var(--c-sub); }
.db-val { font-size: 13px; font-weight: 700; color: var(--c-violet); }
.report-card-mini {
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px; padding: 16px; margin-bottom: 12px;
}

/* ============================================================
   报告中心（教务端）· 学情报告 / 学情分析
   此前生成后无任何可视输出，这里补齐整套展示样式
   ============================================================ */
.seg-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--c-bg-alt);
  margin-bottom: 18px;
}
.seg-tab {
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-sub);
  cursor: pointer;
  transition: all .15s;
}
.seg-tab:hover { color: var(--c-violet); }
.seg-tab.active {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--shadow-violet);
}

.report-stage { min-height: 60px; }

.report-card {
  border: 1px solid #E9D5FF;
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(124, 58, 237, .07);
}
.report-head {
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: center; justify-content: space-between;
  padding: 20px 24px;
  background: var(--grad-brand);
  color: #fff;
}
.report-brand { display: flex; align-items: center; gap: 12px; }
.report-logo-img {
  width: 54px; height: 54px;
  display: block;
  flex: 0 0 auto;
  border-radius: 14px;
  background: #fff;
  padding: 2px;
}
/* 兼容旧标记（emoji 版已下线） */
.report-logo { display: none; }
.report-brand-name { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.report-brand-en { font-size: 10px; letter-spacing: 2.4px; opacity: .82; margin-top: 2px; }
.report-meta { text-align: right; }
.rm-name { font-size: 17px; font-weight: 800; }
.rm-sub { font-size: 12px; opacity: .86; margin-top: 3px; }

.report-sec { padding: 20px 24px; border-top: 1px solid #F4F1FE; }
.sec-title { font-size: 14px; font-weight: 800; color: #4C1D95; margin-bottom: 14px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.metric-box {
  background: linear-gradient(160deg, #FAF8FF, #F4F0FF);
  border: 1px solid #EDE9FE;
  border-radius: 13px;
  padding: 13px 14px;
}
.metric-k { font-size: 12px; color: var(--c-sub); }
.metric-v { font-size: 21px; font-weight: 800; color: var(--c-violet-deep); margin-top: 5px; }

.ana-list { margin: 0; padding-left: 0; list-style: none; }
.ana-list li {
  font-size: 13.5px; line-height: 1.85; color: var(--c-text);
  padding: 7px 0 7px 2px;
  border-bottom: 1px dashed #F1EDFD;
}
.ana-list li:last-child { border-bottom: 0; }

.report-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 18px 24px;
  background: #FCFBFF;
  border-top: 1px solid #F4F1FE;
}

@media (max-width: 1024px) {
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .report-meta { text-align: left; }
}

/* ------------------------------------------------------------
   状态标签补齐（此前 .tag-ok / .tag-warn / .tag-err 在模板里被使用，
   但 CSS 里从未定义，导致审批状态等标签没有任何颜色）
   ------------------------------------------------------------ */
.tag-ok    { background: rgba(16,185,129,.12); color: #059669; }
.tag-warn  { background: rgba(245,158,11,.14); color: #D97706; }
.tag-err   { background: rgba(239,68,68,.12);  color: #DC2626; }
.tag-done  { background: rgba(16,185,129,.12); color: #059669; }
.tag-scheduled { background: rgba(99,102,241,.12); color: #6366F1; }
.tag-cancelled { background: #F3F4F6; color: #6B7280; }
.tag-noshow { background: rgba(239,68,68,.12); color: #DC2626; }

/* 报告记录操作列的分隔符 */
.link-sep { color: var(--c-muted); margin: 0 7px; font-size: 11px; }

/* ============================================================
   基础组件补齐（这一批类名长期被模板引用，但 CSS 里从未定义）
   ============================================================ */
.search {
  padding: 10px 14px; border: 1px solid var(--c-line); border-radius: 10px;
  font-size: 14px; font-family: var(--font-sans); outline: none; min-width: 200px;
  background: #fff; color: var(--c-text); transition: border-color .15s, box-shadow .15s;
}
.search:focus { border-color: var(--c-violet); box-shadow: 0 0 0 3px rgba(139,92,246,.12); }
.search::placeholder { color: var(--c-muted); }

/* ---- 表单 ---- */
.form { display: flex; flex-direction: column; gap: 14px; }
.form .field { display: flex; flex-direction: column; gap: 6px; }
.form label { font-size: 13px; font-weight: 600; color: var(--c-sub); }
.form input, .form select, .form textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--c-line);
  border-radius: 10px; font-size: 14px; font-family: var(--font-sans);
  outline: none; background: #fff; color: var(--c-text); transition: border-color .15s, box-shadow .15s;
}
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--c-violet); box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}
.form textarea { resize: vertical; min-height: 76px; line-height: 1.6; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---- 弹窗 ---- */
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 17px; font-weight: 800; color: var(--c-text);
  padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--c-line);
}
.modal-close {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1; color: var(--c-muted); cursor: pointer;
  transition: background .15s, color .15s;
}
.modal-close:hover { background: var(--c-bg-alt); color: var(--c-violet); }
.modal-body { max-height: 66vh; overflow-y: auto; }
.modal-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--c-line);
}

/* ---- 时间线 ---- */
.timeline-item {
  position: relative; display: flex; gap: 12px; padding: 12px 0 12px 4px;
  border-bottom: 1px dashed #F1EDFD; font-size: 13.5px; line-height: 1.7;
}
.timeline-item:last-child { border-bottom: 0; }
.t-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; margin-top: 7px;
  background: var(--grad-brand); box-shadow: 0 0 0 3px rgba(139,92,246,.14);
}
.t-meta { font-size: 12px; color: var(--c-muted); margin-bottom: 3px; }

/* ---- 其他 ---- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.list-footer { padding: 12px 2px 2px; font-size: 12px; color: var(--c-muted); }
.profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }

/* ============================================================
   销售端 v0.11 新增组件
   ============================================================ */
/* KPI 可点击 */
.kpi-clickable { cursor: pointer; }
.kpi-clickable:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #DDD3FB; }
.kpi-go {
  position: absolute; right: 16px; bottom: 14px;
  font-size: 11px; font-weight: 700; color: var(--c-violet);
  opacity: 0; transition: opacity .18s, transform .18s; transform: translateX(-4px);
}
.kpi-clickable:hover .kpi-go { opacity: 1; transform: translateX(0); }

/* 快捷入口条 */
.link-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px;
}
.ls-item {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-md);
  padding: 14px 16px; cursor: pointer; transition: all .16s;
}
.ls-item:hover { border-color: #DDD3FB; box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.ls-icon {
  width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; background: var(--c-bg-alt);
}
.ls-t { font-size: 13.5px; font-weight: 700; color: var(--c-text); }
.ls-s { font-size: 11.5px; color: var(--c-muted); margin-top: 3px; }
.ls-item .arr { margin-left: auto; }

/* 客户跟进页 */
.lead-card { padding: 0; overflow: hidden; }
.lead-head {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px; background: linear-gradient(135deg, #F7F3FF 0%, #FFF3F9 100%);
}
.lead-avatar {
  width: 54px; height: 54px; border-radius: 18px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff;
  background: var(--grad-brand); box-shadow: var(--shadow-violet);
}
.lead-name { font-size: 19px; font-weight: 800; color: var(--c-text); display: flex; align-items: center; gap: 8px; }
.lead-sub { font-size: 12.5px; color: var(--c-sub); margin-top: 4px; }
.lead-score { text-align: center; padding-left: 18px; border-left: 1px solid #EDE4FF; }
.ls-num {
  font-size: 26px; font-weight: 800; line-height: 1;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ls-lbl { font-size: 11px; color: var(--c-muted); margin-top: 4px; }
.lead-contact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 18px 22px; }
.contact-btn {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  background: #fff; border: 1px solid var(--c-line); border-radius: 12px;
  padding: 12px 14px; cursor: pointer; transition: all .16s; text-align: left;
  font-family: var(--font-sans);
}
.contact-btn:hover { border-color: #DDD3FB; background: #FCFBFF; transform: translateY(-2px); }
.contact-btn.static { cursor: default; }
.contact-btn.static:hover { transform: none; }
.cb-icon { font-size: 20px; }
.cb-t { font-size: 13px; font-weight: 700; color: var(--c-text); }
.cb-s { font-size: 11px; color: var(--c-muted); margin-top: 2px; }

/* 结束码点选 */
.code-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.code-chip {
  padding: 9px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--c-line); background: #fff; color: var(--c-sub);
  cursor: pointer; transition: all .14s; font-family: var(--font-sans); text-align: center;
}
.code-chip:hover { border-color: #DDD3FB; color: var(--c-violet); background: #FCFBFF; }
.code-chip.active {
  background: var(--grad-brand); color: #fff; border-color: transparent;
  box-shadow: var(--shadow-violet);
}

/* 审批卡（赠课 / 离职共用） */
.approval-card, .resign-card {
  border: 1px solid #EDE9FE; border-radius: var(--radius-md);
  background: linear-gradient(160deg, #FCFBFF, #FFFFFF);
  padding: 16px 18px; margin-bottom: 12px;
}
.ac-head { display: flex; align-items: center; gap: 14px; }
.ac-icon { font-size: 26px; }
.ac-title { font-size: 15px; font-weight: 800; color: var(--c-text); display: flex; align-items: center; gap: 8px; }
.ac-sub { font-size: 12.5px; color: var(--c-sub); margin-top: 4px; }
.ac-hours { text-align: center; padding-left: 16px; border-left: 1px solid #EDE4FF; }
.ah-num {
  font-size: 24px; font-weight: 800; line-height: 1;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ah-lbl { font-size: 11px; color: var(--c-muted); margin-top: 3px; }
.ac-reason {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--c-bg-alt); font-size: 13px; color: var(--c-text); line-height: 1.65;
}
.ac-actions { display: flex; gap: 10px; margin-top: 14px; }

/* 逐级审批链 */
.chain { display: flex; align-items: center; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.chain-node { display: flex; align-items: center; gap: 9px; flex: 1 1 0; min-width: 130px; }
.cn-dot {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; background: #F3F4F6; color: var(--c-muted);
}
.chain-node.ok .cn-dot { background: rgba(16,185,129,.14); color: #059669; }
.chain-node.err .cn-dot { background: rgba(239,68,68,.14); color: #DC2626; }
.chain-node.current .cn-dot { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-violet); }
.cn-name { font-size: 12.5px; font-weight: 700; color: var(--c-text); }
.cn-sub { font-size: 11px; color: var(--c-muted); margin-top: 2px; }
.cn-note { font-size: 11px; color: #D97706; margin-top: 2px; }
.chain-line { flex: 0 0 auto; width: 18px; height: 2px; background: #EDE9FE; border-radius: 2px; }

/* 企微 */
.wecom-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: linear-gradient(135deg, #F3F0FF 0%, #EAF3FF 100%); border-color: #E4E9FF;
}
.wh-left { display: flex; align-items: center; gap: 14px; }
.wh-logo {
  width: 48px; height: 48px; border-radius: 15px; font-size: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; box-shadow: var(--shadow-sm);
}
.wh-title { font-size: 17px; font-weight: 800; color: var(--c-text); }
.wh-sub { font-size: 12px; color: var(--c-sub); margin-top: 3px; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; }
.feature-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-md); padding: 14px 16px;
}
.fc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fc-name { font-size: 13.5px; font-weight: 800; color: var(--c-text); }
.fc-desc { font-size: 12px; color: var(--c-sub); margin-top: 8px; line-height: 1.65; }
.steps { display: flex; flex-direction: column; gap: 16px; }
.step { display: flex; gap: 14px; }
.st-num {
  width: 28px; height: 28px; border-radius: 9px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff; background: var(--grad-brand);
  box-shadow: var(--shadow-violet);
}
.st-t { font-size: 14px; font-weight: 800; color: var(--c-text); }
.st-d { font-size: 12.5px; color: var(--c-sub); margin-top: 5px; line-height: 1.75; }
.wc-url {
  display: inline-block; padding: 3px 8px; border-radius: 6px; margin-top: 4px;
  background: var(--c-bg-alt); color: var(--c-violet-deep);
  font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; word-break: break-all;
}
.wecom-box { display: flex; flex-direction: column; gap: 9px; }
.wc-row { display: flex; gap: 12px; font-size: 13px; line-height: 1.65; }
.wc-k { flex: 0 0 88px; color: var(--c-muted); }

/* AI 分析卡 */
.ai-card { border-color: #E4DBFF; background: linear-gradient(160deg, #FBF9FF, #FFFFFF); }
.ai-head { display: flex; align-items: center; gap: 14px; }
.ai-spark {
  width: 44px; height: 44px; border-radius: 14px; font-size: 22px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-brand); box-shadow: var(--shadow-violet);
}
.ai-title { font-size: 16px; font-weight: 800; color: var(--c-text); display: flex; align-items: center; gap: 8px; }
.ai-sec { margin-top: 16px; padding-top: 14px; border-top: 1px dashed #EDE9FE; }
.ai-next { font-size: 14px; color: var(--c-text); }

/* 数据字典 */
.dict-row { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px dashed #F1EDFD; }
.dict-row:last-child { border-bottom: 0; }
.dr-cat { flex: 0 0 90px; font-size: 13px; font-weight: 700; color: var(--c-sub); }
.dr-items { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 1280px) {
  .link-strip { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .lead-contact { grid-template-columns: repeat(2, 1fr); }
  .code-grid { grid-template-columns: repeat(2, 1fr); }
  .row-2 { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   小程序 v0.11 新增组件
   ============================================================ */
.w-full { width: 100%; }

/* 渐变磁贴图标 */
.ti-tile {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 6px 16px rgba(124, 58, 237, .22);
}
.ti-tile svg { display: block; }

/* 首页 hero 徽标 */
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px 5px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .82); color: var(--c-violet-deep);
  font-size: 12.5px; font-weight: 700; margin-bottom: 10px;
}

/* 学习工具九宫格（图标磁贴 + 文字） */
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tool {
  background: #fff; border: 1px solid var(--c-line); border-radius: 16px;
  padding: 15px 8px 13px; text-align: center; font-size: 12px; font-weight: 600;
  color: var(--c-sub); cursor: pointer; transition: all .16s;
}
.tool:hover { border-color: #DDD3FB; color: var(--c-violet-deep); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.tool .ti-tile { margin-bottom: 8px; }

/* AI 拼读 · 词库选择器 */
.picker-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: 16px; margin-bottom: 14px;
}
.picker-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 800; color: var(--c-text); margin-bottom: 10px;
}
.picker-head svg { color: var(--c-violet); flex: 0 0 auto; }
.picker-tip { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--c-muted); }
.seg-row { display: flex; gap: 8px; margin-bottom: 12px; }
.seg {
  flex: 1; padding: 8px 0; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--c-line); background: #fff; color: var(--c-sub);
  cursor: pointer; font-family: var(--font-sans); transition: all .15s;
}
.seg.active { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: var(--shadow-violet); }
.field-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.field-row label { flex: 0 0 62px; font-size: 12.5px; color: var(--c-muted); }
.field-row select { flex: 1; padding: 9px 11px; font-size: 13px; border-radius: 10px; }
.word-chips { display: flex; flex-wrap: wrap; gap: 7px; max-height: 190px; overflow-y: auto; padding: 2px; }
.wchip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 7px 11px; border-radius: 10px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--c-line); background: #fff; color: var(--c-text);
  cursor: pointer; font-family: var(--font-sans); transition: all .14s;
}
.wchip .wc-m { font-size: 10px; font-weight: 500; color: var(--c-muted); }
.wchip:hover { border-color: #DDD3FB; color: var(--c-violet); }
.wchip.active { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: var(--shadow-violet); }
.wchip.active .wc-m { color: rgba(255, 255, 255, .82); }
.sp-unit { font-size: 11.5px; color: var(--c-muted); margin-bottom: 6px; }

/* 抗遗忘 · 按主课 */
.rv-lesson {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: 15px 16px; margin-bottom: 12px;
}
.rvl-head { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.rvl-name { font-size: 14.5px; font-weight: 800; color: var(--c-text); display: flex; align-items: center; }
.rvl-meta { font-size: 11.5px; color: var(--c-muted); margin-top: 4px; }
.rvl-pct { font-size: 17px; font-weight: 800; color: var(--c-violet-deep); }
.rvl-body { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #F1EDFD; }
.rvl-body.open { display: block; }
.rvl-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.rvl-words { display: flex; flex-direction: column; gap: 7px; }
.rvw {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 11px; background: var(--c-bg-alt);
  font-size: 13px; cursor: pointer;
}
.rvw.done { background: rgba(16, 185, 129, .09); }
.rvw input { width: 17px; height: 17px; accent-color: var(--c-violet-deep); flex: 0 0 auto; }
.rvw-w { font-weight: 800; color: var(--c-text); }
.rvw-m { color: var(--c-sub); font-size: 12px; }
.rvw-s { margin-left: auto; font-size: 11px; color: var(--c-muted); }
.rvw.done .rvw-s { color: #059669; font-weight: 700; }
.rv-bar {
  position: sticky; bottom: 74px; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding: 12px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .97); border: 1px solid #EDE9FE;
  box-shadow: 0 10px 28px rgba(124, 58, 237, .16);
  backdrop-filter: blur(12px);
}
.rv-bar-info { font-size: 12.5px; color: var(--c-sub); }
.rv-bar-info b { color: var(--c-violet-deep); font-size: 15px; }

/* 语法学段分类（2026-09-23 新增）
   宋哥：「语法这一块我建议分成小初高雅思托福KETPET…点开不同的类目就显示
   这个阶段下的语法，不然这样太长了，太乱了」
   —— 横向可滑的胶囊条，选中态用品牌渐变。 */
.g-stab-bar {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.g-stab-bar::-webkit-scrollbar { display: none; }
.g-stab {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: #F5F3FF; color: #6D28D9; border: 1px solid #E9E4FB;
  font-family: var(--font-sans); transition: all .15s;
}
.g-stab:hover { background: #EDE9FE; }
.g-stab.on {
  background: var(--grad-brand); color: #fff; border-color: transparent;
  box-shadow: var(--shadow-violet);
}

/* 语法 AI 视频讲解 */
.g-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 4px; }
.video-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 8px 14px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--grad-brand); color: #fff; font-size: 12px; font-weight: 700;
  font-family: var(--font-sans); box-shadow: var(--shadow-violet); transition: transform .15s;
}
.video-btn:hover { transform: translateY(-1px); }
.video-wrap {
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 14px;
  background: linear-gradient(140deg, #1E1B4B, #4C1D95 55%, #831843);
  min-height: 190px;
}
.player-stage {
  position: relative; min-height: 190px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; padding: 24px; text-align: center;
}
.player-glow {
  position: absolute; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, .55), rgba(236, 72, 153, 0) 70%);
  filter: blur(18px);
}
.player-tip { position: relative; color: #fff; font-size: 14px; font-weight: 800; }
.player-sub { position: relative; color: rgba(255, 255, 255, .72); font-size: 11.5px; }
.chapter-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.chapter {
  display: flex; gap: 11px; padding: 10px 12px; border-radius: 12px;
  background: var(--c-bg-alt); cursor: pointer; transition: all .15s;
}
.chapter.active { background: #F3F0FF; box-shadow: inset 0 0 0 1px #DDD3FB; }
.ch-time { flex: 0 0 42px; font-size: 11.5px; font-weight: 800; color: var(--c-violet-deep); }
.ch-title { font-size: 13px; font-weight: 700; color: var(--c-text); }
.ch-text { font-size: 12px; color: var(--c-sub); margin-top: 3px; line-height: 1.65; }

/* 绘本 / 自然拼读 资源 */
.resource-grid { display: flex; flex-direction: column; gap: 11px; }
.res-card {
  display: flex; gap: 14px; align-items: center;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-md);
  padding: 14px 16px; transition: all .16s;
}
.res-card:hover { border-color: #DDD3FB; box-shadow: var(--shadow-sm); }
.res-cover {
  width: 52px; height: 52px; border-radius: 14px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; background: var(--c-bg-alt);
}
.res-cover.phonics {
  background: linear-gradient(135deg, #10B981, #34D399); color: #fff;
  font-size: 18px; font-weight: 800;
}
.res-name { font-size: 14.5px; font-weight: 800; color: var(--c-text); }
.res-cn { font-size: 12.5px; color: var(--c-sub); margin-top: 3px; }
.res-meta { font-size: 11.5px; color: var(--c-muted); margin-top: 5px; }

/* 我的 · 列表 */
.me-list { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.me-row .mr-t { flex: 1; font-weight: 600; }
.me-row svg { color: var(--c-violet); flex: 0 0 auto; }
.me-row.danger { color: var(--c-red); }
.me-row.danger svg { color: var(--c-red); }

.lesson-status.done { background: rgba(16, 185, 129, .12); color: #059669; }

/* 小程序弹窗：手机宽度内收窄，避免贴边 */
.mini-modal { width: 100%; max-width: 420px; }
@media (max-width: 480px) {
  .mini-modal { border-radius: var(--radius-lg); }
}

/* 小程序「我的词汇量」容器（原名 .stats-card 与 brand.css 里的小方块重名，已改名） */
.vocab-card {
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: 16px; margin-bottom: 14px;
}
.vocab-card .stats-grid { grid-template-columns: repeat(4, 1fr); }
.vocab-card .stats-title {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--c-text);
  margin: 0 0 12px; text-align: center;
}
.vocab-card .stats-title svg { color: var(--c-violet); flex: 0 0 auto; }
.vocab-card .stat-box { background: var(--c-bg-alt); border: 0; padding: 12px 6px; }
@media (max-width: 380px) {
  .vocab-card .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------------
   数据字典面板（原先是无标点的一排灰 tag，看不出分组与含义）
   ------------------------------------------------------------------ */
.dict-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.dict-group {
  border: 1px solid var(--c-line); border-radius: var(--radius-md);
  background: linear-gradient(160deg, #FCFBFF, #FFFFFF);
  padding: 15px 17px;
}
.dg-head { display: flex; align-items: center; gap: 8px; }
.dg-name { font-size: 14px; font-weight: 800; color: var(--c-text); }
.dg-count {
  font-size: 11px; font-weight: 700; color: var(--c-violet);
  background: var(--c-bg-alt); padding: 2px 8px; border-radius: 999px;
}
.dg-desc { font-size: 11.5px; color: var(--c-muted); margin: 7px 0 11px; line-height: 1.6; }
.dg-items { display: flex; flex-wrap: wrap; gap: 7px; }
.dict-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 9px; border-radius: 999px;
  background: #fff; border: 1px solid var(--c-line);
  font-size: 12.5px; font-weight: 600; color: var(--c-text);
}
.dc-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.dc-code {
  font-size: 10px; color: var(--c-muted); font-family: ui-monospace, Consolas, monospace;
  padding-left: 4px; border-left: 1px solid var(--c-line);
}
@media (max-width: 1100px) { .dict-panel { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------
   弹窗内页签（.tabs/.tab/.tab-pane 此前从未定义，
   导致学员详情里的「档案 / 课时流水 / 跟进 / 报告」退化成一排纯文本）
   ------------------------------------------------------------------ */
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--c-bg-alt);
  overflow-x: auto;
}
.tabs .tab {
  flex: 1 0 auto;
  padding: 8px 18px;
  border-radius: 999px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-sub);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.tabs .tab:hover { color: var(--c-violet); }
.tabs .tab.active {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--shadow-violet);
}
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeUp .18s ease; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* KPI 卡需要相对定位，「查看 →」才能贴在右下角 */
.kpi { position: relative; }

/* ==================================================================
   排课体系：周课表 / 课表上传 / 临时加课
   ================================================================== */
.week-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, #F7F3FF, #FFF3F9);
  border: 1px solid #EDE9FE;
}
.wb-title { font-size: 15px; font-weight: 800; color: var(--c-text); display: flex; align-items: center; gap: 8px; }
.scope-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
}
.scope-badge.all { background: rgba(16,185,129,.12); color: #059669; }
.scope-badge.self { background: rgba(245,158,11,.15); color: #D97706; }

.week-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius-md); }
.week-grid { width: 100%; border-collapse: collapse; min-width: 900px; }
.week-grid th {
  background: var(--c-bg-alt); padding: 9px 6px; font-size: 12px; font-weight: 700;
  color: var(--c-text); text-align: center; border-bottom: 1px solid var(--c-line);
  position: sticky; top: 0;
}
.week-grid th.today { background: #F3F0FF; color: var(--c-violet-deep); }
.wg-dow { font-size: 12px; }
.wg-md { font-size: 10.5px; color: var(--c-muted); margin-top: 2px; }
.week-grid td { border-bottom: 1px solid #F4F1FE; border-right: 1px solid #F7F5FF; }
.wg-time {
  width: 58px; text-align: center; font-size: 11px; font-weight: 700;
  color: var(--c-muted); background: #FCFBFF; white-space: nowrap;
}
.wg-cell {
  height: 46px; padding: 3px; vertical-align: top; cursor: pointer;
  transition: background .12s; min-width: 92px;
}
.wg-cell:hover { background: #FAF8FF; }
.wg-cell.has:hover { background: #F7F3FF; }
.wg-chip {
  display: flex; flex-direction: column; gap: 1px;
  padding: 4px 7px; border-radius: 8px; margin-bottom: 3px;
  background: linear-gradient(135deg, #EDE9FE, #F5F0FF);
  border-left: 3px solid var(--c-violet);
  font-size: 11px; line-height: 1.3; overflow: hidden;
}
.wg-chip b { color: var(--c-violet-deep); font-size: 11.5px; }
.wg-chip span { color: var(--c-muted); font-size: 10px; }
.wg-chip.trial { background: linear-gradient(135deg, #FFEDD5, #FFF7ED); border-left-color: #F59E0B; }
.wg-chip.trial b { color: #C2410C; }

/* 课表上传面板 */
.upload-panel {
  border: 1px solid var(--c-line); border-radius: var(--radius-md);
  background: linear-gradient(160deg, #FCFBFF, #FFFFFF);
  padding: 18px 20px; margin-bottom: 16px;
}
.up-head { font-size: 15px; font-weight: 800; color: var(--c-text); margin-bottom: 8px; }
.up-desc { font-size: 12.5px; color: var(--c-sub); margin-bottom: 12px; line-height: 1.7; }
.up-note { font-size: 11.5px; color: var(--c-muted); line-height: 1.9; }
.upload-ok {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: rgba(16,185,129,.1); color: #047857; font-weight: 700; font-size: 13.5px;
}

/* ==================================================================
   数据中心（导出 / 上传）
   ================================================================== */
.data-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1180px) {
  .data-grid { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
}
.data-block {
  border: 1px solid var(--c-line); border-radius: var(--radius-md);
  background: linear-gradient(160deg, #FCFBFF, #FFFFFF);
  padding: 18px 20px;
}
.db-head { font-size: 15px; font-weight: 800; color: var(--c-text); margin-bottom: 8px; }
.db-desc { font-size: 12.5px; color: var(--c-sub); line-height: 1.75; margin-bottom: 11px; }
.db-desc b { color: var(--c-violet-deep); }
.db-cols { display: flex; flex-wrap: wrap; gap: 6px; }
.col-chip {
  padding: 3px 9px; border-radius: 999px; font-size: 11px;
  background: #F5F3FF; color: #6D28D9; border: 1px solid #EDE9FE; white-space: nowrap;
}
.col-chip.more { background: #F1F5F9; color: #64748B; border-color: #E2E8F0; }

.up-result { border-top: 1px dashed #EDE9FE; padding-top: 13px; }
.up-r-head { font-size: 12.5px; color: var(--c-sub); margin-bottom: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.up-r-table { max-height: 340px; overflow-y: auto; border: 1px solid var(--c-line); border-radius: 10px; }
.up-r-table table.t { margin: 0; }
.up-result .up-err-cell { font-size: 11.5px; color: #B91C1C; line-height: 1.6; }
.up-result tr.row-bad { background: #FFF5F5; }
.up-err {
  padding: 12px 15px; border-radius: 10px; font-size: 12.5px; line-height: 1.7;
  background: #FFF1F2; border: 1px solid #FECDD3; color: #BE123C;
}
.up-ok {
  padding: 14px 16px; border-radius: 11px;
  background: linear-gradient(135deg, #ECFDF5, #F0FDFA); border: 1px solid #A7F3D0;
}
.up-ok-title { font-size: 14px; font-weight: 800; color: #047857; }
.up-ok-sub { font-size: 12px; color: #059669; margin-top: 5px; }

/* ==================================================================
   上课点名：权限条 / 内容点选 / 进度
   ================================================================== */
.scope-bar {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 18px; border-radius: var(--radius-md); margin-bottom: 18px;
}
.scope-bar.all { background: linear-gradient(135deg, #ECFDF5, #F0FDFA); border: 1px solid #A7F3D0; }
.scope-bar.self { background: linear-gradient(135deg, #FFFBEB, #FEF3C7); border: 1px solid #FDE68A; }
.sb-icon { font-size: 22px; }
.sb-title { font-size: 13.5px; font-weight: 800; color: var(--c-text); }
.sb-sub { font-size: 12px; color: var(--c-sub); margin-top: 3px; }

.plan-head {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 18px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, #F7F3FF, #FFF3F9);
}
.ph-name { font-size: 17px; font-weight: 800; color: var(--c-text); display: flex; align-items: center; gap: 8px; }
.ph-prog { text-align: center; }
.pp-num {
  font-size: 22px; font-weight: 800; line-height: 1;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pp-lbl { font-size: 11px; color: var(--c-muted); margin-top: 3px; }
.plan-sec { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #EDE9FE; }

.unit-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.uchip {
  position: relative; padding: 8px 13px; border-radius: 10px;
  border: 1px solid var(--c-line); background: #fff; color: var(--c-sub);
  font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: var(--font-sans);
  transition: all .14s;
}
.uchip:hover { border-color: #DDD3FB; color: var(--c-violet); }
.uchip.cur { border-color: var(--c-violet); color: var(--c-violet-deep); }
.uchip.done { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; text-align: left; }
.uchip.done i { font-style: normal; font-size: 10px; color: #059669; display: block; margin-top: 1px; }
.uchip.sel { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: var(--shadow-violet); }
.uchip.sel i { color: rgba(255,255,255,.85); }

.mod-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.mchip {
  padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--c-line); background: #fff; color: var(--c-sub);
  cursor: pointer; font-family: var(--font-sans); transition: all .14s;
}
.mchip:hover { border-color: #DDD3FB; color: var(--c-violet); }
.mchip.active { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: var(--shadow-violet); }

.content-preview {
  margin-top: 14px; padding: 13px 16px; border-radius: 12px;
  background: linear-gradient(160deg, #FAF8FF, #F5F0FF); border: 1px solid #EDE9FE;
}
.cp-label { font-size: 11px; color: var(--c-muted); margin-bottom: 4px; }
.cp-text { font-size: 14.5px; font-weight: 800; color: var(--c-violet-deep); margin-bottom: 6px; }

/* 进度条（教材进度 / 抗遗忘共用） */
.db-bar { height: 6px; border-radius: 999px; background: #EDE9FE; overflow: hidden; }
.db-fill { height: 100%; border-radius: 999px; background: var(--grad-brand); transition: width .4s; }

.input.small, select.input.small { padding: 6px 10px; font-size: 12.5px; }

/* 审批人信息行（赠课审批卡） */
.approver-line {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 12px; padding: 9px 12px; border-radius: 10px;
  background: #fff; border: 1px dashed #DDD3FB;
}
.al-label { font-size: 11.5px; color: var(--c-muted); }
.al-user {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: var(--c-bg-alt); color: var(--c-violet-deep);
}
.al-user i { font-style: normal; font-size: 10.5px; color: var(--c-muted); font-weight: 500; }
.al-user.mine { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-violet); }
.al-user.mine i { color: rgba(255,255,255,.82); }

/* 快捷入口高亮（有待办时） */
.ls-item.hl { border-color: #FECACA; background: linear-gradient(135deg, #FFF5F5, #FFFFFF); }
.ls-item.hl .ls-t { color: #B91C1C; }

/* 学情分析三段式（先夸优秀 → 待提升 → 规划建议） */
.ana-block { border-radius: 14px; padding: 14px 18px; margin-bottom: 12px; border: 1px solid #EDE9FE; }
.ana-block.good { background: linear-gradient(140deg, #F0FDF4, #FFFFFF); border-color: #BBF7D0; }
.ana-block.warn { background: linear-gradient(140deg, #FFFBEB, #FFFFFF); border-color: #FDE68A; }
.ana-block.plan { background: linear-gradient(140deg, #F5F3FF, #FFFFFF); border-color: #DDD6FE; }
.ana-title { font-size: 13.5px; font-weight: 800; color: #4C1D95; margin-bottom: 8px; }
.ana-block.good .ana-title { color: #047857; }
.ana-block.warn .ana-title { color: #B45309; }
.ana-block ul { margin: 0; padding-left: 18px; }
.ana-block li { font-size: 13.5px; line-height: 1.9; color: var(--c-text); }

/* ==================================================================
   小程序首页：三大优势卡片 + 教务打通状态条
   ================================================================== */
.adv-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 14px 0 12px; }
.adv-item {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 13px 6px; border-radius: 16px; text-align: center;
  background: #fff; border: 1px solid var(--c-line);
  cursor: pointer; transition: all .16s;
}
.adv-item:hover { border-color: #DDD3FB; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.av-t { font-size: 12px; font-weight: 800; color: var(--c-text); }
.av-s { font-size: 10px; color: var(--c-muted); margin-top: 2px; line-height: 1.35; }

.sync-bar {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 15px; border-radius: 14px; margin-bottom: 16px;
  background: linear-gradient(135deg, #ECFDF5, #F0FDFA);
  border: 1px solid #A7F3D0;
}
.sy-icon { font-size: 19px; }
.sy-t { font-size: 12.5px; font-weight: 800; color: #047857; }
.sy-s { font-size: 11px; color: #059669; margin-top: 2px; line-height: 1.45; }
.sy-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #10B981; flex: 0 0 auto;
  box-shadow: 0 0 0 4px rgba(16,185,129,.18); animation: syPulse 1.8s infinite;
}
@keyframes syPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
  50% { box-shadow: 0 0 0 7px rgba(16,185,129,.06); }
}

/* 优势弹窗 */
.adv-detail { display: flex; flex-direction: column; gap: 12px; }
.ad-row { display: flex; gap: 12px; align-items: flex-start; }
.ad-no {
  width: 22px; height: 22px; border-radius: 7px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; color: #fff;
  background: var(--grad-brand); box-shadow: var(--shadow-violet);
}
.ad-text { font-size: 13px; line-height: 1.75; color: var(--c-text); }

/* 抗遗忘来源拆分 */
.src-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 6px; }
.ss-item { border-radius: 14px; padding: 12px 14px; border: 1px solid var(--c-line); }
.ss-item.edu { background: linear-gradient(140deg, #F5F3FF, #FFFFFF); border-color: #DDD6FE; }
.ss-item.self { background: linear-gradient(140deg, #EFF6FF, #FFFFFF); border-color: #BFDBFE; }
.ss-num { font-size: 21px; font-weight: 800; line-height: 1; color: var(--c-violet-deep); }
.ss-item.self .ss-num { color: #2563EB; }
.ss-lbl { font-size: 12.5px; font-weight: 700; color: var(--c-text); margin-top: 4px; }
.ss-tip { font-size: 10.5px; color: var(--c-muted); margin-top: 2px; line-height: 1.4; }

/* ------------------------------------------------------------------
   加载失败面板（替换原先的英文 "Failed to fetch" 白屏）
   ------------------------------------------------------------------ */
.load-fail {
  max-width: 460px; margin: 70px auto; padding: 34px 30px;
  text-align: center; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #FCFBFF, #FFFFFF);
  border: 1px solid #EDE9FE; box-shadow: var(--shadow-sm);
}
.lf-icon { font-size: 40px; margin-bottom: 12px; }
.lf-title { font-size: 18px; font-weight: 800; color: var(--c-text); margin-bottom: 10px; }
.lf-msg { font-size: 13.5px; color: var(--c-violet-deep); font-weight: 600; margin-bottom: 8px; word-break: break-all; }
.lf-hint { font-size: 12.5px; color: var(--c-muted); line-height: 1.75; margin-bottom: 20px; }
.lf-btn { display: inline-flex; }

/* 周课表：7 列等宽，窄屏也能完整显示（原来靠 min-width 撑，右列会被裁） */
.week-grid { min-width: 720px; table-layout: fixed; }
.wg-cell { min-width: 0; }
.wg-time { width: 50px; }
.wg-chip { padding: 3px 6px; }
.wg-chip b { font-size: 11px; }
.wg-chip span { font-size: 9.5px; }

/* ==================================================================
   小程序 v0.14：试听宣传 / 企微二维码 / 投诉反馈 / 报课分级 / 讲解播放器
   ================================================================== */

/* 未报课身份标 */
.guest-chip {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; vertical-align: middle;
  background: rgba(245, 158, 11, .18); color: #B45309;
}

/* 试听课宣传卡 */
.trial-card {
  position: relative; overflow: hidden; margin: 14px 0;
  padding: 18px 18px 16px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #FFF1F6 0%, #F3EEFF 55%, #EAF3FF 100%);
  border: 1px solid #F3D9E8;
}
.trial-card::after {
  content: ''; position: absolute; right: -34px; top: -34px;
  width: 108px; height: 108px; border-radius: 50%;
  background: radial-gradient(circle, rgba(236,72,153,.22), rgba(236,72,153,0) 70%);
}
.tc-top { display: flex; align-items: center; gap: 8px; position: relative; }
.tc-badge {
  padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800;
  color: #fff; background: linear-gradient(135deg, #F43F5E, #EC4899);
  box-shadow: 0 4px 10px rgba(236,72,153,.3);
}
.tc-title { font-size: 16px; font-weight: 800; color: #4C1D95; }
.tc-desc {
  position: relative; margin: 11px 0 14px; font-size: 12.5px; line-height: 1.95;
  color: #6B5B95;
}
.tc-btn {
  position: relative; width: 100%; padding: 12px 0; border: 0; cursor: pointer;
  border-radius: 999px; font-size: 14px; font-weight: 800; color: #fff;
  font-family: var(--font-sans);
  background: linear-gradient(135deg, #8B5CF6, #EC4899);
  box-shadow: 0 8px 20px rgba(139,92,246,.32);
  transition: transform .15s;
}
.tc-btn:active { transform: scale(.985); }

/* 企微二维码卡 */
.qr-card {
  display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
  padding: 14px 16px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #ECFDF5, #F0FDFA);
  border: 1px solid #A7F3D0; cursor: pointer; transition: all .16s;
}
.qr-card:active { transform: scale(.99); }
.qr-card.complaint { background: linear-gradient(135deg, #EFF6FF, #F5F3FF); border-color: #BFDBFE; }
.qr-img {
  width: 68px; height: 68px; border-radius: 12px; flex: 0 0 auto;
  background: #fff; padding: 4px; box-shadow: 0 3px 10px rgba(16,185,129,.16);
}
.qr-info { flex: 1; min-width: 0; }
.qr-t { font-size: 14px; font-weight: 800; color: var(--c-text); }
.qr-s { font-size: 11.5px; color: #059669; margin-top: 4px; }
.qr-card.complaint .qr-s { color: #2563EB; }
.qr-hint { font-size: 10.5px; color: var(--c-muted); margin-top: 5px; }
.qr-ph {
  width: 68px; height: 68px; border-radius: 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px dashed #CBD5E1; color: #94A3B8;
}
.empty-qr { background: #FAFAFA; border-color: #E5E7EB; cursor: default; }
.empty-qr .qr-s { color: var(--c-muted); }

/* 二维码放大弹窗 */
.qr-modal { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.qr-modal img { width: 220px; height: 220px; border-radius: 16px; background: #fff; }
.qm-tip { font-size: 12.5px; color: var(--c-sub); text-align: center; line-height: 1.7; }
.qm-url {
  font-size: 10.5px; color: var(--c-muted); word-break: break-all; text-align: center;
  font-family: ui-monospace, Consolas, monospace;
  background: var(--c-bg-alt); padding: 7px 10px; border-radius: 8px; width: 100%;
}
.qm-empty { font-size: 14px; font-weight: 700; color: var(--c-text); }

/* 报课分级：未报课提示条 */
.guest-banner {
  display: flex; align-items: center; gap: 9px; margin: 10px 0 12px;
  padding: 11px 13px; border-radius: 12px; font-size: 12px; line-height: 1.6;
  background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
  border: 1px solid #FDE68A; color: #92400E;
}
.guest-banner > div { flex: 1; }
.gb-cta {
  flex: 0 0 auto; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #F59E0B, #F97316); color: #fff;
  font-size: 11.5px; font-weight: 800;
}
/* 锁定条目 */
.lock-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 11px;
  padding: 14px 16px; border-radius: var(--radius-md);
  background: #FAFAFC; border: 1px dashed #D8D4E8; cursor: pointer;
}
.lock-row:active { background: #F4F2FA; }
.lock-ico { font-size: 18px; flex: 0 0 auto; }
.lock-body { flex: 1; min-width: 0; }
.lock-t { font-size: 13.5px; font-weight: 700; color: #6B7280; }
.lock-s { font-size: 11px; color: #9CA3AF; margin-top: 3px; }
.lock-cta {
  flex: 0 0 auto; padding: 5px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; color: var(--c-violet-deep);
  background: #F3F0FF;
}
.free-tag {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; background: rgba(16,185,129,.14); color: #059669;
  vertical-align: middle;
}

/* ==================================================================
   语法 AI 讲解播放器
   ================================================================== */
.vp-wrap { border-radius: var(--radius-lg); overflow: hidden; background: #14103A; }
.vp-stage {
  position: relative; min-height: 250px; padding: 22px 22px 26px;
  display: flex; flex-direction: column; gap: 12px; overflow: hidden;
  background: linear-gradient(140deg, #1E1B4B, #3B1D6E 55%, #6B1F55);
}
.vp-glow {
  position: absolute; width: 300px; height: 300px; border-radius: 50%;
  right: -80px; top: -90px; pointer-events: none;
  background: radial-gradient(circle, rgba(168,85,247,.5), rgba(236,72,153,0) 70%);
  filter: blur(20px);
}
.vp-head { position: relative; display: flex; align-items: center; justify-content: space-between; }
.vp-no { font-size: 11.5px; font-weight: 800; color: rgba(255,255,255,.62); letter-spacing: .5px; }
.vp-live {
  font-size: 10.5px; font-weight: 700; color: #fff; padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,.14);
}
.vp-title {
  position: relative; font-size: 21px; font-weight: 800; color: #fff; letter-spacing: .3px;
}
.vp-text {
  position: relative; font-size: 14.5px; line-height: 2; color: rgba(255,255,255,.9);
  min-height: 84px;
}
.vp-formula {
  position: relative; font-size: 13px; color: #FDE68A; line-height: 1.8;
  padding: 10px 13px; border-radius: 10px; background: rgba(255,255,255,.09);
}
.vp-formula:empty { display: none; }
.vp-bar {
  display: flex; align-items: center; gap: 11px; padding: 11px 14px; background: #0F0C29;
}
.vp-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff; background: var(--grad-brand); flex: 0 0 auto;
}
.vp-btn.ghost { background: rgba(255,255,255,.13); width: 30px; height: 30px; font-size: 12px; }
.vp-track {
  position: relative; flex: 1; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,.18); cursor: pointer;
}
.vp-prog {
  position: absolute; left: 0; top: 0; height: 100%; width: 0;
  border-radius: 999px; background: linear-gradient(90deg, #A855F7, #EC4899);
}
.vp-knob {
  position: absolute; top: 50%; left: 0; width: 11px; height: 11px; border-radius: 50%;
  background: #fff; transform: translate(-50%, -50%); box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.vp-time {
  flex: 0 0 auto; font-size: 11px; color: rgba(255,255,255,.75);
  font-family: ui-monospace, Consolas, monospace;
}
#vp-chapters .chapter { cursor: pointer; }
#vp-chapters .chapter.active { background: #F3F0FF; box-shadow: inset 0 0 0 1px #DDD3FB; }

/* AI 课堂反馈（老师只读） */
.fb-list { display: flex; flex-direction: column; gap: 10px; }
.fb-c { font-size: 13.5px; line-height: 1.95; color: var(--c-text); }

/* 老师端个人课表标识 */
.my-sched-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  background: #fff; border: 1px solid #FDE68A;
  font-size: 12.5px; font-weight: 800; color: #B45309;
}
/* 只读格子（老师不能加课） */
.wg-cell.ro { cursor: default; }
.wg-cell.ro:hover { background: transparent; }
.wg-cell.ro.has:hover { background: transparent; }

/* 教务端：小程序运营配置 */
.cfg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.cfg-item {
  border: 1px solid var(--c-line); border-radius: var(--radius-md);
  background: linear-gradient(160deg, #FCFBFF, #FFFFFF); padding: 15px 17px;
}
.cfg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.cfg-label { font-size: 13.5px; font-weight: 800; color: var(--c-text); }
.cfg-tag {
  padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700;
  background: rgba(16,185,129,.14); color: #059669;
}
.cfg-tag.content { background: rgba(139,92,246,.13); color: var(--c-violet-deep); }
.cfg-hint { font-size: 11.5px; color: var(--c-muted); line-height: 1.65; margin-bottom: 10px; }
.cfg-input { width: 100%; }
.cfg-qr-row {
  display: flex; align-items: center; gap: 11px; margin-top: 11px;
  padding-top: 11px; border-top: 1px dashed #F1EDFD;
}
.cfg-qr { width: 74px; height: 74px; border-radius: 10px; background: #fff; border: 1px solid var(--c-line); }
@media (max-width: 1100px) { .cfg-grid { grid-template-columns: 1fr; } }

/* ==================================================================
   小程序品牌栏（顶部 logo + 名称 + 宣传语）
   ================================================================== */
.brand-bar {
  position: relative; z-index: 10;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px 9px 10px; border-radius: 16px;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 4px 14px rgba(124, 58, 237, .09);
}
.bb-logo { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; }
.bb-info { flex: 1; min-width: 0; }
.bb-name { font-size: 14.5px; font-weight: 800; color: #4C1D95; letter-spacing: .2px; }
.bb-slogan {
  font-size: 10.5px; color: #7C6BA8; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bb-bell {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; background: #fff; cursor: pointer;
  box-shadow: 0 2px 8px rgba(124, 58, 237, .12);
}

/* 自然拼读：已匹配提示 */
.phonics-matched {
  display: flex; align-items: center; gap: 9px; margin-top: 16px;
  padding: 13px 15px; border-radius: 14px;
  background: linear-gradient(135deg, #ECFDF5, #F0FDFA);
  border: 1px solid #A7F3D0; font-size: 12px; line-height: 1.65; color: #047857;
}
.pm-ico { flex: 0 0 auto; font-size: 15px; }

/* 通知条目（可点击跳转） */
.notif-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 12px; border-bottom: 1px solid #F1F5F9; border-radius: 10px;
  transition: background .14s;
}
.notif-row:last-child { border-bottom: 0; }
.notif-row.jumpable { cursor: pointer; }
.notif-row.jumpable:hover { background: #FAF8FF; }
.notif-row.unread { background: linear-gradient(90deg, #FFF9F0, rgba(255,255,255,0)); }
.nf-dot { width: 8px; height: 8px; border-radius: 50%; background: #CBD5E1; margin-top: 6px; flex: 0 0 auto; }
.notif-row.unread .nf-dot {
  background: linear-gradient(135deg, #F59E0B, #F97316);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .16);
}
.nf-body { flex: 1; min-width: 0; }
.nf-title { font-size: 13.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nf-text { color: #64748B; margin-top: 5px; font-size: 13px; line-height: 1.7; }
.nf-meta { color: #94A3B8; font-size: 12px; margin-top: 5px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nf-go { color: var(--c-violet); font-weight: 700; }

/* 权限中文标签 */
.perm-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px; margin: 0 5px 5px 0;
  background: #F3F0FF; color: var(--c-violet-deep);
  font-size: 12px; font-weight: 600;
}

/* ==================================================================
   视觉精修：字体 + 底部导航 + 工具磁贴（图3）
   ================================================================== */
body, button, input, select, textarea {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
               "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans SC",
               "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 底部导航 */
.tabbar {
  padding: 9px 0 calc(9px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(124, 58, 237, .07);
}
.tab-item {
  gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .3px;
  color: #94A3B8; transition: color .18s;
}
.tab-item.active { color: var(--c-violet-deep); font-weight: 800; }
.tab-icon {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 26px; transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.tab-item.active .tab-icon { transform: translateY(-2px); }
.tab-item.active .tab-icon::after {
  content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 3px; border-radius: 2px;
  background: var(--grad-brand);
}

/* 区块标题：左侧一道渐变色条，层次更清楚 */
.section-title {
  font-size: 15.5px; font-weight: 800; letter-spacing: .2px; color: var(--c-text);
  margin: 22px 0 11px;
}
.section-title::before {
  content: ''; width: 3px; height: 14px; border-radius: 2px;
  background: var(--grad-brand); flex: 0 0 auto;
}

/* 学习工具磁贴 */
.tool {
  padding: 16px 8px 14px; border-radius: 18px;
  box-shadow: 0 2px 10px rgba(124, 58, 237, .055);
  font-weight: 700; letter-spacing: .2px;
}
.tool:hover { box-shadow: 0 8px 22px rgba(124, 58, 237, .14); }
.tool .ti-tile { margin-bottom: 9px; }

/* 卡片标题与正文的字重/间距 */
.card-title { letter-spacing: .2px; }
.card-sub { line-height: 1.7; }
.me-row .mr-t { letter-spacing: .2px; }

/* 真人视频模式提示 */
.video-note {
  margin: 11px 0 4px; padding: 9px 13px; border-radius: 10px;
  background: linear-gradient(135deg, #F5F3FF, #FDF2F8);
  border: 1px solid #EDE9FE;
  font-size: 12px; color: var(--c-violet-deep); font-weight: 600;
}

/* ==================================================================
   绘本阅读器 + 自然拼读详情
   ================================================================== */
.res-open { font-size: 11px; color: var(--c-violet); font-weight: 700; margin-top: 5px; }
.res-card { cursor: pointer; }

.reader {
  border-radius: var(--radius-lg); padding: 24px 22px 26px; text-align: center;
  background: linear-gradient(165deg, #FFF9F0, #FFF1F6 55%, #F3EEFF);
  border: 1px solid #F5E6F0; min-height: 240px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.rd-art { font-size: 68px; line-height: 1; }
.rd-en {
  font-size: 19px; font-weight: 800; color: #4C1D95; line-height: 1.65;
  cursor: pointer; max-width: 92%;
}
.rd-en:hover { color: var(--c-violet); }
.rd-zh { font-size: 14px; color: #6B5B95; line-height: 1.8; max-width: 92%; }
.rd-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px;
}
.rd-page {
  font-size: 12.5px; color: var(--c-muted); font-weight: 700;
  font-family: ui-monospace, Consolas, monospace;
}
.rd-sec { margin-top: 18px; padding-top: 14px; border-top: 1px dashed #EDE9FE; }
.rd-sec-t { font-size: 13px; font-weight: 800; color: var(--c-text); margin-bottom: 10px; }
.rd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 8px 12px; border-radius: 11px; cursor: pointer; text-align: left;
  background: #fff; border: 1px solid var(--c-line);
  font-family: var(--font-sans); transition: all .14s;
}
.rd-chip:hover { border-color: #DDD3FB; background: #FCFBFF; }
.rd-chip b { font-size: 13.5px; color: var(--c-text); }
.rd-chip span { font-size: 10.5px; color: var(--c-violet); }
.rd-chip i { font-style: normal; font-size: 11px; color: var(--c-muted); }
.rd-tip {
  margin-top: 14px; padding: 11px 14px; border-radius: 12px;
  background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
  border: 1px solid #FDE68A; font-size: 12.5px; line-height: 1.75; color: #92400E;
}

/* 拼读规则 */
.ph-intro {
  margin-bottom: 14px; padding: 11px 14px; border-radius: 12px;
  background: linear-gradient(135deg, #F5F3FF, #FDF2F8);
  border: 1px solid #EDE9FE; font-size: 13px; line-height: 1.7; color: var(--c-violet-deep);
}
.ph-list { display: flex; flex-direction: column; gap: 11px; }
.ph-rule {
  border: 1px solid var(--c-line); border-radius: var(--radius-md);
  background: linear-gradient(160deg, #FCFBFF, #FFFFFF); padding: 14px 16px;
}
.ph-head { display: flex; align-items: center; gap: 10px; }
.ph-letter {
  font-size: 20px; font-weight: 800; color: var(--c-violet-deep);
  font-family: ui-monospace, Consolas, monospace;
}
.ph-ipa { font-size: 13px; color: var(--c-violet); font-weight: 700; }
.ph-play {
  margin-left: auto; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-bg-alt); font-size: 13px; cursor: pointer;
}
.ph-tip { font-size: 12.5px; color: var(--c-sub); margin-top: 7px; line-height: 1.7; }
.ph-words { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.ph-word {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 7px 11px; border-radius: 10px; cursor: pointer; text-align: left;
  background: #fff; border: 1px solid var(--c-line);
  font-family: var(--font-sans); transition: all .14s;
}
.ph-word:hover { border-color: #DDD3FB; background: #FCFBFF; }
.ph-word b { font-size: 13px; color: var(--c-text); }
.ph-word span { font-size: 10px; color: var(--c-violet); }
.ph-word i { font-style: normal; font-size: 10.5px; color: var(--c-muted); }

/* ==================================================================
   小程序首页：试听课领取广告位 + 用户行小字
   ================================================================== */
.hero-mini {
  display: flex; align-items: center; gap: 8px;
  margin-top: 5px; font-size: 11.5px; color: #7C6BA8;
}
.hero-mini b { color: #5B21B6; font-size: 13.5px; font-weight: 800; }
.hero-mini i { width: 1px; height: 10px; background: #DDD6FE; flex: 0 0 auto; }

.hero-trial {
  position: relative; overflow: hidden; margin-top: 12px;
  padding: 14px 16px; border-radius: 18px;
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #FDE68A, #FCA5A5 55%, #F0ABFC);
  box-shadow: 0 8px 24px rgba(236, 72, 153, .22);
  cursor: pointer; transition: transform .16s;
}
.hero-trial:active { transform: scale(.985); }
.ht-glow {
  position: absolute; right: -30px; top: -40px; width: 130px; height: 130px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.7), transparent 70%);
}
.ht-left { flex: 1; min-width: 0; position: relative; }
.ht-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ht-badge {
  padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #F43F5E, #EC4899);
  box-shadow: 0 3px 8px rgba(244, 63, 94, .35);
}
.ht-title { font-size: 13.5px; font-weight: 800; color: #7F1D1D; }
.ht-sub { font-size: 11px; color: #9D174D; margin-top: 5px; line-height: 1.55; }
.ht-btn {
  position: relative; flex: 0 0 auto;
  padding: 9px 15px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, #7C3AED, #EC4899);
  box-shadow: 0 5px 14px rgba(124, 58, 237, .35);
}
.ht-btn span { margin-left: 3px; }

/* ==================================================================
   学习工具：报课 / 未报课的 VIP 区分
   ================================================================== */
.st-badge {
  margin-left: auto; padding: 2px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .2px;
}
.st-badge.ok { background: rgba(16, 185, 129, .14); color: #047857; }
.st-badge.vip {
  color: #fff; background: linear-gradient(135deg, #F59E0B, #F97316);
  box-shadow: 0 3px 9px rgba(245, 158, 11, .38);
}

.tool { position: relative; }
.tool-vip { display: none; }

/* 未报课：整个工具区进入 VIP 模式 */
.tool-grid.vip-mode .tool {
  border-color: #FBE3B4;
  background: linear-gradient(180deg, #FFFDF7, #FFFFFF);
}
.tool-grid.vip-mode .tool .ti-tile { opacity: .85; }
.tool-grid.vip-mode .tool-vip {
  display: inline-flex; position: absolute; top: 7px; right: 7px;
  padding: 1px 6px; border-radius: 6px; z-index: 2;
  font-size: 8.5px; font-weight: 800; letter-spacing: .4px;
  color: #fff; background: linear-gradient(135deg, #F59E0B, #F97316);
  box-shadow: 0 2px 6px rgba(245, 158, 11, .45);
}
.tool-free {
  margin-top: 3px; font-size: 9.5px; color: #B45309;
  font-weight: 600; letter-spacing: .1px;
}

/* 绘本馆分级筛选 */
.lv-bar {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.lv-bar::-webkit-scrollbar { display: none; }
.lv-chip {
  flex: 0 0 auto; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  background: #fff; border: 1px solid var(--c-line); color: var(--c-sub);
  transition: all .15s;
}
.lv-chip.on {
  color: #fff; border-color: transparent;
  background: var(--grad-brand);
  box-shadow: 0 4px 12px rgba(124, 58, 237, .28);
}

/* ==================================================================
   老师资质（教务端档案 + 小程序师资展示）
   ================================================================== */
.cert-chip {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px; margin: 0 4px 3px 0;
  background: linear-gradient(135deg, #ECFDF5, #F0FDFA);
  border: 1px solid #A7F3D0; color: #047857;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.cert-chip.more { background: #F3F4F6; border-color: #E5E7EB; color: #6B7280; }

/* 教务端：表格里的资质列 */
.qual-cell { min-width: 190px; }
.qual-edu { font-size: 12.5px; color: var(--c-text); font-weight: 600; }
.qual-certs { margin-top: 4px; }

/* 教务端：资质档案弹窗 */
.qual-hero {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 17px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, #F5F3FF, #FDF2F8);
  border: 1px solid #EDE9FE;
}
.qh-avatar {
  width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 800; color: #fff;
  background: var(--grad-brand);
}
.qh-name { font-size: 15.5px; font-weight: 800; color: var(--c-text); }
.qh-rating { font-size: 14px; font-weight: 800; color: #B45309; }
.qual-bio {
  margin-top: 12px; padding: 11px 14px; border-radius: 10px;
  background: var(--c-bg-alt); font-size: 12.5px; line-height: 1.8; color: var(--c-sub);
}

/* 小程序：师资列表 */
.tc-head {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, #F5F3FF, #FDF2F8);
  border: 1px solid #EDE9FE; margin-bottom: 14px;
}
.tc-head-num {
  font-size: 28px; font-weight: 800; line-height: 1;
  background: var(--grad-brand); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.tc-head-t { font-size: 14px; font-weight: 800; color: var(--c-text); }
.tc-list { display: flex; flex-direction: column; gap: 10px; }
.tc-item {
  display: flex; gap: 12px; padding: 13px 14px; border-radius: var(--radius-md);
  background: linear-gradient(160deg, #FCFBFF, #FFFFFF);
  border: 1px solid var(--c-line);
}
.tc-avatar {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: #fff;
  background: var(--grad-brand);
}
.tc-body { flex: 1; min-width: 0; }
.tc-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tc-top b { font-size: 14px; color: var(--c-text); }
.tc-level {
  padding: 1px 7px; border-radius: 6px; font-size: 10px; font-weight: 800;
  background: #F3F0FF; color: var(--c-violet-deep);
}
.tc-years { font-size: 11px; color: var(--c-muted); }
.tc-edu { font-size: 12px; color: var(--c-sub); margin-top: 5px; }
.tc-major { font-size: 11.5px; color: var(--c-muted); margin-top: 2px; }
.tc-certs { margin-top: 7px; }

/* 绘本插画 */
.res-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; }
.res-cover:has(img) { padding: 0; overflow: hidden; background: #F3F0FF; }

.reader { justify-content: flex-start; padding: 16px 16px 20px; text-align: center; }
.rd-illus {
  position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 14px;
  overflow: hidden; background: #F3F0FF; box-shadow: 0 6px 20px rgba(124, 58, 237, .14);
  display: flex; align-items: center; justify-content: center;
}
.rd-illus img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-page-no {
  position: absolute; right: 10px; bottom: 10px;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(20, 12, 45, .58); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  backdrop-filter: blur(6px);
}
.rd-en { margin-top: 14px; font-size: 18px; }
.rd-zh { margin-top: 6px; }

.rd-wordbox {
  width: 100%; margin-top: 14px; padding-top: 13px;
  border-top: 1px dashed #E9E4F7; text-align: left;
}
.rdw-t { font-size: 12px; font-weight: 800; color: var(--c-violet-deep); margin-bottom: 9px; }

/* ==================================================================
   修复：.modal.wide 之前从未定义 → 所有 wide 弹窗实际只有 480px
   ================================================================== */
.modal.wide { width: 1120px; max-width: 95vw; padding: 24px 26px; }
.modal.wide .modal-body { max-height: 80vh; }

/* ==================================================================
   📋 登记试听 · 粘贴解析弹窗要用 xwide
   ----------------------------------------------------------------
   「登记试听」是**左右两栏**（左边粘原文、右边核对字段），
   1120px 的 wide 挤两栏后每栏只剩 500px 出头，
   8 个字段两列排下来输入框会很窄。
   这里单独给一档更宽的，同时把 body 高度放宽好让左右两栏都展示开。
   放在 brand.css 里而不是页面内联，跟 wide 的修法保持一致。
   ================================================================== */
.modal.xwide { width: 1400px; max-width: 96vw; padding: 24px 26px; }
.modal.xwide .modal-body { max-height: 82vh; }
@media (max-width: 1100px) {
  .modal.xwide .modal-body { padding: 0; }
  .tp-wrap { flex-direction: column; }
  .tp-col-left { flex: 1 1 auto; width: 100%; }
  .tp-area { min-height: 190px; }
}

/* ==================================================================
   🎓 上课 · 列表
   ================================================================== */
.cw-pct { font-size: 11px; color: var(--c-violet); font-weight: 700; margin-top: 3px; }
.cw-u { font-size: 12.5px; color: var(--c-text); }
.cw-sub { font-size: 11px; color: var(--c-muted); margin-top: 2px; font-weight: 400; }
.cw-done { font-size: 12.5px; color: #059669; font-weight: 700; }

/* ==================================================================
   🎓 上课 · 课件教学视图
   ================================================================== */
.cw-head {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #F5F3FF, #FDF2F8 60%, #EFF6FF);
  border: 1px solid #EDE9FE;
}
.cw-avatar {
  width: 48px; height: 48px; border-radius: 15px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: #fff; background: var(--grad-brand);
}
.cw-info { flex: 1; min-width: 0; }
.cw-name { font-size: 16px; font-weight: 800; color: var(--c-text); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cw-prog { flex: 0 0 auto; text-align: right; }
.cw-prog .pp-num {
  font-size: 22px; font-weight: 800; line-height: 1.1;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cw-prog .pp-lbl { font-size: 10.5px; color: var(--c-muted); margin-top: 2px; }

.cw-unitbar {
  display: flex; gap: 8px; overflow-x: auto; margin-top: 13px; padding-bottom: 4px;
  scrollbar-width: none;
}
.cw-unitbar::-webkit-scrollbar { display: none; }
.cw-u {
  flex: 0 0 auto; padding: 7px 11px; border-radius: 11px; text-align: center;
  background: #FAFAFC; border: 1px solid var(--c-line);
}
.cw-u.cur { background: #F5F3FF; border-color: #DDD3FB; box-shadow: 0 0 0 1px #DDD3FB inset; }
.cw-u-t { font-size: 11px; font-weight: 800; color: var(--c-sub); }
.cw-u.cur .cw-u-t { color: var(--c-violet-deep); }
.cw-u-dots { display: flex; gap: 3px; margin-top: 5px; justify-content: center; }
.cw-u-dots i {
  width: 7px; height: 7px; border-radius: 50%; background: #E5E7EB; display: block;
}
.cw-u-dots i.on { background: linear-gradient(135deg, #8B5CF6, #EC4899); }

.cw-steps { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; }
.cw-steps::-webkit-scrollbar { display: none; }
.cw-step {
  flex: 1 0 auto; min-width: 148px; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 12px;
  background: #fff; border: 1px solid var(--c-line);
  font-family: var(--font-sans); transition: all .15s;
}
.cw-step:hover { border-color: #DDD3FB; background: #FCFBFF; }
.cw-step.on { border-color: transparent; background: var(--grad-brand); box-shadow: 0 6px 16px rgba(124,58,237,.26); }
.cw-step b {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--c-violet-deep); background: #F3F0FF;
}
.cw-step.on b { background: rgba(255,255,255,.28); color: #fff; }
.cw-step span { flex: 1; font-size: 12px; font-weight: 700; color: var(--c-text); line-height: 1.35; }
.cw-step.on span { color: #fff; }
.cw-step i { font-style: normal; font-size: 10.5px; color: var(--c-muted); flex: 0 0 auto; }
.cw-step.on i { color: rgba(255,255,255,.85); }

.cw-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; margin-top: 16px; }
.cw-main, .cw-side { display: flex; flex-direction: column; gap: 13px; min-width: 0; }

.cw-sec {
  padding: 14px 16px; border-radius: var(--radius-md);
  background: linear-gradient(160deg, #FCFBFF, #FFFFFF);
  border: 1px solid var(--c-line);
}
.cw-sec-t {
  font-size: 13px; font-weight: 800; color: var(--c-text);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.cw-chip {
  padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700;
  background: #F3F0FF; color: var(--c-violet-deep);
}
.cw-ul { margin: 0; padding-left: 17px; }
.cw-ul li { font-size: 12.5px; line-height: 1.85; color: var(--c-sub); }
.cw-muted { color: var(--c-muted); font-size: 11px; margin-left: 6px; }

/* 单词卡 */
.cw-words { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 10px; }
.cw-word {
  padding: 11px 13px; border-radius: 12px; cursor: pointer;
  background: #fff; border: 1px solid var(--c-line); transition: all .14s;
}
.cw-word:hover { border-color: #DDD3FB; background: #FCFBFF; box-shadow: 0 4px 12px rgba(124,58,237,.08); }
.cw-w-top { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.cw-w-top b { font-size: 16px; color: var(--c-text); }
.cw-ipa { font-size: 11.5px; color: var(--c-violet); font-family: ui-monospace, Consolas, monospace; }
.cw-w-top em { font-style: normal; font-size: 10.5px; color: var(--c-muted); background: var(--c-bg-alt); padding: 1px 6px; border-radius: 5px; }
.cw-w-zh { font-size: 12.5px; color: var(--c-sub); margin-top: 5px; }
.cw-w-ex { font-size: 11.5px; color: var(--c-muted); margin-top: 6px; line-height: 1.65; }
.cw-w-ex i { font-style: normal; color: #A5A0B8; }

/* 单词拓展 */
.cw-exp { padding: 10px 12px; border-radius: 11px; background: #FAFAFC; border: 1px dashed #E4E0F0; margin-bottom: 9px; }
.cw-exp:last-child { margin-bottom: 0; }
.cw-exp-t { font-size: 12px; font-weight: 800; color: var(--c-violet-deep); margin-bottom: 6px; }

/* 语法 */
.cw-gram { display: flex; flex-direction: column; gap: 10px; }
.cw-g-2 { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: start; }
.cw-g-l {
  font-size: 11px; font-weight: 700; color: var(--c-violet-deep);
  background: #F3F0FF; border-radius: 6px; padding: 3px 0; text-align: center;
}
.cw-g-r { font-size: 12.5px; line-height: 1.85; color: var(--c-sub); min-width: 0; }
.cw-code {
  display: inline-block; margin: 0 6px 5px 0; padding: 3px 9px; border-radius: 7px;
  background: #F5F3FF; border: 1px solid #E4DEFB; color: var(--c-violet-deep);
  font-family: ui-monospace, Consolas, monospace; font-size: 11.5px;
}
.cw-ex { margin-bottom: 5px; }
.cw-ex b { font-size: 12.5px; color: var(--c-text); cursor: pointer; }
.cw-ex b:hover { color: var(--c-violet); }
.cw-ex span { display: block; font-size: 11.5px; color: var(--c-muted); margin-top: 1px; }
.cw-bad div { color: #B91C1C; font-size: 12.5px; line-height: 1.85; }
.cw-ext div { color: #0369A1; font-size: 12.5px; line-height: 1.85; }

/* 环节卡（老师做什么 / 学生做什么） */
.cw-role {
  padding: 10px 12px; border-radius: 11px; margin-bottom: 9px;
  background: linear-gradient(135deg, #F5F3FF, #FAF8FF); border: 1px solid #EDE9FE;
}
.cw-role.stu { background: linear-gradient(135deg, #ECFDF5, #F0FDFA); border-color: #A7F3D0; }
.cw-role > span { font-size: 10.5px; font-weight: 800; color: var(--c-violet-deep); display: block; margin-bottom: 4px; }
.cw-role.stu > span { color: #047857; }
.cw-role > div { font-size: 12.5px; line-height: 1.8; color: var(--c-sub); }
.cw-toggle { display: flex; gap: 8px; }
.cw-toggle button { flex: 1; }

/* ==================================================================
   🪪 入职明细表单
   ================================================================== */
.ob-form .field { margin-bottom: 12px; }
.ob-form .field label { font-size: 12px; }
.ob-group {
  font-size: 12.5px; font-weight: 800; color: var(--c-violet-deep);
  margin: 16px 0 10px; padding-left: 9px; border-left: 3px solid;
  border-image: var(--grad-brand) 1;
}
.ob-group:first-child { margin-top: 0; }
.ob-form.ro .input { background: #F9FAFB; color: var(--c-muted); }
.ob-no { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; color: var(--c-violet-deep); font-weight: 700; }

/* ==================================================================
   📱 小程序：学习进度（与老师上课同步）
   ================================================================== */
.lp-hero {
  padding: 18px 18px 20px; border-radius: var(--radius-lg); margin-bottom: 14px;
  background: linear-gradient(140deg, #6D28D9, #A855F7 55%, #EC4899);
  color: #fff; position: relative; overflow: hidden;
}
.lp-hero::after {
  content: ''; position: absolute; right: -40px; top: -50px;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.3), transparent 70%);
}
.lp-book { font-size: 12px; opacity: .86; }
.lp-cur { font-size: 20px; font-weight: 800; margin: 7px 0 3px; }
.lp-cur-s { font-size: 12.5px; opacity: .9; }
.lp-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,.28); overflow: hidden; margin-top: 14px; }
.lp-bar > i { display: block; height: 100%; border-radius: 999px; background: #fff; }
.lp-meta { display: flex; justify-content: space-between; font-size: 11px; margin-top: 7px; opacity: .92; }
.lp-units { display: flex; flex-direction: column; gap: 9px; }
.lp-u {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  border-radius: 13px; background: #fff; border: 1px solid var(--c-line);
}
.lp-u.cur { border-color: #DDD3FB; background: #FCFBFF; box-shadow: 0 0 0 1px #EDE9FE inset; }
.lp-u-n {
  width: 34px; height: 34px; border-radius: 11px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; color: var(--c-violet-deep); background: #F3F0FF;
}
.lp-u.cur .lp-u-n { background: var(--grad-brand); color: #fff; }
.lp-u-b { flex: 1; min-width: 0; }
.lp-u-t { font-size: 13px; font-weight: 700; color: var(--c-text); }
.lp-u-s { font-size: 11px; color: var(--c-muted); margin-top: 2px; }
.lp-dots { display: flex; gap: 4px; margin-top: 6px; }
.lp-dots i { width: 8px; height: 8px; border-radius: 50%; background: #E5E7EB; }
.lp-dots i.on { background: linear-gradient(135deg, #8B5CF6, #EC4899); }
.lp-next {
  margin-top: 14px; padding: 15px 16px; border-radius: var(--radius-lg);
  background: linear-gradient(150deg, #F5F3FF, #FDF2F8); border: 1px solid #EDE9FE;
}
.lp-next-t { font-size: 13.5px; font-weight: 800; color: var(--c-violet-deep); margin-bottom: 9px; }
.lp-word {
  display: flex; align-items: baseline; gap: 7px; padding: 7px 10px; margin-bottom: 6px;
  border-radius: 10px; background: #fff; border: 1px solid var(--c-line);
}
.lp-word b { font-size: 14px; color: var(--c-text); }
.lp-word span { font-size: 11px; color: var(--c-violet); font-family: ui-monospace, Consolas, monospace; }
.lp-word i { font-style: normal; font-size: 11.5px; color: var(--c-muted); margin-left: auto; }

/* 小程序首页：学习进度入口 */
.lp-entry {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; padding: 14px 16px; border-radius: 16px; cursor: pointer;
  background: linear-gradient(135deg, #F5F3FF, #FDF2F8 60%, #EFF6FF);
  border: 1px solid #EDE9FE;
  box-shadow: 0 4px 14px rgba(124, 58, 237, .08);
}
.lp-entry:active { transform: scale(.99); }
.lp-e-ico { font-size: 22px; flex: 0 0 auto; }
.lp-e-b { flex: 1; min-width: 0; }
.lp-e-t { font-size: 14px; font-weight: 800; color: #4C1D95; }
.lp-e-s { font-size: 11.5px; color: #7C6BA8; margin-top: 3px; }

/* ==================================================================
   装饰性伪元素统一不吃点击
   --------------------------------------------------------------
   坑：.mini-hero::after / .trial-card::after / .lp-hero::after / .kpi::after
       这类「光斑」是 position:absolute 的伪元素，会盖在按钮上层把点击吃掉，
       表现为「按钮看得见但点不动」（elementFromPoint 命中的是父元素）。
       凡装饰用途的伪元素一律 pointer-events:none。
   ================================================================== */
.mini-hero::before, .mini-hero::after,
.trial-card::after, .lp-hero::after,
.kpi::after, .tab-item.active .tab-icon::after,
.hero-card::after, .cw-head::after, .qr-card::after {
  pointer-events: none;
}


/* ==================================================================
   单词课进度（教务端列表 + 小程序学习进度）
   ================================================================== */
.lp-wc {
  margin: 0 0 14px; padding: 15px 16px; border-radius: var(--radius-lg);
  background: linear-gradient(150deg, #FFFFFF, #FCFBFF);
  border: 1px solid #EDE9FE; box-shadow: 0 4px 14px rgba(124,58,237,.07);
}
.lp-wc-h {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13.5px; font-weight: 800; color: var(--c-text); margin-bottom: 10px;
}
.lp-wc-h b { font-size: 19px; }
.lp-wc .lp-bar { height: 8px; border-radius: 999px; overflow: hidden; }
.lp-wc .lp-bar > i { display: block; height: 100%; border-radius: 999px; }
.lp-wc .lp-meta { display: flex; justify-content: space-between; font-size: 11.5px; margin-top: 7px; }


/* ==================================================================
   小程序：考纲 / 留学 / 词频词库
   ================================================================== */
.vb-g {
  font-size: 12px; font-weight: 800; color: var(--c-violet-deep);
  margin: 12px 0 8px; padding-left: 8px; border-left: 3px solid #C4B5FD;
}
.vb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.vb-card {
  padding: 12px 13px; border-radius: 14px;
  background: linear-gradient(160deg, #FCFBFF, #FFFFFF);
  border: 1px solid var(--c-line); box-shadow: 0 2px 8px rgba(124,58,237,.05);
}
.vb-card:active { transform: scale(.985); }
.vb-n { font-size: 13px; font-weight: 800; color: var(--c-text); }
.vb-c { font-size: 11px; color: var(--c-violet); margin-top: 4px; font-weight: 700; }
.vb-tip { font-size: 11px; color: var(--c-muted); margin: 10px 0 4px; text-align: center; }

/* ---------- 可折叠分组（词库页：先点开分组，再展开里面的条目） ----------
   背景：教材词库 51 个版本、考纲词库 4 个学段全平铺，页面又长又要滚。
   改成「一行分组标题 → 点开才展开」，默认全部收起，一屏看完全貌。
   不用 Tailwind 的 hidden，自带 display 规则，免得依赖 CDN。 */
.vb-sec { margin-bottom: 8px; }
.vb-fold {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 13px; border-radius: 13px;
  background: linear-gradient(160deg, #F8F5FF, #FFFFFF);
  border: 1px solid var(--c-line);
  font-size: 13px; font-weight: 800; color: var(--c-text);
  cursor: pointer; user-select: none;
}
.vb-fold:active { transform: scale(.995); }
.vb-sec.open .vb-fold { border-color: #C4B5FD; box-shadow: 0 3px 12px rgba(124,58,237,.08); }
.vb-fold-mark {
  flex: none; width: 4px; height: 15px; border-radius: 3px;
  background: linear-gradient(180deg, #8B5CF6, #EC4899);
}
.vb-fold-name { flex: 1; min-width: 0; }
.vb-fold-n { font-size: 11px; font-weight: 700; color: var(--c-violet); flex: none; }
.vb-fold-ar { flex: none; font-size: 11px; color: var(--c-muted); transition: transform .18s; }
.vb-sec.open .vb-fold-ar { transform: rotate(180deg); }
.vb-sec .vb-fold-body { display: none; padding-top: 9px; }
.vb-sec.open .vb-fold-body { display: block; }
.vb-modal-h { font-size: 12.5px; color: var(--c-sub); margin-bottom: 11px; }
.vb-words { max-height: 58vh; overflow-y: auto; }
.vb-w {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; background: #FAFAFC; margin-bottom: 7px;
  border: 1px solid #F1EDFB;
}
.vb-w-l { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.vb-w-l b { font-size: 15px; color: var(--c-text); }
.vb-w-l span { font-size: 11.5px; color: var(--c-violet); font-family: ui-monospace, Consolas, monospace; }
.vb-w-r { font-size: 12.5px; color: var(--c-sub); text-align: right; }

/* ============================================================
   作业批改（小程序 · 2026-09-16 新增）
   ============================================================ */
.hw-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 15px 16px; border-radius: 16px;
  background: linear-gradient(135deg, #F5F3FF, #EDE9FE);
  border: 1px solid #DDD3FB; cursor: pointer;
}
.hw-card-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hw-card-t { font-size: 15px; font-weight: 800; color: #4C1D95; }
.hw-card-s { font-size: 11.5px; color: #7C6BA8; margin-top: 2px; }
.hw-card-go {
  flex: none; font-size: 12.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #7C3AED, #A855F7);
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
}

.hw-tip { font-size: 12.5px; color: var(--c-sub); line-height: 1.65; margin: -4px 0 12px; }

.hw-upload {
  padding: 24px 18px; border-radius: 18px; text-align: center; cursor: pointer;
  background: #FCFBFF; border: 1.5px dashed #C4B5FD;
}
.hw-up-icon { display: flex; justify-content: center; margin-bottom: 8px; }
.hw-up-t { font-size: 15.5px; font-weight: 800; color: #4C1D95; }
.hw-up-s { font-size: 12px; color: var(--c-sub); margin: 4px 0 14px; }
.hw-up-btn {
  display: inline-block; font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #7C3AED, #EC4899);
  padding: 10px 26px; border-radius: 999px;
}

.hw-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px; background: #fff;
  border: 1px solid #F1EDFB; margin-bottom: 9px; cursor: pointer;
}
.hw-score {
  flex: none; width: 54px; height: 54px; border-radius: 14px;
  display: flex; align-items: baseline; justify-content: center; gap: 1px;
  color: #fff; padding-top: 15px; box-sizing: border-box;
}
.hw-score b { font-size: 19px; font-weight: 800; }
.hw-score span { font-size: 10px; opacity: .85; }
.hw-score.good { background: linear-gradient(135deg, #22C55E, #16A34A); }
.hw-score.mid  { background: linear-gradient(135deg, #F59E0B, #D97706); }
.hw-score.bad  { background: linear-gradient(135deg, #EF4444, #DC2626); }
.hw-score.gray { background: linear-gradient(135deg, #94A3B8, #64748B); }
.hw-row-body { flex: 1; min-width: 0; }
.hw-row-t { font-size: 14px; font-weight: 700; color: var(--c-text); }
.hw-row-s { font-size: 11.5px; color: var(--c-sub); margin-top: 3px; }
.hw-tag {
  font-size: 10.5px; font-weight: 700; color: #7C3AED;
  background: #F3F0FF; padding: 1px 7px; border-radius: 999px; margin-left: 5px;
}

.hw-field { margin-top: 14px; }
.hw-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--c-sub); margin-bottom: 6px; }
.hw-select, .hw-input {
  width: 100%; box-sizing: border-box; padding: 11px 13px; font-size: 14px;
  border: 1px solid #E5E1F5; border-radius: 12px; background: #fff; color: var(--c-text);
  font-family: inherit;
}
.hw-actions { display: flex; gap: 10px; margin-top: 18px; }
.hw-btn {
  flex: 1; padding: 13px; border: 0; border-radius: 13px; cursor: pointer;
  font-size: 15px; font-weight: 700; color: #fff; font-family: inherit;
  background: linear-gradient(135deg, #7C3AED, #EC4899);
}
.hw-btn.ghost { background: #F5F3FF; color: #6D28D9; }
.hw-btn[disabled] { opacity: .6; }

/* ---- 批改结果 ---- */
.hwr-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; border-radius: 16px; color: #fff;
}
.hwr-head.good { background: linear-gradient(135deg, #22C55E, #15803D); }
.hwr-head.mid  { background: linear-gradient(135deg, #F59E0B, #B45309); }
.hwr-head.bad  { background: linear-gradient(135deg, #EF4444, #B91C1C); }
.hwr-head.gray { background: linear-gradient(135deg, #94A3B8, #475569); }
.hwr-score { display: flex; align-items: baseline; gap: 2px; flex: none; }
.hwr-score b { font-size: 34px; font-weight: 800; line-height: 1; }
.hwr-score span { font-size: 14px; opacity: .85; }
.hwr-eval { font-size: 16px; font-weight: 800; }
.hwr-meta { font-size: 11.5px; opacity: .9; margin-top: 4px; }

.hwr-advice {
  font-size: 12.5px; line-height: 1.7; color: #7C2D12;
  background: #FFF7ED; border: 1px solid #FED7AA;
  padding: 11px 13px; border-radius: 12px; margin-top: 12px;
}
.hwr-sec-t { font-size: 13.5px; font-weight: 800; color: var(--c-text); margin: 18px 0 10px; }
.hwr-sub { font-size: 11.5px; font-weight: 500; color: var(--c-sub); }

.hwr-bars { display: flex; flex-direction: column; gap: 9px; }
.hwr-bar-t { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--c-sub); margin-bottom: 4px; }
.hwr-bar-t b { color: #7C3AED; }
.hwr-bar-bg { height: 7px; border-radius: 999px; background: #F1F5F9; overflow: hidden; }
.hwr-bar-bg i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #A78BFA, #7C3AED); }

.hwr-sent { padding: 11px 13px; border-radius: 12px; margin-bottom: 9px; border: 1px solid #F1EDFB; background: #FCFBFF; }
.hwr-sent.bad { background: #FFF7F7; border-color: #FECACA; }
.hwr-sent.ok { background: #F6FDF9; border-color: #D1FAE5; }
.hwr-raw { font-size: 13.5px; line-height: 1.6; color: var(--c-text); }
.hwr-sent.bad .hwr-raw { color: #991B1B; font-weight: 600; }
.hwr-sent.ok .hwr-raw { color: #166534; }
.hwr-fix { font-size: 13px; color: #047857; margin-top: 5px; font-weight: 600; }
.hwr-err { margin-top: 8px; padding: 9px 11px; border-radius: 10px; background: #fff; border: 1px solid #FDE68A; }
.hwr-err-t { font-size: 12.5px; color: #92400E; font-weight: 700; }
.hwr-err-t s { color: #B91C1C; }
.hwr-err-t b { color: #047857; }
.hwr-err-d { font-size: 12px; color: var(--c-sub); margin-top: 4px; line-height: 1.6; }
.hwr-err-k { font-size: 11.5px; color: #6D28D9; margin-top: 4px; line-height: 1.6; }
.hwr-err-ex { font-size: 11.5px; color: var(--c-sub); margin-top: 4px; }

/* ============================================================
   AI 跟读评测（有道语音评测 · 2026-09-16）
   ============================================================ */
.res-score.res-green { color: #16A34A; }
.res-score.res-blue  { color: #2563EB; }
.res-score.res-amber { color: #D97706; }

.db-fill.db-green { background: linear-gradient(90deg, #4ADE80, #16A34A); }
.db-fill.db-blue  { background: linear-gradient(90deg, #60A5FA, #2563EB); }
.db-fill.db-amber { background: linear-gradient(90deg, #FBBF24, #D97706); }

.sp-words { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.sp-w {
  position: relative; padding: 10px 12px 10px 12px; border-radius: 12px;
  background: #F6FDF9; border: 1px solid #D1FAE5;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.sp-w.bad { background: #FFF7F7; border-color: #FECACA; }
.sp-w b { font-size: 16px; color: #065F46; }
.sp-w.bad b { color: #991B1B; }
.sp-w-ipa { font-size: 12px; color: #7C3AED; font-family: ui-monospace, Consolas, monospace; }
.sp-w-sc { margin-left: auto; font-size: 13px; font-weight: 800; color: #16A34A; }
.sp-w.bad .sp-w-sc { color: #DC2626; }
.sp-w-tip { flex-basis: 100%; font-size: 11.5px; color: #B45309; margin-top: 4px; }
.sp-allok {
  margin-top: 12px; padding: 9px 12px; border-radius: 10px;
  font-size: 12.5px; font-weight: 700; color: #065F46;
  background: #ECFDF5; border: 1px solid #A7F3D0;
}
.sp-speed { margin-top: 8px; font-size: 11.5px; color: var(--c-sub); text-align: right; }

/* 评测没评出来时的重读提示（绝不显示假分） */
.sp-retry {
  margin-top: 6px; padding: 18px 16px; border-radius: 14px; text-align: center;
  background: #FFF7ED; border: 1px solid #FED7AA;
}
.sp-retry-t { font-size: 15px; font-weight: 800; color: #9A3412; }
.sp-retry-s { font-size: 12.5px; color: #B45309; margin-top: 6px; line-height: 1.6; }

/* ============================================================
   教务端：教材库词表的「点击发音」按钮（2026-09-16）
   ============================================================ */
.lib-say {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 7px; margin-right: 6px;
  vertical-align: -5px; cursor: pointer;
  background: #F3F0FF; color: #7C3AED; border: 1px solid #E4DCFB;
  transition: all .15s;
}
.lib-say:hover { background: #7C3AED; color: #fff; border-color: #7C3AED; }
.lib-say:active { transform: scale(.92); }
.lib-say svg { display: block; }

/* ============================================================
   上课弹窗：可点击发音的英文（2026-09-16）
   ------------------------------------------------------------
   凡是英文都包了 .cw-say，用虚线下划线 + 小喇叭做「可点」的心理暗示，
   老师一眼就知道哪里能点，不用猜。
   ============================================================ */
.cw-say {
  cursor: pointer; border-bottom: 1.5px dashed #A78BFA;
  transition: color .14s, border-color .14s, background .14s;
  border-radius: 3px; padding: 0 2px;
}
.cw-say:hover { color: #6D28D9; border-bottom-color: #7C3AED; background: #F5F3FF; }
.cw-say:active { background: #EDE9FE; }
.cw-say::after {
  content: '🔊'; font-size: 10px; margin-left: 3px;
  opacity: .55; vertical-align: 1px;
}
.cw-say:hover::after { opacity: 1; }
/* 例句也是可点的（点它读整句，跟点卡片读单词不是一回事，所以喇叭留著） */
.cw-w-ex-s { border-bottom-style: dashed; }

/* ============================================================
   抗遗忘闯关（小程序 · 2026-09-16）
   ============================================================ */
.q-stats { display: flex; gap: 9px; margin: 12px 0 4px; }
.q-stat {
  flex: 1; background: #fff; border: 1px solid #F1EDFB; border-radius: 14px;
  padding: 11px 8px; text-align: center;
}
.q-stat-n { font-size: 20px; font-weight: 800; color: #7C3AED; line-height: 1.2; }
.q-stat-l { font-size: 11px; color: var(--c-sub); margin-top: 2px; }

.q-today {
  margin: 10px 0 2px; padding: 9px 12px; border-radius: 11px;
  font-size: 12px; color: #9A3412; background: #FFF7ED; border: 1px solid #FED7AA;
}

.q-chap { margin-top: 16px; }
.q-chap-h {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 2px 8px;
}
.q-chap-n { font-size: 14px; font-weight: 800; color: #4C1D95; }
.q-chap-m { font-size: 11.5px; color: var(--c-sub); }
.q-chap.active .q-chap-n { color: #C2410C; }

.q-lv {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1.5px solid #F1EDFB; border-radius: 15px;
  padding: 11px 13px; margin-bottom: 9px; transition: all .14s;
}
.q-lv.open { border-color: #C4B5FD; background: linear-gradient(135deg,#FAF8FF,#FFF); cursor: pointer; }
.q-lv.open:active { transform: scale(.985); }
.q-lv.cleared { border-color: #BBF7D0; background: linear-gradient(135deg,#F6FDF9,#FFF); cursor: pointer; }
.q-lv.wait { opacity: .62; }

.q-node {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800;
  background: #F5F3FF; color: #7C3AED; border: 2px solid #DDD3FB;
}
.q-node.open { background: #EDE9FE; color: #4C1D95; border-color: #7C3AED; }
.q-node.cleared { background: #DCFCE7; color: #166534; border-color: #22C55E; }
.q-node.wait { background: #F1F5F9; color: #94A3B8; border-color: #E2E8F0; }

.q-lv-body { flex: 1; min-width: 0; }
.q-lv-t { font-size: 14px; font-weight: 700; color: var(--c-text); }
.q-lv-s { font-size: 11.5px; color: var(--c-sub); margin-top: 2px; }
.q-lv-stars { font-size: 13px; letter-spacing: 2px; color: #D3D1C7; margin-top: 3px; }
.q-lv-stars.has { color: #F59E0B; }
.q-lv-go { flex: none; font-size: 12.5px; font-weight: 800; color: #7C3AED; }

.q-badge {
  font-size: 10px; font-weight: 800; padding: 1px 7px;
  border-radius: 999px; margin-left: 5px; vertical-align: 1px;
}
.q-badge.hot { background: #FEF3C7; color: #B45309; }
.q-badge.ok { background: #DCFCE7; color: #166534; }
.q-badge.wait { background: #F1F5F9; color: #64748B; }

/* ---- 抗遗忘 · 词清单（2026-09-18 简化版）
   宋哥定的界面口径：不要「章节 × 单元关卡」明细，
   就是「主课已学单词 + 其中需要抗遗忘的单词」两张清单。 ---- */
.rv-list { margin-top: 10px; }
.rv-w {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 1.5px solid #F1EDFB; border-radius: 14px;
  padding: 11px 13px; margin-bottom: 8px;
}
.rv-w-l { flex: 1; min-width: 0; }
.rv-w-en { font-size: 15px; font-weight: 700; color: var(--c-text); }
.rv-w-ipa { font-size: 11.5px; font-weight: 400; color: var(--c-sub); margin-left: 7px; }
.rv-w-zh {
  font-size: 12px; color: var(--c-sub); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv-w-r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rv-w-day {
  font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: #F5F3FF; color: #6D28D9; white-space: nowrap;
}
.rv-w-day.d0 { background: #FFF7ED; color: #C2410C; }
.rv-w-day.d1 { background: #FEF3C7; color: #B45309; }
.rv-w-day.d2 { background: #ECFDF5; color: #047857; }
.rv-w-day.d3 { background: #EFF6FF; color: #1D4ED8; }
.rv-w-day.d4 { background: #FDF2F8; color: #BE185D; }
.rv-w-book {
  font-size: 10px; color: #9CA3AF; max-width: 84px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.q-hint { font-size: 11.5px; color: var(--c-sub); text-align: center; margin: 12px 0 14px; line-height: 1.7; }

/* ---- 答题页 ---- */
.q-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.q-quit { font-size: 13px; color: var(--c-sub); cursor: pointer; flex: none; }
.q-prog { flex: 1; height: 7px; border-radius: 999px; background: #F1F5F9; overflow: hidden; }
.q-prog i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,#F97316,#FB923C); transition: width .25s; }
.q-idx { flex: none; font-size: 12px; color: var(--c-sub); font-variant-numeric: tabular-nums; }

.q-card {
  background: #fff; border: 1.5px solid #F1EDFB; border-radius: 18px;
  padding: 18px 15px; margin-bottom: 14px;
}
.q-type {
  display: inline-block; font-size: 10.5px; font-weight: 800;
  color: #7C3AED; background: #F3F0FF; padding: 2px 9px; border-radius: 999px;
  margin-bottom: 12px;
}
.q-stem { font-size: 17px; font-weight: 700; color: var(--c-text); line-height: 1.5; margin-bottom: 4px; }
.q-hintline { font-size: 12px; color: var(--c-sub); margin-top: 4px; min-height: 1px; }

.q-listen { text-align: center; padding: 6px 0 2px; }
.q-play {
  width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer;
  font-size: 34px; line-height: 1; color: #fff;
  background: linear-gradient(135deg, #7C3AED, #A855F7);
}
.q-play:active { transform: scale(.94); }
.q-listen-t { font-size: 13px; color: var(--c-sub); margin-top: 10px; }
.q-again {
  margin-top: 8px; padding: 6px 16px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: #6D28D9; font-family: inherit;
  background: #F5F3FF; border: 1px solid #DDD3FB;
}

.q-opts { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.q-opt {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px; border-radius: 14px; cursor: pointer;
  background: #FCFBFF; border: 1.5px solid #EDE9FE; transition: all .13s;
}
.q-opt:active { transform: scale(.99); }
.q-opt-k {
  flex: none; width: 24px; height: 24px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #7C3AED; background: #F3F0FF;
}
.q-opt-v { font-size: 15.5px; font-weight: 700; color: var(--c-text); }
.q-opt.right { background: #F0FDF4; border-color: #22C55E; }
.q-opt.right .q-opt-k { background: #22C55E; color: #fff; }
.q-opt.wrong { background: #FFF1F2; border-color: #EF4444; }
.q-opt.wrong .q-opt-k { background: #EF4444; color: #fff; }

.q-fb { margin-top: 12px; }
.q-fb.ok { font-size: 13.5px; color: #166534; background: #F0FDF4; border: 1px solid #BBF7D0; padding: 10px 12px; border-radius: 12px; }
.q-fb.no { font-size: 13.5px; color: #991B1B; background: #FFF1F2; border: 1px solid #FECACA; padding: 10px 12px; border-radius: 12px; line-height: 1.7; }
.q-fb span { color: var(--c-sub); font-size: 12px; }

/* ---- 结算 ---- */
.q-result { text-align: center; padding: 22px 16px; }
.q-res-stars { font-size: 40px; letter-spacing: 6px; color: #F59E0B; }
.q-res-stars.mid { color: #FBBF24; }
.q-res-stars.bad { color: #D3D1C7; }
.q-res-praise { font-size: 18px; font-weight: 800; color: var(--c-text); margin-top: 10px; }
.q-res-score { font-size: 13px; color: var(--c-sub); margin-top: 8px; }
.q-res-score b { color: #7C3AED; font-size: 16px; }
.q-res-stats { display: flex; gap: 10px; margin: 16px 0; }
.q-res-stats > div {
  flex: 1; background: #FCFBFF; border: 1px solid #F1EDFB;
  border-radius: 13px; padding: 11px 6px;
}
.q-res-stats b { display: block; font-size: 20px; font-weight: 800; color: #EA580C; }
.q-res-stats span { font-size: 11px; color: var(--c-sub); }
.q-res-tip { font-size: 12px; color: var(--c-sub); line-height: 1.75; margin-bottom: 18px; }
.q-res-btns { display: flex; flex-direction: column; gap: 10px; }

/* ============================================================
   上课弹窗 · 选章节（2026-09-16）
   ============================================================ */
.cw-unit-pick {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  margin-left: auto; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #7C3AED, #A855F7);
  transition: transform .14s;
}
.cw-unit-pick:hover { transform: translateY(-1px); }
.cw-unit-pick:active { transform: scale(.96); }

.cw-pick { max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.cw-pick-u { margin-bottom: 14px; }
.cw-pick-u.dim { opacity: .35; }
.cw-pick-h {
  display: flex; align-items: baseline; gap: 8px;
  padding: 0 2px 7px; flex-wrap: wrap;
}
.cw-pick-h b { font-size: 14px; color: #4C1D95; }
.cw-pick-h span { font-size: 12.5px; color: #374151; }
.cw-pick-h em { font-size: 11.5px; color: #6B7280; font-style: normal; margin-left: auto; }

.cw-pick-ls { display: flex; flex-direction: column; gap: 6px; }
.cw-pick-l {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-radius: 12px; cursor: pointer;
  background: #FCFBFF; border: 1.5px solid #F1EDFB; transition: all .13s;
}
.cw-pick-l:hover { border-color: #C4B5FD; background: #F9F7FF; }
.cw-pick-l.done { background: #F6FDF9; border-color: #D1FAE5; }
.cw-pick-l.cur { background: #F5F3FF; border-color: #7C3AED; border-width: 2px; }
.cw-pick-no { flex: none; font-size: 12px; font-weight: 800; color: #7C3AED; min-width: 52px; }
.cw-pick-nm { flex: 1; min-width: 0; font-size: 13px; color: #1F2937; }
.cw-pick-tag {
  flex: none; font-size: 10.5px; font-weight: 800; padding: 2px 8px;
  border-radius: 999px; background: #F1F5F9; color: #64748B;
}
.cw-pick-tag.ok { background: #DCFCE7; color: #166534; }
.cw-pick-tag.cur { background: #EDE9FE; color: #5B21B6; }

/* 单元条上的小圆点现在可点，加个 hover 反馈让人敢点 */
.cw-u { cursor: pointer; }
.cw-u:hover .cw-u-t { color: #7C3AED; }