/* ============================================================
   PTE Practice Studio 主题 — 9it 同款干净风格（全站版）
   浅灰底 + 白卡片 + 深蓝侧栏 + 靛蓝主色 + 青色点缀
   覆盖在原主题之上（需在原有 <style> 之后加载）
   设计基准：pte.au.9it.com.au（DM Sans/Noto Sans SC、
   #17213b 侧栏、#536dfd 主色、#70e1c4 点缀、18px 圆角柔影卡片）
   ============================================================ */

/* DM Sans / Noto Sans SC — 用系统字体替代，避免 Google Fonts 阻塞渲染 */

:root {
  --color-bg: #f5f7fb;
  --color-surface: #ffffff;
  --color-elevated: #ffffff;
  --color-primary: #536dfd;
  --color-primary-hover: #4059e8;
  --color-primary-soft: #e9edff;
  --color-teal: #70e1c4;
  --color-text: #17213b;
  --color-text-body: #26314a;
  --color-text-secondary: #65708a;
  --color-text-tertiary: #93a1be;
  --color-border: #e8ebf2;
  --color-border-input: #d8dfec;
  --color-border-light: #eff1f8;
  --color-separator: #eceef6;
  --studio-sidebar-bg: #17213b;
  --studio-sidebar-hover: #293653;
  --studio-sidebar-text: #c1c9da;
  --studio-sidebar-dim: #93a1be;
  --studio-shadow-card: 0 12px 40px rgba(28, 43, 76, .08);
  --studio-shadow-sm: 0 1px 3px rgba(15, 23, 42, .05), 0 1px 2px rgba(15, 23, 42, .03);
}

/* ---------- 全局：字体 + 浅灰底 + 去掉粒子/噪点背景 ---------- */
body {
  background: var(--color-bg) !important;
  color: var(--color-text);
  font-family: "DM Sans", "Noto Sans SC", -apple-system, "PingFang SC", sans-serif !important;
}
body::before, body::after { display: none !important; }

/* ---------- 标题区：去玻璃感，小平滑 ---------- */
.header {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding-top: 6px;
}
.header h1,
.header .logo-text,
.header .title {
  background: none !important;
  -webkit-text-fill-color: var(--color-text) !important;
  color: var(--color-text) !important;
  text-shadow: none !important;
  letter-spacing: -0.02em;
}
.header .subtitle,
#headerSubtitle {
  color: var(--color-text-secondary) !important;
  text-shadow: none !important;
}

/* ---------- 卡片：白底圆角柔影 ---------- */
.card,
.stat-chip,
.question-item,
.fib-card,
.wm-settings-card,
.admin-card,
.batch-bar,
.fav-q-item,
.fib-list-item,
.wm-search-results,
.wm-player,
.wm-now-playing,
.vocab-panel,
.xj-answer,
.fib-answer-panel,
.fib-passage-wrap {
  background: #ffffff !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--studio-shadow-sm) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--color-text-body);
}
.card:hover { box-shadow: var(--studio-shadow-card) !important; }

/* 首页英雄卡：紫粉渐变 → 9it 深蓝 + 青点缀 */
.card-hero {
  background: linear-gradient(135deg, #17213b 0%, #293653 100%) !important;
  border: none !important;
  border-radius: 18px !important;
  box-shadow: var(--studio-shadow-card) !important;
}
.card-hero .card-title,
.card-hero .card-subtitle { color: #fff !important; }
.card-hero .card-subtitle { color: var(--studio-sidebar-dim) !important; }

/* 卡片左边条变体：柔和化 */
.card-highlight, .card-success, .card-warning, .card-danger, .card-info, .card-purple {
  border-left-width: 4px !important;
}

/* ---------- 按钮：全部去渐变去高光，扁平化 ---------- */
.btn { border-radius: 9px !important; box-shadow: none !important; font-weight: 600 !important; }
.btn::after, .btn::before { display: none !important; }
.btn-primary, .btn.btn-primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-primary:hover { background: var(--color-primary-hover) !important; }
.btn-success, .btn.btn-success {
  background: #22a06b !important; border-color: #22a06b !important;
  color: #fff !important; box-shadow: none !important;
}
.btn-warning, .btn.btn-warning {
  background: #f59e0b !important; border-color: #f59e0b !important;
  color: #fff !important; box-shadow: none !important;
}
.btn-danger, .btn.btn-danger {
  background: #ef5b67 !important; border-color: #ef5b67 !important;
  color: #fff !important; box-shadow: none !important;
}
.btn-purple, .btn.btn-purple {
  background: var(--color-primary) !important; border-color: var(--color-primary) !important;
  color: #fff !important; box-shadow: none !important;
}
.btn-outline, .btn-ghost {
  background: #ffffff !important;
  border: 1px solid var(--color-border-input) !important;
  color: #49566e !important;
}
.btn-outline:hover, .btn-ghost:hover { border-color: var(--color-primary) !important; color: var(--color-primary) !important; }
.btn-icon {
  background: var(--color-primary-soft) !important;
  border: 1px solid var(--color-border-input) !important;
  color: var(--color-primary) !important;
  box-shadow: none !important;
}

/* ---------- 输入框 / 搜索框 ---------- */
input[type="text"], input[type="password"], input[type="number"], textarea, select {
  background: #ffffff !important;
  border: 1px solid var(--color-border-input) !important;
  border-radius: 9px !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-soft) !important;
  outline: none !important;
}
.search-box {
  background: #ffffff !important;
  border: 1px solid var(--color-border-input) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}
.search-box:focus-within { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px var(--color-primary-soft) !important; }

/* ---------- 筛选药丸 ---------- */
.filter-pill {
  background: #ffffff !important;
  border: 1px solid var(--color-border-input) !important;
  color: #65708a !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.filter-pill.active, .filter-pill.active:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ---------- 标签 ---------- */
.tag { border-radius: 6px !important; font-weight: 600 !important; }
.tag-primary { background: var(--color-primary-soft) !important; color: var(--color-primary-hover) !important; }
.tag-success { background: #e9f8f4 !important; color: #16735f !important; }
.tag-warning { background: #fff5e8 !important; color: #a25c06 !important; }
.tag-danger  { background: #ffe1e4 !important; color: #bf3144 !important; }
.tag-info, .tag-default { background: #f5f7fb !important; color: #65708a !important; }

/* ---------- 进度条 ---------- */
.progress-track, .xj-progress-track, .fib-progress-track {
  background: #edf0f2 !important;
  border-radius: 99px !important;
}
.progress-fill, .progress-fill.primary { background: var(--color-primary) !important; }
.progress-fill.success { background: #22a06b !important; }
.progress-fill.warning { background: #f59e0b !important; }

/* ---------- Toast / 弹窗 ---------- */
.toast { background: #17213b !important; border-radius: 10px !important; }
.toast-success { background: #22a06b !important; }
.toast-warning { background: #f59e0b !important; }
.modal-overlay { background: rgba(15, 23, 42, .45) !important; backdrop-filter: blur(2px); }
.modal {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .18) !important;
  color: var(--color-text-body) !important;
}
.modal h3 { color: var(--color-text) !important; }

/* ---------- 登录页 / 编辑弹窗 ---------- */
#loginOverlay {
  background: #f5f7fb !important;
  backdrop-filter: none !important;
}
.login-box {
  background: #ffffff !important;
  border-radius: 18px !important;
  box-shadow: var(--studio-shadow-card) !important;
  border: 1px solid var(--color-border) !important;
}
.login-box .logo { color: var(--color-text) !important; }
.login-box h2 { color: var(--color-text) !important; }
.login-box .subtitle { color: var(--color-text-secondary) !important; }
.login-btn {
  background: var(--color-primary) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}
.login-btn:hover { background: var(--color-primary-hover) !important; }
.offline-btn {
  background: #ffffff !important;
  border: 1px solid var(--color-border-input) !important;
  color: #49566e !important;
  border-radius: 9px !important;
}
#editModal .edit-box {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .18) !important;
}
.edit-save-btn { background: var(--color-primary) !important; border-radius: 9px !important; box-shadow: none !important; }
.edit-reset-btn { background: #f59e0b !important; border-radius: 9px !important; box-shadow: none !important; }
.edit-cancel-btn { background: #f5f7fb !important; color: #49566e !important; border-radius: 9px !important; box-shadow: none !important; }

/* ---------- 管理后台 ---------- */
.admin-header {
  background: #17213b !important;
  box-shadow: none !important;
}
.admin-btn-primary { background: var(--color-primary) !important; box-shadow: none !important; }
.admin-btn-success { background: #22a06b !important; box-shadow: none !important; }
.admin-btn-danger  { background: #ef5b67 !important; box-shadow: none !important; }
.admin-btn-warning { background: #f59e0b !important; box-shadow: none !important; }
.pw-item {
  background: #ffffff !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 12px !important;
}
.pw-badge.active { background: #e9f8f4 !important; color: #16735f !important; }
.pw-badge.inactive, .pw-badge.expired { background: #f5f7fb !important; color: #93a1be !important; }

/* ---------- 评分面板头部：窄宽换行 + 给重做按钮让位 ---------- */
.spk-inline-score { position: relative; }
.spk-inline-score-header { flex-wrap: wrap; gap: 12px 20px; padding-right: 96px; }
.spk-inline-score-time, .spk-inline-score-note { flex: 1 1 100%; }

/* ---------- 准备倒计时内联在录音虚线框里 ---------- */
.spk-prep-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 14px;
  color: var(--color-text-secondary);
  padding: 6px 4px;
}

/* ---------- 移动端底部导航：白底简洁 ---------- */
.bottom-nav {
  background: #ffffff !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 -2px 16px rgba(15, 23, 42, .06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nav-item { color: var(--color-text-tertiary) !important; }
.nav-item.active { color: var(--color-primary) !important; }

/* ★ 防挤压保险（2026-08-14）：任何环境下导航文字都不许逐字竖排。
   曾出现旧缓存/内嵌 webview 把侧栏挤窄后「落地页」一字一行的问题，
   即使布局被异常挤压，文字也只许溢出、不许竖排。 */
.bottom-nav .nav-item { white-space: nowrap !important; }
.bottom-nav .nav-item .nav-icon { flex: none !important; }
.bottom-nav::before, .bottom-nav::after { white-space: nowrap !important; }

/* ============================================================
   WFD 训练页（xj-*）：9it 练习卡风格
   ============================================================ */
.xj-btn.primary, .fib-btn.primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  box-shadow: none !important;
}
.xj-btn.primary:hover, .fib-btn.primary:hover { background: var(--color-primary-hover) !important; }
.xj-btn.green, .fib-btn.green {
  background: #22a06b !important;
  border-color: #22a06b !important;
  box-shadow: none !important;
}
.xj-btn, .fib-btn { background: #ffffff; border-color: var(--color-border-input); border-radius: 9px !important; box-shadow: none !important; }
.xj-btn::after, .fib-btn::after { display: none !important; }

.xj-play-btn {
  background: var(--color-primary-soft) !important;
  border: 2px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  box-shadow: none !important;
}
.xj-play-btn:hover, .xj-play-btn.playing {
  background: var(--color-primary) !important;
  color: #fff !important;
}
.xj-icon-btn, .fib-icon-btn {
  background: #ffffff !important;
  border: 1px solid var(--color-border-input) !important;
  color: #65708a !important;
  box-shadow: none !important;
}
.xj-icon-btn:hover, .fib-icon-btn:hover { border-color: var(--color-primary) !important; color: var(--color-primary) !important; }
.xj-jump button {
  background: var(--color-primary) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}
.xj-input {
  border: 1px solid var(--color-border-input) !important;
  border-radius: 11px !important;
  background: #ffffff !important;
}
.xj-input:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px var(--color-primary-soft) !important; }
.xj-progress-fill { background: #22a06b !important; }
.xj-show-text-btn {
  background: #ffffff !important;
  border: 1px solid var(--color-border-input) !important;
  color: #65708a !important;
  box-shadow: none !important;
}
.xj-show-text-btn.on { background: #fff5e8 !important; border-color: #f59e0b !important; color: #a25c06 !important; }
.xj-compare { border-radius: 11px !important; }
.xj-compare.ok { background: #e9f8f4 !important; }
.xj-compare.err { background: #ffe1e4 !important; }

/* 本题设置面板：小米橙 → 9it 中性 */
.xj-qset-btn, .xj-qset-btn.on {
  background: #ffffff !important;
  border: 1px solid var(--color-border-input) !important;
  color: #65708a !important;
  box-shadow: none !important;
}
.xj-qset-btn.on { border-color: var(--color-primary) !important; color: var(--color-primary) !important; }
.xj-qsettings-panel {
  background: #ffffff !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--studio-shadow-card) !important;
}
.xj-qsettings-apply-all {
  background: var(--color-primary) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}
.xj-qsettings-reset {
  background: #ffffff !important;
  border: 1px solid var(--color-border-input) !important;
  color: #65708a !important;
  border-radius: 9px !important;
}

/* 旧版音频/听写组件（若仍在用） */
.audio-btn {
  background: var(--color-primary) !important;
  box-shadow: none !important;
}
.audio-btn.playing { background: var(--color-primary-hover) !important; }
.dict-input { background: #ffffff !important; border-color: var(--color-border-input) !important; }
.answer-box { background: #f5f7fb !important; border-radius: 11px !important; }

/* 阶段徽标：柔和药丸 */
.phase-badge, .xj-badge, .fib-badge { border-radius: 999px !important; }

/* ============================================================
   随身听（wm-*）：紫渐变 → 9it 白卡 + 靛蓝
   ============================================================ */
.wm-header {
  background: #17213b !important;
  border-radius: 18px !important;
  box-shadow: var(--studio-shadow-card) !important;
}
.wm-header .wm-sub { color: var(--studio-sidebar-dim) !important; }
.wm-player.playing { border-color: var(--color-primary) !important; }
.wm-ring-fg { stroke: var(--color-primary) !important; }
.wm-ctrl-btn {
  background: #f5f7fb !important;
  border: none !important;
  color: #49566e !important;
  box-shadow: none !important;
}
.wm-ctrl-btn.primary, .wm-ctrl-btn.main {
  background: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.wm-ctrl-btn.primary:hover { background: var(--color-primary-hover) !important; }
.wm-now-playing { background: #f5f7fb !important; }
.wm-interval-bar { background: var(--color-primary-soft) !important; border-radius: 11px !important; }
.wm-settings-card .card-title { color: var(--color-text) !important; }

/* ============================================================
   收藏夹（fav-*）
   ============================================================ */
.fav-tab { color: var(--color-text-secondary) !important; }
.fav-tab.active { color: var(--color-primary) !important; border-bottom-color: var(--color-primary) !important; }
.fav-q-item { border-radius: 12px !important; }
.fav-q-num { background: #f5f7fb !important; color: #65708a !important; }
.fav-q-num.mastered { background: #e9f8f4 !important; color: #16735f !important; }
.fav-q-num.learning { background: #fff5e8 !important; color: #a25c06 !important; }
.fav-detail-btn {
  background: #ffffff !important;
  border: 1px solid var(--color-border-input) !important;
  color: #49566e !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}

/* ============================================================
   FIB（fib-* / fibd-*）
   ============================================================ */
.fib-play-btn {
  background: var(--color-primary-soft) !important;
  border: 2px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  box-shadow: none !important;
}
.fib-play-btn:hover, .fib-play-btn.playing { background: var(--color-primary) !important; color: #fff !important; }
.fib-option {
  border: 1px solid var(--color-border-input) !important;
  background: #ffffff !important;
  color: #35415b !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.fib-option:hover, .fib-option.selected {
  border-color: var(--color-primary) !important;
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-hover) !important;
}
.fib-options-pool { background: #f5f7fb !important; border-radius: 11px !important; }
.fib-result.ok { background: #e9f8f4 !important; color: #16735f !important; border-radius: 11px !important; }
.fib-result.err { background: #ffe1e4 !important; color: #bf3144 !important; border-radius: 11px !important; }
.fib-trans { background: var(--color-primary-soft) !important; border-radius: 11px !important; }
.fib-subtab.active { color: var(--color-primary) !important; border-bottom-color: var(--color-primary) !important; }
.fib-list-num { background: #f5f7fb !important; color: #65708a !important; }
.vocab-item .vocab-word { color: var(--color-primary-hover) !important; }
.vocab-btn.on { background: var(--color-primary-soft) !important; color: var(--color-primary) !important; }

/* ============================================================
   SST 编辑器
   ============================================================ */
.sst-editor {
  background: #ffffff !important;
  border: 1px solid var(--color-border-input) !important;
  border-radius: 11px !important;
  color: var(--color-text-body) !important;
}
.sst-editor:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px var(--color-primary-soft) !important; }
.sst-toolbar-btn {
  background: #ffffff !important;
  border: 1px solid var(--color-border-input) !important;
  color: #49566e !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.sst-toolbar-btn.active { background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: #fff !important; }
.sst-toolbar-btn.active-orange { background: #f59e0b !important; border-color: #f59e0b !important; color: #fff !important; }

/* ============================================================
   题库列表 / 熟悉度
   ============================================================ */
.question-item { border-radius: 12px !important; }
.question-item.multi-select.selected { border-color: var(--color-primary) !important; }
.q-num { background: #f5f7fb !important; color: #65708a !important; border-radius: 8px !important; }
.q-num.mastered { background: #e9f8f4 !important; color: #16735f !important; }
.q-num.learning { background: #fff5e8 !important; color: #a25c06 !important; }
.fam-dot { box-shadow: none !important; }
.logout-btn {
  background: #ffffff !important;
  border: 1px solid #ef5b67 !important;
  color: #ef5b67 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}

/* 设置页 */
.setting-row select { border-radius: 9px !important; }

/* 空状态 / 通关 */
.empty-state .icon { filter: none !important; }
.complete-celebrate { background: #ffffff !important; border-radius: 18px !important; }

/* ============================================================
   口语页（spk-*）：主色统一到 9it 靛蓝
   ============================================================ */
.spk-app { background: var(--color-bg) !important; }
.spk-logo-icon {
  background: #17213b !important;
  border-radius: 10px !important;
}
.spk-type-tab.active, .spk-mode-btn.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.spk-filter-chip.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.spk-filter-chip.active * { color: #fff !important; }
.spk-submit-btn { background: #22a06b !important; border-radius: 9px !important; box-shadow: none !important; }
.spk-bar-btn-primary { background: var(--color-primary) !important; border-radius: 9px !important; box-shadow: none !important; }
.spk-page-btn.active { background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: #fff !important; }
.spk-word.spk-highlight { background: var(--color-primary-soft) !important; color: var(--color-primary-hover) !important; }
.spk-recorder-section {
  background: #f5f8ff !important;
  border-radius: 13px !important;
}
.spk-rec-action-btn-primary { background: var(--color-primary) !important; box-shadow: none !important; }
.spk-clinic-sync-btn { background: var(--color-primary) !important; box-shadow: none !important; }

/* ---------- 猩际风格评分面板（保留布局，主色已统一） ---------- */
.spk-xj-card { position: relative; }
.spk-xj-title {
  font-size: 15px; font-weight: 700; color: var(--color-text);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px; padding-right: 90px;
}
.spk-xj-ver {
  font-size: 11px; font-weight: 600; color: #16735f;
  background: #e9f8f4; border: 1px solid #b3e5d4;
  border-radius: 999px; padding: 2px 8px;
}
.spk-xj-fbk {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12px; color: var(--color-text-secondary);
}
.spk-xj-fbk-opt {
  padding: 2px 12px; border: 1px solid var(--color-border-input); border-radius: 999px;
  cursor: pointer; color: #475569; background: #fff; user-select: none;
}
.spk-xj-fbk-opt:hover { border-color: var(--color-primary); color: var(--color-primary); }
.spk-xj-fbk-opt.on { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.spk-xj-fbk-tip { color: #16a34a; font-size: 11px; }
.spk-xj-sec {
  margin-top: 12px; background: #ffffff;
  border: 1px solid var(--color-border-light); border-radius: 12px; padding: 12px 14px;
}
.spk-xj-sec-title { font-size: 14px; font-weight: 700; color: var(--color-text); margin-bottom: 6px; }
.spk-xj-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 4px 0; font-size: 12px;
}
.spk-xj-bar-label { width: 60px; flex: none; color: #475569; }
.spk-xj-bar-track { flex: 1; height: 8px; background: #edf0f2; border-radius: 999px; overflow: hidden; }
.spk-xj-bar-fill { height: 100%; border-radius: 999px; transition: width .4s; }
.spk-xj-bar-val { width: 42px; flex: none; text-align: right; font-weight: 600; color: var(--color-text); }
.spk-xj-bar-note { flex-basis: 100%; font-size: 11px; color: #b45309; padding-left: 70px; }
.spk-xj-legend { display: flex; gap: 14px; font-size: 12px; color: #475569; margin-bottom: 8px; }
.spk-xj-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.spk-xj-dot-good { background: #22d3b6; }
.spk-xj-dot-bad { background: #ff6b6b; }
.spk-xj-more { margin-top: 12px; font-size: 12px; color: #475569; }
.spk-xj-more summary { cursor: pointer; color: var(--color-text-secondary); font-weight: 600; padding: 4px 0; }
.spk-xj-more[open] summary { margin-bottom: 6px; }

/* ===== 音频问题详细分析（熊老师义诊规则库，2026-08-10）===== */
.spk-issues-sub { font-size: 11px; font-weight: 500; color: var(--color-text-secondary); margin-left: 8px; }
.spk-issue {
  border: 1px solid var(--color-border-light); border-left-width: 3px; border-radius: 10px;
  padding: 9px 12px; margin-top: 8px; background: #fff;
}
.spk-issue-high { border-left-color: #ff6b6b; background: #fff8f8; }
.spk-issue-mid { border-left-color: #f5c542; background: #fffdf5; }
.spk-issue-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spk-issue-badge { font-size: 11px; font-weight: 700; flex: none; }
.spk-issue-high .spk-issue-badge { color: #dc2626; }
.spk-issue-mid .spk-issue-badge { color: #b45309; }
.spk-issue-name { font-size: 13px; color: var(--color-text); }
.spk-issue-dim {
  margin-left: auto; font-size: 10px; color: var(--color-text-secondary);
  border: 1px solid var(--color-border-light); border-radius: 999px; padding: 1px 8px; background: #f8fafc;
}
.spk-issue-evidence { font-size: 12px; color: #475569; margin-top: 5px; }
.spk-issue-advice { font-size: 12px; color: var(--color-text); margin-top: 4px; line-height: 1.6; }
.spk-issue-ok { font-size: 12px; color: #16a34a; padding: 6px 0 2px; }
.spk-issues-metrics {
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--color-border-light);
  font-size: 11px; color: #64748b; line-height: 2;
}
.spk-issues-metric { display: inline-block; margin-right: 12px; white-space: nowrap; }
.spk-issues-metric i { font-style: normal; color: #94a3b8; }

/* ============================================================
   桌面端布局：底部导航变 9it 深蓝侧边栏
   ============================================================ */
@media (min-width: 900px) {
  .xj-train, .fib-train {
    margin: 0 !important;
    min-height: auto !important;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    box-shadow: var(--studio-shadow-card);
    overflow: hidden;
  }
  .xj-inner, .fib-inner { padding-top: 20px; }
}

@media (min-width: 900px) {
  body { padding-bottom: 0 !important; }

  .bottom-nav {
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    width: 240px !important;
    height: 100vh;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 28px 14px !important;
    background: var(--studio-sidebar-bg) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
  }
  /* 品牌区：9it 同款 PTE / PRACTICE STUDIO */
  .bottom-nav::before {
    content: "PTE";
    display: block;
    order: -2;
    color: var(--color-teal);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1px;
    padding: 2px 12px 0;
  }
  .bottom-nav::after {
    content: "PRACTICE STUDIO";
    display: block;
    order: -1;
    color: #5b6b85;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .22em;
    padding: 4px 12px 18px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }
  .bottom-nav .nav-item {
    flex: none !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 11px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--studio-sidebar-text) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-align: left;
  }
  .bottom-nav .nav-item .nav-icon {
    font-size: 16px;
    width: 22px;
    text-align: center;
    filter: grayscale(.3);
  }
  .bottom-nav .nav-item:hover {
    background: var(--studio-sidebar-hover) !important;
    color: #fff !important;
    transform: none !important;
  }
  .bottom-nav .nav-item.active {
    background: var(--studio-sidebar-hover) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--color-primary) !important;
  }
  .bottom-nav .nav-item.active .nav-icon { filter: none; }

  /* 内容区让位给侧边栏 */
  .container {
    max-width: 1500px !important;
    margin-left: calc(240px + 28px) !important;
    margin-right: 28px !important;
    padding: 30px 0 60px !important;
  }
}

/* ---------- 宽屏：评分面板挪到右侧栏 ---------- */
@media (min-width: 1360px) {
  .spk-q-card { overflow: visible; }
  .spk-q-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 20px;
  }
  .spk-q-body > * { grid-column: 1; min-width: 0; }
  .spk-q-body > .spk-score-panel {
    grid-column: 2;
    grid-row: 1 / span 99;
    width: 400px;
    margin-top: 0;
    align-self: start;
    position: sticky;
    top: 16px;
  }
}

/* ---------- play.html 分享页：主色统一为 9it（仅 play.html 用 --accent，不影响主站） ---------- */
:root {
  --accent: #536dfd;
  --accent-dark: #4059e8;
}
.spinner { border-color: rgba(83,109,253,0.2); border-top-color: var(--accent); }