/* ==========================================================================
   site.css — v2 前台全站样式（移植 web/app uni.scss token + 各页 scoped 样式）
   移动优先；桌面端由 .app-page 限宽居中。rpx→px 按 2:1 换算（750rpx=375px）。
   ========================================================================== */

/* ===== 设计 token ===== */
:root {
  --brand: #1a4f8b;
  --brand-dark: #123a6b;
  --brand-light: #eef3fa;
  --brand-gradient: linear-gradient(135deg, #1a4f8b, #2d6cb5);

  /* 与 PC 端同源的设计 token（深蓝 + 金铜）：配色方案对齐，navy/gold 供点缀复用 */
  --navy-900: #0a1f3c;
  --navy-800: #0e2a52;
  --navy-700: #123a6b;
  --gold: #c8a45c;
  --gold-deep: #a67c34;
  --gold-light: #f0e2c4;
  --gold-gradient: linear-gradient(135deg, #d9b877, #b8873c);

  --success: #00a870;
  --warning: #fa8c16;
  --danger: #f53f3f;

  --text-title: #14243d;
  --text-main: #2f3a4a;
  --text-sub: #5f6b7a;
  --text-tip: #98a2b0;

  --bg-page: #f4f6f9;
  --bg-card: #ffffff;
  --border: #e8ecf2;
  --divider: #f0f2f6;

  --font-tag: 11px;
  --font-tip: 12px;
  --font-sub: 13px;
  --font-body: 15px;
  --font-title: 17px;
  --font-head: 20px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-round: 999px;

  --shadow-card: 0 2px 10px rgba(16, 42, 80, 0.06);
  --gap: 12px;

  --app-head-h: 44px;
  --app-footer-h: 82px;
  --head-bg: linear-gradient(135deg, #1a4f8b, #2d6cb5);
  --icon-color: #1a4f8b;
}

/* ===== 基础 ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-page);
  font-size: var(--font-body);
  color: var(--text-main);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; border: 0; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
/* hidden 属性会被作者样式的 display 覆盖（如 .btn-primary{display:block}、.remove-btn{display:inline-block}、.mi-menu-item{display:flex}），
   统一用 !important 确保 JS 设为 hidden 的元素真正隐藏：practice/play 的「移出/提交答案」按钮、mine 的「绑定微信」入口等 */
[hidden] { display: none !important; }

/* ===== 页面骨架（AppPage） ===== */
.app-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.app-page.fill { height: 100vh; height: 100dvh; }
/* 无全站头部的专注流程页（layout.php header=false：答题/考试链路）：
   nav-spacer 自带的安全区上内边距随之消失，改由页面容器补上，避免内容顶进刘海/状态栏 */
.app-page.no-head { padding-top: env(safe-area-inset-top); }
/* 主体区：flex 基础值；fill 模式下锁死高度并内部滚动（仅给过场页用；带版权栏的页不要用 fill，否则内容会在 footer 上沿被裁） */
.app-body {
  flex: 1 0 auto;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px var(--gap) 2px;
}
.app-body.plain { padding: 0; }
.app-page.fill .app-body { flex: 1; overflow-y: auto; }
.page-title {
  position: relative;
  margin: 10px 0 20px;
  padding-bottom: 8px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-title);
  letter-spacing: 1px;
}
.page-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-gradient);
}
.app-body.plain .page-title { margin: 22px var(--gap) 20px; }

/* ===== 头部（AppHeader）：随页面滚动，不固定定位 ===== */
.nav-head {
  position: relative;
  z-index: 100;
  background: var(--head-bg);
  padding-top: env(safe-area-inset-top);
}
.nav-inner {
  height: var(--app-head-h);
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gap);
}
.nav-brand { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* 平台名前的机构图标：不参与压缩（标题过长时只让 .nav-title 省略号截断） */
.nav-brand .icon { display: block; flex-shrink: 0; }
.nav-title {
  color: #fff;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 6px 4px;
}
.nav-menu-text { color: #fff; font-size: 16px; }
/* 头部不再固定定位后已入正常文档流，原等高占位块不再需要（保留安全区上边距由 .nav-head 自身承担） */
.nav-spacer {
  display: none;
}

/* ===== 导航抽屉（NavDrawer，两层滑出版） ===== */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.28s;
}
.drawer.open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.drawer-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.drawer.open .drawer-mask { opacity: 1; }
.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 65%;
  max-width: 300px;
  background: #336ca6;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.drawer.open .drawer-panel { transform: translateX(0); }
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--gap);
  border-bottom: 1px solid #2c5d8f;
}
.drawer-title { font-size: var(--font-title); color: #b6c7da; }
.drawer-x {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 4px;
}
.drawer-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.drawer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--gap);
  border-bottom: 1px solid #2c5d8f;
  font-size: var(--font-body);
  color: #fff;
}
.drawer-item:active, .drawer-item:hover { background: rgba(255, 255, 255, 0.12); }
.drawer-item.active { background: rgba(255, 255, 255, 0.18); }
.drawer-item span { flex: 1; min-width: 0; }
.drawer-item .icon { flex-shrink: 0; }
/* 第一层可点分类行：整行可点，末尾箭头提示有二级（对齐 H5 onTop→openSub） */
.drawer-item.has-sub { cursor: pointer; user-select: none; }
/* ===== 第二层抽屉（覆盖第一层右滑出；与一级同底色 #336ca6，靠 sub-mask 压暗一级区分层级） ===== */
.sub-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.sub-mask.open { opacity: 1; pointer-events: auto; }
/* 二级比一级窄（一级 65%/300px），右对齐滑出后一级在左侧露出一条加深竖边 */
.sub-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 55%;
  max-width: 240px;
  background: #336ca6;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.sub-panel.open { transform: translateX(0); }
/* 「返回」行：略深底色突出可回退（对齐 H5 sub-back） */
.drawer-item.sub-back { background: rgba(0, 0, 0, 0.12); cursor: pointer; }

/* ===== 底部版权栏（AppFooter） ===== */
/* 文案后台可配（备案号 / 联系方式），行数不固定，故高度只保底、内容超出时整页滚动兜住 */
.footer {
  min-height: var(--app-footer-h);
  height: auto;
  background: var(--head-bg);
  padding: 14px var(--gap) calc(14px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.footer-info { color: rgba(255, 255, 255, 0.75); font-size: var(--font-sub);}
.footer-copy { color: rgba(255, 255, 255, 0.75); font-size: var(--font-tag); }
/* 备案号 / 联系方式：居中成组，窄屏自然换行 */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--font-tag);
  text-align: center;
}
.footer a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }

/* ===== 全局共享（App.vue） ===== */
.section {
  padding: 14px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin: 0 0 16px 0;
}
.section-title {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-title);
}
.section-more {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  font-size: var(--font-sub);
  font-weight: 400;
  color: var(--brand);
}
/* ===== 首页四大板块：标题移出至卡片外上方（section-home 作用域，仅首页，不影响其他复用 .section 的页） ===== */
.section.section-home {
  margin: 0 0 18px 0;
  padding: 0;
  background: none;
  border-radius: 0;
}
.section-home .section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 2px 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-title);
}
/* 标题前的图标收进圆角浅底内，与卡片拉开层次 */
.section-home .section-ico {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 卡片仅包裹列表内容（标题已外移） */
.section-home .section-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 6px 14px;
}
/* 板块底部「更多」：卡片内通栏居中，顶部细分隔线 */
.section-home .sec-card-more {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  margin: 4px 0 10px 0; padding: 11px 0 3px; 
  font-size: var(--font-sub); color: var(--brand);
}
.tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  line-height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-round);
  font-size: var(--font-tag);
  box-sizing: border-box;
}
.tag-brand { background: var(--brand-light); color: var(--brand); }
.tag-warning { background: #fff3e8; color: var(--warning); }
.tag-success { background: #e6f7f0; color: var(--success); }
.tag-danger { background: #ffece8; color: var(--danger); }
.tag-gray { background: #f2f3f5; color: var(--text-tip); }
/* 智能练习（练习记录台账 type=7）：与首页入口图标 .ico-smart 同紫系，与其余五个类别区分 */
.tag-smart { background: #f5ebff; color: #8a2be2; }
/* 平台公共内容标记（架构优化方案 §5.5）：与后台「公共」蓝 Tag 同一色系，学员在两个端看到的是同一种蓝。
   做成描边款而不是复用 .tag-brand —— 报名卡上 .tag-brand 已被「培训类型」占着，
   两个实心蓝并排会被读成同一类信息；描边一眼可辨「这是来源标记，不是分类」。 */
.tag-public { background: #fff; color: var(--brand); border: 1px solid #b3cdff; }
.empty {
  padding: 30px 0;
  text-align: center;
  font-size: var(--font-sub);
  color: var(--text-tip);
}
/* 入口参数不合法时的退路（practice-play.js 注入）：同行按钮不撑满宽度 */
.empty .btn-primary { display: inline-block; width: auto; margin-top: 14px; padding: 0 22px; text-decoration: none; }
.btn-primary {
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: linear-gradient(135deg, #316ad3, #1eb0e7);
  color: #ffffff;
  font-size: 14px;
  border-radius: var(--radius-md);
  border: none;
  padding: 0;
}
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

/* ===== 富文本直出（RichHtml） ===== */
.rich { font-size: var(--font-body); line-height: 1.8; color: var(--text-main); word-break: break-word; }
.rich img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.rich table { max-width: 100%; border-collapse: collapse; overflow-x: auto; display: block; }
.rich td, .rich th { border: 1px solid var(--border); padding: 6px 8px; font-size: var(--font-sub); }
.rich p { margin: 0 0 10px; }
.rich h1, .rich h2, .rich h3, .rich h4 { color: var(--text-title); margin: 14px 0 8px; }
.rich a { color: var(--brand); text-decoration: underline; }
.rich video, .rich iframe { max-width: 100%; }

/* ===== 首页 ===== */
.banner {
  position: relative;
  /* 高度不再写死 150px：改由图片自身比例撑高（见下方 .banner-slide img）。
     原先固定高 + object-fit: cover 会把图按高度裁切，上传比例不是 2.5:1 就丢边。 */
  margin: 0 0 18px 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
/* 移动端横滑：竖直滚动交给浏览器，水平手势留给 JS 轮播（否则横滑会被原生滚动吞掉或触发 touchcancel，表现为“滑不动”） */
.banner, .banner-track, .banner-slide, .banner-slide a, .banner-slide img { touch-action: pan-y; }
/* align-items: center——多张图比例不一致时，track 高取最高那张，矮图居中而不是被拉伸/顶对齐留白 */
.banner-track { display: flex; align-items: center; transition: transform 0.35s ease; }
.banner-track.dragging { transition: none; } /* 拖拽中关闭过渡，实时跟手 */
.banner-slide { flex: 0 0 100%; }
.banner-slide img { width: 100%; height: auto; display: block; -webkit-user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* 桌面端拖拽光标：整块轮播可按住左右拖动切换（移动端无鼠标，自动忽略 cursor） */
.banner { cursor: grab; }
.banner-slide a { cursor: inherit; }            /* 链接区继承抓手，暗示可拖拽而非仅点击 */
.banner.grabbing, .banner.grabbing .banner-slide a { cursor: grabbing; }
.banner-dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
}
.banner-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); }
.banner-dot.on { background: #fff; width: 14px; border-radius: 3px; }

.tiles { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px 0; }
.tile {
  width: calc((100% - 36px) / 4);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 10px 0 7px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tile-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile-label {
  margin-top: 6px;
  font-size: 1em;
  color: var(--text-main);
  text-align: center;
  padding: 0 2px;
}

.plan-row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--divider);
}
.plan-row:last-child { border-bottom: none; }
/* 站内搜索的培训班结果跳 /plans#plan-{id}：锚中的那张卡描一圈品牌色，长列表里一眼找到落脚点（只描边不改尺寸，避免:target 时跳动） */
.plan-row:target { border-radius: var(--radius-md); box-shadow: 0 0 0 2px var(--brand-light); }
/* 首页培训班缩略图：后台上传则标题左侧呈现，未上传完全不占位（视图侧不渲 <img>） */
.plan-thumb { flex: 0 0 auto; width: 96px; height: 62px; margin-right: 10px; object-fit: cover; border-radius: var(--radius-md); background: var(--bg-page); }
.plan-main { flex: 1; min-width: 0; }
.plan-name { font-size: var(--font-body); color: var(--text-title); }
.plan-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.plan-date { margin-top: 6px; color: var(--text-tip); font-size: var(--font-tag); }
/* ===== 首页「线上培训」板块：去缩略图，改用金铜渐变大序号 + 横线分割行（设计对齐 PC 端 --home 面板） =====
   作用域限 section-home：/plans 列表页、/study 学习中心仍复用 .plan-row/.plan-thumb 带缩略图，不受影响。 */
.section-home .plan-row { gap: 14px; padding: 15px 0; }
.section-home .plan-row:active .plan-name { color: var(--brand); }
/* 左侧金铜渐变大序号（两位补零、斜体）——设计体系将金铜色保留给「关键数字」，去图后以此为视觉锚点 */
.section-home .plan-no {
  flex: 0 0 auto; min-width: 34px; text-align: center;
  font-size: 26px; font-weight: 800; font-style: italic; line-height: 1;
  color: var(--gold-deep);
  background: var(--gold-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-home .plan-main { display: flex; flex-direction: column; gap: 6px; }
.section-home .plan-name { font-size: var(--font-body); font-weight: 600; line-height: 1.45; }
.section-home .plan-tags, .section-home .plan-date { margin-top: 0; }
/* 学时口径说明（学习中心 / 应学课程页列表上方常驻）：整块置底灰底，与下面的数据行拉开，
   免得被当成“又一条培训班信息”逐条读；文字由后端下发的系数拼成（1 学时 = N 分钟） */
.hours-note { margin: 0 0 10px; padding: 8px 10px; background: var(--bg-page); border-radius: var(--radius-md); color: var(--text-tip); font-size: var(--font-tip); line-height: 1.6; }

.practice-group { margin-bottom: 12px; }
.practice-group:last-child { margin-bottom: 0; }
/* 一级工种名：前置竖线 accent，手法同 /practice 的 .cat-block-title（flex + ::before）。
   但竖线尺寸不能照搬那一档的 4×16：本页字号只有 var(--font-sub)=13px，16px 的线会比文字还高；
   取 3×12 与同为 13px 标题的 .group-title 对齐（字号 13/17 配平后间隙也落在 6px）。 */
.practice-cat {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  font-size: var(--font-body);
  color:#334357;
  font-weight: bold;
  padding: 6px 0;
}
.practice-cat::before {
  content: '';
  flex: 0 0 auto;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--brand-gradient);
}
.practice-tags { display: flex; flex-wrap: wrap; gap:12px; }
.practice-tag {
  padding: 2px 10px;
  background: #ececff;
  color: #34375d;
  border-radius: var(--radius-round);
  font-size: 14px;
}

.rank-tabs { display: flex; gap: 6px; margin-left: auto; }
.rank-tab {
  font-size: var(--font-tag);
  color: var(--text-sub);
  background: var(--bg-page);
  border-radius: var(--radius-round);
  padding: 3px 11px;
  font-weight: 400;
  border: none;
}
.rank-tab.active { color: #fff; background: var(--brand); }
.rank-head { display: flex; align-items: center; padding: 4px 0; color: var(--text-tip); font-size: var(--font-tip); }
.rank-row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 14px;
}
.rank-row:last-child { border-bottom: none; }
.col-rank { width: 44px; flex-shrink: 0; display: flex; align-items: center; }
.col-name {
  flex: 1; min-width: 0; 
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.col-trade {
  width: 144px; flex-shrink: 0; 
  padding: 1px 6px; margin-right: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.col-score { width: 48px; flex-shrink: 0; text-align: right; }

.medal {
  width: 22px; height: 22px; line-height: 22px;
  text-align: center; border-radius: 50%;
  color: #fff; font-size: var(--font-tag); font-weight: 700;
}
.medal.m1 { background: linear-gradient(135deg, #ffd666, #f7b340); }
.medal.m2 { background: linear-gradient(135deg, #d6dbe4, #a8b0bf); }
.medal.m3 { background: linear-gradient(135deg, #e8b48a, #c98a52); }
.rank-num { color: var(--text-sub); font-size: var(--font-tip); width: 22px; text-align: center; }
.rank-foot {
  padding-top: 16px;
  margin-bottom: 10px;
  border-top: 1px solid var(--divider);
  color: var(--text-sub);
  font-size: var(--font-tip);
  text-align: center;
  cursor: pointer;
}

/* ===== 首页四大板块统一抬头（斜纹背景 + 居中大标题，对标「榜上有名」） ===== */
.section-rank { padding: 0; background: none; }
/* 抬头：使用设计参考的斜纹渐隐背景图（顶部浅蓝斜纹→底部白） */
.section-home .sec-banner {
  position: relative;
  text-align: center;
  padding: 18px 16px 30px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: #ffffff;
  overflow: hidden;
}
/* 抬头背景图独立用伪元素承载，便于单独调节透明度（当前 70%）。
   资源路径写成相对（相对本 CSS 文件所在的 /m/assets/ 解析）：移动端整站挂在 /m 下，
   CSS 里的 url() 不受 Site::prefixHtml 改写，若写绝对 /assets/ 会落到 PC 根资源而 404。 */
.section-home .sec-banner::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('rank-bg.png') no-repeat center / 100% 100%;
  opacity: 0.5;
}
/* margin 显式写为 h2 的 UA 默认值：首页首个板块改为 h1 后，与其余 h2 板块上下间距仍完全一致（h1 UA 默认 0.67em，不声明会缩 3px） */
.sec-banner-title { position: relative; z-index: 1; margin: 0.83em 0; font-size: 20px; font-weight:normal; letter-spacing: 3px; color: var(--text-title); }
.sec-banner-sub { position: relative; z-index: 1; margin-top: 12px; padding-top: 14px; font-size: var(--font-sub); color: var(--text-tip); }
/* 标题与描述之间的小横线（居中渐隐） */
.sec-banner-sub::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 40px; height: 2px; border-radius: 2px;
  background: var(--brand);
}
/* 「更多」置于抬头右上角，保持居中标题不受影响 */
.sec-banner-more {
  position: absolute; right: 12px; top: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 2px;
  font-size: var(--font-sub); color: var(--brand);
}
/* 卡片上提盖住抬头下半部（负外边距重叠） */
.section-home .sec-banner + .section-card { position: relative; margin-top: -16px; }
.section-rank .section-card.rank-card { padding: 0 14px 8px; }
/* 下划线式周/月榜 Tab（覆盖全局 pill 样式） */
.section-rank .rank-tabs { display: flex; margin: 0 -14px; border-bottom: 1px solid var(--divider); }
.section-rank .rank-tab {
  flex: 1 1 0; position: relative; margin-left: 0; padding: 13px 0;
  background: none; border: none; border-radius: 0;
  font-size: var(--font-body); font-weight: 600; color: var(--text-sub);
}
.section-rank .rank-tab.active { color: var(--text-title); background: none; }
.section-rank .rank-tab.active::after {
  content: ''; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%);
  width: 44px; height: 3px; border-radius: 2px; background: var(--danger);
}
/* 表头：品牌蓝 */
.section-rank .rank-head { padding: 10px 0 8px; color:#7a808b; font-size: var(--font-sub);}

/* 行：更宽松，姓名突出、成绩右对齐大号深色 */
.section-rank .rank-row { padding: 12px 0; }

/* 前三名奖牌图（数字已内嵌，隐藏文本） */
.section-rank .medal {
  display: inline-block; width: 26px; height: 30px;
  border-radius: 0; line-height: normal; font-size: 0; color: transparent;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.section-rank .medal.m1 { background-image: url('medal-1.png'); }
.section-rank .medal.m2 { background-image: url('medal-2.png'); }
.section-rank .medal.m3 { background-image: url('medal-3.png'); }
/* 第 4 名起：斜体加粗数字 */
.section-rank .rank-num { font-style: italic; font-weight: 700; font-size: 16px; color: var(--text-title); }

/* ===== 首页「机构动态」资讯条目（<a>/<span> 默认 inline，须块级化，否则垂直 margin/padding 失效、换行错位） ===== */
.notice-item {
  display: block;
  padding: 14px 2px;
  border-bottom: 1px solid var(--divider);
}
.notice-item:last-child { border-bottom: none; }
.notice-title { display: flex; align-items: flex-start; gap: 8px; }
/* 每条资讯前的品牌色小圆点，与首行文字视觉居中对齐 */
.notice-title::before {
  content: ''; flex: 0 0 auto; box-sizing: border-box;
  width: 6px; height: 6px; margin-top: 8px;
  border-radius: 50%; background: var(--brand);
}
.notice-title .top-tag { flex-shrink: 0; }
.notice-text {
  flex: 1; min-width: 0;
  font-size:1.1em; line-height: 1.5;
  color: var(--text-title);
}
.notice-meta {
  display: block;
  margin-top: 8px; padding-left: 14px;
  font-size: 0.9em; line-height: 1.4; color: var(--text-tip);
}
.notice-cat { font-style: normal; font-weight: 500; color: var(--brand); }

/* ===== 资讯列表 /list/{id} ===== */
.cat-summary {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 12px;
  margin-bottom: 18px;
  color: var(--text-sub);
  font-size: var(--font-sub);
  line-height: 1.6;
  box-shadow: var(--shadow-card);
}
.news-item {
  display: flex;
  gap: 10px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-card);
}
.news-cover {
  width: 100px;
  height: 70px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  background: var(--bg-page);
  object-fit: cover;
}
.news-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.news-title { font-size: var(--font-body); color: var(--text-title); line-height: 1.5; }
.news-title .top-tag { margin-right: 5px; vertical-align: middle; }
.news-summary {
  margin-top: 5px;
  color: var(--text-sub);
  font-size: var(--font-sub);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.news-meta { margin-top: auto; padding-top: 6px; color: var(--text-tip); font-size: var(--font-tag); }
.pager { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 14px 0; flex-wrap: wrap; }
.pager a, .pager .cur {
  min-width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  padding: 0 8px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: var(--font-sub);
  box-shadow: var(--shadow-card);
}
.pager a:hover { color: var(--brand); }
.pager .cur { background: var(--brand); color: #fff; font-weight: 600; }
.pager .disabled { color: var(--text-tip); opacity: 0.5; }

/* ===== 资讯详情 /news/{id}、单页 /page/{id} ===== */
.detail {
  background: var(--bg-card);
  margin: var(--gap);
  border-radius: var(--radius-lg);
  padding: 18px 14px;
  line-height: 1.8;
  font-size: var(--font-body);
  color: var(--text-main);
  box-shadow: var(--shadow-card);
}
.detail-title { font-size: var(--font-head); color: var(--text-title); line-height: 1.4; }
.detail-meta { margin-top: 8px; color: var(--text-tip); font-size: var(--font-tip); }
.detail-divider { height: 1px; background: var(--divider); margin: 14px 0; }
.detail-cover { width: 100%; border-radius: var(--radius-md); margin-bottom: 12px; }
.crumbs { margin: 10px 0; font-size: var(--font-tip); color: var(--text-tip); }
.crumbs a { color: var(--text-sub); }
.crumbs a:hover { color: var(--brand); }
/* 资讯/单页详情面包屑美化（仅 nav.crumbs；mine/study 的 div.crumbs 返回链接不受影响） */
nav.crumbs {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin: 18px var(--gap);
  font-size: 14px;
  line-height: 1.3;
  color: var(--text-tip);
}
nav.crumbs .crumb-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  color: var(--text-sub);
  text-decoration: none;
  transition: color .18s;
}
nav.crumbs .crumb-link:hover { color: var(--brand); }
nav.crumbs .crumb-sep {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--text-tip);
  opacity: .5;
}
nav.crumbs .crumb-cur {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-title);
  font-weight: 500;
}
nav.crumbs .icon { display: block; flex-shrink: 0; }

/* ===== 正文页「本栏目最新资讯」推荐卡片 ===== */
.rel-card {
  background: var(--bg-card);
  margin: 0 var(--gap) var(--gap);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-card);
}
.rel-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text-title);
}
/* 标题左侧竖条：与 .practice-cat 同一手法，保持全站小标题观感一致 */
.rel-card-title::before {
  content: '';
  flex: 0 0 auto;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--brand-gradient);
}
.rel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  font-size: var(--font-sub);
  color: var(--text-main);
  text-decoration: none;
  border-bottom: 1px solid var(--divider);
}
.rel-item:last-child { border-bottom: 0; }
.rel-dot { flex: 0 0 auto; width: 4px; height: 4px; border-radius: 50%; background: var(--brand); opacity: .5; }
.rel-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:1.1em;}
.rel-date { flex: 0 0 auto; color: var(--text-tip); font-size: var(--font-tip); }

/* ===== 公共站内搜索框（资讯列表页 / 正文页 / 单页 / 搜索结果页） ===== */
.searchbox-wrap {
  margin: 0 0 var(--gap);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: var(--shadow-card);
}
/* plain 布局（正文页/单页）无内边距，靠自身 margin 与相邻块边距合并取得统一间距 */
.app-body.plain .searchbox-wrap { margin: var(--gap); }
.searchbox { display: flex; align-items: center; gap: 8px; }
.searchbox-field { position: relative; flex: 1 1 auto; min-width: 0; }
.searchbox-field .icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tip);
  pointer-events: none;
}
/* 类名带 searchbox- 前缀：不叫 .search-input 是因为工种目录页（practice/index.php）已有同名类，
   且其规则在后、同特异度会覆盖本块（导致左内边距被刷掉、放大镜压字）*/
.searchbox-input {
  width: 100%;
  height: 44px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--bg-page);
  border: 1px solid transparent;
  border-radius: var(--radius-round);
  padding: 0 14px 0 34px;
  font-size: var(--font-body);
  color: var(--text-main);
  outline: none;
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}
.searchbox-input::placeholder { color: var(--text-tip); }
.searchbox-input:focus {
  background: var(--bg-card);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}
/* 与 .btn-primary 同档高度（44px），胶囊按钮与输入框同高，整块观感与卡片统一 */
.search-btn {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 20px;
  border: none;
  border-radius: var(--radius-round);
  background: var(--brand-gradient);
  color: #ffffff;
  font-size: var(--font-body);
  cursor: pointer;
  transition: filter .18s, transform .12s;
}
.search-btn:hover { filter: brightness(1.05); }
.search-btn:active { transform: scale(.98); }

/* ===== 搜索结果页：统计 / 引导 / 空结果 / 栏目入口 / 关键词高亮 ===== */
.search-stat { margin: 0 0 10px; color: var(--text-tip); font-size: var(--font-sub); }
.search-stat em { font-style: normal; font-weight: 600; color: var(--brand); }
.search-guide { margin: 0 0 10px; color: var(--text-sub); font-size: var(--font-sub); line-height: 1.6; }
.search-tips { margin: -8px 0 10px; text-align: center; color: var(--text-tip); font-size: var(--font-tip); }
/* 站内 a 默认继承色（看不见链接），补一个低干扰的品牌色文字链 */
.search-tips a { margin-left: 4px; color: var(--brand); text-decoration: none; }
.search-tips a:hover { text-decoration: underline; }
.search-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 10px; }
.search-cats-label { color: var(--text-tip); font-size: var(--font-tip); }
.search-cat {
  padding: 4px 12px;
  border-radius: var(--radius-round);
  background: var(--bg-page);
  color: var(--text-sub);
  font-size: var(--font-tip);
  text-decoration: none;
}
.search-cat:hover { color: var(--brand); background: var(--brand-light); }
.kw-hl { font-style: normal; font-weight: 600; color: var(--brand); }

/* ===== 站内搜索结果页：分类芯片 + 分区结果 ===== */
/* 芯片同时干两件事：切检索范围 + 当场回答「哪一类有货」，所以计数就写在芯片里 */
.sr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.sr-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: var(--radius-round);
  background: var(--bg-card);
  color: var(--text-sub);
  font-size: var(--font-sub);
  text-decoration: none;
  box-shadow: var(--shadow-card);
}
.sr-chip em { font-style: normal; font-size: var(--font-tag); color: var(--text-tip); }
.sr-chip:hover { color: var(--brand); }
.sr-chip.cur { background: var(--brand); color: #ffffff; }
.sr-chip.cur em { color: rgba(255, 255, 255, .85); }

.sr-block { margin: 0 0 16px; }
.sr-block-title {
  display: flex;
  align-items: center;
  gap: 6px;
  /* h2 默认字号与上下外边距都比分区标题大一档，必须盖掉，否则四类分区会把首屏吃光 */
  margin: 0 0 8px;
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text-title);
}
.sr-block-ico {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--brand-light);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sr-block-num { font-style: normal; font-weight: 400; font-size: var(--font-tip); color: var(--text-tip); }
.sr-block-more { margin-left: auto; font-weight: 400; font-size: var(--font-sub); color: var(--brand); text-decoration: none; }
.sr-block-more:hover { text-decoration: underline; }

/* 四类结果共用这一套行结构（控制器已把四类归一化成同一套字段），版式与资讯列表同观感 */
.sr-item {
  display: flex;
  gap: 10px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-card);
  text-decoration: none;
}
.sr-cover {
  width: 100px;
  height: 70px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  background: var(--bg-page);
  object-fit: cover;
}
.sr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sr-title { font-size: var(--font-body); color: var(--text-title); line-height: 1.5; }
.sr-title .tag { margin-left: 5px; vertical-align: middle; }
.sr-desc {
  margin-top: 5px;
  color: var(--text-sub);
  font-size: var(--font-sub);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.sr-meta { margin-top: auto; padding-top: 6px; color: var(--text-tip); font-size: var(--font-tag); }

/* ===== 证书查询 ===== */
.panel { background: var(--bg-card); border-radius: var(--radius-lg); padding: 24px 12px; box-shadow: var(--shadow-card);margin-bottom:18px; }
.panel .tip { color: var(--text-sub); font-size: var(--font-sub); line-height: 1.6; }
.field { margin-top: 12px; }
.input {
  width: 100%;
  height: 44px;
  background: var(--bg-page);
  border: none;
  border-radius: var(--radius-md);
  padding: 0 12px;
  font-size: var(--font-body);
  color: var(--text-main);
  outline: none;
}
.input::placeholder { color: var(--text-tip); }
.result { margin-top: 12px; }
.card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 14px 12px; box-shadow: var(--shadow-card); margin-bottom:18px;}
.card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--divider);
}
.card-status { font-size: var(--font-title); font-weight: 600; }
.ok-text { color: var(--success); }
.bad-text { color: var(--danger); }
.kv-row { display: flex; padding: 9px 0; border-bottom: 1px solid var(--divider); }
.kv-row:last-child { border-bottom: none; }
.kv-row .k { width: 80px; flex-shrink: 0; color: var(--text-tip); font-size: var(--font-sub); }
.kv-row .v { flex: 1; min-width: 0; color: var(--text-main); font-size: var(--font-sub); }
.bad-tip { margin-top: 8px; color: var(--text-sub); font-size: var(--font-sub); line-height: 1.6; }
/* 验真卡的「平台统一模板」来源标记（架构优化方案 §5.5）：.card-head 是 flex，靠 auto 把它推到最右，
   与左侧「查验通过/已作废」结论分开读 —— 结论是这张证的真假，来源只是补充说明，两者不能混在一处。 */
.cq-pub-tag { margin-left: auto; flex-shrink: 0; }
/* 来源说明条：只在有标记时出现，紧贴 kv 区下方。用浅蓝底而非 .bad-tip 的纯文字，
   是为了让学员在扫一眼「发证机构是谁」时就能定位到它，而不是当成灰色脚注跳过。 */
.cq-pub-tip { margin-top: 8px; padding: 8px 10px; background: var(--brand-light); border-radius: var(--radius-md); color: var(--text-sub); font-size: var(--font-tip); line-height: 1.7; }
.cq-pub-tip b { color: var(--text-main); }

/* 电子证书证面（cert-query.js 用 fetch+blob 取回后就地插入，不走任何缓存） */
.cq-imgbox { margin-top: 10px; background: var(--bg-page); border-radius: var(--radius-md); padding: 8px; text-align: center; }
.cq-img { width: 100%; height: auto; border-radius: var(--radius-sm); }
.cq-img-tip, .cq-img-fail { padding: 14px 4px; color: var(--text-tip); font-size: var(--font-tag); line-height: 1.6; }
.cq-img-fail { color: var(--danger); }
/* 保存图片 / 下载 PDF：与 mine/certs 的 .cert-dl 同款胶囊，但结果卡里要占满一行好命中 */
.cq-actions { display: flex; gap: 8px; margin-top: 12px; }
.cq-btn { flex: 1; min-height: 44px; background: none; color: var(--brand); font-size: var(--font-sub); border: 1px solid var(--brand); border-radius: var(--radius-round); cursor: pointer; }
.cq-btn:disabled { color: var(--text-tip); border-color: var(--divider); }
/* 三选二的门槛使「姓名 + 身份证」这类不含编号的查询可能命中多条，结果区从单卡变成列表 */
.cq-result > .card + .card { margin-top: 10px; }
.cq-sum { margin-bottom: 8px; color: var(--text-sub); font-size: var(--font-sub); line-height: 1.6; }

/* ===== 登录页 ===== */
.login {
  /* 本页不用 fill（fill 会把 .app-body 变成内部滚动区，内容断在版权栏上沿，看着就像被 footer 盖住），
     改成与首页一致的整页滚动后父级高度不再确定，min-height:100% 会失效，
     故按视口高减去头部占位与版权栏；旧内核不认 dvh 时退回 vh（与 .app-page 的双写同套路） */
  min-height: calc(100vh - var(--app-head-h) - var(--app-footer-h));
  min-height: calc(100dvh - var(--app-head-h) - var(--app-footer-h));
  background: linear-gradient(180deg, var(--brand-light) 0%, var(--bg-page) 42%);
  padding: 20px 24px 24px;
  box-sizing: border-box;
}
.logo-area { display: flex; flex-direction: column; align-items: center; }
.logo-badge {
  width: 66px;
  height: 66px;
  margin-bottom: 14px;
  border-radius: 19px;
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 7px 17px rgba(22, 100, 255, 0.28);
}
.logo { font-size: 27px; font-weight: 700; color: var(--brand); text-align: center; letter-spacing: 2px; }
.slogan { margin-top: 7px; text-align: center; color: var(--text-tip); font-size: var(--font-sub); letter-spacing: 1px; }
.tabs { display: flex; margin: 28px 0 16px; border-bottom: 1px solid var(--border); }
.tab {
  flex: 1;
  text-align: center;
  padding-bottom: 10px;
  color: var(--text-tip);
  font-size: var(--font-body);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
}
.tab.active { color: var(--brand); font-weight: 600; border-bottom-color: var(--brand); }
.login-form { margin-top: 12px; }
.login-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 14px;
  margin-bottom: 12px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.login-field .input { flex: 1; height: 48px; background: transparent; padding: 0; }
.login-tip { color: var(--text-tip); font-size: var(--font-tip); margin-bottom: 16px; line-height: 1.6; }
.submit {
  display: block;
  width: 100%;
  margin-top: 12px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  background: var(--brand-gradient);
  color: #ffffff;
  font-size: var(--font-title);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: none;
  padding: 0;
}
.submit:disabled { opacity: 0.6; cursor: not-allowed; }
.agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
  font-size: var(--font-tip);
  color: var(--text-sub);
  gap: 2px;
}
.agreement label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.agreement input[type='checkbox'] { accent-color: var(--icon-color); }
.agreement .link { color: var(--brand); cursor: pointer; }
/* ----- 登录页·「微信登录」标签面（一键登录 / 扫码）与注册入口 ----- */
.wx-pane { padding-top: 0px; }
.wx-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; background: #07c160; color: #ffffff; font-size: var(--font-title); font-weight: 600; border: none; border-radius: var(--radius-md); cursor: pointer; }
.wx-btn:active { opacity: 0.9; }
.wx-hint { margin-top: 10px; text-align: center; color: var(--text-tip); font-size: var(--font-tip); line-height: 1.6; }
.wx-qr-panel { width: 100%; text-align: center; }
.wx-qr-title { font-size: var(--font-body); font-weight: 600; color: var(--text-title); margin-bottom: 12px; }
.wx-qr { min-height: 300px; max-height: 340px; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; }
.wx-qr iframe { width: 300px; height: 400px; border: 0; }
.wx-qr-loading { color: var(--text-tip); font-size: var(--font-tip); }
.wx-qr-tip { margin-top: 10px; color: var(--text-tip); font-size: var(--font-tip); }
.wx-qr-fallback { display: inline-block; margin-top: 12px; color: var(--brand); font-size: var(--font-tip); text-decoration: underline; }
/* 个人中心「扫码绑定」弹窗：二维码尺寸复用上方 .wx-qr（官方 iframe 为 300x400），仅补弹窗专属的状态行与关闭按钮 */
.mi-wxqr-box { max-height: 92vh; overflow: auto; align-items: center; text-align: center; }
.mi-wxqr-status { margin-top: 2px; font-size: var(--font-tip); color: var(--text-tip); line-height: 1.6; }
.mi-wxqr-status.fail { color: var(--danger); }
.mi-wxqr-close { margin-top: 14px; }
/* 身份归属冲突（错误码 11008）的就地申诉入口：说明行 + 「申请管理员处理」按钮（由 site.js mountConflictAppeal 注入） */
.appeal-box { display: block; margin-top: 12px; text-align: center; }
.appeal-tip { font-size: var(--font-tip); color: var(--danger); line-height: 1.6; text-align: left; margin-bottom: 10px; }
.btn-appeal { display: inline-block; padding: 7px 16px; font-size: var(--font-sub); color: var(--brand); background: none; border: 1px solid var(--brand); border-radius: 6px; cursor: pointer; }
.btn-appeal:disabled { cursor: default; opacity: 0.65; }
.btn-appeal.done { color: var(--text-tip); border-color: var(--border); }
/* 账号登录提交按钮下方「立即注册 / 返回登录」入口 */
.login-alt { margin-top: 14px; text-align: center; font-size: var(--font-sub); color: var(--text-sub); }
.login-alt .link { color: var(--brand); cursor: pointer; }
/* 桌面端登录内容居中限宽（720px 容器对表单/二维码偏宽，窄卡更聚焦） */
@media (min-width: 768px) {
  .login > * { width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; }
}
.mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agreement-box {
  width: 86%;
  max-width: 560px;
  max-height: 80vh;
  /* 弹层内容高于 max-height 时（矮屏手机、软键盘顶起视口、字段多的表单弹窗）：
     原先 overflow 为 visible，输入框与「保存」按钮会直接画到白卡之外的遮罩上。
     改为整卡内部滚动（与下方 .mi-wxqr-box 扫码弹窗同一口径），一处兼顾修改个人信息 /
     修改账号密码 / 完善个人资料三个表单弹层；协议查看类自带 .agreement-scroll 内层滚动，不受影响。
     overscroll-behavior 防惯性滚动穿透到背面的页面。 */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.agreement-title {
  font-size: var(--font-title);
  font-weight: 600;
  color: var(--text-title);
  text-align: center;
  margin-bottom: 12px;
}
.agreement-scroll { max-height: 55vh; overflow-y: auto; font-size: var(--font-sub); line-height: 1.7; }
.agreement-close { margin-top: 12px; height: 42px; line-height: 42px; }

/* ===== 学习中心/考前练习：培训班行箭头 + 必填资料门禁（ProfileGate，已上提到 site.js） ===== */
.plan-arrow { flex-shrink: 0; margin-left: 8px; }
.pg-meta { margin-bottom: 6px; text-align: center; color: var(--text-tip); font-size: var(--font-tip); }
.pg-label { font-size: var(--font-sub); color: var(--text-main); margin-bottom: 6px; }
/* 必填标：单星号太容易被忽略，改成「必填」二字的小字标（配下方 .mi-kv-need 同一橙阶） */
.pg-req { margin-left: 2px; color: var(--warning); font-size: var(--font-tag); }
.pg-tip { margin-top: 14px; color: var(--text-tip); font-size: var(--font-tip); line-height: 1.6; }
.pg-submit { margin-top: 16px; }
/* 锁定项的说明放框下而不是 placeholder：灰字占位会被读成“这里还没填”，与“已登记不可改”正好相反 */
.pg-locked { margin-top: 5px; color: var(--text-tip); font-size: var(--font-tag); line-height: 1.6; }
/* iOS Safari 上 disabled 输入框的字会被渲染成淡灰近乎不可读，故显式给色并抹掉透明度 */
.input:disabled { color: var(--text-tip); -webkit-text-fill-color: var(--text-tip); opacity: 1; cursor: not-allowed; }
/* 非门禁弹层（修改个人信息）的软退路：必填没补齐也能先离开，不让弹窗变成拦路杵 */
.pg-dismiss { display: block; width: 100%; margin-top: 10px; padding: 9px 0; background: none; border: none; border-radius: var(--radius-md); color: var(--text-tip); font-size: var(--font-sub); font-family: inherit; text-align: center; cursor: pointer; }
.pg-dismiss:hover { color: var(--brand); background: var(--brand-light); }
/* 弹层唯一退路：不再赶人退出登录，改为跳首页（原「无法填写？退出登录」） */
.pg-back-home { display: block; margin-top: 12px; text-align: center; color: var(--text-tip); font-size: var(--font-tip); text-decoration: none; }
.pg-back-home:hover { color: var(--brand); }

/* ===== 首页协议签署门禁（AgreementGate，复刻 H5 components/AgreementGate.vue） ===== */
.ag-title { margin-bottom: 0; }
.ag-meta { margin-top: 4px; text-align: center; color: var(--text-tip); font-size: var(--font-tip); }
.ag-content { margin: 12px 0; }
.ag-loading { color: var(--text-tip); text-align: center; padding: 20px 0; }
.ag-btns { display: flex; gap: 10px; }
.ag-btn {
  flex: 1; height: 42px; line-height: 42px; text-align: center;
  font-size: var(--font-body); font-weight: 600;
  border-radius: var(--radius-md); border: none; cursor: pointer;
}
.ag-btn.reject { background: #f5f6f8; color: #666; }
.ag-btn.agree { background: var(--brand); color: #fff; }
.ag-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.ag-tip { margin-top: 8px; text-align: center; color: var(--text-tip); font-size: var(--font-tip); }

/* ===== 课程详情（study/course） ===== */
.cd-head { margin: 0 0 16px 0; padding: 16px 14px; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.cd-title { font-size: var(--font-title); font-weight: 700; color: var(--text-title); line-height: 1.35; }
.cd-intro { margin-top: 8px; color: var(--text-sub); font-size: var(--font-sub); line-height: 1.6; }
.cd-meta { margin-top: 8px; color: var(--text-tip); font-size: var(--font-tip); }
.cd-face-tip { margin-top: 10px; background: #fff7e8; color: #d46b08; font-size: var(--font-tip); border-radius: var(--radius-sm); padding: 7px 9px; line-height: 1.5; }
.cd-mode-tip { margin-top: 10px; background: var(--brand-light); color: var(--brand); font-size: var(--font-tip); border-radius: var(--radius-sm); padding: 7px 9px; line-height: 1.5; }
/* 停学横幅：把边界说清——“详情可看、视频不可看”，不让人误以为整个培训班被关了（原因文案由后端下发） */
.cd-closed-tip { margin-top: 10px; background: #fff7e8; border: 1px solid #ffdbc0; color: #ad4e00; font-size: var(--font-tip); border-radius: var(--radius-sm); padding: 8px 10px; line-height: 1.6; }
/* 学时已达标常驻条：颜色与 .tag-success 同一对，保证「已完成」在全站是一种绿 */
.cd-done-tip {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px; background: #e6f7f0; border: 1px solid #b7e6d3; color: var(--success);
  font-size: var(--font-tip); border-radius: var(--radius-sm); padding: 8px 10px; line-height: 1.6;
}
.cd-chapter { font-size: var(--font-body); font-weight: 600; color: var(--text-sub); margin: 12px 0 4px; }
.cd-lesson { display: flex; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--divider); cursor: pointer; }
.cd-lesson:last-child { border-bottom: none; }
.cd-lesson.locked { opacity: 0.55; }
.cd-lesson-left { width: 70px; flex-shrink: 0; }
.cd-lesson-main { flex: 1; min-width: 0; }
.cd-lesson-name { font-size: var(--font-body); color: var(--text-main); }
.cd-lesson-meta { margin-top: 4px; color: var(--text-tip); font-size: var(--font-tag); }
.cd-lesson-arrow { margin-left: 8px; display: flex; align-items: center; flex-shrink: 0; }
.cd-ico { display: block; }

/* ===== 视频学习播放器（study/player） ===== */
.player-page { min-height: 100%; background: var(--bg-page); padding-bottom: var(--gap); }
.video-wrap { position: relative; width: 100%; background: #000; }
.video { width: 100%; aspect-ratio: 16 / 9; background: #000; display: block; }
.video.loading { display: flex; align-items: center; justify-content: center; color: #aaa; }
/* 培训班停学拦截止屏：不建 <video>，也不留一块黑幕让人以为在加载 */
.video.vp-closed { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; text-align: center; background: #12151a; color: #fff; }
.vp-closed-title { font-size: var(--font-title); font-weight: 600; }
.vp-closed-reason { font-size: var(--font-sub); color: #ffd591; line-height: 1.5; }
.vp-closed-tip { font-size: var(--font-tag); color: #9aa0a6; line-height: 1.6; }
.vp-closed-btn { display: inline-block; margin-top: 4px; padding: 7px 20px; border-radius: var(--radius-round); background: var(--brand); color: #fff; font-size: var(--font-sub); text-decoration: none; }
.vp-closed-btn:hover { background: var(--brand-dark); }
/* 培训班级不可学友好页：由 StudyController::player 服务端直出（此路径不加载 player.js，页面零学习类请求） */
.vp-ended { padding: var(--gap); }
.ve-hero { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #fa8c16, #d46b08); color: #fff; border-radius: var(--radius-lg); padding: 16px 14px; }
.ve-ico { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.ve-head { font-size: var(--font-title); font-weight: 600; line-height: 1.4; }
.ve-reason { margin-top: 10px; font-size: var(--font-sub); color: var(--text-sub); line-height: 1.6; }
.ve-note { margin-top: 6px; font-size: var(--font-tip); color: var(--text-tip); line-height: 1.7; }
.ve-card { margin-top: var(--gap); background: var(--bg-card); border-radius: var(--radius-lg); padding: 14px 12px; box-shadow: var(--shadow-card); }
.ve-card-title { font-size: var(--font-body); font-weight: 600; color: var(--text-title); margin-bottom: 8px; }
.ve-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--divider); font-size: var(--font-sub); }
.ve-row:last-child { border-bottom: none; }
.ve-k { width: 78px; flex-shrink: 0; color: var(--text-tip); }
.ve-v { flex: 1; min-width: 0; color: var(--text-main); word-break: break-word; }
.ve-actions { display: flex; gap: 10px; margin-top: var(--gap); }
.ve-btn { flex: 1; text-align: center; padding: 10px 0; border-radius: var(--radius-round); background: var(--brand); color: #fff; font-size: var(--font-body); text-decoration: none; }
.ve-btn.ghost { background: var(--bg-card); color: var(--text-sub); border: 1px solid var(--border); }
.video.sim {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2b3a67, #1a1a1a); color: #fff;
}
.sim-title { font-size: var(--font-title); font-weight: 600; }
.sim-tip { margin-top: 6px; font-size: var(--font-tag); color: #aaa; text-align: center; padding: 0 12px; }
.sim-btn { margin-top: 12px; background: var(--brand); border-radius: var(--radius-round); padding: 7px 24px; font-size: var(--font-body); cursor: pointer; }
.sim-bar { width: 86%; margin-top: 10px; }
.sim-bar input[type='range'] { width: 100%; accent-color: var(--icon-color); }
.sim-progress { margin-top: 8px; font-size: var(--font-tip); color: #ccc; }
.pl-idle-mask {
  position: absolute; inset: 0; z-index: 10; cursor: pointer;
  background: rgba(0, 0, 0, 0.72);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pl-idle-mask[hidden] { display: none; }
.pl-mask-text { color: #fff; font-size: var(--font-body); }
.pl-mask-btn { margin-top: 12px; background: var(--brand); color: #fff; border-radius: var(--radius-round); padding: 7px 24px; font-size: var(--font-body); }
.vp-info { background: var(--bg-card); margin: var(--gap); border-radius: var(--radius-lg); padding: 14px 12px; box-shadow: var(--shadow-card); }
/* 返回课程详情：信息卡顶部左对齐小链接，箭头 + 文案，与下方课时标题拉开一行 */
.vp-back { display: inline-flex; align-items: center; gap: 3px; margin-bottom: 10px; color: var(--brand); font-size: var(--font-sub); text-decoration: none; }
.vp-back:active { opacity: .55; }
.vp-back .icon { flex: none; }
.vp-lesson-name { font-size: var(--font-title); font-weight: 600; color: var(--text-title); }
/* 培训班级「您已完成学时要求」常驻条（与课程详情页 .cd-done-tip 同一对颜色） */
.vp-done {
  margin-top: 8px; background: #e6f7f0; border: 1px solid #b7e6d3; color: var(--success);
  font-size: var(--font-tip); border-radius: var(--radius-sm); padding: 7px 9px; line-height: 1.6;
}
.vp-done[hidden] { display: none; }
.vp-status { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; color: var(--text-sub); font-size: var(--font-tip); }
.vp-face-on { color: #d46b08; }
.vp-hb.ok { color: var(--success); }
.vp-hb.warn { color: var(--danger); }
.vp-rules { margin-top: 10px; color: var(--text-tip); font-size: var(--font-tip); line-height: 1.8; }
.vp-playlist { background: var(--bg-card); margin: 0 var(--gap) var(--gap); border-radius: var(--radius-lg); padding: 14px 12px; box-shadow: var(--shadow-card); }
.pl-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pl-title { font-size: var(--font-body); font-weight: 600; color: var(--text-title); }
.pl-auto { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.pl-auto-label { font-size: var(--font-tip); color: var(--text-sub); }
.pl-toggle { width: 36px; height: 20px; border-radius: 10px; background: #ddd; position: relative; transition: background 0.2s; }
.pl-toggle.on { background: var(--brand); }
.pl-toggle-dot { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.pl-toggle.on .pl-toggle-dot { transform: translateX(16px); }
.pl-group { margin-bottom: 8px; }
.pl-group-label { font-size: var(--font-tip); color: var(--text-tip); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--divider); }
.pl-item { display: flex; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--divider); cursor: pointer; }
.pl-item:last-child { border-bottom: none; }
.pl-item.active { background: var(--brand-light); margin: 0 -8px; padding: 9px 8px; border-radius: var(--radius-sm); }
.pl-item.done .pl-name { color: var(--text-tip); }
.pl-item.locked { opacity: 0.5; }
.pl-idx { width: 24px; text-align: center; flex-shrink: 0; font-size: var(--font-tip); }
.pl-playing { color: var(--brand); }
.pl-check { color: var(--success); }
.pl-lock { font-size: 10px; }
.pl-num { color: #ccc; }
.pl-info { flex: 1; min-width: 0; }
.pl-name { font-size: var(--font-body); color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-dur { font-size: var(--font-tag); color: var(--text-tip); margin-top: 2px; }
.pl-course { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--divider); cursor: pointer; }
.pl-course:last-child { border-bottom: none; }
.pl-course-info { flex: 1; min-width: 0; }
.pl-course-name { font-size: var(--font-body); font-weight: 500; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-course-meta { font-size: var(--font-tag); color: var(--text-tip); margin-top: 3px; }
.pl-course-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: 8px; }
.pl-course-bar { width: 50px; height: 4px; background: var(--divider); border-radius: var(--radius-round); overflow: hidden; }
.pl-course-fill { height: 100%; background: var(--brand-gradient); border-radius: var(--radius-round); }
.pl-course-pct { font-size: var(--font-tag); color: var(--brand); width: 30px; text-align: right; }

/* ===== 人脸核验面板（三期 D2，全屏遮罩，叠加在播放器之上） ===== */
.fc-panel {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
}
.fc-panel[hidden] { display: none; }
.fc-title { color: #fff; font-size: var(--font-head); font-weight: 600; margin-bottom: 18px; }
/* 取景框按 5:7 竖版（250×350），与 assets/face.js 的抓拍输出规格 CAPTURE_W×CAPTURE_H 一致：
   视频是 object-fit: cover，cover 对横画面正是「居中收两侧」，所以框里看到的就等于上传的那一片。
   两者要改一起改，否则就是「拍进来的人不在照片里」。 */
.fc-stage { position: relative; width: 250px; height: 350px; background: #1a1a1a; border-radius: var(--radius-lg); overflow: hidden; }
.fc-preview { position: absolute; inset: 0; }
.fc-preview video { width: 100%; height: 100%; object-fit: cover; }
.fc-guide {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 175px; height: 245px; border: 2px dashed rgba(255, 255, 255, 0.75);
  border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
  box-sizing: border-box; pointer-events: none;
}
.fc-tip { color: #ddd; font-size: var(--font-sub); text-align: center; margin-top: 18px; line-height: 1.6; max-width: 300px; }
.fc-shutter {
  margin-top: 22px; background: var(--brand-gradient); color: #fff;
  border-radius: var(--radius-round); padding: 11px 40px;
  font-size: var(--font-body); font-weight: 500; cursor: pointer;
}
.fc-shutter.busy { opacity: 0.6; pointer-events: none; }
.fc-sub { color: var(--text-tip); font-size: var(--font-tag); margin-top: 12px; }
.fc-sub[hidden] { display: none; }

/* ===== 考前练习：工种目录 ===== */
.search { margin-bottom: var(--gap); }
.search-input {
  width: 100%;
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius-md);
  padding: 9px 12px;
  font-size: var(--font-body);
  box-shadow: var(--shadow-card);
  outline: none;
}
.group { margin-bottom: 8px; }
.group-title { font-size: var(--font-sub); color: var(--text-tip); padding: 6px 4px; }
.trade-card {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 12px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
}
.trade-main { flex: 1; min-width: 0; }
.trade-name { font-size: var(--font-body); font-weight: 400; color: var(--text-title); }
.trade-meta { margin-top: 5px; color: var(--text-tip); font-size: var(--font-tip); display: flex; gap: 12px; }
.trade-meta .last { color: var(--brand); }
.trade-arrow { color: #ccc; font-size: 18px; margin-left: 8px; }
/* 一级分板块 + 二级分类（单栏，无左侧 Tab） */
.cat-block { margin-bottom: 18px; }
.cat-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-title);
  font-weight: 700;
  color: var(--text-title);
  letter-spacing: 0.5px;
  margin-top: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
}
.cat-block-title::before {
  content: '';
  flex: 0 0 auto;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--brand-gradient);
}
/* 二级分类小标题：前置竖线 accent，与一级板块标题形成层级对比 */
.cat-block .group-title { position: relative; padding-left: 10px; }
.cat-block .group-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--brand-gradient);
}

/* ===== 工种练习首页 ===== */
.trade-hero {
  background: var(--brand-gradient);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  color: #fff;
  margin-bottom: var(--gap);
  box-shadow: var(--shadow-card);
}
.trade-hero .trade-name { font-size: var(--font-title); font-weight: 700; color: #fff; }
.trade-hero .trade-meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--font-tip); opacity: 0.9; }
/* 工种练习首页：考试策略信息条（页标题横线下方的统计） */
.trade-strategy {
  display: flex; flex-wrap: wrap; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--divider); border-radius: var(--radius-lg);
  padding: 12px; margin: 0 var(--gap) 16px; box-shadow: var(--shadow-card);
}
.ts-item { flex: 1 1 0; min-width: 62px; text-align: center; }
/* T3.6 免费额度预告条：命中试练时置于考试策略条下方，弱提醒 + 内联购买引导 */
.quota-tip {
  background: var(--bg-card); border: 1px solid var(--divider); border-left: 2px solid var(--brand);border-right: 2px solid var(--brand);
  border-radius: var(--radius-lg); padding: 10px 12px; margin: 0 var(--gap) 16px;
  font-size: var(--font-body); color: var(--text-main);
}
.quota-tip b { color: var(--brand); }
.quota-tip .qt-buy { margin-left: 4px; color: var(--brand); font-weight: 600; text-decoration: none; }
/* 题库整理核对时间戳：置于考试策略条下方的一行弱提示，随服务器当前年月自动更新 */
.bank-stamp { margin: 0 var(--gap) 12px; font-size: var(--font-tip); color: var(--text-tip);text-align:center; }
.ts-val { font-size: var(--font-body); font-weight: 700; color: var(--brand); }
.ts-val.mute { color: var(--text-tip); font-weight: 600; }
.ts-lab { margin-top: 3px; font-size: var(--font-tip); color: var(--text-tip); }
.entry {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 12px;
  margin: 0 var(--gap) 16px;
  box-shadow: var(--shadow-card);
}
.entry.primary { border: 1px solid var(--brand); background: #f5f8ff; }
/* 模拟考试入口禁用态：无权限/本工种未配考试方案时由 practice.js 加 .is-disabled（盖过 .primary 品牌色，不可点） */
.entry.is-disabled { border-color: var(--line, #e5e7eb); background: #f2f3f5; opacity: 0.6; pointer-events: none; cursor: not-allowed; }
.entry.is-disabled .entry-name, .entry.is-disabled .entry-go { color: var(--text-tip) !important; }
/* 入口卡彩色图标（对齐参考图：渐变圆角块 + 白色字形，每入口专属色系） */
.entry-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
  color: #fff;
}
.entry-ico .icon { display: block; }
.ico-mock    { background: linear-gradient(135deg, #55c3ff, #2b7cff); box-shadow: 0 4px 10px rgba(43, 124, 255, .28); }
.ico-all     { background: linear-gradient(135deg, #8f9bff, #5763e8); box-shadow: 0 4px 10px rgba(87, 99, 232, .28); }
.ico-chapter { background: linear-gradient(135deg, #4fdcb1, #14b08a); box-shadow: 0 4px 10px rgba(20, 176, 138, .26); }
.ico-wrong   { background: linear-gradient(135deg, #ff9a5c, #ff5530); box-shadow: 0 4px 10px rgba(255, 85, 48, .26); }
.ico-marked  { background: linear-gradient(135deg, #ffc44d, #ff8a00); box-shadow: 0 4px 10px rgba(255, 138, 0, .26); }
.ico-easy    { background: linear-gradient(135deg, #ff7a7a, #f5222d); box-shadow: 0 4px 10px rgba(245, 34, 45, .26); }
/* 「智能练习」入口图标：现有六色渐变序列里未占用的紫系，与模拟考蓝/全面靛/章节绿/错题橙/标记金/易错红区分 */
.ico-smart   { background: linear-gradient(135deg, #d17bff, #8a2be2); box-shadow: 0 4px 10px rgba(138, 43, 226, .26); }
.entry-body { flex: 1; min-width: 0; }
/* 移动端练习入口字号优化：entry-name 15→16、entry-sub 12→13，整体阅读更舒适 */
.entry-name { font-size:1.1em; font-weight: 600; color: var(--text-title); display: flex; align-items: center; }
.entry.primary .entry-name { color: var(--brand); }
/* 工种详情页「模拟考试」卡片的【免费】标（开放/混合模式服务端渲染，仅该模式出现；auth 模式不渲染）——样式对齐 PC 端 */
.entry .entry-name .entry-free {
  margin-left: 8px; padding: 1px 8px; border-radius: var(--radius-round);
  font-size: var(--font-tag); font-weight: 600; color: #fff; background: var(--success); vertical-align: 2px;
}
.entry-sub { margin-top: 4px; color: var(--text-tip); font-size: 13px; }
.entry-go { color: var(--text-tip); font-size: 26px; line-height: 1; margin-left: 8px; flex-shrink: 0; }
.entry.primary .entry-go { color: var(--brand); font-weight: 600; }
.entry .badge {
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  border-radius: var(--radius-round);
  padding: 1px 6px;
  margin-left: 6px;
  font-weight: 400;
}
.entry .badge.star { background: var(--warning); }
/* 工种练习首页底部快捷链接（对齐 H5 practice/detail .links：练习记录 / 考试报告） */
.links { display: flex; justify-content: space-around; background: var(--bg-card); border-radius: var(--radius-lg); padding: 14px 0; margin: 4px var(--gap) var(--gap); box-shadow: var(--shadow-card); }
/* 底部快捷链接字号优化：13→15，与移动端触控标准对齐 */
.links .link { color: var(--brand); font-size: 15px; }

/* ===== 答题页（practice/play） ===== */
.play { padding: var(--gap) var(--gap) calc(60px + 12px); }
.play-title { margin-bottom: 8px; font-size: var(--font-title); font-weight: 700; color: var(--text-title); line-height: 1.35; word-break: break-all; }
.top-bar { display: flex; align-items: center; gap: 8px; margin-bottom: var(--gap); }
/* 退出按钮：危险色描边胶囊，突出可点（触控目标 ≥32px，按下/聚焦有反馈）；此前为灰色纯文本易被忽略 */
.quit { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px; border: 1px solid rgba(245, 63, 63, 0.35); border-radius: var(--radius-round); background: #ffece8; color: var(--danger); font-size: var(--font-sub); font-weight: 600; font-family: inherit; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.quit:active { background: var(--danger); border-color: var(--danger); color: #fff; }
.quit:focus-visible { outline: 2px solid rgba(245, 63, 63, 0.5); outline-offset: 1px; }
.progress-bar { flex: 1; height: 6px; background: #e5e8ee; border-radius: var(--radius-sm); overflow: hidden; }
.progress-fill { height: 100%; background: var(--brand-gradient); border-radius: var(--radius-sm); transition: width 0.2s ease; }
.progress-text { color: var(--brand); flex-shrink: 0;}
.q-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 12px; box-shadow: var(--shadow-card); }
.q-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.q-head-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.q-num, .q-type, .q-mark {
  flex-shrink: 0;
  height: 24px;
  line-height: 24px;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}
.q-num { min-width: 24px; padding: 0 8px; text-align: center; background: var(--brand); color: #fff; font-weight: 700; }
.q-type { padding: 0 10px; background: var(--brand-light); color: var(--brand); font-weight: 500; }
.q-mark { padding: 0 10px; background: #f2f3f5; color: #86909c; border: none; }
.q-mark.on { background: #fff3e8; color: var(--warning); font-weight: 600; }
.head-right { display: flex; align-items: center; gap: 8px; }
.extra { color: var(--danger); font-size: var(--font-tag); }
/* 错误率徽标（仅 scope=easy）：本机构全体学员在模拟考/结业考/智能练习上的练习错误率，三档着色 + 样本不足灰档 */
.q-rate {
  flex-shrink: 0;
  height: 24px;
  line-height: 24px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  font-size: var(--font-tag);
  font-weight: 600;
}
.q-rate.hi { background: #ffece8; color: var(--danger); }
.q-rate.mid { background: #fff7e8; color: var(--warning); }
.q-rate.lo { background: #e8f8ef; color: #00a870; }
.q-rate.low { background: #f2f3f5; color: #86909c; font-weight: 500; }
/* 统一友好空态（七个入口共用）：只替题卡内容，页头/进度条/底部按钮照常保留 */
.q-empty { padding: 26px 12px 30px; text-align: center; }
.qe-title { font-size: var(--font-head); font-weight: 700; color: var(--text-title); }
.qe-tip { margin-top: 8px; font-size: var(--font-sub); line-height: 1.7; color: var(--text-tip); }
.q-empty .btn-primary { margin-top: 16px; text-decoration: none; }
.resume-tip {
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--brand-light);
  color: var(--brand);
  font-size: var(--font-tip);
}
.remove-btn {
  display: inline-block;
  flex-shrink: 0;
  padding: 4px 12px;
  border: 1px solid #f3c1b7;
  border-radius: var(--radius-round);
  background: var(--bg-card);
  font-size: var(--font-tip);
  color: var(--danger);
  line-height: 1.4;
}
.q-stem { margin-bottom:17px; font-size: var(--font-body); line-height: 1.75; letter-spacing: 0.07em; font-weight: 600; color: var(--text-title);}
/* 含图题：内嵌插图按宽度自适应，避免大图撑破题卡（renderRich 注入的 <img>） */
.q-stem img, .option img { max-width: 100%; height: auto; display: block; margin: 8px 0; border-radius: var(--radius-sm); }
/* 题干/选项放行富文本标签后的排版归一：去块级子元素默认外边距；选项文本子项 flex 撑满可换行；表格细边框 */
.q-stem > :first-child { margin-top: 0; }
.q-stem > :last-child { margin-bottom: 0; }
.q-stem p { margin: 0 0 8px; }
.q-stem p:last-child { margin-bottom: 0; }
.option > span:not(.opt-letter) { flex: 1; min-width: 0; }
.option p, .option div, .option ul, .option ol, .option table, .option blockquote { margin: 0; }
.q-stem ul, .q-stem ol, .option ul, .option ol { margin: 4px 0; padding-left: 1.5em; }
.q-stem table, .option table { border-collapse: collapse; max-width: 100%; }
.q-stem td, .q-stem th, .option td, .option th { border: 1px solid var(--border); padding: 3px 6px; font-weight: 400; }
/* 题卡章节面包屑：点击打开答题卡「按章节」视图；该工种未建章节时整行不出（practice-play.js 控 hidden） */
.q-chapter {
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  color: var(--text-tip);
  font-size: var(--font-tip);
  line-height: 1.4;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.q-chapter::after { content: '›'; margin-left: 6px; }
.q-chapter + .q-stem { margin-top: 18px; }
.option {
  display: flex;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: var(--font-body);
  line-height: 1.5;
  cursor: pointer;
  letter-spacing: 0.07em;
}
.option.picked { border-color: var(--brand); background: var(--brand-light); }
.option.correct { border-color: var(--success); background: #e6f7f0; }
.option.wrong-pick { border-color: var(--danger); background: #ffece8; }
.opt-letter {
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  background: var(--bg-page);
  color: var(--text-sub);
  margin-right: 8px;
  flex-shrink: 0;
  font-weight: 600;
  font-size: var(--font-sub);
}
.q-btn { margin-top: 6px; }
.result-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; justify-content: flex-start; font-size:1em; font-weight: 600; margin-top: 14px; margin-bottom:14px;}
.result-line.right { color: var(--success); }
.result-line.wrong { color: var(--danger); }
.result-line.reveal { color: var(--success); justify-content: flex-start; }
.right-answer {color: var(--success); }
.analysis {
  margin-top: 6px;
  background: #f7f8fa;
  border-radius: var(--radius-sm);
  padding: 8px;
  color: #253f61;
  font-size:1em;
  line-height: 1.6;
}
/* 结果行与「查看解析」按钮同一行：左=qResult（回答对错+正确答案），右=按钮；解析正文在 qResult 内下方整宽换行 */
.q-result-bar { display: flex; align-items: center; }
.q-result-bar > #qResult { flex: 1; min-width: 0; }
.q-result-bar > .card-foot { flex-shrink: 0; margin-top: 0; }
.card-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.analysis-btn { border: 1px solid var(--brand); color: var(--brand); background: #fff; border-radius: var(--radius-sm); padding: 4px 12px; font-size: var(--font-tip); line-height: 1.4; cursor: pointer; }
.analysis-btn:active { background: #f0f4fa; }
.more { color: var(--text-tip); text-align: center; font-size: var(--font-tip); padding: 12px 0; }

/* 字号 4 档 */
.font-sm .q-stem { font-size: 14px; }
.font-sm .option { font-size: 12px; }
.font-md .q-stem { font-size: 16px; }
.font-md .option { font-size: 15px; }
.font-lg .q-stem { font-size: 18px; }
.font-lg .option { font-size: 16px; }
.font-xl .q-stem { font-size: 20px; }
.font-xl .option { font-size: 18px; }

/* 底部操作栏 */
.play-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  gap: 6px;
  background: var(--bg-card);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.04);
}
.play-footer .inner {
  display: flex;
  gap: 6px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
/* 底部操作栏按钮字号优化：13→15，高度 40→44 触控更友好 */
.fbtn {
  flex: 1;
  height: 44px;
  line-height: 44px;
  font-size: 15px;
  background: var(--bg-page);
  color: var(--text-main);
  border-radius: 6px;
  text-align: center;
  border: none;
  padding: 0;
  margin: 0;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.fbtn:active { background-color: #e6e8eb; transform: scale(0.97); }
.fbtn:disabled { opacity: 0.4; }
.card-btn {
  position: relative;
  background: var(--brand-light);
  color: var(--brand);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-btn .badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--danger);
  border-radius: var(--radius-round);
  padding: 0 3px;
}

/* 答题卡 Bottom Sheet */
.sheet-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 900; }
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 901;
  background: var(--bg-card);
  border-radius: 12px 12px 0 0;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  display: flex;
  flex-direction: column;
  max-height: 75vh;
  margin: 0 auto;
  max-width: 720px;
}
.sheet.show { transform: translateY(0); }
.sheet-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 6px; }
.sheet-title { font-size: var(--font-title); font-weight: 700; color: var(--text-title); }
.sheet-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-page);
  font-size: 14px;
  color: var(--text-sub);
  border: none;
}
.sheet-stats { display: flex; gap: 12px; padding: 4px 16px 10px; }
.stat { font-size: var(--font-tip); padding: 2px 8px; border-radius: var(--radius-sm); }
.s-answered { background: var(--brand-light); color: var(--brand); }
.s-unanswered { background: #fff3e8; color: var(--warning); }
.s-marked { background: #ffe8f0; color: #f5319d; }
.sheet-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 16px; }
.sheet-group { margin-bottom: 14px; }
.group-label { font-size: var(--font-sub); color: var(--text-main); font-weight: 600; margin-bottom: 8px; }
.group-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.grid-item {
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 6px;
  font-size: 12px;
  background: var(--bg-page);
  color: var(--text-sub);
  position: relative;
  border: none;
  padding: 0;
}
.grid-item.done { background: var(--brand-light); color: var(--brand); }
.grid-item.active { background: var(--brand); color: #fff; font-weight: 700; }
.grid-item.hasMark::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warning);
}
/* 答题卡分组视图切换（按题型 / 按章节）：仅该工种建过章节时由 JS 解除 hidden */
.sheet-seg {
  display: flex;
  gap: 4px;
  margin: 0 16px 10px;
  padding: 3px;
  background: var(--bg-page);
  border-radius: var(--radius-round);
}
.seg-btn {
  flex: 1;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: var(--font-tip);
  color: var(--text-sub);
  background: none;
  border: none;
  border-radius: var(--radius-round);
}
.seg-btn.on { background: var(--bg-card); color: var(--brand); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
/* 只刷本章提示条（纯前端视图过滤，点「看全部」退回） */
.sheet-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--brand-light);
  color: var(--brand);
  font-size: var(--font-tip);
}
.sheet-filter .filter-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-clear { flex-shrink: 0; background: none; border: none; color: var(--brand); font-size: var(--font-tip); padding: 0; }
/* 章节分组长清单：章级标题吸顶 + 节级小标题缩进，每组带「已答 m/n」与「只刷这里」 */
.sheet-group.ch { margin-bottom: 16px; }
.ch-label {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 0;
  background: var(--bg-card);
  font-size: var(--font-sub);
  font-weight: 600;
  color: var(--text-title);
}
.ch-label .ch-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 6px;
  padding-left: 10px;
  font-size: var(--font-tip);
  font-weight: 500;
  color: var(--text-tip);
}
.sub-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 10px;
  border-radius: 2px;
  background: var(--brand);
}
.grp-count { flex-shrink: 0; font-weight: 400; font-size: var(--font-tip); color: var(--text-tip); }
.group-more { margin-left: auto; flex-shrink: 0; background: none; border: none; color: var(--brand); font-size: var(--font-tip); padding: 2px 0; }
.sheet-font {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--divider);
}
.font-label { font-size: 14px; color: var(--text-main); font-weight: 600; }
.font-ctrl { display: flex; align-items: center; gap: 10px; }
.font-btn {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 5px 10px;
  background: var(--bg-page);
  border: none;
  border-radius: 5px;
  font-size: var(--font-sub);
  color: var(--text-main);
}
.font-btn.disabled { opacity: 0.35; }
.font-a-sm { font-size: 12px; font-weight: 700; }
.font-a-lg { font-size: 16px; font-weight: 700; }
.font-name { font-size: var(--font-tip); color: var(--text-sub); min-width: 30px; text-align: center; }
.sheet-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--divider);
}
.toggle {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: #d0d3d9;
  position: relative;
  transition: background-color 0.2s ease;
  border: none;
  padding: 0;
}
.toggle.on { background: var(--brand); }
.toggle-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}
.toggle.on .toggle-dot { transform: translateX(20px); }
.sheet-submit { padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--divider); }
.reset-btn {
  width: 100%;
  height: 44px;
  line-height: 44px;
  background: #ffece8;
  color: var(--danger);
  font-size: var(--font-title);
  font-weight: 600;
  border-radius: 22px;
  border: none;
}

/* 考试答题页（三期 D1）：头部倒计时 + 交卷按钮；题卡/选项/答题卡复用练习页样式 */
.exam-run { padding: 0 0 70px; }
.ex-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-card);
  padding: 10px 12px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}
/* 头部考试名复用 .play-title（与练习页同一样式）；卡片内 gap 已控间距，去掉标题自带下边距 */
.ex-head .play-title { margin-bottom: 0; }
.ex-head-meta { display: flex; justify-content: space-between; align-items: center; }
.ex-timer { font-size: var(--font-body); font-weight: 700; color: var(--brand); }
.ex-timer.danger { color: var(--danger); }
.ex-progress {
  font-size: var(--font-tip);
  color: var(--text-sub);
  background: var(--bg-page);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
}
.ex-bar { height: 5px; background: #eef0f3; border-radius: var(--radius-round); overflow: hidden; }
.ex-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4080ff, var(--brand));
  border-radius: var(--radius-round);
  transition: width 0.3s ease;
}
.multi-tip { color: var(--text-tip); font-size: var(--font-tag); text-align: center; margin-top: 6px; }
.ex-submit {
  width: 100%;
  height: 44px;
  line-height: 44px;
  background: var(--brand-gradient);
  color: #fff;
  font-size: var(--font-title);
  font-weight: 600;
  border-radius: 22px;
  border: none;
}
.ex-submit:disabled { opacity: 0.5; }

/* 交卷结果（三期 D1）：得分卡 + 次级按钮（主按钮复用 .btn-primary） */
.ex-result-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 24px 16px;
  text-align: center;
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
}
.ex-score { font-size: 48px; font-weight: 700; line-height: 1.1; }
.ex-score.pass { color: var(--success); }
.ex-score.fail { color: var(--danger); }
.ex-verdict { font-size: var(--font-body); margin-top: 6px; color: var(--text-main); font-weight: 600; }
.ex-grad-tip { margin-top: 8px; color: var(--warning); font-size: var(--font-sub); }
.ex-rows { margin: 16px 0; text-align: left; }
.ex-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 4px;
  border-bottom: 1px solid var(--divider);
  font-size: var(--font-sub);
  color: var(--text-sub);
}
.ex-result-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.btn-plain {
  display: block;
  width: 100%;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background: var(--bg-page);
  color: var(--text-main);
  font-size: var(--font-body);
  border-radius: var(--radius-md);
  border: none;
  padding: 0;
}

/* 答卷回顾（三期 D1）：题卡容器与头部已改成直接复用答题页的 .q-card/.q-head（与「模拟考试」同款），
   .rv-card 只留「多张卡纵向堆叠时的间距」，不再重复声明卡片表面——否则以后改 .q-card 的圆角/内边距会两处漂移。
   .rv-head 随结构并入 .q-head 后已无引用，删除。 */
.rv-card { margin-bottom: 10px; }
.answer-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-sub);
  font-size: var(--font-tip);
  margin-top: 6px;
}
.rv-deleted { margin-top: 6px; color: var(--text-tip); font-size: var(--font-tip); }

/* 内页返回出口（.crumbs.crumb-btn）统一美化为胶囊返回按钮：白底药丸 + 圆形箭头徽标 + 按压反馈。
   仅命中显式加 .crumb-btn 的 crumbs（答卷回顾 / 我的证书 等），其余共用 .crumbs（course/study/portal）保持原样。
   左右缩进交给 .app-body 的 var(--gap) 内边距，这里 margin 不再叠加左右偏移，保证按钮与下方卡片同一条竖线。 */
.crumbs.crumb-btn { margin: 0 0 12px; font-size: var(--font-sub); }
.crumbs.crumb-btn a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px 7px 8px;
  line-height: 1.2;
  color: var(--brand);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-round);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.crumbs.crumb-btn a:hover { color: var(--brand); }
.crumbs.crumb-btn a:active {
  transform: scale(.96);
  background: var(--brand-light);
  border-color: var(--brand-light);
}
.crumbs.crumb-btn .cb-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1;
  margin-bottom: 1px;   /* ‹ 字形视觉偏上，下沉 1px 与文字中线对齐 */
  color: var(--brand);
  background: var(--brand-light);
  border-radius: 50%;
  transition: background .15s ease;
}
.crumbs.crumb-btn a:active .cb-arrow { background: #fff; }

/* 题库练习记录（三期 D1）：横向滚动药丸页签 + 记录卡（卡片底色复用 .panel） */
.rc-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
  margin-bottom: 16px;
  padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rc-tabs::-webkit-scrollbar { display: none; }
.rc-tab {
  flex-shrink: 0;
  padding: 5px 14px;
  border-radius: var(--radius-round);
  background: var(--bg-card);
  color: var(--text-sub);
  font-size: var(--font-tip);
  box-shadow: var(--shadow-card);
  border: none;
}
.rc-tab.on { background: var(--brand-gradient); color: #fff; font-weight: 600; }
.rc-card { margin-bottom: 16px; cursor: pointer; }
.rc-line1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rc-trade {
  flex: 1;
  min-width: 0;
  font-size: var(--font-body);
  color: var(--text-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rc-score { flex-shrink: 0; font-size: var(--font-sub); font-weight: 700; }
.rc-score.pass { color: var(--success); }
.rc-score.fail { color: var(--danger); }
.rc-score.running { color: var(--warning); font-size: var(--font-sub); }
.rc-nums { flex-shrink: 0; color: var(--brand); font-size: var(--font-sub); }
.rc-line2 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; align-items: center; }
.rc-go { margin-left: auto; color: var(--brand); font-size: var(--font-tip); }
.rc-line3 { margin-top: 7px; color: var(--text-tip); font-size: var(--font-tip); }

/* 考试报告（三期 D1）：概况网格 + 历史成绩行（卡片底色复用 .panel） */
.rp-block { margin-bottom: var(--gap); }
.rp-title { font-size: var(--font-title); font-weight: 600; margin-bottom: 20px;color: var(--text-title); text-align: center;}
/* 工种考试报告：工种名 + 方案元信息（时长/满分/及格） */
.rp-trade { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 8px; }
.rp-trade-name { font-size: var(--font-body); font-weight: 700; color: var(--text-title); }
.rp-trade-sub { font-size: var(--font-tip); color: var(--text-tip); }
.rp-grid { display: flex; flex-wrap: wrap; }
.rp-cell { width: 33.33%; text-align: center; padding: 8px 0; display: flex; flex-direction: column; }
.rp-num { font-size: var(--font-head); font-weight: 700; color: var(--brand); }
.rp-lab { margin-top: 3px; font-size: var(--font-tag); color: var(--text-tip); }
.rp-rows { margin-top: 8px; border-top: 1px solid var(--divider); }
.rp-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 4px;
  border-bottom: 1px solid var(--divider);
  font-size: var(--font-sub);
  color: var(--text-sub);
}
.rp-row:last-child { border-bottom: none; }
.rp-rec { padding: 8px 0; border-bottom: 1px solid var(--divider); cursor: pointer; }
.rp-rec:last-child { border-bottom: none; }
/* 模拟考结果页：内嵌本工种考试报告与分数卡拉开间距 */
.ex-result #resultReport { margin-top: 14px; }
/* 考试报告：练习方案建议 */
.ad-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ad-headline { font-size: var(--font-body); font-weight: 600; color: var(--text-title); }
.ad-lead { font-size: var(--font-body); color: var(--text-sub); line-height: 1.6; margin-bottom: 14px; }
.ad-plan { margin: 0 0 14px 0; padding-left: 20px;  font-size:14px; }
.ad-plan li {color: var(--text-title); line-height: 1.9; margin-bottom: 4px; }
.ad-cta { display: flex; gap: 10px; margin-top: 12px; }
.ad-btn { flex: 1; height: 40px; line-height: 40px; text-align: center; font-size: var(--font-body); font-weight: 600; border-radius: var(--radius-md); border: 1px solid var(--brand); color: var(--brand); text-decoration: none; }
.ad-btn.primary { background: var(--brand-gradient); color: #fff; }
/* 智能分析建议——分步提升方案（由 exam-report-core.js 输出）：序号写进文案，所以用 ul + .ad-steps 解除编号，
   避免 ol 的自动数字和「第一步」重复；只动 list-style/padding，不覆盖上面 .ad-plan 已调好的间距与字号。 */
.ad-plan-title { font-size: var(--font-body); font-weight: 600; color: var(--text-title); margin-bottom: 8px; }
.ad-steps { list-style: none; padding-left: 0; }
.ad-steps li { margin-bottom: 10px; }
.ad-step { font-weight: 600; color: var(--brand); margin-right: 4px; }
.ad-link { color: var(--brand); text-decoration: none; white-space: nowrap; }
.ad-link::after { content: '›'; margin-left: 2px; }
.ad-sum { font-size: var(--font-sub); color: var(--text-sub); line-height: 1.6; padding-top: 10px; border-top: 1px dashed var(--border); }
.rp-rec-line1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rp-rec-name {
  font-size: var(--font-body);
  color: var(--text-title);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-rec-score { flex-shrink: 0; font-size: var(--font-title); font-weight: 700; }
.rp-rec-score.pass { color: var(--success); }
.rp-rec-score.fail { color: var(--danger); }
.rp-rec-line2 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  color: var(--text-tip);
  font-size: var(--font-tip);
  align-items: center;
}

/* 练习小结 */
.summary-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  margin-top: 40px;
  box-shadow: var(--shadow-card);
}
.summary-title { font-size: var(--font-head); font-weight: 700; text-align: center; color: var(--text-title); }
.summary-line {
  margin-top: 14px;
  display: flex;
  justify-content: space-around;
  color: var(--text-main);
  font-size: var(--font-body);
}
.summary-tip { margin-top: 10px; text-align: center; color: var(--warning); font-size: var(--font-tip); }
.summary-card .btn-primary { margin-top: 18px; }

/* ===== 应学课程横向行卡（plan-courses.js 渲入 #coursesRoot）=====
   必须作用域限定到 #coursesRoot：否则本块的 .course-card{padding} / .course-cover{width:90px;height:70px}
   会泄入首页/商店的网格卡（同名全局选择器），使封面固定成 90px 左侧缩略图 → 排版错乱。 */
#coursesRoot .course-card {
  display: flex;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 12px;
  margin-bottom: var(--gap);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}
.course-arrow { align-self: center; flex-shrink: 0; margin-left: 8px; }
#coursesRoot .course-cover { width: 90px; height: 70px; border-radius: var(--radius-md); flex-shrink: 0; object-fit: cover; }
#coursesRoot .course-cover.placeholder {
  background: var(--brand-light);
  color: var(--brand);
  font-size: 28px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
#coursesRoot .course-info { flex: 1; margin-left: 12px; min-width: 0; }
#coursesRoot .course-name {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#coursesRoot .course-meta { margin-top: 5px; color: var(--text-tip); font-size: var(--font-tip); }
.course-category {
  display: inline-block;
  background: var(--brand-light);
  color: var(--brand);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  font-size: var(--font-tag);
  margin-right: 6px;
}
.progress-line { display: flex; align-items: center; margin-top: 8px; }
.progress-line .progress-bar { flex: 1; height: 6px; background: var(--divider); border-radius: var(--radius-round); overflow: hidden; }
.progress-line .progress-fill { height: 100%; background: var(--brand-gradient); border-radius: var(--radius-round); }
.progress-text { margin-left: 8px; font-size: 14px; color: var(--brand); font-weight: 600; width: 70px; }
.plan-status-ok { color: var(--success); }
.plan-status-off { color: var(--text-tip); }
.plan-graduate { margin-top: 6px; color: var(--success); font-size: var(--font-tag); }

/* ===== 应学课程页结业考试入口（mine/courses，对齐 H5 plan/courses finish-card） ===== */
.finish-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 12px; margin-top: 4px; box-shadow: var(--shadow-card); }
.finish-card.ready { border-color: var(--warning); }
.finish-name { display: flex; align-items: center; gap: 5px; font-size: var(--font-body); font-weight: 600; color: var(--text-title); }
.finish-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 7px; color: var(--text-sub); font-size: var(--font-tip); }
.finish-status { margin-top: 6px; font-size: var(--font-sub); }
.finish-status .ok { color: var(--success); }
.finish-status .warn { color: var(--warning); }
.finish-btn { display: inline-block; margin-top: 10px; padding: 7px 20px; background: var(--brand-gradient); color: #fff; font-size: var(--font-sub); border-radius: var(--radius-md); text-decoration: none; }

/* ===== 设备互转提示（DeviceSwitch 服务端直出，自带内联脚本） =====
   电脑 UA 落在移动页时以居中模态弹窗呈现：遮罩由 ::before 伪元素铺满屏幕
   （无需改 PHP，服务端直出与客户端视口兜底两条生成路径共用同一套标记）；
   卡片视觉复用 .site-modal 同族浅色弹窗，顶部显示器图标为 SVG data-uri。 */
.ds-hint {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 3000; width: min(78vw, 320px);
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 20px 18px; color: var(--text-title); background: transparent;
  font-size: var(--font-body); text-align: center;
  animation: ds-pop 0.26s ease-out;
}
/* 遮罩（-2）：铺满全屏并拦截点击。注意层级划分：层叠上下文里根元素自身的背景
   绘在负 z 子层「之下」，白卡若写在 .ds-hint 上会被半透明遮罩染灰，
   故背景/圆角/投影另放 ::after（-1）：绘制顺序为 遮罩(-2) → 白卡(-1) → 文字按钮。 */
.ds-hint::before {
  content: ''; position: fixed; top: 50%; left: 50%;
  width: 200vmax; height: 200vmax; transform: translate(-50%, -50%);
  z-index: -2; background: rgba(10, 31, 60, 0.5);
}
.ds-hint::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--bg-card); border-radius: 16px;
  box-shadow: 0 16px 48px rgba(10, 31, 60, 0.28);
}
@keyframes ds-pop {
  from { opacity: 0; transform: translate(-50%, -42%) scale(0.92); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.ds-hint-text {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  line-height: 1.6; font-weight: 500;
}
.ds-hint-text::before {
  content: ''; width: 46px; height: 38px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a4f8b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='13' rx='2'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 16.5V21'/%3E%3C/svg%3E") no-repeat center / contain;
}
.ds-hint-acts { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 20px; }
.ds-btn {
  flex: 1 1 0; height: 40px; padding: 0 12px; border: 0; border-radius: var(--radius-md);
  font-size: var(--font-body); color: var(--text-sub); background: var(--bg-page); cursor: pointer;
}
.ds-btn-primary { background: var(--brand-gradient); color: #fff; font-weight: 600; }
/* 关闭按钮脱离按钮行，绝对定位于弹窗右上角 */
.ds-btn-x {
  position: absolute; top: 8px; right: 8px; flex: 0 0 auto;
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  background: transparent; color: var(--text-tip);
  font-size: 18px; line-height: 1;
}

/* ===== Toast / 确认弹窗（site.js） ===== */
.site-toast {
  position: fixed;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  z-index: 2000;
  max-width: 76%;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: var(--font-sub);
  line-height: 1.5;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.site-toast.show { opacity: 1; }
.site-modal {
  position: fixed;
  inset: 0;
  z-index: 1900;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-modal-box {
  width: 80%;
  max-width: 320px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 20px 16px 14px;
}
.site-modal-title { font-size: var(--font-title); font-weight: 600; color: var(--text-title); text-align: center; }
.site-modal-content { margin-top: 10px; font-size:16px; color: var(--text-sub); line-height: 1.6; text-align: center; }
.site-modal-btns { display: flex; gap: 10px; margin-top: 16px; }
.site-modal-btns button {
  flex: 1;
  height: 38px;
  border-radius: var(--radius-md);
  border: none;
  font-size: var(--font-sub);
}
.site-modal-btns .cancel { background: var(--bg-page); color: var(--text-sub); }
.site-modal-btns .ok { background: var(--brand-gradient); color: #fff; font-weight: 600; }

/* ===== 个人中心（mine） ===== */
/* 账号卡：头像 + （姓名 / 两项登录方式）+「待完善」入口。
   必须允许换行：「待完善 姓名、身份证号、手机号」这枚胶囊约 190px，390px 屏下卡片净宽仅 334px，
   不换行就会把 info 压到 65px，chip 里的中文标签被逐字劈开竖排（截图现场）。窄屏让胶囊另起一行并靠右，
   info 独占首行剩余宽度；宽屏（≥约 490px）三者仍在一行，与原设计一致。 */
.mi-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin:0 0 16px 0; padding: 18px 16px; background:linear-gradient(135deg, #316ad3, #1eb0e7); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.mi-avatar { width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; color: #fff; flex-shrink: 0; }
/* 168px 是 flex-basis（换行判定用），不是最小宽度上限：独占一行时靠 flex-grow 撑满，两个 chip 能并排 */
.mi-profile-info { flex: 1 1 168px; min-width: 0; }
.mi-name { font-size: var(--font-head); font-weight: 600; color: #fff; line-height: 1.3; word-break: break-all; }
.mi-name-empty { font-size: var(--font-body); font-weight: 500; color: rgba(255, 255, 255, 0.68); }
/* 电脑端账号 / 微信绑定两项登录方式：能换行就不撑破卡片；值用 <b> 加重，扫一眼能分辨“有没有” */
.mi-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* 标签（电脑端账号 / 微信）是定长短词，一律不许断行；溢出只由 <b> 出省略号（它有 min-width:0 + ellipsis） */
.mi-chip { display: inline-flex; align-items: center; max-width: 100%; white-space: nowrap; padding: 4px 9px; border: 1px solid transparent; border-radius: var(--radius-round); background: rgba(255, 255, 255, 0.16); font-size: var(--font-tag); line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.mi-chip b { min-width: 0; margin-left: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: var(--font-tip); color: #fff; }
button.mi-chip { padding: 4px 9px; font-family: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
.mi-chip.on { background: rgba(255, 255, 255, 0.26); }
.mi-chip.off { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.62); }
/* 虚线边 = 可点去补齐（未注册账号 / 未绑微信），与不可点的 .off 区分开 */
.mi-chip.todo { border-style: dashed; border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.08); }
.mi-chip.todo:hover, .mi-chip.on:hover { background: rgba(255, 255, 255, 0.32); }
/* 必填未填的汇总入口：白底反色压在卡右上，点开即弹「修改个人信息」。窄屏换行后靠右（margin-left:auto） */
.mi-miss { flex: 0 1 auto; max-width: 100%; margin-left: auto; padding: 5px 10px; border: none; border-radius: var(--radius-round); background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); color: var(--warning); font-family: inherit; font-size: var(--font-tip); font-weight: 600; line-height: 1.4; cursor: pointer; }
/* 「实名资料」板块：一行一项、标签左值右，虚线分隔与下方菜单的实线拉开层次 */
.mi-kv { display: block; }
/* 「账号信息」板块底部：修改个人信息按钮——flex 居中，宽度收敛为内容宽（覆盖 .btn-primary 的整宽 block） */
.mi-acc-foot { display: flex; justify-content: center; margin: 4px 0 6px 0; }
.mi-acc-foot .btn-primary { width: auto; min-width: 100px; padding: 0 10px; }
/* 标签与值取基线对齐：标签 13px / 值 15px，顶对齐会让两者首行差约 2px，一行一项的列表里看着发飘 */
.mi-kv-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--divider); }
.mi-kv-row:last-child { border-bottom: none; }
.mi-kv-label { flex: 0 0 auto; color: var(--text-tip); font-size: var(--font-sub); }
.mi-kv-value { flex: 1; min-width: 0; text-align: right; color: var(--text-main); font-size: var(--font-body); word-break: break-all; }
/* 未填时只弱显文字色，修饰类名必须与全局空状态块 .empty（padding:30px 0 + 居中）区分开：
   曾用 .mi-kv-value.empty，被 .empty 的上下 30px 内边距命中，一行「姓名 未填写」被撑到 104px 且值掉到下一行 */
.mi-kv-value.mute { color: var(--text-tip); }
/* 必填而未填的橙标：灰字“未填写”容易被读成“这行不用管”，补一个带颜色的动作提示 */
.mi-kv-need { margin-left: 6px; padding: 1px 5px; border-radius: var(--radius-sm); background: rgba(250, 140, 22, 0.12); color: var(--warning); font-size: var(--font-tag); }
/* 值下方的小字：把“为什么这行不能改”就地说清 */
.mi-kv-note { display: block; margin-top: 2px; font-size: var(--font-tag); font-weight: 400; color: var(--text-tip); }
.mi-unread { color: var(--danger); }
.mi-menu-badge { flex-shrink: 0; font-size: var(--font-tag); }
.mi-menu { margin: 0 0 16px 0; padding: 0 14px; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.mi-menu-item { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--divider); cursor: pointer; text-decoration: none; }
.mi-menu-item:last-child { border-bottom: none; }
.mi-menu-ico { display: flex; align-items: center; flex-shrink: 0; }
.mi-menu-text { flex: 1; min-width: 0; font-size: var(--font-body); color: var(--text-main); }
.mi-menu-arrow { display: flex; align-items: center; flex-shrink: 0; }
.mi-danger .mi-menu-text { color: var(--danger); }

/* ===== 消息中心（mine/messages） ===== */
.msg-toolbar { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; }
.msg-count { color: var(--text-tip); font-size: var(--font-tip); }
.msg-readall { background: none; border: none; color: var(--brand); font-size: var(--font-sub); cursor: pointer; padding: 0; }
.msg-row { background: var(--bg-card); border-radius: var(--radius-lg); padding: 13px 12px; margin-bottom: 10px; box-shadow: var(--shadow-card); cursor: pointer; }
.msg-row.unread { border-left: 3px solid var(--brand); }
.msg-row-title { display: flex; align-items: center; gap: 6px; }
.msg-row-title .tag { flex-shrink: 0; }
.msg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); flex-shrink: 0; }
.msg-row-name { margin-top: 7px; font-size: var(--font-body); font-weight: 600; color: var(--text-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-row-content { margin-top: 6px; font-size: var(--font-sub); color: var(--text-sub); line-height: 1.6; }
.msg-row-meta { margin-top: 7px; font-size: var(--font-tag); color: var(--text-tip); }
.msg-detail-title { font-size: var(--font-head); font-weight: 700; color: var(--text-title); line-height: 1.45; }
.msg-detail-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--text-tip); font-size: var(--font-tip); }
.msg-detail-content { margin-top: 16px; color: var(--text-main); font-size: var(--font-body); line-height: 1.8; white-space: pre-wrap; word-break: break-word; }

/* ===== 考试中心（exam/list）已下线：入口并入练习页/培训班课程页，本页专属样式随之移除 ===== */

/* ===== 我的证书（mine/certs：电子证书 + 培训证明同页） ===== */
/* 一个页面兜电子证书与培训证明两个来源，故分区抬头 + 证面就地展开区 */
.cert-group { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 8px; }
.cert-group-t { font-size: var(--font-body); font-weight: 600; color: var(--text-title); }
.cert-group-tip { color: var(--text-tip); font-size: var(--font-tag); }
.cert-tag { margin-left: 6px; padding: 1px 7px; font-size: var(--font-tag); font-weight: 400; border-radius: var(--radius-round); border: 1px solid currentColor; }
.cert-tag.ok { color: var(--success); }
.cert-tag.bad { color: var(--danger); }
/* 证面展开区是 .cert 的兄弟节点（.cert 本体是 flex 横排），负边距把它与所属条目贴在一起 */
.cert-view { margin: -6px 0 10px; padding: 8px; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); text-align: center; }
.cert-view[hidden] { display: none; }
.cert-view img { width: 100%; height: auto; border-radius: var(--radius-sm); }
.cert-view-tip { padding: 12px 4px; color: var(--text-tip); font-size: var(--font-tag); line-height: 1.6; }
.cert { display: flex; justify-content: space-between; align-items: center; background: var(--bg-card); border-radius: var(--radius-lg); padding: 14px 12px; margin-bottom: 10px; box-shadow: var(--shadow-card); }
.cert-info { flex: 1; min-width: 0; }
.cert-name { font-size: var(--font-body); font-weight: 600; color: var(--text-title); }
.cert-meta { margin-top: 5px; color: var(--text-tip); font-size: var(--font-tag); }
.cert-revoked { margin-top: 5px; color: var(--danger); font-size: var(--font-tag); }
.cert-actions { display: flex; gap: 8px; flex-shrink: 0; margin-left: 10px; }
.cert-dl { background: none; color: var(--brand); font-size: var(--font-sub); border: 1px solid var(--brand); border-radius: var(--radius-round); padding: 4px 12px; cursor: pointer; }

/* ===== 我的学习记录（mine/records） ===== */
.sr-item { background: var(--bg-card); border-radius: var(--radius-lg); padding: 13px 12px; margin-bottom: 10px; box-shadow: var(--shadow-card); }
.sr-line1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sr-lesson { flex: 1; min-width: 0; font-size: var(--font-body); font-weight: 600; color: var(--text-title); }
.sr-line1 .tag { flex-shrink: 0; }
.sr-line2 { margin-top: 5px; color: var(--text-sub); font-size: var(--font-sub); }
.sr-line3 { margin-top: 5px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; color: var(--text-tip); font-size: var(--font-tag); }

/* ===== 我的订单（mine/orders）：独立卡片版式，纵向堆叠，不复用 .sr-item（其 display:flex 为封面+正文两列设计，会挤压） ===== */
.ord-item { display: block; background: var(--bg-card); border-radius: var(--radius-lg); padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow-card); }
.ord-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ord-title { flex: 1; min-width: 0; font-size: var(--font-title); font-weight: 600; color: var(--text-title); line-height: 1.4; }
.ord-head .tag { flex-shrink: 0; }
.ord-sub { margin-top: 8px; color: var(--text-sub); font-size: var(--font-body); line-height: 1.5; }
.ord-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ord-time { flex: 1; min-width: 0; color: var(--text-tip); font-size: var(--font-sub); }
.ord-amt { flex-shrink: 0; color: var(--danger); font-size: var(--font-title); font-weight: 700; }
.ord-no { margin-top: 8px; color: var(--text-tip); font-size: var(--font-tag); word-break: break-all; }

/* ===== 绑定微信回调（wxbind，fill/plain 居中状态卡片） ===== */
.wxb-wrap { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px 12px; background: var(--bg-page); }
.wxb-box { width: 100%; max-width: 320px; background: var(--bg-card); border-radius: var(--radius-lg); padding: 36px 20px; text-align: center; box-shadow: var(--shadow-card); }
.wxb-icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 34px; color: #fff; background: var(--text-tip); }
.wxb-icon.ok { background: var(--success); }
.wxb-icon.fail { background: var(--danger); }
.wxb-title { font-size: var(--font-title); font-weight: 600; color: var(--text-title); }
.wxb-msg { margin-top: 8px; color: var(--text-sub); font-size: var(--font-sub); line-height: 1.6; }
.wxb-btn { margin-top: 28px; width: 100%; height: 44px; line-height: 44px; background: var(--brand-gradient); color: #fff; font-size: var(--font-body); font-weight: 600; border-radius: var(--radius-md); border: none; cursor: pointer; }

/* ===== 培训报名（enroll：批次列表 / 报名表单 / 进度查询） ===== */
/* 列表页：取证·复审分段器（纯前端过滤，见 assets/enroll.js） */
.er-seg { display: flex; gap: 8px; margin-bottom: var(--gap); }
.er-seg-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; padding: 0 16px; font-size: var(--font-sub); color: var(--text-sub); background: var(--bg-card); border: none; border-radius: var(--radius-round); box-shadow: var(--shadow-card); }
.er-seg-btn.active { color: #fff; background: var(--brand-gradient); font-weight: 600; }
/* 工种抬头（配图 + 名称 + 上级分类），其下挂该工种的各个报名批次 */
.er-trade-wrap { margin-bottom: 6px; }
.er-trade { display: flex; align-items: center; gap: 10px; padding: 2px 2px 8px; }
.er-thumb { flex: 0 0 auto; width: 56px; height: 40px; object-fit: cover; border-radius: var(--radius-md); background: var(--bg-page); }
.er-trade-main { flex: 1; min-width: 0; }
.er-trade-name { display: block; font-size: var(--font-body); font-weight: 600; color: var(--text-title); }
.er-trade-sub { display: block; margin-top: 2px; font-size: var(--font-tag); color: var(--text-tip); }
/* 批次卡沿用 .trade-card 骨架，只把批次名提成一行主体文字（.trade-name 默认 400） */
.er-row .trade-name { display: block;  }
.er-link { color: var(--brand); }
.er-link:hover { text-decoration: underline; }

/* 表单页：顶部状态条 / 副标题 / 材料清单 / 须知 */
.er-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.er-bar .plan-tags { margin-top: 0; }
.er-bar-date { color: var(--text-tip); font-size: var(--font-tip); }
.er-intro { margin-bottom: 8px; padding: 10px 12px; background: var(--brand-light); border-radius: var(--radius-md); color: var(--text-sub); font-size: var(--font-sub); line-height: 1.7; }
/* 公共报名表单的来源说明（§5.5）：白底描边而非 .er-intro 的实心蓝底，两块紧挨着时不会糊成一片。
   文案要同时讲清「表单谁维护」与「我的资料归谁」—— 后者才是学员看到「平台公共」时真正会担心的事。 */
.er-public-note { margin-bottom: 8px; padding: 9px 12px; background: var(--bg-card); border: 1px solid #d6e4ff; border-left: 3px solid var(--brand); border-radius: var(--radius-md); color: var(--text-sub); font-size: var(--font-tip); line-height: 1.75; }
.er-public-note b { color: var(--text-main); }
.er-navback { margin-bottom: 0; font-size: var(--font-tip); }
/* 独立文字链没有按钮外壳，靠上下 padding 把命中区撑到 44px（移动端拇指尺寸） */
.er-navback a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-sub); }
.er-navback a:hover { color: var(--brand); }
.er-h2 { margin-bottom: 10px; font-size: 18px; font-weight: 600; color: var(--text-title); text-align:center;}
.er-mat { margin: 0; padding-left: 20px; color: var(--text-main); font-size: var(--font-sub); }
.er-mat li { padding: 4px 0; line-height: 1.6; }
.er-mat-label { font-weight: 600; }
.er-req { margin-left: 4px; font-style: normal; font-size: var(--font-tag); color: var(--danger); }
.er-mat-tip { display: block; color: var(--text-tip); font-size: var(--font-tip); }
.er-notice { margin-top: 10px; }
.er-notice .rich { font-size: var(--font-sub); }
.er-closed { padding: 12px; background: #ffece8; border-radius: var(--radius-md); color: var(--danger); font-size: var(--font-sub); line-height: 1.7; }
.er-form { margin-top: 10px; }
.er-nojs { display: flex; align-items: flex-start; gap: 8px; color: var(--text-sub); font-size: var(--font-sub); line-height: 1.7; }
.er-nojs svg { flex-shrink: 0; margin-top: 1px; }
.er-foot { margin: 4px 0 20px; text-align: center; color: var(--text-tip); font-size: var(--font-tip); }
.er-foot a { color: var(--brand); }
.er-back { margin-bottom:18px;}
/* 培训班卡底的「本工种报名」（仅在命中开放批次时由 SSR 渲染） */
.er-plan-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; color: var(--brand); font-size: var(--font-sub); }

/* 动态字段（由 enroll.js 按 schema 渲染，控件复用 .input 的底色与圆角） */
.ef-title { font-size:18px; font-weight: 600; color: var(--text-title); text-align:center;}
.ef-title-sub { display: block; margin-top: 4px; font-size: var(--font-tip); font-weight: 400; color: var(--text-tip); }
.ef-item { margin-top: 14px; }
.ef-label { display: block; margin-bottom: 6px; font-size: var(--font-sub); color: var(--text-sub); }
.ef-item.ef-bad > .ef-label { color: var(--danger); }
/* 校验失败不只靠下面那行小字：控件本体也要给反馈。.input 基线是 border:none，
   故用 inset 描边，不会像加 border 那样把 44px 高算出 2px 抖动 */
.ef-item.ef-bad .input { box-shadow: inset 0 0 0 1px var(--danger); background: #fff5f4; }
.ef-item.ef-bad .ef-photo-btn { border-color: var(--danger); color: var(--danger); }
.ef-textarea { height: auto; padding: 10px 12px; line-height: 1.6; }
.ef-select { padding-right: 6px; }
.ef-opts { display: flex; flex-wrap: wrap; gap: 0 18px; padding-top: 2px; }
.ef-opt { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--font-sub); color: var(--text-main); cursor: pointer; }
.ef-opt input { width: 18px; height: 18px; accent-color: var(--icon-color); }
.ef-item.ef-bad .ef-opt input { outline: 1px solid var(--danger); outline-offset: 1px; }
.ef-photo { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.ef-photo-img { width: 76px; height: 96px; object-fit: cover; border-radius: var(--radius-md); background: var(--bg-page); }
.ef-photo-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px dashed var(--brand); border-radius: var(--radius-md); color: var(--brand); font-size: var(--font-sub); cursor: pointer; }
.ef-photo-state { color: var(--text-tip); font-size: var(--font-tip); }
.ef-tip { margin-top: 5px; color: var(--text-tip); font-size: var(--font-tip); line-height: 1.6; }
.ef-err { margin-top: 5px; color: var(--danger); font-size: var(--font-tip); line-height: 1.6; }
/* 蜜罐：人眼看不见也 Tab 不到，但仍在 DOM 里（不用 display:none，避免部分机器人直接跳过该字段） */
.ef-hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ef-agree { justify-content: flex-start; margin-top: 14px; }
.ef-agree label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.ef-agree input[type='checkbox'] { width: 18px; height: 18px; flex: 0 0 auto; }
.ef-agree.ef-bad { color: var(--danger); }
.ef-submit { margin-top: 14px; }
.ef-foot { margin-top: 10px; text-align: center; color: var(--text-tip); font-size: var(--font-tag); line-height: 1.6; }

/* 提交成功提示卡：卡上不展示报名编号（它已不是查询凭据），动作行只剩「去查询」一个，故 flex:1 会把它撑成通栏按钮 */
.er-ok { padding: 6px 0 2px; text-align: center; }
.er-ok-title { margin-top: 8px; font-size: var(--font-title); font-weight: 600; color: var(--text-title); }
.er-ok-sub { margin-top: 6px; color: var(--text-sub); font-size: var(--font-sub); }
.er-ok-actions { display: flex; gap: 10px; margin-top: 14px; }
.er-ok-actions > * { flex: 1; height: 42px; line-height: 42px; border: none; border-radius: var(--radius-md); font-size: var(--font-body); text-align: center; }
.er-primary { background: var(--brand-gradient); color: #fff; font-weight: 600; }
.er-ok-tip { margin-top: 12px; color: var(--text-tip); font-size: var(--font-tip); }
/* 报名进度查询用姓名 + 身份证号可能命中多条，结果区从单卡变成列表（间距口径同 .cq-result） */
.enq-result > .card + .card { margin-top: 10px; }

/* ===== 培训报名·两段式选择页（/enroll）：板块一选型、板块二填表，只复用既有 token ===== */
/* 板块一：报考工种 / 培训类型上下两行、各自整宽（并排会把长工种名挤没） */
.er-pick { display: grid; grid-template-columns: 1fr; gap: 14px; }
.er-pick-item { min-width: 0; }
.er-pick-label { display: block; margin-bottom: 6px; font-size: var(--font-sub); font-weight: 500; color: var(--text-title); }
.er-pick-tip { margin-top: 10px; font-size: 14px; color: var(--text-sub); line-height: 1.6; }
/* 联动下拉统一皮肤（板块一两只 + 板块二批次）：appearance:none 抹掉系统外观让各端箭头/圆角一致，
   自绘描边盒 + 内联 SVG chevron；聚焦换品牌蓝边与淡蓝光环；未选时占位文案用提示色
   （:has 老浏览器不支持，代价只是占位不灰，可接受） */
.er-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 48px;
  padding: 0 42px 0 14px;
  font-size: var(--font-body);
  font-family: inherit;
  color: var(--text-main);
  background-color: #fff;
  border: 1px solid #d9dee5;
  border-radius: var(--radius-lg);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1.2 1.6 6 6.1l4.8-4.5' fill='none' stroke='%238a94a6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.er-select:hover { border-color: #b9c4d4; }
.er-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22, 100, 255, 0.12); }
.er-select:disabled { background-color: var(--bg-page); border-color: #e3e7ee; color: var(--text-tip); cursor: not-allowed; }
.er-select:has(option[value=""]:checked) { color: var(--text-tip); }
.er-select > option, .er-select > optgroup > option { color: var(--text-main); }
.er-pick-empty { margin-top: 10px; padding: 12px; background: var(--bg-page); border-radius: var(--radius-md); color: var(--text-tip); font-size: var(--font-sub); line-height: 1.7; }
/* 树形工种下拉：代替原生 select——option 不支持缩进/加粗，而后台工种树是三级分层必须看出层次；
   行由 SSR 直出，JS 只管开合与选中态。配色只分两档：末级可选（加深加粗）/ 非末级表头（变浅禁选），没批次的末级再置灰 */
.er-tree { position: relative; }
.er-tree-btn { text-align: left; }
.er-tree-btn[aria-expanded="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22, 100, 255, 0.12); }
.er-tree-cur { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 46px; font-weight: 400; }
.er-tree-cur.ph { color: var(--text-tip); }
.er-tree-pop {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 6px 0; background: #fff; border: 1px solid #d9dee5; border-radius: var(--radius-lg);
  box-shadow: 0 10px 28px rgba(15, 34, 64, 0.14);
}
.er-tree-row { display: flex; align-items: center; gap: 8px; min-height: 40px; padding-right: 14px; font-size: var(--font-body); color: var(--text-main); cursor: pointer; user-select: none; }
/* 层级缩进：每级多缩 18px，与后台工种树的观感对齐 */
.er-tree-row[data-lvl="1"] { padding-left: 14px; font-weight: 700; }
.er-tree-row[data-lvl="2"] { padding-left: 32px; font-weight: 600; }
.er-tree-row[data-lvl="3"] { padding-left: 50px; }
.er-tree-row[data-lvl="4"] { padding-left: 68px; }
.er-tree-row[data-lvl="5"] { padding-left: 86px; }
/* 末级（可选）颜色加深：盖在缩进规则之后，选中/置灰态再往后覆盖 */
.er-tree-row:not(.er-tree-cat) { color: var(--text-title); }
.er-tree-row:not(.off):not(.er-tree-cat):hover { background: var(--brand-light); }
.er-tree-row.on { background: var(--brand-light); color: var(--brand); }
.er-tree-row.on::after { content: '✓'; margin-left: auto; font-weight: 600; }
.er-tree-row.off { color: #b6bec9; cursor: not-allowed; }
/* 非末级层级表头（板块一与表单同款）：只展示层次不可点，颜色变浅、字号略小、去手型 */
.er-tree-cat { cursor: default; font-size: var(--font-sub); color: #97989d; }
.er-tree-cat.on, .er-tree-cat.off { background: none; }
/* 培训类型面板：平铺列表无层级，左内边距与工种面板首列对齐，悬停/选中沿用 .er-tree-row 的浅蓝/蓝字皮肤 */
.er-tree-pop-flat .er-tree-row { padding-left: 14px; }
.er-tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 板块二顶部：已选工种/类型回显 + 同组多批次时的批次下拉 */
.er-p2 { margin-top: 12px; }
.er-p2-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; padding: 10px 12px; background: var(--brand-light); border-radius: var(--radius-md); }
.er-p2-sum { flex: 1; min-width: 0; font-size: var(--font-sub); color: var(--text-sub); }
.er-p2-sum b { color: var(--text-title); }
.er-p2-batch { display: flex; align-items: center; gap: 6px; flex: 0 1 100%; }
.er-p2-batch label { font-size: var(--font-tip); color: var(--text-tip); white-space: nowrap; }
/* 批次名可能很长：概览条里换行独占一行并拉满宽度，避免挤压工种/类型摘要文字；小号态同款皮肤 */
.er-p2-batch .er-select { flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 34px 0 10px; font-size: var(--font-sub); background-position: right 10px center; }
/* 兜底折叠区：无 JS / 爬虫 / 旧收藏仍可直接进批次表单 */
.er-all { margin-top: 14px; }
.er-all > summary { cursor: pointer; min-height: 44px; padding: 10px 2px; font-size: var(--font-sub); color: #96989d; list-style: none; }
.er-all > summary::-webkit-details-marker { display: none; }
.er-all[open] > summary { margin-bottom: 6px; }

/* ===== 桌面端适配 ===== */
@media (min-width: 768px) {
  .tiles { gap: 16px; }
  .tile { width: calc((100% - 48px) / 4); padding: 14px 0; }
  .plan-thumb { width: 112px; height: 72px; }
  /* 轮播高度不在此写死：首页 .banner 一律按图片自身比例自适应（见「首页」一节）。
     以前这里用 height: 220px 覆盖过基础规则，导致桌面端又把图裁/拉伸回固定高度。 */
  .detail { padding: 28px 32px; }
  /* 培训报名：抬头缩略图与提交成功操作区在宽屏下收紧，避免按钮被拉到整行宽 */
  .er-thumb { width: 64px; height: 46px; }
  .er-trade-name { font-size: 16px; }
  .er-ok-actions { max-width: 480px; margin-left: auto; margin-right: auto; }
  .er-plan-link:hover { text-decoration: underline; }
}

/* ============================ 服务自助购买页（T4.9 buy） ============================ */
.buy { padding: 4px var(--gap) 24px; }
.buy-loading, .buy-empty { padding: 24px 4px; color: var(--text-tip); font-size: var(--font-body); text-align: center; }
.buy-empty { color: var(--warning); }
.buy-gate { padding: 28px 16px; text-align: center; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.buy-gate-text { color: var(--text-tip); font-size: var(--font-body); margin-bottom: 16px; }
/* 操作提示行（报名缴费页 /enroll/pay 的状态行也复用了本类，故保持无底卡的原样；练习购买页已改用下方 .bi-tip 卡） */
.buy-tip { color: var(--text-tip); font-size: 16px; margin: 4px 2px 12px; }
/* 开通权益卡（仅练习语境）：把「一次开通包含哪些板块」做成一张可扫读的标签卡——渐变图标挑标题、
   板块名降为胶囊标签（一眉即可看完），卡内不再塞操作提示（已另成一张卡） */
.buy-includes { margin: 0 2px 12px; padding: 12px 12px 11px; background: var(--bg-card); border: 1px solid var(--brand-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.bi-head { display: flex; align-items: center; gap: 8px; }
.bi-ico { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: var(--radius-md); background: var(--brand-gradient); }
.bi-ico .icon { display: block; }
.bi-title { font-size: var(--font-body); font-weight: 600; color: var(--text-title); }
.bi-title b { padding: 0 2px; color: var(--brand); font-weight: 700; font-size: var(--font-title); }
.bi-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bi-chip { padding: 5px 10px; background: var(--brand-light); border-radius: var(--radius-round); color: var(--brand); font-size: var(--font-sub); line-height: 1.35; }
/* 操作提示卡（练习语境）：从权益卡里拆出来独占一张卡，摆在权益卡与档位网格之间；
   与权益卡同构但不加图标胶囊等装饰、正文取次要色，避免两张卡互抢重心 */
.bi-tip { margin: 0 2px 12px; padding: 11px 12px; background: var(--bg-card); border: 1px solid var(--brand-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); font-size:1em; line-height: 1.65; color:#3c4e66; }
.buy-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.buy-opt { position: relative; padding: 16px 12px; text-align: center; background: var(--bg-card); border: 1px solid transparent; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.buy-opt.sel { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-light); }
.buy-opt-label { font-size: var(--font-body); font-weight: 600; color: var(--text-title); }
.buy-opt-price { margin-top: 6px; font-size: var(--font-title); font-weight: 700; color: var(--brand); }
.buy-opt-perday { margin-top: 4px; font-size: var(--font-tip); color: var(--text-tip); }
.buy-summary { margin-top: 16px; padding: 12px 14px; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.buy-sum-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: var(--font-body); color: var(--text-tip); }
.buy-sum-row b { color: var(--text-title); font-weight: 600; }
.buy-sum-price b { color: var(--brand); font-size: var(--font-title); }
.buy-pay { margin-top: 16px; }
.buy-qr { margin-top: 16px; padding: 16px; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); text-align: center; }
.buy-qr-canvas { width: 220px; height: 220px; image-rendering: pixelated; }
.buy-qr-tip { margin-top: 10px; font-size: var(--font-body); color: var(--text-title); }
.buy-note { margin-top: 10px; min-height: 18px; font-size: var(--font-tip); color: var(--text-tip); text-align: center; }
/* 随机激励文案（开通练习功能页底）：轻量卡片 + 品牌色书名号点缀，不抢支付区视觉 */
.buy-quote { margin-top: 14px; padding: 12px 16px; font-size: 16px; line-height: 1.8; color:#14397f; text-align: center; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.buy-quote::before { content: '「'; color: var(--brand); font-weight: 600; }
.buy-quote::after { content: '」'; color: var(--brand); font-weight: 600; }
@media (min-width: 768px) { .buy { max-width: 560px; margin: 0 auto; } .buy-options { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 报名缴费页（T45.5，复用 .buy 容器，另加 .ep-* 专属） ---------- */
.ep .ep-sum { margin-top: 4px; }
.ep-amount-row b.ep-amount { color: var(--brand); font-size: 26px; }
.ep-meta { margin-top: 8px; border-top: 1px solid var(--border, #eee); padding-top: 8px; }
.ep-meta-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: var(--font-sub); }
.ep-meta-k { color: var(--text-tip); }
.ep-meta-v { color: var(--text-title); }
.ep-status { margin-top: 12px; text-align: center; }
.ep-status .ep-ok { color: var(--success, #00a870); font-weight: 600; }
.ep-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.ep-actions .ep-query { display: block; text-align: center; }
.ep-actions .ep-back { text-align: center; color: var(--text-tip); font-size: var(--font-body); }

/* ---------- 报名进度查询·缴费板块与弹窗（enroll.js，仅表单开启缴费时出） ---------- */
/* 卡内板块：与上方 .kv-row 同一行式口径，另起顶分隔线区分「审核信息 / 缴费信息」 */
.eq-block { margin-top: 8px; border-top: 1px solid var(--divider, #eee); padding-top: 8px; }
.eq-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: var(--font-sub); }
.eq-k { color: var(--text-tip); }
.eq-v { color: var(--text-title); font-weight: 600; }
.eq-v.eq-paid { color: var(--success, #00a870); }
.eq-v.eq-unpaid { color: var(--warning, #ff8f1f); }
button.eq-pay { margin-top: 8px; width: 100%; height: 42px; border: none; border-radius: var(--radius-md); background: var(--brand-gradient); color: #fff; font-size: var(--font-body); font-weight: 600; cursor: pointer; }
/* 弹窗：复用 .site-modal 外壳，但需容纳金额大字 + 二维码，故放宽盒宽、定位右上角关闭 */
.eq-mask .site-modal-box { position: relative; width: 88%; max-width: 360px; max-height: 88vh; overflow-y: auto; }
.eq-x { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; border: none; background: transparent; color: var(--text-tip); font-size: 22px; line-height: 1; cursor: pointer; }
.eq-body { margin-top: 12px; }
.eq-loading { padding: 18px 0; text-align: center; color: var(--text-tip); font-size: var(--font-sub); }
.eq-amount { text-align: center; font-size: 30px; font-weight: 700; color: var(--brand); }
.eq-mrow { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: var(--font-sub); }
.eq-mk { color: var(--text-tip); }
.eq-mv { color: var(--text-title); }
.eq-status { margin-top: 12px; text-align: center; font-size: var(--font-sub); color: var(--text-sub); line-height: 1.6; }
.eq-status.eq-paid { color: var(--success, #00a870); font-weight: 600; }
.eq-pay-btn { display: block; width: 100%; height: 44px; margin-top: 14px; border: none; border-radius: var(--radius-md); background: var(--brand-gradient); color: #fff; font-size: var(--font-body); font-weight: 600; cursor: pointer; }
.eq-pay-btn:disabled { opacity: .7; cursor: default; }
.eq-qr { margin-top: 14px; text-align: center; }
.eq-qr[hidden] { display: none; }
.eq-qr-canvas { width: 220px; height: 220px; image-rendering: pixelated; }
.eq-qr-tip { margin-top: 8px; font-size: var(--font-body); color: var(--text-title); }
.eq-note { margin-top: 10px; min-height: 18px; text-align: center; font-size: var(--font-tip); color: var(--text-tip); line-height: 1.6; }

/* ==================== 课程自助购买与观看（P5：商店列表 / 详情 / 学习中心） ==================== */
/* 商店列表：搜索条 */
.course-search { display: flex; gap: 8px; margin: 0 0 14px; }
.course-search-input { flex: 1; height: 40px; padding: 0 12px; border: 1px solid var(--border, #e5e8ef); border-radius: var(--radius-md); background: var(--bg-card); font-size: var(--font-body); color: var(--text-title); }
.course-search-input:focus { outline: none; border-color: var(--brand); }
.course-search-btn { flex: none; width: 68px; height: 40px; border: none; border-radius: var(--radius-md); background: var(--brand-gradient); color: #fff; font-size: var(--font-body); font-weight: 600; cursor: pointer; }

/* 商店列表：卡网格（窄屏两列，卡内图文 + 底部价/已拥有）。限定 .course-grid 祖先，与 #coursesRoot 行卡彻底隔离 */
.course-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.course-grid .course-card { display: flex; flex-direction: column; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; text-decoration: none; }
.course-grid .course-cover { position: relative; aspect-ratio: 16 / 10; background: var(--brand-light); }
.course-grid .course-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.course-grid .course-cover-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.course-grid .course-badge-public { position: absolute; top: 6px; left: 6px; padding: 1px 6px; border-radius: var(--radius-sm); background: rgba(22, 100, 255, .9); color: #fff; font-size: var(--font-tip); font-style: normal; }
.course-grid .course-info { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px; flex: 1; }
.course-grid .course-name { font-size: var(--font-body); font-weight: 600; color: var(--text-title); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.course-grid .course-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--font-tip); color: var(--text-tip); }
.course-grid .course-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 4px; }
.course-grid .course-price { color: var(--danger); font-size: var(--font-body); font-weight: 600; }
.course-grid .course-owned { color: var(--success); font-size: var(--font-tip); font-weight: 600; }
.course-grid .course-owned[hidden] { display: none; }
.course-empty { padding: 40px 0; text-align: center; color: var(--text-tip); font-size: var(--font-body); }

/* ===== 首页「精选课程」卡美化（仅作用 .course-home-courses，商店页 .course-grid 不受影响） ===== */
.course-home-courses { gap: 14px; }
.course-home-courses .course-card {
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(16, 42, 80, .08);
  transition: transform .16s ease, box-shadow .16s ease;
}
.course-home-courses .course-card:active { transform: translateY(2px) scale(.995); box-shadow: 0 3px 10px rgba(16, 42, 80, .10); }
/* 封面改 4:3（更贴缩略图比例），底部压暗渐隐承托信息、无图时用品牌渐变占位 */
.course-home-courses .course-cover { aspect-ratio: 4 / 3; background: var(--brand-gradient); }
.course-home-courses .course-cover::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 31, 60, 0), rgba(10, 31, 60, .34));
}
.course-home-courses .course-cover-ph { color: #dbe8fb; }
/* 学时角标：封面右上深色玻璃胶囊 + 时钟图标 */
.course-hours {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: var(--radius-round);
  background: rgba(10, 31, 60, .55); color: #fff;
  font-size: var(--font-tag); font-style: normal; line-height: 1.5;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.course-home-courses .course-info { padding: 10px 12px 12px; gap: 6px; }
.course-home-courses .course-name { font-size: var(--font-title); line-height: 1.3; min-height: 2.6em; }
.course-home-courses .course-meta { color: var(--text-sub); font-size: var(--font-sub); }
.course-home-courses .course-teacher { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.course-home-courses .course-foot { align-items: center; padding-top: 8px; margin-top: auto; }
.course-home-courses .course-price { color: var(--gold-deep); font-size: var(--font-title); font-weight: 700; }
/* 「去学习」引导胶囊贴右下；home.js 显示「已拥有」时（去掉 hidden）自动收起引导 */
.course-home-courses .course-go {
  display: inline-flex; align-items: center; gap: 1px; margin-left: auto;
  padding: 4px 12px; border-radius: var(--radius-round);
  background: var(--brand-light); color: var(--brand);
  font-size: var(--font-sub); font-weight: 600;
}
.course-home-courses .course-owned { margin-left: auto; }
.course-home-courses .course-owned:not([hidden]) ~ .course-go { display: none; }

/* 商店列表：分页 */
.course-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.course-page { padding: 6px 12px; border: 1px solid var(--border, #e5e8ef); border-radius: var(--radius-md); background: var(--bg-card); color: var(--brand); font-size: var(--font-sub); text-decoration: none; }
.course-page-cur { color: var(--text-tip); font-size: var(--font-sub); }

/* 详情：头 + CTA */
.cs-head { display: flex; flex-direction: column; gap: 8px; }
.cs-cover { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: var(--brand-light); overflow: hidden; }
.cs-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-cover-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.cs-name { margin: 0; font-size: 20px; font-weight: 700; color: var(--text-title); }
.cs-meta { font-size: var(--font-sub); color: var(--text-tip); }
.cs-cta { margin-top: 4px; padding: 12px; border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-card); }
.cs-cta-loading, .cs-cta-tip { color: var(--text-tip); font-size: var(--font-sub); text-align: center; }
.cs-opened { color: var(--success); font-size: var(--font-body); font-weight: 600; margin-bottom: 10px; }
.cs-start, .cs-buy { display: block; width: 100%; text-align: center; }
.cs-buy { text-decoration: none; }
.cs-tiers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cs-tier { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 88px; padding: 8px 10px; border: 1px solid var(--border, #e5e8ef); border-radius: var(--radius-md); background: var(--bg-page); }
.cs-tier-label { font-size: var(--font-tip); color: var(--text-tip); }
.cs-tier-price { font-size: var(--font-body); font-weight: 600; color: var(--danger); }

/* 学习中心：课程 section 行（复用 .plan-row）上的「更多 / 价」小元素 */
.study-course-more { margin-left: auto; color: var(--brand); font-size: var(--font-sub); font-weight: 400; text-decoration: none; }
.study-course-price { flex: none; margin-left: 8px; color: var(--danger); font-size: var(--font-sub); font-weight: 600; }

@media (min-width: 768px) {
  .course-grid { grid-template-columns: repeat(3, 1fr); }
}