/* =========================================================
   大衍数学AI超级助手 · 大衍堂 UniDayan
   Apple 风格 UI —— 主色：青 + 黄（克制配色 / 毛玻璃质感 / 弹性动画）
   ========================================================= */

:root {
  /* 主色：青 + 黄 两种（深色变体仅用于文字以保证可读性，不引入新色相） */
  --c-yellow:      #FFC83D;  /* 黄（亮，用于填充/渐变/背景） */
  --c-yellow-deep: #B57400;  /* 黄的深色，仅用于文字可读性 */
  --c-cyan:        #1FC8E0;  /* 青（用于填充/渐变/背景） */
  --c-cyan-deep:   #0B7A92;  /* 青的深色，仅用于文字可读性 */
  --c-mint:        #25B99A;  /* 青绿（青家族延伸，用于"破局/方法"语义） */
  --c-mint-deep:   #0E7A66;

  /* 中性色（基底） */
  --ink:      #1d1d1f;
  --ink-soft: #6e6e73;
  --line:     rgba(255, 255, 255, 0.7);
  --glass:    rgba(255, 255, 255, 0.62);

  /* 尺寸与动效 */
  --radius-lg: 24px;
  --radius-md: 18px;
  --shadow-1:  0 8px 24px rgba(40, 60, 90, 0.10);
  --shadow-2:  0 24px 70px rgba(20, 40, 70, 0.18);
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  /* 视图切换（切页）的淡入淡出时长 —— 这个数**只有这一处**。
     app.js 的 showView 里有个配套的"旧视图等淡出结束再 display:none"定时器，
     它靠读这个变量来对齐，所以改这里就够了，不用去改 JS（两类数各写一份必然对不上）。
     0.6s 太长：每点一次都要等它淡完，整个 App 用起来像慢了半拍；0.3s 既跟手又不生硬。 */
  --view-fade: 0.3s;
  --grad:      linear-gradient(135deg, var(--c-yellow), var(--c-cyan));

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC",
          "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

body {
  position: relative;
  min-height: 100vh;
  background: #0b1024; /* 兜底色 */
}

/* ===================== 全局极光背景（仅 青/黄 同色家族） ===================== */
.aurora {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 0% 0%, #fff6da 0%, transparent 55%),
    linear-gradient(135deg, #fbfdff 0%, #eef9fb 40%, #e6f6fb 100%);
}
/* 中心微亮、四角微暗：给"光"一个方向，玻璃才有被照亮的感觉。
   刻意做得很轻 —— 三个课的背景是同一片极光，这里只加"景深"，不改配色。 */
.aurora::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background:
    radial-gradient(84% 76% at 50% 38%, rgba(255, 255, 255, 0.42), transparent 60%),
    radial-gradient(124% 116% at 50% 50%, transparent 56%, rgba(22, 54, 84, 0.08) 100%);
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.5;
  mix-blend-mode: multiply;
  animation: drift 22s ease-in-out infinite;
}
.blob--1 { width: 46vw; height: 46vw; left: -8vw;  top: -10vh;
  background: radial-gradient(circle at 30% 30%, #FFD86B, var(--c-yellow)); }
.blob--2 { width: 42vw; height: 42vw; right: -6vw; top: -8vh;
  background: radial-gradient(circle at 30% 30%, #5BD7EE, var(--c-cyan));
  animation-delay: -5s; }
.blob--3 { width: 50vw; height: 50vw; left: 18vw; bottom: -22vh;
  background: radial-gradient(circle at 30% 30%, var(--c-yellow), #FFE9A8);
  animation-delay: -10s; }
.blob--4 { width: 38vw; height: 38vw; right: 10vw; bottom: -16vh;
  background: radial-gradient(circle at 30% 30%, var(--c-cyan), #A8ECF6);
  animation-delay: -15s; }
/* 进场动画期间：#splash 的背景是**不透明**的，极光被完全盖住却仍在逐帧重绘 4 个大模糊块
   （blur(64px) + mix-blend-mode，属于本页最贵的常驻开销）。这里把它暂停，肉眼零差别。 */
#splash:not(.is-hide) ~ .aurora .blob { animation-play-state: paused; }

@keyframes drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(4vw, 6vh) scale(1.08); }
  66%     { transform: translate(-3vw, 3vh) scale(0.96); }
}

/* 细腻噪点质感 */
.grain {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0.045; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===================== 视图切换基础 ===================== */
.view {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2;
  display: none;
  align-items: center; justify-content: center;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--view-fade) var(--ease), transform var(--view-fade) var(--ease);
}
.view--active { display: flex; opacity: 1; transform: none; }

/* ===================== 玻璃质感 ===================== */
.glass {
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}

/* ===================== 登录页 ===================== */
#view-login { padding: 4vh 4vw; }

.login-card {
  width: min(420px, 92vw);
  padding: 44px 40px 32px;
  border-radius: var(--radius-lg);
  text-align: center;
  animation: rise 0.8s var(--ease) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.brand__logo {
  width: 132px; height: auto;
  margin-bottom: 18px;
  filter: drop-shadow(0 8px 18px rgba(40, 80, 160, 0.18));
}

.login__title {
  font-size: 30px; font-weight: 700; letter-spacing: 0.5px;
  background: linear-gradient(120deg, #2a2a3a, #1d1d1f 55%, var(--c-cyan-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login__subtitle {
  margin-top: 8px; font-size: 14px; color: var(--ink-soft); letter-spacing: 2px;
}

.login__form { margin-top: 30px; text-align: left; }

.field { position: relative; display: block; margin-bottom: 22px; }
.field input {
  width: 100%; height: 50px;
  padding: 14px 4px 8px;
  background: transparent;
  border: 0; border-bottom: 1.5px solid rgba(80, 80, 100, 0.28);
  font-size: 16px; color: var(--ink); outline: none;
  transition: border-color 0.3s var(--ease);
}
.field__label {
  position: absolute; left: 4px; top: 14px;
  font-size: 16px; color: var(--ink-soft); pointer-events: none;
  transition: all 0.25s var(--ease);
}
.field input:focus ~ .field__label,
.field input:not(:placeholder-shown) ~ .field__label {
  top: -8px; font-size: 12px; color: var(--c-cyan-deep); font-weight: 600;
}
.field__underline {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--grad);
  transition: width 0.35s var(--ease);
}
.field input:focus ~ .field__underline { width: 100%; }

.login__error {
  min-height: 18px; margin: -6px 0 10px;
  font-size: 13px; color: #e5484d; text-align: center;
}

/* ===================== 按钮 ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; font-family: inherit;
  font-size: 16px; font-weight: 600;
  border-radius: 16px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn--primary {
  width: 100%; height: 52px; color: #fff;
  background: var(--grad);
  background-size: 180% 180%;
  box-shadow: 0 12px 26px rgba(230, 160, 30, 0.36);
  animation: shimmer 6s ease infinite;
  text-shadow: 0 1px 1px rgba(0,0,0,0.12);
}
@keyframes shimmer { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(230,160,30,0.44); }
.btn--primary:active { transform: translateY(0) scale(0.99); }

.btn--ghost {
  height: 44px; padding: 0 18px; color: var(--ink);
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line);
}
.btn--ghost svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn--ghost:hover { transform: translateY(-2px); }

.login__foot {
  margin-top: 26px; font-size: 12px; color: var(--ink-soft); letter-spacing: 0.5px;
}

/* ===================== 过渡动画 splash（与登录/主页统一：透明，露出同一片极光） ===================== */
.splash {
  z-index: 30;
  background: transparent;          /* 露出全局 .aurora，与登录/主页背景一致 */
  overflow: hidden;
}
/* 过渡期间在背景上叠加一层缓慢流动的 黄→青 渐变光晕 */
.splash::before {
  content: "";
  position: absolute; top: -25%; right: -25%; bottom: -25%; left: -25%;
  background: conic-gradient(from 0deg,
    rgba(255, 200, 61, 0) 0deg,
    rgba(255, 200, 61, 0.22) 90deg,
    rgba(31, 200, 224, 0.22) 200deg,
    rgba(255, 200, 61, 0) 360deg);
  filter: blur(48px);
  animation: spin 9s linear infinite;
  pointer-events: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.splash__inner { position: relative; z-index: 2; text-align: center; padding: 0 6vw; }

.splash__mark {
  position: relative; width: 132px; height: 132px; margin: 0 auto 36px;
  display: grid; place-items: center;
}
.splash__ring {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%;
  border: 2px solid rgba(31, 200, 224, 0.18);
  animation: pulse-y 2s ease-out infinite;
}
.splash__ring--2 { animation-name: pulse-c; animation-delay: 1s; }
@keyframes pulse-y {
  0%   { transform: scale(0.65); opacity: 0.85; border-color: rgba(255, 200, 61, 0.75); }
  100% { transform: scale(1.5);  opacity: 0;    border-color: rgba(255, 200, 61, 0); }
}
@keyframes pulse-c {
  0%   { transform: scale(0.65); opacity: 0.85; border-color: rgba(31, 200, 224, 0.75); }
  100% { transform: scale(1.5);  opacity: 0;    border-color: rgba(31, 200, 224, 0); }
}
.splash__badge {
  position: relative; z-index: 1;
  width: 86px; height: 86px; border-radius: 24px;
  display: grid; place-items: center;
  background: var(--grad);
  box-shadow: 0 18px 40px rgba(230, 160, 30, 0.42);
  opacity: 0; transform: scale(0.6);
  animation: pop 0.9s var(--ease) 0.15s forwards;
}
.splash__logo {
  width: 44px; height: 44px; fill: none;
  stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
}
@keyframes pop { to { opacity: 1; transform: scale(1); } }

.splash__slogan {
  font-size: clamp(26px, 4vw, 44px); font-weight: 700; letter-spacing: 2px;
  background: linear-gradient(120deg, #1d1d1f 0%, var(--c-cyan-deep) 55%, var(--c-yellow-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: translateY(16px);
  animation: up 0.9s var(--ease) 0.55s forwards;
}
.splash__sub {
  margin-top: 14px; font-size: clamp(13px, 1.4vw, 17px);
  color: var(--ink-soft); letter-spacing: 4px;
  opacity: 0; transform: translateY(16px);
  animation: up 0.9s var(--ease) 0.85s forwards;
}
@keyframes up { to { opacity: 1; transform: none; } }

/* ===================== 主页 ===================== */
.home {
  flex-direction: column; align-items: stretch; justify-content: stretch;
  padding: 0; gap: 0;
}

.home__topbar {
  display: flex; align-items: center; justify-content: space-between;
  /* 右侧多留 54px，给悬浮的全屏按钮让位 */
  padding: 22px calc(clamp(48px, 6vw, 96px) + 54px) 6px clamp(48px, 6vw, 96px);
}
.topbar__left { display: flex; align-items: center; gap: 14px; }
.topbar__logo { height: 44px; width: auto; filter: drop-shadow(0 6px 14px rgba(40,80,160,0.18)); }
.topbar__titles { display: flex; flex-direction: column; line-height: 1.15; }
.topbar__app { font-size: 18px; font-weight: 700; color: var(--ink); }
.topbar__sub { font-size: 12px; color: var(--ink-soft); letter-spacing: 1px; }

.userchip {
  position: fixed; top: 12px; right: 74px; z-index: 300;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; border-radius: 999px;
  cursor: pointer;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 8px 24px rgba(20,90,120,0.16), 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.userchip:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(20,90,120,0.22); background: rgba(255,255,255,0.70); }
/* 头像是"完整姓名"而不是单个姓氏：做成一枚小胶囊，宽度跟着名字走（最少 36px 见方） */
.userchip__av {
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: 999px; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13.5px;
  white-space: nowrap;
  background: linear-gradient(135deg, #0C93A6, #22B8CE);
  box-shadow: 0 4px 12px rgba(12,147,166,0.30);
}
.userchip__meta { display: flex; flex-direction: column; line-height: 1.18; text-align: left; }
.userchip__name { font-size: 14px; font-weight: 600; color: var(--ink); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userchip__id { font-size: 12px; color: var(--ink-soft); }

/* 下拉面板：查看 / 编辑个人信息 */
.userpanel {
  position: absolute; top: calc(100% + 10px); right: 0; width: 320px; max-width: calc(100vw - 20px);
  max-height: calc(100vh - 92px); overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 16px; border-radius: 16px;
  background: rgba(255,255,255,0.93);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.70);
  box-shadow: 0 18px 50px rgba(20,90,120,0.24), 0 4px 14px rgba(0,0,0,0.08);
  opacity: 0; transform: translateY(-8px) scale(0.98); pointer-events: none;
  transform-origin: top right;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.userpanel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.userpanel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.userpanel__t { font-size: 15px; font-weight: 700; color: var(--ink); }
.userpanel__close { width: 26px; height: 26px; border: none; background: transparent; color: var(--ink-soft); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 8px; }
.userpanel__close:hover { color: var(--ink); background: rgba(0,0,0,0.05); }
.userpanel__row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.userpanel__k { flex: 0 0 58px; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.userpanel__v { font-size: 14px; color: var(--ink); }
.userpanel__v.is-fixed { font-weight: 600; }
.userpanel__in { flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid #d4dee6; background: #fbfcfe; font: inherit; font-size: 14px; color: var(--ink); outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.userpanel__in:focus { border-color: #0C93A6; box-shadow: 0 0 0 3px rgba(12,147,166,0.14); }
.userpanel__sel { flex: 1 1 auto; display: flex; gap: 8px; }
.userpanel__opt { flex: 1 1 auto; height: 34px; border: 1px solid #d4dee6; background: #fbfcfe; border-radius: 10px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; transition: all 0.18s var(--ease); }
.userpanel__opt:hover { border-color: #0C93A6; }
.userpanel__opt.is-on { border-color: #0C93A6; color: #fff; background: linear-gradient(135deg, #0C93A6, #22B8CE); box-shadow: 0 4px 12px rgba(12,147,166,0.28); }
.userpanel__join { flex: 1 1 auto; display: flex; gap: 8px; }
.userpanel__join .userpanel__code { flex: 1 1 auto; letter-spacing: 1px; }
.userpanel__joinbtn { flex: 0 0 auto; height: 38px; padding: 0 16px; border: none; border-radius: 10px; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; background: linear-gradient(135deg, #0C93A6, #22B8CE); box-shadow: 0 4px 12px rgba(12,147,166,0.28); transition: transform 0.16s var(--ease), opacity 0.2s; }
.userpanel__joinbtn:hover { transform: translateY(-1px); }
.userpanel__joinbtn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.userpanel__foot { display: flex; gap: 10px; margin-top: 4px; }
.userpanel__save, .userpanel__logout { flex: 1 1 auto; height: 40px; border: none; border-radius: 11px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform 0.16s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s; }
.userpanel__save { color: #fff; background: linear-gradient(135deg, #0C93A6, #22B8CE); box-shadow: 0 6px 16px rgba(12,147,166,0.30); }
.userpanel__save:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(12,147,166,0.40); }
.userpanel__save:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.userpanel__logout { color: #c0392b; background: rgba(192,57,43,0.08); border: 1px solid rgba(192,57,43,0.25); }
.userpanel__logout:hover { background: rgba(192,57,43,0.14); transform: translateY(-1px); }

/* 「个人设置」面板的分节标题（现在只有「基本信息」这一节） */
.userpanel__sec {
  margin: 12px 0 9px; padding-top: 11px;
  border-top: 1px solid rgba(20,90,120,0.10);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-soft);
}
.userpanel__sec:first-of-type { margin-top: 2px; padding-top: 0; border-top: none; }

/* 姓名右边那个「更多信息」：默认收着，点一下才露出账号 / 学号 / 性别 */
.userpanel__more {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
  height: 30px; padding: 0 9px; border-radius: 9px;
  border: 1px solid #d4dee6; background: #fbfcfe;
  font: inherit; font-size: 12px; color: var(--ink-soft);
  cursor: pointer; white-space: nowrap;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.userpanel__more:hover { border-color: #0C93A6; color: #0C93A6; background: #f4f9fb; }
.userpanel__more i { font-style: normal; font-size: 9px; line-height: 1; transition: transform 0.2s var(--ease); }
.userpanel__more.is-open i { transform: rotate(180deg); }
.userpanel__morebox.is-hide { display: none; }
.userpanel__morebox {
  margin: 0 0 10px; padding: 11px 11px 2px;
  border-radius: 12px; background: rgba(20,90,120,0.045);
}

/* 班级那一行：不是输入框，是个"当前是什么 / 点一下能改"的按钮，两种状态 */
.userpanel__cls {
  flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid #d4dee6; background: #fbfcfe; border-radius: 10px;
  font: inherit; cursor: pointer; text-align: left;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.userpanel__cls:hover { border-color: #0C93A6; background: #f4f9fb; }
.userpanel__clsn { font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userpanel__clsx { flex: 0 0 auto; font-size: 12px; color: #0C93A6; }
.userpanel__cls.is-empty .userpanel__clsn { font-weight: 500; color: var(--ink-soft); }

/* 班级码输入框：平时收着（.is-hide），点班级那行才露出。缩进到跟输入框一栏对齐。 */
.userpanel__join.is-hide { display: none; }
.userpanel__join { margin: 0 0 10px 68px; }

/* 今日时长 / 总时长：并排两个小格子（原来是两行，占地方） */
.userpanel__durs { display: flex; gap: 8px; margin: 0 0 12px; }
.userpanel__dur {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 12px; border-radius: 12px;
  background: rgba(20,90,120,0.045);
}
.userpanel__durk { font-size: 11.5px; color: var(--ink-soft); }
.userpanel__durv { font-size: 14px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 三个功能入口竖排三行：课程成就 / 隐藏未开通课程 / 老师分享的对话 */
.userpanel__mods { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 12px; }
.userpanel__mod {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 42px; padding: 0 12px;
  border: 1px solid #d4dee6; background: #fbfcfe; border-radius: 11px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; text-align: left;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.userpanel__mod:hover { border-color: #0C93A6; background: #f4f9fb; }
.userpanel__modt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userpanel__modn {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: #12805F; color: #fff; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* 有还没看过的新奖励 → 数字徽章转金色流光（跟原来右上角按钮同一套语义） */
.userpanel__modn.is-new {
  color: #8a5b00;
  background: linear-gradient(100deg, #FFD34D, #FFF8DC, #FFC93C, #FFEFB8, #FFD34D);
  background-size: 300% 100%;
  animation: achShine 3.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .userpanel__modn.is-new { animation: none; } }
.userpanel__mod.is-unread { color: #C0392B; border-color: rgba(245,87,108,0.50); background: rgba(245,87,108,0.06); }

/* 「隐藏未开通课程」那颗：跟上下两颗一样宽、一样高，开着的时候整颗变绿。
   （JS 仍然按页面类型决定露不露面 —— 只有列课程的那几页才有锁着的卡片可藏。） */
.hide-toggle {
  display: flex; align-items: center; justify-content: flex-start;
  width: 100%; height: 42px; padding: 0 12px;
  border: 1px solid #d4dee6; background: #fbfcfe; border-radius: 11px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; text-align: left;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.hide-toggle:hover { border-color: #0C93A6; background: #f4f9fb; }
.hide-toggle.is-on {
  color: #0C6B57; border-color: rgba(24,150,120,0.40);
  background: linear-gradient(135deg, rgba(122,224,190,0.94), rgba(232,251,243,0.96));
}
.hide-toggle__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 顶部提示（保存成功 / 被异地登录踢出） */
.userchip-toast {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 400; padding: 11px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: #fff;
  background: rgba(20,90,120,0.90);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.20);
  animation: userchipToastIn 0.3s var(--ease);
}
.userchip-toast.is-ok { background: linear-gradient(135deg, #0C93A6, #22B8CE); }
@keyframes userchipToastIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ===================== 成就系统（右上角，账号 chip 左边） =====================
   .ach-dock 是右上角的定位容器：成就按钮 + 账号 chip 都在里面，靠 flex 排。
   账号 chip 移进来之后 position 要变回 static，它自己的资料面板才会以 dock 为基准定位。 */
.ach-dock {
  position: fixed; top: 12px; right: 74px; z-index: 300;
  display: flex; align-items: center; gap: 10px;
}
.ach-dock .userchip { position: static; top: auto; right: auto; z-index: auto; }
body.splash-on .ach-chip { opacity: 0; pointer-events: none; }

/* 默认绿色＝"没有新东西，看过了"；
   老师发了新的鼓励 / 新开了一讲 → 加 .is-new 变金色 + 流光，提示"有新的奖励"，
   学生点开看过之后由 achievements.js 摘掉 .is-new，自己回到下面的绿色。 */
.ach-chip {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: #0C6B57; white-space: nowrap;
  background: linear-gradient(135deg, rgba(122,224,190,0.94), rgba(232,251,243,0.96));
  border: 1px solid rgba(24,150,120,0.40);
  box-shadow: 0 8px 24px rgba(24,140,110,0.18), 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), opacity 0.3s var(--ease), background 0.4s var(--ease);
}
.ach-chip:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(24,140,110,0.26); }
.ach-chip:active { transform: scale(0.97); }
.ach-chip svg { width: 15px; height: 15px; flex: 0 0 auto; fill: #5FD3AE; stroke: #12805F; stroke-width: 1.1; stroke-linejoin: round; transition: fill 0.4s var(--ease), stroke 0.4s var(--ease); }
.ach-chip__n {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #12805F; color: #fff; font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; transition: background 0.4s var(--ease);
}
/* .is-all ＝「全部课程成就」（在课例列表等页面上）：
   跟课程内的按钮共用同一套"金=有新、绿=看过"的语义，但底色换成青蓝、图标换成三颗星，
   于是"这是全部课程的"和"这是这一讲的"不用读字也能分出来。
   这几条必须写在 .is-new 前面 —— 两者权重相同，靠先后顺序让金色盖住青色。 */
.ach-chip.is-all {
  color: #0B6A80;
  background: linear-gradient(135deg, rgba(126,214,232,0.94), rgba(233,249,252,0.96));
  border-color: rgba(12,147,166,0.46);
  box-shadow: 0 8px 24px rgba(12,120,145,0.20), 0 2px 8px rgba(0,0,0,0.05);
}
.ach-chip.is-all:hover { box-shadow: 0 12px 30px rgba(12,120,145,0.28); }
.ach-chip.is-all svg { fill: #7AD3E6; stroke: #0B7A92; }
.ach-chip.is-all .ach-chip__n { background: #0B7A92; }

.ach-chip.is-new {
  color: #8a5b00;
  background: linear-gradient(100deg, #FFD34D, #FFF8DC, #FFC93C, #FFEFB8, #FFD34D);
  background-size: 300% 100%;
  border-color: rgba(206,152,16,0.58);
  box-shadow: 0 8px 26px rgba(190,140,20,0.32), 0 2px 8px rgba(0,0,0,0.06);
  animation: achShine 3.4s linear infinite;
}
.ach-chip.is-new:hover { box-shadow: 0 12px 32px rgba(190,140,20,0.42); }
.ach-chip.is-new svg { fill: #F7C33B; stroke: #B57A00; }
.ach-chip.is-new .ach-chip__n { background: #B57A00; }
@keyframes achShine { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .ach-chip.is-new {
    animation: none;
    background: linear-gradient(135deg, rgba(255,214,102,0.96), rgba(255,247,214,0.97));
  }
}

/* 课程成就大弹窗：几乎铺满页面，浮在页面上方。
   内容只属于"当前这一讲"—— 换讲时整块跟着换，各讲之间互不影响。 */
.ach-m { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 900; display: none; }
.ach-m.is-open { display: block; }
.ach-m__veil { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(14,42,56,0.46);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ach-m__box {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1400px, 95vw); height: min(92vh, 1000px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 24px; background: rgba(255,255,255,0.98);
  border: 1px solid rgba(12,147,166,0.22);
  box-shadow: 0 40px 90px rgba(10,40,55,0.34), 0 6px 20px rgba(10,40,55,0.14);
}
body.ach-lock { overflow: hidden; }

/* 弹窗头压成一行，把纵向空间留给星图。
   position:relative 是给关闭按钮当定位基准的 —— 少了它，按钮会去找 .ach-m__box，
   top:50% 就变成"整个窗口的中间"，于是飘在右侧栏的卡片上。 */
.ach-m__hd { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  padding: 14px 22px; border-bottom: 1px solid rgba(12,147,166,0.14);
  background: linear-gradient(120deg, rgba(12,147,166,0.10), rgba(255,216,107,0.10)); }
.ach-m__no { flex: none; display: inline-block; padding: 4px 11px; border-radius: 999px;
  background: #0C93A6; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.ach-m__hd h2 { flex: none; margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--ink); }
.ach-m__hd h2 i { margin-left: 9px; font-style: normal; font-size: 13.5px; font-weight: 700;
  color: #0B7A92; letter-spacing: 0; }
.ach-m__sub { flex: 0 1 auto; margin-left: auto; padding-right: 42px; font-size: 12px; color: #566b74;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ach-m__x { position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 11px;
  cursor: pointer; background: rgba(12,147,166,0.10); color: #0B7A92; font-size: 20px; line-height: 1; }
.ach-m__x:hover { background: rgba(12,147,166,0.20); }

/* 概览数字在侧边栏里排成 2×2。
   侧栏是固定高度的 flex 列：板块一旦允许收缩（或带 min-height:0），就会被压矮，
   但板块内部照原尺寸往下溢出 —— 看起来就是"标题和卡片叠在一起"。
   所以侧栏里的每个板块都按内容占高、一律不收缩，多出来的高度交给侧栏自己滚。 */
.ach-m__nums { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ach-m__num { padding: 10px 13px; border-radius: 13px; background: #fff;
  border: 1px solid rgba(12,147,166,0.18); box-shadow: 0 4px 14px rgba(20,60,80,0.06); }
.ach-m__num strong { display: block; font-size: 21px; font-weight: 800; color: #0B7A92;
  font-variant-numeric: tabular-nums; line-height: 1.2; }
.ach-m__num strong i { font-size: 12px; font-style: normal; font-weight: 600; color: #566b74; }
.ach-m__num span { display: block; margin-top: 2px; font-size: 10.5px; color: #566b74; }

/* 主区＝星图（几乎占满），其余模块全在右侧边栏 */
.ach-m__body { flex: 1 1 auto; min-height: 0; display: grid;
  grid-template-columns: minmax(0, 1fr) 322px; gap: 16px; padding: 14px 20px 18px; overflow: hidden; }
/* 本讲版嵌星图时右栏整个不要：星图独占整行（亮点按钮浮在画布右上角） */
.ach-m__body--solo { grid-template-columns: minmax(0, 1fr); }
.ach-m__main { min-width: 0; min-height: 0; display: flex; }
.ach-m__rail { min-height: 0; overflow: auto; padding-right: 4px;
  display: flex; flex-direction: column; gap: 16px; }
.ach-m__sec { flex: 0 0 auto; display: flex; flex-direction: column; }
.ach-m__rail > .ach-m__sec { padding-top: 16px; border-top: 1px solid rgba(12,147,166,0.12); }
.ach-m__rail .ach-m__types { overflow: visible; }   /* 侧栏里的题型列表跟着侧栏一起滚，别自己再滚一层 */
.ach-m__h { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--ink); }
.ach-m__h em { margin-left: 10px; font-style: normal; font-size: 11.5px; font-weight: 600; color: #566b74; }
/* 星图整块铺满主区 */
.ach-m__graph { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(12,147,166,0.18); background: #f7fbfd; }
/* 星图组件自带固定高度（.c3g-stage 620px），弹窗里把这几层解开，让它跟着容器长满 */
.ach-m__graph > .c3g { flex: 1 1 auto; min-width: 0; height: 100%; max-width: none; padding: 0; align-items: stretch; }
.ach-m__graph .c3g-main { height: 100%; }
.ach-m__graph .c3g-stagewrap { flex: 1 1 auto; min-height: 0; }
.ach-m__graph .c3g-stage { height: 100%; min-height: 0; }
/* 没有星图时（第1/2讲、或没做前测的第3讲）：主区放本讲题型掌握 */
.ach-m__panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  padding: 14px 16px 16px; border-radius: 18px;
  border: 1px solid rgba(12,147,166,0.18); background: #fff; }
.ach-m__tip { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; font-size: 12px;
  color: #8a6100; background: rgba(255,200,61,0.16); }
.ach-m__empty { margin: 0; padding: 14px 0; font-size: 12.5px; color: #566b74; }

/* 总体成就弹窗：主区按讲分块列出各讲题型掌握。
   分块一律按内容占高、不收缩，超出让 .ach-m__all 自己滚（同侧栏那套道理）。 */
.ach-m__hd--all { background: linear-gradient(120deg, rgba(12,147,166,0.17), rgba(126,214,232,0.10)); }
.ach-m__all { flex: 1 1 auto; min-height: 0; overflow: auto; padding-right: 4px;
  display: flex; flex-direction: column; gap: 20px; }
.ach-m__all-l { flex: 0 0 auto; display: flex; flex-direction: column; }
.ach-m__all-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 0 0 10px; font-size: 14px; font-weight: 800; color: var(--ink); }
.ach-m__all-no { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 8px; background: #0C93A6; color: #fff; font-size: 11.5px; font-weight: 800;
  font-variant-numeric: tabular-nums; }
.ach-m__all-m { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 600;
  color: #566b74; font-variant-numeric: tabular-nums; }
.ach-m__all .ach-m__types { overflow: visible; }   /* 题型卡跟着主区一起滚，别自己再滚一层 */

.ach-m__types { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px; overflow: auto; align-content: start; }
.ach-m__type { display: flex; flex-direction: column; gap: 8px; padding: 13px 15px; border-radius: 14px;
  background: #f2f8fa; border: 1px solid rgba(12,147,166,0.14); }
.ach-m__type.is-warn { background: #fdf1d8; border-color: rgba(214,152,40,0.42); }
.ach-m__type-t b { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.ach-m__type-t small { display: block; margin-top: 3px; font-size: 11px; color: #566b74; }
.ach-m__type-m { display: flex; align-items: center; gap: 10px; }
.ach-m__bar { flex: 1 1 auto; height: 6px; border-radius: 6px; background: rgba(12,147,166,0.14); overflow: hidden; }
.ach-m__bar i { display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #0C93A6, #22B8CE); }
.ach-m__type.is-warn .ach-m__bar i { background: linear-gradient(90deg, #E0A22E, #F2C35A); }
.ach-m__type-m strong { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; }

.ach-m__enc { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(12,147,166,0.10); }
.ach-m__enc:first-of-type { border-top: 0; }
.ach-m__enc-s { flex: 0 0 auto; font-size: 13px; letter-spacing: 1px; color: #F2B01E; }
.ach-m__enc-t { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--ink); }
.ach-m__enc-t i { color: #566b74; font-style: normal; }
.ach-m__enc small { flex: 0 0 auto; font-size: 11px; color: #566b74; }
/* 优秀对话（S 级及以上）：跟「老师给的奖励」同一列排法，左边一个等级徽章 */
.ach-m__rv { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(12,147,166,0.10); }
.ach-m__rv:first-of-type { border-top: 0; }
.ach-m__rvg { flex: 0 0 auto; min-width: 38px; padding: 3px 8px; border-radius: 8px; text-align: center;
  font-size: 12px; font-weight: 800; letter-spacing: .4px; color: #fff; background: #8b98a5; }
.ach-m__rvg.is-s, .ach-m__rvg.is-ss, .ach-m__rvg.is-sss { background: #d99a2b; }
.ach-m__rvt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ach-m__rvt b { font-size: 12.5px; color: var(--ink); }
.ach-m__rvt small { font-size: 11px; color: #566b74; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 星图模式（没有右栏）就在星图上方留一条：至少让"有过 S 级对话"看得见 */
.ach-m__rvstrip { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  padding: 7px 12px; border-radius: 10px; font-size: 12.5px; color: #566b74;
  background: rgba(217,154,43,0.08); border: 1px solid rgba(217,154,43,0.22); }
.ach-m__rvstrip b { color: #b8860b; }
/* 星图上方插了这条提示时，主区要改成竖排（否则星图会被挤成一条） */
.ach-m__main--col { flex-direction: column; }

.ach-m__lesson { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; }
.ach-m__lesson.is-cur { background: rgba(12,147,166,0.10); }
.ach-m__lesson.is-lock { opacity: 0.6; }
.ach-m__lesson-no { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: #9db0b6; font-variant-numeric: tabular-nums; }
.ach-m__lesson-t { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ach-m__ls { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font-size: 11px;
  color: #566b74; background: rgba(142,142,147,0.14); }
.ach-m__ls.is-on { color: #0E7A66; background: rgba(37,185,154,0.18); }
.ach-m__ls.is-cur { color: #0B7A92; background: rgba(12,147,166,0.16); font-weight: 700; }
.ach-m__ls.is-lock { color: #6e7b81; background: rgba(142,142,147,0.16); }

@media (max-width: 980px) {
  /* 窄屏改成单列：星图在上、侧栏内容接在下面，这时没有确定高度，得给星图一个下限 */
  .ach-m__box { width: 96vw; height: 94vh; border-radius: 18px; }
  .ach-m__hd { padding: 12px 16px; gap: 10px; }
  .ach-m__hd h2 { font-size: 19px; }
  .ach-m__hd h2 i { font-size: 12.5px; margin-left: 7px; }
  .ach-m__sub { display: none; }
  /* 单列时不再用 grid：两行都带 min-height:0，网格的"平均分配"会把行压成一样高，
     里面的内容照原尺寸溢出 → 板块互相压住。改成纵向 flex，主区/侧栏各按内容占位，
     多出来的高度交给 body 自己滚。 */
  .ach-m__body { display: flex; flex-direction: column; gap: 16px;
    overflow: auto; padding: 14px 16px 20px; }
  .ach-m__main { flex: 0 0 auto; }
  .ach-m__rail { flex: 0 0 auto; overflow: visible; }
  .ach-m__panel { flex: 0 0 auto; }
  .ach-m__all { overflow: visible; }   /* 单列时高度按内容走，滚动交给弹窗本体 */
  /* 单列时主区高度是自动的，得给星图一个确定高度 */
  .ach-m__graph { flex: 0 0 auto; height: 68vh; min-height: 470px; }
}
@media (max-width: 620px) {
  .ach-chip { padding: 6px 10px; }
}

/* ===================== 「选一个数学实验」弹窗 =====================
   一个题型挂了多个数学实验时（第3讲题型五挂了两个），点「点击探索实验」先弹它，
   选一个再进；每行标着已做 / 未做，做完退回来状态会刷新。
   只挂一个实验的题型不弹，直接进 —— 弹出来只有一行反而多一步。 */
.expp { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 860; display: none; }
.expp.is-open { display: block; }
.expp__veil { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(14,42,56,0.44);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.expp__box {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(720px, 92vw); max-height: 86vh;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 22px; background: rgba(255,255,255,0.98);
  border: 1px solid rgba(12,147,166,0.22);
  box-shadow: 0 36px 80px rgba(10,40,55,0.34), 0 6px 20px rgba(10,40,55,0.14);
}
body.expp-lock { overflow: hidden; }
.expp__hd { position: relative; flex: 0 0 auto; padding: 16px 22px;
  border-bottom: 1px solid rgba(226,58,110,0.16);
  background: linear-gradient(120deg, rgba(226,58,110,0.12), rgba(255,216,107,0.12)); }
.expp__hd h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.2px; color: var(--ink); }
.expp__hd h2 i { margin-left: 9px; font-style: normal; font-size: 13px; font-weight: 700;
  color: #C2415F; letter-spacing: 0; }
.expp__x { position: absolute; top: 50%; right: 18px; transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 11px;
  cursor: pointer; background: rgba(226,58,110,0.10); color: #C2415F; font-size: 20px; line-height: 1; }
.expp__x:hover { background: rgba(226,58,110,0.20); }
.expp__body { flex: 1 1 auto; min-height: 0; overflow: auto;
  padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.expp__lead { margin: 0 0 2px; font-size: 13px; color: #566b74; }
.expp__item { display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px 18px; border-radius: 16px; font: inherit; text-align: left; cursor: pointer;
  border: 1px solid rgba(12,147,166,0.20); background: #fff;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.expp__item:hover { transform: translateY(-2px); border-color: rgba(12,147,166,0.46);
  box-shadow: 0 16px 34px rgba(20,60,80,0.15); }
.expp__item:focus-visible { outline: 3px solid rgba(12,147,166,0.5); outline-offset: 2px; }
.expp__no { flex: none; display: grid; place-items: center; width: 48px; height: 44px;
  border-radius: 13px; color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .5px;
  background: linear-gradient(135deg, #0C93A6, #22B8CE); }
.expp__item.is-done .expp__no { background: linear-gradient(135deg, #15803d, #22c55e); }
.expp__main { flex: 1 1 auto; min-width: 0; }
.expp__t { display: block; font-size: 15px; font-weight: 800; color: var(--ink); }
.expp__d { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.7; color: #566b74; }
.expp__st { flex: none; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  color: #566b74; background: rgba(142,142,147,0.14); }
.expp__st.is-done { color: #0E7A66; background: rgba(37,185,154,0.18); }
.expp__go { flex: none; font-size: 13px; font-weight: 800; color: #0B7A92; white-space: nowrap; }
@media (max-width: 620px) {
  .expp__box { width: 94vw; }
  .expp__item { gap: 10px; padding: 13px 14px; }
  .expp__no { width: 42px; height: 40px; font-size: 11px; }
  .expp__go { display: none; }
}

/* 异地登录弹窗 */
.kick-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.kick-modal__mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(10,28,40,0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: kickFade .28s var(--ease); }
.kick-modal__box { position: relative; z-index: 1; width: min(420px, calc(100% - 40px)); padding: 28px 28px 26px; text-align: center; border-radius: 22px; background: rgba(255,255,255,0.97); box-shadow: 0 30px 70px rgba(15,50,75,0.4); border: 1px solid rgba(255,255,255,0.7); animation: kickIn .4s var(--ease); }
.kick-modal__icon { width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, #FFB03A, #FF8A50); box-shadow: 0 10px 24px rgba(255,138,80,0.35); }
.kick-modal__icon svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kick-modal__title { font-size: 19px; font-weight: 800; color: #1a2733; margin: 0 0 10px; }
.kick-modal__sub { font-size: 14px; color: #4a5a66; line-height: 1.75; margin: 0 0 8px; }
.kick-modal__sub b { color: #e0762f; font-weight: 700; }
.kick-modal__body { font-size: 13px; color: #6b7a89; line-height: 1.75; margin: 0 0 18px; }
.kick-modal__body strong { color: #b0322c; }
.kick-modal__btn { height: 42px; padding: 0 26px; border: none; border-radius: 12px; color: #fff; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; background: linear-gradient(135deg, #0C93A6, #22B8CE); box-shadow: 0 8px 20px rgba(12,147,166,0.32); transition: transform .16s var(--ease), box-shadow .16s var(--ease); }
.kick-modal__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(12,147,166,0.4); }
.kick-modal__btn--ghost { color: #4a5a66; background: rgba(255,255,255,.85); border: 1px solid #d4dee6; box-shadow: none; }
.kick-modal__btn--ghost:hover { background: #f0f3f5; transform: translateY(-1px); box-shadow: none; }
.kick-modal__btns { display: flex; gap: 12px; justify-content: center; }
@keyframes kickFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kickIn { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: none; } }

/* 六模块网格：更小卡片 + 充足留白 */
.home__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;   /* 行高由卡片内容决定（默认卡 min-height 176，横幅卡可收缩为窄条） */
  gap: 20px;
  align-content: center;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(16px, 3vh, 34px) clamp(48px, 6vw, 96px) clamp(12px, 2vh, 24px);
}

/* 模块卡片：统一白玻璃质感 */
.module {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 22px;
  min-height: 176px;
  display: flex; flex-direction: column; gap: 12px;
  cursor: pointer; color: var(--ink);
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transform: translateY(18px); opacity: 0;
  animation: cardIn 0.7s var(--ease) forwards;
  animation-delay: var(--d, 0s);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
@keyframes cardIn { to { opacity: 1; transform: none; } }

.module::before { /* 顶部高光 */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
  pointer-events: none; opacity: 0.6;
}
.module:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(31, 140, 170, 0.18);
  border-color: rgba(31, 200, 224, 0.45);
}
.module:active { transform: translateY(-2px) scale(0.995); }
/* 课后习题：最后一条横贯整行的窄横幅卡 */
.module--banner {
  grid-column: 1 / -1;
  min-height: 0;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  padding: 16px 26px;
  background: linear-gradient(120deg, rgba(132,94,194,0.16), rgba(106,61,232,0.08)), var(--glass);
}
.module--banner .module__head { flex: 0 0 auto; align-items: center; gap: 12px; margin: 0; }
.module--banner .module__no { font-size: 24px; }
.module--banner .module__body { flex: 1 1 auto; min-width: 0; }
.module--banner .module__title { display: inline-block; margin: 0 10px 4px 0; vertical-align: middle; }
.module--banner .module__tag { margin-top: 0; vertical-align: middle; }
.module--banner .module__desc { margin-top: 3px; line-height: 1.5; }
.module--banner .module__cta { margin: 0 0 0 auto; flex: 0 0 auto; padding-top: 0; }

.module__icon {
  width: 50px; height: 50px; border-radius: 15px;
  display: grid; place-items: center;
  background: var(--grad);
  box-shadow: 0 8px 18px rgba(230, 160, 30, 0.3);
}
.module__icon svg { width: 26px; height: 26px; fill: none;
  stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18)); }

.module__head { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 1; }
.module__no {
  font-size: 40px; font-weight: 800; line-height: 0.8;
  color: rgba(20, 40, 60, 0.1); letter-spacing: -1px;
}

.module__body { position: relative; z-index: 1; }
.module__title { font-size: clamp(17px, 1.3vw, 21px); font-weight: 700; letter-spacing: 0.3px; }
.module__tag {
  display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; letter-spacing: 1px;
  background: rgba(31, 200, 224, 0.14); color: var(--c-cyan-deep);
}
.module__desc { margin-top: 10px; font-size: 13px; line-height: 1.65; color: var(--ink-soft); }

.module__cta {
  margin-top: auto; padding-top: 6px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--c-cyan-deep);
}
.module__cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.3s var(--ease); }
.module:hover .module__cta svg { transform: translateX(4px); }

.home__foot {
  text-align: center; padding: 6px 0 14px;
  font-size: 12px; color: var(--ink-soft); letter-spacing: 1px;
}
.home__foot .dot { margin: 0 8px; opacity: 0.5; }

/* ===================== 详情（占位） ===================== */
.detail { flex-direction: column; align-items: stretch; justify-content: stretch; padding: 0; }
.detail__topbar {
  display: flex; align-items: center;
  padding: 22px clamp(48px, 6vw, 96px);
}
.detail__title { flex: 0 0 auto; text-align: center; padding: 0 12px; font-size: 20px; font-weight: 700; }
.detail__body {
  flex: 1; display: flex; flex-direction: column;
  justify-content: safe center;   /* 视频列表等内容垂直居中，下方不留大块空白 */
  padding: 6px clamp(48px, 6vw, 96px) 4vh;
  overflow: auto;
}
.placeholder {
  margin: auto; max-width: 560px; padding: 48px 40px; border-radius: var(--radius-lg); text-align: center;
}
.placeholder__icon {
  width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 24px;
  display: grid; place-items: center;
  background: var(--grad);
  box-shadow: 0 12px 26px rgba(230, 160, 30, 0.32);
}
.placeholder__icon svg { width: 42px; height: 42px; fill: none;
  stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18)); }
.placeholder h2 { font-size: 26px; font-weight: 700; }
.placeholder p { margin-top: 12px; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
.placeholder__badge {
  margin-top: 22px; display: inline-block; font-size: 13px; font-weight: 600;
  padding: 8px 18px; border-radius: 999px; color: #fff;
  background: var(--grad);
  text-shadow: 0 1px 1px rgba(0,0,0,0.12);
}

/* ============ 第6讲 · 史海泛舟：圆桌数学家入口（一个窗口 + 一段介绍） ============ */
.rt-entry { margin: auto; width: 100%; max-width: 620px; text-align: center; }
.rt-entry__win {
  position: relative; display: flex; flex-direction: column; align-items: center;
  width: 100%; padding: 40px 36px 32px; border: none; border-radius: 26px;
  overflow: hidden; cursor: pointer; font: inherit; color: #eaf1ff;
  background:
    radial-gradient(120% 95% at 50% 0%, rgba(96, 165, 250, 0.3), transparent 62%),
    linear-gradient(160deg, #111c31 0%, #0a1120 58%, #070b14 100%);
  box-shadow: 0 26px 60px rgba(10, 18, 34, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.rt-entry__win::after {                 /* 会议室的那层细网格 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 197, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 197, 255, 0.07) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 78%);
}
.rt-entry__win:hover { transform: translateY(-3px); box-shadow: 0 34px 74px rgba(10, 18, 34, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.rt-entry__win:focus-visible { outline: 2px solid #7cb6ff; outline-offset: 4px; }
.rt-entry__glow {
  position: absolute; top: -46%; left: 50%; width: 460px; height: 460px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(circle, rgba(120, 180, 255, 0.26), transparent 66%);
}
.rt-entry__kicker {
  position: relative; font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(190, 214, 245, 0.72);
}
.rt-entry__mark {
  position: relative; margin: 20px 0 12px; width: 66px; height: 66px; border-radius: 20px;
  display: grid; place-items: center; font-size: 30px; font-weight: 700; color: #fff;
  background: linear-gradient(150deg, #3f7fe0, #6f4bd8);
  box-shadow: 0 12px 26px rgba(63, 127, 224, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.rt-entry__title { position: relative; font-size: 27px; font-weight: 800; letter-spacing: 0.06em; }
.rt-entry__sub {
  position: relative; margin-top: 8px; font-size: 11px; letter-spacing: 0.2em;
  color: rgba(174, 201, 236, 0.7);
}
.rt-entry__cue {
  position: relative; margin-top: 24px; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #0b1524;
  background: linear-gradient(135deg, #d8e9ff, #a9ccff);
  box-shadow: 0 10px 22px rgba(120, 170, 255, 0.3);
}
.rt-entry__cue svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.3s var(--ease); }
.rt-entry__win:hover .rt-entry__cue svg { transform: translateX(4px); }
.rt-entry__intro {
  margin: 24px auto 0; max-width: 560px; font-size: 14.5px; line-height: 1.9; color: var(--ink-soft);
}
@media (max-width: 640px) {
  .rt-entry__win { padding: 32px 22px 26px; border-radius: 22px; }
  .rt-entry__title { font-size: 23px; }
  .rt-entry__intro { font-size: 13.5px; }
}

/* ===================== 全屏切换按钮 ===================== */
.fs-toggle {
  position: fixed; bottom: 18px; left: 18px; z-index: 200;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), opacity 0.3s var(--ease);
}
.fs-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fs-toggle .icon-exit { display: none; }
.fs-toggle.is-active .icon-enter { display: none; }
.fs-toggle.is-active .icon-exit { display: block; }
.fs-toggle:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(31,140,170,0.2); }
.fs-toggle:active { transform: scale(0.95); }
/* 过渡动画期间隐藏，避免干扰 */
body.splash-on .fs-toggle { opacity: 0; pointer-events: none; transform: scale(0.8); }

/* 隐蔽的公司 logo：右上角，半透明；hover 显现；点击回主页 */
#home-logo { position: fixed; top: 14px; right: 16px; z-index: 200;
  width: 38px; height: 38px; padding: 4px; border: none; background: transparent; cursor: pointer;
  opacity: 0.22; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
#home-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
#home-logo:hover { opacity: 0.9; transform: scale(1.06); }
body.splash-on #home-logo { opacity: 0; pointer-events: none; }

/* ===================== 数学史：视频列表 ===================== */
.vlist { width: 100%; max-width: 1280px; margin: 0 auto; }
.vlist__intro { margin-bottom: 22px; }
.vlist__intro h2 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; }
.vlist__intro p {
  margin-top: 8px; color: var(--ink-soft);
  font-size: clamp(13px, 1.1vw, 16px); max-width: 760px; line-height: 1.7;
}

.vlist__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.vcard {
  position: relative; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--shadow-1); color: var(--ink);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.vcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(31, 140, 170, 0.2);
  border-color: rgba(31, 200, 224, 0.45);
}
.vcard:active { transform: translateY(-2px) scale(0.995); }
.vcard:focus-visible { outline: 3px solid rgba(31, 200, 224, 0.6); outline-offset: 2px; }

.vcard__media {
  position: relative; padding: 10px; background: transparent;
}
.vcard__cover {
  position: relative; width: 100%; aspect-ratio: 16 / 9; z-index: 0;
  background-size: cover; background-position: center;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(20, 40, 70, 0.12);
  transition: transform 0.5s var(--ease);
}
.vcard:hover .vcard__cover { transform: scale(1.03); }
.vcard__play { position: absolute; bottom: 14px; left: 14px; z-index: 2; }
.vcard__play span {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad);
  box-shadow: 0 6px 16px rgba(230, 160, 30, 0.4);
  transition: transform 0.3s var(--ease);
}
.vcard:hover .vcard__play span { transform: scale(1.1); }
.vcard__play svg { width: 24px; height: 24px; fill: #fff; margin-left: 3px; }
.vcard__no {
  display: inline-block; margin-bottom: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  padding: 4px 12px; border-radius: 999px; color: #fff;
  background: var(--grad);
  box-shadow: 0 5px 12px rgba(230, 160, 30, 0.32);
}

.vcard__body { padding: 10px 14px 12px; }
.vcard__title { font-size: 15px; font-weight: 700; }
.vcard__desc { margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===================== 视频全屏播放舞台 ===================== */
.vstage {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 400; background: #000;
  display: none; align-items: center; justify-content: center;
}
.vstage.is-open { display: flex; }
.vstage__video { width: 100%; height: 100%; background: #000; object-fit: contain; }
/* 播放器只留一个「返回」按钮：关闭视频、回到本讲的视频介绍页 */
.vstage__back {
  position: fixed; top: 18px; left: 18px; z-index: 6;
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 16px 0 12px; border-radius: 999px;
  cursor: pointer; color: #fff;
  background: rgba(18, 28, 38, 0.62);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
  font-size: 13.5px; font-weight: 600; line-height: 1;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.vstage__back:hover { transform: translateX(2px); background: rgba(255, 255, 255, 0.18); }
.vstage__back:active { transform: scale(0.97); }
.vstage__back svg { width: 19px; height: 19px; fill: none; stroke: #fff;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* 自绘控制条：默认全屏后原生的全屏键没用了，右端直接换成倍速 */
.vstage__ctl {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; align-items: center; gap: 10px;
  padding: 26px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.78));
  transition: opacity 0.25s var(--ease);
}
.vstage__ctl.is-idle { opacity: 0; pointer-events: none; }
.vstage__ctl-btn {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer;
  transition: background 0.18s var(--ease);
}
.vstage__ctl-btn:hover { background: rgba(255, 255, 255, 0.14); }
.vstage__ctl-btn:active { background: rgba(255, 255, 255, 0.22); }
.vstage__ctl-btn svg { width: 22px; height: 22px; fill: none; stroke: #fff;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#video-play .ico-pause { display: none; }
.vstage.is-playing #video-play .ico-play { display: none; }
.vstage.is-playing #video-play .ico-pause { display: block; }
#video-mute .ico-mute { display: none; }
#video-mute.is-muted .ico-vol { display: none; }
#video-mute.is-muted .ico-mute { display: block; }
.vstage__time {
  flex: none; color: rgba(255, 255, 255, 0.86); font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vstage__seek {
  position: relative; flex: 1 1 auto; min-width: 50px; height: 24px;
  display: flex; align-items: center; cursor: pointer; touch-action: none;
}
.vstage__seek::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 5px;
  transform: translateY(-50%); border-radius: 999px; background: rgba(255, 255, 255, 0.28);
}
.vstage__seek-fill {
  position: absolute; left: 0; top: 50%; height: 5px; width: 0;
  transform: translateY(-50%); border-radius: 999px; background: #fff; pointer-events: none;
}
.vstage__seek-fill::after {
  content: ""; position: absolute; right: -5px; top: 50%; width: 11px; height: 11px;
  transform: translateY(-50%); border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.vstage__speed { position: relative; flex: none; }
.vstage__speed-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; height: 32px; padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 8px;
  background: rgba(255, 255, 255, 0.08); color: #fff;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  cursor: pointer; transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}
.vstage__speed-btn:hover { background: rgba(255, 255, 255, 0.18); }
.vstage__speed-btn:active { transform: scale(0.96); }
.vstage__speed-menu {
  position: absolute; right: 0; bottom: calc(100% + 8px);
  display: flex; flex-direction: column; gap: 2px; min-width: 96px; padding: 5px;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(18, 28, 38, 0.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.36);
}
.vstage__speed-menu[hidden] { display: none; }
.vstage__speed-opt {
  padding: 7px 12px; border: 0; border-radius: 8px; text-align: left; cursor: pointer;
  background: transparent; color: rgba(255, 255, 255, 0.86);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.vstage__speed-opt:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.vstage__speed-opt.is-on { background: #fff; color: #12242e; }
/* 缓冲转圈：只在大盘还没就绪时出现 */
.vstage__loading {
  position: fixed; left: 50%; top: 50%; width: 38px; height: 38px;
  margin: -19px 0 0 -19px; z-index: 5; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.26); border-top-color: #fff;
  animation: vstageSpin 0.9s linear infinite;
}
.vstage__loading[hidden] { display: none; }
@keyframes vstageSpin { to { transform: rotate(360deg); } }
@media (max-width: 520px) {
  .vstage__ctl { gap: 6px; padding: 22px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .vstage__time { font-size: 11.5px; }
  .vstage__ctl-btn { width: 32px; height: 32px; }
  .vstage__ctl-btn svg { width: 20px; height: 20px; }
  .vstage__speed-btn { min-width: 42px; height: 30px; padding: 0 8px; font-size: 12px; }
  .vstage__speed-opt { font-size: 12px; padding: 6px 10px; }
}

/* ===================== 史海泛舟 · 视频介绍界面 ===================== */
.vhero {
  position: relative; width: 100%; max-width: 960px; margin: 0 auto;
  overflow: hidden; cursor: pointer; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: var(--shadow-1); color: var(--ink);
  transform: translateY(14px); opacity: 0;
  animation: cardIn 0.6s var(--ease) forwards;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.vhero:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: rgba(31, 200, 224, 0.45); }
.vhero:focus-visible { outline: 3px solid rgba(31, 200, 224, 0.5); outline-offset: 2px; }
.vhero__stage {
  padding: clamp(36px, 6vw, 64px) 24px clamp(28px, 4vw, 44px);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(31, 200, 224, 0.18), transparent 55%),
    radial-gradient(100% 80% at 50% 115%, rgba(230, 160, 30, 0.16), transparent 55%);
}
.vhero__kicker {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1.5px;
  padding: 5px 14px; border-radius: 999px; color: #fff; background: var(--grad);
  box-shadow: 0 5px 12px rgba(230, 160, 30, 0.32); margin-bottom: 18px;
}
.vhero__title { font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: 1px; margin: 0 0 10px; }
.vhero__lead { font-size: clamp(14px, 1.4vw, 18px); color: var(--ink-soft); margin: 0 0 26px; }
.vhero__play {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 800; color: #fff;
  padding: 12px 26px; border-radius: 999px; background: var(--grad);
  box-shadow: 0 10px 24px rgba(230, 160, 30, 0.4);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.vhero:hover .vhero__play { transform: scale(1.05); box-shadow: 0 14px 30px rgba(230, 160, 30, 0.5); }
.vhero__play span {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, 0.22);
}
.vhero__play svg { width: 18px; height: 18px; fill: #fff; margin-left: 2px; }
.vhero__body { padding: 22px 26px 30px; text-align: left; border-top: 1px solid var(--line); }
.vhero__body p { margin: 0; font-size: 15px; line-height: 1.9; color: var(--ink-soft); }

/* ===================== 知识图谱（主程序内直接渲染静态 SVG） ===================== */
.graph-view { flex-direction: column; align-items: stretch; justify-content: stretch; padding: 0; }
.graph-body {
  flex: 1; min-height: 0; display: flex; flex-direction: row;
  gap: 18px; padding: 6px clamp(24px, 3vw, 56px) 3vh;
}
.graph-stage { position: relative; flex: 1 1 64%; min-width: 0; height: 100%; display: flex; flex-direction: column; gap: 8px; }
.kg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; flex: none; }
#kg-svg { width: 100%; height: auto; flex: 1 1 auto; min-height: 0; display: block; }

/* —— SVG 节点 —— */
.kg-node { cursor: pointer; transition: opacity 0.3s var(--ease); }
.kg-node rect {
  fill: rgba(255, 255, 255, 0.9); stroke: var(--line); stroke-width: 1.5;
  transition: stroke 0.3s var(--ease), fill 0.3s var(--ease);
}
.kg-node:hover rect { stroke: var(--cat); }
.kg-node__tag { font-size: 11px; font-weight: 700; fill: var(--cat); letter-spacing: 1px; }
.kg-node__title { font-size: 14px; font-weight: 700; fill: var(--ink); }
.kg-node__sub { font-size: 11px; fill: var(--ink-soft); }
/* 本节课核心（放大 + 青黄渐变） */
.kg-node--hub rect { fill: url(#kgGradRoot); opacity: 0.95; }
.kg-node--hub .kg-node__tag { fill: rgba(255, 255, 255, 0.92); }
.kg-node--hub .kg-node__title--hub { fill: #fff; font-size: 24px; }
.kg-node--hub .kg-node__sub { fill: rgba(255, 255, 255, 0.92); }
/* 外部章节（前置）/ 本课知识点：玻璃底 + 章节色描边；前置加浅青底以示区分 */
.kg-node--external rect { fill: rgba(31, 200, 224, 0.10); stroke: var(--cat); }
.kg-node--internal rect { stroke: var(--cat); }
.kg-node--external .kg-node__tag, .kg-node--internal .kg-node__tag { fill: var(--cat); }
/* 核心思路：浅黄虚框（方法论提炼，区别于具体知识点） */
.kg-node--summary rect { fill: rgba(255, 200, 61, 0.16); stroke: var(--cat); stroke-width: 1.8; stroke-dasharray: 6 4; }
.kg-node--summary .kg-node__tag { fill: var(--cat); }
.kg-node--summary .kg-node__title { fill: var(--c-yellow-deep); }
.kg-node--summary .kg-node__sub { fill: var(--c-yellow-deep); opacity: 0.85; }
.kg-node.focused rect { stroke: var(--cat); stroke-width: 3; filter: drop-shadow(0 0 10px var(--cat)); }
.kg-node.dimmed { opacity: 0.25; }
.kg-node.mastered rect { stroke: var(--c-cyan); stroke-width: 3.5; }
.kg-node.wrong rect { stroke: #e5484d; stroke-width: 3.5; }

/* —— SVG 连线 —— */
.kg-link { cursor: pointer; }
.kg-link--hier path { stroke: #aeb9cc; stroke-width: 1.5; fill: none; pointer-events: none; }
.kg-link--rel { transition: opacity 0.3s var(--ease); }
.kg-link--rel .kg-link__path {
  stroke: #9d6fe0; stroke-width: 2; fill: none; opacity: 0.85;
  transition: stroke 0.3s var(--ease), stroke-width 0.3s var(--ease);
}
.kg-link--rel:hover .kg-link__path { stroke-width: 3; opacity: 1; }
.kg-link.highlight .kg-link__path { stroke: var(--c-yellow); stroke-width: 3; opacity: 1; }
.kg-link.dimmed { opacity: 0.18; }
.kg-rlabel {
  font-size: 12px; fill: #4a4a52; font-weight: 600; cursor: pointer;
  paint-order: stroke; stroke: #fff; stroke-width: 5; stroke-linejoin: round;
}

/* —— 图例 —— */
.graph-legend {
  position: static; flex: none; display: flex; align-items: center;
  gap: 10px; font-size: 11px; color: var(--ink-soft);
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 14px;
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.leg-ch { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.leg-dot { width: 9px; height: 9px; border-radius: 50%; }
.leg-divider { width: 1px; height: 14px; background: rgba(20, 40, 60, 0.15); }
.leg-line { display: inline-block; width: 22px; vertical-align: middle; }
.leg-line--hier { border-top: 2px solid #aeb9cc; }
.leg-line--rel { border-top: 2px solid #9d6fe0; }
.leg-tip { color: var(--c-cyan-deep); font-weight: 600; }

/* —— 图谱标题说明 —— */
.kg-caption {
  position: static; flex: 1 1 auto; font-size: 13px; color: var(--ink);
  background: var(--glass); border: 1px solid var(--line); border-radius: 12px;
  padding: 7px 14px;
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.kg-caption strong { color: var(--c-cyan-deep); }

/* —— 核心节点：本课知识点列表 —— */
.kg-topic { margin-top: 10px; padding: 8px 12px; border-left: 3px solid var(--c-cyan); background: rgba(31, 200, 224, 0.06); border-radius: 0 10px 10px 0; }
.kg-topic__title { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0; }
.kg-topic__points { font-size: 12.5px; color: var(--ink-soft); line-height: 1.8; margin: 3px 0 0; }

/* —— 图谱下方详情面板 —— */
.graph-panel { flex: 1 1 36%; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; border-radius: var(--radius-lg); padding: 18px; }
.kg-relinfo-empty { font-size: 14px; color: var(--ink-soft); text-align: center; padding: 22px 10px; }
.kg-relinfo-empty strong { color: var(--c-cyan-deep); }

/* —— 详情卡 —— */
.kg-card {
  background: rgba(255, 255, 255, 0.62); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-1);
}
.kg-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.kg-card__badge {
  font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 3px 10px; border-radius: 999px;
  color: var(--cat, var(--c-cyan-deep)); background: rgba(255, 255, 255, 0.55);
  background: color-mix(in srgb, var(--cat, #1fc8e0) 14%, transparent);
}
.kg-card__title { flex: 1; font-size: clamp(17px, 1.4vw, 20px); font-weight: 700; color: var(--ink); }
.kg-card__state { font-size: 12px; font-weight: 700; white-space: nowrap; }
.kg-card__state--ok { color: var(--c-cyan-deep); }
.kg-card__state--bad { color: #e5484d; }
.kg-card__body { display: flex; flex-direction: column; }
.kg-sec { margin: 10px 0; }
.kg-sec__label { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--c-cyan-deep); }
.kg-sec__text, .kg-q { line-height: 1.85; font-size: 14.5px; color: var(--ink); margin: 6px 0 0; }
.kg-sec__branches { font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; }
.kg-sec__list { margin: 8px 0 0; padding-left: 22px; }
.kg-sec__list li { line-height: 1.8; color: var(--ink); }
.kg-figure {
  margin-top: 10px; padding: 10px 14px; border: 1px dashed rgba(31, 200, 224, 0.4);
  border-radius: 12px; background: rgba(31, 200, 224, 0.06); font-size: 15px; color: var(--ink);
  overflow-x: auto;
}
/* —— 结构化讲解（手册「小贴士」样式：小标题 + 说明） —— */
.kg-notes { display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }
.kg-note {
  padding: 9px 13px; border-left: 3px solid var(--cat, #1fc8e0);
  background: rgba(31, 200, 224, 0.05); border-radius: 0 10px 10px 0;
}
.kg-note__h { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--cat, var(--c-cyan-deep)); margin-right: 8px; }
.kg-note__t { display: inline; margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--ink); }
.kg-q { font-weight: 600; }

/* —— 习题 —— */
.kg-opts { display: grid; gap: 8px; margin-top: 10px; }
.kg-opt {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255, 255, 255, 0.55); cursor: pointer; color: var(--ink); font-family: inherit;
  transition: all 0.25s var(--ease);
}
.kg-opt:hover { border-color: rgba(31, 200, 224, 0.5); background: rgba(255, 255, 255, 0.75); }
.kg-opt.is-selected { border-color: var(--c-cyan); background: rgba(31, 200, 224, 0.12); box-shadow: 0 6px 16px rgba(31, 200, 224, 0.18); }
.kg-opt:disabled { opacity: 0.6; cursor: default; }
.kg-opt__letter {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 13px; background: rgba(20, 40, 60, 0.08); color: var(--ink-soft);
}
.kg-opt.is-selected .kg-opt__letter { background: var(--grad); color: #fff; }
.kg-submit { height: 44px; margin-top: 12px; }
.kg-feedback { margin-top: 10px; }
.kg-ok { color: var(--c-cyan-deep); font-weight: 700; }
.kg-err { color: #e5484d; font-weight: 700; }
.kg-solution {
  margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--c-cyan);
  background: rgba(31, 200, 224, 0.08); border-radius: 0 10px 10px 0;
}
.kg-solution__label { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--c-cyan-deep); }
.kg-solution p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.8; color: var(--ink); }

/* —— 关联 chips —— */
.kg-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.kg-chip {
  font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.55); color: var(--ink);
  cursor: pointer; transition: all 0.25s var(--ease);
}
.kg-chip:hover { border-color: var(--c-cyan); background: rgba(31, 200, 224, 0.12); color: var(--c-cyan-deep); }
.kg-chip--pre { border-color: rgba(181, 116, 0, 0.35); color: var(--c-yellow-deep); }
.kg-chip--pre:hover { border-color: var(--c-yellow); background: rgba(255, 200, 61, 0.15); color: var(--c-yellow-deep); }

/* —— 连线关系卡 —— */
.kg-rel__dir { font-size: 15px; font-weight: 700; color: var(--ink); }
.kg-rel__label { font-size: 14px; color: var(--ink); margin: 8px 0 0; }
.kg-rel__label strong { color: var(--c-cyan-deep); }
.kg-rel__hint { font-size: 13px; color: var(--ink-soft); line-height: 1.7; margin: 8px 0 0; }

@media (max-width: 980px) {
  .graph-body { flex-direction: column; gap: 14px; }
  .graph-stage { flex: none; height: 48vh; min-height: 360px; }
  .graph-panel { flex: 1 1 auto; }
}
@media (max-width: 720px) {
  .graph-body { padding-left: 16px; padding-right: 16px; }
  .graph-legend { gap: 6px; padding: 4px 10px; }
  .leg-tip { display: none; }
}
.experiment-view {
  flex-direction: column; align-items: stretch; justify-content: stretch;
  padding: 0;
}
.exp-topbar {
  display: flex; align-items: center;
  padding: 18px clamp(48px, 6vw, 96px) 10px;
}
.exp-topbar__title { flex: 0 0 auto; text-align: center; padding: 0 12px; font-size: clamp(16px, 1.4vw, 20px); font-weight: 700; }
.experiment-view__frame {
  flex: 1; width: 100%; border: 0; margin: 0;
  background: transparent; /* 露出主程序青·黄极光背景 */
}

/* ===================== AI 智能批改讲解 ===================== */
.ai-view { flex-direction: column; align-items: stretch; justify-content: stretch; padding: 0; }
.ai-topbar {
  display: flex; align-items: center;
  padding: 18px clamp(40px, 5vw, 96px) 8px;
}
.ai-topbar__title { flex: 0 0 auto; text-align: center; padding: 0 12px; font-size: clamp(16px, 1.4vw, 20px); font-weight: 700; }
/* 顶部导航：左右两栏对称，保证标题居中 */
.detail__topbar .tb-left, .exp-topbar .tb-left, .ai-topbar .tb-left { flex: 1 1 0; display: flex; align-items: center; gap: 10px; min-width: 0; }
.detail__topbar .tb-right, .exp-topbar .tb-right, .ai-topbar .tb-right { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.nav-btn { min-width: 0; background: linear-gradient(135deg, #0C93A6, #22B8CE); color: #fff; border-color: transparent; box-shadow: 0 6px 14px rgba(12,147,166,0.22); }
.nav-btn svg { width: 18px; height: 18px; }
.nav-btn:hover { transform: translateY(-2px); }
.nav-btn--home { background: linear-gradient(135deg, #FFC83D, #1FC8E0); }
/* ===== 课后习题模块 ===== */
.ex-card { max-width: 640px; margin: 0 auto; padding: 34px 36px; border-radius: var(--radius-lg); }
.ex-card__badge { display: inline-block; font-size: 13px; font-weight: 800; padding: 5px 14px; border-radius: 999px; color: #fff; background: linear-gradient(135deg,#845EC2,#6A3DE8); margin-bottom: 14px; }
.ex-card h2 { font-size: clamp(22px, 2vw, 28px); font-weight: 800; margin: 0 0 8px; }
.ex-card__lead { color: var(--ink-soft); margin: 0 0 18px; }
.ex-steps { margin: 0; padding-left: 22px; display: grid; gap: 12px; }
.ex-steps li { line-height: 1.7; color: var(--ink); }
.ex-steps b, .ex-steps strong { color: #6A3DE8; }
.ex-download { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; }
.btn--dl { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; padding: 12px 22px; }
.btn--dl svg { width: 20px; height: 20px; }
.ex-download__hint { margin: 12px 0 0; font-size: 12px; color: var(--ink-soft); }
@media (max-width: 620px) { .ex-card { padding: 24px 20px; } }
/* ===== 实验选择（集合·数学实验） ===== */
.exppick { flex-direction: column; align-items: stretch; justify-content: stretch; padding: 0; }
.exppick__body { flex: 1; min-height: 0; overflow: auto; padding: clamp(20px, 4vh, 48px) clamp(20px, 6vw, 96px) 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.exppick__headline { font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; margin: 0 0 6px; }
.exppick__sub { color: var(--ink-soft); margin: 0 0 26px; font-size: clamp(13px, 1.2vw, 15px); }
.exppick__grid { display: grid; grid-template-columns: repeat(2, minmax(240px, 320px)); gap: 20px; align-items: stretch; }
@media (max-width: 720px) { .exppick__grid { grid-template-columns: 1fr; } }
.exp-pick {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  padding: 26px 24px; cursor: pointer; text-align: center; color: var(--ink);
  background: var(--glass); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
  transform: translateY(18px); opacity: 0; animation: cardIn 0.7s var(--ease) forwards; animation-delay: var(--d, 0s);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.exp-pick:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.exp-pick__no { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1px; padding: 4px 12px; border-radius: 999px; color: #fff; background: linear-gradient(135deg,#845EC2,#6A3DE8); margin-bottom: 14px; }
.exp-pick__icon { width: 72px; height: 60px; margin: 0 auto 12px; color: #6A3DE8; }
.exp-pick__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; }
.exp-pick__title { font-size: clamp(17px, 1.5vw, 21px); font-weight: 800; margin: 0 0 8px; }
.exp-pick__desc { font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 16px; }
.exp-pick__cta { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--c-cyan-deep); }
.exp-pick__cta::after { content: "→"; }
/* ===== AI精炼：题型列表（集合） ===== */
.apt { width: 100%; max-width: 1320px; margin: 0 auto; }
.apt__intro { margin: 6px 0 22px; }
.apt__kicker { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: 1px; padding: 5px 14px; border-radius: 999px; color: #fff; background: linear-gradient(135deg,#0C93A6,#22B8CE); margin-bottom: 14px; }
.apt__intro h2 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; margin: 0; }
.apt__intro p { color: var(--ink-soft); font-size: 15px; line-height: 1.7; margin: 0; }
.apt__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* 6 个题型（第2讲）：三列两行，避免四列时第二行只剩两个的空缺 */
.apt__grid--six { grid-template-columns: repeat(3, 1fr); }
/* 只有一个题型（第3讲 层级三 · 拔高培优）：整块收窄居中，卡片本身放大 ——
   四列网格里只放一张卡会缩在左上角，旁边一大片空。 */
.apt--one .apt__intro { text-align: center; }
.apt--one .apt__grid { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin: 0 auto; }
.apt--one .apt-card { padding: 32px 34px 28px; border-radius: 26px; }
.apt--one .apt__no, .apt--one .apt__tag { font-size: 13px; padding: 5px 14px; }
.apt--one .apt__title { font-size: 25px; margin-bottom: 16px; }
.apt--one .apt__desc { font-size: 14.5px; }
.apt--one .apt__lecture { padding: 9px 14px; margin-bottom: 14px; }
.apt--one .apt__lecture__label, .apt--one .apt__lecture__nos { font-size: 13.5px; }
.apt--one .apt__chip { font-size: 13px; padding: 6px 12px; }
.apt--one .apt__chip svg { width: 14px; height: 14px; }
.apt--one .apt__cta { font-size: 16px; }
.apt--one .apt-card::after { font-size: 84px; }
/* 三个层级（第3讲精讲精练）改用专属的「阶梯递进」面板样式，见文件末 .c3st-*  */

/* 题型卡片：玻璃质感 + 顶部渐变饰条 + 题号水印 */
.apt-card {
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; padding: 24px 22px 18px; color: var(--ink);
  border: 1px solid rgba(255,255,255,0.9); border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(238,247,251,0.82));
  box-shadow: 0 8px 26px rgba(20,40,70,0.08), 0 1px 0 rgba(255,255,255,0.65) inset;
  /* 只做位移渐入、不做整卡透明渐变：避免卡片进场那一瞬整体发灰 */
  transform: translateY(18px);
  animation: cardIn 0.5s var(--ease) forwards; animation-delay: var(--d, 0s);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.apt-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(20,40,70,0.16); border-color: rgba(12,147,166,0.4); }
.apt-card:focus-visible { outline: 3px solid rgba(12,147,166,0.5); outline-offset: 2px; }
.apt-card__accent { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg,#0C93A6,#22B8CE,#3A7BD5); }
.apt-card::after { content: attr(data-no); position: absolute; top: 12px; right: 14px; font-size: 64px; font-weight: 900; line-height: 1; color: rgba(12,147,166,0.06); pointer-events: none; user-select: none; }
.apt-card__content { display: flex; flex-direction: column; flex: 1; }
.apt__top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; min-width: 0; }
.apt__no { display: inline-block; flex: none; font-size: 12px; font-weight: 800; letter-spacing: 1px; padding: 4px 12px; border-radius: 999px; color: #fff; background: linear-gradient(135deg,#0C93A6,#22B8CE); margin: 0; }
.apt__tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; color: #0C93A6; background: rgba(12,147,166,0.09); margin: 0; }
.apt__title { font-size: clamp(16px, 1.5vw, 19px); font-weight: 800; margin: 0 0 14px; }
.apt__desc { font-size: 13px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 16px; }

/* 题号信息条 */
.apt__lecture { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; background: rgba(12,147,166,0.05); border: 1px dashed rgba(12,147,166,0.22); margin-bottom: 12px; }
.apt__lecture__dot { width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg,#0C93A6,#3A7BD5); flex: none; }
.apt__lecture__label { font-size: 12px; font-weight: 800; color: #0C93A6; flex: none; }
.apt__lecture__nos { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.4; }

/* 特色亮点 chips */
.apt__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.apt__chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; border: 1px solid transparent; }
.apt__chip svg { width: 13px; height: 13px; flex: none; }
.apt__chip--video { color: #E23A6E; background: rgba(226,58,110,0.09); border-color: rgba(226,58,110,0.26); }
.apt__chip--video svg { fill: currentColor; }
.apt__chip--exp { color: #6C5CE7; background: rgba(108,92,231,0.09); border-color: rgba(108,92,231,0.26); }
.apt__chip--exp svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.apt__chip--multi { color: #E0781F; background: rgba(224,120,31,0.10); border-color: rgba(224,120,31,0.28); }
.apt__chip--onetype { color: #1B8B58; background: rgba(27,139,88,0.10); border-color: rgba(27,139,88,0.28); }
.apt__chip--multi svg, .apt__chip--onetype svg { fill: currentColor; }
.apt__chip--todo { color: #8a97a0; background: rgba(138,151,160,0.10); border-color: rgba(138,151,160,0.26); }

/* CTA */
.apt__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: var(--c-cyan-deep); margin-top: auto; }
.apt__cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); }
.apt-card:hover .apt__cta svg { transform: translateX(4px); }
@media (max-width: 1100px) { .apt__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .apt__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .apt__grid { grid-template-columns: 1fr; } }
/* ===== AI精炼：题型详情页（标题醒目 + 一屏看完不滚动） ===== */
/* 题型介绍页：一整张卡片就是"框"，内容在左、动作在右，都在框里。
   .aitd 用 flex:1 0 auto 撑满可用高度，是为了让内容从顶上开始排 ——
   .detail__body 是 justify-content:center，不撑满的话整块会飘在屏幕中间，上下各留一大片。
   卡片本身仍按内容取自然高度：内容少时下面留白属于页面（像"内容就这么多"），
   比硬把卡片拉满、内容孤零零挂在卡片上半部要自然。 */
.aitd { width: 100%; max-width: 1240px; margin: 0 auto; flex: 1 0 auto; display: flex; flex-direction: column; gap: 12px; }
/* 页头压成一行半：kicker 与标题同行，只有导语单独一行（原来三行居中，白占 30px） */
.aitd__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; text-align: left; }
.aitd__head__kicker { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; color: #0C93A6; }
.aitd__head h2 { font-size: 21px; font-weight: 800; margin: 0; line-height: 1.25; }
.aitd__head__lead { flex: 1 1 100%; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); margin: 0; max-width: none; }
/* 主卡片：内容通栏铺满，入口按钮在卡片内底部一行 */
.aitd-card {
  position: relative; padding: 14px 16px; border-radius: var(--radius-lg);
  background: var(--glass); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.aitd-card__content { min-width: 0; }
/* 入口按钮在卡片底部一行（见本文件 .aitd-foot / .aitd-act） */
/* 横向核心概念（B 类：左右铺开，无需滚动）——列数按卡片数量自适应，不留孤位 */
/* 卡片网格：用 flex-wrap 而不是固定列数的 grid。
   固定 3 列时 5 张卡片会排成 3+2 —— 末行空出一整格（就是截图里那块大空白）。
   flex 让每行的卡片自动平分宽度：末行只剩 2 张就各占一半，永远铺满。 */
.aitd-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.aitd-grid .aitd-cell { flex: 1 1 calc(33.333% - 8px); }
.aitd-grid--1 .aitd-cell { flex-basis: 100%; }
.aitd-grid--2 .aitd-cell { flex-basis: calc(50% - 6px); }
.aitd-grid--3 .aitd-cell { flex-basis: calc(33.333% - 8px); }
.aitd-grid--4 .aitd-cell { flex-basis: calc(25% - 9px); }
.aitd-cell {
  display: flex; flex-direction: column; gap: 9px; min-width: 0;
  padding: 13px 14px 14px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(245,250,251,0.55));
  border: 1px solid rgba(12,147,166,0.16);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.aitd-cell:hover { transform: translateY(-2px); border-color: rgba(12,147,166,0.34); box-shadow: 0 12px 26px rgba(12,147,166,0.14); }
.aitd-cell__head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.aitd-cell__no { flex: 0 0 auto; width: 27px; height: 27px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#0C93A6,#22B8CE); box-shadow: 0 4px 10px rgba(12,147,166,0.28); }
.aitd-cell h4 { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 800; margin: 0; line-height: 1.35; }
/* 描述不参与拉伸、公式块也不再靠 margin-top:auto 顶到底 ——
   原来这两条一起把空白挤在"描述"和"公式"之间：卡片被同行拉高后，中间就空一大块
   （截图里那几张就是）。现在内容从上往下紧排，多出来的高度留在卡片底部，观感正常。 */
.aitd-cell p { flex: 0 0 auto; font-size: 13px; line-height: 1.65; color: var(--ink-soft); margin: 0; }
.aitd-cell__sym { padding: 8px 11px; border-radius: 10px; font-size: 13px; font-weight: 700; line-height: 1.6; color: #0C93A6; background: rgba(12,147,166,0.09); border: 1px solid rgba(12,147,166,0.2); overflow-wrap: anywhere; }
/* 表格（概念/自然语言/符号语言/Venn图）· 圆角容器 + 表头 + 斑马纹，长表格更易读 */
.aitd-tbl { overflow-x: auto; border: 1px solid rgba(12,147,166,0.16); border-radius: 14px; background: rgba(255,255,255,0.6); }
.aitd-tbl table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.aitd-tbl th, .aitd-tbl td { padding: 9px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid rgba(12,147,166,0.1); }
.aitd-tbl thead th { font-size: 12px; font-weight: 800; letter-spacing: 0.5px; color: #0C93A6; white-space: nowrap; background: rgba(12,147,166,0.08); border-bottom: 1px solid rgba(12,147,166,0.2); }
.aitd-tbl tbody tr:nth-child(even) { background: rgba(12,147,166,0.035); }
.aitd-tbl tbody tr:hover { background: rgba(12,147,166,0.08); }
.aitd-tbl tbody tr:last-child th, .aitd-tbl tbody tr:last-child td { border-bottom: none; }
.aitd-tbl__concept { font-weight: 800; color: #0C93A6; min-width: 96px; }
.aitd-tbl__nl { color: var(--ink-soft); line-height: 1.55; min-width: 170px; }
.aitd-tbl__sym { font-weight: 800; min-width: 190px; font-size: 14.5px; color: var(--ink); }
.aitd-tbl__venn { text-align: center; width: 150px; }
/* 公式（容斥原理）· 放大但紧凑 */
.aitd-formulas { display: flex; flex-direction: column; gap: 12px; }
.aitd-formula__intro { font-size: 14px; line-height: 1.7; color: var(--ink-soft); margin: 0; }
.aitd-formulas__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.aitd-formula { padding: 14px 16px; border-radius: 13px; background: rgba(12,147,166,0.06); border: 1px solid rgba(12,147,166,0.18); min-width: 0; }
/* display 多行公式（aligned）整行显示 + 居中舒展，避免挤在半列 */
.aitd-formula--full { grid-column: 1 / -1; }
.aitd-formula--full .aitd-formula__sym { text-align: center; padding-top: 4px; }
.aitd-formula--full .aitd-formula__sym mjx-container { display: block; width: 100%; }
.aitd-formula__label { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.5px; color: #0C93A6; padding: 3px 10px; border-radius: 7px; background: rgba(12,147,166,0.12); margin-bottom: 8px; }
.aitd-formula__pre { font-size: 13px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 8px; }
.aitd-formula__sym { font-size: 16px; font-weight: 800; line-height: 2.1; color: var(--ink); word-break: break-word; overflow-wrap: anywhere; }
/* 补充说明：突出区域（紧凑） */
.aitd-extra { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(12,147,166,0.06); border: 1px solid rgba(12,147,166,0.16); }
.aitd-extra__label { flex: 0 0 auto; display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.5px; color: #0C93A6; padding: 3px 10px; border-radius: 999px; background: rgba(12,147,166,0.12); }
.aitd-extra__items { display: flex; flex-direction: column; gap: 6px; }
.aitd-extra__item { font-size: 13px; line-height: 1.6; color: var(--ink); position: relative; padding-left: 14px; }
.aitd-extra__item::before { content: "·"; position: absolute; left: 4px; top: 0; color: #0C93A6; font-weight: 800; }
/* 详情页「基本讲解 / 延伸理解」两个板块（各带视频入口） */
.aitd-sections { display: flex; flex-direction: column; gap: 10px; }
.aitd-section { padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(12,147,166,0.16);
  background: linear-gradient(170deg, rgba(255,255,255,.72), rgba(244,250,251,.5)); }
/* 板块头部现在只剩一枚标签，压到最矮 —— 原来那行右侧挂着"视频讲解"大按钮，
   纯为按钮占了一行；按钮已挪去右侧动作栏。 */
.aitd-section__head { display: flex; align-items: center; gap: 12px;
  padding-bottom: 6px; margin-bottom: 9px; border-bottom: 1px solid rgba(12,147,166,0.14); }
.aitd-section__badge { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .5px; color: #0C93A6;
  background: rgba(12,147,166,.10); padding: 4px 12px; border-radius: 999px; }
.aitd-section__body { min-width: 0; }
/* 视频讲解：默认全屏播放 */
.aitd-video-h { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 220; background: #000; }
.aitd-video-h__stage { position: relative; width: 100%; height: 100%; }
.aitd-video-h__stage video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.aitd-video-h__close { position: absolute; top: 16px; right: 18px; z-index: 2; width: 42px; height: 42px;
  border: none; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; backdrop-filter: blur(4px); }
.aitd-video-h__close:hover { background: rgba(255,255,255,.34); }
/* 无介绍（A 类） */
.aitd-empty { display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 90px; padding: 18px 18px; border-radius: 12px; background: rgba(12,147,166,0.05); border: 1px dashed var(--line); }
.aitd-empty__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg,#0C93A6,#22B8CE); box-shadow: 0 8px 18px rgba(12,147,166,0.32); }
.aitd-empty__icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aitd-empty p { font-size: 13px; line-height: 1.6; color: var(--ink-soft); max-width: 440px; margin: 0; }
/* ===== 底部入口行 =====
   视频讲解 / 数学实验 / 开始练习排成卡片底部的一行，宽度由 flex 平分：
   只有一个入口时自动铺满整行，两三个则等分。三个按钮长相完全一致（图标 + 文案
   + 副文案），只靠颜色区分 —— 绿=开始练习、玫红=视频讲解、蓝粉呼吸=数学实验。 */
.aitd-foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.aitd-act {
  position: relative; overflow: hidden; flex: 1 1 0; min-width: 176px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 18px; border: none; border-radius: 14px; cursor: pointer;
  font-family: inherit; color: #fff;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.aitd-act > * { position: relative; }        /* 内容压在呼吸亮点之上 */
.aitd-act__icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.aitd-act__icon svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.aitd-act__label { font-size: 15.5px; font-weight: 800; letter-spacing: .3px; text-shadow: 0 1px 3px rgba(0,0,0,.18); }
.aitd-act__sub { flex: 0 0 auto; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,.9); color: #1F3B4D; }
/* 开始练习：亮绿实心 */
.aitd-act--go { background: linear-gradient(150deg, #0FC46E, #4BE59E); box-shadow: 0 10px 24px rgba(16,196,110,.32); }
.aitd-act--go .aitd-act__sub { color: #07663A; }
.aitd-act--go:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(16,196,110,.45); }
/* 视频讲解：玫红 */
.aitd-act--video { background: linear-gradient(150deg, #F5618C, #FF8A6B); box-shadow: 0 10px 24px rgba(245,97,140,.32); }
.aitd-act--video:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(245,97,140,.46); }
/* 数学实验：蓝粉呼吸 + 内部亮点（保留原来那颗动态方块的味道，一眼看出"这里在动"） */
.aitd-act--exp { background-color: #2563EB; box-shadow: 0 10px 24px rgba(37,99,235,.5);
  animation: expBreath 2.4s ease-in-out infinite, expGlow 2.4s ease-in-out infinite; }
.aitd-act--exp::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 62%);
  animation: expSpot 2.4s ease-in-out infinite; }
.aitd-act--exp:hover { box-shadow: 0 20px 44px rgba(245,97,140,.72); }
/* 做过了就安静下来（不再呼吸），并换成绿色表示完成 */
.aitd-act--exp.is-done { animation: none; background-color: transparent;
  background: linear-gradient(150deg, #0FC46E, #4BE59E); box-shadow: 0 10px 24px rgba(16,196,110,.32); }
.aitd-act--exp.is-done::before { content: none; }
@keyframes expBreath { 0%, 100% { background-color: #2563EB; } 50% { background-color: #F5618C; } }
@keyframes expSpot { 0%, 100% { opacity: .14; } 50% { opacity: .55; } }
@keyframes expGlow { 0%, 100% { transform: translateY(0); box-shadow: 0 10px 24px rgba(37,99,235,.5); } 50% { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(245,97,140,.72); } }
@media (prefers-reduced-motion: reduce) {
  .aitd-act--exp { animation-duration: 4.8s; }
  .aitd-act--exp::before { animation-duration: 4.8s; }
}
/* 窄屏：每个入口各占一行，不再挤成小格子 */
@media (max-width: 720px) {
  .aitd-act { flex-basis: 100%; }
}
@media (max-width: 1000px) {
  .aitd-grid--3 .aitd-cell, .aitd-grid--4 .aitd-cell { flex-basis: calc(50% - 6px); }
}
@media (max-width: 640px) {
  .aitd-grid .aitd-cell { flex-basis: 100%; }
  .aitd-formulas__grid { grid-template-columns: minmax(0, 1fr); }
}
/* ===== AI精炼：练习界面（一次一题 · 试卷样式） ===== */
/* 两栏：左边题卡（题干 + 选项/作答），右边一条竖栏（工具 → 实验 → 空档 → 翻页）。
   两栏都按行高拉伸（不写 align-self:start）—— 这样不管题卡高还是右栏高
   （有「互动实验」时右栏会更高），两边下沿永远齐平：翻页贴底 = 题卡下沿。 */
.pr { width: 100%; max-width: 1120px; margin: 0 auto; }
.pr__head { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 14px; }
.pr__main { display: grid; grid-template-columns: minmax(0, 1fr) 208px; gap: 16px; }
.pr__side { min-width: 0; display: flex; flex-direction: column; }
.pr__badge { font-size: 13px; font-weight: 800; color: #fff; padding: 5px 14px; border-radius: 999px; background: linear-gradient(135deg,#0C93A6,#22B8CE); white-space: nowrap; }
.pr__badge--multi { background: linear-gradient(135deg,#8B5CF6,#A78BFA); }
.pr__progress { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.pr__paper { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: clamp(22px,3vw,34px) clamp(20px,3vw,38px); }
.pr__stem { font-size: clamp(16px,1.9vw,20px); font-weight: 600; line-height: 1.9; color: var(--ink); }
/* 解题小贴士：题干下方右侧一枚小按钮（不占题干位置、不遮挡作答区），点开是绿色大弹窗 */
.pr__tiprow { display: flex; justify-content: flex-end; margin-top: 14px; }
.pr__tipbtn { display: inline-flex; align-items: center; gap: 9px; padding: 6px 15px 6px 6px;
  border: 1px solid rgba(18,160,107,0.35); border-radius: 999px; background: rgba(18,160,107,0.08);
  color: #0d7a52; font-size: 13px; font-weight: 800; cursor: pointer;
  transition: background 0.22s, border-color 0.22s, transform 0.22s, box-shadow 0.22s; }
.pr__tipbtn:hover { background: rgba(18,160,107,0.15); border-color: rgba(18,160,107,0.55);
  transform: translateY(-1px); box-shadow: 0 6px 16px rgba(18,160,107,0.18); }
.pr__tipbtn__ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg,#12A06B,#3FD08F); }
.pr__tipbtn__ic svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.pr__tipbtn__txt { white-space: nowrap; }
.pr__opts { margin-top: 22px; display: grid; gap: 12px; }
.pr__opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe; text-align: left; cursor: pointer; transition: border-color 0.25s, background 0.25s, transform 0.25s; }
.pr__opt:hover { border-color: rgba(12,147,166,0.5); transform: translateX(3px); }
/* 选中（还没提交）：用品牌青，不用绿 —— 绿只留给"答对"。
   否则学生一点选项就看见绿色，会误以为自己已经做对了。
   精讲精练与知识前测现在都走"选好 → 提交 → 查看答案"三步，所以两边同一套配色。
   （「我不会」那个 E 是例外：点中仍是红色实线，见下面的 .pr__opt--skip.is-pick。） */
.pr__opt.is-pick { border-color: #0C93A6; background: rgba(12,147,166,0.09); }
.pr__opt.is-pick .pr__opt__k { color: #0C93A6; background: rgba(12,147,166,0.16); }
.pr__opt__k { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #0C93A6; background: rgba(12,147,166,0.1); }
.pr__opt__t { font-size: 14px; color: var(--ink); }
/* 解答题：上传我的答案 */
.pr__upload { margin-top: 22px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px 20px; border: 2px dashed rgba(12,147,166,0.4); border-radius: 14px; background: rgba(12,147,166,0.04); cursor: pointer; text-align: center; transition: border-color 0.25s, background 0.25s; }
.pr__upload:hover { border-color: rgba(12,147,166,0.6); background: rgba(12,147,166,0.08); }
.pr__upload.has-img { border-style: solid; border-color: rgba(12,147,166,0.55); }
.pr__upload__ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg,#0C93A6,#22B8CE); }
.pr__upload__ic svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pr__upload__txt { font-size: 15px; font-weight: 800; color: var(--ink); }
.pr__upload__sub { font-size: 12.5px; color: var(--ink-soft); }
/* 解答题：上传本质上只是一个按钮 —— 收成小尺寸，图片预览单独放大 */
.pr__upload--compact {
  width: auto; max-width: none;
  flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 9px; padding: 6px 15px 6px 6px; margin-top: 0;
  border: 1px solid rgba(12,147,166,.35); border-style: solid;
  border-radius: 999px; background: #fff; text-align: left;
  box-shadow: 0 2px 8px rgba(12,147,166,.10);
}
.pr__upload--compact:hover {
  border-color: rgba(12,147,166,.55); background: #fff;
  box-shadow: 0 5px 16px rgba(12,147,166,.16);
}
.pr__upload--compact .pr__upload__ic { width: 32px; height: 32px; border-radius: 50%; }
.pr__upload--compact .pr__upload__ic svg { width: 17px; height: 17px; }
.pr__upload--compact .pr__upload__txt { font-size: 13px; font-weight: 700; color: var(--ink); }
.pr__upload__preview { margin-top: 6px; }
.pr__upload__preview img { max-height: 150px; border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
/* 右栏里竖排（窄屏时由下面的媒体查询改回横排） */
.pr__tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pr__tool { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass); backdrop-filter: blur(16px); cursor: pointer; color: var(--ink); font-size: 14px; font-weight: 700; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; }
.pr__tool:hover { border-color: rgba(12,147,166,0.5); transform: translateY(-3px); box-shadow: 0 10px 22px rgba(12,147,166,0.12); }
.pr__tool.is-active { border-color: #0C93A6; box-shadow: 0 10px 22px rgba(12,147,166,0.2); color: #0C93A6; }
.pr__tool__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#0C93A6,#22B8CE); }
.pr__tool--exp { grid-column: 1 / -1; border-color: rgba(245,97,140,.4); background: linear-gradient(135deg, rgba(245,97,140,.10), rgba(255,138,107,.10)); color: #E8557F; }
.pr__tool--exp svg { width: 22px; height: 22px; fill: currentColor; }
.pr__tool--exp:hover { border-color: rgba(245,97,140,.6); box-shadow: 0 10px 24px rgba(245,97,140,.18); }
/* 「讲解视频」：题目自带的一段录屏（第6讲练 36 / 练 37）。
   和「互动实验」同属"另开的资源"，用靛蓝把自己和玫红的实验区分开。 */
.pr__tool--video { border-color: rgba(79,70,229,.42); background: linear-gradient(135deg, rgba(79,70,229,.10), rgba(124,58,237,.10)); color: #4F46E5; }
.pr__tool--video:hover { border-color: rgba(79,70,229,.66); box-shadow: 0 10px 24px rgba(79,70,229,.16); }
.pr__tool--video .pr__tool__ic { background: linear-gradient(135deg,#4F46E5,#7C3AED); font-size: 13px; }
/* 「再试一次」：只在错题集里出现（提交过才由 showRetry 露出来）。
   这里给的是"还没清掉的题，再练一遍"的语气 —— 所以用了错题集的玫红，而不是中性灰。 */
.pr__tool--retry { border-color: rgba(225,91,100,.4); color: #C0392B; background: rgba(225,91,100,.07); }
.pr__tool--retry:hover { border-color: rgba(225,91,100,.62); color: #A62F22; box-shadow: 0 10px 22px rgba(225,91,100,.16); }
.pr__tool__ic--retry { background: linear-gradient(135deg,#E15B64,#F0908A); }
/* 「去错题集」：精讲精练里这一题答错了才露出来（默认藏着，由 syncRedoHints 放出来）。
   和上面的「再试一次」是同一件事的两个入口 —— 只是这个要"走出去"，所以用错题集的
   玫红语气、图标写一个「错」字点明去向。 */
.pr__tool--wrongbook { border-color: rgba(245,87,108,.42); color: #C0392B; background: linear-gradient(135deg, rgba(245,87,108,.10), rgba(192,57,43,.06)); }
.pr__tool--wrongbook:hover { border-color: rgba(245,87,108,.66); color: #A62F22; box-shadow: 0 10px 22px rgba(245,87,108,.18); }
/* 「已收录至错题集」是提示、不是按钮：答错的题当场就自动进错题集了，学生自己走过去重做。
   所以去掉手型光标和 hover 位移、边框改虚线、图标换成一个绿勾 —— 一眼看出"这是状态，不是入口"。
   在错题集里把这道题做对之后，这个提示会消失（显隐由 syncRedoHints 控制）。 */
.pr__tool--wrongbook.is-note { cursor: default; border-style: dashed; border-color: rgba(62,156,116,.38); color: #2E7D5B; background: rgba(62,156,116,.07); }
.pr__tool--wrongbook.is-note:hover { border-color: rgba(62,156,116,.38); color: #2E7D5B; transform: none; box-shadow: none; }
.pr__tool--wrongbook.is-note .pr__tool__ic--wrongbook { background: linear-gradient(135deg,#7FC9A8,#3E9C74); }
.pr__tool__ic--wrongbook { background: linear-gradient(135deg,#F5576C,#C0392B); }
/* 知识前测里的题目配图（韦恩图这类）。图是白底扫描件，给个白底圆角框让它融进页面。 */
.pt__fig, .pt-a__fig { margin: 10px 0 2px; padding: 8px; border: 1px solid rgba(15,23,42,.10); border-radius: 12px; background: #fff; display: inline-block; max-width: 100%; }
.pt__fig img, .pt-a__fig img { display: block; max-width: 100%; height: auto; border-radius: 6px; }
/* 题头的「错题集」来源标记：一眼看出这一页是从哪儿开的 */
.pr__badge--wrong { background: linear-gradient(135deg,#F5576C,#C0392B); color: #fff; }
.pr__panel { margin-top: 12px; }
.pr__panel__hint { display: block; padding: 12px 14px; border-radius: 10px; background: rgba(12,147,166,0.08); color: #0C93A6; font-size: 13px; }

/* 作答区（填空 / 解答）：**只有上传这一条路**，所以整块就一个居中的上传按钮。
   早先这里还有「拍照上传 / 提交正误」两个 tab 和一组「我做对了 / 我做错了」自评按钮，已取消。 */
.pr__submit { margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(12,147,166,0.25); border-radius: 14px; background: rgba(12,147,166,0.04);
  display: flex; flex-direction: column; align-items: center; text-align: center; }
.pr__submit__bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; width: 100%; }
.pr__submit__lbl { font-size: 13.5px; font-weight: 800; color: var(--ink); margin-right: auto; }
.pr__submit .pr__upload { width: 100%; max-width: 340px; }
.pr__submit .pr__upload--compact { width: auto; max-width: none; }
/* ===== 填空：题干里的空直接可输入（打字）+ 拍照上传，两条路并存 ===== */
/* 每道填空题顶部的统一说明：两种作答方式二选一，写明白 */
.pr__fillnote { width: 100%; margin: 0 0 12px; padding: 9px 13px; border-radius: 10px;
  background: rgba(12,147,166,0.06); border: 1px dashed rgba(12,147,166,0.32);
  color: #0a6b7c; font-size: 12.5px; line-height: 1.75; text-align: left; }
.pr__fillnote b { color: #0C93A6; }
/* 空 + 「提交答案」绑成一组：按钮紧贴空位，操作入口一眼可见（窄屏时整组一起换行） */
.pr__blankslot { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 4px; vertical-align: middle; }
.pr__blankslot .pr__blankin { margin: 0; width: clamp(110px, 16vw, 180px); }
.pr__blankin { display: inline-block; width: clamp(120px, 22vw, 220px); margin: 0 6px; padding: 2px 10px 4px;
  border: none; border-bottom: 2px solid rgba(12,147,166,0.55); border-radius: 6px 6px 0 0;
  background: rgba(12,147,166,0.06); font: inherit; font-size: 0.95em; font-weight: 600; color: var(--ink);
  text-align: center; outline: none; vertical-align: baseline;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
.pr__blankin::placeholder { color: #9aa9b2; font-weight: 400; }
.pr__blankin:focus { border-bottom-color: #0C93A6; background: rgba(12,147,166,0.12); box-shadow: 0 4px 12px rgba(12,147,166,0.14); }
.pr__blankin:disabled { color: #4a5b64; background: rgba(120,140,150,0.08); border-bottom-color: rgba(120,140,150,0.35); }
.pr__fillrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; text-align: left; }
.pr__fill__in { flex: 1 1 220px; min-width: 0; padding: 10px 14px; border: 1px solid rgba(12,147,166,0.3);
  border-radius: 10px; background: #fff; font: inherit; font-size: 14px; color: var(--ink); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s; }
.pr__fill__in:focus { border-color: #0C93A6; box-shadow: 0 0 0 3px rgba(12,147,166,0.12); }
.pr__fill__in:disabled { background: #f2f5f7; color: #7b8b94; }
.pr__fill__sub { flex: 0 0 auto; padding: 10px 20px; border: none; border-radius: 10px; cursor: pointer;
  font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#0C93A6,#22B8CE);
  box-shadow: 0 6px 16px rgba(12,147,166,0.22); transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s; }
.pr__fill__sub:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(12,147,166,0.28); }
.pr__fill__sub:disabled { opacity: 0.55; cursor: default; }
.pr__fill__sub--inline { padding: 6px 16px; font-size: 13px; border-radius: 999px; box-shadow: 0 5px 14px rgba(12,147,166,0.28); }
/* 已提交：不再留一颗灰掉的死按钮，换一条明确的去向提示 */
.pr__filldone { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 6px; padding: 9px 14px;
  border-radius: 10px; background: rgba(12,147,166,0.08); border: 1px solid rgba(12,147,166,0.25);
  color: #0a6b7c; font-size: 13px; font-weight: 800; text-align: left; }
.pr__filldone[hidden] { display: none; }
.pr__fill__hint { flex: 1 1 240px; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
.pr__or { display: flex; align-items: center; gap: 12px; width: 100%; margin: 14px 0 2px;
  color: var(--ink-soft); font-size: 12px; }
.pr__or::before, .pr__or::after { content: ""; flex: 1; height: 1px; background: rgba(120,140,150,0.22); }
/* 判定完成之后作答区锁住（上传按钮不可点）。没认出来时不锁，学生可以换一张重传 */
.pr__submit.is-locked { opacity: .66; }
.pr__submit.is-locked .pr__upload { cursor: not-allowed; filter: grayscale(.35); }
/* 判错了、作答区锁住之后，顶上那行「请跳转至错题集重新练习」。
   这块已经不能重传了，这行字是唯一的出口指示 —— 所以给它醒目的玫红底，别淹没在灰字里。 */
.pr__submit__redo { margin: 0 0 12px; padding: 8px 14px; width: 100%; border-radius: 10px;
  background: rgba(245,87,108,.10); border: 1px solid rgba(245,87,108,.30);
  color: #C0392B; font-size: 13px; font-weight: 800; line-height: 1.6; }
.pr__submit__preview { margin-top: 10px; width: 100%; display: flex; justify-content: center; }
.pr__submit__preview img { max-height: 280px; max-width: 100%; border-radius: 10px; border: 1px solid var(--line); }
.pr__submit__verdict { margin-top: 10px; min-height: 0; }
.pr__verdict { font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 8px; line-height: 1.4; }
.pr__verdict--ok { color: #0e8a63; background: rgba(31,179,122,.13); border: 1px solid rgba(31,179,122,.35); }
.pr__verdict--bad { color: #c8434c; background: rgba(225,91,100,.13); border: 1px solid rgba(225,91,100,.35); }
.pr__verdict--wait { color: #e0a13a; background: rgba(224,161,58,.1); border: 1px solid rgba(224,161,58,.3); }
/* 批改完成：作答页只报"完成了"，判定结论与批语放在答案页/报告里 */
.pr__verdict--done { color: #0e8a63; background: rgba(31,179,122,.13); border: 1px solid rgba(31,179,122,.35); }
/* 选择题/多选 判定结果回显（持久状态块） */
.pr__opts__verdict { margin-top: 14px; }

/* ===== 选择题 / 多选 / 解答题：这颗圆形主钮（2026-09-21 重做材质） =====
   未提交时叫「提交答案」（选择题）/「答案解析」（解答题），提交后叫「查看解析」。
   做法是把它当一颗**实心球**来打光，而不是"圆角块 + 厚边"：
     受光面  —— 顶部一团径向高光（radial-gradient）叠在纵向渐变上，模拟球面反光
     轮廓    —— 1px 亮边（rim light）勾出圆弧，否则纯色圆看着是平的
    体积    —— 顶部内高光 + 底部内暗，把球"顶起来"
     侧壁    —— 8 层逐级加深的硬阴影（每层 1px）叠成 8px 的圆柱侧面，
                比原来单条 0 6px 0 厚边更像有弧度的厚度
     落地影  —— 一层柔和大模糊，带负 spread 收窄，像真的压在纸面上
   绿=还没落笔 / 橙=已落笔。旁边几条横条仍是半透明的 14px 圆角矩形，完全不是一家。 */
.pr__tool--submit {
  justify-self: center;
  width: 116px; height: 116px; padding: 0;
  border: 0; border-radius: 50%;
  /* 显式实心底色打底 —— 保证"中间不透明"，不靠渐变兜 */
  background-color: #1fb37a;
  background-image:
    radial-gradient(ellipse 74% 52% at 50% 13%, rgba(255,255,255,.62) 0%, rgba(255,255,255,.12) 56%, rgba(255,255,255,0) 78%),
    linear-gradient(180deg, #57e5a6 0%, #23b881 44%, #11875c 100%);
  color: #fff;
  font-size: 15px; font-weight: 800;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.34),          /* 轮廓亮边 */
    inset 0 3px 5px rgba(255,255,255,.48),          /* 顶部内高光 */
    inset 0 -12px 20px rgba(4,66,42,.32),           /* 底部内暗：把球"顶起来" */
    0 1px 0 #19a373, 0 2px 0 #15966b, 0 3px 0 #128962, 0 4px 0 #107c59,
    0 5px 0 #0d6f50, 0 6px 0 #0b6247, 0 7px 0 #08553e, 0 8px 0 #064835,
    0 18px 26px -7px rgba(6,74,48,.52);             /* 落地投影 */
  transition: transform .14s var(--ease), box-shadow .14s var(--ease);
}
.pr__tool--submit > span:last-child { letter-spacing: .08em; margin-right: -.08em; text-shadow: 0 1px 0 rgba(4,60,40,.32), 0 2px 5px rgba(4,60,40,.28); }
.pr__tool--submit:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.38), inset 0 3px 5px rgba(255,255,255,.48), inset 0 -12px 20px rgba(4,66,42,.32),
    0 1px 0 #19a373, 0 2px 0 #15966b, 0 3px 0 #128962, 0 4px 0 #107c59,
    0 5px 0 #0d6f50, 0 6px 0 #0b6247, 0 7px 0 #08553e, 0 8px 0 #064835,
    0 9px 0 #043a2a,
    0 24px 32px -7px rgba(6,74,48,.56);
}
.pr__tool--submit:active {
  transform: translateY(6px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.26), inset 0 2px 4px rgba(255,255,255,.34), inset 0 -7px 14px rgba(4,66,42,.36),
    0 1px 0 #15966b, 0 2px 0 #0b6247,
    0 8px 15px -4px rgba(6,74,48,.46);
}
/* 提交后整颗换成橙，和"还没提交"一眼分得开（.is-active 的青色描边/光晕也让位） */
.pr__tool--submit[data-cstate="reveal"] {
  border: 0;
  background-color: #f5820b;
  background-image:
    radial-gradient(ellipse 74% 52% at 50% 13%, rgba(255,255,255,.62) 0%, rgba(255,255,255,.12) 56%, rgba(255,255,255,0) 78%),
    linear-gradient(180deg, #ffc98c 0%, #f8891a 44%, #df6a00 100%);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.34),
    inset 0 3px 5px rgba(255,255,255,.48),
    inset 0 -12px 20px rgba(96,38,0,.30),
    0 1px 0 #e3770c, 0 2px 0 #d06b0b, 0 3px 0 #bd5f0a, 0 4px 0 #aa5308,
    0 5px 0 #974707, 0 6px 0 #843b06, 0 7px 0 #713005, 0 8px 0 #5e2404,
    0 18px 26px -7px rgba(96,38,0,.50);
}
.pr__tool--submit[data-cstate="reveal"]:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.38), inset 0 3px 5px rgba(255,255,255,.48), inset 0 -12px 20px rgba(96,38,0,.30),
    0 1px 0 #e3770c, 0 2px 0 #d06b0b, 0 3px 0 #bd5f0a, 0 4px 0 #aa5308,
    0 5px 0 #974707, 0 6px 0 #843b06, 0 7px 0 #713005, 0 8px 0 #5e2404,
    0 9px 0 #4b1a03,
    0 24px 32px -7px rgba(96,38,0,.54);
}
.pr__tool--submit[data-cstate="reveal"]:active {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.26), inset 0 2px 4px rgba(255,255,255,.34), inset 0 -7px 14px rgba(96,38,0,.34),
    0 1px 0 #d06b0b, 0 2px 0 #843b06,
    0 8px 15px -4px rgba(96,38,0,.44);
}
/* 已提交的选项：保留对错底色，去掉 hover 位移与手型，视觉上"点不动了" */
.pr__opt.is-locked { cursor: default; }
.pr__opt.is-locked:hover { transform: none; }
.pr__opt.is-locked:disabled { opacity: 1; }
/* 翻页区：贴到右栏底部（下沿与题卡下沿平齐），上面用一条虚线跟上面的区隔开 ——
   风格刻意不跟工具卡做一家：药丸形、无图标，上一题只有描边、下一题才是实心。
   （窄屏由下面的媒体查询改回页面底部居中一行） */
.pr__nav { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line); display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pr__navinfo { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); letter-spacing: .04em; }
.pr__navbtn { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); transition: transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.pr__navbtn:hover:not(:disabled) { border-color: rgba(12,147,166,.55); color: #0C93A6; }
.pr__navbtn:disabled { opacity: .38; cursor: not-allowed; }
.pr__navbtn--next { border-color: transparent; background: linear-gradient(135deg,#0C93A6,#22B8CE); color: #fff; box-shadow: 0 6px 14px rgba(12,147,166,.26); }
.pr__navbtn--next:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(12,147,166,.32); color: #fff; }
/* 窄屏回退：右栏收回到题卡下面 —— 工具恢复横排、导航回到页面底部居中一行。
   放在 .pr__nav / .pr__btn 的基础规则之后才盖得住（同名特异性下靠后者胜）。 */
@media (max-width: 980px) {
  .pr__main { grid-template-columns: minmax(0, 1fr); }
  .pr__tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 横排时圆钮会把这行撑高，让旁边的横条居中而不是被拉长；圆钮本身也缩一档，
     字号一起收 —— 4 个字在 92px 的圆里，15px 会几乎顶到圆弧 */
  .pr__tool { align-self: center; }
  .pr__tool--submit { width: 92px; height: 92px; font-size: 13.5px; }
  .pr__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; padding-top: 0; border-top: 0; }
  .pr__navbtn { width: auto; padding: 11px 26px; }
}
@media (max-width: 640px) { .pr__tools { grid-template-columns: repeat(2,1fr); } }
/* 知识前测底部那三件（上一题 / 页码 / 提交并跳转下一题）挤成一行 ——
   前测的题卡是整宽的一条，竖着排三行太吃纵向空间。
   放在上面那条窄屏 @media 之后：这里要的是 grid 一行，不是它给的 flex 居中行。 */
.pr__nav--row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.pr__nav--row .pr__navbtn { width: auto; padding: 10px 18px; }
.pr__nav--row .pr__navinfo { text-align: center; }

/* ===== 生成的相似题（错题集 → 「生成相似题」）=====
   这一程整体用靛蓝：和错题集的红、精讲精练的青都分开，一眼看出"这不是正式题"。
   学生最怕"练了一道不知道算不算数"，所以蓝色标记 + 说明条在每一屏都出现。 */
.pr__badge--sim { background: linear-gradient(135deg,#4C6EF5,#748FFC); }
.pr__simnote { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px;
  font-size: 13px; line-height: 1.8; color: #3B4E86;
  background: rgba(76,110,245,.07); border: 1px solid rgba(76,110,245,.2); }
.pr__simnote b { color: #2B3C6E; }
/* 从错题集点进来重做的那条相似题：说明条换成绿色调 —— 这一次做对就"已攻克"，语气不同于"不算数" */
.pr__simnote--redo { background: rgba(35,163,107,.08); border-color: rgba(35,163,107,.26); color: #24684C; }
.pr__simnote--redo b { color: #17603F; }
.pr__tool--similar { grid-column: 1 / -1; border-color: rgba(76,110,245,.42);
  background: linear-gradient(135deg, rgba(76,110,245,.10), rgba(116,143,252,.08)); color: #3B4E86; }
.pr__tool--similar:hover { border-color: rgba(76,110,245,.66); box-shadow: 0 10px 24px rgba(76,110,245,.18); }
.pr__tool--similar .pr__tool__ic { background: linear-gradient(135deg,#4C6EF5,#748FFC); }

.simq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.simq__card { padding: 18px 20px; border: 1px solid rgba(76,110,245,.22); border-radius: 16px;
  background: rgba(255,255,255,.86); box-shadow: 0 4px 14px rgba(20,40,70,.05); }
.simq__hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.simq__no { font-size: 13px; font-weight: 900; color: #fff; padding: 4px 12px; border-radius: 999px;
  background: linear-gradient(135deg,#4C6EF5,#748FFC); }
.simq__tag { font-size: 12.5px; font-weight: 700; color: #5A6B95; }
.simq__stem { font-size: 15.5px; line-height: 1.95; color: var(--ink); }
.simq__opts { display: grid; gap: 8px; margin-top: 12px; }
.simq__opt { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.8; color: var(--ink); }
.simq__opt i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 12px; font-weight: 800; color: #3B4E86; background: rgba(76,110,245,.12); }
.simq__blank { font-size: 13px; color: #5A6B95; }
.simq__go { margin-top: 14px; width: 100%; padding: 10px 14px; border: none; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg,#4C6EF5,#748FFC); box-shadow: 0 6px 14px rgba(76,110,245,.28);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.simq__go:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(76,110,245,.34); }
.simq__foot { display: flex; gap: 10px; margin-top: 18px; }
.simq__foot .pr__navbtn { width: auto; flex: 1; }
.simq__wait { padding: 40px 20px; text-align: center; font-size: 14px; font-weight: 700; color: #5A6B95;
  border: 1px dashed rgba(76,110,245,.3); border-radius: 16px; background: rgba(76,110,245,.04); }
.simq__wait b { display: block; font-size: 16px; color: #2B3C6E; margin-bottom: 8px; }
.simq__wait p { font-size: 13px; font-weight: 400; margin: 6px 0 0; color: var(--ink-soft); }
.simq__wait .simq__foot { max-width: 420px; margin: 18px auto 0; }
.simq__wait--err { border-color: rgba(225,91,100,.35); background: rgba(225,91,100,.04); }
.simq__spin { display: inline-block; width: 15px; height: 15px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid rgba(76,110,245,.25); border-top-color: #4C6EF5; border-radius: 50%;
  animation: simSpin .8s linear infinite; }
@keyframes simSpin { to { transform: rotate(360deg); } }
/* ===== 错题集（第3讲第 3 个模块） =====
   一级页面 = 错题清单，**卡片矩阵**（不是一行一条的长列表 —— 题干本来就短，
   横排时中间那一列被撑开一大段空白，既浪费横向空间又显得散）。
   每张卡一眼要读到三件事：**属于哪个题型 / 题干是什么 / 还能不能点进去练**。
   所以"题型"做成实色标签（不是淡底），是卡片里最重的那个元素。 */
.wb { width: 100%; max-width: 1120px; margin: 0 auto; }
.wb__loading { padding: 40px 0; text-align: center; color: var(--ink-soft); font-size: 14px; }
.wb__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.wb__hd__tx h2 { font-size: 24px; font-weight: 800; color: var(--ink); }
.wb__hd__tx p { margin-top: 8px; font-size: 14px; line-height: 1.75; color: var(--ink-soft); max-width: 620px; }
.wb__nums { display: flex; gap: 10px; flex: none; }
.wb__num { display: flex; align-items: baseline; gap: 6px; padding: 10px 16px; border-radius: 14px;
  background: rgba(225,91,100,.08); border: 1px solid rgba(225,91,100,.22); font-size: 12.5px; font-weight: 700; color: #C0392B; }
.wb__num b { font-size: 20px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.wb__num.is-ok { background: rgba(31,179,122,.09); border-color: rgba(31,179,122,.26); color: #0E7A4C; }
/* 卡片矩阵：横向铺开，一屏能扫完所有错题。
   列数交给 auto-fill + minmax 自己算（.wb 上限 1120 → 正好 3 列；窄屏 2 列 / 1 列）。
   卡片内部用 grid-template-areas 排成三行：
       题型 · 题号 / 题干 / 做过几次 · 去攻克
   JS 一行没动 —— 五个 span 还是原来那个顺序，这里只是给每个指定落点。
   之前是一行一条的横排：题干不长，中间那列就被 1fr 撑开一大段空白，看着散。 */
.wb__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.wb__item { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "tag no" "stem stem" "tries go";
  grid-template-rows: auto minmax(0, 1fr) auto;   /* 题干那一行吃掉多余高度，底行就贴在卡片底边 */
  gap: 9px 10px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-align: left;
  cursor: pointer; font: inherit; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.wb__item:hover { border-color: rgba(225,91,100,.5); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20,40,70,.09); }
.wb__item.is-cleared { background: #fbfdfc; }
.wb__item.is-cleared:hover { border-color: rgba(31,179,122,.45); box-shadow: 0 10px 22px rgba(31,179,122,.1); }
/* 题型名长短差很多（"比较大小" vs "已知一元二次不等式解集求参数"），
   所以标签要能被压缩 + 省略号，不能把题号挤出卡片 */
.wb__tag { grid-area: tag; justify-self: start; max-width: 100%; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg,#0C93A6,#22B8CE); }
.wb__item.is-cleared .wb__tag { background: linear-gradient(135deg,#23A36B,#1B8B58); }
.wb__no { grid-area: no; justify-self: end; font-size: 12.5px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
/* 题干里带真公式（MathJax 排的行内 SVG），所以**不能用 -webkit-line-clamp** ——
   display:-webkit-box 会把每个直接子元素（含 mjx-container）各当成一个盒，公式和文字全被拆行。
   长度靠 JS 那边"按可见字数截、但不在公式中间下刀"来控制（见 app.js 的 stemExcerpt）。 */
.wb__stem { grid-area: stem; align-self: start; min-width: 0; font-size: 13.5px; line-height: 1.85; color: var(--ink); }
.wb__stem mjx-container { font-size: 1.02em; }   /* 公式跟着正文走，不抢字号也不把卡片撑高 */
.wb__tries { grid-area: tries; justify-self: start; font-size: 12px; font-weight: 700; color: #9aa7b0; white-space: nowrap; }
.wb__go { grid-area: go; justify-self: end; font-size: 13px; font-weight: 800; color: #C0392B; white-space: nowrap; }
.wb__go.is-cleared { color: #0E7A4C; }
/* 已攻克那一堆整体压一档：一眼分得清"要做的"和"做完的" */
.wb__list--done .wb__stem { color: var(--ink-soft); }
.wb__list--done .wb__item:hover { border-color: rgba(31,179,122,.45); }
.wb__empty { padding: 46px 24px; text-align: center; border: 1px dashed var(--line); border-radius: 16px; background: rgba(31,179,122,.03); }
.wb__empty__ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  margin-bottom: 12px; font-size: 22px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#23A36B,#1B8B58); }
.wb__empty b { display: block; font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.wb__empty p { font-size: 13.5px; line-height: 1.75; color: var(--ink-soft); }
.wb__done { margin-top: 18px; }
.wb__done > summary { padding: 12px 16px; border-radius: 12px; cursor: pointer; list-style: none;
  background: rgba(31,179,122,.06); border: 1px solid rgba(31,179,122,.2);
  font-size: 13px; font-weight: 800; color: #0E7A4C; }
.wb__done > summary::-webkit-details-marker { display: none; }
.wb__done > summary::before { content: "▸ "; }
.wb__done[open] > summary::before { content: "▾ "; }
.wb__done > summary:hover { background: rgba(31,179,122,.11); }
.wb__list--done { margin-top: 10px; }
/* 知识前测错题那一组：和上面「练习错题」不是一回事 —— 前测的题不在题库里、做不了"攻克"，
   点进去只是回看解析。所以给它单独一块、换个色调（靛蓝），一眼分得清两类错题。 */
.wb__pt { margin-top: 18px; }
.wb__pt > summary { padding: 12px 16px; border-radius: 12px; cursor: pointer; list-style: none;
  background: rgba(76,110,245,.06); border: 1px solid rgba(76,110,245,.2);
  font-size: 13px; font-weight: 800; color: #3B4E86; }
.wb__pt > summary::-webkit-details-marker { display: none; }
.wb__pt > summary::before { content: "▾ "; }
.wb__pt > summary:hover { background: rgba(76,110,245,.11); }
.wb__pt__note { margin: 10px 2px 12px; font-size: 12.5px; line-height: 1.8; color: var(--ink-soft); }
.wb__item--pt { background: #fcfdff; }
.wb__item--pt:hover { border-color: rgba(76,110,245,.45); }
.wb__item--pt .wb__go { color: #3B4E86; }
.wb__tag--pt { background: linear-gradient(135deg,#5C7CFA,#4263EB); }
/* 「相似题错题」那一组：与前测那组同构，但换成靛蓝（和"相似题"那一程的配色一致）——
   一眼分得出"这是 AI 现生成的同类题"而不是题库里的题。 */
.wb__pt--sim > summary { background: rgba(92,124,250,.10); color: #3B4E86; border: 1px solid rgba(92,124,250,.22); }
.wb__pt--sim > summary:hover { background: rgba(92,124,250,.16); }
.wb__list--sim .wb__item { background: #fbfcff; }
.wb__item--sim:hover { border-color: rgba(92,124,250,.45); }
.wb__item--sim .wb__go { color: #3B4E86; }
.wb__tag--sim { background: linear-gradient(135deg,#6D7CF6,#4F46E5); }
@media (max-width: 380px) {
  /* 兜底：容器窄到装不下 320 那一档时，minmax(320px,1fr) 会撑出横向滚动。
     其余宽度不用管 —— 列数少了 auto-fill 自己就退成一列（676 宽 2 列、460 宽 1 列）。 */
  .wb__list { grid-template-columns: minmax(0, 1fr); }
}
/* ===== 答案解析 · 弹窗 ===== */
.analysis-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 800; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(20,30,45,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.analysis-overlay.is-open { display: flex; }
.am { width: 100%; max-width: 760px; max-height: 84vh; display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: 0 30px 60px rgba(0,0,0,0.3); overflow: hidden; }
.am__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.2); background: linear-gradient(135deg,#0C93A6,#22B8CE); color: #fff; }
.am__title { font-size: 16px; font-weight: 800; }
.am__close { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; font-size: 20px; line-height: 1; color: #fff; background: rgba(255,255,255,0.2); transition: background 0.2s, transform 0.2s; }
.am__close:hover { background: rgba(255,255,255,0.35); transform: scale(1.08); }
.am__body { padding: 20px 24px 26px; overflow-y: auto; }
/* ===== 解题小贴士 · 绿色大弹窗 =====
   覆盖层只罩一层淡淡的绿雾，题目界面原样留在后面（不跳页、不重排）；右上角 × 关闭。 */
.tip-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 815; display: none; align-items: center; justify-content: center;
  padding: 24px; background: rgba(10,45,32,0.38); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.tip-overlay.is-open { display: flex; }
.tipm { width: 100%; max-width: 860px; max-height: 84vh; display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(18,160,107,0.28); border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(6,60,40,0.35); }
.tipm__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 17px 24px; background: linear-gradient(135deg,#0E9F6E,#34C98A); color: #fff; }
.tipm__title { font-size: 17px; font-weight: 800; letter-spacing: 0.02em; }
.tipm__close { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: #fff; background: rgba(255,255,255,0.22); transition: background 0.2s, transform 0.2s; }
.tipm__close:hover { background: rgba(255,255,255,0.38); transform: scale(1.08); }
.tipm__body { padding: 22px 28px 28px; overflow-y: auto; min-height: 0; color: #1d2b24;
  font-size: 15px; line-height: 1.95; }
.tipm__body p { margin: 0 0 12px; }
.tipm__body ol { margin: 6px 0 14px; padding-left: 24px; display: grid; gap: 10px; }
.tipm__body ol > li { padding-left: 4px; }
.tipm__body ol > li::marker { color: #0E9F6E; font-weight: 800; }
.tipm__body b { color: #0b7a52; }
.tipm__sub { margin-top: 6px; padding: 8px 12px; border-left: 3px solid rgba(18,160,107,0.45);
  background: rgba(18,160,107,0.06); border-radius: 0 10px 10px 0; }
.tipm__note { margin-top: 16px !important; padding: 12px 16px; border-radius: 12px;
  background: rgba(18,160,107,0.10); border: 1px solid rgba(18,160,107,0.25); color: #145c42; }
@media (max-width: 720px) {
  .tip-overlay { padding: 12px; }
  .tipm { max-height: 88vh; border-radius: 16px; }
  .tipm__body { padding: 18px 18px 22px; font-size: 14px; }
}
.am__ans { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 12px 14px; border-radius: 12px; background: rgba(12,147,166,0.08); border: 1px solid rgba(12,147,166,0.2); }
.am__ans__label { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #0C93A6; padding: 3px 10px; border-radius: 999px; background: rgba(12,147,166,0.12); }
.am__ans__text { font-size: 16px; font-weight: 800; color: var(--ink); }
.am__sol { font-size: 15px; line-height: 1.9; color: var(--ink); }
/* 「答案解析」里的「你的作答」：AI 判定 + 上传的图 + 批语 ——
   做完题回看解析时，能一眼对照"我交的是什么、AI 怎么看" */
.am__mine { margin-bottom: 16px; padding: 14px 16px; border-radius: 12px;
  background: rgba(12,147,166,.05); border: 1px solid rgba(12,147,166,.18); }
.am__mine__hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.am__mine__hd .am__ctag { margin-bottom: 0; }
.am__ctag--mine { background: linear-gradient(135deg,#0C93A6,#22B8CE); }
.am__ver { font-size: 12px; font-weight: 800; padding: 4px 11px; border-radius: 999px; }
.am__ver--ok { color: #0e8a63; background: rgba(31,179,122,.14); }
.am__ver--no { color: #c8434c; background: rgba(225,91,100,.14); }
.am__tries { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.am__mine__shot { margin-top: 12px; }
.am__mine__shot img { max-width: 100%; max-height: 300px; display: block; border-radius: 10px;
  border: 1px solid var(--line); box-shadow: var(--shadow-1); }
/* AI 的详细评判：单独一块 + 标题。
   报告是模型按 ①②③④ 分点写的、带换行，所以必须 white-space: pre-wrap 保住分行 ——
   否则整段会挤成一坨，"分步"就看不出来了。 */
.am__mine__rep { margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: #fff; border: 1px solid rgba(12,147,166,.22); }
/* 打字提交的填空答案：与「AI 详细评判」并列的独立一块 */
.am__mine__typed { margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: rgba(12,147,166,.06); border: 1px solid rgba(12,147,166,.22); }
.am__ctag--ai { background: linear-gradient(135deg,#4F46E5,#7C3AED); }
.am__mine__body { margin-top: 9px; font-size: 13px; line-height: 1.95; color: var(--ink);
  white-space: pre-wrap; word-break: break-word; }
.am__sol p { margin: 0 0 12px; }
.am__sol p:last-child { margin-bottom: 0; }
/* 一题多解 / 一解多题 */
.pr__tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pr__tag { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; line-height: 1; color: #fff; }
.pr__tag--multi { background: linear-gradient(135deg,#F08A3E,#E06A1F); }
.pr__tag--onetype { background: linear-gradient(135deg,#23A36B,#1B8B58); }
.am__method { margin: 12px 0; }
.am__mtag { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 800; color: #C25A14; background: rgba(224,106,31,0.12); border: 1px solid rgba(224,106,31,0.30); margin-bottom: 8px; }
.am__mtag--2 { color: #17794B; background: rgba(27,139,88,0.12); border: 1px solid rgba(27,139,88,0.30); }
/* 第三种解法（一题多解可能给到三解） */
.am__mtag--3 { color: #5B3BB5; background: rgba(109,40,217,0.12); border: 1px solid rgba(109,40,217,0.30); }
.am__mbody { font-size: 15px; line-height: 1.9; color: var(--ink); }
.am__mbody p { margin: 0 0 10px; }
.am__thought { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: rgba(27,139,88,0.08); border: 1px solid rgba(27,139,88,0.22); }
.am__ctag { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#1B8B58,#23A36B); margin-bottom: 10px; }
.am__multi { margin-top: 6px; padding: 14px 16px; border-radius: 12px; background: rgba(12,147,166,0.06); border: 1px solid rgba(12,147,166,0.20); }
.am__ctag--multi { font-size: 16px; padding: 7px 18px; letter-spacing: 1px; background: linear-gradient(135deg,#0C93A6,#22B8CE); box-shadow: 0 4px 14px rgba(12,147,166,0.30); }
.am__multi .am__method { margin: 12px 0 0; }
.am__multi .am__method:first-of-type { margin-top: 0; }
.am__mtag--sum { color: #0C7A8C; background: rgba(12,147,166,0.12); border: 1px solid rgba(12,147,166,0.30); }
.am__tbody { font-size: 15px; line-height: 1.9; color: var(--ink); }
.am__tbody p { margin: 0 0 10px; }
/* ===== AI请教 · 大弹窗（复用自由探索 AI 答疑样式） ===== */
.aiask-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 800; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(20,30,45,0.58); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.aiask-overlay.is-open { display: flex; }
.aiask { width: 100%; max-width: 900px; height: min(86vh, 780px); display: flex; flex-direction: column; background: #fff; border-radius: 20px; box-shadow: 0 34px 70px rgba(0,0,0,0.34); overflow: hidden; }
.aiask__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid rgba(255,255,255,0.2); background: linear-gradient(135deg,#0C93A6,#22B8CE); color: #fff; }
.aiask__title { font-size: 17px; font-weight: 800; }
.aiask__close { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; font-size: 21px; line-height: 1; color: #fff; background: rgba(255,255,255,0.2); transition: background 0.2s, transform 0.2s; }
.aiask__close:hover { background: rgba(255,255,255,0.35); transform: scale(1.08); }
/* 同 .polya__msgs：带 .aiask 前缀，否则被后面 .chat__msgs 的 padding: 4px 盖掉 */
.aiask .aiask__msgs { flex: 1; min-height: 0; padding: 18px 20px; }
.aiask__composer { padding: 12px 20px 16px; border-top: 1px solid var(--line); background: rgba(255,255,255,0.5); }
.aiask__actions { display: flex; align-items: flex-end; gap: 10px; }
.aiask__actions textarea { flex: 1; min-width: 0; min-height: 48px; max-height: 140px; resize: none; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe; font: inherit; font-size: 14px; line-height: 1.6; color: var(--ink); }
.aiask__actions textarea:focus { outline: none; border-color: #0C93A6; }
.aiask__actions .mic-btn { flex: 0 0 auto; width: 46px; height: 46px; padding: 0; border-radius: 12px; color: #0C93A6; background: rgba(12,147,166,0.1); border: 1px solid rgba(12,147,166,0.25); }
.aiask__actions .chat__send { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 88px; height: 46px; padding: 0; border: none; border-radius: 12px; cursor: pointer; color: #fff; background: linear-gradient(135deg,#0C93A6,#22B8CE); box-shadow: 0 6px 16px rgba(12,147,166,0.3); transition: transform 0.2s, box-shadow 0.2s; }
.aiask__actions .chat__send:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(12,147,166,0.42); }
.aiask__actions .chat__send svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aiask .chat__status { padding-left: 2px; }
/* ===== 波利亚解析 · 大弹窗 ===== */
.polya-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 820; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(20,28,40,0.6); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.polya-overlay.is-open { display: flex; }
/* 波利亚弹窗：接近全屏 —— 上面要看清题干（含公式），下面还要摆四步法对话，
   900px 宽太憋屈。90vh 而不是 94vh 是给 overlay 那 24px 内边距留量，免得小屏溢出。
   费曼弹窗与它同尺寸（见下面 .fey），两个一起改才不会跑偏 */
.polya { width: 100%; max-width: min(1320px, 96vw); height: min(90vh, 1000px); display: flex; flex-direction: column; background: #fff; border-radius: 20px; box-shadow: 0 34px 70px rgba(0,0,0,0.34); overflow: hidden; }
.polya__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 22px; background: linear-gradient(135deg,#1B5AA8,#2B7FD0); color: #fff; }
.polya__head-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.polya__t { font-size: 16px; font-weight: 800; }
.polya__step { font-size: 12px; opacity: 0.85; }
.polya__close { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; font-size: 21px; line-height: 1; color: #fff; background: rgba(255,255,255,0.2); transition: background 0.2s, transform 0.2s; }
.polya__close:hover { background: rgba(255,255,255,0.35); transform: scale(1.08); }
/* 抬头右侧：我的评分 + 关闭 */
.polya__head-r { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.polya__mine { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.45); background: rgba(255,255,255,0.14);
  color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; transition: background 0.2s; }
.polya__mine:hover { background: rgba(255,255,255,0.3); }
.polya__rv-all { margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; color: #1B5AA8; }
.polya__rv-all:hover { text-decoration: underline; }
/* ---------- 我的对话得分（学生端） ---------- */
.pms-overlay { z-index: 830; }
.pms { width: 100%; max-width: min(880px, 94vw); max-height: 86vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 20px; box-shadow: 0 34px 70px rgba(0,0,0,0.34); overflow: hidden; }
.pms__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; background: linear-gradient(135deg,#1B5AA8,#2B7FD0); color: #fff; }
.pms__hd b { display: block; font-size: 16px; font-weight: 800; }
.pms__hd small { display: block; margin-top: 2px; font-size: 12px; opacity: 0.85; }
.pms__close { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  font-size: 20px; line-height: 1; color: #fff; background: rgba(255,255,255,0.2); }
.pms__close:hover { background: rgba(255,255,255,0.35); }
.pms__body { padding: 16px 20px 20px; overflow: auto; }
.pms__sum { display: flex; gap: 18px; margin-bottom: 12px; font-size: 12.5px; color: var(--ink-soft); }
.pms__sum b { color: #0C93A6; font-size: 15px; font-weight: 900; }
.pms__tip { padding: 16px 0; font-size: 13px; line-height: 1.8; color: #7d9094; }
.pms__row { margin-bottom: 12px; padding: 12px 14px; background: #fbfdff;
  border: 1px solid #e5edf2; border-radius: 14px; }
.pms__rh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pms__g { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-size: 13px; font-weight: 900; color: #fff; background: #9aa7ad; }
.pms__g.is-s { background: #0C93A6; } .pms__g.is-a { background: #2E9E6B; }
.pms__g.is-b { background: #5A8FD6; } .pms__g.is-c { background: #D9A441; }
.pms__g.is-d { background: #B9605B; }
.pms__sc { font-size: 22px; font-weight: 900; color: #12303f; font-variant-numeric: tabular-nums; }
.pms__sc small { margin-left: 2px; font-size: 11px; font-weight: 500; color: #7d9094; }
.pms__badge { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: #B9605B; background: #fdecea; }
.pms__row.is-pass .pms__badge { color: #1c7a52; background: #e7f6ee; }
.pms__meta { margin-left: auto; font-size: 11.5px; color: #93a3aa; }
.pms__q { margin: 8px 0 6px; padding: 8px 10px; border-radius: 8px; background: #f2f7fa;
  font-size: 12.5px; line-height: 1.7; color: #4c5c64; }
.pms__dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 16px; margin-top: 8px; }
.pms__d { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #5b6b73; }
.pms__d > span:first-child { flex: 0 0 52px; }
.pms__bar { flex: 1; height: 6px; border-radius: 999px; background: #e7eef2; overflow: hidden; }
.pms__bar i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg,#4BC08D,#0C93A6); }
.pms__d b { width: 26px; text-align: right; color: #12303f; font-variant-numeric: tabular-nums; }
.pms__note { margin: 8px 0 0; font-size: 12px; color: #0a6b7c; }
@media (max-width: 560px) {
  .pms__meta { margin-left: 0; flex: 1 0 100%; }
  .polya__mine { padding: 6px 10px; font-size: 12px; }
}
/* 题目信息：默认缩略（超高了就滚动），只有真的超长才由 JS 放出「展开完整题目」。
   高度上限不能按"几行字"估 —— 公式是 MathJax 排的，行高比纯文字高不少。 */
.polya__qwrap { flex: 0 0 auto; border-bottom: 1px solid var(--line); background: #f6f9fd; }
.polya__q { position: relative; max-height: 176px; overflow: auto; padding: 12px 20px 6px; font-size: 14px; line-height: 1.8; color: var(--ink); }
.polya__qwrap.is-expand .polya__q { max-height: min(52vh, 560px); }   /* 展开也给个上限，别把对话框挤没 */
.polya__qmore { display: block; width: 100%; padding: 4px 20px 10px; border: 0; background: transparent; cursor: pointer;
  text-align: left; font: inherit; font-size: 12px; font-weight: 800; color: #1B5AA8; }
.polya__qmore[hidden] { display: none; }
.polya__qmore:hover { text-decoration: underline; }
.polya__q-label { display: inline-block; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: #1B5AA8; background: rgba(27,90,168,0.1); padding: 2px 8px; border-radius: 20px; }
/* 底部留白比顶部多一点：滚到底时最后一条（尤其「正在思考」那条）才不会贴着输入区，
   看着像被裁掉一截。
   选择器必须带 .polya 前缀提高特异性 —— .chat__msgs 那条 `padding: 4px` 写在后面、
   特异性又相同，会把这里的 padding 整个盖掉（之前就一直被盖掉，实际只有 4px）。 */
.polya .polya__msgs { flex: 1; min-height: 0; padding: 18px 20px 30px; }
.polya__composer { display: flex; flex-direction: column; gap: 6px; padding: 10px 18px 12px; border-top: 1px solid var(--line); background: rgba(255,255,255,0.5); }
.polya__composer .polya__bar, .fey__composer .fey__bar { margin-top: 0; }
.polya__actions { display: flex; align-items: flex-end; gap: 10px; }
.polya__actions textarea { flex: 1; min-width: 0; min-height: 48px; max-height: 140px; resize: none; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe; font: inherit; font-size: 14px; line-height: 1.6; color: var(--ink); }
.polya__actions textarea:focus { outline: none; border-color: #1B5AA8; }
.polya__actions .mic-btn { flex: 0 0 auto; width: 46px; height: 46px; padding: 0; border-radius: 12px; color: #1B5AA8; background: rgba(27,90,168,0.1); border: 1px solid rgba(27,90,168,0.25); }
.polya__actions .chat__send { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 88px; height: 46px; padding: 0; border: none; border-radius: 12px; cursor: pointer; color: #fff; background: linear-gradient(135deg,#1B5AA8,#2B7FD0); box-shadow: 0 6px 16px rgba(27,90,168,0.3); transition: transform 0.2s, box-shadow 0.2s; }
.polya__actions .chat__send:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(27,90,168,0.42); }
.polya__actions .chat__send svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ===== 费曼学习法 · 大弹窗（豆包端到端语音，以语音为主） ===== */
.fey-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 840; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(30,22,10,0.6); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.fey-overlay.is-open { display: flex; }
/* 费曼弹窗：与波利亚弹窗同尺寸（见上面 .polya）—— 两个是一对，共用一个外壳尺寸，
   改一个就把另一个也改了，别让它们长得不一样 */
.fey { width: 100%; max-width: min(1320px, 96vw); height: min(90vh, 1000px); display: flex; flex-direction: column; background: #fff; border-radius: 20px; box-shadow: 0 34px 70px rgba(0,0,0,0.34); overflow: hidden; }
.fey__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 22px; background: linear-gradient(135deg,#D26B22,#F08A3E); color: #fff; }
.fey__head-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fey__t { font-size: 16px; font-weight: 800; }
.fey__step { font-size: 12px; opacity: 0.9; }
.fey__close { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; font-size: 21px; line-height: 1; color: #fff; background: rgba(255,255,255,0.2); transition: background 0.2s, transform 0.2s; }
.fey__close:hover { background: rgba(255,255,255,0.35); transform: scale(1.08); }
.fey__q { position: relative; flex: 0 0 auto; max-height: 160px; overflow: auto; padding: 12px 20px 12px 20px; border-bottom: 1px solid var(--line); background: #fdf7f0; font-size: 14px; line-height: 1.8; color: var(--ink); }
.fey__q-label { display: inline-block; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: #D26B22; background: rgba(210,107,34,0.12); padding: 2px 8px; border-radius: 20px; }
/* 同 .polya__msgs：带 .fey 前缀，否则被后面 .chat__msgs 的 padding: 4px 盖掉 */
.fey .fey__msgs { flex: 1; min-height: 0; padding: 18px 20px 30px; }
.fey__composer { display: flex; flex-direction: column; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--line); background: rgba(255,255,255,0.5); }
.fey__mic { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; border: none; border-radius: 14px; cursor: pointer; color: #fff; background: linear-gradient(135deg,#D26B22,#F08A3E); box-shadow: 0 8px 20px rgba(210,107,34,0.35); font-size: 15px; font-weight: 700; transition: transform 0.2s, box-shadow 0.2s; }
.fey__mic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fey__mic:hover { transform: translateY(-2px); }
.fey__mic.is-on { background: linear-gradient(135deg,#1BA98A,#2CC7A6); }
.fey__mic.is-speaking { background: linear-gradient(135deg,#D26B22,#F08A3E); animation: feyPulse 1.2s ease-in-out infinite; }
@keyframes feyPulse { 0%,100% { box-shadow: 0 8px 20px rgba(210,107,34,0.35); } 50% { box-shadow: 0 8px 30px rgba(240,138,62,0.6); } }
.fey__r { display: flex; align-items: flex-end; gap: 10px; }
.fey__r textarea { flex: 1; min-width: 0; min-height: 48px; max-height: 120px; resize: none; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe; font: inherit; font-size: 14px; line-height: 1.6; color: var(--ink); }
.fey__r textarea:focus { outline: none; border-color: #D26B22; }
.fey__r .chat__send { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 88px; height: 46px; padding: 0; border: none; border-radius: 12px; cursor: pointer; color: #fff; background: linear-gradient(135deg,#D26B22,#F08A3E); box-shadow: 0 6px 16px rgba(210,107,34,0.3); transition: transform 0.2s, box-shadow 0.2s; }
.fey__r .chat__send:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(210,107,34,0.42); }
.fey__r .chat__send svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fey__status { padding-left: 2px; }
.fey__status.is-live { color: #D26B22; font-weight: 600; }
/* 「AI 正在思考」的加强特效：费曼与波利亚共用同一套形态。
   不做居中遮罩 —— 等待气泡留在对话流里，学生能一边等一边回看自己刚说的话。
   四个位置同时给动静：顶栏流光带 + 等待气泡呼吸 + 三点跳动 + 头像脉动，
   余光扫到也知道它还在干活。颜色随各弹窗的主题色走（--think-rgb / --think-ink）。 */
.fey { --think-rgb: 210,107,34; --think-ink: #B4560F; }
.polya { --think-rgb: 27,90,168; --think-ink: #14498A; }
.fey__head, .polya__head { position: relative; overflow: hidden; }
.fey.is-thinking .fey__head::after, .polya.is-thinking .polya__head::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95), rgba(255,255,255,0));
  transform: translateX(-100%);
  animation: thinkSweep 1.25s linear infinite;
}
@keyframes thinkSweep { to { transform: translateX(100%); } }
.fey .bubble.is-loading .bubble__text, .polya .bubble.is-loading .bubble__text {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(var(--think-rgb),0.10), rgba(var(--think-rgb),0.20));
  border-color: rgba(var(--think-rgb),0.36);
  animation: thinkGlow 1.6s ease-in-out infinite;
}
/* 通用那枚 13px 小转圈在这里换成三点跳动，否则同一条文字前面会挂两个转圈 */
.fey .bubble.is-loading .bubble__text::before, .polya .bubble.is-loading .bubble__text::before { content: none; }
.fey .bubble.is-loading .bubble__avatar, .polya .bubble.is-loading .bubble__avatar { animation: thinkAvatarPulse 1.4s ease-in-out infinite; }
.fey .bubble.is-loading .think-txt, .polya .bubble.is-loading .think-txt { font-weight: 700; color: var(--think-ink); }
.think-dots { display: inline-flex; align-items: center; gap: 4px; }
.think-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--think-rgb)); animation: thinkDot 1.1s ease-in-out infinite; }
.think-dots i:nth-child(2) { animation-delay: 0.16s; }
.think-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes thinkDot { 0%, 70%, 100% { transform: translateY(0); opacity: 0.4; } 35% { transform: translateY(-5px); opacity: 1; } }
@keyframes thinkGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--think-rgb),0.30); } 50% { box-shadow: 0 0 0 6px rgba(var(--think-rgb),0.08); } }
@keyframes thinkAvatarPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .fey.is-thinking .fey__head::after, .polya.is-thinking .polya__head::after,
  .fey .bubble.is-loading .bubble__text, .polya .bubble.is-loading .bubble__text,
  .fey .bubble.is-loading .bubble__avatar, .polya .bubble.is-loading .bubble__avatar { animation-duration: 2.4s; }
}
.ai-body {
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto;
  justify-content: safe center;   /* 轻量子屏(题型/列表/intro)垂直居中；长内容(flex:1)占满或回落顶对齐可滚 */
  padding: 4px clamp(40px, 5vw, 96px) 3vh;
  width: 100%; max-width: 1480px; margin: 0 auto;
}
.ai-view .card {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

/* —— 顶部标题区：标题 + 副标题同一行 —— */
.ai-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.ai-head h2 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; }
.ai-head p { margin-top: 6px; color: var(--ink-soft); line-height: 1.6; max-width: 62ch; }
.ai-head__badge { font-size: 12px; font-weight: 600; color: var(--c-cyan-deep); background: rgba(31, 200, 224, 0.12); padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
.ai-head__top { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.ai-head__top h2 { margin: 0; }
.ai-head__top p { margin: 0; }

/* —— 题号跳转条：标题下方整行序号，点击可跳到任意一题 —— */
.ai-jump { display: flex; width: 100%; padding-top: 2px; }
.ai-jump__nums { display: flex; gap: 8px; width: 100%; justify-content: center; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; scrollbar-color: rgba(31, 200, 224, .4) transparent; }
.ai-jump__nums::-webkit-scrollbar { height: 4px; }
.ai-jump__nums::-webkit-scrollbar-thumb { background: rgba(31, 200, 224, 0.35); border-radius: 4px; }
.ai-jump__nums::-webkit-scrollbar-track { background: transparent; }
.ai-jump__num {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  font-size: 15px; font-weight: 700; font-family: inherit;
  color: var(--c-cyan-deep); background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.ai-jump__num:hover { transform: translateY(-1px); background: rgba(31, 200, 224, 0.15); }
.ai-jump__num.is-active { background: linear-gradient(135deg, #FFC83D, #1FC8E0); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(31, 140, 170, 0.28); }

/* —— 题型网格：宽屏 5 列排满一行 —— */
.ai-types { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.atype {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  text-align: left; cursor: pointer; padding: 22px 20px; min-height: 232px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--shadow-1); color: var(--ink); font-family: inherit;
  opacity: 0; transform: translateY(16px); animation: cardIn 0.6s var(--ease) forwards; animation-delay: var(--d, 0s);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.atype:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(31, 140, 170, 0.2); border-color: rgba(31, 200, 224, 0.5); }
.atype__tile { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--grad); color: #fff; font-weight: 800; font-size: 20px; box-shadow: 0 8px 18px rgba(230, 160, 30, 0.3); }
.atype__tag { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(31, 200, 224, 0.14); color: var(--c-cyan-deep); letter-spacing: 1px; align-self: flex-start; }
.atype__title { font-size: clamp(15px, 1.15vw, 18px); font-weight: 700; line-height: 1.35; }
.atype__desc { flex: 1; font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; }
.atype__go { font-size: 13px; font-weight: 600; color: var(--c-cyan-deep); }

.ai-crumb { font-size: 14px; color: var(--ink-soft); font-weight: 600; margin-bottom: 16px; letter-spacing: 0.5px; }

/* —— 题目列表：auto-fit 自动填满，不留空列 —— */
.ai-qlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.qcard {
  text-align: left; cursor: pointer; padding: 22px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--shadow-1); color: var(--ink); font-family: inherit;
  display: flex; flex-direction: column; gap: 12px; min-height: 188px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.qcard:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(31, 140, 170, 0.16); border-color: rgba(31, 200, 224, 0.45); }
.qcard__top { display: flex; align-items: center; justify-content: space-between; }
.qcard__no { font-size: 13px; font-weight: 700; color: var(--c-cyan-deep); }
.qcard__kind { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(255, 200, 61, 0.22); color: var(--c-yellow-deep); }
.qcard__stem { flex: 1; font-size: 15px; line-height: 1.7; color: var(--ink); }
.qcard__go { font-size: 13px; font-weight: 600; color: var(--c-cyan-deep); }

/* —— 作答：左题干 / 右作答区，标准答案跨整行 —— */
.qanswer { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.qanswer__left, .qanswer__right { display: flex; flex-direction: column; gap: 14px; }
.qanswer__label { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--c-cyan-deep); }
.qanswer__stem { padding: 20px 22px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.9; }
.qoptions { display: grid; gap: 10px; }
.qopt {
  display: flex; align-items: flex-start; gap: 12px; text-align: left;
  cursor: pointer; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--ink); font-family: inherit; transition: all 0.25s var(--ease);
}
.qopt:hover { border-color: rgba(31, 200, 224, 0.5); background: rgba(255, 255, 255, 0.75); }
.qopt.is-selected { border-color: var(--c-cyan); background: rgba(31, 200, 224, 0.12); box-shadow: 0 6px 16px rgba(31, 200, 224, 0.18); }
.qopt__letter { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: rgba(20, 40, 60, 0.08); color: var(--ink-soft); }
.qopt.is-selected .qopt__letter { background: var(--grad); color: #fff; }
.qopt__text { flex: 1; line-height: 1.7; padding-top: 3px; }
.qans-hint { font-size: 12.5px; color: var(--ink-soft); }

.qphoto { padding: 18px; border-radius: var(--radius-lg); border: 2px dashed rgba(31, 200, 224, 0.45); }
.qphoto__drop { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; text-align: center; padding: 22px; }
.qphoto__icon { font-size: 32px; }
.qphoto__txt { font-size: 15px; font-weight: 600; color: var(--ink); }
.qphoto__sub { font-size: 12px; color: var(--ink-soft); }
.qphoto__preview { margin-top: 14px; max-width: 100%; max-height: 240px; border-radius: 14px; box-shadow: var(--shadow-1); }
.qphoto input[type="file"] { display: none; }

.qanswer__submit { height: 48px; }
.qanswer__reveal { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.qanswer__after { display: flex; }
.qanswer__after .btn { min-width: 220px; height: 48px; }

/* —— 标准答案面板 —— */
.qstd { padding: 20px 22px; }
.qstd__row { margin-bottom: 8px; }
.qstd__tag { font-size: 12px; font-weight: 700; letter-spacing: 1px; padding: 3px 10px; border-radius: 999px; color: #fff; background: var(--grad); }
.qstd__question { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.9; margin-bottom: 14px; color: var(--ink); }
.qstd__answer { font-size: clamp(16px, 1.4vw, 20px); font-weight: 700; margin-bottom: 14px; line-height: 1.7; }
.qstd__options { display: grid; gap: 10px; margin-bottom: 14px; }
.qopt--static, .qopt--static:hover { cursor: default; border-color: var(--line); background: rgba(255, 255, 255, 0.55); }
.qopt.is-correct { border-color: var(--c-cyan); background: rgba(31, 200, 224, 0.12); box-shadow: 0 6px 16px rgba(31, 200, 224, 0.18); }
.qopt.is-correct .qopt__letter { background: var(--grad); color: #fff; }
.qopt__mark { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--c-cyan-deep); }
.qstd__steps { margin: 8px 0 0; padding-left: 22px; }
.qstd__steps li { margin: 8px 0; line-height: 1.8; color: var(--ink); }

/* —— AI 详细解析：左右等高、填满屏高，对话内部滚动 —— */
.explain { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; align-items: stretch; }
.explain__answer { min-height: 0; overflow: auto; }
.explain__chat {
  min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.chat__msgs { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 4px; }
.bubble { display: flex; gap: 10px; align-items: flex-start; max-width: 100%; }
.bubble--user { flex-direction: row-reverse; }
.bubble__avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; }
.bubble--assistant .bubble__avatar { background: var(--grad); }
.bubble--user .bubble__avatar { background: rgba(20, 40, 60, 0.5); }
.bubble__text { padding: 10px 14px; border-radius: 14px; line-height: 1.7; font-size: 14px; }
.bubble--assistant .bubble__text { background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); border-top-left-radius: 4px; }
.bubble--user .bubble__text { background: var(--grad); color: #fff; border-top-right-radius: 4px; }
.bubble.is-loading .bubble__text { opacity: 0.9; }
/* AI 思考中动画：小转圈，让用户知道正在处理，而不是静态等待 */
.bubble.is-loading .bubble__text::before {
  content: "";
  display: inline-block;
  width: 13px; height: 13px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid rgba(31, 200, 224, 0.25);
  border-top-color: var(--c-cyan);
  border-radius: 50%;
  animation: aiSpin 0.7s linear infinite;
}
@keyframes aiSpin { to { transform: rotate(360deg); } }
.bubble__err { color: #d34c58; }
.bubble__text strong { font-weight: 700; }
.bubble__text em { font-style: italic; }
.bubble__text hr { border: 0; border-top: 1px solid rgba(20, 40, 60, 0.14); margin: 10px 0; }
/* 输入区：语音 / 文字 / 发送 三行分层，互不挤压 */
.chat__bar { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.chat__bar textarea {
  width: 100%; resize: none; min-height: 58px; max-height: 140px;
  padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6); font-family: inherit; font-size: 14px;
  color: var(--ink); outline: none; transition: border-color 0.25s var(--ease);
}
.chat__bar textarea:focus { border-color: var(--c-cyan); }
.chat__send { width: 100%; height: 44px; }
.mic-btn {
  width: 100%; height: 44px; border-radius: 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--c-cyan-deep);
  background: rgba(31, 200, 224, 0.12); border: 1px solid rgba(31, 200, 224, 0.32);
  transition: all 0.25s var(--ease);
}
.mic-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mic-btn:hover { background: rgba(31, 200, 224, 0.22); box-shadow: 0 4px 14px rgba(31, 200, 224, 0.18); transform: translateY(-1px); }
.mic-btn:active { transform: translateY(0) scale(0.97); }
.mic-btn.is-on { background: linear-gradient(135deg, #F5618C, #FF8A6B); color: #fff; border-color: transparent; animation: micPulse 1.2s ease-in-out infinite; }
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245, 97, 140, 0.5); } 50% { box-shadow: 0 0 0 9px rgba(245, 97, 140, 0); } }
.chat__status { font-size: 12px; color: var(--ink-soft); min-height: 16px; }
/* 语音听取中：状态行高亮 + 脉冲动画，明确提示正在聆听 */
.chat__status.is-live { color: var(--c-cyan-deep); font-weight: 600; animation: statusPulse 1.2s ease-in-out infinite; }
  /* 语音输入反馈：录音电平条 + 识别转圈 */
  .asr-lv { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; margin-right: 6px; vertical-align: middle; }
  .asr-lv i { width: 3px; height: 3px; background: #0C93A6; border-radius: 2px; transition: height .08s; }
  .asr-lv-txt { vertical-align: middle; }
  .asr-spinner { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border: 2px solid rgba(12,147,166,.25); border-top-color: #0C93A6; border-radius: 50%; animation: asrSpin .8s linear infinite; }
  @keyframes asrSpin { to { transform: rotate(360deg); } }
@keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ============ 语音输入工具条：转文字 / 语音通话 / 发送（微信式） ============ */
.vc-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(12,147,166,.28);
  background: rgba(12,147,166,.1); color: #0C93A6; font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: transform .18s, box-shadow .2s, background .2s;
}
.vc-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vc-btn:hover { background: rgba(12,147,166,.2); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(12,147,166,.2); }
.vc-btn:active { transform: translateY(0) scale(.97); }
.vc-btn.is-on { background: linear-gradient(135deg,#F5618C,#FF8A6B); color: #fff; border-color: transparent; animation: vcPulse 1.2s ease-in-out infinite; }
@keyframes vcPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245,97,140,.5); } 50% { box-shadow: 0 0 0 8px rgba(245,97,140,0); } }
.vc-btn--call { color: #7C4DFF; border-color: rgba(124,77,255,.28); background: rgba(124,77,255,.1); }
.vc-btn--call:hover { background: rgba(124,77,255,.18); box-shadow: 0 6px 14px rgba(124,77,255,.22); }
.vc-btn--call.is-on { background: linear-gradient(135deg,#7C4DFF,#A66BF2); border-color: transparent; animation: vcPulse 1.2s ease-in-out infinite; }
.vc-btn--sp { flex: 1 1 auto; }

/* 输入区：textarea 在上、工具条在下 */
.polya__composer textarea, .aiask__composer textarea, .fey__composer textarea, .report-chat__composer textarea {
  width: 100%; min-width: 0; box-sizing: border-box; min-height: 48px; max-height: 140px; resize: none;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe;
  font-family: inherit; font-size: 14px; line-height: 1.6; color: var(--ink);
}
.polya__composer textarea:focus { outline: none; border-color: #1B5AA8; }
.aiask__composer textarea:focus { outline: none; border-color: #0C93A6; }
.fey__composer textarea:focus { outline: none; border-color: #D26B22; }
.report-chat__composer textarea:focus { outline: none; border-color: #0C93A6; }
.polya__bar, .aiask__bar, .fey__bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

/* 发送按钮（带"发送"文字） */
.polya__bar .chat__send, .aiask__bar .chat__send, .fey__bar .chat__send, .report-chat__actions .chat__send {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; width: auto;
  height: 44px; padding: 0 18px; border: none; border-radius: 12px; cursor: pointer;
  color: #fff; font-family: inherit; font-size: 15px; font-weight: 700;
  background: linear-gradient(135deg,#0C93A6,#22B8CE); box-shadow: 0 6px 16px rgba(12,147,166,.3);
  transition: transform .2s, box-shadow .2s;
}
.polya__bar .chat__send:hover, .aiask__bar .chat__send:hover, .fey__bar .chat__send:hover, .report-chat__actions .chat__send:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(12,147,166,.42); }
.polya__bar .chat__send svg, .aiask__bar .chat__send svg, .fey__bar .chat__send svg, .report-chat__actions .chat__send svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 波利亚 · 总结并结束 / 结束态 */
.polya__finish { height: 40px; padding: 0 14px; border: 1px solid rgba(12,147,166,.35); border-radius: 12px; background: rgba(12,147,166,.06); color: #0C8195; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; }
.polya__finish:hover { background: rgba(12,147,166,.16); }
.polya__finish:disabled { opacity: .5; cursor: not-allowed; }
.polya__composer #polya-mic.is-disabled, .polya__composer #polya-mic:disabled { opacity: .5; cursor: not-allowed; }
.polya__done { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px 12px; border-top: 1px solid var(--line); background: rgba(255,255,255,0.5); }
/* 底部纵向瘦身。原来自上到下是 textarea / 状态行 / 工具栏三层，每层都占位，
   加起来吃掉近 200px，在 90vh 的弹窗里很显眼。两处收一下：
   ① 空的状态行不占高度（只在真有话要说时才撑开一行）；
   ② 结束态整块输入区收起 —— 都结束了，输入框和禁用按钮只是占地方。 */
.polya .chat__status:empty { display: none; }
.polya.is-done .polya__composer { display: none; }
.polya__done-tip { font-size: 13.5px; font-weight: 700; color: #0d6b55; }
.polya__done-close { flex: none; }
/* 对话评定卡：点「总结·结束」之后，收尾条上方长出这次对话的等级和五维分。
   等级只用于展示（SSS/SS/S/A/B/C/D），留档和排序服务端一律看总分。 */
.polya__done { flex-wrap: wrap; }
.polya__rv { flex: 1 0 100%; width: 100%; border-radius: 12px; padding: 11px 13px 12px;
  background: #f5f8fb; border: 1px solid rgba(120,132,144,.16); }
.polya__rv[hidden] { display: none; }
.polya__rv.is-busy { background: transparent; border-color: transparent; padding: 2px 0 6px; }
.polya__rv-tip { margin: 0; font-size: 12.5px; color: #8b98a5; }
.polya__rv-hd { display: flex; align-items: center; gap: 10px; }
.polya__rv-g { flex: none; min-width: 52px; height: 32px; line-height: 32px; padding: 0 10px;
  text-align: center; border-radius: 10px; font-size: 16px; font-weight: 800;
  letter-spacing: .5px; color: #fff; background: #8b98a5; }
.polya__rv-sc { font-size: 12.5px; color: #8b98a5; }
.polya__rv-sc b { font-size: 19px; font-weight: 800; color: #2c3a47; margin-right: 2px; }
.polya__rv-lb { margin-left: auto; font-size: 12px; color: #9aa6b2; }
.polya__rv-dims { margin-top: 9px; display: grid; gap: 4px; }
.polya__rv-d { display: grid; grid-template-columns: 60px 1fr 28px; align-items: center; gap: 8px; }
.polya__rv-k { font-size: 12px; color: #7b8794; }
.polya__rv-bar { height: 6px; border-radius: 999px; background: rgba(120,132,144,.16); overflow: hidden; }
.polya__rv-bar i { display: block; height: 100%; border-radius: 999px; background: #6f9ad6; transition: width .35s ease; }
.polya__rv-v { font-size: 12px; font-weight: 700; color: #5b6b7a; text-align: right; }
.polya__rv-note { margin: 9px 0 0; font-size: 13px; line-height: 1.55; color: #3d4b59; }
.polya__rv-save { margin: 7px 0 0; font-size: 12.5px; font-weight: 700; color: #b8860b; }
.polya__rv-save.is-a { color: #0d6b55; font-weight: 600; }
/* 等级配色：S 及以上用金色（进学习成就），A 绿、B 蓝，C/D 走灰 */
.polya__rv.is-sss .polya__rv-g, .polya__rv.is-ss .polya__rv-g, .polya__rv.is-s .polya__rv-g { background: #d99a2b; }
.polya__rv.is-sss .polya__rv-bar i, .polya__rv.is-ss .polya__rv-bar i, .polya__rv.is-s .polya__rv-bar i { background: #dfa940; }
.polya__rv.is-a .polya__rv-g { background: #12946f; }
.polya__rv.is-a .polya__rv-bar i { background: #2aa987; }
.polya__rv.is-b .polya__rv-g { background: #4a86c5; }
.polya__rv.is-c .polya__rv-g { background: #98a4b0; }
.polya__rv.is-d .polya__rv-g { background: #b9c1c9; }
.polya__rv.is-c .polya__rv-bar i, .polya__rv.is-d .polya__rv-bar i { background: #b9c1c9; }
.polya__clear { border: none; background: transparent; color: #9aa6b2; font: inherit; font-size: 12.5px; cursor: pointer; padding: 4px 10px; border-radius: 999px; transition: color .18s, background .18s; }
.polya__clear:hover { color: #e5484d; background: rgba(229,72,77,.08); }
/* 波利亚阅读/思考期间：输入区灰色禁用 */
.polya__composer textarea.is-locked, .polya__composer textarea:disabled { background: rgba(120,132,144,.08); color: #98a2ab; cursor: not-allowed; }
.polya__composer #polya-send.is-disabled, .polya__composer #polya-send:disabled,
.polya__composer #polya-finish.is-disabled, .polya__composer #polya-finish:disabled { opacity: .5; cursor: not-allowed; }


/* AI 辅导（thk-help）工具条 */
.thk-help-popup .thk-help-actions .vc-btn { flex: 1; height: 44px; padding: 0 12px; border-radius: 12px; }
.thk-help-popup .thk-help-actions .vc-btn svg { width: 22px; height: 22px; }
.thk-help-popup .thk-help-actions .chat__send { width: auto; min-width: 76px; height: 44px; padding: 0 16px; border-radius: 12px; border: none; font-family: inherit; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(135deg,#FFC83D,#1FC8E0); box-shadow: 0 6px 16px rgba(31,140,170,.25); cursor: pointer; transition: transform .2s, box-shadow .2s; }

/* report-chat 工具条（按钮行） */
.report-chat__actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.report-chat__composer .vc-btn { flex: 1; }

/* ============ 语音通话（端到端纯语音）浮层 ============ */
.vc-call {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(150deg, rgba(10,40,70,.93), rgba(18,60,90,.87)); backdrop-filter: blur(6px);
  padding: 20px; box-sizing: border-box;
}
.vc-call__head { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 14px 18px; }
.vc-call__dot { width: 9px; height: 9px; border-radius: 50%; background: #22E07A; animation: vcDot 1.4s ease-in-out infinite; }
@keyframes vcDot { 0%,100% { box-shadow: 0 0 0 0 rgba(34,224,122,.6);} 50% { box-shadow: 0 0 0 6px rgba(34,224,122,0);} }
.vc-call__title { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .5px; }
.vc-call__close { margin-left: auto; width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.vc-call__close:hover { background: rgba(255,255,255,.28); }
.vc-call__mic { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.3); }
.vc-call__mic svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vc-call.is-listening .vc-call__mic { border-color: #FF8A6B; background: rgba(255,110,120,.28); animation: vcMic 1.2s ease-in-out infinite; }
@keyframes vcMic { 0%,100% { box-shadow: 0 0 0 0 rgba(255,110,120,.5);} 50% { box-shadow: 0 0 0 14px rgba(255,110,120,0);} }
.vc-call__status { color: rgba(255,255,255,.92); font-size: 15px; font-weight: 600; text-align: center; min-height: 20px; }
.vc-call__msgs { width: 100%; max-width: 560px; max-height: 38vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.vc-call__msg { display: flex; align-items: flex-start; gap: 8px; }
.vc-call__msg .vc-call__who { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.85); background: rgba(255,255,255,.16); padding: 3px 8px; border-radius: 999px; }
.vc-call__msg-tx { background: rgba(255,255,255,.12); color: #fff; padding: 9px 12px; border-radius: 12px; font-size: 14px; line-height: 1.55; word-break: break-word; max-width: 86%; }
.vc-call__msg.is-ai { align-self: flex-start; }
.vc-call__msg.is-user { align-self: flex-end; flex-direction: row-reverse; }
.vc-call__msg.is-user .vc-call__msg-tx { background: rgba(31,200,224,.3); }
.vc-call__hint { color: rgba(255,255,255,.6); font-size: 12px; text-align: center; max-width: 420px; line-height: 1.5; }
.vc-call__end { height: 46px; padding: 0 26px; border: none; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(135deg,#F0566B,#FF8A6B); box-shadow: 0 8px 20px rgba(240,86,107,.4); transition: transform .2s, box-shadow .2s; }
.vc-call__end:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(240,86,107,.5); }

/* 自由探索 · 拍照上传 */
/* 第六模块：左消息区 + 右侧输入栏（输入框在右，不占底部竖直空间） */
.explore-chat__left { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.explore-composer { flex: none; width: 280px; display: flex; flex-direction: column; gap: 10px; padding-left: 16px; border-left: 1px solid var(--line); }
.explore-composer textarea {
  width: 100%; flex: 1; min-height: 140px; resize: none;
  padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(255,255,255,.6); font-family: inherit; font-size: 14px;
  color: var(--ink); outline: none; transition: border-color .25s var(--ease);
}
.explore-composer textarea:focus { border-color: var(--c-cyan); }
.explore-composer .explore-chat-actions { display: flex; flex-direction: row; gap: 8px; }
.explore-composer .explore-chat-actions .mic-btn { width: 44px; height: 44px; padding: 0; border-radius: 12px; }
.explore-composer .explore-chat-actions .mic-btn span { display: none; }   /* 图标化：隐藏文字标签 */
.explore-composer .explore-chat-actions .mic-btn svg { width: 20px; height: 20px; }
.explore-composer .explore-chat-actions .chat__send { width: 48px; height: 44px; padding: 0; display: grid; place-items: center; }
.explore-composer .explore-chat-actions .chat__send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.explore-composer .explore-chat-actions .chat__send:hover { transform: translateY(-1px); }
.explore-composer .explore-chat-actions .chat__send:active { transform: translateY(0) scale(0.96); }
.explore-composer .chat__status { min-height: 16px; }
@media (max-width: 760px) {
  .explore-chat { flex-direction: column; }
  .explore-composer { width: 100%; border-left: none; padding-left: 0; }
  .explore-composer textarea { min-height: 60px; flex: none; }
}
/* 待发送图片控件：空状态=相机图标入口，上传后=小缩略图 */
.explore-photo { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 14px; border: 1px dashed var(--line); background: rgba(255, 255, 255, 0.35); cursor: pointer; overflow: hidden; transition: border-color .25s var(--ease), background .25s var(--ease); }
.explore-photo:hover { border-color: var(--c-cyan); background: rgba(31, 200, 224, 0.06); }
.explore-photo__empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; color: var(--c-cyan-deep); font-size: 13px; font-weight: 600; }
.explore-photo__empty svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.explore-photo__preview { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; padding: 8px; }
.explore-photo__preview img { height: 72px; width: auto; max-width: 100%; border-radius: 10px; object-fit: contain; }
.explore-photo__clear { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; }
.explore-photo__clear:hover { background: rgba(0, 0, 0, 0.75); }
/* 修复：display:flex 会覆盖 hidden 属性，需显式让 [hidden] 生效 */
.explore-photo__empty[hidden], .explore-photo__preview[hidden] { display: none !important; }
.explore-bubble-img { display: block; max-width: 180px; max-height: 180px; border-radius: 10px; margin-bottom: 6px; }
.explore-bubble-txt { font-size: 14px; }

/* 轻提示 */
.toast {
  position: fixed; left: 50%; bottom: 36px; transform: translate(-50%, 20px);
  background: rgba(20, 30, 50, 0.92); color: #fff; padding: 10px 18px;
  border-radius: 999px; font-size: 13px; z-index: 500; opacity: 0;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); pointer-events: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* AI 模块自适应 */
@media (max-width: 1180px) { .ai-types { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .ai-types { grid-template-columns: repeat(2, 1fr); }
  .qanswer { grid-template-columns: 1fr; }
  .explain { grid-template-columns: 1fr; min-height: 0; }
}
@media (max-width: 480px) { .ai-types { grid-template-columns: 1fr; } }

/* ===================== 横屏优先适配 ===================== */
@media (orientation: portrait) {
  .home__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .module { min-height: 160px; }
  .vlist__grid { grid-template-columns: repeat(2, 1fr); }
  .explain { grid-template-columns: 1fr; }
  .module--banner { flex-direction: column; align-items: stretch; gap: 10px; }
  .module--banner .module__cta { margin: 0; }
}
@media (max-width: 720px) {
  .home__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .module { min-height: auto; }
  .vlist__grid { grid-template-columns: 1fr; }
  .login-card { padding: 34px 26px 26px; }
  .topbar__titles { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* 关闭"减弱动态效果"时，禁用入场动画会让本应淡入的卡片停在 opacity:0 而不可见；
     这里强制这些卡片恢复可见，避免整页/整块区域空白。
     覆盖面：学段课程(gate-card)、年级(grade-card)、课程(course-card/cw-card)、
     高一想(module/quarter-card/soon-card)、集合AI题型(atype/aitd-card/aitd-cell)、
     实验选择(exp-pick/apt-card)、视频(heor/vcard/vhero)、高阶思维(thk-*)等。 */
  .gate-card, .cw-card, .grade-card, .course-card, .soon-card, .quarter-card,
  .atype, .exp-pick, .apt-card, .aitd-card, .aitd-cell,
  .module, .module-card, .placeholder, .vcard, .vhero, .ex-card, .exppick, .exp-icon,
  .thk-intro, .thk-ucard, .thk-flow-item, .thk-problems, .thk-expapp { opacity: 1 !important; transform: none !important; }
}

/* ===================== 高阶思维训练（thinking · 波利亚四步法） ===================== */
/* —— intro 屏 —— */
.thk-intro { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.thk-hero { padding: 26px 30px; text-align: center; }
.thk-hero__badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 2px; padding: 4px 12px; border-radius: 999px; color: var(--c-cyan-deep); background: rgba(31,200,224,.14); margin-bottom: 10px; }
.thk-hero__title { font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.thk-hero__quote { font-size: 15px; line-height: 1.85; color: var(--ink); font-style: italic; max-width: 640px; margin: 0 auto; }
.thk-hero__author { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.thk-isteps { padding: 18px 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.thk-istep { display: flex; gap: 10px; align-items: flex-start; }
.thk-istep__no { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--grad); }
.thk-istep__name { font-size: 14px; color: var(--ink); }
.thk-istep p { font-size: 12px; color: var(--ink-soft); line-height: 1.6; margin-top: 2px; }
.thk-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.thk-card { position: relative; padding: 22px 24px; border-radius: var(--radius-lg); cursor: pointer; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--shadow-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.thk-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.thk-card--mother { border-top: 4px solid var(--c-cyan); }
.thk-card--variant { border-top: 4px solid var(--c-mint); }
.thk-card__no { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 3px 10px; border-radius: 999px; color: #fff; background: var(--grad); margin-bottom: 8px; }
.thk-card--variant .thk-card__no { background: linear-gradient(135deg, var(--c-mint), var(--c-cyan)); }
.thk-card__title { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.thk-card__desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; }
.thk-card__cta { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--c-cyan-deep); }
.thk-intro__tip { font-size: 12.5px; color: var(--ink-soft); text-align: center; }

/* —— solve 屏（左右两栏，复用 .explain）—— */
.thk-solve.explain { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 20px; align-items: start; }
.thk-solve__left { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; }
.thk-stem { padding: 18px 20px; border-radius: var(--radius-lg); font-size: clamp(14px, 1.1vw, 16px); line-height: 1.95; }
.thk-stem header { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--c-cyan-deep); margin-bottom: 8px; }
.thk-figure-wrap { padding: 14px; border-radius: var(--radius-lg); }
.thk-figure { width: 100%; height: auto; display: block; }
#thk-fig svg { animation: thkFigIn 0.6s var(--ease); }   /* 图象随理解推进淡入 */
@keyframes thkFigIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.thk-plan-recap { margin-bottom: 14px; padding: 14px 16px; border-radius: 12px; border-left: 3px solid var(--c-cyan); }
.thk-plan-recap header { font-size: 12px; font-weight: 700; color: var(--c-cyan-deep); margin-bottom: 4px; letter-spacing: 1px; }
.thk-plan-recap p { font-size: 14px; line-height: 1.8; color: var(--ink); }

.thk-stepbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.thk-step { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.55); color: var(--ink-soft); font-size: 12.5px; font-family: inherit; transition: all .25s var(--ease); }
.thk-step b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(20,40,60,.08); font-size: 12px; }
.thk-step.is-active { border-color: var(--c-cyan); background: rgba(31,200,224,.14); color: var(--c-cyan-deep); font-weight: 700; }
.thk-step.is-active b { background: var(--c-cyan); color: #fff; }
.thk-step.is-done b { background: var(--c-mint); color: #fff; }
.thk-stepbar__line { flex: 1; height: 2px; background: rgba(20,40,60,.12); min-width: 10px; }
.thk-govariant { margin-top: 4px; height: 42px; }

.thk-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.thk-step-head__no { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; background: var(--grad); }
.thk-step-head__name { font-size: 19px; font-weight: 700; color: var(--ink); }
.thk-step-tip { font-size: 13px; color: var(--ink-soft); margin-bottom: 12px; }

/* —— 第1步 理解卡片（三色）—— */
.thk-understand { display: flex; flex-direction: column; gap: 10px; }
.thk-ucard { display: flex; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.7); border-left: 3px solid var(--c-cyan); }
.thk-ucard[data-kind="def"] { border-left-color: var(--c-mint); }
.thk-ucard[data-kind="question"] { border-left-color: var(--c-yellow); background: rgba(255,200,61,.08); }
.thk-ucard__tag { flex: none; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(31,200,224,.14); color: var(--c-cyan-deep); height: fit-content; }
.thk-ucard[data-kind="def"] .thk-ucard__tag { background: rgba(37,185,154,.16); color: var(--c-mint-deep); }
.thk-ucard[data-kind="question"] .thk-ucard__tag { background: rgba(255,200,61,.22); color: var(--c-yellow-deep); }
.thk-ucard__body p { line-height: 1.75; }
.thk-ucard__trans { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px !important; }

/* —— 第2步 思路流（青推理 / 黄卡点 / 青绿破局）—— */
.thk-flow { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.thk-flow-item { padding: 10px 13px; border-radius: 12px; border: 1px solid var(--line); border-left: 3px solid var(--c-cyan); background: linear-gradient(155deg, rgba(255,255,255,.94), rgba(237,247,255,.82)); }
.thk-flow-item p { margin: 5px 0 0; line-height: 1.75; }
.thk-flow-label { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(31,200,224,.14); color: var(--c-cyan-deep); }
.thk-flow-item.role-stuck { border-left-color: var(--c-yellow); background: linear-gradient(155deg, rgba(255,252,242,.96), rgba(255,241,207,.82)); }
.thk-flow-item.role-stuck .thk-flow-label { background: rgba(255,200,61,.22); color: var(--c-yellow-deep); }
.thk-flow-item.role-method, .thk-flow-item.role-breakthrough { border-left-color: var(--c-mint); background: linear-gradient(155deg, rgba(232,255,249,.96), rgba(214,250,241,.82)); }
.thk-flow-item.role-method .thk-flow-label, .thk-flow-item.role-breakthrough .thk-flow-label { background: rgba(37,185,154,.16); color: var(--c-mint-deep); }
.thk-outline { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.7); border: 1px solid var(--line); }
.thk-outline header { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--c-cyan-deep); margin-bottom: 8px; }
.thk-outline__row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(20,40,60,.1); }
.thk-outline__row:last-child { border-bottom: 0; }
.thk-outline__key { flex: none; width: 84px; font-size: 12px; font-weight: 700; color: var(--c-cyan-deep); }
.thk-outline__val { font-size: 13.5px; line-height: 1.7; }

/* —— 第3步 解答块 —— */
.thk-solve-block { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.75); border: 1px solid var(--line); border-left: 3px solid var(--c-cyan); margin-bottom: 12px; }
.thk-solve-block__tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: #fff; background: var(--grad); margin-bottom: 6px; }
.thk-solve-block__think { font-size: 12.5px; color: var(--ink-soft); font-style: italic; margin: 4px 0 8px; line-height: 1.6; }
.thk-solve-block__body { line-height: 1.85; }
.thk-solve-block__tex { margin: 8px 0; padding: 10px 14px; background: rgba(31,200,224,.06); border-left: 3px solid var(--c-cyan); border-radius: 0 10px 10px 0; }
.thk-solve-block__ask { margin-top: 10px; display: flex; justify-content: flex-end; }
.thk-solve-block__ask .btn { height: 36px; font-size: 13px; }

/* —— 第4步 回顾 —— */
.thk-review-ideas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.thk-idea { padding: 11px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.65; background: rgba(255,255,255,.7); border: 1px solid var(--line); }
.thk-idea--cyan { border-left: 3px solid var(--c-cyan); }
.thk-idea--mint { border-left: 3px solid var(--c-mint); }
.thk-idea--yellow { border-left: 3px solid var(--c-yellow); }
.thk-open-q { padding: 14px 16px; border-radius: 14px; background: rgba(255,200,61,.1); border: 1px solid rgba(255,200,61,.4); border-left: 3px solid var(--c-yellow); font-size: 14px; line-height: 1.75; margin-bottom: 14px; }

/* —— 步内浮层（向波利亚请教）—— */
.thk-tutor-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 300; background: rgba(20,30,50,.45); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.thk-tutor-dialog { width: min(580px, 94vw); max-height: 86vh; overflow: auto; background: #fff; border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-2); }
.thk-tutor__head { display: flex; align-items: center; justify-content: space-between; }
.thk-tutor__tag { font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; color: #fff; background: var(--grad); }
.thk-tutor__close { width: 32px; height: 32px; border: none; background: rgba(20,40,60,.06); border-radius: 50%; cursor: pointer; font-size: 16px; color: var(--ink-soft); }
.thk-tutor__close:hover { background: rgba(20,40,60,.12); }
.thk-tutor-source { padding: 12px 14px; border-radius: 12px; background: rgba(31,200,224,.06); border-left: 3px solid var(--c-cyan); font-size: 13.5px; line-height: 1.8; }
.thk-tutor-source__label { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--c-cyan-deep); }
.thk-tutor-source__tex { margin-top: 8px; }

/* —— variant 屏 —— */
.thk-variant { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.thk-variant__head { display: flex; align-items: center; justify-content: space-between; }
.thk-variant__badge { font-size: 12px; font-weight: 700; letter-spacing: 1px; padding: 4px 14px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--c-mint), var(--c-cyan)); }
.thk-block { padding: 16px 18px; }
.thk-block__head { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.thk-upload { margin-bottom: 12px; }
.thk-upload__drop { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; text-align: center; padding: 18px; border: 2px dashed rgba(31,200,224,.45); border-radius: 14px; color: var(--c-cyan-deep); font-size: 13px; }
.thk-upload__drop svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.thk-upload__drop:hover { background: rgba(31,200,224,.06); }
.thk-upload__preview { margin-top: 12px; max-width: 100%; max-height: 240px; border-radius: 12px; box-shadow: var(--shadow-1); }
.thk-grade-note { font-size: 12px; color: var(--ink-soft); margin-top: 8px; line-height: 1.6; }
.thk-standard { padding: 14px 18px; }
.thk-standard > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--c-cyan-deep); padding: 4px 0; list-style: none; }
.thk-standard > summary::-webkit-details-marker { display: none; }
.thk-standard[open] > summary { margin-bottom: 10px; }
/* ===== 集合·E(n) 交互实验（可操作 + 点击推进） ===== */
.thk-expapp { padding: 16px 18px; }
.thk-expapp__head { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.thk-expapp__no { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 11px; font-weight: 800; }
.thk-expapp__tip { font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; margin: 4px 0 12px; }
.thk-expapp__stage { padding: 6px 0 2px; }
.thk-en { display: grid; gap: 10px; }
.thk-en__row { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.thk-en__lbl { flex: none; width: 34px; text-align: center; font-weight: 800; color: var(--c-cyan-deep); }
.thk-en__nums { font-size: 15px; letter-spacing: 2px; }
.thk-en__slots { display: inline-flex; gap: 8px; }
.thk-cslot { width: 40px; height: 40px; border-radius: 10px; border: 1px dashed rgba(12,147,166,.6); background: rgba(12,147,166,.06); color: #0C93A6; font-size: 16px; font-weight: 800; cursor: pointer; transition: transform .2s var(--ease), border-color .2s; }
.thk-cslot.is-full { border-style: solid; background: rgba(12,147,166,.16); }
.thk-cslot:hover { transform: translateY(-2px); }
.thk-en__chips { display: inline-flex; gap: 10px; padding-left: 46px; }
.thk-cchip { width: 36px; height: 36px; border-radius: 50%; border: none; background: linear-gradient(135deg,#5A4FB0,#6D60C8); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 10px rgba(90,79,176,.3); transition: transform .2s var(--ease), background .2s; }
.thk-cchip:disabled { background: #b9c2cc; cursor: default; box-shadow: none; }
.thk-cchip:not(:disabled):hover { transform: scale(1.1); }
.thk-en__t { padding: 8px 12px; border-radius: 12px; background: rgba(255,200,61,.12); border: 1px solid rgba(229,169,47,.28); font-size: 14px; font-weight: 700; text-align: center; color: var(--ink); }
.thk-en__check { font-size: 12.5px; font-weight: 700; text-align: center; }
.thk-cok { color: #158A6F; } .thk-cbad { color: #D9485F; } .thk-cmute { color: var(--ink-soft); }
.thk-en-reveal { display: grid; gap: 8px; }
.thk-en-card { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.7); }
.thk-en-card b { display: block; font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.thk-en-card p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); }
.thk-en-card__s { padding: 7px 10px; border-radius: 9px; background: rgba(104,95,208,.09); font-size: 12.5px; font-weight: 700; color: #5A4FB0; }
.thk-en-card.is-cur { border-color: rgba(104,95,208,.5); box-shadow: 0 6px 16px rgba(104,95,208,.12); }
/* 预设回顾反思 */
.thk-preset { display: grid; gap: 12px; }
.thk-preset__q { padding: 12px 14px; border-radius: 14px; background: rgba(31,200,224,.07); border: 1px solid rgba(31,200,224,.2); }
.thk-preset__no { font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--c-cyan-deep); }
.thk-preset__q h4 { margin: 6px 0 0; font-size: 15px; color: var(--ink); }
.thk-preset__g { padding: 12px 14px; border-radius: 14px; background: rgba(255,200,61,.08); border: 1px solid rgba(229,169,47,.24); }
.thk-preset__g b { display: block; margin-bottom: 5px; font-size: 12px; color: var(--c-yellow-deep); }
.thk-preset__g p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--ink); }
/* ===== 高阶思维·纯文字标准解析（无左侧图形，(1)(2)(3) 分问） ===== */
/* 布局 rail：左=题目 + 其下方竖排四步法流程图；右=当前步骤内容。
   两栏用固定比例，保证内容框宽度不随步骤内容伸缩（按最大宽度固定）。 */
.thk-solve.rail { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: stretch; }
.thk-solve.rail .thk-stem { width: 100%; max-width: none; min-width: 0; align-self: start; }
.thk-solve.rail .thk-solve__right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.thk-solve.rail .thk-stepbar { margin: 4px 2px 0; }
.thk-solve.rail .thk-solve__content { min-height: 0; }
/* 四步法流程图：题目下方竖排步骤，填满左栏剩余空白 */
.thk-solve.rail .thk-steps--vertical { display: flex; flex-direction: column; width: 100%; max-width: none; min-width: 0; gap: 6px; padding: 14px; border-radius: var(--radius-lg); background: rgba(255,255,255,.4); border: 1px solid var(--line); flex: 1; }
.thk-steps--vertical .thk-steps__cap { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--c-cyan-deep); margin-bottom: 2px; }
/* 覆盖 .thk-step / .thk-steps 继承样式，杜绝标签被裁切 */
.thk-solve.rail .thk-steps--vertical .thk-step { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 10px 14px; border-radius: 12px; overflow: visible; white-space: nowrap; flex: 1; }
.thk-solve.rail .thk-steps--vertical .thk-step b { flex: none; }
.thk-solve.rail .thk-steps--vertical .thk-step > span { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: visible; }
.thk-answer { display: grid; gap: 12px; }
.thk-answer__head { font-size: 13px; font-weight: 800; color: var(--c-cyan-deep); letter-spacing: .5px; }
.thk-answer__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.thk-answer__chip { padding: 3px 10px; border-radius: 999px; background: rgba(31,200,224,.1); color: var(--c-cyan-deep); font-size: 11.5px; font-weight: 700; }
.thk-aq { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.8); border: 1px solid var(--line); border-left: 3px solid var(--c-cyan); }
.thk-aq__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.thk-aq__no { padding: 3px 9px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 11px; font-weight: 800; }
.thk-aq__head b { font-size: 15px; color: var(--ink); }
.thk-aq__method { margin-left: auto; font-size: 11.5px; color: #5A4FB0; font-weight: 700; background: rgba(104,95,208,.1); padding: 3px 9px; border-radius: 999px; }
.thk-aq__body { line-height: 1.9; color: var(--ink); }
.thk-aq__body p { margin: 0 0 8px; }
.thk-aq__eq { margin: 10px 0; padding: 10px 14px; background: rgba(31,200,224,.06); border-left: 3px solid var(--c-cyan); border-radius: 0 10px 10px 0; }
.thk-aq__key { margin-top: 8px; padding: 8px 11px; border-radius: 10px; background: rgba(255,200,61,.12); font-size: 12.5px; color: var(--ink); display: flex; gap: 8px; }
.thk-aq__key b { color: var(--c-yellow-deep); flex: none; }
.thk-answer__concl { margin-top: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(35,163,107,.1); border: 1px solid rgba(35,163,107,.24); }
.thk-answer__concl b { display: block; margin-bottom: 5px; font-size: 12px; color: #158A6F; }
.thk-answer__concl p { margin: 0; font-size: 14px; line-height: 1.85; color: var(--ink); }
/* 步骤底部操作按钮：普通宽度、右对齐 */
.thk-step-actions .btn { width: auto; min-height: 42px; padding: 0 22px; font-size: 14.5px; }

/* thinking 内对话区高度 */
.thk-solve__right .chat__msgs, .thk-variant .chat__msgs, .thk-tutor-dialog .chat__msgs { max-height: 340px; }
/* 右侧步骤内容区(8-10)：固定大小"底板"——无论内容多少，尺寸/位置都不变，内部滚动 */
#thk-step-box { height: calc(100vh - 124px); display: flex; flex-direction: column; overflow: hidden; padding: 16px;
  background: rgba(255, 255, 255, 0.45); border: 1px solid var(--line); border-radius: var(--radius-lg); }
/* 上方滚动区：内容从顶部出现，多了内部滚动；底栏固定在窗口底部(内容少时中间留白) */
.thk-step-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 6px; scroll-behavior: smooth; scrollbar-gutter: stable; }
.thk-step-scroll::-webkit-scrollbar { width: 7px; }
.thk-step-scroll::-webkit-scrollbar-thumb { background: rgba(31, 200, 224, 0.32); border-radius: 4px; }
.thk-step-scroll::-webkit-scrollbar-track { background: transparent; }
.thk-solve__right .chat__msgs { max-height: none; }   /* 聊天消息随滚动区滚动 */
/* 输入区：一个框（文字框 + 发送框），语音钮为圆形、置于右下角 */
#thk-step-box .chat__bar { display: flex; flex-direction: row; align-items: flex-end; gap: 8px;
  padding: 8px 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.82); border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(40, 60, 90, 0.07); }
#thk-step-box .chat__bar textarea { order: 1; flex: 1; min-width: 0; min-height: 44px; max-height: 120px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.6);
  font-family: inherit; font-size: 14px; color: var(--ink); resize: none; outline: none; transition: border-color 0.25s var(--ease); }
#thk-step-box .chat__bar textarea:focus { border-color: var(--c-cyan); }
#thk-step-box .chat__bar .chat__send { order: 2; width: auto; min-width: 72px; height: 52px; padding: 0 22px; border-radius: 14px; border: none; font-family: inherit; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #FFC83D, #1FC8E0); box-shadow: 0 6px 16px rgba(31,140,170,0.25); cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
#thk-step-box .chat__bar .chat__send:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31,140,170,0.35); }
#thk-step-box .chat__bar .chat__send:active { transform: translateY(0) scale(0.97); }
#thk-step-box .chat__bar .mic-btn { order: 3; width: 52px; height: 52px; flex: none; padding: 0; border-radius: 50%; }
#thk-step-box .chat__bar .mic-btn svg { width: 24px; height: 24px; }
#thk-step-box .chat__bar .mic-btn span { display: none; }

@media (max-width: 900px) {
  .thk-solve.explain { grid-template-columns: 1fr; }
  .thk-solve__left { position: static; }
  .thk-isteps { grid-template-columns: repeat(2, 1fr); }
  .thk-cards { grid-template-columns: 1fr; }
}
@media (orientation: portrait) {
  .thk-solve.explain { grid-template-columns: 1fr; }
  .thk-solve__left { position: static; }
}

/* —— thinking v3：左栏(题干+阶梯步骤+图象) / 右栏(步骤内容，最大) —— */
.thk-solve { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 16px 24px; align-items: start; max-width: 1360px; margin: 0 auto; }
.thk-solve .thk-figure-wrap { display: flex; justify-content: center; padding: 12px; }
.thk-solve .thk-figure-wrap.is-empty { display: none; }   /* 第1步未到第2卡时不显示图象区 */
.thk-solve .thk-figure-wrap .thk-figure { width: 100%; height: auto; }
.thk-solve__left { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 8px; }
.thk-stem { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.95; padding: 20px 22px; }
/* 阶梯式步骤条：四级矩形台阶（水平排列，当前步高亮） */
.thk-steps { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.thk-steps .thk-step { border-radius: 10px; padding: 8px 12px; }
.thk-steps .thk-stepbar__line { width: 12px; flex: none; align-self: center; }

/* SVG 图象文字（纯 <text>，用 fill 上色，不依赖 MathJax） */
.thk-fig-tick { font-size: 12px; fill: #6e6e73; font-family: var(--font); }
.thk-fig-label { font-size: 15px; fill: #0B7A92; font-weight: 700; font-family: var(--font); }
.thk-fig-axis { font-size: 12px; fill: #0E7A66; font-weight: 600; font-family: var(--font); }
.thk-fig-eq { font-size: 11px; fill: #B57400; font-weight: 600; font-family: var(--font); }
.thk-fig-pt { font-size: 14px; fill: #B57400; font-weight: 700; font-style: italic; }

/* 第五模块：与解题步骤同步的数学图解 */
.thk-math-figure { width: 100%; }
.thk-figure--math { overflow: visible; }
.thk-figure-caption { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 9px 12px; border-radius: 12px; background: rgba(14,129,151,.07); color: var(--ink); }
.thk-figure-caption span { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--c-cyan-deep); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .5px; }
.thk-figure-caption strong { font-size: 12px; line-height: 1.5; }
.thk-fig-title { fill: #263746; font-family: var(--font); font-size: 12px; font-weight: 800; letter-spacing: .3px; }
.thk-fig-note { fill: #5f6f7d; font-family: var(--font); font-size: 10px; }
.thk-fig-grid { fill: none; stroke: #758390; stroke-width: 1.45; }
.thk-fig-curve { fill: none; stroke: #0B7A92; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.thk-fig-guide { fill: none; stroke: #B57400; stroke-width: 1.7; stroke-dasharray: 5 4; }
.thk-fig-point { fill: #FFC83D; stroke: #fff; stroke-width: 2; }
.thk-fig-core { fill: #0B7A92; stroke: #fff; stroke-width: 1.5; }
.thk-fig-domain { fill: none; stroke: #25B99A; stroke-width: 7; stroke-linecap: round; opacity: .8; }
.thk-fig-range { fill: none; stroke: #9D6FE0; stroke-width: 7; stroke-linecap: round; opacity: .75; }
.thk-fig-callout rect { fill: rgba(255,250,232,.97); stroke: #E6B12D; stroke-width: 1.4; }
.thk-fig-callout .thk-fig-label { font-size: 12px; fill: #8A5B00; }
.thk-fig-callout .thk-fig-axis { font-size: 10px; fill: #665638; }
.thk-fig-solid { fill: rgba(31,200,224,.045); stroke: #0B7A92; stroke-width: 2.6; stroke-linejoin: round; }
.thk-fig-centerline { stroke: #9EADBA; stroke-width: 1.3; stroke-dasharray: 6 5; }
.thk-fig-ball { fill: rgba(255,200,61,.24); stroke: #B57400; stroke-width: 2.2; }
.thk-fig-ball--ghost { fill: rgba(255,200,61,.1); stroke-dasharray: 5 4; }
.thk-fig-ball--blue { fill: rgba(31,200,224,.13); stroke: #0B7A92; }
.thk-fig-ball--purple { fill: rgba(157,111,224,.22); stroke: #7C52B8; }
.thk-fig-radius { stroke: #B57400; stroke-width: 1.5; }
.thk-fig-contact { fill: none; stroke: #25B99A; stroke-width: 7; stroke-linecap: round; opacity: .75; }
.thk-fig-branch { fill: none; stroke: #48A6D8; stroke-width: 2.6; }
.thk-fig-branch--secondary { stroke: #9D6FE0; stroke-width: 2.1; }
.thk-fig-node { stroke-width: 1.8; }
.thk-fig-node--cyan { fill: rgba(31,200,224,.14); stroke: #0B7A92; }
.thk-fig-node--yellow { fill: rgba(255,200,61,.18); stroke: #B57400; }
.thk-fig-node--red { fill: rgba(242,118,92,.15); stroke: #D85E48; }

/* 第 3 步 策略回顾 */
.thk-recap { padding: 14px 16px; border-left: 3px solid var(--c-cyan); }
.thk-recap header { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--c-cyan-deep); margin-bottom: 8px; }
.thk-strat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.thk-strat { font-size: 13.5px; line-height: 1.7; padding: 8px 12px; border-radius: 10px; border-left: 3px solid var(--c-cyan); background: rgba(255, 255, 255, .55); }
.thk-strat span { display: inline-block; font-size: 11px; font-weight: 700; color: var(--c-cyan-deep); margin-right: 8px; }
.thk-strat.role-method, .thk-strat.role-breakthrough { border-left-color: var(--c-mint); }
.thk-strat.role-method span, .thk-strat.role-breakthrough span { color: var(--c-mint-deep); }
.thk-strat.role-stuck { border-left-color: var(--c-yellow); }
.thk-strat.role-stuck span { color: var(--c-yellow-deep); }

/* 第 4 步 引导文字 */
.thk-fourq__guide { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px !important; line-height: 1.6; }

@media (max-width: 980px) {
  .thk-solve { grid-template-columns: 1fr; }
  .thk-solve__left { position: static; }
  .thk-solve .thk-figure-wrap .thk-figure { width: 100%; max-width: 520px; }
}
@media (orientation: portrait) {
  .thk-solve { grid-template-columns: 1fr; }
  .thk-solve__left { position: static; }
}

/* —— thinking v2 补充（线性流程 / 精确图象 / 四问反思）—— */
.thk-intro__enter { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.thk-intro__lead { font-size: 14px; color: var(--ink-soft); line-height: 1.8; max-width: 560px; }
.thk-intro__lead strong { color: var(--c-cyan-deep); }
.thk-start { height: 48px; padding: 0 30px; font-size: 15px; }
.thk-step-actions { flex: none; margin-top: 12px; padding-top: 12px; display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  border-top: 1px solid var(--line); }
/* 第4步底栏：输入框(整行) + 下一题按钮(右)，一起粘在底板底部 */
.thk-step-actions.thk-foot-chat { flex-direction: column; align-items: stretch; gap: 8px; }
.thk-step-actions.thk-foot-chat .chat__bar { width: 100%; }
.thk-step-actions.thk-foot-chat > .btn { align-self: flex-end; }

/* 理解卡片（带序号，第 1 步逐句） */
.thk-ucard { align-items: flex-start; }
.thk-ucard__no { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--grad); }
.thk-ucard__src { font-weight: 600; color: var(--ink); }
.thk-ucard__trans { font-size: 13px; color: var(--ink-soft); margin-top: 4px !important; }

/* 第 2 步 问题清单 */
.thk-problems { padding: 14px 16px; }
.thk-problems header { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--c-cyan-deep); margin-bottom: 6px; }
.thk-problems ol { margin: 0; padding-left: 22px; }
.thk-problems li { font-size: 14px; line-height: 1.9; color: var(--ink); }

/* 变式迁移提示 */
.thk-transfer { padding: 14px 16px; border-left: 3px solid var(--c-mint); }
.thk-transfer header { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--c-mint-deep); margin-bottom: 4px; }
.thk-transfer p { font-size: 13.5px; line-height: 1.75; color: var(--ink); }

/* 第 4 步 四问反思 */
.thk-fourqs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.thk-fourq { padding: 13px 16px; border-radius: 14px; background: rgba(255,255,255,.7); border: 1px solid var(--line); border-left: 3px solid var(--c-cyan); }
.thk-fourq:nth-child(2) { border-left-color: var(--c-mint); }
.thk-fourq:nth-child(3) { border-left-color: var(--c-yellow); }
.thk-fourq:nth-child(4) { border-left-color: var(--c-cyan-deep); }
.thk-fourq__key { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 3px 10px; border-radius: 999px; color: #fff; background: var(--grad); margin-bottom: 6px; }
.thk-fourq__q { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.6; }
.thk-fourq__hint { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px !important; line-height: 1.6; }

/* 精确图象内的文字（SVG foreignObject） */
.thk-figure-wrap { display: flex; justify-content: center; }
.thk-fig-tick { font-size: 11px; color: #6e6e73; text-align: center; line-height: 18px; }
.thk-fig-label { font-size: 15px; color: #0B7A92; font-weight: 700; text-align: right; line-height: 22px; }
.thk-fig-axis { font-size: 11px; color: #0E7A66; font-weight: 600; line-height: 18px; }
.thk-fig-eq { font-size: 11px; color: #B57400; font-weight: 600; text-align: center; line-height: 18px; }


/* =========================================================
   第六模块「自由探索」—— 两窗口选择 + 自由对话
   ========================================================= */

/* —— intro：两窗口选择页 —— */
.explore-intro { max-width: 1080px; margin: 0 auto; width: 100%; }

.ewin-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  align-items: stretch;
}

/* 窗口卡（<button> 或 <a>，复用主页 module 卡的白玻璃质感） */
.ewin {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px 28px 24px;
  text-align: left; text-decoration: none; color: var(--ink);
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  font-family: inherit;
  opacity: 0; transform: translateY(12px);
  animation: cardIn 0.55s var(--ease) forwards;
  animation-delay: var(--d, 0s);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.ewin::before { /* 顶部高光 */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
  pointer-events: none; opacity: 0.55;
}
.ewin:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(31, 140, 170, 0.18);
  border-color: rgba(31, 200, 224, 0.45);
}
.ewin:active { transform: translateY(-2px) scale(0.995); }
.ewin > * { position: relative; z-index: 1; }

.ewin__chip {
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center;
}
.ewin__chip svg { width: 28px; height: 28px; fill: none; stroke: #fff;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18)); }
.ewin__chip--cyan { background: linear-gradient(135deg, #5BD6E8, var(--c-cyan)); box-shadow: 0 8px 18px rgba(31,200,224,0.32); }
.ewin__chip--yellow { background: linear-gradient(135deg, #FFD86B, var(--c-yellow)); box-shadow: 0 8px 18px rgba(255,200,61,0.34); }
.ewin__chip--pink { background: linear-gradient(135deg, #FFA7C4, #F5576C); box-shadow: 0 8px 18px rgba(245,87,108,0.30); }
/* 第四个窗口（灵宠内测）：用一圈暖色描边，和已上线的三个窗口区分开 */
.ewin--pet { border-color: rgba(245, 87, 108, 0.32); }
.ewin--pet:hover { border-color: rgba(245, 87, 108, 0.55); box-shadow: 0 22px 48px rgba(245, 87, 108, 0.16); }
.ewin--pet .ewin__cta { color: #D94A63; }

.ewin__tag { font-size: 12px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.5px; }
.ewin__title { font-size: clamp(20px, 1.8vw, 25px); font-weight: 700; color: var(--ink); line-height: 1.25; }
.ewin__desc { font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); flex: 1; }
.ewin__desc strong { color: var(--c-yellow-deep); font-weight: 600; }
.ewin__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: var(--c-cyan-deep);
  margin-top: 4px;
}
.ewin__cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ewin:hover .ewin__cta { gap: 10px; }

/* —— chat：左消息区 + 右侧输入栏 —— */
.explore-chat {
  flex: 1; min-height: 0;
  display: flex; flex-direction: row; gap: 14px;
  max-width: 1200px; margin: 0 auto; width: 100%;
}
.explore-chat .chat__msgs {
  flex: 1; min-height: 220px;
  padding: 6px 4px 10px;
}

/* 建议问题：挂在最后一条回答的下方（跟着内容一起滚，不再固定停在底部）。
   左边缩进对齐 AI 气泡里的文字，读起来就是「接着这几句可以问」。
   问过的那条置灰并排到最后 —— 顺序由 js/explore.js 的 suggestHtml() 负责。 */
.explore-suggest { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 2px 6px 44px; }
.esugg {
  font-family: inherit; cursor: pointer;
  font-size: 13px; line-height: 1.5; color: var(--c-cyan-deep);
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.62);
  border: 1px solid var(--line);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.esugg:hover { border-color: rgba(31,200,224,0.55); background: rgba(31,200,224,0.1); transform: translateY(-1px); }
.esugg.is-asked { color: #9aa8ac; background: rgba(255,255,255,0.45); border-color: rgba(20,40,60,0.08); }
.esugg.is-asked:hover { color: #8b9aa0; border-color: rgba(20,40,60,0.16); background: rgba(255,255,255,0.62); transform: none; }
@media (max-width: 860px) {
  .explore-suggest { padding-left: 2px; }
}

/* 百宝箱第三个窗口：课后练习与结果上传 */
.ewin__chip--purple { background: linear-gradient(135deg, #B57BFF, #7C3AED); box-shadow: 0 8px 18px rgba(124,58,237,0.34); }
/* 圆桌数学家：绿色系，与另外四个窗口区分 */
.ewin__chip--green { background: linear-gradient(135deg, #6EE7B7, #0E9F6E); box-shadow: 0 8px 18px rgba(14,159,110,0.32); }
/* 五个窗口：宽屏一屏五列，窄屏退三列 / 两列 / 一列 */
/* —— 百宝箱：五个窗口压成一屏（紧凑卡 + 五列单行）—— */
/* 这一屏的目标是「不滚」，所以标题区收窄、卡片压缩、正文截断到 4 行。 */
.ai-body.ai-body--wide { padding-left: clamp(16px, 2.4vw, 44px); padding-right: clamp(16px, 2.4vw, 44px); }
.explore-intro--five { max-width: 1320px; }
.ai-head--tight { margin-bottom: 14px; align-items: center; }
.ai-head--tight h2 { font-size: clamp(20px, 1.9vw, 26px); }
.ai-head--tight p { margin-top: 4px; font-size: 13.5px; line-height: 1.5; max-width: 80ch; }

.ewin-grid.ewin-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ewin-grid--compact .ewin { padding: 18px 16px 16px; gap: 8px; border-radius: 18px; }
.ewin-grid--compact .ewin__chip { width: 40px; height: 40px; border-radius: 12px; }
.ewin-grid--compact .ewin__chip svg { width: 21px; height: 21px; }
.ewin-grid--compact .ewin__tag { font-size: 11px; letter-spacing: 0.2px; }
.ewin-grid--compact .ewin__title { font-size: 16.5px; line-height: 1.3; }
.ewin-grid--compact .ewin__desc {
  font-size: 12.5px; line-height: 1.6; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.ewin-grid--compact .ewin__cta { font-size: 12.5px; margin-top: 2px; }
.ewin-grid--compact .ewin__cta svg { width: 15px; height: 15px; }

/* 宽度不够五列时改排两行：把卡片再压一档，保证两行也落在一屏内 */
@media (max-width: 900px) {
  .ewin-grid.ewin-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ewin-grid--compact .ewin__desc { -webkit-line-clamp: 3; }
  .ewin-grid--compact .ewin__chip { width: 36px; height: 36px; border-radius: 11px; }
  .ewin-grid--compact .ewin__chip svg { width: 19px; height: 19px; }
  .ewin-grid--compact .ewin { padding: 15px 14px 13px; gap: 7px; }
}
@media (max-width: 640px) { .ewin-grid.ewin-grid--five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .ewin-grid.ewin-grid--five { grid-template-columns: 1fr; } }
.xprac { max-width: 1080px; margin: 0 auto; width: 100%; }
.xprac__head { text-align: center; margin-bottom: 22px; }
.xprac__head h2 { font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.xprac__head p { font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); max-width: 660px; margin: 0 auto; }
.xprac__head strong { color: var(--c-cyan-deep); font-weight: 700; }
.xprac__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.xprac__card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
  padding: 26px 26px 24px; background: var(--glass);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  border-top: 3px solid transparent;
}
.xprac__card--dl { border-top-color: var(--c-cyan); }
.xprac__card--up { border-top-color: var(--c-yellow); }
.xprac__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 2px; }
.xprac__card--dl .xprac__icon { background: linear-gradient(135deg, #5BD6E8, var(--c-cyan)); }
.xprac__card--up .xprac__icon { background: linear-gradient(135deg, #FFD86B, var(--c-yellow)); }
.xprac__icon svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.xprac__tag { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; color: var(--ink-soft); }
.xprac__card h3 { font-size: 21px; font-weight: 800; color: var(--ink); margin: 0; }
.xprac__lead { font-size: 14.5px; line-height: 1.8; color: var(--ink-soft); flex: 1; }
.xprac__lead strong { color: var(--c-cyan-deep); }
.xprac__btn { align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; }
.xprac__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* 答案上传：1-50 对/错 网格 */
.xpans { max-width: 1080px; margin: 0 auto; width: 100%; }
.xpans__head { margin-bottom: 14px; }
.xpans__head h2 { font-size: 24px; font-weight: 800; color: var(--ink); margin: 0 0 6px; }
.xpans__head p { font-size: 14px; color: var(--ink-soft); margin: 0 0 8px; }
.xpans__head strong { color: var(--c-cyan-deep); }
.xpans__legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--ink-soft); }
.xpans__lg { display: inline-flex; align-items: center; gap: 5px; }
.xpans__lg::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.xpans__lg--right::before { background: #1FB37A; }
.xpans__lg--wrong::before { background: #E15B64; }
.xpans__lg--none::before { background: #d6e2e6; }
.xpans__grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; padding: 4px 0 16px; }
.xp-ans {
  position: relative; height: 52px; border-radius: 12px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.7); border: 1px solid var(--line);
  font-family: inherit; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.xp-ans:hover { transform: translateY(-2px); border-color: rgba(31,200,224,0.5); }
.xp-ans__no { font-size: 14px; font-weight: 700; color: var(--ink); }
.xp-ans__mark { font-size: 12px; font-weight: 800; height: 15px; line-height: 15px; white-space: nowrap; }
.xp-ans.is-right { background: #E9F8F0; border-color: #1FB37A; }
.xp-ans.is-right .xp-ans__no { color: #14794F; }
.xp-ans.is-right .xp-ans__mark { color: #1FB37A; }
.xp-ans.is-wrong { background: #FCEBEC; border-color: #E15B64; }
.xp-ans.is-wrong .xp-ans__no { color: #B32E38; }
.xp-ans.is-wrong .xp-ans__mark { color: #E15B64; }
/* 百宝箱答案上传 · 课后习题学习报告实时汇总 */
.xpans__rep { margin: 2px 0 14px; padding: 12px 14px; border-radius: 14px; background: #f4f9f6; border: 1px solid rgba(31,164,99,.18); }
.xpans__rep-t { font-size: 14px; font-weight: 800; color: #14794f; margin-bottom: 8px; }
.xpans__rep-stats { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--ink-soft); }
.xpans__rep-stats b { font-size: 15px; margin-left: 3px; color: var(--ink); }
.xpans__rep-stats b.xpans__ok { color: #1fb37a; }
.xpans__rep-stats b.xpans__bad { color: #e15b64; }
.xpans__rep-hint { margin: 8px 0 0; font-size: 12px; color: var(--ink-soft); }
.xpans__rep-btns { margin-top: 10px; }
.xpans__rep-btn { min-height: 38px; }
/* 课后习题学习报告 · 独立页 */
.xp-rpt__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 4px 0 16px; }
.xp-rpt__stat { background: #f7faf9; border: 1px solid var(--line); border-radius: 12px; padding: 12px 10px; text-align: center; }
.xp-rpt__v { display: block; font-size: 22px; font-weight: 900; color: var(--ink); }
.xp-rpt__v.ok { color: #1fb37a; }
.xp-rpt__v.bad { color: #e15b64; }
.xp-rpt__k { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.xp-rpt__sec { margin: 14px 0; }
.xp-rpt__sec-t { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.xp-rpt__days { display: flex; flex-direction: column; gap: 8px; }
.xp-rpt__day { display: flex; align-items: center; gap: 10px; }
.xp-rpt__day-t { width: 54px; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.xp-rpt__bar { flex: 1; height: 8px; background: #eef3f2; border-radius: 999px; overflow: hidden; }
.xp-rpt__bar i { display: block; height: 100%; background: linear-gradient(90deg, #22b8ce, #1fb37a); border-radius: 999px; }
.xp-rpt__day > b { width: 46px; font-size: 12.5px; color: var(--ink); text-align: right; white-space: nowrap; }
.xp-rpt__q { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; margin: 3px; border-radius: 8px; font-size: 13px; font-weight: 800; }
.xp-rpt__q.is-wrong { background: #FCEBEC; color: #B32E38; border: 1px solid rgba(229,72,77,.3); }
.xp-rpt__q.is-none { background: #eef2f4; color: #9aa6b2; }
.xp-rpt__tip { font-size: 13px; color: #15724f; }
.xp-rpt__advice { font-size: 13.5px; color: var(--ink); line-height: 1.7; }
.xpans__attr { display: flex; flex-wrap: wrap; gap: 18px; align-items: stretch; margin-top: 6px; }
.xpans__img {
  flex: 1; min-width: 260px; min-height: 120px; border-radius: 14px; cursor: pointer;
  border: 1.5px dashed var(--line); display: grid; place-items: center; overflow: hidden;
  background: rgba(255,255,255,0.55);
}
.xp-img__empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 13.5px; padding: 22px; }
.xp-img__empty-icon { font-size: 30px; }
.xp-img__preview { position: relative; width: 100%; height: 100%; min-height: 120px; }
.xp-img__preview img { width: 100%; height: 100%; object-fit: contain; max-height: 240px; }
.xp-img__clear {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(20,40,60,0.6); color: #fff; border: 0; cursor: pointer; font-size: 15px; line-height: 26px;
}
.xpans__actions { display: flex; gap: 12px; align-items: stretch; width: 100%; }
.xpans__actions .btn { flex: 1; min-width: 0; white-space: nowrap; }
@media (max-width: 860px) { .xprac__grid { grid-template-columns: 1fr; } .xpans__grid { grid-template-columns: repeat(5, 1fr); } }

/* —— 响应式 —— */
@media (max-width: 1100px) {
  .ewin-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .ewin-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ewin-grid { grid-template-columns: 1fr; }
}
@media (orientation: portrait) and (max-width: 900px) {
  .ewin { padding: 22px 22px 20px; }
}

/* ==================== 第3步 "不太懂"弹窗 + 批改结果 ==================== */
/* "不太懂"小按钮 */
.thk-help-btn { display: inline-block; margin-top: 6px; padding: 3px 12px; font-size: 12px; font-weight: 600; color: var(--c-cyan-deep); background: rgba(31,200,224,.1); border: 1px solid rgba(31,200,224,.3); border-radius: 999px; cursor: pointer; font-family: inherit; transition: all .2s var(--ease); }
.thk-help-btn:hover { background: rgba(31,200,224,.2); transform: translateY(-1px); }

/* 弹窗遮罩 */
.thk-help-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9000; background: rgba(20,30,50,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s var(--ease); }
.thk-help-overlay.is-open { opacity: 1; }

/* 弹窗主体：左对话 + 右侧边栏（输入/上传） */
.thk-help-popup { width: min(1400px, 98vw); max-height: 94vh; display: flex; flex-direction: column; gap: 12px; padding: 24px 28px; border-radius: var(--radius-lg); background: rgba(255,255,255,.85); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border: 1px solid var(--line); box-shadow: var(--shadow-2); transform: scale(.96); transition: transform .3s var(--ease); }
.thk-help-overlay.is-open .thk-help-popup { transform: none; }
.thk-help-head { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 700; color: var(--ink); }
.thk-help-close { width: 28px; height: 28px; border: none; background: rgba(20,40,60,.08); border-radius: 50%; cursor: pointer; font-size: 18px; color: var(--ink-soft); line-height: 1; transition: background .2s; }
.thk-help-close:hover { background: rgba(20,40,60,.15); }
.thk-help-step { font-size: 13px; line-height: 1.8; color: var(--ink-soft); padding: 10px 14px; background: rgba(31,200,224,.06); border-left: 3px solid var(--c-cyan); border-radius: 0 10px 10px 0; max-height: 110px; overflow-y: auto; }
.thk-help-main { flex: 1; min-height: 0; display: flex; flex-direction: row; gap: 16px; }
.thk-help-chat { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.thk-help-popup .chat__msgs { flex: 1; min-height: 0; max-height: none; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px; }
.thk-help-side { width: 360px; flex: none; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

/* 弹窗右侧边栏输入条：文本框在上，麦克风+发送一行 */
.thk-help-popup .chat__bar { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; border-radius: 16px; background: rgba(255,255,255,.82); border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(40,60,90,.07); }
.thk-help-popup .chat__bar textarea { width: 100%; min-width: 0; min-height: 64px; max-height: 120px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.6); font-family: inherit; font-size: 14px; color: var(--ink); resize: none; outline: none; }
.thk-help-popup .thk-help-actions { display: flex; align-items: center; gap: 8px; }
.thk-help-popup .thk-help-actions .mic-btn { width: auto; flex: 1; height: 44px; padding: 0 10px; border-radius: 12px; }
.thk-help-popup .thk-help-actions .mic-btn svg { width: 22px; height: 22px; }
.thk-help-popup .thk-help-actions .mic-btn span { display: inline; }
.thk-help-popup .thk-help-actions .chat__send { width: auto; min-width: 76px; height: 44px; padding: 0 16px; border-radius: 12px; border: none; font-family: inherit; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #FFC83D, #1FC8E0); box-shadow: 0 6px 16px rgba(31,140,170,0.25); cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.thk-help-popup .thk-help-actions .chat__send:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31,140,170,0.35); }
.thk-help-popup .thk-help-actions .chat__send:active { transform: translateY(0) scale(0.97); }

/* 侧边栏上传区：单列，占满侧栏宽度 */
.thk-help-side .ai-tutor-upload { grid-template-columns: 1fr; }
.thk-help-side .ai-tutor-grade { align-self: stretch; }

/* 窄屏：侧栏折叠到下方 */
@media (max-width: 760px) {
  .thk-help-popup { padding: 18px; }
  .thk-help-main { flex-direction: column; }
  .thk-help-side { width: 100%; }
  .thk-help-popup .chat__msgs { max-height: 220px; }
}
.mic-btn.is-connecting { cursor: wait; animation: micConnecting 1s ease-in-out infinite; }
.mic-btn.is-connecting svg { animation: micConnectingIcon 1s linear infinite; }
@keyframes micConnecting { 0%, 100% { box-shadow: 0 0 0 0 rgba(31,200,224,.34); } 50% { box-shadow: 0 0 0 9px rgba(31,200,224,0); } }
@keyframes micConnectingIcon { to { transform: rotate(360deg); } }
.thk-help-gotit { width: 100%; height: 42px; margin-top: 4px; }

/* 上传学生作答，交给视觉模型逐步批改 */
.ai-tutor-upload { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px; border: 1px dashed rgba(31,160,190,.38); border-radius: 16px; background: linear-gradient(135deg, rgba(31,200,224,.07), rgba(255,200,61,.08)); }
.ai-tutor-upload__pick { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 5px 8px; color: var(--ink); cursor: pointer; border-radius: 12px; transition: background .2s var(--ease); }
.ai-tutor-upload__pick:hover { background: rgba(255,255,255,.7); }
.ai-tutor-upload__pick svg { width: 32px; height: 32px; flex: none; fill: none; stroke: var(--c-cyan-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ai-tutor-upload__pick span, .ai-tutor-upload__preview > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-tutor-upload__pick strong, .ai-tutor-upload__preview strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-tutor-upload__pick small, .ai-tutor-upload__preview small { font-size: 11px; color: var(--ink-soft); }
.ai-tutor-upload__preview { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.76); }
.ai-tutor-upload__preview[hidden] { display: none; }
.ai-tutor-upload__preview img { width: 56px; height: 56px; object-fit: cover; flex: none; border-radius: 10px; border: 1px solid var(--line); }
.ai-tutor-upload__preview > div { flex: 1; }
.ai-tutor-upload__preview button { width: 28px; height: 28px; flex: none; border: none; border-radius: 50%; background: rgba(20,40,60,.08); color: var(--ink-soft); font-size: 18px; cursor: pointer; }
.ai-tutor-grade { align-self: center; min-height: 44px; padding: 0 16px; border: none; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #1FC8E0, #159bb5); font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.3; box-shadow: 0 5px 14px rgba(31,140,170,.2); cursor: pointer; }
.ai-tutor-grade:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }

/* Phase 1 批改结果 */
.thk-grade-loading { font-size: 14px; color: var(--ink-soft); padding: 20px; text-align: center; }
.thk-grade-result { font-size: 14px; line-height: 1.85; color: var(--ink); }

/* 模块③ 解析独立底板 + "不太懂"悬浮按钮 */
.ai-solution-panel { margin-top: 28px; padding: 20px 24px; border-radius: var(--radius-lg); background: var(--glass); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.ai-solution-panel__head { font-size: 14px; font-weight: 700; color: var(--c-cyan-deep); margin-bottom: 12px; letter-spacing: 1px; }
.ai-nav { margin-top: 28px; display: flex; gap: 12px; justify-content: center; }
.ai-solution-panel .qstd__steps { margin: 0; padding-left: 22px; }
.ai-solution-panel .qstd__steps li { font-size: 14px; line-height: 1.9; margin: 8px 0; color: var(--ink); }

/* "不太懂"右侧悬浮按钮：大图标 + 双行文案，学生更容易发现 */
.ai-help-fab { position: fixed; right: 24px; bottom: 80px; z-index: 100;
  min-height: 68px; padding: 10px 22px 10px 14px; display: flex; align-items: center; gap: 11px; border-radius: 999px; border: 2px solid rgba(255,255,255,.72); cursor: pointer; font-family: inherit;
  color: #fff; background: linear-gradient(135deg, #FFC83D, #1FC8E0); box-shadow: 0 8px 22px rgba(31,140,170,0.3);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.ai-help-fab svg { width: 42px; height: 42px; flex: none; padding: 7px; border-radius: 50%; fill: rgba(255,255,255,.18); stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ai-help-fab span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.ai-help-fab strong { font-size: 17px; }
.ai-help-fab small { margin-top: 4px; font-size: 12px; font-weight: 600; opacity: .9; }
.ai-help-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 28px rgba(31,140,170,0.4); }
.ai-help-fab:active { transform: scale(0.96); }

/* 模块③ 解析时左右分栏 */
.ai-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 8px; }
.ai-split__left, .ai-split__right { min-width: 0; }
.ai-split .ai-solution-panel { margin-top: 0; max-height: calc(100vh - 200px); overflow-y: auto; }
@media (max-width: 900px) { .ai-split { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .ai-help-fab { right: 14px; bottom: 70px; min-height: 60px; padding: 8px 16px 8px 10px; }
  .ai-help-fab svg { width: 38px; height: 38px; }
  .thk-help-popup { padding: 18px 16px; gap: 9px; max-height: 92vh; }
  .thk-help-popup .chat__msgs { min-height: 120px; }
  .ai-tutor-upload { grid-template-columns: 1fr; }
  .ai-tutor-grade { width: 100%; }
}

/* ==================== 课程选择页 ==================== */
.courses-view { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; overflow-y: auto; }
.courses-topbar { display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(48px, 6vw, 96px); }
.courses-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
  align-content: start; width: 100%; max-width: 1180px; margin: 0 auto;
  padding: clamp(18px, 3vh, 40px) clamp(40px, 5vw, 84px) 3vh;
}
/* 课例页：一排 5 讲，卡片整体收小（15 讲 = 3 行）。
   单独用修饰类，避免影响同样挂 .courses-grid 的「课程选择页」。 */
.courses-grid--lessons {
  grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; max-width: 1560px;
  padding: clamp(18px, 3vh, 40px) clamp(28px, 3.6vw, 68px) 3vh;
}

/* 学段主页 / 短期班各级页共用：卡片自适应列数（短期班页面用）
   align-content 必须用 safe center —— 滚动容器里用普通 center 时内容超高会把首行顶到容器外，滚不上去（顶部被裁）。 */
.gate-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; align-content: safe center; width: 100%; max-width: 1560px; margin: 0 auto; padding: clamp(18px, 3vh, 40px) clamp(28px, 3.6vw, 68px) 3vh; overflow-y: auto; }
/* 列数/落位由 JS 按当前可见张数写入（--gc1/--gc2/--gs1..--gs4）：
   开启「隐藏未开通」后培优班可能只剩 1 张，写死 3/2 列会留下空档。
   列宽上限 360px：正常一排 5 张时列宽 240–270，这个上限不生效；隐藏后只剩一两张时
   才会起作用 —— 否则卡片会被撑成 560+ 的巨块。超宽的部分交给 justify-content 居中。 */
.gate-grid--grouped { grid-template-columns: repeat(var(--gc1, 3), minmax(0, 360px)) 18px repeat(var(--gc2, 2), minmax(0, 360px)); gap: 22px; justify-content: center; }
.gate-grid--grouped.is-single { grid-template-columns: repeat(var(--gcall, 5), minmax(0, 360px)); }
.gate-group { display: grid; grid-template-rows: auto 1fr; gap: 12px; min-width: 0; }
/* 显式落位：中间那条 18px 的 spacer 列把两组拉开，组间总空隙 = 22+18+22 = 62px（卡片间距的 2.8 倍）。 */
.gate-group--peiyou { grid-column: var(--gs1, 1) / var(--gs2, 4); }
.gate-group--feature { grid-column: var(--gs3, 5) / var(--gs4, 7); position: relative; }
/* 只剩一组时：让它铺满，竖线也撤掉（此时 spacer 列已经不存在了） */
.gate-grid--grouped.is-single .gate-group { grid-column: 1 / -1; }
.gate-grid--grouped.is-single .gate-group--feature::before { display: none; }
/* 组间竖线：画在 spacer 正中。必须用深色 —— --line 是白色，画在浅色渐变背景上等于隐形。 */
.gate-group--feature::before { content: ""; position: absolute; left: -31px; top: 4px; bottom: 4px; width: 1px; background: linear-gradient(180deg, rgba(20,50,75,0), rgba(20,50,75,.22) 18%, rgba(20,50,75,.22) 82%, rgba(20,50,75,0)); }
/* 组标题做成真正的栏目标题：竖色条 + 组名 + 门数 + 撑满的细横线 */
.gate-group__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gate-group__label { position: relative; flex: none; padding-left: 11px; font-size: 16px; font-weight: 800; letter-spacing: .5px; color: var(--ink); white-space: nowrap; }
.gate-group__label::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 15px; border-radius: 2px; background: var(--c-cyan); }
.gate-group__count { flex: none; font-size: 12px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.gate-group__rule { flex: 1; min-width: 12px; height: 1px; background: linear-gradient(90deg, rgba(20,50,75,.20), rgba(20,50,75,.02)); }
.gate-group__cards { display: grid; gap: 22px; align-items: stretch; min-width: 0; }
/* 组内列数同样跟着"当前可见张数"走（--gn1/--gn2 由 JS 写），否则隐藏未开通后
   一张卡会被挤在 3 列的第 1 格里、只占 1/3 宽 */
.gate-group--feature .gate-group__cards { grid-template-columns: repeat(var(--gn2, 2), minmax(0, 1fr)); }
.gate-group--peiyou .gate-group__cards { grid-template-columns: repeat(var(--gn1, 3), minmax(0, 1fr)); }
.gate-card { position: relative; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--glass); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); box-shadow: var(--shadow-1); border: 1px solid var(--line); opacity: 0; transform: translateY(16px); animation: cardIn .7s var(--ease) forwards; animation-delay: var(--d, 0s); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.gate-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
/* 封面比例随卡片宽度自适应（不再固定 192px 高），宽屏与窄屏观感一致 */
.gate-card__cover { position: relative; aspect-ratio: 3 / 2; color: #fff; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 16px 18px; overflow: hidden; background-size: cover; background-position: center; }
/* 封面图待补充：用品牌渐变占位（后续补图直接替换 cover 字段即可） */
.gate-card__cover--pending { background: linear-gradient(150deg,#E4572E,#F2A03D); }
.gate-card__shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--g, linear-gradient(135deg,#0C93A6,#22B8CE)); opacity: .22; mix-blend-mode: multiply; z-index: 0; }
.gate-card__grid { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(rgba(255,255,255,0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.14) 1px, transparent 1px); background-size: 30px 30px; opacity: .5; mask-image: radial-gradient(circle at 70% 20%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(circle at 70% 20%, #000 0%, transparent 70%); }
.gate-card__sym { position: absolute; font-weight: 800; color: rgba(255,255,255,0.28); font-family: Georgia, 'Times New Roman', serif; transform: rotate(-8deg); }
.gate-card__sym.s1 { top: 22%; left: 14%; font-size: 30px; transform: rotate(-12deg); }
.gate-card__sym.s2 { top: 14%; left: 46%; font-size: 26px; }
.gate-card__sym.s3 { top: 44%; left: 62%; font-size: 40px; transform: rotate(10deg); }
.gate-card__sym.s4 { bottom: 24%; left: 8%; font-size: 26px; transform: rotate(8deg); }
.gate-card__sym.s5 { bottom: 12%; right: 46%; font-size: 34px; transform: rotate(16deg); }
.gate-card__sym.s6 { top: 20%; right: 20%; font-size: 24px; }
.gate-card__tag { position: relative; z-index: 2; font-size: 12px; font-weight: 800; letter-spacing: 1px; color: #1a2733; background: rgba(255,255,255,0.82); padding: 5px 14px; border-radius: 999px; box-shadow: 0 2px 8px rgba(15,50,75,0.18); }
.gate-card__icon { position: absolute; right: 16px; top: 14px; width: 44px; height: 44px; color: #fff; opacity: .9; }
.gate-card__icon svg { width: 44px; height: 44px; }
.gate-card__body { padding: 22px 24px 20px; display: flex; flex-direction: column; flex: 1; }
.gate-card__title { font-size: clamp(18px, 1.8vw, 23px); font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.gate-card__desc { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 16px; flex: 1; }
.gate-card__cta { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 9px 0; border-radius: 12px; font-size: 14px; font-weight: 800; color: var(--c-cyan-deep); background: rgba(12,147,166,0.08); border: 1px solid rgba(12,147,166,0.22); transition: background .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); margin-top: auto; }
.gate-card:hover .gate-card__cta { background: rgba(12,147,166,0.14); box-shadow: 0 4px 14px rgba(12,147,166,0.16); }
.gate-card__cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.gate-card:hover .gate-card__cta svg { transform: translateX(4px); }
/* 开通状态角标：已开通 / 未解锁各带底色，一眼可辨 —— 只靠底部按钮区分太不显眼 */
.gate-card__state { position: absolute; top: 12px; right: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .3px; white-space: nowrap; }
.gate-card__state.is-open { color: #fff; background: linear-gradient(135deg,#22C08A,#0E9A72); box-shadow: 0 4px 14px rgba(14,154,114,.42); }
.gate-card__state.is-locked { color: #5b6570; background: rgba(255,255,255,.94); box-shadow: 0 3px 10px rgba(20,40,70,.14); }
/* 学段卡锁定态：封面近乎去色 + 罩一层浅色雾，和已开通的鲜艳卡一眼分得开；
   标题/说明也转灰，底部「未解锁」保持灰按钮、不可点 */
.gate-card.is-locked { cursor: not-allowed; }
.gate-card.is-locked .gate-card__cover { filter: grayscale(.72) brightness(1.01) contrast(.97); }
.gate-card.is-locked .gate-card__cover::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: rgba(244,247,250,.20); pointer-events: none; }
.gate-card.is-locked .gate-card__title { color: #6f7780; }
.gate-card.is-locked .gate-card__desc { color: #9aa2ab; }
.gate-card.is-locked .gate-card__cta { cursor: not-allowed; color: #98a2ab; background: rgba(130,140,150,.1); border-color: rgba(130,140,150,.16); }
.gate-card.is-locked:hover { transform: none; box-shadow: var(--shadow-1); }
/* 已开通课程：边缘发光 + 绿色「进入」高亮 */
.gate-card:not(.is-locked) { box-shadow: 0 0 0 2px var(--c-cyan), 0 0 26px rgba(31,200,224,.5), var(--shadow-1); border-color: transparent; }
.gate-card:not(.is-locked) .gate-card__cta { color: #0E7A66; text-shadow: 0 0 12px rgba(37,185,154,.85); background: rgba(37,185,154,.16); box-shadow: 0 4px 14px rgba(37,185,154,.28); }
.gate-card:not(.is-locked) .gate-card__cta svg { color: #0E7A66; }

/* 课例卡片（待解锁）：换造型 + 数学元素封面 */
.cw-card { position: relative; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; border-radius: 16px; background: rgba(255,255,255,0.82); box-shadow: var(--shadow-1); border: 1px solid var(--line); opacity: 0; transform: translateY(16px); animation: cardIn .7s var(--ease) forwards; animation-delay: var(--d, 0s); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.cw-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
/* 老师未开放的讲次：卡片带 🔒 待解锁 角标，但仍然会悬停上浮、鼠标还是手型 —— 看着像能点。
   这里把它按住，让"锁着"的观感和能点开的讲次区分开。 */
.cw-card[data-id="none"] { cursor: default; }
.cw-card[data-id="none"]:hover { transform: none; box-shadow: var(--shadow-1); }
.cw-card__head { display: flex; align-items: flex-start; gap: 8px; padding: 12px 12px 10px; min-height: 62px; }
.cw-card__no { flex: none; margin-top: 1px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; font-size: 12px; font-weight: 800; color: #0E7A66; background: rgba(31,200,224,.14); border: 1px solid rgba(31,200,224,.30); }
/* 封面高度随卡片宽度走（aspect-ratio），不再固定 240px —— 一排 5 张时才不会把卡片撑高 */
.cw-card__media { position: relative; margin: 0 12px; flex: none; aspect-ratio: 3 / 2; min-height: 0; border-radius: 12px; overflow: hidden; }
.cw-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw-media__veil { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .14; mix-blend-mode: multiply; pointer-events: none; z-index: 1; }
.cw-card__foot { padding: 10px 12px 12px; margin-top: auto; display: flex; }
.cw-card__cover { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: linear-gradient(160deg,#e8edf1,#f4f7f9); }
.cw-card__cover::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: repeating-linear-gradient(45deg, rgba(12,147,166,0.06) 0 1px, transparent 1px 22px), repeating-linear-gradient(-45deg, rgba(12,147,166,0.06) 0 1px, transparent 1px 22px); }
.cw-mat { position: absolute; font-weight: 800; color: rgba(12,147,166,0.16); font-family: Georgia, 'Times New Roman', serif; }
.cw-mat.m1 { top: 18%; left: 16%; font-size: 42px; transform: rotate(-14deg); }
.cw-mat.m2 { top: 12%; right: 20%; font-size: 34px; }
.cw-mat.m3 { top: 46%; left: 60%; font-size: 48px; transform: rotate(12deg); }
.cw-mat.m4 { bottom: 18%; left: 22%; font-size: 36px; transform: rotate(9deg); }
.cw-mat.m5 { bottom: 12%; right: 14%; font-size: 40px; transform: rotate(16deg); }
.cw-mat.m6 { top: 40%; left: 8%; font-size: 30px; }
.cw-lock { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; filter: grayscale(0.1); opacity: .9; z-index: 1; }
.cw-card__body { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
.cw-card__title { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 800; color: #14212b; line-height: 1.3; }
/* 底部操作条：撑满整行居中 —— 它才是每张卡唯一的入口，不该做成最小的元素 */
.cw-badge { display: flex; align-items: center; justify-content: center; width: 100%; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 800; color: var(--ink-soft); background: rgba(20,40,60,0.08); border: 1px solid rgba(20,40,60,0.10); transition: background .2s var(--ease), box-shadow .2s var(--ease); }
/* 高一 15 讲 · 主题化待解锁封面（章节元素） */
.cw-card__cover--theme { background: linear-gradient(160deg, #0f9b8e, #7ee0c0); }
.cw-card__cover--theme::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(circle at 28% 22%, rgba(255,255,255,.25), transparent 55%); pointer-events: none; }
.cw-theme__shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .2; mix-blend-mode: multiply; z-index: 1; }
.cw-theme__big { position: absolute; left: 0; right: 0; top: 38%; transform: translateY(-50%); z-index: 1; text-align: center; font-size: 56px; font-weight: 800; line-height: 1; color: rgba(255,255,255,.96); font-family: Georgia,'Times New Roman',serif; text-shadow: 0 6px 20px rgba(0,0,0,.22); }
.cw-theme__sub { position: absolute; left: 0; right: 0; top: 63%; z-index: 1; text-align: center; font-size: 16px; font-weight: 700; font-style: italic; color: rgba(255,255,255,.9); }
.cw-chapter { display: inline-block; font-size: 11.5px; font-weight: 800; color: #0e8197; background: rgba(12,147,166,0.12); padding: 4px 12px; border-radius: 999px; letter-spacing: .3px; }
.cw-card__cover--theme .cw-lock { position: absolute; top: 12px; right: 14px; top: auto; right: auto; bottom: auto; left: auto; display: block; font-size: 20px; opacity: .95; z-index: 2; }
.cw-card__sub { font-size: 12.5px; color: #5a6b77; margin-top: 4px; }
.cw-badge--ready { color: #fff; background: linear-gradient(135deg,#1FBF93,#0E9A72); border-color: transparent; box-shadow: 0 4px 14px rgba(14,154,114,.30); }
.cw-card:hover .cw-badge--ready { background: linear-gradient(135deg,#25CFA0,#12A87E); box-shadow: 0 6px 18px rgba(14,154,114,.42); }
/* 已开通：白底 + 绿色描边（未开通/封课保持原来的淡边框）——
   描边加粗到 2px 再配一圈柔光，才能和未开通卡一眼分开 */
.cw-card--ready { border: 2px solid #22C295; box-shadow: 0 0 0 3px rgba(34,194,149,.16), var(--shadow-1); }
.cw-card--ready:hover { box-shadow: 0 0 0 3px rgba(34,194,149,.24), var(--shadow-2); }

/* —— 临时封课（第 3 讲）——
   和"待解锁"要能一眼分开：待解锁是还没做出来（灰条纹占位封面），
   这个是做出来了但暂时封着（有真封面，只是褪色 + 上锁 + 可点）。 */
.cw-card--gated, .st-card--gated { filter: grayscale(0.92); }
.cw-card--gated:hover, .st-card--gated:hover { filter: grayscale(0.5); }
.cw-media__gate { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px;
  background: rgba(233,238,242,0.6); }
.cw-media__lock { font-size: 30px; line-height: 1; filter: grayscale(1); opacity: .75; }
.cw-media__txt { font-size: 12px; font-weight: 800; letter-spacing: 2px; color: #7C8A96;
  padding: 3px 13px 3px 15px; border-radius: 999px; background: rgba(255,255,255,0.88); }
.cw-badge--gate { background: rgba(20,40,60,0.14); color: #5F6E7A; }
.cw-card--gated:hover .cw-badge--gate,
.st-card--gated:hover .cw-badge--gate { background: linear-gradient(135deg,#0C93A6,#22B8CE); color: #fff; }

/* —— 封课密码弹窗 —— */
.glock-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 820; display: none; align-items: center;
  justify-content: center; padding: 24px; background: rgba(20,30,45,0.55);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.glock-overlay.is-open { display: flex; }
.glock { width: 100%; max-width: 400px; padding: 30px 30px 20px; border-radius: 24px;
  text-align: center; background: #fff; box-shadow: 0 34px 70px rgba(0,0,0,0.32);
  animation: glockIn 0.34s var(--ease) both; }
@keyframes glockIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.glock__lock { font-size: 34px; line-height: 1; filter: grayscale(0.9); }
.glock__title { margin: 13px 0 0; font-size: 19px; font-weight: 800; color: var(--ink); }
.glock__why { margin: 7px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.glock__form { display: flex; gap: 9px; margin-top: 20px; }
.glock__input { flex: 1; min-width: 0; height: 44px; padding: 0 15px; border-radius: 12px;
  border: 1px solid var(--line); background: #fbfcfe; font: inherit; font-size: 15px;
  letter-spacing: 3px; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.glock__input:focus { outline: none; background: #fff; border-color: rgba(31,200,224,.7);
  box-shadow: 0 0 0 3px rgba(31,200,224,.16); }
.glock__btn { flex: 0 0 auto; height: 44px; padding: 0 22px; border: 0; border-radius: 12px;
  cursor: pointer; font: inherit; font-size: 14px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg,#0C93A6,#22B8CE);
  box-shadow: 0 8px 18px -8px rgba(12,147,166,.85); transition: transform .2s var(--ease); }
.glock__btn:hover { transform: translateY(-1px); }
.glock__btn:active { transform: translateY(1px); }
.glock__hint { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--ink-soft); }
.glock__hint.is-bad { color: #D9534F; font-weight: 700; }
.glock__close { margin-top: 14px; border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 700; color: var(--ink-soft); transition: color .2s; }
.glock__close:hover { color: var(--ink); }

/* 国庆短期班：4 张大卡横排（封面/标题与高一秋季共用）；滚动容器同样必须 safe center */
.shortterm-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; align-content: safe center; width: 100%; max-width: 1380px; margin: 0 auto; padding: clamp(18px, 3vh, 40px) clamp(40px, 5vw, 84px) 3vh; overflow-y: auto; }
.st-card { position: relative; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; border-radius: 18px; background: rgba(255,255,255,0.86); box-shadow: var(--shadow-1); border: 1px solid var(--line); opacity: 0; transform: translateY(16px); animation: cardIn .7s var(--ease) forwards; animation-delay: var(--d, 0s); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.st-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.st-card--ready { border-color: rgba(31,200,224,.35); box-shadow: 0 0 0 2px var(--c-cyan), 0 0 22px rgba(31,200,224,.35), var(--shadow-1); }
.st-card__title { padding: 18px 18px 8px; font-size: 19px; font-weight: 800; color: #14212b; line-height: 1.25; }
.st-card__tag { margin: 0 18px; align-self: flex-start; font-size: 11.5px; font-weight: 800; color: #0e8197; background: rgba(12,147,166,0.12); padding: 4px 12px; border-radius: 999px; letter-spacing: .3px; }
.st-card__media { position: relative; margin: 12px 18px 0; flex: 1 1 auto; min-height: 260px; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg,#e8edf1,#f4f7f9); }
.st-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-card__foot { padding: 14px 18px 18px; margin-top: auto; display: flex; }
@media (max-width: 1100px) { .shortterm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; } }
@media (max-width: 620px) { .shortterm-grid { grid-template-columns: 1fr; max-width: 480px; } }

/* 学期页：暑秋寒春 */
.grade-grid { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; align-content: center; width: 100%; max-width: 1380px; margin: 0 auto; padding: clamp(20px, 4vh, 50px) clamp(48px, 6vw, 96px) 3vh; }
.grade-card { position: relative; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 34px 22px; border-radius: var(--radius-lg); background: var(--glass); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); box-shadow: var(--shadow-1); border: 1px solid var(--line); opacity: 0; transform: translateY(16px); animation: cardIn .7s var(--ease) forwards; animation-delay: var(--d, 0s); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.grade-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.grade-card__label { position: relative; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; font-size: 40px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#0C93A6,#22B8CE); box-shadow: 0 8px 22px rgba(12,147,166,0.28); }
.grade-card__name { font-size: clamp(17px,1.8vw,21px); font-weight: 800; color: var(--ink); }
.grade-card__sub { font-size: 13px; color: var(--ink-soft); }
.grade-card__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: var(--c-cyan-deep); }
.grade-card__cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.grade-card:hover .grade-card__cta svg { transform: translateX(4px); }
/* 学期卡锁定态：保留彩色，底部「未解锁」灰色 */
.grade-card.is-locked { cursor: not-allowed; }
.grade-card.is-locked .grade-card__cta { color: #98a2ab; }
.grade-card.is-locked:hover { transform: none; box-shadow: var(--shadow-1); }
/* 开启学期：边缘发光 + 绿色「进入」高亮 */
.grade-card:not(.is-locked) { box-shadow: 0 0 0 2px var(--c-cyan), 0 0 22px rgba(31,200,224,.45), var(--shadow-1); border-color: transparent; }
.grade-card:not(.is-locked) .grade-card__cta { color: #0E7A66; text-shadow: 0 0 12px rgba(37,185,154,.85); }
.course-card {
  position: relative; overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
  border-radius: var(--radius-lg); background: var(--glass);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
  opacity: 0; transform: translateY(16px);
  animation: cardIn 0.7s var(--ease) forwards; animation-delay: var(--d, 0s);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.course-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent); pointer-events: none; opacity: 0.6; }
.course-card:hover { transform: translateY(-8px); box-shadow: 0 24px 56px rgba(31,140,170,0.18); border-color: rgba(31,200,224,0.45); }
.course-card__cover { width: 100%; aspect-ratio: 3 / 4; background-size: cover; background-position: center top; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.course-card__cover--pending {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  color: #52717d; background:
    radial-gradient(circle at 28% 25%, rgba(31,200,224,.22), transparent 28%),
    radial-gradient(circle at 76% 76%, rgba(255,200,61,.25), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.95), rgba(237,247,250,.9));
}
.course-card__cover--pending b { font-size: 18px; letter-spacing: 2px; }
.course-card__cover--pending em { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-style: normal; font-weight: 800; color: #fff; background: linear-gradient(135deg,#0e8197,#23bfd1); }
.course-card__pending-mark { position: relative; width: 118px; height: 76px; margin-bottom: 7px; }
.course-card__pending-mark i { position: absolute; top: 8px; width: 64px; height: 64px; border: 3px solid rgba(14,129,151,.6); border-radius: 50%; background: rgba(255,255,255,.28); }
.course-card__pending-mark i:nth-child(1) { left: 0; }
.course-card__pending-mark i:nth-child(2) { right: 0; border-color: rgba(229,169,47,.72); }
.course-card__pending-mark i:nth-child(3) { left: 27px; top: 0; border-color: rgba(104,95,208,.55); }
.course-card__body { padding: 20px 22px 24px; position: relative; z-index: 1; }
.course-card__theme { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 6px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 900; letter-spacing: 1px; color: #fff;
  background: linear-gradient(135deg,#FF8A3E,#F5487F 60%,#9B5CF6);
  box-shadow: 0 4px 16px rgba(245,72,127,.45), 0 2px 8px rgba(0,0,0,.12), inset 0 0 0 1.5px rgba(255,255,255,.4);
  animation: themeGlow 2.4s ease-in-out infinite; }
.course-card__theme::before { content: "★"; font-size: 12px; margin-right: 2px; }
@keyframes themeGlow { 0%,100% { box-shadow: 0 4px 16px rgba(245,72,127,.45), inset 0 0 0 1.5px rgba(255,255,255,.4); } 50% { box-shadow: 0 6px 26px rgba(245,72,127,.72), inset 0 0 0 1.5px rgba(255,255,255,.55); } }
.course-card__title { font-size: clamp(22px, 2vw, 28px); font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.course-card__sub { font-size: 14px; color: var(--ink-soft); margin-bottom: 14px; }
.course-card__badge { font-size: 13px; font-weight: 700; padding: 6px 16px; border-radius: 999px; background: rgba(20,40,60,0.08); color: var(--ink-soft); }
.course-card__badge--ready { background: linear-gradient(135deg, #FFC83D, #1FC8E0); color: #fff; }
.course-card--soon { filter: grayscale(0.6) brightness(0.9); }
.course-card--soon:hover { transform: none; box-shadow: var(--shadow-1); border-color: var(--line); }
.course-card--locked { filter: grayscale(0.86) brightness(0.82); opacity: 0.72; cursor: default; }
.course-card--locked:hover { transform: none; box-shadow: var(--shadow-1); border-color: var(--line); }
.course-card--locked .course-card__cover { position: relative; }
.course-card--locked .course-card__cover::after { content: "🔒"; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; font-size: 40px; color: rgba(255,255,255,0.95); text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.course-card__badge--locked { background: rgba(20,40,60,0.14); color: var(--ink-soft); }
@media (max-width: 1100px) { .courses-grid:not(.courses-grid--lessons), .gate-grid:not(.gate-grid--grouped), .grade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; } }
@media (max-width: 620px) { .courses-grid:not(.courses-grid--lessons), .gate-grid:not(.gate-grid--grouped), .grade-grid { grid-template-columns: 1fr; max-width: 480px; } }
/* 课例页：5 列起，逐级降列 */
@media (max-width: 1150px) { .courses-grid--lessons { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 940px)  { .courses-grid--lessons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .courses-grid--lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .courses-grid--lessons { grid-template-columns: 1fr; max-width: 400px; } }
/* 学段主页分组布局：≤1000px 两栏改为上下堆叠，避免 5 列时卡片过窄。
   连 is-single 一起写上 —— 它特异性更高，不写回来就会盖掉这条媒体查询。 */
@media (max-width: 1000px) {
  .gate-grid--grouped, .gate-grid--grouped.is-single { grid-template-columns: 1fr; gap: 30px; max-width: 1060px; }
  .gate-group--feature, .gate-group--peiyou { grid-column: auto; padding-left: 0; border-left: 0; }
  .gate-group--feature::before { display: none; }
  /* 堆叠后特色班只有 2 张、培优班 3 张：把特色班限宽到「与自己 3 等分等宽」的尺寸，
     两组的卡片宽度就仍然一致，不会出现上行卡片明显比下行胖 */
  .gate-group--feature .gate-group__cards { max-width: calc((100% - 44px) / 3 * 2 + 22px); margin: 0 auto; width: 100%; }
}
@media (max-width: 620px) {
  .gate-grid--grouped { max-width: 480px; }
  .gate-group--feature .gate-group__cards, .gate-group--peiyou .gate-group__cards { grid-template-columns: 1fr; max-width: 100%; }
}

.placeholder--pending { border-style: dashed; }
.placeholder--pending .placeholder__badge { background: linear-gradient(135deg,#0e8197,#23bfd1); }
.pending-kicker { display: inline-block; margin-bottom: 9px; color: var(--c-cyan-deep); font-size: 11px; font-weight: 800; letter-spacing: 2px; }

/* ==================== 课程开发中页 ==================== */
.soon-view { flex-direction: column; align-items: stretch; justify-content: stretch; padding: 0; }
.soon-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px clamp(48px, 6vw, 96px) 3vh; max-width: 1240px; margin: 0 auto; width: 100%; }
.soon-hero { text-align: center; padding: 40px 30px; border-radius: var(--radius-lg); margin-bottom: 28px; }
.soon-hero__icon { width: 64px; height: 64px; margin: 0 auto 18px; color: var(--c-cyan); }
.soon-hero__icon svg { width: 100%; height: 100%; }
.soon-hero h2 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.soon-hero p { font-size: 15px; color: var(--ink-soft); line-height: 1.7; max-width: 56ch; margin: 0 auto; }
.soon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-content: center; }
.soon-card { position: relative; padding: 26px 22px; border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 8px; opacity: 0.5; animation: cardIn 0.7s var(--ease) forwards; animation-delay: var(--d, 0s); }
.soon-card__lock { position: absolute; top: 18px; right: 18px; width: 22px; height: 22px; color: var(--ink-soft); }
.soon-card__lock svg { width: 100%; height: 100%; }
.soon-card__no { font-size: 36px; font-weight: 800; color: rgba(20,40,60,0.12); line-height: 0.8; }
.soon-card__title { font-size: 17px; font-weight: 700; color: var(--ink-soft); }
.soon-card__tag { font-size: 12px; font-weight: 600; color: var(--ink-soft); background: rgba(20,40,60,0.06); padding: 4px 12px; border-radius: 999px; align-self: flex-start; }
@media (max-width: 900px) { .soon-grid { grid-template-columns: 1fr; } }

/* =========================================================
   知识图谱 V2 · 三层关系网络
   ========================================================= */
.graph-view .graph-body {
  display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(340px, .78fr);
  gap: 18px; min-height: 0; padding: 14px clamp(18px, 2.6vw, 38px) 24px;
  background:
    radial-gradient(circle at 18% 12%, rgba(31,200,224,.11), transparent 28%),
    radial-gradient(circle at 72% 88%, rgba(255,200,61,.10), transparent 25%);
}
.graph-view .graph-stage { min-width: 0; height: 100%; display: flex; flex-direction: column; gap: 9px; }
.kg2-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex: none; padding: 2px 4px 0; }
.kg2-eyebrow { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 800; letter-spacing: 2px; color: var(--c-cyan-deep); }
.kg2-head h2 { margin: 0; font-size: clamp(19px, 2vw, 27px); line-height: 1.25; color: var(--ink); }
.kg2-head p { max-width: 760px; margin: 5px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--ink-soft); }
.kg2-stats { display: flex; gap: 8px; flex: none; }
.kg2-stats span { min-width: 72px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.72); text-align: center; font-size: 10px; color: var(--ink-soft); box-shadow: 0 5px 15px rgba(30,65,82,.05); }
.kg2-stats strong { display: block; font-size: 16px; color: var(--ink); }
.kg2-toolbar { display: flex; align-items: center; gap: 7px; flex: none; padding: 7px 8px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.7); }
.kg2-toolbar button { min-height: 31px; padding: 0 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink-soft); font: 700 12px/1 inherit; cursor: pointer; transition: .2s var(--ease); }
.kg2-toolbar button:hover { color: var(--c-cyan-deep); background: rgba(31,200,224,.08); }
.kg2-toolbar button.is-active { color: #fff; background: linear-gradient(135deg,#0e8197,#23bfd1); box-shadow: 0 4px 12px rgba(14,129,151,.2); }
.kg2-toolbar__hint { margin-left: auto; padding-right: 5px; font-size: 11px; color: var(--ink-soft); }
#kg2-svg { flex: 1 1 auto; width: 100%; min-height: 460px; border: 1px solid rgba(129,159,176,.25); border-radius: 22px; background:
  linear-gradient(145deg,rgba(255,255,255,.96),rgba(244,250,252,.94));
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 12px 30px rgba(30,65,82,.06);
}
.kg2-lane { stroke-width: 1; }
.kg2-lane--start { fill: rgba(14,129,151,.055); stroke: rgba(14,129,151,.16); }
.kg2-lane--lesson { fill: rgba(255,200,61,.045); stroke: rgba(229,169,47,.17); }
.kg2-lane--related { fill: rgba(121,145,168,.05); stroke: rgba(121,145,168,.16); }
.kg2-lane__title { font-size: 12px; font-weight: 900; letter-spacing: 1.2px; fill: #718995; }
.kg2-edge { cursor: pointer; transition: opacity .28s var(--ease); }
.kg2-edge path { fill: none; stroke: #91acb8; stroke-width: 1.3; opacity: .5; transition: stroke .25s, stroke-width .25s, opacity .25s; }
.kg2-edge .kg2-edge__hit { stroke: transparent !important; stroke-width: 22px !important; opacity: 1 !important; pointer-events: stroke; }
.kg2-edge marker path { fill: #8fb0bd; stroke: none; }
.kg2-edge--cross path { stroke: #a1aeb7; stroke-dasharray: 5 7; opacity: .45; }
.kg2-edge__label-bg { fill: rgba(255,255,255,.96); stroke: rgba(116,151,165,.18); stroke-width: 1; }
.kg2-edge__label { font-size: 10.5px; font-weight: 800; fill: #52717d; pointer-events: none; }
.kg2-edge:hover path, .kg2-edge.is-focused path { stroke: var(--c-yellow-deep); stroke-width: 3.5; opacity: 1; }
.kg2-edge:hover .kg2-edge__label-bg, .kg2-edge.is-focused .kg2-edge__label-bg { fill: #fff8df; stroke: var(--c-yellow-deep); }
.kg2-edge.is-dimmed, .kg2-edge.is-filtered { opacity: .09; pointer-events: none; }
.kg2-node { cursor: pointer; outline: none; transition: opacity .28s var(--ease), transform .28s var(--ease); transform-box: fill-box; transform-origin: center; }
.kg2-node rect { fill: rgba(255,255,255,.97); stroke: var(--node-color); stroke-width: 1.8; filter: drop-shadow(0 5px 7px rgba(30,65,82,.08)); transition: stroke-width .2s, filter .2s; }
.kg2-node:hover, .kg2-node:focus { transform: translateY(-3px); }
.kg2-node:hover rect, .kg2-node:focus rect, .kg2-node.is-focused rect { stroke-width: 4; filter: drop-shadow(0 9px 13px color-mix(in srgb, var(--node-color) 28%, transparent)); }
.kg2-node--center rect { fill: url(#kg2-hub); stroke: rgba(255,255,255,.9); stroke-width: 3; filter: drop-shadow(0 13px 20px rgba(14,129,151,.3)); }
.kg2-node--related rect { fill: rgba(245,248,250,.94); stroke-dasharray: 6 4; }
.kg2-node--exercise rect { fill: color-mix(in srgb, var(--node-color) 8%, white); stroke-width: 2.6; }
.kg2-node__tag { font-size: 10px; font-weight: 800; letter-spacing: 1.3px; fill: var(--node-color); }
.kg2-node__title { font-size: 15px; font-weight: 800; fill: var(--ink); }
.kg2-node--exercise .kg2-node__title { font-size: 14.5px; fill: var(--node-color); }
.kg2-node--center .kg2-node__tag { fill: rgba(255,255,255,.82); }
.kg2-node--center .kg2-node__title { fill: #fff; font-size: 24px; }
.kg2-node__exercise { font-size: 10px; font-weight: 800; fill: var(--node-color); }
.kg2-node__done { fill: #34ad79; }
.kg2-node__check { fill: #fff; font-size: 11px; font-weight: 900; }
.kg2-node.is-neighbor rect { stroke-width: 3; }
.kg2-node.is-dimmed, .kg2-node.is-filtered { opacity: .14; pointer-events: none; }
.kg2-node.is-mastered rect { stroke: #34ad79; stroke-width: 4; }
.kg2-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; flex: none; min-height: 29px; padding: 2px 8px; font-size: 10.5px; color: var(--ink-soft); }
.kg2-legend span { display: inline-flex; align-items: center; gap: 5px; }
.kg2-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.kg2-dot--center { background: #0e8197; }
.kg2-dot--core { background: #fff; border: 2px solid #27a6bb; }
.kg2-dot--related { background: #c7d0d6; }
.kg2-dot--exercise { border-radius: 3px; background: #685fd0; }
.kg2-legend__cross { margin-left: auto; }

.graph-view .graph-panel { min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0; border-radius: 22px; background: rgba(255,255,255,.84); border: 1px solid var(--line); box-shadow: 0 16px 38px rgba(30,65,82,.10); }
.kg2-panel-head { position: sticky; top: 0; z-index: 2; padding: 20px 22px 17px; color: #fff; background: linear-gradient(135deg, var(--panel-color,#0e8197), color-mix(in srgb,var(--panel-color,#0e8197) 68%,#32cde0)); box-shadow: 0 8px 20px rgba(14,129,151,.14); }
.kg2-panel-kicker { font-size: 10px; font-weight: 800; letter-spacing: 2px; opacity: .84; }
.kg2-panel-head h3 { margin: 5px 0 0; font-size: clamp(20px,1.7vw,25px); line-height: 1.3; }
.kg2-panel-head p { margin: 5px 0 0; font-size: 12px; line-height: 1.6; opacity: .86; }
.kg2-sec { margin: 0 18px; padding: 18px 3px; border-bottom: 1px solid rgba(40,80,100,.10); }
.kg2-sec:last-child { border-bottom: 0; }
.kg2-sec__label { margin-bottom: 9px; font-size: 10.5px; font-weight: 900; letter-spacing: 1.3px; color: var(--c-cyan-deep); }
.kg2-summary { margin: 0; font-size: 14px; line-height: 1.9; color: var(--ink); }
.kg2-notegrid { display: grid; gap: 9px; }
.kg2-note { padding: 11px 12px; border-left: 3px solid var(--panel-color,var(--c-cyan)); border-radius: 0 12px 12px 0; background: rgba(31,200,224,.055); }
.kg2-note strong { display: block; margin-bottom: 4px; font-size: 12px; color: var(--ink); }
.kg2-note p { margin: 0; font-size: 13px; line-height: 1.78; color: var(--ink-soft); }
.kg2-formula { padding: 13px; overflow-x: auto; border: 1px solid rgba(31,200,224,.2); border-radius: 13px; background: linear-gradient(135deg,rgba(31,200,224,.07),rgba(255,200,61,.07)); font-size: 13px; line-height: 1.9; color: var(--ink); text-align: center; }
.kg2-chips { display: grid; gap: 7px; }
.kg2-chip { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.8); color: var(--ink); font: 700 12px/1.35 inherit; text-align: left; cursor: pointer; }
.kg2-chip:hover { border-color: var(--c-cyan); background: rgba(31,200,224,.07); }
.kg2-chip span { flex: none; padding: 3px 6px; border-radius: 6px; color: var(--c-cyan-deep); background: rgba(31,200,224,.1); font-size: 9px; }

/* ===== 知识图谱 · 章节知识脉络（节点 + 连线思维导图） ===== */
.graph-view .graph-body.kg-tree-mode { grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr); }
.graph-view .graph-body.kg-tree-mode .graph-panel { display: none; }
.kt-wrap { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0;
  border: 1px solid rgba(129,159,176,.25); border-radius: 22px;
  background: linear-gradient(160deg, #f2f9fb 0%, #e5f1f4 42%, #eef0e8 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 12px 30px rgba(30,65,82,.06); }
/* touch-action:none 是关键 —— 不加的话平板上手指一拖，浏览器会去滚动整页，
   根本轮不到我们的 pointermove；图谱右上角的弹窗不在 SVG 里，不受影响，照常能滑。 */
#kt-svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.kt-vp { transform-origin: 0 0; }
.kt-edge { fill: none; stroke: rgba(31,120,140,.30); stroke-width: 1.6; transition: stroke .2s var(--ease); }
.kt-node rect { stroke-width: 1.5; cursor: grab; fill: url(#kt-grad-future); stroke: rgba(150,166,181,.45);
  filter: drop-shadow(0 2px 5px rgba(31,90,105,.10));
  transition: filter .2s var(--ease), stroke .2s var(--ease), fill .25s var(--ease); }
.kt-node:hover rect { filter: drop-shadow(0 4px 10px rgba(31,90,105,.18)); }
/* 按层级区分外形与外轮廓（rx 在 js 里按层给：一级=胶囊、二级=方圆角、三级=小圆角）：
   一眼能分出「章节 / 题型 / 知识点」三层，不必靠读文字。
   ⚠️ 这些规则必须排在下面的 .is-lit / .is-pick / .is-wrong 之前 —— 同为 (0,2,1) 特异性，
      靠后者生效，否则判定后的绿/黄/红会被这里的描边盖掉。 */
.kt-node.kt-lv1 rect { fill: #eaf7fa; stroke: rgba(12,147,166,.62); stroke-width: 2.2; }
.kt-node.kt-lv2 rect { fill: #f7fcfd; stroke: rgba(31,120,140,.50); stroke-width: 1.7; stroke-dasharray: 7 5; }
.kt-node.kt-lv3 rect { fill: #ffffff; stroke: rgba(150,166,181,.55); stroke-width: 1.1; }
.kt-node.is-root rect { fill: url(#kt-grad-root); stroke: #2aa7bd; stroke-width: 1.8; }
.kt-node.is-lit rect { fill: url(#kt-grad-lit); stroke: rgba(31,164,99,.60); stroke-width: 1.9; animation: ktNodePop .38s var(--ease); }
.kt-node.is-lit.is-root rect { fill: url(#kt-grad-root); stroke: #2aa7bd; }
.kt-node.is-pick rect { fill: #ffd86b; stroke: rgba(240,166,75,.70); stroke-width: 1.9; animation: ktNodePk .38s var(--ease); }
.kt-node.is-pick.is-root rect { fill: url(#kt-grad-root); stroke: #2aa7bd; }
.kt-node.is-wrong rect { fill: #ffb3a8; stroke: rgba(225,91,100,.70); stroke-width: 1.9; animation: ktNodeWr .38s var(--ease); }
.kt-node.is-wrong.is-root rect { fill: url(#kt-grad-root); stroke: #2aa7bd; }
@keyframes ktNodePk { 0% { filter: drop-shadow(0 0 0 rgba(240,166,75,0)); stroke-width: 1.2; } 55% { filter: drop-shadow(0 0 14px rgba(240,166,75,.55)); } 100% { filter: drop-shadow(0 2px 6px rgba(240,166,75,.28)); } }
@keyframes ktNodeWr { 0% { filter: drop-shadow(0 0 0 rgba(225,91,100,0)); stroke-width: 1.2; } 55% { filter: drop-shadow(0 0 14px rgba(225,91,100,.55)); } 100% { filter: drop-shadow(0 2px 6px rgba(225,91,100,.28)); } }
.kt-node__title { font-size: 13px; font-weight: 600; fill: #8fa0af; pointer-events: none; }
.kt-node.is-root .kt-node__title { fill: #0e8197; font-weight: 700; }
.kt-node.is-lit .kt-node__title { fill: #0d6b55; }
.kt-node.is-pick .kt-node__title { fill: #8a5a00; }
.kt-node.is-wrong .kt-node__title { fill: #b23a42; }
.kt-node__done { fill: #1fa463; opacity: 0; transform: scale(.4); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.kt-node.is-lit .kt-node__done { opacity: 1; transform: scale(1); }
.kt-node__check { font-size: 11px; font-weight: 800; fill: #fff; pointer-events: none; }
.kt-node__info { cursor: pointer; }
.kt-node__info circle { fill: rgba(31,120,140,.14); stroke: rgba(31,120,140,.45); stroke-width: 1; transition: fill .2s var(--ease); }
.kt-node__info:hover circle { fill: rgba(31,120,140,.28); }
.kt-node__info-t { font-size: 9px; font-weight: 800; fill: #0e8197; font-style: italic; pointer-events: none; }
@keyframes ktNodePop { 0% { filter: drop-shadow(0 0 0 rgba(31,164,99,0)); stroke-width: 1.2; } 55% { filter: drop-shadow(0 0 14px rgba(31,164,99,.55)); } 100% { filter: drop-shadow(0 2px 6px rgba(31,164,99,.28)); } }

/* 知识点点亮 · 小游戏 */
.kt-toast { position: absolute; left: 50%; top: 18px; transform: translate(-50%,-16px) scale(.96); z-index: 40; padding: 12px 22px; border-radius: 14px; font-size: 15px; font-weight: 800; color: #fff; letter-spacing: .3px; max-width: 78%; text-align: center; background: linear-gradient(135deg, #ff8a50, #f0653a); border: 1px solid rgba(255,255,255,.35); box-shadow: 0 12px 34px rgba(240,101,58,.42); opacity: 0; pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease); }
.kt-toast.is-show { opacity: 1; transform: translate(-50%,0) scale(1); }

/* 评分弹窗（小游戏特效） */
.kt-modal { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; display: flex; align-items: center; justify-content: center; }
.kt-modal[hidden] { display: none; }
.kt-modal__mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(10,30,45,.42); backdrop-filter: blur(4px); animation: ktFade .25s var(--ease); }
.kt-modal__box { position: relative; z-index: 2; width: min(400px, calc(100% - 40px)); padding: 28px 26px 24px; text-align: center; border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: 0 30px 70px rgba(20,60,90,.4); border: 1px solid rgba(255,255,255,.7); animation: ktBoxIn .4s var(--ease); }
.kt-modal__close { position: absolute; top: 10px; right: 12px; width: 28px; height: 28px; border: none; border-radius: 8px; background: rgba(31,120,140,.1); color: #0e8197; font-size: 17px; line-height: 1; cursor: pointer; }
.kt-modal__close:hover { background: rgba(31,120,140,.2); }
.kt-grade { width: 108px; height: 108px; margin: 4px auto 10px; border-radius: 26px; display: grid; place-items: center; font-size: 62px; font-weight: 900; color: #fff; background: linear-gradient(135deg,var(--g0,#22B8CE),var(--g1,#5bd6e8)); box-shadow: 0 14px 30px rgba(20,80,120,.35), inset 0 2px 4px rgba(255,255,255,.4); }
.kt-grade.kt-grade-pop { animation: ktGradePop .55s var(--ease); }
.kt-grade--S { box-shadow: 0 16px 36px rgba(31,179,122,.45), inset 0 2px 4px rgba(255,255,255,.5); }
.kt-modal__row { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-bottom: 4px; }
.kt-score-num { font-size: 34px; font-weight: 900; color: var(--ink); }
.kt-score-txt { font-size: 13px; color: var(--ink-soft); }
.kt-modal__title { font-size: 17px; font-weight: 800; color: var(--ink); margin-top: 4px; }
.kt-modal__sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; line-height: 1.6; }
.kt-scorebar { height: 10px; border-radius: 999px; background: rgba(0,0,0,.08); overflow: hidden; margin: 14px 0 4px; }
.kt-scorebar__fill { height: 100%; width: 0; border-radius: 999px; transition: width .6s var(--ease); }
.kt-modal__msg { font-size: 14px; color: var(--ink-soft); line-height: 1.75; margin-top: 10px; }
.kt-modal__btns { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.kt-modal__btns .btn { margin: 0; }
.kt-confetti { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.kt-confetti__p { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 3px; opacity: .95; animation-name: ktFall; animation-timing-function: ease-in; }
@keyframes ktFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ktBoxIn { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ktGradePop { 0% { transform: scale(.4) rotate(-8deg); opacity: 0; } 60% { transform: scale(1.12) rotate(3deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes ktFall { 0% { transform: translateY(-20px) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(120vh) rotate(720deg); opacity: .3; } }
.kt-pop__state { margin: 10px 42px 4px 18px; padding: 8px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 700; }
.kt-pop__state--ok { background: rgba(31,164,99,.12); color: #0d6b55; }
.kt-pop__state--no { background: rgba(150,166,181,.16); color: #5b6b79; }
.kt-pop__state--pick { background: rgba(240,166,75,.14); color: #9a6a00; }
.kt-pop__state--bad { background: rgba(225,91,100,.14); color: #b23a42; }
/* ---- 顶部工具条：标题 / 已点亮 / 玩法提示 / 操作，全部并成一行 ----
   以前是"标题块 + 按钮行 + 底部玩法条"三截，纵向吃掉一百多像素；
   并成一条以后，省下的高度都留给下面的脉络图（.kt-wrap）。 */
.kg2-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; flex: none;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 15px;
  background: rgba(255,255,255,.74); box-shadow: 0 6px 18px rgba(30,65,82,.05); }
.kg2-bar__title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.kg2-bar__eyebrow { flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: 1.6px; color: var(--c-cyan-deep); white-space: nowrap; }
.kg2-bar__title h2 { margin: 0; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.25; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kg2-bar__stat { flex: none; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.82); font-size: 10.5px; color: var(--ink-soft); white-space: nowrap; }
.kg2-bar__stat strong { font-size: 14px; color: var(--ink); }
.kg2-bar__hint { flex: 1 1 150px; min-width: 0; font-size: 11.5px; line-height: 1.55; color: var(--ink-soft); }
.kg2-bar__hint i { font-style: italic; font-weight: 800; color: #0e8197; }
.kg2-bar__acts { display: flex; align-items: center; gap: 7px; flex: none; margin-left: auto; }
/* 「提交答案」主按钮：横向文字、自适应宽度、青绿渐变 */
.kg2-bar .kt-submit { height: 34px; padding: 0 16px; border: none; border-radius: 10px; color: #fff; font: inherit; font-size: 13.5px; font-weight: 800; letter-spacing: .5px; line-height: 1; cursor: pointer; background: linear-gradient(135deg,#0C93A6,#22B8CE); box-shadow: 0 6px 14px rgba(12,147,166,.28); transition: transform .16s var(--ease), box-shadow .16s var(--ease); white-space: nowrap; }
.kg2-bar .kt-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(12,147,166,.36); }
.kg2-bar .kt-litall { height: 34px; padding: 0 12px; border: 1px solid rgba(31,164,99,.35); border-radius: 10px; color: #15724f; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; background: rgba(52,173,121,.08); white-space: nowrap; transition: background .16s var(--ease), transform .16s var(--ease); }
.kg2-bar .kt-litall:hover { background: rgba(52,173,121,.16); transform: translateY(-1px); }
/* 图标小按钮（放大/缩小/适应）：仅这些保持方形 */
.kg2-bar button[data-kzoom] { width: 32px; height: 32px; border: 1px solid rgba(129,159,176,.25); border-radius: 10px;
  background: rgba(255,255,255,.92); color: var(--ink); font-size: 17px; font-weight: 800; line-height: 1;
  cursor: pointer; box-shadow: 0 3px 9px rgba(30,65,82,.12); }
.kg2-bar button[data-kzoom]:hover { background: #fff; color: var(--c-cyan-deep); }
.kg2-bar button[data-kzoom]:active { transform: translateY(1px); }
/* ===== 知识图谱 · 节点介绍弹窗 ===== */
.kt-pop { position: absolute; z-index: 20; width: min(360px, calc(100% - 24px)); max-height: min(74%, 520px);
  display: flex; flex-direction: column; overflow: hidden; border-radius: 16px;
  background: linear-gradient(170deg, #ffffff 0%, #f3fafb 100%);
  border: 1px solid rgba(31,120,140,.22);
  box-shadow: 0 18px 44px rgba(20,70,90,.22);
  opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease); }
.kt-pop.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.kt-pop__close { position: absolute; top: 10px; right: 12px; width: 26px; height: 26px; border: none; border-radius: 8px;
  background: rgba(31,120,140,.08); color: #5a6b76; font-size: 17px; line-height: 1; cursor: pointer; }
.kt-pop__close:hover { background: rgba(31,120,140,.16); color: #0e8197; }
.kt-pop__head { padding: 16px 42px 11px 18px; border-bottom: 1px solid rgba(31,120,140,.12); }
.kt-pop__tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #0e8197;
  background: rgba(31,200,224,.12); padding: 2px 9px; border-radius: 999px; }
.kt-pop__head h3 { margin: 9px 0 0; font-size: 17px; line-height: 1.4; color: var(--ink); }
.kt-pop__body { padding: 6px 18px 16px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.kt-pop__sec { padding: 11px 0 2px; }
.kt-pop__sec h4 { margin: 0 0 6px; font-size: 12.5px; font-weight: 800; color: #0e8197; display: flex; align-items: center; }
.kt-pop__sec h4::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-right: 8px; }
.kt-pop__sec p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--ink-soft); }
.kg2-path { display: flex; align-items: center; gap: 5px; overflow-x: auto; padding-bottom: 4px; }
.kg2-path button { flex: none; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font: 700 11px/1.3 inherit; cursor: pointer; }
.kg2-path button em { margin-left: 4px; color: #685fd0; font-size: 9px; font-style: normal; }
.kg2-path i { color: var(--c-cyan); font-style: normal; }
.kg2-overview-list { display: grid; gap: 8px; }
.kg2-overview-list button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 12px; border: 1px solid rgba(104,95,208,.2); border-radius: 12px; background: rgba(104,95,208,.055); text-align: left; cursor: pointer; }
.kg2-overview-list strong { color: var(--ink); font-size: 13px; }
.kg2-overview-list span { color: var(--ink-soft); font-size: 10.5px; }
.kg2-related-list { display: flex; flex-wrap: wrap; gap: 7px; }
.kg2-related-list button { padding: 7px 10px; border: 1px dashed #9aaab4; border-radius: 999px; background: #f7fafb; color: var(--ink-soft); font: 700 11px/1 inherit; cursor: pointer; }
.kg2-relation-explain { padding: 13px; border-radius: 13px; background: rgba(255,200,61,.10); }
.kg2-relation-explain strong { color: var(--c-yellow-deep); font-size: 13px; }
.kg2-relation-explain p { margin: 6px 0 0; font-size: 13px; line-height: 1.8; color: var(--ink); }

.kg2-route--vertical { display: grid; width: 100%; overflow: visible; }
.kg2-route__step { display: grid; justify-items: stretch; }
.kg2-route__step button { display: grid; grid-template-columns: 34px minmax(0,1fr); column-gap: 10px; align-items: center; width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid rgba(14,129,151,.15); border-radius: 13px; background: rgba(255,255,255,.92); color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 5px 14px rgba(30,65,82,.05); }
.kg2-route__step button:hover { border-color: var(--c-cyan); background: rgba(31,200,224,.06); }
.kg2-route__step button > span { grid-row: 1 / span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #fff; background: linear-gradient(135deg,#0e8197,#23bfd1); font-size: 10px; font-weight: 900; }
.kg2-route__step strong { min-width: 0; font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.kg2-route__step small { margin-top: 2px; color: var(--ink-soft); font-size: 9.5px; }
.kg2-route__step > i { justify-self: start; width: 34px; height: 20px; color: var(--c-cyan); font: 900 15px/20px inherit; text-align: center; }
.kg2-guide { display: grid; gap: 9px; }
.kg2-guide > div { padding: 11px 12px; border-left: 3px solid var(--c-cyan); border-radius: 0 12px 12px 0; background: rgba(31,200,224,.05); }
.kg2-guide span { display: block; margin-bottom: 4px; color: var(--c-cyan-deep); font-size: 11px; font-weight: 900; }
.kg2-guide p { margin: 0; color: var(--ink-soft); font-size: 11.5px; line-height: 1.75; }

/* ===== 迁移连接：未来徽标 / 语义连线 / 双向对照 / 语义图例 ===== */
.kg2-node__future { font-size: 9px; font-weight: 700; fill: color-mix(in srgb, var(--node-color) 68%, #6b7c88); }
.kg2-node--related .kg2-node__title { font-size: 14px; }
.kg2-edge--sem-morph path { stroke: #1FA88A; }
.kg2-edge--sem-lang path { stroke: #C9912B; }
.kg2-edge--sem-base path { stroke: #6D60C8; }
.kg2-edge--sem-tool path { stroke: #C85BA6; }
.kg2-edge--sem-morph .kg2-edge__label { fill: #158A6F; }
.kg2-edge--sem-lang .kg2-edge__label { fill: #A5771C; }
.kg2-edge--sem-base .kg2-edge__label { fill: #5A4FB0; }
.kg2-edge--sem-tool .kg2-edge__label { fill: #B3478C; }
.kg2-semlegend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 4px 8px; font-size: 10.5px; color: var(--ink-soft); }
.kg2-semlegend__t { font-weight: 900; color: var(--c-cyan-deep); }
.kg2-semlegend span { display: inline-flex; align-items: center; gap: 5px; }
.kg2-sdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.kg2-sdot--morph { background: #1FA88A; }
.kg2-sdot--lang { background: #C9912B; }
.kg2-sdot--base { background: #6D60C8; }
.kg2-sdot--tool { background: #C85BA6; }
.kg2-sembadge { display: inline-block; padding: 4px 12px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 800; background: #0e8197; }
.kg2-sembadge--morph { background: #1FA88A; }
.kg2-sembadge--lang { background: #C9912B; }
.kg2-sembadge--base { background: #6D60C8; }
.kg2-sembadge--tool { background: #C85BA6; }
.kg2-compare { display: grid; gap: 10px; }
.kg2-compare__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }
.kg2-compare__l, .kg2-compare__r { padding: 12px; border-radius: 12px; font-size: 13px; line-height: 1.8; color: var(--ink); }
.kg2-compare__l { background: rgba(31,200,224,.07); border: 1px solid rgba(31,200,224,.22); }
.kg2-compare__r { background: rgba(255,200,61,.08); border: 1px solid rgba(229,169,47,.25); }
.kg2-compare__l span, .kg2-compare__r span { display: block; margin-bottom: 6px; font-size: 9.5px; font-weight: 900; letter-spacing: 1.5px; }
.kg2-compare__l span { color: var(--c-cyan-deep); }
.kg2-compare__r span { color: #A5771C; }
.kg2-compare__arrow { align-self: center; color: var(--ink-soft); font-style: normal; font-size: 16px; }
.kg2-compare__l p, .kg2-compare__r p { margin: 0; }
.kg2-future { margin: 0; padding: 10px 12px; border-radius: 11px; background: rgba(104,95,208,.07); border: 1px solid rgba(104,95,208,.2); color: var(--ink-soft); font-size: 13px; font-weight: 600; }

.kg2-sec--exercise { margin: 0; padding: 18px 18px 24px; background: linear-gradient(180deg,rgba(104,95,208,.045),transparent); }
.kg2-problem-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.kg2-problem-nav button { width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink-soft); font-weight: 800; cursor: pointer; }
.kg2-problem-nav button.is-active { color: #fff; background: #685fd0; border-color: #685fd0; }
.kg2-problem { padding: 14px; border: 1px solid rgba(104,95,208,.18); border-radius: 15px; background: rgba(255,255,255,.88); }
.kg2-problem__meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; font-size: 10px; color: var(--ink-soft); }
.kg2-problem__meta strong { padding: 3px 7px; border-radius: 999px; color: #685fd0; background: rgba(104,95,208,.1); }
.kg2-question { font-size: 13.5px; font-weight: 650; line-height: 1.85; color: var(--ink); }
.kg2-options { display: grid; gap: 7px; margin-top: 11px; }
.kg2-option { display: flex; align-items: flex-start; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.kg2-option > span { display: grid; place-items: center; width: 25px; height: 25px; flex: none; border-radius: 7px; background: #eef3f5; color: var(--ink-soft); font-size: 11px; font-weight: 900; }
.kg2-option p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.55; }
.kg2-option:hover { border-color: rgba(104,95,208,.45); }
.kg2-option.is-selected { border-color: #685fd0; background: rgba(104,95,208,.07); }
.kg2-option.is-selected > span { color: #fff; background: #685fd0; }
.kg2-option:disabled { cursor: default; opacity: .75; }
.kg2-actions { display: flex; gap: 8px; margin-top: 12px; }
.kg2-actions .kg2-submit { flex: 1; width: auto; min-height: 42px; margin-top: 0; }
.kg2-reveal { flex: 1; min-height: 42px; }
.kg2-option.is-correct { border-color: rgba(52,173,121,.65); background: rgba(52,173,121,.10); }
.kg2-option.is-correct > span { color: #fff; background: #34ad79; }
.kg2-submit { width: 100%; min-height: 42px; margin-top: 12px; }
.kg2-feedback { margin-top: 10px; }
.kg2-result { padding: 9px 11px; border-radius: 10px; font-size: 12px; font-weight: 800; }
.kg2-result--ok { color: #15724f; background: rgba(52,173,121,.12); }
.kg2-result--bad { color: #b43d3d; background: rgba(229,72,77,.10); }
.kg2-tip { margin-top: 6px; font-size: 12px; color: var(--ink-soft); }
.kg2-answer { margin-top: 8px; padding: 11px; border-radius: 11px; background: #f6f8f9; }
.kg2-answer strong { display: block; margin-top: 6px; font-size: 10px; letter-spacing: 1px; color: var(--c-cyan-deep); }
.kg2-answer strong:first-child { margin-top: 0; }
.kg2-answer p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--ink); }

@media (max-width: 1100px) {
  .graph-view .graph-body { grid-template-columns: 1fr; overflow-y: auto; }
  .graph-view .graph-stage { min-height: 720px; }
  .graph-view .graph-panel { min-height: 520px; overflow-y: visible; }
}
/* 中窄屏：装饰性的英文小标先让位，保证"标题 / 进度 / 提示 / 按钮"始终一行 —— 空间留给脉络图 */
@media (max-width: 1300px) {
  .kg2-bar__eyebrow { display: none; }
}
@media (max-width: 900px) {
  .kg2-bar__hint { display: none; }
}
@media (max-width: 680px) {
  .graph-view .graph-body { padding: 10px 12px 20px; }
  .graph-view .graph-stage { min-height: 620px; }
  .kg2-head { align-items: flex-start; flex-direction: column; }
  .kg2-stats { width: 100%; }
  .kg2-stats span { flex: 1; min-width: 0; }
  .kg2-toolbar { overflow-x: auto; }
  .kg2-toolbar button, .kg2-toolbar__hint { flex: none; }
  #kg2-svg { min-height: 520px; }
  .kg2-bar { gap: 6px 10px; padding: 7px 10px; }
  .kg2-bar__acts { margin-left: 0; }
}

/* ==================== PWA 新版本提示条 ==================== */
.update-banner {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 99999;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 14px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(20,30,60,.18);
  font-size: 13px; color: var(--ink); white-space: nowrap;
  animation: updateBannerIn .35s var(--ease);
}
.update-banner__txt { line-height: 1.4; }
.update-banner__go {
  border: none; background: var(--grad); color: #fff; font-weight: 700;
  padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; font-family: inherit;
  transition: transform .2s var(--ease);
}
.update-banner__go:hover { transform: translateY(-1px); }
.update-banner__close {
  border: none; background: none; color: var(--ink-soft); font-size: 17px; cursor: pointer;
  padding: 0 4px; line-height: 1;
}
@keyframes updateBannerIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* =========================================================
   全局悬浮球 · 自由探索入口
   ========================================================= */
.ai-orb {
  position: fixed; right: 26px; bottom: 128px; z-index: 1420;
  width: 78px; height: 78px; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: none;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 6px 18px rgba(20,60,180,.35));
}
.ai-orb__core {
  position: relative; z-index: 2; width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 28%, #a4e6ff 0%, #3a8bff 40%, #1740c8 78%, #0a1d7e 100%);
  box-shadow: 0 0 20px rgba(90,160,255,.8), 0 0 46px rgba(60,130,255,.4), inset 0 0 16px rgba(255,255,255,.35);
  color: #fff; transition: transform .25s ease;
}
.ai-orb__core svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 1.8; }
.ai-orb__glow { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(90,160,255,.5), rgba(90,160,255,0) 66%);
  animation: orbBreathe 3.2s ease-in-out infinite; pointer-events: none; }
.ai-orb__ring { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%;
  border: 2px dashed rgba(150,205,255,.6); animation: orbSpin 16s linear infinite; pointer-events: none; }
.ai-orb__ring--2 { top: 5px; right: 5px; bottom: 5px; left: 5px; border-style: solid; border-color: rgba(140,200,255,.3); animation: orbSpin 9s linear infinite reverse; }
@keyframes orbSpin { to { transform: rotate(360deg); } }
@keyframes orbBreathe { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.22); opacity: 1; } }
.ai-orb__label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px;
  white-space: nowrap; font-size: 12px; letter-spacing: 2px; color: rgba(225,238,255,.7); pointer-events: none;
  text-shadow: 0 1px 6px rgba(20,60,160,.5); }
.ai-orb:hover .ai-orb__core { transform: scale(1.08); }

/* 弹窗开启时：背景压暗 + 自由探索居中小窗 */
body.orb-open::after { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1400;
  background: radial-gradient(circle at center, rgba(12,20,60,.28), rgba(6,10,30,.6));
  backdrop-filter: blur(2px); }
.view.ai-view.orb-float { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1410;
  flex-direction: column; align-items: center; justify-content: center; padding: 22px; }
.view.ai-view.orb-float .ai-topbar,
.view.ai-view.orb-float .ai-body { width: min(1000px, 96vw); }
.view.ai-view.orb-float .ai-topbar { flex: 0 0 auto; padding: 16px 22px 10px; border-radius: 20px 20px 0 0;
  background: rgba(255,255,255,.68); border: 1px solid rgba(120,170,255,.3); border-bottom: none;
  backdrop-filter: blur(10px); box-shadow: 0 -16px 40px rgba(28,60,160,.16); }
.view.ai-view.orb-float .ai-body { flex: 1 1 auto; min-height: 0; max-height: min(660px, 82vh); overflow: auto;
  border-radius: 0 0 20px 20px; background: rgba(255,255,255,.94);
  border: 1px solid rgba(120,170,255,.3); border-top: none; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
/* 关闭按钮：非弹窗隐藏，弹窗时显示在右上角并隐藏导航按钮 */
.orb-close { display: none; }
.view.ai-view.orb-float .ai-topbar { position: relative; }
.view.ai-view.orb-float .tb-left .nav-btn { display: none; }
.view.ai-view.orb-float .orb-close { display: inline-flex; align-items: center; justify-content: center;
  position: absolute; right: 14px; top: 15px; width: 34px; height: 34px; padding: 0;
  font-size: 20px; line-height: 1; color: var(--ink-soft);
  background: rgba(20,40,60,.06); border: 1px solid var(--line); border-radius: 50%; }
.view.ai-view.orb-float .orb-close:hover { color: #fff; background: var(--grad); border-color: transparent; }
@media (max-width: 640px) {
  .ai-orb { right: 14px; bottom: 104px; width: 66px; height: 66px; }
  .ai-orb__core { width: 46px; height: 46px; }
  .ai-orb__core svg { width: 22px; height: 22px; }
}

/* ===================== 学习报告（集合） ===================== */
.report { width: 100%; max-width: 1080px; margin: 0 auto; }
.report__hero { text-align: center; padding: 6px 0 18px; }
.report__hero-kicker { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 2px; color: #fff; background: linear-gradient(135deg,#0C93A6,#22B8CE); padding: 5px 14px; border-radius: 999px; margin-bottom: 12px; }
.report__hero h2 { font-size: clamp(22px,2.5vw,30px); font-weight: 800; margin: 0 0 8px; }
.report__hero p { max-width: 560px; margin: 0 auto; color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; }
.report__steps { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px auto 22px; flex-wrap: wrap; }
.report__step { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-soft); padding: 6px 14px; border-radius: 999px; background: rgba(12,147,166,0.06); border: 1px solid rgba(12,147,166,0.14); }
.report__step i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #9aa3ad; }
.report__step.is-active { color: #fff; background: linear-gradient(135deg,#0C93A6,#22B8CE); border-color: transparent; box-shadow: 0 6px 16px rgba(12,147,166,0.28); }
.report__step.is-done { color: #0C93A6; border-color: rgba(12,147,166,0.3); background: rgba(12,147,166,0.08); }

/* 下载按钮（右上角） */
.rbtn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 12px; border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#0C93A6,#22B8CE); box-shadow: 0 6px 16px rgba(12,147,166,0.3); transition: transform .2s, box-shadow .2s; }
.rbtn svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rbtn--ghost { color: #0C93A6; background: rgba(12,147,166,0.08); box-shadow: none; }
.rbtn:hover { transform: translateY(-2px); }
.rbtn--ghost:hover { box-shadow: 0 6px 14px rgba(12,147,166,0.2); }

/* 自评：矩阵式多列网格（一次显示全部题） */
.assess { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.assess__group { background: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.9); border-radius: 16px; padding: 11px 12px; box-shadow: 0 6px 20px rgba(20,40,70,0.06); }
.assess__group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; padding-bottom: 9px; border-bottom: 1px solid rgba(12,147,166,0.12); }
.assess__group-no { flex: none; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg,#0C93A6,#22B8CE); padding: 2px 9px; border-radius: 999px; }
.assess__group-title { font-size: 13.5px; font-weight: 800; color: var(--ink); min-width: 0; }
.assess__items { display: flex; flex-direction: column; gap: 6px; }
.assess-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: 10px; background: rgba(12,147,166,0.04); border: 1px solid rgba(12,147,166,0.08); }
.assess-item__no { font-weight: 800; color: var(--ink); font-size: 12.5px; }
.assess-item__opts { display: inline-flex; gap: 5px; }
.assess__opt { padding: 3px 11px; border-radius: 999px; border: 1.5px solid rgba(12,147,166,0.3); background: rgba(255,255,255,0.7); color: var(--ink-soft); font-weight: 700; font-size: 11.5px; cursor: pointer; font-family: inherit; transition: all .18s; }
.assess__opt:hover { border-color: #0C93A6; color: #0C93A6; }
.assess__opt.is-on[data-v="right"] { background: linear-gradient(135deg,#1B8B58,#2FAE73); border-color: transparent; color: #fff; box-shadow: 0 3px 10px rgba(27,139,88,0.28); }
.assess__opt.is-on[data-v="wrong"] { background: linear-gradient(135deg,#E23A6E,#F0618C); border-color: transparent; color: #fff; box-shadow: 0 3px 10px rgba(226,58,110,0.28); }

/* 引导条（引导语 + 步骤 同一行） */
.report__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 2px 0 12px; }
.report__hero-guide { margin: 0; display: inline-flex; align-items: center; gap: 9px; font-size: 15px; }
.report__hero-guide b { font-size: 13px; font-weight: 800; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg,#0C93A6,#22B8CE); padding: 4px 12px; border-radius: 999px; box-shadow: 0 3px 10px rgba(12,147,166,0.26); }
.report__hero-guide-tx { color: var(--ink-soft); font-weight: 700; }
.report__bar .report__steps { margin: 0; }
.report__foot { margin: 16px 0 6px; display: flex; justify-content: center; }
.report__submit { padding: 11px 34px; border-radius: 999px; border: none; cursor: pointer; font-family: inherit; font-size: 14.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#FFC83D,#F08A3E); box-shadow: 0 8px 22px rgba(240,138,62,0.34); transition: transform .2s, box-shadow .2s; }
.report__submit:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(240,138,62,0.44); }
.report__submit:active { transform: translateY(0) scale(0.98); }
.hw-note { display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 12px 16px; border-radius: 14px; background: rgba(31,179,122,0.08); border: 1px solid rgba(31,179,122,0.24); flex-wrap: wrap; }
.hw-note__ok { font-size: 14px; font-weight: 800; color: #1fb37a; }
.hw-note__btn { margin-left: auto; padding: 8px 16px; border: none; border-radius: 10px; background: linear-gradient(135deg,#0C93A6,#22B8CE); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(12,147,166,.28); }
.hw { display: flex; flex-direction: column; gap: 14px; }
.hw-day { border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,0.6); padding: 12px 14px; }
.hw-day__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hw-day__wd { font-size: 14px; font-weight: 800; color: #14212b; }
.hw-day__range { font-size: 12px; color: #6b7a89; }
.hw-day__chips { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; }
.hw-chip { aspect-ratio: 1 / 1; border: 1.5px solid var(--line); border-radius: 10px; background: var(--glass); color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: all .18s var(--ease); }
.hw-chip:hover { border-color: rgba(12,147,166,0.5); transform: translateY(-1px); }
.hw-chip.is-right { border-color: #1fb37a; background: rgba(31,179,122,.14); color: #1fb37a; }
.hw-chip.is-wrong { border-color: #e15b64; background: rgba(225,91,100,.14); color: #e15b64; }

/* AI 问答 */
.report-chat { max-width: 820px; margin: 0 auto; background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.9); border-radius: 20px; box-shadow: 0 8px 26px rgba(20,40,70,0.08); overflow: hidden; display: flex; flex-direction: column; }
.report-chat__msgs { min-height: 340px; max-height: 56vh; overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.report-chat__composer { padding: 12px 16px 14px; border-top: 1px solid var(--line); background: rgba(255,255,255,0.6); }
.report-chat__actions { display: flex; align-items: flex-end; gap: 10px; }
.report-chat__actions textarea { flex: 1; min-width: 0; min-height: 48px; max-height: 140px; resize: none; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe; font-family: inherit; font-size: 14px; line-height: 1.6; }
.report-chat__actions textarea:focus { outline: none; border-color: #0C93A6; }
.report-chat__actions .mic-btn { flex: 0 0 auto; width: 46px; height: 46px; padding: 0; border-radius: 12px; color: #0C93A6; background: rgba(12,147,166,0.1); border: 1px solid rgba(12,147,166,0.25); }
.report-chat__actions .chat__send { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 88px; height: 46px; padding: 0; border: none; border-radius: 12px; cursor: pointer; color: #fff; background: linear-gradient(135deg,#0C93A6,#22B8CE); box-shadow: 0 6px 16px rgba(12,147,166,0.3); }
.report-chat__actions .chat__send svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.report-chat__composer .chat__status { padding-left: 2px; }

/* 分析中 */
.report--analyzing { display: grid; place-items: center; min-height: 52vh; }
.analyzing { text-align: center; }
.analyzing__ring { position: relative; width: 150px; height: 150px; margin: 0 auto 22px; border-radius: 50%; background: conic-gradient(from 0deg, #1FC8E0, #3A7BD5, #8B5CF6, #1FC8E0); -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%); mask: radial-gradient(circle, transparent 54%, #000 55%); animation: analyzingSpin 1.3s linear infinite; }
.analyzing__ring-core { position: absolute; top: 26%; right: 26%; bottom: 26%; left: 26%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #eef7fb); box-shadow: 0 6px 18px rgba(31,200,224,0.3); display: grid; place-items: center; }
@keyframes analyzingSpin { to { transform: rotate(360deg); } }
.analyzing__title { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.analyzing__hint { color: var(--ink-soft); font-size: 14px; margin-bottom: 20px; }
.analyzing__list { list-style: none; display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; padding: 0; margin: 0; }
.analyzing__list li { font-size: 12.5px; font-weight: 700; color: #0C93A6; background: rgba(12,147,166,0.08); border: 1px solid rgba(12,147,166,0.2); padding: 6px 14px; border-radius: 999px; animation: analyzingPulse 1.6s ease-in-out infinite; }
.analyzing__list li:nth-child(2) { animation-delay: .3s; }
.analyzing__list li:nth-child(3) { animation-delay: .6s; }
@keyframes analyzingPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* 报告正文 */
.report--result { padding: 8px 0 30px; }
.r-print { width: 100%; max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
/* 报告页（A4 比例，页面1=基础+整体+知识点，页面2=AI智能诊断+建议） */
.r-page { background: #fff; border-radius: 6px; box-shadow: 0 8px 30px rgba(20,40,70,0.10); padding: 0 44px 32px; aspect-ratio: 210 / 297; }
.r-page--2 { page-break-before: always; break-before: page; }
/* PDF 导出离屏容器：白底，用于 html2pdf 捕获彩色报告 */
.rep-stage { position: fixed; left: -10000px; top: 0; width: 900px; background: #ffffff; z-index: -1; }

/* 开场加载动画（登录后进入页面时的过渡）——功能图标向中央汇聚 + 光芒数学粒子 */
#splash { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; overflow: hidden;
  background: linear-gradient(160deg, #FFF6DA 0%, #EAF6F8 42%, #DCF0F7 100%); /* 与全站极光同色家族 */
  opacity: 1; transition: opacity .6s ease; }
#splash.is-hide { opacity: 0; pointer-events: none; }
.splash__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.splash__bg::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: radial-gradient(60% 60% at 50% 42%, rgba(255,200,61,.18) 0%, rgba(31,200,224,.14) 45%, rgba(255,255,255,0) 70%); }
/* 数学粒子画布 */
#splash-math { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }

/* 中央汇聚大核心：功能图标依次飞入消失的"成长光核"（居中） */
.splash__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 168px; height: 168px; opacity: 0; animation: splashCoreIn .6s ease .6s forwards; }
.splash__core__rings { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%;
  border: 2px solid rgba(31,200,224,.4); border-top-color: rgba(31,200,224,.9);
  animation: splashSpin 2.6s linear infinite; }
.splash__core__rings.r2 { top: 14px; right: 14px; bottom: 14px; left: 14px; border-color: rgba(255,200,61,.4); border-left-color: rgba(255,200,61,.9);
  animation-duration: 3.6s; animation-direction: reverse; }
@keyframes splashSpin { to { transform: rotate(360deg); } }
.splash__core__face { position: absolute; top: 32px; right: 32px; bottom: 32px; left: 32px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c-cyan) 0%, var(--c-mint) 60%, var(--c-yellow) 100%);
  box-shadow: 0 0 46px rgba(31,200,224,.55), 0 0 90px rgba(255,200,61,.3), inset 0 0 22px rgba(255,255,255,.4); }
.splash__core__logo { width: 52px; height: 52px; fill: none; stroke: #fff; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 8px rgba(0,0,0,.22));
  animation: splashCoreLogo 1.6s ease-in-out infinite; }
@keyframes splashCoreLogo { 0%,100% { transform: scale(1); opacity:.92; } 50% { transform: scale(1.14); opacity:1; } }
@keyframes splashCoreIn { to { opacity: 1; } }

/* 从四周依次飞入中央核心的功能图标（逐个错峰，飞到核心中消失） */
.splash__fleet { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.splash__f { position: absolute; left: 0; top: 0;
  /* 负 margin 把 96×96 的盒子中心对准坐标点：JS 给的 --x0/--y0/--cx/--cy 就是"图标中心"。
     不这样做的话，translate 落的是盒子左上角 → 整圈会整体偏右下 48px（既不对称，也更容易贴边）。 */
  margin-left: -48px; margin-top: -48px;
  transform: translate(var(--x0), var(--y0)) scale(.55) rotate(var(--r0, 0deg)); opacity: 0;
  width: 96px; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  will-change: transform, opacity; }
.splash__f svg { width: 52px; height: 52px; fill: none; stroke: var(--c); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  /* 只用一层投影：12 个图标同时做 transform 动画，两层 drop-shadow 意味着每帧 24 次滤镜重绘 */
  filter: drop-shadow(0 0 12px rgba(31,200,224,.25)); }
.splash__f span { font-size: 12px; font-weight: 800; color: #5b6b79; letter-spacing: 1px; white-space: nowrap; }
/* 两条动画：① 依次入场(var --in) ② 依次飞入中心消失(var --gd)；--in 晚的图像 --gd 晚，形成陆续汇聚。
   缓动都改成"起步柔和、收尾平滑"的一版（原来 FIn 带 1.06 的过冲会轻微回弹、看着发跳）。 */
.splash__f { animation:
  splashFIn 1.05s cubic-bezier(.22,1,.36,1) var(--in, 0.2s) forwards,
  splashFGather 0.9s cubic-bezier(.55,.06,.68,.19) var(--gd, 1.2s) forwards; }
@keyframes splashFIn { from { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(.55) rotate(var(--r0,0deg)); }
  to { opacity: 1; transform: translate(var(--x0), var(--y0)) scale(1) rotate(var(--r0,0deg)); } }
@keyframes splashFGather { from { opacity: 1; transform: translate(var(--x0), var(--y0)) scale(1) rotate(var(--r0,0deg)); }
  to { opacity: 0; transform: translate(var(--cx), var(--cy)) scale(.06) rotate(520deg); } }

/* 窄屏（竖屏手机）：图标与文字缩小，避免收小半径后彼此挨得太近 */
@media (max-width: 620px) {
  .splash__f svg { width: 34px; height: 34px; }
  .splash__f span { font-size: 10px; letter-spacing: 0; }
}

/* 汇聚完成后浮现的小字品牌标识 */
.splash__tagline { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); text-align: center;
  opacity: 0; animation: splashTagline 1s cubic-bezier(.22,1,.3,1) 2.6s forwards; }
.splash__tagline__k { display: block; font-size: 15px; font-weight: 800; letter-spacing: 6px; color: #0B7A92; }
@keyframes splashTagline { from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.splash__text { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%);
  font-size: 13px; font-weight: 600; color: #98a2ab; letter-spacing: 2px; }
@keyframes splashSpin { to { transform: rotate(360deg); } }
.rep-stage .report--result { padding: 0; }
.rep-stage .r-print { max-width: 860px; margin: 0 auto; }
.rep-stage .r-page { box-shadow: none; border-radius: 0; }
.r-head { margin: 0 -44px; padding: 28px 44px 20px; background: linear-gradient(135deg,#0C93A6,#22B8CE,#3A7BD5); color: #fff; }
.r-head__brand { font-size: 12px; font-weight: 800; letter-spacing: 3px; opacity: .9; }
.r-head__title { font-size: clamp(20px,2.4vw,28px); font-weight: 800; margin: 6px 0 10px; }
.r-head__meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; opacity: .95; }
.r-head__meta span { display: inline-flex; align-items: center; gap: 4px; }
.r-block { padding: 22px 0; border-top: 1px solid rgba(12,147,166,0.1); }
.r-block__title { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.r-ic { color: #1FC8E0; font-size: 13px; }
.r-basic__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 10px 24px; background: #f6fafd; border: 1px solid rgba(12,147,166,0.1); border-radius: 14px; padding: 16px 18px; }
.r-field__l { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 2px; }
.r-field__v { font-size: 15px; font-weight: 700; }
.r-gauge__row { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.r-gauge__ring { position: relative; width: 150px; height: 150px; flex: none; }
.r-gauge__ring svg { width: 150px; height: 150px; transform: rotate(-90deg); }
.r-gauge__num { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; text-align: center; }
.r-gauge__num b { font-size: 30px; color: #0C93A6; line-height: 1; }
.r-gauge__num span { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.r-gauge__facts { display: flex; gap: 26px; flex-wrap: wrap; }
.rf { text-align: center; min-width: 66px; }
.rf__v { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; }
.rf__l { font-size: 12px; color: var(--ink-soft); }
.rf__v { color: #3a4552; }
.rf--ok .rf__v { color: #1B8B58; }
.rf--no .rf__v { color: #E23A6E; }
.r-mastery { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.r-mastery__radar { flex: none; width: 300px; max-width: 100%; }
.radar { display: block; width: 100%; height: auto; }
.radar-label { font-size: 11px; fill: #6e6e73; font-weight: 600; }
.r-mastery__bars { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 10px; }
.mbar__head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.mbar__name { font-weight: 700; }
.mbar__pct { font-weight: 800; color: #0C93A6; }
.mbar__track { height: 9px; border-radius: 9px; background: rgba(12,147,166,0.1); overflow: hidden; }
.mbar__fill { height: 100%; border-radius: 9px; background: linear-gradient(90deg,#1FC8E0,#0C93A6); transition: width .8s var(--ease); }
.mbar__fill.is-high { background: linear-gradient(90deg,#2FAE73,#1B8B58); }
.mbar__fill.is-low { background: linear-gradient(90deg,#FFC83D,#F08A3E); }
.r-ana .r-ana__para { margin-bottom: 14px; }
.r-ana__tag { display: inline-block; font-size: 12px; font-weight: 800; color: #0C93A6; background: rgba(12,147,166,0.1); padding: 3px 10px; border-radius: 20px; margin-bottom: 6px; }
.r-ana__para p { font-size: 14.5px; line-height: 1.75; }
.r-ana__cols { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.r-ana__col { flex: 1; min-width: 220px; border-radius: 14px; padding: 16px 18px; }
.r-ana__col--ok { background: rgba(27,139,88,0.08); border: 1px solid rgba(27,139,88,0.2); }
.r-ana__col--warn { background: rgba(224,120,31,0.08); border: 1px solid rgba(224,120,31,0.2); }
.r-ana__col h3 { font-size: 14px; margin-bottom: 8px; }
.r-ana__col--ok h3 { color: #1B8B58; }
.r-ana__col--warn h3 { color: #E0781F; }
.r-ana__col ul { padding-left: 18px; font-size: 14px; }
.r-ana__col li { margin: 4px 0; }
.r-next__list { padding-left: 22px; font-size: 14.5px; }
.r-next__list li { margin: 8px 0; line-height: 1.6; }
.r-foot { padding: 18px 0 8px; text-align: center; color: #9aa3ad; font-size: 12px; border-top: 1px solid rgba(12,147,166,0.08); }

@media (max-width: 600px) {
  .r-print { max-width: 100%; }
  .r-page { padding: 0 20px 24px; }
  .r-head { margin: 0 -20px; padding: 22px 20px 16px; }
  .r-block { padding: 18px 0; }
  .r-mastery { gap: 16px; }
  .r-mastery__radar { width: 100%; }
  .r-gauge__row { gap: 18px; }
}

/* ============ 学习报告 · 四报告看板 ============ */
.report-board { width: 100%; max-width: 1180px; margin: 0 auto; padding: clamp(18px, 3vh, 32px) clamp(20px, 3vw, 48px) 4vh; }
.rb-head { text-align: center; margin-bottom: 20px; }
.rb-head__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 900; letter-spacing: 3px; color: var(--c-cyan-deep); }
.rb-head__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-cyan); box-shadow: 0 0 0 3px rgba(12,147,166,.14); }
.rb-head__title { font-size: clamp(24px, 3vw, 32px); font-weight: 900; color: var(--ink); margin: 8px 0 6px; }
.rb-head__lead { font-size: 14px; color: var(--ink-soft); margin: 0; }
.rb-steps { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; }
.rb-steps__t { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); letter-spacing: 1px; flex: none; }
.rb-steps__line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(12,147,166,.35), transparent); }
.rb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rb-grid--composite { grid-template-columns: 1fr; margin-top: 20px; }
@media (max-width: 900px) { .rb-grid { grid-template-columns: 1fr; } }
.rbc { overflow: hidden; cursor: pointer; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); display: flex; flex-direction: column; }
.rbc:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.rbc.is-locked { cursor: not-allowed; }
.rbc.is-locked:hover { transform: none; box-shadow: var(--shadow-1); }
.rbc__cover { position: relative; height: 128px; display: flex; align-items: center; justify-content: center; padding: 0 18px; overflow: hidden; color: #fff; background: var(--g, linear-gradient(135deg,#0C93A6,#22B8CE)); }
.rbc__g { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: radial-gradient(circle at 78% 22%, rgba(255,255,255,.3), transparent 46%); }
.rbc__no { position: absolute; z-index: 2; top: 12px; right: 16px; font-size: 13px; font-weight: 900; letter-spacing: 2px; opacity: .9; }
.rbc__cover-txt { position: relative; z-index: 2; font-size: 24px; font-weight: 900; line-height: 1.2; text-align: center; white-space: nowrap; letter-spacing: .5px; text-shadow: 0 2px 12px rgba(0,0,0,.2); }
.rbc__cover-txt.is-done { color: #fff; }
.rbc__cover-txt.is-pending { color: #fff; }
.rbc__cover-txt.is-locked { color: #eef1f3; font-size: 20px; opacity: .95; }
.rbc__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; align-items: stretch; }
.rbc__title { font-size: 18px; font-weight: 800; color: var(--ink); margin: 0; }
.rbc__btn { display: block; text-align: center; font-size: 14px; font-weight: 800; padding: 10px 16px; border-radius: 12px; border: 1px solid transparent; }
.rbc__btn.is-ok { color: #fff; background: linear-gradient(135deg,#1fb37a,#25c98d); box-shadow: 0 6px 16px rgba(31,179,122,.3); }
.rbc__btn.is-go { color: #fff; background: linear-gradient(135deg,#0C93A6,#22B8CE); box-shadow: 0 6px 16px rgba(12,147,166,.3); }
.rbc__btn.is-disabled { color: #98a2ab; background: rgba(120,132,144,.14); border-color: rgba(120,132,144,.2); }
.rbc__sub { font-size: 12px; color: var(--ink-soft); text-align: center; }
.rbc--full .rbc__body { flex-direction: row; align-items: center; gap: 20px; }
.rbc--full .rbc__cover { height: 128px; }
/* 锁定态：封面去饱和变灰 */
.rbc.is-locked .rbc__cover { filter: grayscale(.85) brightness(.9); }

/* ============ 学习报告 · 报告渲染（crm） ============ */
.crm { width: 100%; max-width: 900px; margin: 0 auto; padding: clamp(16px, 2.5vh, 28px) clamp(18px, 3vw, 44px) 4vh; }
.crm__cover { position: relative; border-radius: 20px; padding: 34px 34px 30px; color: #fff; overflow: hidden; background: linear-gradient(135deg,#0C93A6,#22B8CE); box-shadow: 0 14px 34px rgba(12,147,166,.28); }
.crm__cover::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: radial-gradient(circle at 84% 20%, rgba(255,255,255,.34), transparent 46%), linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: auto, 100% 26px; }
.crm__cover--gold { background: linear-gradient(135deg,#B57400,#FFC83D); box-shadow: 0 14px 34px rgba(181,116,0,.28); }
.crm__brand { position: relative; z-index: 2; font-size: 11px; font-weight: 900; letter-spacing: 3px; opacity: .92; }
.crm__title { position: relative; z-index: 2; font-size: clamp(26px, 3.4vw, 36px); font-weight: 900; margin: 10px 0 6px; }
.crm__sub { position: relative; z-index: 2; font-size: 14px; opacity: .94; margin: 0 0 14px; }
.crm__meta { position: relative; z-index: 2; display: flex; gap: 18px; font-size: 12.5px; opacity: .92; flex-wrap: wrap; }
.crm__body { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.crm-sec { padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,.72); border: 1px solid var(--line); }
.crm-sec__t { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.crm-sec__t::before { content: "◆"; color: var(--c-cyan-deep); font-size: 12px; }
.crm-km { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
@media (max-width: 620px) { .crm-km { grid-template-columns: 1fr; } }
.crm-km > div { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: rgba(12,147,166,.05); border: 1px solid rgba(12,147,166,.12); font-size: 14px; font-weight: 700; color: var(--ink); }
.crm-km__dot { width: 9px; height: 9px; border-radius: 50%; background: #c7d1da; flex: none; }
.crm-km > div.on { background: rgba(37,185,154,.08); border-color: rgba(37,185,154,.22); }
.crm-km > div.on .crm-km__dot { background: #1fb37a; box-shadow: 0 0 0 3px rgba(31,179,122,.16); }
.crm-km__state { margin-left: auto; font-size: 12px; font-weight: 800; color: #1fb37a; }
.crm-km__state--wait { color: #98a2ab; }
.crm-gauge { display: flex; align-items: center; gap: 22px; }
.crm-gauge__ring { position: relative; width: 132px; height: 132px; flex: none; }
.crm-gauge__ring svg { width: 132px; height: 132px; }
.crm-gauge__ring b { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; font-size: 24px; font-weight: 900; color: var(--ink); }
.crm-gauge__txt { font-size: 14px; color: var(--ink-soft); line-height: 1.7; }
.crm-gauge__txt b { color: var(--c-cyan-deep); }
.crm-bars { display: flex; flex-direction: column; gap: 12px; }
.crm-radar { display: flex; justify-content: center; }
/* 数据指标卡 */
.crm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 700px) { .crm-stats { grid-template-columns: repeat(2, 1fr); } }
.crm-mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.crm-mod { padding: 12px 12px 11px; border-radius: 12px; border: 1px solid var(--line); background: #f7faf9; display: flex; flex-direction: column; gap: 6px; }
.crm-mod.on { border-color: rgba(52,173,121,.5); background: #eff8f3; }
.crm-mod__t { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.crm-mod__state { align-self: flex-start; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; color: #15724f; background: rgba(52,173,121,.14); }
.crm-mod__state.is-wait { color: #9aa6b2; background: rgba(154,166,178,.14); }
.crm-mod__note { font-size: 11.5px; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 700px) { .crm-mods { grid-template-columns: 1fr; } }
.crm-stat { padding: 14px 12px; border-radius: 13px; background: rgba(12,147,166,.06); border: 1px solid rgba(12,147,166,.14); text-align: center; }
.crm-stat__v { display: block; font-size: 26px; font-weight: 900; line-height: 1.1; }
.crm-stat__k { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-soft); }
/* 薄弱题型 chips */
.crm-weak { display: flex; flex-wrap: wrap; gap: 8px; }
/* 错题清单 */
.crm-wrong { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.crm-wrong li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(225,91,100,.08); border: 1px solid rgba(225,91,100,.16); font-size: 13px; color: #7a3a40; }
.crm-wrong li b { font-size: 13px; font-weight: 900; color: #c2404a; }
.crm-wrong li span { color: #8a6a72; }
/* 学习建议行 */
.crm-cmt__adv { margin-top: 10px !important; padding: 11px 14px; border-radius: 11px; background: rgba(255,200,61,.12); border: 1px solid rgba(229,169,47,.3); color: #8a6a1f; }
.crm-cmt p, .crm-ai__stat, .crm-tip { font-size: 14px; line-height: 1.9; color: #3a4a55; margin: 0; }
.crm-ai__stat b { color: var(--c-cyan-deep); }
.crm-tip { color: #8a95a0; padding: 12px 14px; background: rgba(120,132,144,.08); border-radius: 10px; }
.crm-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #0e8197; background: rgba(12,147,166,.1); padding: 4px 12px; border-radius: 999px; }
/* 无数据 → 灰色模拟 */
.crm-cmt.is-muted, .crm-cmt.is-muted p { color: #98a2ab; }
.crm-cmt.is-muted .crm-cmt__adv { color: #98a2ab; background: rgba(120,132,144,.1); border-color: rgba(120,132,144,.2); }
/* 例题剖析 */
/* 「重做记录」：重做过的题一行一条（题型 · 题号 / 重做几次 / 最后一次结果） */
.crm-redos { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.crm-redo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 12px; background: rgba(12,147,166,.05);
  border: 1px solid rgba(12,147,166,.16); }
.crm-redo__n { font-size: 13.5px; font-weight: 800; color: var(--ink); flex: 1 1 auto; }
.crm-redo__t { font-size: 12px; font-weight: 800; color: #0a7d8c; padding: 3px 10px;
  border-radius: 999px; background: rgba(12,147,166,.12); }
.crm-redo__v { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.crm-redo__v.is-ok { color: #0e8a63; }
.crm-redo__v.is-no { color: #c8434c; }
.crm-exs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (max-width: 700px) { .crm-exs { grid-template-columns: 1fr; } }
.crm-ex { padding: 14px 16px; border-radius: 13px; background: rgba(12,147,166,.05); border: 1px solid rgba(12,147,166,.14); }
.crm-ex.is-good { background: rgba(31,179,122,.07); border-color: rgba(31,179,122,.2); }
.crm-ex.is-bad { background: rgba(225,91,100,.07); border-color: rgba(225,91,100,.2); }
.crm-ex__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.crm-ex__nm { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.crm-ex__flag { margin-left: auto; font-size: 12px; font-weight: 800; color: #0e8197; background: rgba(12,147,166,.12); padding: 3px 10px; border-radius: 999px; }
.crm-ex__flag.is-wait { color: #98a2ab; background: rgba(120,132,144,.12); }
.crm-ex__stem { font-size: 12.5px; line-height: 1.6; color: #3a4a55; }
.crm-ex__verdict { display: inline-block; margin: 8px 0 6px; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.crm-ex__verdict.ok { color: #1fb37a; background: rgba(31,179,122,.12); }
.crm-ex__verdict.bad { color: #e15b64; background: rgba(225,91,100,.12); }
.crm-ex__verdict.wait { color: #98a2ab; background: rgba(120,132,144,.12); }
.crm-ex__ana { font-size: 12px; line-height: 1.6; color: var(--ink-soft); }
/* 报告②：课后习题 50 题对错记录 */
.r2-legend { display: flex; gap: 16px; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 12px; }
.r2-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.r2-legend .lg-ok { background: rgba(31,179,122,.75); }
.r2-legend .lg-bad { background: rgba(225,91,100,.75); }
.r2-legend .lg-none { background: rgba(120,132,144,.35); }
.r2q-day { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px dashed rgba(120,132,144,.18); }
.r2q-day:first-of-type { border-top: 0; padding-top: 0; }
.r2q-wd { flex: 0 0 42px; font-size: 12.5px; font-weight: 800; color: var(--ink-soft); padding-top: 6px; }
.r2q-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.r2q { min-width: 36px; height: 28px; padding: 0 6px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; border: 1px solid transparent; }
.r2q.is-right { color: #0e8a63; background: rgba(31,179,122,.13); border-color: rgba(31,179,122,.24); }
.r2q.is-wrong { color: #c8434c; background: rgba(225,91,100,.13); border-color: rgba(225,91,100,.26); }
.r2q.is-none { color: #98a2ab; background: rgba(120,132,144,.09); border-color: rgba(120,132,144,.16); }
.r2-wrong { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.r2-wrong__t { font-size: 12px; font-weight: 800; color: #c8434c; margin-right: 4px; }
/* 报告② 无数据 → 灰色模拟 */
.crm.is-sim .crm-sec__t, .crm.is-sim .crm-stat__k, .crm.is-sim .crm-tip,
.crm.is-sim .r2-legend, .crm.is-sim .r2-wrong__t,
.crm.is-sim .crm-cmt, .crm.is-sim .crm-cmt p, .crm.is-sim .crm-cmt b { color: #98a2ab; }
.crm.is-sim .crm-stat__v { color: #98a2ab !important; }
.crm.is-sim .r2q { color: #98a2ab !important; background: rgba(120,132,144,.08) !important; border-color: rgba(120,132,144,.16) !important; }
.crm.is-sim .crm__cover { filter: grayscale(.4); }
/* 报告③：AI 使用分析 · 思维逻辑 / 知识掌握 */
.r3-dim { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
@media (max-width: 700px) { .r3-dim { grid-template-columns: 1fr; } }
.r3-dim__c { padding: 14px 16px; border-radius: 13px; background: rgba(5,150,105,.06); border: 1px solid rgba(5,150,105,.14); }
.r3-dim__h { font-size: 13px; font-weight: 800; color: #047857; margin-bottom: 4px; }
.r3-dim__v { font-size: 18px; font-weight: 900; color: var(--ink); }
.r3-dim__d { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.r3-tag { display: inline-block; font-size: 12px; font-weight: 700; color: #047857; background: rgba(5,150,105,.1); border: 1px solid rgba(5,150,105,.18); padding: 4px 10px; border-radius: 999px; margin: 4px 6px 4px 0; }
.r3-tag.is-low { color: #b45309; background: rgba(217,119,6,.1); border-color: rgba(217,119,6,.2); }
.r3-list { list-style: none; padding: 0; margin: 6px 0 0; }
.r3-list li { position: relative; padding: 8px 0 8px 20px; font-size: 13px; line-height: 1.65; color: #3a4a55; }
.r3-list li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: #10b981; }
.r3-list li.weak::before { background: #b45309; }
.r3-list li b { color: var(--ink); }
.r3-qa { margin-top: 10px; }
.r3-qa__item { padding: 9px 12px; border-radius: 10px; background: rgba(120,132,144,.06); margin-bottom: 8px; font-size: 12.5px; line-height: 1.6; color: #3a4a55; }
.r3-qa__q { font-weight: 700; color: #047857; }
.r3-qa__label { font-size: 11px; font-weight: 800; color: var(--ink-soft); margin-bottom: 8px; }
/* 报告③ 无数据 → 灰色模拟 */
.crm.is-sim .r3-dim__c, .crm.is-sim .r3-dim__h, .crm.is-sim .r3-dim__d,
.crm.is-sim .r3-tag, .crm.is-sim .r3-list li,
.crm.is-sim .r3-qa__item, .crm.is-sim .r3-qa__label, .crm.is-sim .r3-qa__q { color: #98a2ab !important; }
.crm.is-sim .r3-dim__v { color: #98a2ab !important; }
.crm.is-sim .r3-list li::before { background: #98a2ab; }
.crm.is-sim .r3-dim__c { background: rgba(120,132,144,.07); border-color: rgba(120,132,144,.16); }
.crm.is-sim .r3-tag { background: rgba(120,132,144,.1); border-color: rgba(120,132,144,.18); }

/* MathJax 3 的公式是一整块不可断行的 SVG：
   只有「整行显示的公式」真超宽时才局部滚动；行内公式不加滚动容器——
   否则字形墨迹略超声明宽度（如 ∧/∨）就会凭空出现横向滚动条，题目得拖着看才完整。 */
.aitd mjx-container, .pr mjx-container, .am mjx-container {
  max-width: 100%; vertical-align: middle;
}
.aitd mjx-container[display="true"], .pr mjx-container[display="true"], .am mjx-container[display="true"] {
  display: block; overflow-x: auto; overflow-y: hidden; padding-block: 3px;
}
.aitd-formula--full .aitd-formula__sym mjx-container { text-align: left; }
.am__head { flex-shrink: 0; }
.am__body { min-height: 0; min-width: 0; }
.am__ans__text, .aitd-extra__items, .pr__opt__t { min-width: 0; }
.am__ans__text { flex: 1; }
.aitd-section__badge { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .am__ans { flex-wrap: wrap; }
  .am__ans__text { flex-basis: 100%; }
  .pr__nav { gap: 8px; }
  .pr__navbtn { padding: 10px 12px; }
}

/* Keep navigation and long lesson titles readable on narrow course pages. */
@media (max-width: 760px) {
  #view-detail:is([data-course="collection2"]) .detail__topbar {
    flex-wrap: wrap; gap: 10px; padding: 14px 16px; flex-shrink: 0;
  }
  #view-detail:is([data-course="collection2"]) .tb-left { flex: 1 0 100%; }
  #view-detail:is([data-course="collection2"]) .tb-right { display: none; }
  #view-detail:is([data-course="collection2"]) .nav-btn { flex-shrink: 0; white-space: nowrap; }
  #view-detail:is([data-course="collection2"]) .detail__title {
    flex: 1 1 100%; min-width: 0; padding: 0; text-align: left; font-size: 16px; overflow-wrap: anywhere;
  }
  #view-detail:is([data-course="collection2"]) .detail__body { padding: 8px 16px 28px; min-height: 0; }
  #view-detail:is([data-course="collection2"]) .aitd-card { padding: 12px; }
  #view-detail:is([data-course="collection2"]) .aitd-section { padding: 12px; }
  #view-detail:is([data-course="collection2"]) .aitd-tbl::before {
    content: "表格可左右滑动查看"; display: block; padding: 8px 10px; font-size: 12px; color: #0C7A8C;
  }
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ===================== 第3讲 · 知识前测 ===================== */
/* detail__body 默认垂直居中：答题时题卡高度一变，整块内容就会上下移动 —— 前测三屏统一改为顶部对齐 */
#view-detail:has(.pt) .detail__body,
#view-detail:has(.pt-answers) .detail__body,
#view-detail:has(.pt-report) .detail__body { justify-content: flex-start; }
.pt { max-width: 880px; width: 100%; margin: 0 auto; padding: 4px 0 24px; }
.pt__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pt__badge { font-size: 12px; font-weight: 800; color: #0C93A6; background: rgba(12,147,166,.12); border-radius: 999px; padding: 5px 12px; }
.pt__topic { font-size: 12px; color: var(--ink-soft); }
.pt__multi { font-size: 11px; font-weight: 800; color: #B57400; background: rgba(255,200,61,.22); border-radius: 999px; padding: 4px 10px; }
.pt__count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.pt__bar { height: 6px; border-radius: 999px; background: rgba(12,147,166,.12); overflow: hidden; margin-bottom: 18px; }
.pt__bar i { display: block; height: 100%; background: linear-gradient(90deg,#0C93A6,#22B8CE); border-radius: 999px; }
/* 题卡固定大小：题干与选项区都给一个稳定的基准高度，翻页时界面不再忽高忽低
   （480px 略高于内容最高的一题 —— 第 11 题多选带提示行 —— 使各题卡片高度完全一致） */
.pt__paper { min-height: 480px; }
.pt__paper .pr__stem { min-height: 76px; }
.pt__qhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pt__qno { font-size: 15px; font-weight: 800; color: var(--c-cyan-deep); }
.pt__tip { margin: 12px 0 0; font-size: 12px; color: #B57400; }
.pt__multilead { color: #0C93A6; background: rgba(12,147,166,.14); }

/* —— 灵宠内测问卷（题卡复用前测 .pt / .pr__*，这里只补输入框与完成页） —— */
.sv__ta {
  display: block; width: 100%; margin-top: 20px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe;
  font: inherit; font-size: 14.5px; line-height: 1.8; color: var(--ink);
  min-height: 150px; resize: vertical; box-sizing: border-box;
}
.sv__ta:focus { outline: none; border-color: #0C93A6; background: #fff; box-shadow: 0 0 0 3px rgba(12,147,166,.14); }
.sv__hint { margin: 12px 0 0; font-size: 12.5px; font-weight: 600; color: #C0392B; }
.sv-done {
  max-width: 600px; margin: 16px auto 0; padding: 36px 28px; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
}
.sv-done__ic {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 30px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg,#43C6A6,#0C93A6); box-shadow: 0 10px 24px rgba(12,147,166,.28);
}
.sv-done h2 { margin: 0 0 10px; font-size: clamp(19px, 2.2vw, 23px); color: var(--ink); }
.sv-done p { margin: 0; font-size: 14px; line-height: 1.9; color: var(--ink-soft); }
.sv-done__meta { margin-top: 8px; font-size: 12px; color: #8A9AA8; }
.sv-done__acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
/* 第11题 · 填空题：一个输入框（右侧带单位）+ 一条「我不会，先跳过该题」。
   单位只是提示，判分那边会把学生多填的单位剥掉，所以写不写都算对。 */
.pt__fill { margin-top: 16px; }
.pt__fill__row { display: flex; align-items: center; gap: 10px; }
.pt__fill__in { flex: 0 1 240px; min-width: 0; height: 46px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe;
  font: inherit; font-size: 16px; color: var(--ink); transition: border-color .2s, box-shadow .2s, background .2s; }
.pt__fill__in:focus { outline: none; border-color: #0C93A6; background: #fff; box-shadow: 0 0 0 3px rgba(12,147,166,.14); }
.pt__fill__in:disabled { background: #f1f4f6; color: var(--ink-soft); }
.pt__fill__unit { flex: none; font-size: 14px; color: var(--ink-soft); }
.pt__fill__skip { margin-top: 14px; }
/* 选择题最后追加的 E「我不会，先跳过该题目」：虚线框，和真选项一眼分得开。
   选中态用红色 —— 它不是答案，选了就是放弃这题（按答错记）。 */
.pr__opt--skip { border-style: dashed; border-color: rgba(12,147,166,.34); background: rgba(12,147,166,.03); }
.pr__opt--skip .pr__opt__k { color: #6b7f88; background: rgba(107,127,136,.12); }
.pr__opt--skip .pr__opt__t { color: var(--ink-soft); font-size: 13.5px; }
.pr__opt--skip.is-pick { border-style: solid; border-color: #e15b64; background: rgba(225,91,100,.09); }
.pr__opt--skip.is-pick .pr__opt__k { color: #c04049; background: rgba(225,91,100,.14); }
.pr__opt--skip.is-pick .pr__opt__t { color: var(--ink); }
/* [hidden] 必须真的不显示：下面这些元素自带 display（flex / inline-block），
   会盖掉浏览器给 [hidden] 的 display:none —— 少了这条，JS 里设的 .hidden 等于没设。
   （实测过：藏起来的上传按钮仍在占位，把本该居中的内容挤偏 25px。） */
[hidden] { display: none !important; }
/* 第12题 · 解答题：手写拍照上传 + AI 批改 */
.pt__essay { margin-top: 18px; }
.pt__essay__lead { margin: 0; font-size: 13px; line-height: 1.9; color: var(--ink-soft); }
/* 舞台：大按钮与「已上传的图片」共用同一块居中区域，两者互斥显示 ——
   这样上传前、上传后的视觉重心都落在中轴线上，不会一个靠左一个靠右。 */
.pt__essay__stage { margin-top: 12px; display: flex; justify-content: center; }
.pt__essay .pr__upload { margin-top: 0; width: 100%; max-width: 380px; }
.pt__essay .pr__upload--compact { width: auto; max-width: none; }
/* 已上传：图片居中，右上角一个删除叉 */
.pt__shot { position: relative; display: inline-block; }
.pt__shot__img { display: block; max-width: 100%; max-height: 340px; border-radius: 12px;
  border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.pt__shot__x { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; border: 2px solid #fff; cursor: pointer;
  background: rgba(24,38,52,.78); color: #fff; box-shadow: 0 4px 12px rgba(20,40,70,.28); transition: .2s; }
.pt__shot__x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.pt__shot__x:hover { background: #e15b64; transform: scale(1.08); }
/* 换图 / 删图收成图下一行的小操作，不再占着一个大按钮的位置 */
.pt__essay__acts { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pt__act { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line);
  border-radius: 999px; background: #fff; color: var(--ink-soft);
  font: 700 12.5px/1 inherit; font-family: inherit; cursor: pointer; transition: .2s; }
.pt__act svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pt__act:hover { border-color: rgba(12,147,166,.45); color: #0a7d8c; }
.pt__act--del:hover { border-color: rgba(225,91,100,.45); color: #c04049; }
.pt__ai { margin-top: 12px; display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(12,147,166,.06); border: 1px solid rgba(12,147,166,.18); }
.pt__ai__tag { flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: #0C93A6; }
.pt__ai > div { font-size: 13px; line-height: 1.9; color: var(--ink); }
.pt__ai__err { margin: 12px 0 0; font-size: 12.5px; line-height: 1.8; color: #c04049; }
.pt__essay__skip { margin-top: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px dashed var(--line); }
.pt__essay__skip > span { font-size: 11.5px; line-height: 1.7; color: var(--ink-soft); flex: 1 1 200px; }
.pt__essay__skipnote { margin: 10px 0 0; font-size: 12.5px; color: #B57400; }
.pt__essay__done { margin: 10px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--ink-soft); }
.pt__essay__manual { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
.pt__skip { flex: 0 0 auto; padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink-soft); font: 700 12.5px/1 inherit; font-family: inherit; cursor: pointer; transition: .2s; }
.pt__skip:hover { border-color: rgba(12,147,166,.45); color: #0a7d8c; }
/* 前测报告 / 答案解析里的「第12题 · 手写作答」：手写原图 + AI 批语 */
.pt-esr__hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pt-esr__no { font-size: 14px; font-weight: 800; color: var(--c-cyan-deep); }
.pt-esr__stem { font-size: 15px; line-height: 1.9; color: var(--ink); font-weight: 600; }
.pt-esr__shot { margin-top: 12px; }
.pt-esr__shot img { max-width: 100%; max-height: 460px; display: block; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.pt-a__skip { margin-top: 10px; font-size: 12.5px; color: #B57400; }
/* 前测报告 */
.pt-report__acts { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 26px 0 6px; }
.pt-report__again { background: none; border: none; color: var(--ink-soft); font-size: 12px; text-decoration: underline; cursor: pointer; font-family: inherit; }
.pt-layer { font-style: normal; font-size: 11px; color: var(--ink-soft); margin-left: 8px; font-weight: 500; }
/* 前测答案页 */
.pt-answers { max-width: 920px; margin: 0 auto; padding: 4px 0 24px; }
.pt-answers__head { text-align: center; margin-bottom: 22px; }
.pt-answers__head h1 { font-size: clamp(22px,2.4vw,28px); font-weight: 900; color: var(--ink); margin: 0 0 8px; }
.pt-answers__head p { font-size: 13px; color: var(--ink-soft); line-height: 1.7; }
.pt-a { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: 20px 22px; margin-bottom: 16px; }
.pt-a__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pt-a__no { font-weight: 800; color: var(--ink); font-size: 14px; }
.pt-a__topic { font-size: 12px; color: var(--ink-soft); }
.pt-a__badge { margin-left: auto; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 4px 10px; background: rgba(12,147,166,.1); color: var(--ink-soft); }
.pt-a__badge.is-ok { background: rgba(31,179,122,.14); color: #0e8a63; }
.pt-a__badge.is-no { background: rgba(225,91,100,.14); color: #c04049; }
.pt-a__stem { font-size: 15px; line-height: 1.9; color: var(--ink); font-weight: 600; }
.pt-a .pr__opts { margin-top: 14px; gap: 9px; }
.pr__opt.is-static { cursor: default; }
.pr__opt.is-static:hover { transform: none; border-color: var(--line); }
.pr__opt.is-right { border-color: #1fb37a; background: rgba(31,179,122,.1); }
.pr__opt.is-wrong { border-color: #e15b64; background: rgba(225,91,100,.09); }
.pt-a__mark { margin-left: auto; font-size: 11px; font-weight: 800; color: #0e8a63; white-space: nowrap; }
.pt-a__mark.is-no { color: #c04049; }
.pt-a__ana { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(12,147,166,.05); font-size: 14px; line-height: 1.85; color: var(--ink); }
.pt-a__ana b { display: block; margin-bottom: 6px; color: var(--c-cyan-deep); font-size: 12px; }
.pt-a__ans { margin-top: 10px; font-size: 12px; color: var(--ink-soft); }
.pt-answers__acts { display: flex; justify-content: center; margin: 22px 0 8px; }
/* 第3讲：知识前测 × 精讲精练 联动 —— 题型卡上一眼可辨的前测标记：
   整卡加粗实色描边（绿＝已掌握 / 黄＝需重点练）＋ 顶部加粗色带 ＋ 极淡底色，远看就能分清。 */
.apt-card.is-pt-green,
.apt-card.is-pt-green:hover {
  border-width: 3px; border-color: #1fb37a;
  background: linear-gradient(180deg, #ffffff, #edfaf3);
  box-shadow: 0 0 0 4px rgba(31,179,122,.16), 0 12px 30px rgba(31,179,122,.20), 0 1px 0 rgba(255,255,255,.65) inset;
}
.apt-card.is-pt-green .apt-card__accent { height: 9px; background: linear-gradient(90deg,#0f9d63,#1fb37a,#6ee7b7); }
.apt-card.is-pt-yellow,
.apt-card.is-pt-yellow:hover {
  border-width: 3px; border-color: #e0a21a;
  background: linear-gradient(180deg, #ffffff, #fff8e7);
  box-shadow: 0 0 0 4px rgba(224,162,26,.18), 0 12px 30px rgba(224,162,26,.22), 0 1px 0 rgba(255,255,255,.65) inset;
}
.apt-card.is-pt-yellow .apt-card__accent { height: 9px; background: linear-gradient(90deg,#d18f0a,#e0a21a,#facc15); }

/* ===== 第3讲 精讲精练：三个层级的「阶梯递进」面板（专属版式，与题型卡区分开） ===== */
.c3st { max-width: 1140px; width: 100%; margin: 0 auto; padding: 10px 0 34px; }
.c3st-head { text-align: center; margin: 0 0 38px; }
.c3st-head__eyebrow { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--c-cyan-deep); }
.c3st-head__title { font-size: clamp(26px, 2.8vw, 36px); font-weight: 900; color: var(--ink); margin: 10px 0; letter-spacing: -.4px; }
.c3st-head__lead { font-size: 14px; color: var(--ink-soft); line-height: 1.85; max-width: 760px; margin: 0 auto; }
.c3st-row { display: flex; align-items: flex-end; justify-content: center; gap: 12px; }   /* 底部对齐：下边成一条线 */
.c3st-arrow { align-self: center; flex: none; font-size: 24px; font-weight: 900; color: rgba(12,147,166,.4); }
.c3st-card {
  position: relative; overflow: hidden; text-align: left; min-width: 0;
  flex: 1 1 0; display: flex; flex-direction: column;
  /* 高度逐级递增 → 上边一级比一级高、下边齐平，形成"台阶"而不是"歪排"。
     基准压到 330px：卡里只剩「主题 + 三条亮点 + 一行本层涉及」，
     不再留老版题目入口那几行（题量 / 题型罗列 / 前测建议 / 进入学习）的高度 */
  min-height: calc(330px + var(--i) * 42px);
  padding: 30px 26px 24px; border-radius: 28px;
  border: 1.5px solid rgba(255,255,255,.9);
  background: linear-gradient(180deg, #ffffff, #f5fbfd);
  box-shadow: 0 18px 44px rgba(20,40,70,.13);
  animation: c3stIn .55s var(--ease) forwards; animation-delay: var(--d, 0s);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.c3st-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.c3st-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150px; background: linear-gradient(180deg, var(--soft), transparent); pointer-events: none; }
@keyframes c3stIn { from { transform: translateY(20px); } to { transform: none; } }
.c3st-no { position: absolute; top: 16px; right: 18px; font-size: 82px; font-weight: 900; line-height: 1; color: var(--c1); opacity: .10; pointer-events: none; user-select: none; }
.c3st-top { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.c3st-stage { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 8px 18px -10px var(--c1); }
.c3st-tag { font-size: 12px; font-weight: 800; color: var(--c1); background: var(--soft); border-radius: 999px; padding: 6px 12px; }
.c3st-title { position: relative; font-size: clamp(21px, 2vw, 25px); font-weight: 900; color: var(--ink); margin: 0 0 14px; letter-spacing: -.2px; }
.c3st-steps { position: relative; display: flex; gap: 6px; margin: 0 0 16px; }
.c3st-steps i { height: 5px; flex: 1; border-radius: 999px; background: rgba(20,40,70,.10); }
.c3st-steps i.on { background: linear-gradient(90deg, var(--c1), var(--c2)); }
/* 过场卡的三段内容：一句主题 / 三条亮点 / 一行"本层涉及"。
   主题用本层主色（它是这张卡的"题眼"）；亮点是正文；最后一行压到卡底、字号收小 ——
   它是补充信息，不抢主体。卡里不再有按钮（这一段是动画，点不动）。 */
.c3st-lead { position: relative; font-size: clamp(15px, 1.35vw, 18px); font-weight: 800; line-height: 1.6;
  color: var(--c1); margin: 0 0 16px; letter-spacing: -.2px; }
.c3st-points { position: relative; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.c3st-points li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.7; color: var(--ink); }
.c3st-points li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c1), var(--c2)); }
.c3st-scope { position: relative; margin: auto 0 0; padding-top: 14px; font-size: 11.5px; line-height: 1.6;
  letter-spacing: .2px; color: var(--ink-soft); border-top: 1px dashed rgba(20,40,70,.14); }
/* ===== 精讲精练入场动画 =====
   这一页只是一段过场：顶栏（上一步 / 主页 / 标题 / 课程成就 / 用户）整条收起，
   屏幕上只有三张层级卡，撑满可用高度并整体居中。
   01 → 02 → 03 依次浮现：每张 0.58s 浮现完、彼此错开 0.5s（所以第三张在 1.58s 才到位），
   然后**停足一拍**让学生看清，之后三张一起收进知识星图的三颗主星
   （收拢那一段见下面「过场 → 星图」）。
   ★ 停留时长是 app.js 的 C3_HOLD，必须明显大于 1.58s —— 改这边的浮现时长/错峰，
     就要同步改 C3_HOLD，否则又会回到"第三张刚浮完就飞走、学生只看到一眼"。
   这三张卡是过场，不再需要点击。
   注：.c3st-row 的子元素是「卡片, 箭头, 卡片, 箭头, 卡片」，所以用 nth-of-type 按各自类型定位。 */
#view-detail.is-c3-intro .detail__topbar { display: none; }
/* 过场期间，页面浮件（课程成就 / 用户 / 全屏 / logo / AI 球）也一起收起来 ——
   这一段是"看三个阶段"的时刻，右上角挂一排 UI 会分神。它们不在顶栏里，所以单独管；
   星图接手（c3IntroTopbar(false)）时一起回来。 */
body.c3-intro-open .fs-toggle, body.c3-intro-open #home-logo, body.c3-intro-open .userchip,
body.c3-intro-open .ach-dock, body.c3-intro-open .ai-orb { opacity: 0; pointer-events: none; }
.c3st--intro { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 0; }
.c3st--intro .c3st-row { width: 100%; }
.c3st--intro .c3st-card { opacity: 0; animation: c3stIn .58s var(--ease) forwards; }
.c3st--intro .c3st-card:nth-of-type(1) { animation-delay: 0s; }
.c3st--intro .c3st-card:nth-of-type(2) { animation-delay: .5s; }
.c3st--intro .c3st-card:nth-of-type(3) { animation-delay: 1s; }
.c3st--intro .c3st-arrow { opacity: 0; animation: c3stArrowIn .46s var(--ease) forwards; }
.c3st--intro .c3st-arrow:nth-of-type(1) { animation-delay: .46s; }
.c3st--intro .c3st-arrow:nth-of-type(2) { animation-delay: .96s; }
@keyframes c3stIn { from { opacity: 0; transform: translateY(22px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes c3stArrowIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.c3st--intro.is-leaving { pointer-events: none; animation: c3stOut .44s var(--ease) forwards; }
@keyframes c3stOut { to { opacity: 0; transform: translateY(-16px) scale(.98); } }

/* ===== 过场 → 星图：三张模块卡**住进星图**，它们本身就是那三颗主星 =====
   卡片不销毁、不重建，而是搬进 .c3g-nodes 并挂上 .c3g-hubcard —— 关键在于它的定位规则
   与主星节点逐字相同：
       .c3g-node    { left: 0; top: 0; transform: translate(var(--x), var(--y)); }
       .c3g-hubcard { left: 0; top: 0; transform: translate(var(--x), var(--y)) translate(-50%,-50%); }
   两边的 --x/--y 来自同一份 model —— 所以"卡片在哪"与"那颗主星在哪"只有一个来源：
   不再按屏幕坐标各算一遍，画布随顶栏/窗口怎么变，卡片都跟星一起走。

   卡片体积远大于一颗星，靠缩放收成星那么大；transform-origin 就在中心，
   缩放不移动中心 —— 收到多小，中心都锁在锚点上（也就是那颗星的位置）。

   ① .is-flying  从原地出发（--fx/--fy 是"从锚点折回原地"的那段补偿），同时缩到星那么大；
                 关键帧的 100% 把补偿归零 —— 落点不是算出来的，是"归零"这个自然状态，
                 所以不存在对不齐这回事。
   ② .is-parked  停稳。transform 与 ① 的 100% 逐项相同，从"飞"切到"停"不会跳；
                 同时**慢慢淡到接近消失**（--dim 由 JS 给，正好赶在那颗主星出生的时刻）。
                 边框与投影一并撤掉（它们缩到 38px 就是一个白圆片 + 一圈阴影）。
   注意：三张卡全程留在画布上（只是淡到不可见）。摘掉一张的话，剩下的会在 flex 流里
        重新居中，另外两点就跟着移位了 —— 这条必须守住。

   曲线用 (.4,.05,.25,1)：与出生动画同一条，先蓄、中段走完、末段软着陆，两段接起来才像一段。 */
.c3g-hubcard {
  position: absolute; left: 0; top: 0; z-index: 4;
  flex: none; min-width: 0; min-height: 0;
  pointer-events: none;                 /* 转场期间不吃鼠标，画布才收得到悬停 */
  transform-origin: 50% 50%;
  animation: none;                      /* 卡片自己那条 c3stIn 入场动画不许跟着重演 */
  transform: translate(var(--x), var(--y)) translate(-50%, -50%); }
.c3g-hubcard.is-flying {
  animation: c3stFly var(--fly,900ms) cubic-bezier(.4,.05,.25,1) both; }
@keyframes c3stFly {
  0%   { transform: translate(var(--x),var(--y)) translate(-50%,-50%) translate(var(--fx,0),var(--fy,0)) scale(1,1); opacity: 1; border-radius: 28px; }
  /* 中途：位移已走过七成、再往上抬一点、比终态大一圈 —— 先胀一下再收下去，比一路直线缩到点有精神。
     scaleY 同步压到 --sy（宽高比），落位时盒子正好变方 → 配 border-radius:50% 就是个圆。 */
  62%  { transform: translate(var(--x),var(--y)) translate(-50%,-50%) translate(calc(var(--fx,0) * .3),calc(var(--fy,0) * .3 - 30px)) scale(var(--mk,1)) scaleY(var(--sy,1)); opacity: 1; }
  100% { transform: translate(var(--x),var(--y)) translate(-50%,-50%) scale(var(--ek,.1)) scaleY(var(--sy,1)); opacity: 1; border-radius: 50%; }
}
/* 停在星位上：transform 与上面 100% 逐项相同 —— 位置、大小、圆角都一样，所以这一下看不出切换 */
.c3g-hubcard.is-parked {
  transform: translate(var(--x),var(--y)) translate(-50%,-50%) scale(var(--ek,.1)) scaleY(var(--sy,1));
  border-radius: 50%; border-color: transparent; box-shadow: none;
  animation: c3stDim var(--dim,0ms) cubic-bezier(.45,.05,.6,1) both; }
/* 慢慢淡到接近消失：前段降得明显、越往后越像"正在化掉"，最后一刻才归零。
   （时长由 JS 给 --dim，正好等于"到这颗主星出生"的时长） */
@keyframes c3stDim {
  0%   { opacity: 1; }
  30%  { opacity: .58; }
  68%  { opacity: .24; }
  100% { opacity: 0; }
}
/* 卡片自己的装饰（顶栏彩条 / 头部渐层）在"变成一个点"这件事上没有意义，停住时让位给那团光 */
.c3g-hubcard.is-parked::before, .c3g-hubcard.is-parked::after { opacity: 0; }
.c3st-spark { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0%, var(--c2) 38%, rgba(255,255,255,0) 92%); }
.c3g-hubcard.is-flying .c3st-spark { animation: c3stSpark var(--fly,900ms) ease both; }
@keyframes c3stSpark { 0%, 34% { opacity: 0 } 74% { opacity: .96 } 100% { opacity: 1 } }
/* 停在星位上那团柔光（不透明度得补上：挂着 is-flying 时是动画在给），随后跟着卡片一起化掉 */
.c3g-hubcard.is-parked .c3st-spark { opacity: 1; }

/* 星图被"扣住"等卡飞过来的那一段：画布先淡进来当背景，但不受鼠标 */
.c3g.is-waking { animation: c3gWake .8s ease both; }
@keyframes c3gWake { from { opacity: 0 } to { opacity: 1 } }
.c3g-stage.is-held { pointer-events: none; }
/* 第一张卡落地、星图接过主导权时，顶栏淡回来（它是 display:none 切换的，不给一下会"啪"地出现） */
#view-detail.is-c3-arrive .detail__topbar { animation: c3TopbarIn .55s ease both; }
@keyframes c3TopbarIn { from { opacity: 0; transform: translateY(-10px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  .c3st--intro .c3st-card, .c3st--intro .c3st-arrow { animation-duration: .01s; animation-delay: 0s; }
}
@media(max-width:820px){
  .c3st-row { flex-direction: column; gap: 14px; align-items: stretch; }
  .c3st-arrow { transform: rotate(90deg); }
  /* 竖排时不做出台阶。flex:0 0 auto 是必须的：卡片基础样式是 flex:1 1 0（横排时三等分宽度），
     竖排下这个 basis:0 会变成"高度按 0 算"，三张卡被压成一条、内容全被 overflow:hidden 裁掉。 */
  .c3st-card { animation: none; min-height: 0; flex: 0 0 auto; }
}
@media(prefers-reduced-motion:reduce){ .c3st-card { animation: none; }
  /* 淡出也省掉：位置照旧钉在星位上，直接让位给主星（否则会常驻一个白圆点） */
  .c3g-hubcard.is-parked { animation: none; opacity: 0; } }

/* ===== 第3讲「个性化学习区间」（知识星图 + 右侧状态栏） ===== */
/* —— 前测入口页（门控）：没测过就引导去测，测过就给「查看知识星图」 —— */
.c3g-gate { min-height: 62vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.c3g-gate__card { position: relative; width: min(560px, 100%); overflow: hidden; padding: 34px 36px 30px;
  border-radius: 26px; background: linear-gradient(180deg,#ffffff,#f4fafd);
  border: 1px solid rgba(12,147,166,.2); box-shadow: 0 24px 60px rgba(20,40,70,.14); }
.c3g-gate__glow { position: absolute; right: -90px; top: -110px; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,184,206,.22), transparent 68%); pointer-events: none; }
.c3g-gate__eb { position: relative; display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1.4px;
  color: #fff; padding: 4px 11px; border-radius: 999px; background: linear-gradient(135deg,#0C93A6,#22B8CE); }
.c3g-gate__t { position: relative; margin: 14px 0 10px; font-size: 25px; font-weight: 900; color: var(--ink); letter-spacing: -.4px; }
.c3g-gate__d { position: relative; margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--ink-soft); }
.c3g-gate__d b { color: var(--c-cyan-deep); font-weight: 900; }
.c3g-gate__pts { position: relative; margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.c3g-gate__pts li { position: relative; padding-left: 22px; font-size: 13px; color: var(--ink-soft); }
.c3g-gate__pts li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg,#22B8CE,#0C93A6); box-shadow: 0 0 6px rgba(12,147,166,.6); }
.c3g-gate__rows { position: relative; margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.c3g-gate__row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px;
  background: rgba(12,147,166,.05); border: 1px solid rgba(12,147,166,.14); }
.c3g-gate__row b { font-size: 13.5px; color: var(--ink); }
.c3g-gate__no { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%;
  font-size: 11px; font-weight: 900; color: #fff; }
.c3g-gate__val { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.c3g-gate__acts { position: relative; margin-top: 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.c3g-gate__go { padding: 14px 28px; border-radius: 14px; border: none; cursor: pointer; font: inherit;
  font-size: 14.5px; font-weight: 900; color: #fff; background: linear-gradient(135deg,#0C93A6,#22B8CE);
  box-shadow: 0 12px 28px -12px #0C93A6; transition: transform .18s var(--ease), box-shadow .18s ease; }
.c3g-gate__go:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px #0C93A6; }
.c3g-gate__ghost { padding: 13px 20px; border-radius: 14px; cursor: pointer; font: inherit; font-size: 13.5px;
  font-weight: 800; color: var(--c-cyan-deep); background: #fff; border: 1px solid rgba(12,147,166,.3);
  transition: background .18s ease; }
.c3g-gate__ghost:hover { background: rgba(12,147,166,.08); }

/* —— 整页骨架：左边图谱，右边状态栏 —— */
.c3g { max-width: 1320px; width: 100%; margin: 0 auto; padding: 4px 0 30px; display: flex; gap: 16px; align-items: flex-start; }
.c3g-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* 「知识星图」整页版（学生端主入口）：星图铺满可视区，不再用组件自带的 620px 固定高度。
   主区给一个最小高度（视口减去顶栏/抬头那一圈），下面的 stage 跟着弹性长满。
   下限仍是 620px：星图的节点是按画布尺寸归一化摆的，画布被压矮会把上方节点
   推进「本讲亮点」浮层那一条带里（实测 518 高时压到 4 颗星），所以不给它更矮。 */
.c3g--full { max-width: 1440px; }
.c3g--full .c3g-main { min-height: calc(100vh - 200px); }
.c3g--full .c3g-stagewrap { display: flex; flex: 1 1 auto; min-height: 0; }
.c3g--full .c3g-stage { flex: 1 1 auto; height: auto; min-height: 620px; }

/* 图谱抬头：标题 + 图例 + 进度，全在同一行（图例不占额外纵向空间） */
.c3g-hd { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.c3g-hd__t { font-size: 21px; font-weight: 900; color: var(--ink); margin: 0; letter-spacing: -.3px; flex: none; }
/* 「星图 / 列表」显示方式切换：两段式胶囊，选中态白底 */
.c3g-vm { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 999px; background: rgba(12,147,166,0.09); border: 1px solid rgba(12,147,166,0.18); }
.c3g-vm__b { border: none; background: transparent; border-radius: 999px; padding: 5px 14px;
  font: inherit; font-size: 13px; font-weight: 800; color: #0a6b7c; cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.c3g-vm__b:hover:not(.is-on) { background: rgba(255,255,255,0.55); }
.c3g-vm__b.is-on { background: #fff; color: #0C93A6; box-shadow: 0 2px 8px rgba(12,147,166,0.18); }
/* ===== 抬头「全部进度」 =====
   红→绿渐变条 + 白点标自己的位置；「领先下一名」「距前一名」都放在条下、慢/快之间。 */
.c3h { flex: 1 1 300px; min-width: 220px; max-width: 560px; position: relative; padding: 2px 2px 0; }
.c3h__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 4px;
  font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; }
.c3h__t { font-size: 12.5px; font-weight: 900; color: #0a6b7c; letter-spacing: 0.02em; white-space: nowrap; }
.c3h__rank { color: #5b6b73; white-space: nowrap; }
.c3h__rank b { font-size: 15px; font-weight: 900; color: #0C93A6; font-variant-numeric: tabular-nums; }
.c3h__cls { color: #93a3aa; white-space: nowrap; }
.c3h__cls b { color: #0C93A6; font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; }
.c3h__hint { color: #93a3aa; font-size: 11.5px; }
.c3h__ahead { color: #0a6b7c; font-size: 11.5px; font-weight: 700; white-space: nowrap; text-align: center; }
.c3h__ahead b { color: #0C93A6; font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; }
.c3h__track { position: relative; height: 8px; border-radius: 999px; margin-top: 14px;
  background: linear-gradient(90deg, #E96B57 0%, #F0A45C 45%, #E9D06A 58%, #4BC08D 100%);
  box-shadow: inset 0 1px 2px rgba(20,40,70,0.08); }
.c3h__track.is-empty { background: rgba(12,147,166,0.10); box-shadow: none; }
.c3h__me { position: absolute; top: 50%; width: 14px; height: 14px; margin-left: -7px;
  transform: translateY(-50%); border-radius: 50%; background: #fff; border: 2.5px solid #0C93A6;
  box-shadow: 0 2px 6px rgba(20,40,70,0.22); }
.c3h__ends { display: flex; align-items: center; justify-content: space-between; margin-top: 3px;
  font-size: 10px; color: #a2b0b6; }
/* 慢/快之间：居中显示「距前一名」一行 */
.c3h__gaps { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.35; }
/* ===== 右下角星星图例（与「开启动画」同一行，贴在画布底边） =====
   底边在节点让位线（PAD_B=62）以下，不压星；窄屏只留掌握图例。 */
.c3g-lg { position: absolute; right: 132px; bottom: 14px; z-index: 6; display: flex; align-items: center;
  gap: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.94);
  border: 1px solid rgba(12,147,166,0.16); box-shadow: 0 8px 22px rgba(20,80,100,0.10);
  backdrop-filter: blur(8px); }
.c3g-lg__path { display: flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.c3g-lg__path b { color: var(--c-cyan-deep); font-weight: 900; }
.c3g-lg__path i { font-style: normal; color: rgba(12,147,166,0.5); }
.c3g-lg__keys { display: flex; align-items: center; gap: 14px; padding-left: 14px;
  border-left: 1px solid rgba(12,147,166,0.18); }
@media (max-width: 900px) {
  .c3g-lg__path { display: none; }
  .c3g-lg { gap: 0; }
  .c3g-lg__keys { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .c3g-lg { display: none; }
}
.c3g-prog { display: flex; align-items: center; gap: 12px; flex: none; margin-left: auto; }
.c3g-prog__ring { width: 46px; height: 46px; flex: none; transform: rotate(-90deg); }
.c3g-prog__bg { fill: none; stroke: rgba(12,147,166,.16); stroke-width: 4; }
.c3g-prog__arc { fill: none; stroke: #0C93A6; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .9s var(--ease); }
.c3g-prog__tx { display: flex; align-items: baseline; gap: 2px; font-size: 13px; color: var(--ink-soft); }
.c3g-prog__tx b { font-size: 19px; font-weight: 900; color: var(--c-cyan-deep); }
.c3g-prog__tx i { font-size: 11px; font-style: normal; margin-left: 6px; }
.c3g-prog__retest { padding: 9px 15px; border-radius: 12px; border: 1px solid rgba(12,147,166,.35); background: #fff;
  color: var(--c-cyan-deep); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: background .2s, transform .2s; }
.c3g-prog__retest:hover { background: rgba(12,147,166,.1); transform: translateY(-2px); }

/* —— 画布：星河底 —— */
.c3g-stage { position: relative; height: 620px; min-height: 620px; border-radius: 24px; overflow: hidden;
  border: 1px solid rgba(12,147,166,.16);
  background:
    radial-gradient(120% 90% at 18% 10%, rgba(55,199,221,.22), transparent 60%),
    radial-gradient(110% 90% at 86% 16%, rgba(138,155,255,.22), transparent 62%),
    radial-gradient(130% 100% at 52% 100%, rgba(245,198,76,.16), transparent 62%),
    linear-gradient(180deg,#fbfeff,#eef6fc 58%,#e9f2fb);
  box-shadow: 0 18px 44px rgba(20,40,70,.12); }
.c3g-dust { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(12,147,166,.30) 1px, transparent 1px), radial-gradient(rgba(74,95,224,.20) 1px, transparent 1px);
  background-size: 52px 52px, 86px 86px; background-position: 0 0, 26px 34px; }
.c3g-spark { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; pointer-events: none;
  transform: scale(var(--ss,.8)); box-shadow: 0 0 6px 1px rgba(34,184,206,.85), 0 0 12px 4px rgba(34,184,206,.30);
  animation: c3gSpark var(--sp,3.4s) ease-in-out infinite; animation-delay: var(--sd,0s); }
@keyframes c3gSpark { 0%,100% { opacity: .12 } 50% { opacity: .95 } }

/* —— 连线 —— */
.c3g-edges { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; overflow: visible; transition: none; }
.c3g-edge { stroke: rgba(140,165,188,.42); stroke-width: 1.1; fill: none;
  transition: stroke-dashoffset .82s cubic-bezier(.4,0,.2,1), stroke .26s ease, stroke-width .26s ease, opacity .26s ease;
  transition-delay: var(--d,0ms), 0ms, 0ms, 0ms; }

/* 入场时连线要"长出来"，而且必须和出生动画一样用关键帧 ——
   不能用上面那条 transition：过渡得有"先画一帧起始态"才跑，而入场是同步起手的
   （rAF 被冻住时整段都跑不起来），线会直接以"已经画完"的样子杵在那儿，
   看起来就是"连线一直都在"，跟星星的出生完全脱节。
   方向：stroke-dashoffset 从 --len 收到 0，线是从 x1,y1（父星）那头往子星那头长过去的。
   T_GROW（JS 的 520ms）与这里的 .52s 必须一致 —— 改一个必须改另一个。 */
.c3g-stage.is-enter .c3g-edge {
  /* 过渡的优先级高于动画，入场期间先把过渡关掉，否则动画抢不过它 */
  transition: none;
  animation: c3gEdgeGrow .52s cubic-bezier(.4,0,.2,1) both;
  animation-delay: var(--d,0ms); }
@keyframes c3gEdgeGrow {
  /* 起手先淡一点：线是"亮着长出来"的，不是一开始就实打实压在画面上 */
  from { stroke-dashoffset: var(--len,0); opacity: .12; }
  34%  { opacity: 1; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}
.c3g-edge.is-l0, .c3g-edge.is-l1, .c3g-edge.is-l2 { stroke: rgba(196,132,12,.34); }
.c3g-edge.is-lit { stroke-width: 2; }
.c3g-edge.is-lit.is-l0, .c3g-edge.is-lit.is-l1, .c3g-edge.is-lit.is-l2 {
  stroke: rgba(206,136,8,.92); filter: drop-shadow(0 0 4px rgba(224,162,26,.5)); }
.c3g-edge.is-in { stroke-dashoffset: 0; }
/* 主星之间的「路」：实线主体 + 一条流动虚线 + 箭头，表示 ① → ② → ③ 的先后 */
.c3g-edge[data-e]:not(.is-flow) { stroke-width: 1.6; }
.c3g-edge.is-flow { stroke-width: 2.4; stroke-linecap: round; opacity: 0;
  stroke-dasharray: 8 14; animation: c3gFlow 1.15s linear infinite;
  transition: opacity .6s ease 1s, stroke .3s ease; }
.c3g-edge.is-flow.is-in { opacity: .95; }
.c3g-edge.is-flow.is-lit { stroke-width: 3; filter: drop-shadow(0 0 5px rgba(224,162,26,.6)); }
@keyframes c3gFlow { from { stroke-dashoffset: 22 } to { stroke-dashoffset: 0 } }
/* 入场时方向箭头跟着那条「路」走：路长到头，箭头才淡进来并开始流动 ——
   --d 就是这条路长完的时刻（JS 里 d + T_GROW）。 */
.c3g-stage.is-enter .c3g-edge.is-flow {
  animation: c3gFlow 1.15s linear infinite, c3gEdgeFlowIn .62s ease both;
  animation-delay: var(--d,0ms), var(--d,0ms); }
@keyframes c3gEdgeFlowIn { from { opacity: 0 } to { opacity: .95 } }
/* 悬停聚焦：不相关的一律压暗 */
.c3g-edges.is-focusing .c3g-edge { opacity: .1; }
.c3g-edges.is-focusing .c3g-edge.is-hot { opacity: 1; }
.c3g-edges.is-focusing .c3g-edge.is-flow { opacity: .1; }
.c3g-edges.is-focusing .c3g-edge.is-flow.is-hot { opacity: .95; }

/* —— 节点 —— */
.c3g-nodes { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.c3g-node { position: absolute; left: 0; top: 0; padding: 0; border: none; background: none;
  font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  /* —— 点击感应区 ——
     星体本身是五角星（.c3g-node__dot 上带 clip-path），真正能点中的只有星形那一小块，
     题型星才 20px，鼠标/手指经常戳空。所以按钮**不再做 0×0 的定位锚点，它自己就是热区**：
     直径 = 星体直径 × 1.7 → 题型星 20→34px、主星 38→64px（约等于主星那圈虚线环）；
     再用负 margin 把它的中心对回布局算出的那个点，所以星星的位置一点没动。
     ⚠️ 不能用"给 0×0 的按钮挂一个透明 ::before"来做：实测（elementFromPoint 逐点探过）
        浏览器不命中元素外框之外的伪元素，热区等于没加。只有当按钮自己的盒子够大、
        命中点落在盒子里，盒子里的子元素才参与命中测试。
     ⚠️ 不会误触：星与星的中心距由力导向布局的「近距硬推」兜底（物理半径 38+38 = 76px），
        56 组布局用例（含每层 12 类的压力用例）里最近的一对热区之间仍剩 22px 以上。
     圆角 50% 让热区是圆而不是方块，四个角不会伸出去碰到邻星。 */
  width: calc(var(--r) * 3.4); height: calc(var(--r) * 3.4);
  margin: calc(var(--r) * -1.7) 0 0 calc(var(--r) * -1.7);
  border-radius: 50%;
  transform: translate(var(--x), var(--y));
  transition: transform .3s var(--ease), opacity .26s ease; }
/* —— 入场：三颗主星依次点亮，各自的星芒再从它身上"衍生"出来 ——
   ① 起始态（还没出生）：在出生点上缩成一点、透明。它和 c3gBorn 的 0% 逐项相等，
      所以从"没出生"接到"动画第 0 帧"不会有任何跳变。
   ② 出生动画只负责"出生"这一下，100% 就是常态（位置 --x/--y、scale 1、不透明）——
      动画放完把 .is-enter 摘掉时，回到的正是同一帧画面，所以收尾也不会跳。
   ③ 时刻表（谁在什么时候出生）在 JS 的 paint 里算，这里只吃 --bd；
      will-change 只在入场期间挂，摘 .is-enter 时一起收回，不留常驻合成层。 */
.c3g-node.is-pre { opacity: 0; transform: translate(var(--bx), var(--by)) scale(.12); }
/* 时长 .9s 与 JS 的 T_BORN 必须一致。
   缓动 (.4,.05,.25,1)：先蓄一下 → 中段走完大半 → 末段软着陆。
   原来那条 (.2,.86,.3,1) 是"时速最快就在起跑线"的陡 ease-out，实测本星刚过 25% 的时间，
   已经走完 76% 的路程、91% 的尺寸 —— 位移全挤在前五分之一，看起来就是"啪一下弹出来"。
   所以光加时长没用，曲线必须一起放平，速度峰值挪到中段，顺滑感才出得来。 */
.c3g-stage.is-enter .c3g-node {
  animation: c3gBorn .9s cubic-bezier(.4,.05,.25,1) both;
  animation-delay: var(--bd,0ms);
  will-change: transform, opacity; }
@keyframes c3gBorn {
  0%   { opacity: 0; transform: translate(var(--bx), var(--by)) scale(.12); }
  22%  { opacity: 1; }
  /* 落定前一点过冲：星星"弹"一下才停住，比一路匀速到位有生气 */
  68%  { transform: translate(var(--x), var(--y)) scale(1.16); }
  100% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); }
}
/* 出生那一下的白光：跟着这颗星自己的出生时刻亮一下就收 */
.c3g-node__born { position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; opacity: 0;
  width: calc(var(--r) * 7); height: calc(var(--r) * 7);
  margin: calc(var(--r) * -3.5) 0 0 calc(var(--r) * -3.5);
  background: radial-gradient(circle, #fff 0%, var(--gl) 30%, transparent 68%); }
.c3g-stage.is-enter .c3g-node__born { animation: c3gBornFlash 1.05s ease-out both; animation-delay: var(--bd,0ms); }
@keyframes c3gBornFlash {
  0% { opacity: 0; transform: scale(.3); }
  /* 峰值压在星星本身长到常态的那一刻（出生动画的 68% = 612ms），两件事同时发生才像"点亮"；
     所以这里的 58% × 1.05s ≈ 609ms，跟着 c3gBorn 的时长一起调。 */
  58% { opacity: .95; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.8); }
}
/* 「本讲亮点」点亮的那一批：不再压暗其它星 —— 只靠光环凸显，全图其余部分原样不动 */
.c3g-nodes.is-focusing .c3g-node { opacity: .18; }
.c3g-nodes.is-focusing .c3g-node.is-hot { opacity: 1; }

/* 层级配色 */
/* 层级配色：三颗主星统一金色 —— 整页只剩「已掌握=金」「要补=红」两种颜色 */
.c3g-node.is-l0, .c3g-node.is-l1, .c3g-node.is-l2 { --hc1: #C98207; --hc2: #FFD75E; --hglow: rgba(224,162,26,.5); }

/* 五角星本体：颜色/光晕由下面的状态变量给 */
.c3g-node__dot { position: absolute; left: 50%; top: 50%;
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  clip-path: polygon(50% 0%, 61% 34%, 97% 34%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 3% 34%, 39% 34%);
  background: radial-gradient(circle at 42% 34%, #fff 3%, var(--sc2) 46%, var(--sc1) 100%);
  filter: drop-shadow(0 0 3px var(--gl)) drop-shadow(0 0 9px var(--gls));
  transition: transform .22s var(--ease), filter .22s ease; }

/* 每颗星自己的一团光，慢慢呼吸 */
.c3g-node__halo { position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none;
  width: calc(var(--r) * 6); height: calc(var(--r) * 6);
  margin: calc(var(--r) * -3) 0 0 calc(var(--r) * -3);
  background: radial-gradient(circle, var(--gls) 0%, transparent 68%);
  animation: c3gHalo 3.6s ease-in-out infinite; animation-delay: var(--tw,0s); }
@keyframes c3gHalo { 0%,100% { opacity: .5; transform: scale(.9) } 50% { opacity: 1; transform: scale(1.12) } }

/* 前测 + 练习的结论，整张图只有两种颜色：**绿＝已掌握，红＝还没掌握**。
   "前测没测到"不再单独给一种颜色 —— 它也是"还没掌握"，一起显示成红（见 clsOf）。
   三处颜色由同一组变量给：--sc1/--sc2 是星体渐变的两端，--gl/--gls 是发光与柔光，
   --pr 是「点亮时那圈光环」的描边色。状态类只改变量，形状与动画一律不动。 */
.c3g-node.is-leaf.is-ok  { --sc1: #1E9E63; --sc2: #57DC93; --gl: rgba(34,168,102,.95); --gls: rgba(34,168,102,.42); --pr: rgba(34,168,102,.92); }
.c3g-node.is-leaf.is-bad { --sc1: #B02415; --sc2: #FF6A55; --gl: rgba(219,50,32,.95);   --gls: rgba(219,50,32,.46);  --pr: rgba(226,64,44,.92); }

/* 「本讲亮点」点亮的那几颗：一圈一圈往外扩的光环。
   只有光环 —— 不压暗别的星、连线不参与、星的形状/颜色/大小一律不变。
   两条环错开半个周期，看起来是连续地一圈接一圈往外放。（以前"答错就常驻发红环"
   那套已经取消：光环现在只在点按钮时出现，颜色跟着星自己的状态走。） */
.c3g-node__pulse { position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; display: none; }
.c3g-node.is-flash .c3g-node__pulse { display: block;
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border: 2px solid var(--pr, rgba(140,165,188,.8));
  animation: c3gPulse 1.7s ease-out infinite; }
.c3g-node.is-flash .c3g-node__pulse--d2 { animation-delay: .56s; }
@keyframes c3gPulse { 0% { transform: scale(.85); opacity: .95 } 100% { transform: scale(3.2); opacity: 0 } }

/* 「本讲亮点」浮层：贴在画布右上角那块空白上（三个层级的锚点在左上 / 中 / 右下，
   右上本来就没有节点，所以不会挡住任何一颗星，也不抢节点的点击）。
   六个小按钮 = 这一讲的内容量；点一下点亮对应那批节点，再点一下取消。 */
.c3g-hl { position: absolute; right: 14px; top: 14px; z-index: 5; width: 340px;
  display: flex; flex-direction: column; gap: 8px; padding: 11px 12px 12px; border-radius: 16px;
  background: rgba(255,255,255,.84); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1px solid rgba(12,147,166,.18); box-shadow: 0 14px 30px rgba(20,40,70,.10); }
.c3g-hl__hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; font-weight: 900; letter-spacing: .8px; color: var(--c-cyan-deep); }
.c3g-hl__hd i { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: 0; color: #566b74; }
.c3g-hl__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
/* 每张小卡只有一行「数字 + 量词」：数字大一点，量词紧跟其后、字号只差一档。
   早先写成"大数字"与"小单位"上下两截时，"8"和"个数学实验"看着像两个不相干的东西。 */
.c3g-hlb { display: flex; align-items: baseline; justify-content: center; gap: 5px;
  padding: 13px 10px; border-radius: 11px; cursor: pointer; font: inherit; text-align: center;
  background: #fff; border: 1px solid rgba(12,147,166,.2);
  transition: transform .14s var(--ease), box-shadow .16s ease, border-color .16s ease, background .16s ease; }
.c3g-hlb__val { display: flex; align-items: baseline; gap: 5px;
  font-size: 12px; font-weight: 700; color: #0B7A92; }
.c3g-hlb__val b { font-size: 19px; font-weight: 900; line-height: 1; color: #0B7A92;
  font-variant-numeric: tabular-nums; }
.c3g-hlb:hover { transform: translateY(-2px); border-color: rgba(12,147,166,.5);
  box-shadow: 0 8px 16px rgba(12,147,166,.16); }
/* 前两项（总题数 / 题型数）只作总览：它们覆盖全图的星，点亮等于全亮 ——
   所以这一对不是按钮（用 div），没有悬停抬升、没有按下态，边框走虚线，一看就知道点不动。 */
.c3g-hlb.is-ro { cursor: default; background: rgba(12,147,166,.045);
  border-style: dashed; border-color: rgba(12,147,166,.22); }
.c3g-hlb.is-ro:hover { transform: none; border-color: rgba(12,147,166,.22); box-shadow: none; }
/* 按下态＝当前点亮的是哪一项（画布上正闪着哪一批） */
.c3g-hlb.is-on { background: linear-gradient(135deg, #0C93A6, #22B8CE); border-color: transparent;
  box-shadow: 0 8px 18px -8px #0C93A6; }
.c3g-hlb.is-on .c3g-hlb__val, .c3g-hlb.is-on .c3g-hlb__val b { color: #fff; }
/* 画布窄的时候横过来铺满顶部一行六个 —— 窄画布右上角离节点太近，摊开就会压星。
   这个类由 collection3_personal.js 的 syncPanelSize() 按「画布宽度」挂，
   不用 @media：课程成就/前测报告/教师端都是把星图嵌进容器里，
   视口宽而画布窄是常态，按视口判断会误判成宽屏。 */
.c3g-hl.is-narrow { left: 10px; right: 10px; top: 10px; width: auto; padding: 9px 10px 10px; gap: 6px; }
.c3g-hl.is-narrow .c3g-hl__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.c3g-hl.is-narrow .c3g-hlb { padding: 8px 3px; }
.c3g-hl.is-narrow .c3g-hlb__val { font-size: 9.5px; gap: 3px; }
.c3g-hl.is-narrow .c3g-hlb__val b { font-size: 15px; }

/* 点亮「本讲亮点」里任一项：**只有相关的那几颗放大凸显，其余一切照旧** ——
   不压暗、不模糊、连线的明暗也不动，星图始终是完整的一张（六个模式一视同仁）。
   放大走 transform（这个属性本来就带着过渡），所以放大/收回都是滑过去的，不跳。
   1.42 是"看得出变大、又不跟邻星糊成一片"的那档。 */
.c3g-nodes.is-hl .c3g-node.is-flash { transform: translate(var(--x), var(--y)) scale(var(--hl, 1.42)); }
/* 放大之后名字也跟着放大、颜色压深一点 —— 缩略图上认得出的就靠这一行字 */
.c3g-nodes.is-hl .c3g-node.is-flash .c3g-node__lb { font-size: 13.5px; color: #17313d; }

/* 点亮实验后挂在星旁边的小窗 + 引线：一根虚线从星上拉出来，接到「实验名 + 迷你示意卡」。
   归属关系就靠这条线表达，小窗本身挂在星的**外侧**，不压它自己。 */
.c3g-exps { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 6; }
.c3g-exps__sv { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
.c3g-exps__ln { fill: none; stroke: var(--c1, #0C93A6); stroke-width: 1.2; stroke-dasharray: 3 4;
  animation: c3gExpsLn .45s ease both; }
@keyframes c3gExpsLn { from { opacity: 0 } to { opacity: .62 } }
.c3g-exp { position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 7px 7px; border-radius: 11px; background: rgba(255,255,255,.95);
  border: 1px solid rgba(12,147,166,.26); box-shadow: 0 10px 22px rgba(20,40,70,.14);
  animation: c3gExpIn .32s cubic-bezier(.4,.05,.25,1) both; }
@keyframes c3gExpIn {
  from { opacity: 0; transform: translate(-50%,-50%) scale(.88); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
/* 小窗可点：点它 = 点它所属的那颗星（进该题型的介绍）。整层 .c3g-exps 是 pointer-events:none，
   这里只放行卡片本身，引线 SVG 照旧不挡点击。
   卡片自己有一条 transform 入场动画，而 animation 的 fill-mode:both 会一直占着 transform ——
   所以悬停的位移用独立的 translate 属性写，不去和动画抢同一个属性（否则悬停会顶掉入场终态）。 */
.c3g-exp.is-clickable { pointer-events: auto; cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease,
              translate .18s var(--ease); }
.c3g-exp.is-clickable:hover, .c3g-exp.is-clickable:focus-visible {
  background: #fff; border-color: rgba(12,147,166,.62);
  box-shadow: 0 14px 28px rgba(20,40,70,.20), 0 0 0 3px rgba(31,200,224,.18);
  translate: 0 -2px; }
.c3g-exp.is-clickable:focus-visible { outline: none; }
/* 迷你缩略图：实验**真实操作界面**的截图（无头浏览器生成，见 assets/experiments/_thumbs/README.md）。
   内联的 background-image 是两层"截图在上、渐变垫底"—— 万一副档缺图就露出渐变，不会是白块。
   84×53 是照截图比例（760×470 ≈ 1.62）定的，cover 裁掉多余部分。
   尺寸从 96×58 收小了一档：小窗要塞进星图的空隙里，卡片小一点就更容易贴住自己那颗星，
   引线也就不用拉那么长、不容易从别的线上穿过去。 */
.c3g-exp__shot { display: block; width: 84px; height: 53px; border-radius: 6px;
  background-color: #e8eef3; background-size: cover, cover; background-position: center, center;
  background-repeat: no-repeat, no-repeat; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(20,40,70,.08); }
.c3g-exp__nm { font-size: 10px; font-weight: 800; color: #23414c; line-height: 1.35;
  text-align: center; max-width: 100px; }
.c3g-exp__more { font-size: 9px; font-weight: 700; color: var(--c1); }
/* 三栏式（is-cols）星图：题型名是一条条长标签，卡片一多就只剩很窄的空隙。
   这里把实验小卡再收一档（缩略图 72×45、名字最多 84px），五张卡才都能贴着各自那颗星落下，
   既不用压题型名，也不用压左下角那三颗报告按钮（2026-10-28 学生反馈）。 */
.c3g-stage.is-cols .c3g-exp { padding: 5px 6px 6px; gap: 3px; border-radius: 10px; }
.c3g-stage.is-cols .c3g-exp__shot { width: 72px; height: 45px; }
.c3g-stage.is-cols .c3g-exp__nm { font-size: 9.5px; max-width: 84px; }

/* 「讲解视频」那张小卡的封面：缩略图**不截视频帧**，封面就是一块**纯渐变底**（见 tools/_gen_video_thumbs.py，
   图上不印任何文字/按钮），只在小卡自己这儿画一个**白色播放箭头**——有视频的题型点亮后同样会伸出一张卡，
   点它直接播（见 personal-core 的 mediaOfCard）。箭头要够大、且底下别再有别的图标，否则叠在一起看不清。 */
.c3g-exp--vid { border-color: rgba(79,70,229,.32); }
.c3g-exp--vid .c3g-exp__shot { display: flex; align-items: center; justify-content: center; }
.c3g-exp__play { display: block; width: 0; height: 0; margin-left: 4px;
  border-style: solid; border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 2px 5px rgba(20,40,70,.40)); }

/* 「查看知识前测报告 / 查看前测解析 / 查看知识掌握列表」：三颗并排贴在画布左下角
   （那里同样没有节点）。主次对调后星图是主视图，这三份东西都退成它们开的弹窗。 */
.c3g-rps { position: absolute; left: 14px; bottom: 14px; z-index: 5;
  display: flex; align-items: flex-end; gap: 10px; }
.c3g-rp { display: flex; align-items: center; gap: 9px; padding: 10px 15px 10px 12px; border-radius: 15px;
  cursor: pointer; font: inherit; text-align: left;
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1px solid rgba(12,147,166,.24); box-shadow: 0 12px 26px rgba(20,40,70,.10);
  transition: transform .16s var(--ease), box-shadow .18s ease, border-color .18s ease; }
.c3g-rp:hover { transform: translateY(-2px); border-color: rgba(12,147,166,.55);
  box-shadow: 0 14px 30px rgba(12,147,166,.18); }
.c3g-rp__ic { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 10px;
  background: linear-gradient(135deg,#0C93A6,#22B8CE); color: #fff; box-shadow: 0 8px 18px -8px #0C93A6; }
.c3g-rp__ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
.c3g-rp__tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.c3g-rp__tx b { font-size: 12.5px; font-weight: 900; color: var(--c-cyan-deep); }
.c3g-rp__tx i { font-style: normal; font-size: 10.5px; color: #566b74; }
/* 三颗并排后宽度变大：窄一点就收掉副标题，只留图标 + 主标题，免得挤到画布中央 */
@media (max-width: 780px) { .c3g-rp__tx i { display: none; } }

/* 「知识掌握列表」弹窗（沿用 c3g-sheet 外壳）：按层级分组，表格式列出每类题型是否掌握。
   弹窗本体是全屏的，所以内容自己收一个宽度并居中，别让表格横着拉满一行。 */
.c3g-ml { max-width: 860px; margin: 0 auto; padding: 6px 4px 12px; }
.c3g-ml__head { padding: 0 4px 14px; border-bottom: 1px solid #E9EEF1; margin-bottom: 14px; }
.c3g-ml__t { margin: 0 0 6px; font-size: 19px; font-weight: 900; color: var(--c-cyan-deep); }
.c3g-ml__d { margin: 0; font-size: 12.5px; line-height: 1.75; color: #5b6b74; }
.c3g-ml__grp + .c3g-ml__grp { margin-top: 18px; }
.c3g-ml__gh { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.c3g-ml__no { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%;
  color: #fff; font-size: 11px; font-weight: 800; flex: none; }
.c3g-ml__gh b { font-size: 14.5px; font-weight: 900; color: #2b3a42; }
.c3g-ml__sum { margin-left: auto; font-size: 12px; font-weight: 700; color: #6b7d86; }
.c3g-ml__tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.c3g-ml__tbl th { text-align: left; font-size: 11px; font-weight: 800; color: #8b979f;
  padding: 6px 10px; border-bottom: 1px solid #E9EEF1; }
.c3g-ml__tbl td { padding: 8px 10px; border-bottom: 1px solid #F2F5F7; vertical-align: middle; }
.c3g-ml__tbl tbody tr:last-child td { border-bottom: 0; }
.c3g-ml__name { color: #22333b; font-weight: 600; }
.c3g-ml__stt { width: 118px; }
.c3g-ml__badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.c3g-ml__badge.is-ok { background: #E8F6EE; color: #1F7A4D; }
.c3g-ml__badge.is-bad { background: #FDECEE; color: #C0392B; }
.c3g-ml__go { width: 86px; text-align: right; }
.c3g-ml__go button { font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
  padding: 4px 12px; border-radius: 8px; color: #0A6E7D;
  background: #fff; border: 1px solid rgba(12,147,166,.45);
  transition: background .16s ease, color .16s ease; }
.c3g-ml__go button:hover { background: #0C93A6; color: #fff; }

/* 入场动画开关：贴在画布右下角（左下角给了报告/解析两颗，右下角同样没有节点）。
   默认「关闭动画」，点一下变成「开启动画」—— 偏好存在本机，关过就一直记得。 */
.c3g-anim { position: absolute; right: 14px; bottom: 14px; z-index: 5;
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px 8px 11px; border-radius: 999px;
  cursor: pointer; font: inherit;
  background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1px solid rgba(20,40,70,.14); box-shadow: 0 10px 22px rgba(20,40,70,.08);
  transition: transform .16s var(--ease), box-shadow .18s ease, border-color .18s ease; }
.c3g-anim:hover { transform: translateY(-2px); border-color: rgba(12,147,166,.5);
  box-shadow: 0 12px 26px rgba(12,147,166,.16); }
.c3g-anim__ic { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%;
  background: rgba(12,147,166,.12); color: #0C93A6; }
.c3g-anim__ic svg { width: 12px; height: 12px; fill: currentColor; }
.c3g-anim__t { font-size: 12px; font-weight: 800; color: #566b74; white-space: nowrap; }
/* 已经关掉时整体退成灰调，一眼看出"动画是关着的" */
.c3g-anim[aria-pressed="false"] { border-color: rgba(20,40,70,.10); background: rgba(255,255,255,.7); }
.c3g-anim[aria-pressed="false"] .c3g-anim__ic { background: rgba(20,40,70,.08); color: #8697a1; }

/* 主星（层级）：更大的一颗星 + 外圈虚线环 */
.c3g-node__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; display: none; }
.c3g-node.is-hub { --sc1: var(--hc1); --sc2: var(--hc2); --gl: var(--hglow); --gls: var(--hglow); }
.c3g-node.is-hub .c3g-node__dot { animation: c3gHubPulse 4.2s ease-in-out infinite; animation-delay: var(--tw,0s); }
@keyframes c3gHubPulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.09) } }
.c3g-node.is-hub .c3g-node__ring { display: block;
  width: calc(var(--r) * 2 + 22px); height: calc(var(--r) * 2 + 22px);
  margin: calc((var(--r) + 11px) * -1) 0 0 calc((var(--r) + 11px) * -1);
  border: 1.5px dashed rgba(255,255,255,.9); opacity: .9;
  animation: c3gSpin 18s linear infinite; }
@keyframes c3gSpin { to { transform: rotate(360deg) } }

/* 主星的金色泛光：**常驻、不呼吸** —— 三颗层级星要一眼看出比周围的题型星重。
   以前"发光"只在首次光效里给（安静态会把它整层关掉），主星和小星星混成一片，层级感被稀释。
   现在改成固定泛光：第一次进来是这样，之后（is-calm）也一直留着。 */
.c3g-node.is-hub .c3g-node__halo {
  display: block;
  width: calc(var(--r) * 7.2); height: calc(var(--r) * 7.2);
  margin: calc(var(--r) * -3.6) 0 0 calc(var(--r) * -3.6);
  background: radial-gradient(circle, rgba(255,216,102,.62) 0%, rgba(240,178,42,.30) 34%, rgba(224,162,26,.14) 52%, transparent 72%);
  animation: none; opacity: 1; }

/* 「首次光效」（开关在 js/*_personal.js 的 glowFresh）：
   三颗主星的呼吸光晕 / 心跳缩放 / 旋转虚线圈，只在**第一次**打开这一讲的星图时给 ——
   那是"这张图长出来了"的仪式感。第二次再进来画面就静下来：星的颜色和形状才是要读的信息。
   虚线圈留着（它是"这里是一个层级"的标记），只是不再转、不再呼吸；
   主星的金色泛光不在此列 —— 它是常驻的（见上一条）。 */
.c3g-stage.is-calm .c3g-node.is-hub .c3g-node__dot { animation: none; }
.c3g-stage.is-calm .c3g-node.is-hub .c3g-node__ring { animation: none; }

/* 「素图」态：只有教师端那个 iframe 用（embed 的 plain 选项，见 js/c3graph-embed.js）。
   老师看这张图是要"一眼读出形状和颜色"（哪几类还没掌握），特效只会添乱；
   右上角的「本讲亮点」更是多余 —— 嵌入页里它是只读的一块，还压着星图。
   注：嵌入时本来就不播入场动画、也不画左右下角那三颗按钮（见 animBtnHtml / repBtnHtml），
   这里再兜住"常驻"的那几样：光晕、脉冲环、虚线圈、出生白光、星尘、连线流动。
   悬停信息卡也一起去掉：那张卡最后一行写的是"点开看题型介绍 / 去练习"，而嵌入页里节点
   根本点不开（readonly），留着反而误导。
   ⚠️ 别拿它当"所有嵌入"用：学生端「课程成就」弹窗的星图（embedOwn）不能套 —— 那张图
   要靠 flash() 的光环点亮节点，压暗了就没反馈了。 */
.c3g-stage.is-plain .c3g-hl,
.c3g-stage.is-plain .c3g-tip,
.c3g-stage.is-plain .c3g-node__halo,
.c3g-stage.is-plain .c3g-node__pulse,
.c3g-stage.is-plain .c3g-node__ring,
.c3g-stage.is-plain .c3g-node__born,
.c3g-stage.is-plain .c3g-spark,
.c3g-stage.is-plain .c3g-dust { display: none; }
.c3g-stage.is-plain .c3g-node__dot,
.c3g-stage.is-plain .c3g-edge.is-flow { animation: none; }

/* 节点名（常显；完整名/状态在悬停卡和弹窗里）。
   题型星的名字是「题型X + 手册里的完整题型名」—— 不缩写、不截断；一行放不下就折成两行。
   ⚠️ 这里必须给**固定宽度**，不能用 max-width：节点名是绝对定位、要"收缩适应"的话，
   算出来的是最小内容宽度（一个字一行，会竖起来）。 */
.c3g-node__lb { position: absolute; left: calc(50% + var(--r) + 11px); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 5px;
  width: 118px; font-size: 11.5px; line-height: 1.3; font-weight: 700; color: #43566b; pointer-events: none;
  text-shadow: 0 1px 0 #fff, 0 0 6px rgba(255,255,255,.95), 0 0 12px rgba(255,255,255,.9);
  transition: color .2s ease; }
.c3g-node.is-hub .c3g-node__lb { font-size: 14px; font-weight: 900; color: var(--ink); }
/* 主星名字前的 ①②③ —— 三个层级是同级，但有先后 */
.c3g-node__n { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; flex: none;
  font-size: 11px; font-style: normal; font-weight: 900; color: #fff; background: var(--hc1);
  box-shadow: 0 3px 8px -3px var(--hc1); }
.c3g-node.is-leaf.is-ok .c3g-node__lb { color: #146b45; }
.c3g-node.is-leaf.is-bad .c3g-node__lb { color: #a3341f; }

/* 悬停 / 选中。悬停那半边挂在 .c3g-stage.is-live 下：入场动画期间指针多半本来就压在画布上，
   不等指针真的动过，星星会"自己亮起来"抢戏（见 JS 的 releaseHover）。
   选中（is-sel）不受门控。 */
.c3g-stage.is-live .c3g-node:hover .c3g-node__dot, .c3g-node.is-sel .c3g-node__dot { transform: scale(1.32); }
.c3g-stage.is-live .c3g-node.is-hub:hover .c3g-node__dot, .c3g-node.is-hub.is-sel .c3g-node__dot { transform: scale(1.12); }
.c3g-stage.is-live .c3g-node:hover .c3g-node__lb, .c3g-node.is-sel .c3g-node__lb { color: var(--c-cyan-deep); }
.c3g-node.is-sel .c3g-node__dot { filter: drop-shadow(0 0 4px var(--gl)) drop-shadow(0 0 18px var(--gl)); }
.c3g-node:focus { outline: none; }

/* —— 悬停信息卡 —— */
.c3g-tip { position: absolute; z-index: 6; width: 268px; padding: 14px 16px 13px; border-radius: 16px;
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  background: rgba(255,255,255,.97); border: 1px solid rgba(12,147,166,.22);
  box-shadow: 0 18px 40px rgba(20,40,70,.18); animation: c3gTipIn .2s var(--ease); }
.c3g-tip[hidden] { display: none; }
@keyframes c3gTipIn { from { opacity: 0 } }
.c3g-tip__eq { font-size: 10.5px; font-weight: 800; letter-spacing: .8px; color: #fff; padding: 3px 9px; border-radius: 999px;
  background: linear-gradient(135deg,#0C93A6,#22B8CE); }
.c3g-tip b { font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.c3g-tip__sub { font-size: 12px; line-height: 1.55; color: var(--ink-soft); }
.c3g-tip__st { font-size: 11.5px; font-weight: 800; }
.c3g-tip__st.is-ok { color: #0E7A4C; }
.c3g-tip__st.is-bad { color: #C0392B; }
.c3g-tip__st.is-unk { color: #7d8d9c; }
.c3g-tip__hint { margin-top: 4px; font-size: 11px; font-weight: 800; color: var(--c-cyan-deep); }

/* —— 点节点开的大弹窗：挂在 body 上的整页浮层，几乎铺满整个视口 ——
   它**不受星图画布限制**（画布是 overflow:hidden 的圆角盒子，装在里面会被圆角裁掉顶边）。
   里面装的是精讲精练那套页面（某一层的题型列表 / 某个题型的完整讲解页），
   所以这里只负责"框"：尺寸、遮罩、入场，内容样式全部沿用 .apt / .aitd 那一套。

   z-index 210 是挑出来的：压在页面顶部那一圈挂件（.fs-toggle 200 / .ach-dock 300）之上 ——
   否则账号胶囊、课程成就、左下角全屏按钮会从弹窗边上探出来；但仍在
   讲解视频遮罩 220、提示条 400、各种 AI 弹窗 800+ 之下，那些是弹窗自己会调起的东西。 */
.c3g-sheet { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 210; display: flex; align-items: center; justify-content: center;
  padding: 14px; }
.c3g-sheet[hidden] { display: none; }
.c3g-sheet__mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(17,34,52,.4); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .24s ease; }
.c3g-sheet.is-in .c3g-sheet__mask { opacity: 1; }
.c3g-sheet__box { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column;
  border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid rgba(12,147,166,.22);
  box-shadow: 0 30px 80px rgba(15,35,60,.34);
  opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity .24s var(--ease), transform .28s var(--ease); }
.c3g-sheet.is-in .c3g-sheet__box { opacity: 1; transform: none; }
/* 右上角关闭 / 左上角「返回上一层」（只在弹窗里还有上一层时出现） */
.c3g-sheet__x, .c3g-sheet__back { position: absolute; top: 14px; z-index: 2; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; height: 34px; border-radius: 11px; cursor: pointer; font: inherit;
  border: 1px solid rgba(12,147,166,.22); background: rgba(255,255,255,.94); color: var(--c-cyan-deep);
  transition: background .2s ease; }
.c3g-sheet__x { right: 14px; width: 34px; }
.c3g-sheet__back { left: 14px; padding: 0 14px 0 11px; font-size: 13.5px; font-weight: 800; }
.c3g-sheet__back[hidden] { display: none; }
.c3g-sheet__x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.c3g-sheet__back svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.c3g-sheet__x:hover, .c3g-sheet__back:hover { background: rgba(12,147,166,.12); }
.c3g-sheet__body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px 22px 22px; }
/* 两个浮动按钮各占一角：内容抬头那一行给它俩让出位置，标题再长也不会压到按钮 */
.c3g-sheet .aitd__head { padding: 0 44px; }

/* 弹窗盖住整页时，页面自己那圈浮动挂件先让开 —— 同一类东西不互相压。
   （顶栏不是浮动的，它连同".view"一起被弹窗盖在下面，所以弹窗自带「返回 / 关闭」两个出口。） */
body.c3g-sheet-open .fs-toggle,
body.c3g-sheet-open #home-logo,
body.c3g-sheet-open .userchip,
body.c3g-sheet-open .ach-dock,
body.c3g-sheet-open .ai-orb { opacity: 0; pointer-events: none; }

/* —— 图例：并进抬头那一行，不压星图也不占纵向空间 —— */
.c3g-legend { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 5px;
  padding: 7px 13px; border-radius: 14px; background: #fff;
  border: 1px solid rgba(12,147,166,.18); box-shadow: 0 6px 16px rgba(20,40,70,.05); }
.c3g-legend__path { font-size: 11px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.c3g-legend__path b { color: var(--c-cyan-deep); font-weight: 900; }
.c3g-legend__path i { font-style: normal; margin: 0 5px; color: rgba(12,147,166,.55); }
.c3g-legend__sep { width: 1px; align-self: stretch; background: rgba(12,147,166,.2); }
.c3g-legend__i { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.c3g-legend__i::before { content: ""; width: 11px; height: 11px; flex: none;
  clip-path: polygon(50% 0%, 61% 34%, 97% 34%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 3% 34%, 39% 34%); }
.c3g-legend__i.is-ok::before { background: linear-gradient(135deg,#57DC93,#1E9E63); }
.c3g-legend__i.is-bad::before { background: linear-gradient(135deg,#FF8B78,#B8331F); }

/* —— 上手引导条 ——
   图例解释了"颜色是什么意思"，但从没说"这东西能点"。这一条补的就是那句"点它"。
   只给第一次进来的学生看：点过「知道了」就本机记住（见 js/*_personal.js 的 guideSeen）。
   位置在页头与画布之间 —— 视线从标题落到画布的路上正好撞见它，又一颗星也不遮。 */
.c3g-guide { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin: 0 0 12px;
  padding: 11px 14px; border-radius: 13px;
  background: linear-gradient(135deg, rgba(12,147,166,.10), rgba(34,184,206,.05));
  border: 1px solid rgba(12,147,166,.28);
  animation: c3gGuideIn .34s var(--ease) both; }
@keyframes c3gGuideIn { from { opacity: 0; transform: translateY(-6px); } }
.c3g-guide__ic { display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 50%; background: linear-gradient(135deg,#0C93A6,#22B8CE); color: #fff;
  box-shadow: 0 6px 14px -7px rgba(12,147,166,.85);
  animation: c3gGuideTap 2s ease-in-out infinite; }
.c3g-guide__ic svg { width: 15px; height: 15px; fill: currentColor; }
@keyframes c3gGuideTap {
  0%, 62%, 100% { transform: translateY(0) }
  74% { transform: translateY(-3px) }
  86% { transform: translateY(0) }
}
.c3g-guide b { font-size: 14px; font-weight: 900; color: var(--c-cyan-deep); flex: none; }
.c3g-guide__d { font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
.c3g-guide__d i { font-style: normal; font-weight: 800; color: #B8331F; }
.c3g-guide__ok { margin-left: auto; flex: none; padding: 7px 15px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 800; color: #fff; border: none;
  background: linear-gradient(135deg,#0C93A6,#22B8CE);
  box-shadow: 0 6px 14px -6px rgba(12,147,166,.7); transition: filter .16s ease; }
.c3g-guide__ok:hover { filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) { .c3g-guide__ic { animation: none; } }

/* —— 右栏：状态栏 + 下方「查看我的前测报告」入口（把星图右下那块空白补上） —— */
.c3g-rail { flex: 0 0 auto; align-self: stretch; display: flex; flex-direction: column; gap: 12px;
  width: 224px; transition: width .34s var(--ease); }
.c3g-rail[data-open="0"] { width: 62px; }
.c3g-side { flex: 0 0 auto; width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px 13px;
  border-radius: 22px; background: linear-gradient(180deg,#ffffff,#f3fafd); border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(20,40,70,.10); overflow: hidden; }
.c3g-side[data-open="0"] { padding: 14px 10px; }

/* 前测报告入口：撑满右栏下方剩余高度，尺寸跟着缺口走 */
.c3g-rep { flex: 1 1 auto; min-height: 84px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 7px; padding: 16px 12px; border-radius: 22px; cursor: pointer;
  font: inherit; text-align: center; color: var(--c-cyan-deep);
  background: linear-gradient(180deg,#ffffff,#f2f9fc); border: 1px dashed rgba(12,147,166,.45);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s var(--ease); }
.c3g-rep:hover { background: #fff; border-color: rgba(12,147,166,.85); transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(12,147,166,.14); }
.c3g-rep__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg,#0C93A6,#22B8CE); color: #fff; box-shadow: 0 8px 18px -8px #0C93A6; }
.c3g-rep__ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.c3g-rep__t { font-size: 13px; font-weight: 900; color: var(--c-cyan-deep); }
.c3g-rep__s { font-size: 11px; font-style: normal; color: var(--ink-soft); }
/* 侧栏收起时，这个入口也只留图标（仅宽屏；窄屏是横排，文字照常显示） */
@media(min-width:1001px){
  .c3g-rail[data-open="0"] .c3g-rep__t,
  .c3g-rail[data-open="0"] .c3g-rep__s { display: none; }
}
.c3g-side__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.c3g-side__hd { font-size: 12px; font-weight: 900; letter-spacing: 1.4px; color: var(--c-cyan-deep); white-space: nowrap; }
.c3g-side__tog { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(12,147,166,.22); background: #fff; color: var(--c-cyan-deep);
  transition: background .2s ease, transform .34s var(--ease); }
.c3g-side__tog svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.c3g-side__tog:hover { background: rgba(12,147,166,.1); }
.c3g-side[data-open="0"] .c3g-side__tog { transform: rotate(180deg); }
.c3g-side[data-open="0"] .c3g-side__hd { display: none; }
.c3g-side__list { display: flex; flex-direction: column; gap: 7px; }
.c3g-mi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 11px; border-radius: 14px; cursor: pointer;
  border: 1px solid transparent; background: rgba(12,147,166,.05); color: var(--ink); font: inherit; text-align: left;
  transition: transform .18s var(--ease), background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.c3g-mi:hover { transform: translateY(-2px); background: rgba(12,147,166,.12);
  border-color: rgba(12,147,166,.28); box-shadow: 0 8px 18px rgba(12,147,166,.14); }
.c3g-mi.is-accent { background: linear-gradient(135deg,#0C93A6,#22B8CE); color: #fff; box-shadow: 0 10px 22px -10px #0C93A6; }
.c3g-mi.is-accent:hover { background: linear-gradient(135deg,#0b8698,#1ea9be); }
.c3g-mi__ic { display: grid; place-items: center; width: 22px; height: 22px; flex: none; }
.c3g-mi__ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.c3g-mi__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c3g-mi__tx b { font-size: 13px; font-weight: 800; white-space: nowrap; }
.c3g-mi__tx i { font-size: 10.5px; font-style: normal; opacity: .62; white-space: nowrap; }
.c3g-mi__b { margin-left: auto; font-size: 10.5px; font-weight: 900; padding: 3px 7px; border-radius: 999px;
  background: rgba(255,255,255,.26); white-space: nowrap; }
.c3g-mi:not(.is-accent) .c3g-mi__b { background: rgba(12,147,166,.14); color: var(--c-cyan-deep); }
.c3g-side__ft { margin: auto 0 0; font-size: 11px; line-height: 1.65; color: var(--ink-soft); }
.c3g-side[data-open="0"] .c3g-mi__tx,
.c3g-side[data-open="0"] .c3g-mi__b,
.c3g-side[data-open="0"] .c3g-side__ft { display: none; }
.c3g-side[data-open="0"] .c3g-mi { justify-content: center; padding: 10px 8px; }

/* —— 响应式 —— */
@media(max-width:1000px){
  .c3g { flex-direction: column; }
  .c3g-rail, .c3g-rail[data-open="0"] { width: 100%; align-self: auto; }
  .c3g-side, .c3g-side[data-open="0"] { width: 100%; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; padding: 11px 12px; }
  .c3g-side__list { flex-direction: row; flex-wrap: wrap; flex: 1 1 auto; }
  .c3g-side[data-open="0"] .c3g-side__hd { display: block; }
  .c3g-side__ft { display: none; }
  .c3g-mi { width: auto; flex: 1 1 auto; justify-content: center; }
  /* 窄屏下前测报告入口改横排，不再撑高 */
  .c3g-rep { flex: 0 0 auto; flex-direction: row; min-height: 0; gap: 9px; padding: 12px 16px; text-align: left; }
  .c3g-stage { height: 520px; min-height: 520px; }
}
@media(max-width:620px){
  .c3g-gate__card { padding: 26px 22px 24px; }
  .c3g-gate__t { font-size: 21px; }
  .c3g-gate__go, .c3g-gate__ghost { width: 100%; }
  .c3g-stage { height: 460px; min-height: 460px; }
  .c3g-legend { gap: 9px; padding: 8px 12px; }
  .c3g-legend__path { display: none; }
  .c3g-legend__sep { display: none; }
  .c3g-node__lb { font-size: 10.5px; }
  .c3g-node__n { width: 15px; height: 15px; font-size: 10px; }
  .c3g-hd__t { font-size: 19px; }
}
@media(prefers-reduced-motion:reduce){
  .c3g-spark, .c3g-node__dot, .c3g-node__halo,
  .c3g-node__pulse, .c3g-node__ring, .c3g-node__born, .c3g-edge.is-flow { animation: none; }
  /* 出生动画被全局的「animation: none !important」掐掉之后，星星会停在 is-pre 的
     opacity:0 上（整张图空白）。这里把它们直接摆到落定态。 */
  .c3g-stage.is-enter .c3g-node { animation: none; }
  .c3g-node.is-pre { opacity: 1; transform: translate(var(--x), var(--y)); }
  .c3g-node__born { opacity: 0; }
  .c3g-edge { transition: none; stroke-dashoffset: 0 !important; }
  .c3g-edge.is-flow { opacity: .95; }
}
/* ===================== 知识前测报告弹窗 =====================
   主次对调：星图是主视图（整页），报告退到这里看 —— 入口是星图画布左下角那个按钮。
   内容＝一个简单概览 + 三个层次，每层逐条列知识点（名称 / 掌握情况 / 一句话介绍）。 */
.ptrm { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 900; display: none; }
.ptrm.is-open { display: block; }
.ptrm__veil { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(14,42,56,.42);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ptrm__box { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(880px, 94vw); max-height: min(88vh, 860px); display: flex; flex-direction: column;
  overflow: hidden; border-radius: 24px; background: rgba(255,255,255,.98);
  border: 1px solid rgba(12,147,166,.22);
  box-shadow: 0 40px 90px rgba(10,40,55,.34), 0 6px 20px rgba(10,40,55,.14); }
/* 「前测解析」那份要宽一些：12 道原题 + 选项 + 解析，窄了排版会挤 */
.ptrm__box--wide { width: min(1040px, 96vw); max-height: min(92vh, 940px); }
body.ptrm-lock { overflow: hidden; }
.ptrm__hd { position: relative; flex: 0 0 auto; padding: 16px 56px 14px 22px;
  border-bottom: 1px solid rgba(12,147,166,.14);
  background: linear-gradient(120deg, rgba(12,147,166,.14), rgba(126,214,232,.10)); }
.ptrm__hd h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); }
.ptrm__hd h2 i { margin-left: 9px; font-style: normal; font-size: 13px; font-weight: 700; color: #0B7A92; }
.ptrm__x { position: absolute; top: 50%; right: 18px; transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 11px;
  cursor: pointer; background: rgba(12,147,166,.10); color: #0B7A92; font-size: 20px; line-height: 1; }
.ptrm__x:hover { background: rgba(12,147,166,.2); }
.ptrm__body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: 16px 22px 22px; display: flex; flex-direction: column; gap: 16px; }

/* 简单概览：五张小卡 + 一句怎么用 */
.ptrm__ov { display: flex; flex-direction: column; gap: 12px; }
.ptrm__cs { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.ptrm__c { padding: 11px 12px; border-radius: 14px; background: #fff;
  border: 1px solid rgba(12,147,166,.16); box-shadow: 0 6px 16px rgba(20,40,70,.05); }
.ptrm__c strong { display: block; font-size: 19px; font-weight: 800; color: #0B7A92; font-variant-numeric: tabular-nums; }
.ptrm__c span { display: block; margin-top: 2px; font-size: 11px; color: #566b74; }
.ptrm__sum { margin: 0; padding: 12px 14px; border-radius: 14px; font-size: 12.5px; line-height: 1.7;
  color: #4a5f6d; background: rgba(12,147,166,.07); }

/* 三个层次 */
.ptrm__ly { display: flex; flex-direction: column; gap: 10px; }
.ptrm__lh { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.ptrm__lno { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%;
  font-size: 12px; font-weight: 900; color: #fff; background: linear-gradient(135deg,#C98207,#F2B01E); }
.ptrm__lm { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700; color: #566b74; }
.ptrm__ks { display: flex; flex-direction: column; gap: 8px; }
/* 左边一道色条就是这一类的掌握情况：金＝已掌握 / 红＝需重点练 / 灰蓝＝未测到（和星图同色） */
.ptrm__k { padding: 11px 14px; border-radius: 14px; background: #fff;
  border: 1px solid rgba(12,147,166,.16); border-left-width: 4px; }
.ptrm__k.is-ok { border-left-color: #E0A21A; }
.ptrm__k.is-bad { border-left-color: #E2402C; }
.ptrm__k.is-unk { border-left-color: #A9BCCE; }
.ptrm__kt { display: flex; align-items: center; gap: 10px; }
.ptrm__kt b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ptrm__kb { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.ptrm__k.is-ok .ptrm__kb { color: #8a5c07; background: rgba(224,162,26,.16); }
.ptrm__k.is-bad .ptrm__kb { color: #B8331F; background: rgba(226,64,44,.13); }
.ptrm__k.is-unk .ptrm__kb { color: #64798c; background: rgba(140,165,188,.18); }
.ptrm__kd { margin: 6px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); }

/* 「前测解析」弹窗里的正文：12 张逐题卡（复用整页版 .pt-a 那套卡片） */
.ptam__note { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; font-size: 12.5px; line-height: 1.7;
  color: #4a5f6d; background: rgba(12,147,166,.07); }
.ptam { display: flex; flex-direction: column; }
.ptam .pt-a { margin-bottom: 14px; }        /* 卡片之间的间距由卡片自己给，别再加一层 gap */
.ptam .pt-a:last-child { margin-bottom: 0; }

@media (max-width: 980px) {
  .ptrm__box { width: 94vw; max-height: 92vh; border-radius: 18px; }
  .ptrm__hd { padding: 13px 52px 12px 16px; }
  .ptrm__hd h2 { font-size: 17.5px; }
  .ptrm__body { padding: 14px 16px 18px; }
  .ptrm__cs { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ===== 以上为第3讲 个性化学习区间 ===== */

@media(max-width:600px){
  .pt-report__acts { flex-direction: column; }
  .pt-report__acts .btn { width: 100%; }
}


/* ===== 每周优秀对话（学生端）：顶部通知条 + 红点 + 查看弹窗 ===== */
.wkbar { position: fixed; left: 50%; transform: translateX(-50%); top: max(10px, env(safe-area-inset-top));
  z-index: 9000; display: flex; align-items: center; gap: 10px; max-width: min(760px, calc(100vw - 24px));
  padding: 9px 12px 9px 14px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #0C93A6, #22B8CE); color: #fff;
  box-shadow: 0 12px 30px rgba(12,147,166,.32); border: 1px solid rgba(255,255,255,.32);
  font-size: 13.5px; animation: wkbar-in .38s var(--ease, ease) both; }
@keyframes wkbar-in { from { opacity: 0; transform: translateX(-50%) translateY(-14px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.wkbar:hover { box-shadow: 0 16px 36px rgba(12,147,166,.42); }
.wkbar__dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #FF4D6D;
  box-shadow: 0 0 0 4px rgba(255,77,109,.28); animation: wkdot 1.6s ease-in-out infinite; }
@keyframes wkdot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.wkbar__t { font-weight: 800; white-space: nowrap; }
.wkbar__s { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wkbar__go { flex: 0 0 auto; height: 26px; padding: 0 12px; border: none; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.92); color: #0C93A6; font: inherit; font-size: 12.5px; font-weight: 800; }
@media (max-width: 560px) { .wkbar__s { display: none; } }

.wkmodal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9500; display: flex; align-items: center; justify-content: center;
  padding: 22px 14px; background: rgba(12,26,38,.46); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wkd { position: relative; width: min(760px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column;
  background: linear-gradient(180deg, #ffffff, #f7fbfd); border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(10,30,50,.34); animation: wkd-in .3s var(--ease, ease) both; }
@keyframes wkd-in { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
.wkd__close { position: absolute; top: 12px; right: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.9); color: #445; font-size: 21px; line-height: 1;
  cursor: pointer; }
.wkd__close:hover { background: #fff; color: #111; }
.wkd__body { overflow-y: auto; padding: 20px 22px 22px; }
.wkd__head { padding-right: 42px; }
.wkd__tags { display: flex; gap: 8px; margin-bottom: 8px; }
.wkd__badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: #0C93A6; background: rgba(12,147,166,.10); }
.wkd__badge.is-sim { color: #8A6A16; background: rgba(214,164,42,.14); }
.wkd__head h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--ink, #16202a); }
.wkd__meta { margin: 5px 0 0; font-size: 13px; color: var(--ink-soft, #7a8794); }
.wkd__q { margin: 14px 0 6px; padding: 12px 14px; border-radius: 14px; background: #fff;
  border: 1px solid rgba(15,23,42,.08); font-size: 15px; line-height: 1.85; color: var(--ink, #16202a); }
.wkd__q-k { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: 1px; color: #0C93A6; }
.wkd__msgs { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.wkd__row { display: flex; flex-direction: column; gap: 4px; max-width: 88%; }
.wkd__row.is-me { align-self: flex-end; align-items: flex-end; }
.wkd__who { font-size: 11.5px; font-weight: 700; color: #8b98a5; }
.wkd__bubble { padding: 11px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.85; color: var(--ink, #16202a);
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-top-left-radius: 4px; word-break: break-word; }
.wkd__row.is-me .wkd__bubble { border-top-left-radius: 14px; border-top-right-radius: 4px; color: #fff;
  background: linear-gradient(135deg, #12889b, #2bb6cb); border-color: transparent; }
.wkd__foot { margin: 18px 0 0; text-align: center; font-size: 12.5px; color: #93a0ac; }

/* ==========================================================================
   知识星图 · 鱼骨版 v2（2026-10-19，参考信息图风格）
   —— 实心鱼头 + 由粗到细的脊骨 + 小分叉鱼尾；
      脊骨上三个圆角色块＝三个层级（蓝 / 青 / 琥珀），
      每个色块上下各伸一根同色鱼刺；鱼刺右侧是带圆点的题型文字条目。
   只作用于 .c3g-stage.is-fish；旧星图样式保留，随时可退回。
   ========================================================================== */
.c3g-stage.is-fish {
  background:
    radial-gradient(90% 70% at 10% 50%, rgba(47,127,184,.10), transparent 62%),
    radial-gradient(70% 60% at 94% 50%, rgba(90,168,218,.10), transparent 68%),
    linear-gradient(180deg,#ffffff 0%, #f8fcff 62%, #eef6fb 100%);
}
.c3g-stage.is-fish .c3g-dust,
.c3g-stage.is-fish .c3g-spark { display: none; }

/* 鱼头 / 鱼尾 / 脊骨 */
.c3g-fish__head { fill: url(#c3gFishHead); stroke: rgba(20,60,110,.16); stroke-width: 1; }
.c3g-fish__eye { fill: #0B2B47; }
.c3g-fish__eye-glint { fill: #fff; opacity: .95; }
.c3g-fish__gill { fill: none; stroke: rgba(255,255,255,.34); stroke-width: 1.6; stroke-linecap: round; }
.c3g-fish__title { fill: #fff; font-weight: 800; letter-spacing: .6px; font-family: inherit; }
.c3g-fish__sub { fill: rgba(255,255,255,.72); font-weight: 600; letter-spacing: 1.6px; font-family: inherit; }
.c3g-fish__tail { fill: url(#c3gFishTail); stroke: rgba(30,90,140,.16); stroke-width: .8; stroke-linejoin: round; }
.c3g-fish__ray { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 1; stroke-linecap: round; }
.c3g-fish__spine-hl { fill: none; stroke: rgba(255,255,255,.36); stroke-width: 1.4; stroke-linecap: round; }
.c3g-fish__tip { opacity: .9; }
.c3g-stage.is-fish .c3g-edges.is-focusing .c3g-fish__spine { opacity: .35; }
.c3g-stage.is-fish .c3g-edges.is-focusing .c3g-fish__spine-hl { opacity: .15; }

/* 鱼刺：与层级同色 */
.c3g-stage.is-fish .c3g-edge.is-bone {
  fill: none; stroke: #2F7FB8; stroke-width: 2.2; stroke-linecap: round; opacity: .62;
}
.c3g-stage.is-fish .c3g-edge.is-bone.is-l0 { stroke: #2F7FB8; }
.c3g-stage.is-fish .c3g-edge.is-bone.is-l1 { stroke: #2AA6A0; }
.c3g-stage.is-fish .c3g-edge.is-bone.is-l2 { stroke: #E09A3E; }
.c3g-stage.is-fish .c3g-edges.is-focusing .c3g-edge.is-bone { opacity: .10; }
.c3g-stage.is-fish .c3g-edges.is-focusing .c3g-edge.is-bone.is-hot { opacity: .95; }

/* 层级色块（脊骨上的圆角标签） */
.c3g-stage.is-fish .c3g-node.is-hub {
  width: 118px; height: 32px; margin: -16px 0 0 -59px; border-radius: 999px;
  background: linear-gradient(135deg, var(--hc1, #2F7FB8), var(--hc2, #4FA3D9));
  box-shadow: 0 7px 16px -5px rgba(31,92,153,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.c3g-stage.is-fish .c3g-node.is-hub .c3g-node__dot,
.c3g-stage.is-fish .c3g-node.is-hub .c3g-node__halo,
.c3g-stage.is-fish .c3g-node.is-hub .c3g-node__ring,
.c3g-stage.is-fish .c3g-node.is-hub .c3g-node__pulse,
.c3g-stage.is-fish .c3g-node.is-hub .c3g-node__born { display: none; }
.c3g-stage.is-fish .c3g-node.is-hub .c3g-node__lb {
  left: 0; right: 0; top: 0; bottom: 0; width: auto; transform: none;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-shadow: none;
}
.c3g-stage.is-fish .c3g-node.is-hub .c3g-node__n {
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,.24); color: #fff; font-size: 9.5px; box-shadow: none;
}
.c3g-stage.is-live.is-fish .c3g-node.is-hub:hover,
.c3g-stage.is-fish .c3g-node.is-hub.is-sel {
  box-shadow: 0 11px 22px -6px rgba(31,92,153,.62), 0 0 0 3px rgba(255,255,255,.7), inset 0 1px 0 rgba(255,255,255,.45);
  filter: brightness(1.05);
}

/* 题型条目：不是卡片 —— 圆点在鱼刺上，文字在刺的右侧 */
.c3g-stage.is-fish .c3g-node.is-leaf {
  width: var(--w); height: 30px; margin: -15px 0 0 0;
  border-radius: 7px; background: transparent; border: 1px solid transparent; box-shadow: none;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.c3g-stage.is-fish .c3g-node.is-leaf::before {
  content: ""; position: absolute; left: -4px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: var(--st, #9AA7B4);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--stl, rgba(154,167,180,.14));
}
.c3g-stage.is-fish .c3g-node.is-leaf.is-ok  { --st: #17A465; --stl: rgba(23,164,101,.16); }
.c3g-stage.is-fish .c3g-node.is-leaf.is-bad { --st: #D94841; --stl: rgba(217,72,65,.14); }
.c3g-stage.is-fish .c3g-node.is-leaf .c3g-node__dot,
.c3g-stage.is-fish .c3g-node.is-leaf .c3g-node__halo,
.c3g-stage.is-fish .c3g-node.is-leaf .c3g-node__ring,
.c3g-stage.is-fish .c3g-node.is-leaf .c3g-node__pulse,
.c3g-stage.is-fish .c3g-node.is-leaf .c3g-node__born { display: none; }
.c3g-stage.is-fish .c3g-node.is-leaf .c3g-node__lb {
  left: 0; right: 0; top: 0; bottom: 0; width: auto; transform: none;
  display: flex; align-items: center;
  padding: 0 3px 0 11px;
  font-size: 10px; line-height: 1.3; font-weight: 600; letter-spacing: .1px;
  color: #2B3F52; text-shadow: 0 1px 0 #fff, 0 0 5px #fff; overflow: hidden;
  text-wrap: balance;
}
.c3g-stage.is-live.is-fish .c3g-node.is-leaf:hover,
.c3g-stage.is-fish .c3g-node.is-leaf.is-sel {
  background: rgba(255,255,255,.95);
  border-color: rgba(47,127,184,.28);
  box-shadow: 0 6px 14px rgba(31,92,153,.14);
}
.c3g-stage.is-live.is-fish .c3g-node.is-leaf:hover .c3g-node__lb,
.c3g-stage.is-fish .c3g-node.is-leaf.is-sel .c3g-node__lb { color: #1F5C99; }

/* 「本讲亮点」点亮：文字条目只加一层浅蓝底 */
.c3g-stage.is-fish .c3g-nodes.is-hl .c3g-node.is-leaf.is-flash,
.c3g-stage.is-fish .c3g-node.is-leaf.is-flash {
  background: rgba(47,127,184,.10);
  border-color: rgba(47,127,184,.22);
  box-shadow: 0 0 0 2px rgba(47,127,184,.10);
}
.c3g-stage.is-fish .c3g-nodes.is-hl .c3g-node.is-flash .c3g-node__lb { font-size: 10px; color: #1F5C99; }

/* 窄画布：色块与条目再收一点 */
@media (max-width: 900px) {
  .c3g-stage.is-fish .c3g-node.is-leaf .c3g-node__lb { font-size: 9.5px; }
}
@media (max-width: 760px) {
  .c3g-stage.is-fish .c3g-node.is-hub { width: 96px; margin-left: -48px; }
  .c3g-stage.is-fish .c3g-node.is-hub .c3g-node__lb { font-size: 10px; }
  .c3g-stage.is-fish .c3g-node.is-leaf .c3g-node__lb { font-size: 9px; }
}

/* 鱼骨态：本讲亮点收成左上角一块，不拉满整行 */
.c3g-stage.is-fish .c3g-hl.is-narrow { right: auto; width: auto; max-width: calc(100% - 20px); }
.c3g-stage.is-fish .c3g-hl.is-narrow .c3g-hl__grid { grid-template-columns: repeat(6, minmax(62px, auto)); }

/* ==========================================================================
   知识星图 · 三栏鱼形（2026-10-19，按参考图重做）
   —— 左端一个向左的三角＝鱼头，右端一个向右的三角＝鱼尾，
      中间三块倾斜的玻璃面板＝鱼身，头尾与面板用蓝线连成一条；
      面板下方是玻璃地面，带高光横线和面板/头尾的倒影。
   ========================================================================== */
.c3g-stage.is-cols {
  background:
    radial-gradient(46% 36% at 50% 0%, rgba(76,111,232,.045), transparent 72%),
    linear-gradient(180deg,#ffffff 0%, #fdfeff 66%, #f6f9ff 100%);
}
.c3g-stage.is-cols .c3g-dust,
.c3g-stage.is-cols .c3g-spark,
.c3g-stage.is-cols .c3g-edges { display: none; }

.c3g-cols { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; pointer-events: none; }
.c3g-stage.is-cols .c3g-cols { display: block; }

/* 左上角标题（两道细竖条） */
.c3g-cols__hd { position: absolute; display: flex; align-items: center;
  font-size: 28px; line-height: 1; font-weight: 900; letter-spacing: .6px; color: #1E3A8A; }
.c3g-cols__hd::before { content: ""; width: 4px; height: 27px; margin-right: 12px; flex: none;
  background: #3F5BD9; border-radius: 1px; transform: skewX(-10deg);
  box-shadow: 7px 0 0 #3F5BD9; }

/* 左右三角：左三角尖朝左（鱼头），右三角尖朝右（鱼尾） */
.c3g-arrowwrap { position: absolute; filter: drop-shadow(0 26px 40px rgba(30,58,138,.26)); }
.c3g-flowarrow { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 46%),
    linear-gradient(160deg, #6D86F0 0%, #3F5BD9 48%, #2440B0 100%);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.c3g-flowarrow.is-left { clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.c3g-flowarrow.is-right { clip-path: polygon(0 0, 0 100%, 100% 50%); }
.c3g-flowarrow::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.16) 0%, transparent 38%); }
.c3g-flowarrow span { position: relative; z-index: 1; padding: 0 14px 0 24px;
  color: #fff; font-size: 16px; font-weight: 800; line-height: 1.5; letter-spacing: .5px;
  text-align: center; text-wrap: balance; text-shadow: 0 2px 10px rgba(20,40,110,.28); }
.c3g-flowarrow.is-left span { padding: 0 24px 0 34px; }

/* 三块倾斜玻璃面板 */
.c3g-colwrap { position: absolute; filter: drop-shadow(0 30px 44px rgba(40,70,160,.22));
  transition: opacity .2s ease; }
.c3g-col { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 18px;
  clip-path: polygon(0 7%, 100% 0, 100% 93%, 0 100%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.28) 24%, rgba(255,255,255,0) 47%),
    linear-gradient(152deg, rgba(255,255,255,.62) 0%, var(--glassB) 52%, var(--glassC) 100%);
  box-shadow: inset 0 0 0 1.4px rgba(255,255,255,.86), inset 0 0 34px rgba(255,255,255,.55); }
.c3g-col.is-l0 { --glassB: #E7EEFF; --glassC: #D5E1FF; --wm: rgba(63,91,217,.075); }
.c3g-col.is-l1 { --glassB: #EBF1FF; --glassC: #DDE6FF; --wm: rgba(76,111,232,.075); }
.c3g-col.is-l2 { --glassB: #FFEACB; --glassC: #FFDDB0; --wm: rgba(224,164,58,.11); }
.c3g-cols.is-focusing .c3g-colwrap { opacity: .35; }
.c3g-cols.is-focusing .c3g-colwrap.is-hot { opacity: 1; }

/* 面板底部的大箭头水印 */
.c3g-col__wm { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: 76%; height: 66px; background: var(--wm);
  clip-path: polygon(0 28%, 62% 28%, 62% 0, 100% 50%, 62% 100%, 62% 72%, 0 72%); }

/* 头→第一块、块与块、第三块→尾 的蓝色连接线 */
.c3g-cols__link { position: absolute; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(63,91,217,.25), #3F5BD9);
  box-shadow: 0 2px 7px rgba(63,91,217,.28); }
.c3g-cols__link::after { content: ""; position: absolute; right: -2px; top: -5px;
  border-left: 10px solid #3F5BD9; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

/* 玻璃地面 */
.c3g-floor { position: absolute; height: 46px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(238,245,255,.55) 30%, rgba(255,255,255,0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%); }
.c3g-floor__line { position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1) 16%, rgba(63,91,217,.20) 50%, rgba(255,255,255,1) 84%, rgba(255,255,255,0));
  box-shadow: 0 0 12px rgba(63,91,217,.20); }
.c3g-floor__refl { position: absolute; top: 2px; height: 42px; border-radius: 0 0 10px 10px;
  filter: blur(1.4px); opacity: .55;
  border-left: 1px solid rgba(255,255,255,.7); border-right: 1px solid rgba(255,255,255,.7); }
.c3g-floor__refl.is-l0 { background: linear-gradient(180deg, rgba(63,91,217,.30), rgba(63,91,217,.03)); }
.c3g-floor__refl.is-l1 { background: linear-gradient(180deg, rgba(76,111,232,.28), rgba(76,111,232,.03)); }
.c3g-floor__refl.is-l2 { background: linear-gradient(180deg, rgba(224,164,58,.32), rgba(224,164,58,.03)); }
.c3g-floor__refl.is-head { border: 0; clip-path: polygon(100% 0, 100% 100%, 0 50%);
  background: linear-gradient(180deg, rgba(63,91,217,.36), rgba(63,91,217,.02)); }
.c3g-floor__refl.is-tail { border: 0; clip-path: polygon(0 0, 0 100%, 100% 50%);
  background: linear-gradient(180deg, rgba(63,91,217,.32), rgba(63,91,217,.02)); }

/* —— 列头药丸 —— */
.c3g-stage.is-cols .c3g-node.is-hub {
  width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--hc2), var(--hc1));
  box-shadow: 0 14px 24px -8px rgba(47,73,192,.62),
    inset 0 2px 2px rgba(255,255,255,.45), inset 0 -3px 6px rgba(0,0,0,.12); }
.c3g-stage.is-cols .c3g-node.is-hub .c3g-node__dot,
.c3g-stage.is-cols .c3g-node.is-hub .c3g-node__halo,
.c3g-stage.is-cols .c3g-node.is-hub .c3g-node__ring,
.c3g-stage.is-cols .c3g-node.is-hub .c3g-node__pulse,
.c3g-stage.is-cols .c3g-node.is-hub .c3g-node__born { display: none; }
.c3g-stage.is-cols .c3g-node.is-hub .c3g-node__lb {
  left: 0; right: 0; top: 0; bottom: 0; width: auto; transform: none;
  display: flex; align-items: center; justify-content: center; padding: 0 16px;
  color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .6px; text-shadow: none; }
.c3g-stage.is-live.is-cols .c3g-node.is-hub:hover,
.c3g-stage.is-cols .c3g-node.is-hub.is-sel { filter: brightness(1.06); }

/* —— 题型卡片：居中文字、悬浮感 —— */
.c3g-stage.is-cols .c3g-node.is-leaf {
  width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  border-radius: 14px; background: #fff; border: 1px solid rgba(63,91,217,.05);
  box-shadow: 0 10px 22px rgba(40,70,160,.11), inset 0 1px 0 #fff;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.c3g-stage.is-cols .c3g-node.is-leaf .c3g-node__dot,
.c3g-stage.is-cols .c3g-node.is-leaf .c3g-node__halo,
.c3g-stage.is-cols .c3g-node.is-leaf .c3g-node__ring,
.c3g-stage.is-cols .c3g-node.is-leaf .c3g-node__pulse,
.c3g-stage.is-cols .c3g-node.is-leaf .c3g-node__born { display: none; }
.c3g-stage.is-cols .c3g-node.is-leaf .c3g-node__lb {
  left: 0; right: 0; top: 0; bottom: 0; width: auto; transform: none;
  display: flex; align-items: center; justify-content: center; padding: 0 24px;
  font-size: 13px; line-height: 1.32; font-weight: 600; letter-spacing: .1px;
  color: #25384B; text-shadow: none; overflow: hidden; }
.c3g-stage.is-cols .c3g-node.is-leaf .c3g-node__tx { min-width: 0; overflow: hidden; text-wrap: balance; }
/* 掌握状态直接铺满整张卡：绿＝已掌握，红＝还没掌握 */
.c3g-stage.is-cols .c3g-node.is-leaf::after { display: none; }
.c3g-stage.is-cols .c3g-node.is-leaf.is-ok {
  background: #E3F7EC; border-color: #7BD3A8;
  box-shadow: 0 10px 22px rgba(23,164,101,.13), inset 0 1px 0 rgba(255,255,255,.85); }
.c3g-stage.is-cols .c3g-node.is-leaf.is-ok .c3g-node__lb { color: #0F5B3A; }
.c3g-stage.is-cols .c3g-node.is-leaf.is-bad {
  background: #FCE6E3; border-color: #F0A39D;
  box-shadow: 0 10px 22px rgba(217,72,65,.12), inset 0 1px 0 rgba(255,255,255,.85); }
.c3g-stage.is-cols .c3g-node.is-leaf.is-bad .c3g-node__lb { color: #8A241F; }
.c3g-stage.is-cols .c3g-node.is-leaf:not(.is-ok):not(.is-bad) {
  background: #fff; border-color: rgba(63,91,217,.05); }

/* 悬停：沿用绿/红，不换成蓝色 */
.c3g-stage.is-live.is-cols .c3g-node.is-leaf:hover,
.c3g-stage.is-cols .c3g-node.is-leaf.is-sel {
  transform: translate(var(--x), var(--y)) translateY(-3px) scale(1.012); }
.c3g-stage.is-live.is-cols .c3g-node.is-leaf.is-ok:hover,
.c3g-stage.is-cols .c3g-node.is-leaf.is-ok.is-sel {
  border-color: #4CC38A;
  box-shadow: 0 16px 30px rgba(23,164,101,.20), 0 0 0 3px rgba(23,164,101,.10); }
.c3g-stage.is-live.is-cols .c3g-node.is-leaf.is-ok:hover .c3g-node__lb,
.c3g-stage.is-cols .c3g-node.is-leaf.is-ok.is-sel .c3g-node__lb { color: #0B4F32; }
.c3g-stage.is-live.is-cols .c3g-node.is-leaf.is-bad:hover,
.c3g-stage.is-cols .c3g-node.is-leaf.is-bad.is-sel {
  border-color: #E8736D;
  box-shadow: 0 16px 30px rgba(217,72,65,.18), 0 0 0 3px rgba(217,72,65,.10); }
.c3g-stage.is-live.is-cols .c3g-node.is-leaf.is-bad:hover .c3g-node__lb,
.c3g-stage.is-cols .c3g-node.is-leaf.is-bad.is-sel .c3g-node__lb { color: #7A1F1A; }
.c3g-stage.is-live.is-cols .c3g-node.is-leaf:not(.is-ok):not(.is-bad):hover,
.c3g-stage.is-cols .c3g-node.is-leaf:not(.is-ok):not(.is-bad).is-sel {
  border-color: #93A9F2;
  box-shadow: 0 16px 30px rgba(40,70,160,.17), 0 0 0 3px rgba(63,91,217,.08); }
.c3g-stage.is-live.is-cols .c3g-node.is-leaf:not(.is-ok):not(.is-bad):hover .c3g-node__lb,
.c3g-stage.is-cols .c3g-node.is-leaf:not(.is-ok):not(.is-bad).is-sel .c3g-node__lb { color: #1E3A8A; }

/* 「本讲亮点」点亮：只在外圈加蓝环，不改掌握底色 */
.c3g-stage.is-cols .c3g-nodes.is-hl .c3g-node.is-leaf.is-flash,
.c3g-stage.is-cols .c3g-node.is-leaf.is-flash {
  box-shadow: 0 12px 24px rgba(63,91,217,.18), 0 0 0 3px rgba(63,91,217,.24); }
.c3g-stage.is-cols .c3g-nodes.is-hl .c3g-node.is-leaf.is-flash .c3g-node__lb { font-size: 13px; }
.c3g-stage.is-cols .c3g-node.is-leaf.is-ok.is-flash .c3g-node__lb { color: #0F5B3A; }
.c3g-stage.is-cols .c3g-node.is-leaf.is-bad.is-flash .c3g-node__lb { color: #8A241F; }

@media (max-width: 1100px) {
  .c3g-cols__hd { font-size: 24px; }
  .c3g-cols__hd::before { height: 23px; }
  .c3g-flowarrow span { font-size: 15px; }
  .c3g-stage.is-cols .c3g-node.is-hub .c3g-node__lb { font-size: 14px; }
  .c3g-stage.is-cols .c3g-node.is-leaf .c3g-node__lb { font-size: 12px; }
}
@media (max-width: 900px) {
  .c3g-cols__hd { font-size: 21px; }
  .c3g-cols__hd::before { height: 20px; }
  .c3g-flowarrow span { font-size: 14px; }
  .c3g-stage.is-cols .c3g-node.is-hub .c3g-node__lb { font-size: 13px; }
  .c3g-stage.is-cols .c3g-node.is-leaf .c3g-node__lb { font-size: 11.5px; }
}

/* 三栏态：本讲亮点收成左上角一块 */
.c3g-stage.is-cols .c3g-hl.is-narrow { right: auto; width: auto; max-width: calc(100% - 20px); }
.c3g-stage.is-cols .c3g-hl.is-narrow .c3g-hl__grid { grid-template-columns: repeat(6, minmax(62px, auto)); }

/* ===================== 课堂共享（教师示范端 → 学生端只读） ===================== */
/* 学生端遮罩：共享期间整页只读。三种内容：数学实验 iframe / 波利亚·费曼只读窗口 / 看屏幕 */
.dshare {
  position: fixed; inset: 0; z-index: 9000;
  display: none; flex-direction: column;
  background: radial-gradient(circle at 50% 22%, rgba(18, 40, 64, 0.96), rgba(4, 9, 16, 0.98) 70%);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #eaf4ff;
}
.dshare.is-on { display: flex; }
.dshare__head {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 13px clamp(16px, 3vw, 28px);
  font-size: 13px; letter-spacing: 0.05em;
  background: linear-gradient(180deg, rgba(10, 22, 36, 0.98), rgba(10, 22, 36, 0.7));
  border-bottom: 1px solid rgba(120, 190, 255, 0.18);
}
.dshare__dot {
  width: 8px; height: 8px; border-radius: 50%; background: #34d399;
  animation: dsharePulse 1.7s ease-out infinite;
}
@keyframes dsharePulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.dshare__head b { font-weight: 700; }
.dshare__head em { margin-left: auto; font-style: normal; font-size: 12px; color: #9ec3e8; }
.dshare__body {
  flex: 1; min-height: 0; position: relative;
  display: flex; flex-direction: column; padding: 16px clamp(12px, 2.4vw, 24px);
}
.dshare__body.is-dialog { align-items: center; justify-content: center; overflow: auto; }
.dshare__frame {
  flex: 1; width: 100%; min-height: 0; border: 0; border-radius: 12px; background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.dshare__cap { flex: none; margin-bottom: 8px; font-size: 12.5px; color: #9ec3e8; }
.dshare__wait {
  margin: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.dshare__wait b { font-size: clamp(24px, 3.4vw, 34px); letter-spacing: 0.16em; font-weight: 700; }
.dshare__wait span { font-size: 14px; color: #9ec3e8; }
.dshare__foot {
  flex: none; text-align: center; padding: 9px;
  font-size: 12px; color: #8fb0cf;
  border-top: 1px solid rgba(120, 190, 255, 0.14);
}
/* 只读对话：直接复用波利亚 / 费曼的卡片，只是把尺寸收进共享层 */
.dshare__body.is-dialog .polya,
.dshare__body.is-dialog .fey {
  width: 100%; max-width: min(1180px, 96vw); height: min(80vh, 880px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}
.dshare__ro {
  font-size: 11px; padding: 2px 9px; border-radius: 999px;
  color: #7ff0c4; background: rgba(52, 211, 153, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.35);
}
html.dshare-lock, html.dshare-lock body { overflow: hidden; }

/* 教师「示范学生端」设置面板里的共享区 */
.live-set { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 4px; }
.live-set__classes {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  max-height: 92px; overflow: auto;
  font-size: 13px; color: var(--ink);
}
.live-set__classes label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.live-set__classes.is-locked { opacity: 0.55; pointer-events: none; }
.live-set__go {
  height: 40px; border: none; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  box-shadow: 0 8px 18px rgba(59, 130, 246, 0.28);
}
.live-set__go:hover { filter: brightness(1.05); }
.live-set__go.is-on {
  background: linear-gradient(135deg, #ef4444, #f97316);
  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.25);
}
.live-set__go:disabled { opacity: 0.6; cursor: default; }
.live-set__state { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.live-set__tip { margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--ink-soft); }
.live-set__tip b { color: var(--ink); font-weight: 700; }
.live-set__nil { font-size: 12.5px; color: var(--ink-soft); }

/* 教师示范端右下角常驻的「共享」按钮 */
.live-fab {
  position: fixed; right: 18px; bottom: 84px; z-index: 860;
  height: 42px; padding: 0 20px; border: none; border-radius: 999px;
  font: inherit; font-size: 13.5px; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.32);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.live-fab:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(59, 130, 246, 0.38); }
.live-fab.is-on {
  background: linear-gradient(135deg, #ef4444, #f97316);
  box-shadow: 0 10px 24px rgba(239, 68, 68, 0.3);
}

/* 共享层里嵌的是浅色卡片：气泡文字别继承共享层的浅色，否则白底白字看不见 */
.dshare__modal .bubble--assistant .bubble__text {
  color: #1d2b3a;
  background: #f2f6fb;
  border-color: rgba(20, 40, 60, 0.1);
}
.dshare__modal .bubble--user .bubble__text { color: #fff; }