/* 仲晴学员中心 · 设计系统（与课堂 H5 视觉一致） */
:root{
  --primary:#FF7A3C; --primary-2:#FF9A56;
  --grad:linear-gradient(135deg,#FFA24E 0%,#FF6B35 100%);
  --grad-blue:linear-gradient(135deg,#5B8DF8 0%,#3D63D8 100%);
  --grad-green:linear-gradient(135deg,#3ECF8E 0%,#16A97B 100%);
  --grad-purple:linear-gradient(135deg,#A66BFF 0%,#7B3FF2 100%);
  --grad-pink:linear-gradient(135deg,#FF7EB3 0%,#F2508A 100%);
  --grad-gold:linear-gradient(135deg,#FFD166 0%,#FFB800 100%);
  --blue:#4A7CE8; --green:#22B573; --red:#F2506A; --gold:#FFB800; --purple:#7B3FF2;
  --bg:#F5F6FA; --card:#FFFFFF; --text:#1F2330; --sub:#8A90A3; --line:#EEF0F5;
  --shadow:0 6px 20px rgba(31,35,48,.08);
  --shadow-sm:0 2px 10px rgba(31,35,48,.06);
  --r:14px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.6;
  min-height:100vh; padding-bottom:env(safe-area-inset-bottom);
}
a{color:var(--blue);text-decoration:none}
img{max-width:100%}
.wrap{max-width:480px;margin:0 auto;padding:0 14px 28px}
.wrap-wide{max-width:900px;margin:0 auto;padding:0 14px 32px}

/* 顶栏 */
.topbar{background:var(--grad);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px;
  position:sticky;top:0;z-index:20;box-shadow:0 2px 12px rgba(255,107,53,.25)}
.topbar .tb-back{font-size:22px;line-height:1;width:26px;text-align:center;cursor:pointer;opacity:.95}
.topbar b{font-size:16.5px;font-weight:600;flex:1}
.topbar .tb-act{font-size:12.5px;opacity:.95}
.topbar.blue{background:var(--grad-blue);box-shadow:0 2px 12px rgba(61,99,216,.25)}
.topbar.green{background:var(--grad-green);box-shadow:0 2px 12px rgba(22,169,123,.25)}

/* 卡片 */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.card h3{font-size:15px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.card h3 .more{margin-left:auto;font-size:12px;color:var(--sub);font-weight:400}
.muted{color:var(--sub);font-size:12.5px}
.tiny{font-size:11.5px;color:var(--sub)}

/* 表单 */
.field{margin-bottom:13px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#3A3F52}
.field label i{color:var(--red);font-style:normal;margin-left:2px}
.field .hint{font-size:11px;color:var(--sub);margin-top:4px}
input[type=text],input[type=tel],input[type=date],input[type=number],select,textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:11px;font-size:14.5px;
  font-family:inherit;background:#FAFBFC;color:var(--text);outline:none;transition:border .15s,background .15s}
input:focus,select:focus,textarea:focus{border-color:var(--primary-2);background:#fff}
textarea{min-height:76px;resize:vertical}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg span{padding:8px 14px;border:1px solid var(--line);border-radius:20px;font-size:13px;background:#fff;cursor:pointer}
.seg span.on{background:var(--grad);color:#fff;border-color:transparent;font-weight:600}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips span{padding:7px 13px;border-radius:20px;background:#fff;border:1px solid var(--line);font-size:12.5px;cursor:pointer}
.chips span.on{background:#FFF1E9;border-color:var(--primary);color:var(--primary);font-weight:600}

/* 按钮 */
.btn{display:block;width:100%;padding:13px;border:none;border-radius:12px;background:var(--grad);color:#fff;
  font-size:15.5px;font-weight:600;font-family:inherit;cursor:pointer;box-shadow:0 6px 16px rgba(255,107,53,.28)}
.btn:active{transform:translateY(1px)}
.btn.blue{background:var(--grad-blue);box-shadow:0 6px 16px rgba(61,99,216,.26)}
.btn.green{background:var(--grad-green);box-shadow:0 6px 16px rgba(22,169,123,.24)}
.btn.ghost{background:#fff;color:var(--text);border:1px solid var(--line);box-shadow:none}
.btn.sm{padding:9px 14px;width:auto;font-size:13px;display:inline-block}
.btn[disabled]{opacity:.55;box-shadow:none}
.btn-row{display:flex;gap:10px}
.btn-row .btn{flex:1}

/* 标签 */
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:8px;background:#EEF2FF;color:var(--blue);font-weight:600}
.tag.green{background:#E8F8F1;color:#16A97B}
.tag.orange{background:#FFF1E9;color:#FF6B35}
.tag.red{background:#FEECEF;color:#F2506A}
.tag.purple{background:#F2EBFF;color:#7B3FF2}
.tag.gray{background:#F1F2F6;color:#8A90A3}

/* 统计块 */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px}
.stat{background:#fff;border-radius:13px;padding:12px 10px;text-align:center;border:1px solid var(--line)}
.stat b{display:block;font-size:20px;font-weight:700;line-height:1.2}
.stat span{font-size:11px;color:var(--sub)}
.stat.o b{color:#FF6B35}.stat.b b{color:var(--blue)}.stat.g b{color:var(--green)}.stat.p b{color:var(--purple)}

/* 列表 */
.row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row .av{width:38px;height:38px;border-radius:11px;background:var(--grad-blue);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:15px;font-weight:600;flex:0 0 38px}
.row .mid{flex:1;min-width:0}
.row .mid b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .mid span{display:block;font-size:11.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .rt{text-align:right;flex:0 0 auto}

/* 时间线 */
.tl{position:relative;padding-left:26px}
.tl:before{content:'';position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding:0 0 16px}
.tl-item:last-child{padding-bottom:0}
.tl-item .dot{position:absolute;left:-26px;top:1px;width:20px;height:20px;border-radius:50%;background:#fff;
  border:2px solid var(--primary-2);display:flex;align-items:center;justify-content:center;font-size:10px}
.tl-item .tl-t{font-size:13.5px;font-weight:600}
.tl-item .tl-d{font-size:11.5px;color:var(--sub);margin-top:1px}
.tl-item .tl-c{font-size:12.5px;color:#4A5068;background:#FAFBFC;border-radius:10px;padding:8px 10px;margin-top:6px}

/* 雷达图容器 */
.radar-box{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dim-list{flex:1;min-width:150px}
.dim-row{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:12.5px}
.dim-row .dn{width:64px;color:#4A5068;flex:0 0 auto}
.bar{flex:1;height:7px;border-radius:6px;background:#F1F2F6;overflow:hidden}
.bar i{display:block;height:100%;border-radius:6px;background:var(--grad)}
.bar i.b{background:var(--grad-blue)}.bar i.g{background:var(--grad-green)}
.bar i.p{background:var(--grad-purple)}.bar i.o{background:var(--grad)}
.dim-row .dv{width:34px;text-align:right;font-weight:600;color:#3A3F52;flex:0 0 auto}

/* 结果大卡 */
.hero{border-radius:18px;padding:20px;color:#fff;text-align:center;margin-bottom:12px;box-shadow:var(--shadow)}
.hero .lv{font-size:30px;font-weight:700;letter-spacing:.5px;line-height:1.25}
.hero .sub{font-size:12.5px;opacity:.94;margin-top:5px}
.hero .score{font-size:13px;margin-top:10px;background:rgba(255,255,255,.18);display:inline-block;
  padding:4px 14px;border-radius:20px}

/* 答题页 */
.qwrap{padding:16px 16px 0}
.progress{height:6px;border-radius:6px;background:#EDEFF4;overflow:hidden;margin-bottom:6px}
.progress i{display:block;height:100%;background:var(--grad);border-radius:6px;transition:width .3s}
.qmeta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--sub);margin-bottom:14px}
.qstem{font-size:17px;font-weight:600;line-height:1.6;margin-bottom:6px}
.qcn{font-size:12.5px;color:var(--sub);margin-bottom:14px}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{padding:14px 15px;border:1.5px solid var(--line);border-radius:13px;background:#fff;font-size:15px;
  cursor:pointer;display:flex;align-items:center;gap:10px;transition:.15s}
.opt:active{transform:scale(.99)}
.opt .k{width:22px;height:22px;border-radius:50%;background:#F1F2F6;color:var(--sub);font-size:11.5px;
  display:flex;align-items:center;justify-content:center;font-weight:600;flex:0 0 22px}
.opt.ok{border-color:#22B573;background:#F2FCF7}
.opt.ok .k{background:var(--green);color:#fff}
.opt.no{border-color:#F2506A;background:#FEF4F6}
.opt.no .k{background:var(--red);color:#fff}
.play-btn{display:inline-flex;align-items:center;gap:7px;padding:11px 20px;border-radius:26px;background:var(--grad-blue);
  color:#fff;font-size:14px;font-weight:600;border:none;cursor:pointer;margin-bottom:14px;box-shadow:0 5px 14px rgba(61,99,216,.3)}
/* 音频提示与"待点击"呼吸动画（2026-10-17 听力无声音修复） */
.audio-hint{font-size:13px;line-height:1.55;color:#B4552E;margin:-6px 0 12px;display:block}
.audio-hint:empty{display:none}
.play-btn.pulse{animation:audiopulse 1.4s ease-in-out infinite}
@keyframes audiopulse{0%,100%{transform:scale(1);box-shadow:0 5px 14px rgba(61,99,216,.3)}
  50%{transform:scale(1.045);box-shadow:0 8px 22px rgba(61,99,216,.45)}}
.feedback{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:12px 16px
  calc(14px + env(safe-area-inset-bottom));box-shadow:0 -6px 18px rgba(31,35,48,.08);display:none;z-index:30}
.feedback.show{display:block;animation:up .25s ease}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.feedback .fb-t{font-size:14.5px;font-weight:600;margin-bottom:3px}
.feedback .fb-e{font-size:12px;color:var(--sub);margin-bottom:10px}
.feedback.good .fb-t{color:var(--green)}.feedback.bad .fb-t{color:var(--red)}

/* 表格（后台） */
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);font-size:13px}
.tbl th{background:#FAFBFC;text-align:left;padding:10px;font-size:12px;color:var(--sub);font-weight:600;white-space:nowrap}
.tbl td{padding:10px;border-top:1px solid var(--line);vertical-align:middle}
.tbl tr:hover td{background:#FCFDFF}
.tbl .nowrap{white-space:nowrap}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* 漏斗 */
.funnel{display:flex;flex-direction:column;gap:8px}
.fn-row{display:flex;align-items:center;gap:10px}
.fn-row .fn-l{width:54px;font-size:12.5px;color:#4A5068;flex:0 0 auto}
.fn-bar{height:26px;border-radius:8px;background:var(--grad-blue);min-width:34px;display:flex;align-items:center;
  justify-content:flex-end;padding-right:9px;color:#fff;font-size:12px;font-weight:600;transition:width .5s}
.fn-row .fn-p{font-size:11.5px;color:var(--sub)}

/* 后台导航 */
.anav{display:flex;gap:6px;overflow-x:auto;padding:10px 0 4px;margin-bottom:4px}
.anav a{padding:7px 14px;border-radius:20px;background:#fff;border:1px solid var(--line);font-size:12.5px;
  white-space:nowrap;color:#4A5068;font-weight:600}
.anav a.on{background:var(--grad-blue);color:#fff;border-color:transparent}

/* 提示条 */
.note{background:#FFF8F2;border:1px solid #FFE0CB;border-radius:11px;padding:10px 12px;font-size:12.5px;color:#8A5A38;margin-bottom:12px}
.note.blue{background:#F3F7FF;border-color:#D9E6FF;color:#3A5A9B}
.note.green{background:#F2FCF7;border-color:#CCF0E0;color:#1D7A56}

/* 浮动操作条 */
.fabbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));display:flex;gap:10px;z-index:25}
.fabbar .btn{flex:1;padding:11px;font-size:14.5px}

/* toast */
#toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);background:rgba(31,35,48,.92);color:#fff;
  padding:10px 18px;border-radius:22px;font-size:13.5px;opacity:0;pointer-events:none;transition:.25s;z-index:9999;max-width:86%}
#toast.show{opacity:1;bottom:96px}

/* 空态 */
.empty{text-align:center;padding:34px 10px;color:var(--sub)}
.empty .em-i{font-size:34px;margin-bottom:8px}
.empty p{font-size:13px}

.center{text-align:center}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mb0{margin-bottom:0}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kv{display:flex;font-size:13px;padding:6px 0;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:none}
.kv .k{width:76px;color:var(--sub);flex:0 0 auto}
.kv .v{flex:1;color:#2A2F40}
.avatar-lg{width:56px;height:56px;border-radius:16px;background:var(--grad);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:22px;font-weight:700;flex:0 0 56px}

/* ============================================================
   响应式增强（手机 / 平板 / PC 三端自适应）
   追加于 /data/zq_student/app/static/app.css 末尾
   原则：保持移动优先不变 —— 小屏收紧留白与字号，大屏释放横向空间
   ============================================================ */

img,svg,canvas,video{max-width:100%;height:auto}

/* ---------- 手机（≤600px） ---------- */
@media (max-width:600px){
  .wrap,.wrap-wide{padding:0 12px 24px}
  .topbar{padding:12px 13px}
  .topbar b{font-size:15.5px}
  .card{padding:13px}
  .btn{padding:12px}
  .btn.sm{padding:9px 13px}
  .anav a{padding:9px 14px;font-size:12.5px}
  .dim-row .dn{width:56px}
  .stat b{font-size:18px}
  .stat span{font-size:10.5px}
  .tbl{font-size:12.5px}
  .tbl th,.tbl td{padding:9px 8px}
  .kv .k{width:66px}
  .tl{padding-left:22px}
  .tl-item .dot{left:-22px}
}

/* ---------- 超窄屏（≤380px） ---------- */
@media (max-width:380px){
  .wrap,.wrap-wide{padding:0 10px 22px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .hero .lv{font-size:25px}
  .hero{padding:17px}
  .qstem{font-size:16px}
  .opt{padding:12px 13px;font-size:14.5px}
  .btn-row{gap:8px}
  .avatar-lg{width:48px;height:48px;font-size:19px;flex:0 0 48px}
}

/* ---------- 平板与笔记本（≥900px）：表单页轻微加宽，改善阅读 ---------- */
@media (min-width:900px){
  .wrap{max-width:560px}
  .wrap-wide{max-width:940px}
}

/* ---------- 大屏 PC（≥1200px）：后台页释放横向空间 ---------- */
@media (min-width:1200px){
  .wrap{max-width:600px}
  .wrap-wide{max-width:1160px}
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}

/* ---------- 答题页 / 底部固定操作条：平板以上约束阅读宽度（原为全屏铺满） ----------
   注：用 margin-left 归位而非 transform —— 保留 .feedback 的 up 动画（动画同样使用 transform） */
@media (min-width:700px){
  .qwrap{max-width:640px;margin:0 auto;padding-top:18px}
  .fabbar,.feedback{left:50%;right:auto;width:640px;margin-left:-320px;
    border-left:1px solid var(--line);border-right:1px solid var(--line);
    border-radius:14px 14px 0 0}
}

/* ==========================================================================
   功能介绍隐藏（2026-10-03）
   需求：界面上不再展示「流程说明 / 卖点介绍」类文案。
   作用域：仅 .intro-hide（index.html、exam.html 的 hero 副标题）。
   刻意不动 report.html / welcome.html 的 .sub —— 那是学员编号与 CEFR 数据。
   ========================================================================== */
.intro-hide{display:none !important}

/* ==========================================================================
   Apple 风格化 · 白底简洁版（2026-10-03 · 学员中心）
   ------------------------------------------------------------------
   设计取舍（与上一版的差别，务必留意）：
     · **保留彩色顶栏**（橙/蓝/绿渐变）。上一版把顶栏改成灰白毛玻璃，
       结果品牌识别丢失、整页发闷 —— 顶栏是本系统的品牌锚点，不能动。
     · **不做暗色模式**。需求明确只要白底，故全部页面恒定浅色。
     · 只在「细节质感」上向 Apple 靠拢：更淡的影、更大的圆角、
       发丝级边框、系统字体栈与光学字重、spring 缓动。

   做法：只在文件末尾追加，不改上方任何一行原规则，删本段即回滚。
   ========================================================================== */

/* ---- 1. 字体：系统栈 + 光学字重（Apple 的字距与渲染质感） ---- */
body{
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1;
}
h1,h2,h3,.topbar b,.qstem,.card h3{letter-spacing:-.02em;font-weight:600}

/* ---- 2. 背景转纯白（Apple 官网同款浅灰白，更干净） ---- */
body{background:#F5F5F7}

/* ---- 3. 顶栏：保留品牌色，仅把投影从「同色重影」改为「中性淡影」 ----
   原 .topbar 的 box-shadow 是 rgba(255,107,53,.25) 这类同色投影，
   在白底上会显脏。改为中性黑淡影，色彩保留、质感变干净。 */
.topbar{
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.06);
  padding:13px 16px;
}
.topbar.blue{box-shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.06)}
.topbar.green{box-shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.06)}

/* ---- 4. 卡片：发丝边框 + 双层极淡影 + 大圆角 ---- */
.card{
  border:1px solid rgba(0,0,0,.05);
  border-radius:20px;
  box-shadow:0 1px 2px rgba(0,0,0,.03), 0 4px 14px rgba(0,0,0,.04);
}

/* ---- 5. 按钮：重投影改淡影，按压反馈用 Apple 式微缩放 ---- */
.btn{
  border-radius:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(242,107,58,.15);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .25s,filter .2s;
}
.btn.blue{box-shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(61,99,216,.15)}
.btn.green{box-shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(22,169,123,.15)}
.btn.ghost{border:1px solid rgba(0,0,0,.08);box-shadow:none}
.btn:active{transform:scale(.985)}

/* ---- 6. 输入框：纯白底 + 淡边 + Apple 式外扩聚焦环 ---- */
input[type=text],input[type=tel],input[type=date],input[type=number],select,textarea{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  transition:border-color .2s,box-shadow .2s;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary-2);
  box-shadow:0 0 0 3.5px rgba(255,154,86,.18);   /* 外扩淡环，非硬描边 */
}

/* ---- 7. 圆角统一加大：标签/胶囊/选项全改连续圆角 ---- */
.tag{border-radius:100px;font-weight:500}
.anav a{border-radius:100px;font-weight:500;transition:background .25s,color .25s}
.seg span,.chips span{border-radius:100px;transition:background .2s,border-color .2s,color .2s}
.opt{border-radius:16px;transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .2s,background .2s}
.opt:active{transform:scale(.99)}
.play-btn{border-radius:100px;box-shadow:0 1px 2px rgba(0,0,0,.05), 0 5px 16px rgba(61,99,216,.16)}

/* ---- 8. 统计块 / 表格 / 结果大卡 ---- */
.stat{border:1px solid rgba(0,0,0,.05);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.stat b{font-weight:600;letter-spacing:-.02em}
.hero{border-radius:24px;box-shadow:0 2px 6px rgba(0,0,0,.05), 0 12px 36px rgba(242,107,58,.14)}
.tbl{border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.03), 0 4px 14px rgba(0,0,0,.04)}
.tbl th{background:#FAFAFC}
.tbl td{border-color:rgba(0,0,0,.05)}
.tbl tr:hover td{background:#FCFCFD}

/* ---- 9. 浮层：白色 + 淡影 + 背景模糊 ---- */
.fabbar,.feedback{background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 -1px 20px rgba(0,0,0,.05)}
.fabbar{border-top:1px solid rgba(0,0,0,.06)}
.feedback{border-top:1px solid rgba(0,0,0,.06)}
#toast{background:rgba(29,29,31,.88);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-radius:100px;box-shadow:0 4px 24px rgba(0,0,0,.16)}

/* ---- 10. 列表与时间线：分隔线改发丝级 ---- */
.row,.kv{border-color:rgba(0,0,0,.05)}
.tl:before{background:rgba(0,0,0,.06)}
.row .av{border-radius:13px}
.avatar-lg{border-radius:18px}
.tl-item .tl-c{background:#FAFAFC;border-radius:12px}

/* 测评中心卡片 */
.assess-card{padding:15px;margin-bottom:12px}
.ac-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ac-icon{width:40px;height:40px;border-radius:12px;background:#FFF1E9;color:#FF6B35;display:flex;
  align-items:center;justify-content:center;font-size:21px;flex:0 0 40px}
.ac-title{font-size:16px;font-weight:700;flex:1}
.ac-sub{font-size:12.5px;color:var(--sub);margin-bottom:8px}
.ac-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:11.5px;color:#3A3F52;margin-bottom:6px}
.ac-meta span{background:#FAFBFC;border:1px solid var(--line);border-radius:8px;padding:3px 9px}
.ac-levels{font-size:11.5px;color:var(--sub);line-height:1.7}
.assess-card .btn.full{width:100%;display:block;text-align:center}

/* ---------- 听后说（qtype=speaking，听说环节） ---------- */
.speakbox{margin-top:14px;padding:18px 16px;border:1.5px dashed #C9D4E8;border-radius:14px;text-align:center;background:#F8FAFF}
.sp-state{font-size:13px;color:#4A5068}
button.mic{margin:12px auto 4px;display:block;width:74px;height:74px;border-radius:50%;border:0;font-size:30px;
  background:linear-gradient(135deg,#5B8DF8,#3D63D8);color:#fff;cursor:pointer;box-shadow:0 6px 18px rgba(61,99,216,.35)}
button.mic.on{background:linear-gradient(135deg,#F5576C,#E8413C);animation:micpulse 1s infinite}
@keyframes micpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.sp-heard{min-height:22px;font-size:14.5px;color:#1F2937;font-weight:700;margin-top:6px}
.sp-acts{margin-top:10px}
.sp-acts .btn{width:auto;display:inline-block}

/* ---------- 开放填空（qtype=input，剑桥 Flyers P6 等） ---------- */
.inputbox{margin-top:14px;display:flex;gap:10px;justify-content:center}
.txtans{width:200px;padding:12px 14px;font-size:17px;border:2px solid #C9D4E8;border-radius:12px;text-align:center;outline:none;background:#fff}
.txtans:focus{border-color:#5B8DF8;box-shadow:0 0 0 3px rgba(91,141,248,.15)}
#btnGo{padding:12px 26px;border-radius:12px}