/* ==========================================================================
   pc.css — 电脑端主站样式（占根 /，机构官网 canonical 主版）。
   桌面优先版式：fixed 顶栏（横向主导航 + hover 二级下拉）→ 1200 版心主体 → 多栏页脚。
   设计 token：深蓝(#1a4f8b) + 金铜(#c8a45c) 点缀，权威大气简洁；与移动端品牌同源、配色独立升级。
   toast/modal 复用移动端类名（.site-toast/.site-modal），pc-site.js 逻辑一致。
   <1024px 仅做「可用降级」（限宽、下拉转按序展开），窄屏导航交移动版，不复制移动抽屉。
   ========================================================================== */

/* ===== 设计 token（深蓝 + 金铜，权威大气） ===== */
:root {
  /* 深蓝主色系 */
  --navy-900: #0a1f3c;
  --navy-800: #0e2a52;
  --navy-700: #123a6b;
  --brand: #1a4f8b;
  --brand-dark: #123a6b;
  --brand-light: #eef3fa;
  --brand-gradient: linear-gradient(135deg, #1a4f8b, #2d6cb5);

  /* 金铜点缀系（克制使用：装饰线/次按钮/medal 描边/关键数字） */
  --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: 12px;
  --font-tip: 13px;
  --font-sub: 14px;
  --font-body: 15px;
  --font-title: 20px;
  --font-head: 28px;
  --font-hero: clamp(32px, 4.4vw, 52px);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-round: 999px;

  --shadow-sm: 0 1px 6px rgba(16, 42, 80, 0.05);
  --shadow-card: 0 2px 12px rgba(16, 42, 80, 0.05);
  --shadow-md: 0 8px 30px rgba(16, 42, 80, 0.08);
  --shadow-hover: 0 12px 32px rgba(16, 42, 80, 0.12);
  --gap: 24px;
  --sec-gap: 64px;

  --pc-topbar-h: 64px;   /* 第一层：品牌 + 搜索 */
  --pc-navbar-h: 56px;   /* 第二层：主导航 + 登录 */
  --pc-head-h: 120px;    /* = topbar + navbar，供 main 最小高度计算（顶栏已改普通流，不再用于占位/定位偏移） */
  --pc-maxw: 1200px;
}

/* ===== 基础 ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
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.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; border: 0; display: block; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select { font-family: inherit; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }

/* ===== 版心 ===== */
.pc-wrap {
  max-width: var(--pc-maxw);
  margin: 0 auto;
  padding: 0 var(--gap);
  width: 100%;
}
.pc-main { min-height: calc(100vh - var(--pc-head-h)); }
.pc-page-title {
  margin: 24px auto 8px;
  font-size: var(--font-head);
  font-weight: 700;
  color: var(--text-title);
}

/* ===== 顶栏（普通文档流板块，不浮动：随页面滚走；双层：上层品牌+搜索 / 下层导航+登录） ===== */
.pc-top {
  position: relative;
  z-index: 100;   /* 高于主体，保证二级下拉菜单仍浮在内容之上 */
  background: var(--bg-card);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}
/* 第一层：品牌（左） + 搜索（右） */
.pc-topbar { border-bottom: 1px solid var(--divider); }
.pc-topbar-inner {
  max-width: var(--pc-maxw);
  height: var(--pc-topbar-h);
  margin: 0 auto;
  padding: 0 var(--gap);
  display: flex;
  align-items: center;
  gap: 24px;
}
.pc-topbar-inner .pc-search { margin-left: auto; }
/* 第二层：主导航（左） + 登录（右） */
.pc-navbar {}
.pc-navbar-inner {
  max-width: var(--pc-maxw);
  height: var(--pc-navbar-h);
  margin: 0 auto;
  padding: 0 var(--gap);
  display: flex;
  align-items: center;
  gap: 24px;
}
/* .pc-top-spacer 已废弃：顶栏改为普通文档流后不再需要占位撑高（header.php 已移除该 div） */

.pc-brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.pc-brand-logo { height: 42px; width: auto; object-fit: contain; }
.pc-brand-mark {
  width: 42px; height: 42px; border-radius: var(--radius-md);
  background: var(--brand-gradient); display: grid; place-items: center; color: #fff;
}
.pc-brand-name { font-size: 21px; font-weight: 800; letter-spacing: 0.02em; color: var(--text-title); white-space: nowrap; }

/* 主导航（横向一级 + hover 下拉） */
.pc-nav { flex: 1 1 auto; }
.pc-nav-list { display: flex; align-items: center; gap: 4px; }
.pc-nav-item { position: relative; }
.pc-nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px; border-radius: var(--radius-md);
  font-size: var(--font-body); color: var(--text-main); white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.pc-nav-link:hover,
.pc-nav-item.open .pc-nav-link,
.pc-nav-item.active .pc-nav-link { color: var(--brand); background: transparent; box-shadow: inset 0 -2px 0 var(--gold); }
.pc-nav-trigger .pc-icon:last-child { margin-left: 2px; opacity: 0.6; transform: rotate(90deg); transition: transform 0.15s ease; }
.pc-nav-item.open .pc-nav-trigger .pc-icon:last-child { transform: rotate(-90deg); }

/* 二级下拉 */
.pc-submenu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 200px; padding: 8px; margin-top: 4px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-hover);
  display: grid; gap: 2px; z-index: 1001;
}
.pc-submenu::before {
  content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; /* 桥接 hover 间隙 */
}
.pc-subitem {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-md);
  font-size: var(--font-sub); color: var(--text-main);
}
.pc-subitem:hover { background: var(--brand-light); color: var(--brand); }

/* 搜索框（顶栏右侧，全站各页固定）：紧凑胶囊精修——聚焦柔光圈 + 右侧内嵌品牌渐变圆形按钮 + 过渡动效 */
.pc-search {
  flex: 0 0 auto; display: flex; align-items: center;
  width: 240px; height: 40px; padding-left: 14px;
  background: var(--bg-page); border: 1px solid var(--border);
  border-radius: var(--radius-round); overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.pc-search:hover { border-color: #d3dced; }
.pc-search:focus-within {
  border-color: var(--brand); background: #fff;
  box-shadow: 0 0 0 3px rgba(26, 79, 139, 0.12);
}
.pc-search-input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none;
  padding: 0; font-size: var(--font-sub); color: var(--text-main);
}
.pc-search-input::placeholder { color: var(--text-tip); }
.pc-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.pc-search-btn {
  flex: 0 0 auto; width: 32px; height: 32px; margin-right: 4px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--brand-gradient); color: #fff;
  box-shadow: 0 2px 6px rgba(26, 79, 139, 0.25);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.pc-search-btn:hover { filter: brightness(1.08); }
.pc-search-btn:active { transform: scale(0.94); }

/* 登录入口 */
.pc-auth { flex: 0 0 auto; }
.pc-login {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 18px; border-radius: var(--radius-round);
  background: var(--brand-gradient); color: #fff; font-size: var(--font-sub); font-weight: 600;
}
.pc-login:hover { opacity: 0.92; }
/* 已登录：头像 + 下拉（pc-site.js 注入 .pc-user 结构） */
.pc-user { position: relative; }
.pc-user-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 10px 0 6px; border-radius: var(--radius-round);
  background: var(--bg-page); color: var(--text-main); font-size: var(--font-sub);
}
.pc-user-btn:hover { background: var(--brand-light); }
.pc-avatar {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  background: var(--brand-gradient); color: #fff; display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
}
.pc-user-menu {
  position: absolute; top: 100%; right: 0; min-width: 160px; margin-top: 6px;
  padding: 6px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-hover); z-index: 1002;
}
/* 桥接按钮与菜单之间的 6px hover 间隙：否则鼠标下移穿过此隙时脱离 .pc-user 触发 mouseleave，菜单提前收起（同 .pc-submenu 手法） */
.pc-user-menu::before {
  content: ''; position: absolute; top: -6px; left: 0; right: 0; height: 6px;
}
.pc-user-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: var(--radius-md); font-size: var(--font-sub); color: var(--text-main);
}
.pc-user-menu a:hover { background: var(--brand-light); color: var(--brand); }
.pc-user-menu .pc-signout { color: var(--danger); }
.pc-user-menu .pc-signout:hover { background: #fff0f0; color: var(--danger); }

/* ===== 首页全屏 Hero（深蓝渐变 + 金铜光晕，纯 CSS 无外部图） ===== */
.pc-hero { position: relative; overflow: hidden; background: var(--navy-900); color: #fff; }
.pc-hero-bg { position: absolute; inset: 0; background-color: var(--navy-800); }
.pc-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(1000px 480px at 78% 16%, rgba(200, 164, 92, 0.20), transparent 60%),
    radial-gradient(760px 420px at 12% 88%, rgba(45, 108, 181, 0.35), transparent 62%),
    linear-gradient(115deg, rgba(10, 31, 60, 0.96) 0%, rgba(14, 42, 82, 0.90) 46%, rgba(18, 58, 107, 0.80) 100%);
}
.pc-hero-inner {
  position: relative; z-index: 1;
  min-height: clamp(520px, 78vh, 720px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding-top: 48px; padding-bottom: 48px;
}
/* hero 内容层（eyebrow/title/sub/cta/btn/points）的视觉样式已抽入默认 Hero 文案模板（banners.caption_html 自带 <style>，
   见后台「首页轮播图」弹窗与 website_pc/views/home.php 的 $heroDefaultCaption）；此处只保留结构与布局锚点，自定义文案需自带样式。 */

/* ===== 首屏大横幅轮播（.pc-hero--carousel）：后台配置的电脑端轮播图作为 hero 背景层，文案浮于其上 ===== */
/* 轮播层铺满 hero（覆盖 .pc-banner 默认的居中限宽/外边距/圆角/阴影），图高随 hero 而非固定 420px */
.pc-hero--carousel .pc-hero-carousel { position: absolute; inset: 0; z-index: 0; margin: 0; max-width: none; border-radius: 0; box-shadow: none; }
.pc-hero--carousel .pc-banner-track { height: 100%; }
.pc-hero--carousel .pc-banner-slide { height: 100%; }
.pc-hero--carousel .pc-banner-slide a { display: block; height: 100%; }
.pc-hero--carousel .pc-banner-slide img { width: 100%; height: 100%; object-fit: cover; }
/* 深色遮罩：左深右浅，保证左侧标题/按钮在任意花图上都有对比度；位于图片之上、箭头圆点之下 */
.pc-hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(10, 31, 60, 0.90) 0%, rgba(10, 31, 60, 0.66) 46%, rgba(10, 31, 60, 0.28) 100%); }
.pc-hero--carousel .pc-banner-arrow { z-index: 2; }
.pc-hero--carousel .pc-banner-dots { z-index: 2; bottom: 24px; }
/* 文案层不吃指针事件，点击穿透到底层轮播（拖拽/箭头/圆点可用）；仅交互元素恢复可点。仅作用于轮播版，渐变版 hero 不受影响 */
.pc-hero--carousel .pc-hero-inner { z-index: 3; pointer-events: none; }
.pc-hero--carousel .pc-hero-inner a { pointer-events: auto; }
/* hero 文案逐张配置（后台 caption_html 非空即显）：.pc-hero.no-caption（SSR 按首张、切页由 home-pc.js 按当前图文案是否为空添加）隐藏文案层与深色遮罩，纯图展示；容器保留撑 hero 高度，箭头/圆点保留 */
.pc-hero--carousel .pc-hero-inner,
.pc-hero--carousel .pc-hero-scrim { transition: opacity .4s ease, visibility .4s ease; }
.pc-hero--carousel.no-caption .pc-hero-inner,
.pc-hero--carousel.no-caption .pc-hero-scrim { opacity: 0; visibility: hidden; }

/* ===== 首页板块通用 ===== */
.pc-section { margin: var(--sec-gap) auto; }
/* 居中式板块标题（金铜短装饰线 + 大标题 + 副文案） */
.pc-sec-head--center { text-align: center; margin-bottom: 34px; }
.pc-sec-head--center .pc-sec-title { position: relative; display: inline-block; padding-top: 18px; }
.pc-sec-head--center .pc-sec-title::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 46px; height: 3px; border-radius: 2px; background: var(--gold-gradient);
}
.pc-sec-head--center .pc-sec-sub { margin-top: 10px; }
.pc-sec-head--center .pc-sec-more { position: static; display: inline-flex; margin-top: 14px; }
.pc-sec-head { position: relative; margin-bottom: 20px; }
.pc-sec-title { font-size: var(--font-head); font-weight: 700; color: var(--text-title); }
.pc-sec-sub { margin-top: 6px; font-size: var(--font-sub); color: var(--text-tip); }
.pc-sec-more {
  position: absolute; top: 4px; right: 0;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--font-sub); color: var(--brand);
}
.pc-sec-more:hover { gap: 8px; }
.pc-empty { padding: 40px 0; text-align: center; color: var(--text-tip); font-size: var(--font-sub); }
.pc-card { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

/* 轮播 */
.pc-banner { position: relative; margin: 40px auto 0; max-width: var(--pc-maxw); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.pc-banner-track { display: flex; transition: transform 0.45s ease; }
.pc-banner-track.dragging { transition: none; }
.pc-banner-slide { flex: 0 0 100%; }
.pc-banner-slide img { width: 100%; height: 420px; object-fit: cover; }
.pc-banner-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.32); color: #fff; display: grid; place-items: center;
  opacity: 0; transition: opacity 0.2s ease;
}
.pc-banner-arrow.prev { left: 16px; }
.pc-banner-arrow.next { right: 16px; }
.pc-banner:hover .pc-banner-arrow { opacity: 1; }
.pc-banner-arrow:hover { background: rgba(0, 0, 0, 0.55); }
.pc-banner-dots { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.pc-banner-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); cursor: pointer; transition: width 0.2s ease; }
.pc-banner-dot.on { background: #fff; width: 22px; border-radius: 6px; }

/* 服务宫格（横排图标卡）：桌面固定每行 8 列（版心≤1200，每列约123px）——≤8 个图标同占一行，>8 个从第 9 个起自动折到第二行 */
.pc-tiles {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--gap);
  margin: 32px auto;
}
.pc-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 24px 16px; background: var(--bg-card);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pc-tile::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gold-gradient); transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease;
}
.pc-tile:hover::before { transform: scaleX(1); }
.pc-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.pc-tile-icon {
  width: 56px; height: 56px; border-radius: var(--radius-md);
  background: var(--brand-light); display: grid; place-items: center;
}
.pc-tile-label { font-size: var(--font-body); color: var(--text-title); }

/* 培训班卡网格 */
.pc-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); }
.pc-plan-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-card);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pc-plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.pc-plan-thumb { width: 100%; height: 150px; object-fit: cover; }
.pc-plan-thumb-ph { display: grid; place-items: center; background: var(--brand-light); height: 150px; }
.pc-plan-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.pc-plan-name { font-size: var(--font-title); font-weight: 600; color: var(--text-title); line-height: 1.4; }
.pc-plan-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-plan-date { font-size: var(--font-tip); color: var(--text-tip); }
.pc-tag { font-style: normal; font-size: var(--font-tag); padding: 2px 8px; border-radius: var(--radius-sm); }
.pc-tag-brand { background: var(--brand-light); color: var(--brand); }
.pc-tag-gray { background: var(--divider); color: var(--text-sub); }
.pc-tag-success { background: #e6f7f0; color: var(--success); }
.pc-tag-danger { background: #fff0f0; color: var(--danger); }

/* ===== 首页「培训班」重设计：一个大面板 + 左右两列 + 横线分割的行（非卡片），观感对齐「榜上有名」 =====
   仅作用于 --home 修饰类；/plans 列表页仍用带缩略图的 auto-fill 卡片网格（共享 .pc-plan-grid/.pc-plan-card）。 */
.pc-plan-panel--home { padding: 6px 22px; }
.pc-plan-cols--home { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.pc-plan-cols--home.is-single { grid-template-columns: minmax(0, 640px); justify-content: center; }
.pc-plan-col--home { min-width: 0; }
/* 两列之间加竖直分割线：线落在两列交界，左右各留 24px（合计≈原 48px 间距）；align-items:stretch 使分割线等高贯穿 */
.pc-plan-cols--home:not(.is-single) .pc-plan-col--home:first-child { padding-right: 24px; }
.pc-plan-col--home + .pc-plan-col--home { border-left: 1px solid var(--divider); padding-left: 24px; }
/* 每条培训班为一行：左侧大序号 + 右侧文字，行与行用横线分隔（末行无底线） */
.pc-plan-row--home {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--divider);
}
.pc-plan-col--home .pc-plan-row--home:last-child { border-bottom: 0; }
.pc-plan-row--home:hover .pc-plan-name { color: var(--brand); }
/* 左侧大序号（金铜渐变描字、两位补零）——设计体系将金铜色保留给「关键数字」，用以提升设计感 */
.pc-plan-no--home {
  flex: 0 0 auto; min-width: 42px; text-align: center;
  font-size: 32px; 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;
}
.pc-plan-main--home { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pc-plan-row--home .pc-plan-name { font-size: 16px; line-height: 1.45; }

/* 考前练习入口 */
.pc-practice { display: grid; gap: 16px; }
.pc-practice-group {
  padding: 16px 18px; background: var(--bg-card);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  transition: box-shadow 0.18s ease;
}
.pc-practice-group:hover { box-shadow: var(--shadow-md); }
/* 工种一级类：对齐 /practice 目录页 .cat-block-title 手法（前置品牌渐变竖条 + 底部分隔线），
   不再是悬空的一行粗体字，与整站一级标题口径一致 */
.pc-practice-cat {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--font-title); font-weight: 700; color: var(--text-title);
  letter-spacing: .5px; margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--divider);
}
.pc-practice-cat::before {
  content: ''; flex: 0 0 auto; width: 4px; height: 16px; border-radius: 2px;
  background: var(--brand-gradient);
}
.pc-practice-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.pc-practice-tag {
  padding: 7px 16px; border-radius: var(--radius-round);
  background: var(--bg-page); border: 1px solid var(--border);
  font-size: var(--font-sub); color: var(--text-main); transition: all 0.15s ease;
}
.pc-practice-tag:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-1px); }

/* 双栏：榜上有名 + 政策资讯（宽屏左右并排，单栏时自动铺满；≤1023 媒体查询强制单栏） */
.pc-section-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px 32px; align-items: start; margin: var(--sec-gap) auto; }
.pc-section-cols > .pc-section { margin: 0; min-width: 0; }
.pc-col { min-width: 0; }

.pc-rank-card { padding: 8px 18px 18px; }
.pc-rank-tabs { display: flex; gap: 8px; padding: 12px 0; }
.pc-rank-tab {
  padding: 7px 18px; border-radius: var(--radius-round);
  font-size: var(--font-sub); color: var(--text-sub); background: var(--bg-page);
}
.pc-rank-tab.active { background: var(--brand-gradient); color: #fff; font-weight: 600; }
.pc-rank-head, .pc-rank-row {
  /* 列序：排名 | 姓名 | 工种 | 成绩。姓名通常 2~4 字、工种名较长，故姓名列收窄(0.7fr)、工种列加宽(1.3fr) */
  /* line-height:30px 使纯文本单元格与前三名奖牌图（高 30px）等高，从而 1~3 名与 4~10 名（圆形序号 26px）所有行行高一致 */
  display: grid; grid-template-columns: 64px 0.7fr 1.3fr 72px; align-items: center; gap: 8px; line-height: 30px;
}
.pc-rank-head { padding: 12px 0; font-size: var(--font-tip); color: var(--text-tip); border-bottom: 1px solid var(--divider); }
.pc-rank-row { padding: 12px 0; font-size: var(--font-sub); color: var(--text-main); border-bottom: 1px solid var(--divider); }
.pc-rank-row:last-child { border-bottom: 0; }
/* 前三名奖牌图（与移动端「榜上有名」同款：数字已内嵌于图片，隐藏 <em> 文本） */
.pc-medal {
  font-style: normal; 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;
  vertical-align: middle;
}
.pc-medal.m1 { background-image: url('medal-1.png'); }
.pc-medal.m2 { background-image: url('medal-2.png'); }
.pc-medal.m3 { background-image: url('medal-3.png'); }
/* 第 4~10 名：圆形灰色底序号徽章（与前三名奖牌图同为 26px 宽、左对齐） */
.pc-rank-num {
  font-style: normal; display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #d9dde4; color: #fff; font-weight: 700; 
  vertical-align: middle;align-content: center;margin-left:3px;
}
.pc-rank-foot { margin-top: 14px; text-align: center; font-size: var(--font-sub); color: var(--brand); cursor: pointer; }

.pc-news-card { padding: 6px 18px 10px; }
.pc-news-item { padding: 14px 0; border-bottom: 1px solid var(--divider); }
.pc-news-item:last-child { border-bottom: 0; }
.pc-news-title { display: flex; align-items: baseline; gap: 6px; font-size: var(--font-body); color: var(--text-title); font-weight: 600; line-height: 1.5; }
.pc-news-title:hover { color: var(--brand); }
.pc-news-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-news-meta { margin-top: 6px; font-size: var(--font-tip); color: var(--text-tip); }
.pc-news-meta a { color: var(--text-sub); }
.pc-news-meta a:hover { color: var(--brand); }

/* ===== 首页重排：榜单独立整行（排名左5右5两列）+ 资讯整行两栏卡片网格 ===== */
/* 榜上有名：整行满宽卡片，与主体其余板块（版心 .pc-wrap 宽 1200px）宽度一致（rank 结构/DOM 与 home-pc.js 约定一致） */
.pc-rank-card--home { max-width: none; margin: 0; }
/* 排名两列：左 1~5、右 6~10；不足 6 名（右列为空）时回落单列居中 */
.pc-rank-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.pc-rank-cols--single { grid-template-columns: minmax(0, 560px); justify-content: center; }
.pc-rank-col { min-width: 0; }
/* 左右两列中间加竖直分割线：线落在两列交界，左右各留 24px（合计≈原 48px 间距）；align-items:stretch 使分割线等高贯穿 */
.pc-rank-cols:not(.pc-rank-cols--single) .pc-rank-col:first-child { padding-right: 24px; }
.pc-rank-col + .pc-rank-col { border-left: 1px solid var(--divider); padding-left: 24px; }
/* 资讯网格：按可用宽度自动分栏（两分组→两栏等宽；单分组→铺满），顶部对齐 */
.pc-news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px 32px; align-items: start; }
.pc-news-panel { min-width: 0; }
.pc-news-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pc-news-panel-title { position: relative; margin: 0; padding-left: 12px; font-size: 17px; font-weight: 700; color: var(--text-title); }
.pc-news-panel-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 16px; border-radius: 2px; background: var(--brand-gradient); }
.pc-news-panel-more { display: inline-flex; align-items: center; gap: 3px; font-size: var(--font-sub); color: var(--text-tip); text-decoration: none; }
.pc-news-panel-more:hover { color: var(--brand); }
/* 资讯行：单行「圆点 · 标题（省略号） ······ 日期右对齐」 */
.pc-news-row { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--divider); color: var(--text-main); text-decoration: none; }
.pc-news-row:last-child { border-bottom: 0; }
.pc-news-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); opacity: .5; }
.pc-news-txt { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.pc-news-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-body); color: var(--text-title); }
.pc-news-row:hover .pc-news-name { color: var(--brand); }
.pc-news-date { flex: none; font-size: var(--font-tip); color: var(--text-tip); }

/* ===== 页脚（多栏） ===== */
.pc-footer { margin-top: 64px; background: var(--navy-900); color: #c4ccdd; }
.pc-footer-inner { max-width: var(--pc-maxw); margin: 0 auto; padding: 44px var(--gap) 24px; }
.pc-footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.pc-footer-title { display: inline-block; font-size: var(--font-title); font-weight: 700; color: #fff; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--gold); }
.pc-footer-intro { font-size: var(--font-sub); line-height: 1.8; color: #9aa6bf; max-width: 420px; }
.pc-footer-contact { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: var(--font-sub); color: #c4ccdd; }
.pc-footer-links li { margin-bottom: 10px; }
.pc-footer-links a { font-size: var(--font-sub); color: #9aa6bf; transition: color 0.15s ease; }
.pc-footer-links a:hover { color: var(--gold-light); }
.pc-footer-bottom {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
  margin-top: 32px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--font-tip); color: #7f8aa3;
}
.pc-footer-beian { display: flex; gap: 16px; }
.pc-footer-beian a { color: #7f8aa3; }
.pc-footer-beian a:hover { color: #c4ccdd; }

/* ===== toast / modal（与移动端同名类，逻辑一致） ===== */
.site-toast {
  position: fixed; left: 50%; bottom: 12%; transform: translateX(-50%);
  z-index: 2000; max-width: 60%; background: rgba(0, 0, 0, 0.78); color: #fff;
  font-size: var(--font-sub); line-height: 1.5; padding: 12px 22px;
  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: 90%; max-width: 420px; background: var(--bg-card); border-radius: var(--radius-lg); padding: 24px 22px 18px; }
.site-modal-title { font-size: var(--font-title); font-weight: 600; color: var(--text-title); text-align: center; }
.site-modal-content { margin-top: 12px; font-size: var(--font-sub); color: var(--text-sub); line-height: 1.6; text-align: center; }
.site-modal-btns { display: flex; gap: 12px; margin-top: 22px; }
.site-modal-btns button { flex: 1; height: 42px; border-radius: var(--radius-md); font-size: var(--font-body); }
.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; }

/* ===== 图标包裹（Icon::render 输出的 svg 对齐文字基线） ===== */
.pc-icon, svg.pc-i { vertical-align: middle; }

/* ===== 内容页通用元件（plans/portal/search/cert 共用） ===== */
/* 面包屑 */
.pc-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 20px auto 0; font-size: var(--font-sub); color: var(--text-tip); }
.pc-crumb a { color: var(--text-sub); }
.pc-crumb a:hover { color: var(--brand); }
.pc-crumb .pc-crumb-sep { color: var(--border); }
.pc-crumb .pc-crumb-cur { color: var(--text-main); }
/* 按钮 / 链接按钮 */
.pc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px; padding: 0 22px; border-radius: var(--radius-md);
  font-size: var(--font-body); font-weight: 600; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-main); transition: all 0.15s ease;
}
.pc-btn:hover { border-color: var(--brand); color: var(--brand); }
.pc-btn-primary { background: var(--brand-gradient); border-color: transparent; color: #fff; }
.pc-btn-primary:hover { color: #fff; opacity: 0.92; }
.pc-btn-sm { height: 34px; padding: 0 16px; font-size: var(--font-sub); }
.pc-btn[disabled] { opacity: 0.5; pointer-events: none; }
/* 内容主体容器（限宽，比首页版心略窄更易读） */
.pc-content { max-width: 900px; }
.pc-content-wide { max-width: var(--pc-maxw); }
/* 资讯列表（栏目 /list/{id}） */
.pc-list { display: grid; gap: 4px; }
.pc-list-item {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 4px; border-bottom: 1px solid var(--divider);
}
.pc-list-item:last-child { border-bottom: 0; }
.pc-list-main { flex: 1 1 auto; min-width: 0; }
.pc-list-title { display: flex; align-items: baseline; gap: 8px; font-size: var(--font-title);color: var(--text-title); line-height: 1.5; }
.pc-list-title:hover { color: var(--brand); }
.pc-list-sum { margin-top: 8px; font-size: var(--font-sub); color: var(--text-sub); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-list-meta { margin-top: 8px; font-size: var(--font-tip); color: var(--text-tip); display: flex; gap: 12px; flex-wrap: wrap; }
.pc-list-meta a:hover { color: var(--brand); }
.pc-list-thumb { flex: 0 0 auto; width: 168px; height: 108px; object-fit: cover; border-radius: var(--radius-md); background: var(--bg-page); }
/* 资讯详情（/news/{id}） */
.pc-article-head { text-align: center; margin-bottom: 8px; }
.pc-article-title { font-size: 28px; font-weight: 800; color: var(--text-title); line-height: 1.4; }
.pc-article-meta { margin-top: 14px; font-size: var(--font-tip); color: var(--text-tip); display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.pc-article-meta a:hover { color: var(--brand); }
.pc-article-div { height: 1px; background: var(--divider); margin: 20px 0 28px; }
/* 富文本正文（后台编辑器产出，清洗后直出；超宽由容器兜底） */
.rich { font-size: var(--font-body); color: var(--text-main); line-height: 1.9; word-break: break-word; }
.rich img { max-width: 100%; height: auto; margin: 12px auto; border-radius: var(--radius-md); }
.rich p { margin: 0 0 14px; }
.rich h1, .rich h2, .rich h3 { margin: 22px 0 12px; color: var(--text-title); line-height: 1.5; }
.rich h1 { font-size: 24px; } .rich h2 { font-size: 21px; } .rich h3 { font-size: 18px; }
.rich ul { list-style: disc; padding-left: 24px; margin: 0 0 14px; }
.rich ol { list-style: decimal; padding-left: 24px; margin: 0 0 14px; }
.rich a { color: var(--brand); text-decoration: underline; }
.rich table { width: 100%; border-collapse: collapse; margin: 14px 0; table-layout: fixed; }
.rich th, .rich td { border: 1px solid var(--border); padding: 8px 10px; font-size: var(--font-sub); }
.rich blockquote { margin: 14px 0; padding: 10px 16px; border-left: 3px solid var(--brand); background: var(--brand-light); color: var(--text-sub); }
.rich pre, .rich code { background: var(--divider); border-radius: var(--radius-sm); font-size: var(--font-sub); }
.rich pre { padding: 12px 14px; overflow: auto; } .rich code { padding: 1px 5px; }
/* 相关推荐 */
.pc-related { margin-top: 36px; }
.pc-related-title { font-size: var(--font-title); font-weight: 700; color: var(--text-title); margin-bottom: 8px; }
/* 分页 */
.pc-pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 32px 0 8px; flex-wrap: wrap; }
.pc-pager a, .pc-pager span {
  min-width: 38px; height: 38px; padding: 0 12px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--font-sub); color: var(--text-main); background: var(--bg-card); border: 1px solid var(--border);
}
.pc-pager a:hover { border-color: var(--brand); color: var(--brand); }
.pc-pager .cur { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.pc-pager .disabled { color: var(--text-tip); background: var(--bg-page); pointer-events: none; }
/* 单页（/page/{id}）与通用区块标题 */
.pc-block-title { font-size: var(--font-head); font-weight: 700; color: var(--text-title); margin-bottom: 16px; }
/* 内联搜索条（内容页顶部） */
.pc-searchbar-wrap { margin: 20px 0 4px; }
.pc-searchbar { display: flex; align-items: center; height: 48px; max-width: 640px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-round); overflow: hidden; }
.pc-searchbar:focus-within { border-color: var(--brand); }
.pc-searchbar-input { flex: 1 1 auto; border: 0; outline: none; background: transparent; padding: 0 20px; font-size: var(--font-body); color: var(--text-main); }
.pc-searchbar-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 26px; background: var(--brand-gradient); color: #fff; font-size: var(--font-body); font-weight: 600; }
.pc-searchbar-btn:hover { opacity: 0.92; }

/* 搜索结果页（/search） */
.pc-sr-guide { margin: 24px 0; padding: 20px 24px; background: var(--brand-light); border-radius: var(--radius-md); font-size: var(--font-sub); color: var(--text-sub); line-height: 1.8; }
.pc-sr-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 8px; }
.pc-sr-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px;
  border-radius: var(--radius-round); background: var(--bg-card); border: 1px solid var(--border);
  font-size: var(--font-sub); color: var(--text-main); transition: all 0.15s ease;
}
.pc-sr-chip em { font-style: normal; font-size: var(--font-tag); color: var(--text-tip); }
.pc-sr-chip:hover { border-color: var(--brand); color: var(--brand); }
.pc-sr-chip.cur { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.pc-sr-chip.cur em { color: rgba(255, 255, 255, 0.85); }
.pc-sr-stat { margin: 8px 0 4px; font-size: var(--font-sub); color: var(--text-sub); }
.pc-sr-stat em { font-style: normal; color: var(--brand); font-weight: 700; }
.pc-sr-block { margin: 24px 0; }
.pc-sr-block-title { position: relative; display: flex; align-items: center; gap: 8px; font-size: var(--font-title); font-weight: 700; color: var(--text-title); padding-bottom: 12px; border-bottom: 1px solid var(--divider); }
.pc-sr-block-ico { color: var(--brand); display: inline-flex; }
.pc-sr-block-num { font-style: normal; font-size: var(--font-tip); font-weight: 400; color: var(--text-tip); }
.pc-sr-block-more { position: absolute; right: 0; font-size: var(--font-sub); font-weight: 400; color: var(--brand); }
.pc-sr-block-more:hover { text-decoration: underline; }
.pc-sr-list { display: grid; gap: 2px; }
.pc-sr-item { display: flex; align-items: center; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--divider); }
.pc-sr-item:last-child { border-bottom: 0; }
.pc-sr-body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.pc-sr-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--font-body); font-weight: 600; color: var(--text-title); line-height: 1.5; }
.pc-sr-item:hover .pc-sr-title { color: var(--brand); }
.pc-sr-desc { font-size: var(--font-sub); color: var(--text-sub); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-sr-meta { font-size: var(--font-tip); color: var(--text-tip); }
.pc-sr-cover { flex: 0 0 auto; width: 120px; height: 78px; object-fit: cover; border-radius: var(--radius-md); background: var(--bg-page); }
.pc-sr-tips { font-size: var(--font-sub); color: var(--text-tip); }
.pc-sr-tips a { color: var(--brand); }
/* 关键词高亮（控制器直出的 <em class="kw-hl">） */
.kw-hl { font-style: normal; color: var(--brand); background: var(--brand-light); border-radius: 2px; padding: 0 2px; }

/* ===== 证书查询页（/cert-query） ===== */
/* 页面专属（bodyClass=pc-page-cert 作用域，不影响其它 PC 页）：标题「证书查询」居中显示 */
body.pc-page-cert .pc-page-title { text-align: center; }
.pc-panel { max-width: 720px; margin: 24px auto 0; padding: 28px 32px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.pc-tip { margin-bottom: 20px; padding: 12px 16px; background: var(--brand-light); border-radius: var(--radius-md); font-size: var(--font-sub); color: var(--text-sub); line-height: 1.6; }
.pc-field { margin-bottom: 18px; }
.pc-label { display: block; margin-bottom: 8px; font-size: var(--font-sub); font-weight: 600; color: var(--text-main); }
.pc-input {
  width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: var(--font-body); color: var(--text-main); background: var(--bg-page); transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pc-input:focus { outline: none; border-color: var(--brand); background: var(--bg-card); box-shadow: 0 0 0 3px rgba(26, 79, 139, 0.12); }
.pc-panel .pc-btn { width: 100%; height: 48px; }
/* 结果卡：cert-query.js 注入，全部限定在 .cq-result 内，避免 .card/.k/.v 等通用名污染全局 */
.cq-result { max-width: 720px; margin: 20px auto; }
.cq-result .cq-sum { margin-bottom: 12px; font-size: var(--font-sub); color: var(--text-sub); }
.cq-result .card { padding: 20px 24px; margin-bottom: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.cq-result .card-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--divider); }
.cq-result .card-head svg { flex: 0 0 auto; }
.cq-result .card-status { font-size: var(--font-title); font-weight: 700; color: var(--text-title); }
.cq-result .ok-text { color: #00a870; }
.cq-result .bad-text { color: #f53f3f; }
.cq-result .kv-row { display: flex; gap: 12px; padding: 7px 0; font-size: var(--font-body); line-height: 1.6; }
.cq-result .kv-row .k { flex: 0 0 96px; color: var(--text-tip); }
.cq-result .kv-row .v { flex: 1 1 auto; color: var(--text-main); word-break: break-all; }
.cq-result .tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-round); font-size: var(--font-tag); font-weight: 600; }
.cq-result .tag-public { background: var(--brand-light); color: var(--brand); }
.cq-result .cq-pub-tag { margin-left: auto; }
.cq-result .cq-pub-tip { margin: 12px 0; padding: 12px 14px; background: var(--brand-light); border-radius: var(--radius-md); font-size: var(--font-sub); color: var(--text-sub); line-height: 1.7; }
.cq-result .cq-pub-tip b { color: var(--brand); }
.cq-result .bad-tip { margin-top: 10px; padding: 12px 14px; background: #fef0f0; border-radius: var(--radius-md); font-size: var(--font-sub); color: #c9252d; line-height: 1.7; }
.cq-result .cq-actions { display: flex; gap: 12px; margin-top: 16px; }
.cq-result .cq-btn {
  height: 40px; padding: 0 20px; border-radius: var(--radius-md); border: 1px solid var(--brand);
  background: var(--bg-card); color: var(--brand); font-size: var(--font-sub); font-weight: 600; cursor: pointer; transition: all 0.15s ease;
}
.cq-result .cq-btn:hover { background: var(--brand); color: #fff; }
.cq-result .cq-btn[disabled] { opacity: 0.5; pointer-events: none; }
.cq-result .cq-imgbox { margin-top: 16px; padding: 16px; background: var(--bg-page); border: 1px dashed var(--border); border-radius: var(--radius-md); text-align: center; }
.cq-result .cq-img-tip { font-size: var(--font-sub); color: var(--text-tip); }
.cq-result .cq-img-fail { font-size: var(--font-sub); color: #c9252d; }
.cq-result .cq-img { max-width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }

/* ===== 登录页（/login，与 login.js 选择器对齐） ===== */
/* 登录页舞台：body.pc-page-login 由 LoginController 注入（避免与顶栏 .pc-auth 命名冲突）。
   将主体改为竖直居中的渐变舞台，卡片居中悬浮，消除大片空白。 */
body.pc-page-login .pc-main {
  display: flex; align-items: center; justify-content: center;
  padding: 48px 24px 64px;
  background:
    radial-gradient(1100px 460px at 12% -10%, rgba(26, 79, 139, .12), transparent 60%),
    radial-gradient(880px 420px at 106% 2%, rgba(26, 79, 139, .10), transparent 55%),
    linear-gradient(180deg, #eef3fa 0%, var(--bg-page) 46%);
}
.pc-auth { display: flex; justify-content: center; padding: 0 24px; }
body.pc-page-login .pc-auth { padding: 0; }
.login { display: flex; flex-direction: column; width: 440px; max-width: 100%; padding: 40px 40px 34px; background: var(--bg-card); border: 0; border-radius: 20px; box-shadow: 0 24px 60px rgba(20, 40, 80, .14), 0 2px 8px rgba(20, 40, 80, .06); }
.login .logo-area { text-align: center; margin-bottom: 22px; }
.login .logo-badge { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 20px; background: var(--brand-gradient); box-shadow: 0 12px 26px rgba(26, 79, 139, .32); }
.login .logo { margin-top: 14px; font-size: 23px; font-weight: 800; letter-spacing: .5px; color: var(--text-title); }
.login .slogan { margin-top: 5px; font-size: var(--font-sub); color: var(--text-tip); }
/* 标签页：分段胶囊控件（浅底轨道 + 选中白底浮起），取代旧下划线式 */
.login .tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 22px; background: var(--bg-page); border-radius: var(--radius-round); }
.login .tab { flex: 1 1 0; position: relative; padding: 9px 2px; font-size: var(--font-body); font-weight: 600; color: var(--text-sub); background: none; border: 0; border-radius: var(--radius-round); cursor: pointer; transition: color .18s ease, background .18s ease, box-shadow .18s ease; }
.login .tab:hover { color: var(--brand); }
.login .tab.active { color: var(--brand); background: var(--bg-card); box-shadow: 0 2px 8px rgba(20, 40, 80, .1); }
.login .login-pane[hidden] { display: none; }
.login .login-field { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-page); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.login .login-field:hover { border-color: rgba(26, 79, 139, .35); }
.login .login-field:focus-within { border-color: var(--brand); background: var(--bg-card); box-shadow: 0 0 0 3px rgba(26, 79, 139, .12); }
.login .login-field svg { flex: 0 0 auto; }
.login .input { flex: 1 1 auto; min-width: 0; border: 0; background: none; font-size: var(--font-body); color: var(--text-main); outline: none; }
.login .login-tip { font-size: var(--font-sub); color: var(--text-tip); margin-bottom: 14px; }
.login .wx-pane { text-align: center; padding: 6px 0 4px; }
.login .wx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; border: 0; border-radius: 12px; background: #07c160; color: #fff; font-size: var(--font-body); font-weight: 600; cursor: pointer; box-shadow: 0 8px 20px rgba(7, 193, 96, .28); transition: filter .15s ease, transform .15s ease; }
.login .wx-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.login .wx-btn:active { transform: translateY(0); }
.login .wx-hint { margin-top: 12px; font-size: var(--font-sub); color: var(--text-tip); }
/* 微信扫码：微信官方 wxLogin.js 内嵌 iframe 固定为 300×400（含「微信登录」抬头 + 二维码 + 底部提示），
   容器须按此尺寸留足空间、不可 overflow 裁切，否则二维码底部被截（旧 220×220 缩放致此问题）。 */
.login .wx-qr { width: 300px; height: 340px; max-width: 100%; margin: 6px auto 0; display: flex; align-items: center; justify-content: center;  border-radius: var(--radius-md); background: #fff;  }
.login .wx-qr iframe { border: 0; width: 100%; height: 100%; }
.login .wx-qr-loading { font-size: var(--font-sub); color: var(--text-tip); }
.login .wx-qr-tip { margin-top: 14px; font-size: var(--font-sub); color: var(--text-sub); }
.login .wx-qr-fallback { display: inline-block; margin-top: 8px; font-size: var(--font-sub); color: var(--brand); }
.login .wx-qr-fallback[hidden] { display: none; }
.login .agreement { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 18px; font-size: var(--font-sub); color: var(--text-sub); }
/* 微信扫码态由 login.js 置 hidden 隐藏本行（display:flex 会盖过 [hidden] 的 UA 默认，需显式声明） */
.login .agreement[hidden] { display: none; }
.login .agreement input { margin-right: 4px; accent-color: var(--brand); width: 15px; height: 15px; cursor: pointer; }
.login .link { color: var(--brand); cursor: pointer; }
.login .link:hover { text-decoration: underline; }
.login .submit { width: 100%; height: 50px; border: 0; border-radius: 12px; background: var(--brand-gradient); color: #fff; font-size: var(--font-body); font-weight: 700; letter-spacing: 2px; cursor: pointer; box-shadow: 0 12px 26px rgba(26, 79, 139, .28); transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; }
.login .submit:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(26, 79, 139, .34); }
.login .submit:active { transform: translateY(0); }
.login .submit[hidden] { display: none; }
.login .submit[disabled] { opacity: .6; pointer-events: none; }
.login .login-alt { margin-top: 16px; text-align: center; font-size: var(--font-sub); color: var(--text-tip); }
.login .login-alt[hidden] { display: none; }
@media (max-width: 520px) {
  body.pc-page-login .pc-main { padding: 28px 16px 40px; }
  .login { padding: 30px 22px 26px; border-radius: 16px; }
}
/* 协议弹层（login.js 动态注入 .mask/.agreement-box） */
.mask { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; background: rgba(15, 25, 45, 0.45); }
.agreement-box { width: 640px; max-width: 92vw; max-height: 82vh; display: flex; flex-direction: column; padding: 24px 28px; background: var(--bg-card); border-radius: var(--radius-lg); }
.agreement-title { font-size: var(--font-title); font-weight: 700; color: var(--text-title); margin-bottom: 14px; }
.agreement-scroll { flex: 1 1 auto; overflow: auto; font-size: var(--font-sub); color: var(--text-sub); line-height: 1.8; }
.agreement-close { margin-top: 18px; height: 42px; border: 0; border-radius: var(--radius-md); background: var(--brand); color: #fff; font-size: var(--font-body); cursor: pointer; }
/* 微信授权回调 / 中继过场状态卡 */
.wxb-wrap { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 40px 24px; }
.wxb-box { width: 360px; max-width: 100%; padding: 36px 32px; text-align: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.wxb-icon { width: 64px; height: 64px; line-height: 64px; margin: 0 auto 16px; border-radius: 50%; font-size: 30px; background: var(--brand-light); color: var(--brand); }
.wxb-icon.ok { background: #e7f7ef; color: #00a870; }
.wxb-icon.fail { background: #fef0f0; color: #f53f3f; }
.wxb-title { font-size: var(--font-title); font-weight: 700; color: var(--text-title); }
.wxb-msg { margin-top: 12px; font-size: var(--font-sub); color: var(--text-sub); line-height: 1.7; }
.wxb-msg[hidden] { display: none; }
.wxb-btn { margin-top: 20px; height: 40px; padding: 0 22px; border: 1px solid var(--brand); border-radius: var(--radius-md); background: var(--bg-card); color: var(--brand); font-size: var(--font-sub); font-weight: 600; cursor: pointer; }
.wxb-btn:hover { background: var(--brand); color: #fff; }
.wxb-btn[hidden] { display: none; }

/* ===== 报名页（/enroll · /enroll/{id} · /enroll/query，与 enroll.js 选择器对齐） ===== */
/* 通用小件（报名视图与结果共用） */
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--radius-round); font-size: var(--font-tag); font-weight: 600; font-style: normal; }
.tag-brand { background: var(--brand-light); color: var(--brand); }
.tag-public { background: rgba(0, 168, 112, 0.12); color: #00875c; }
.tag-success { background: rgba(0, 168, 112, 0.12); color: #00875c; }
.tag-danger { background: #fef0f0; color: #c9252d; }
.tag-gray { background: var(--bg-page); color: var(--text-sub); }
/* 智能练习（练习记录台账 type=7）：与首页入口图标 .ico-smart 同紫系，与其余五个类别区分 */
.tag-smart { background: #f5ebff; color: #722ed1; }
.empty { padding: 28px; text-align: center; font-size: var(--font-sub); color: var(--text-tip); }
.cat-summary { max-width: var(--pc-maxw); margin: 20px auto 0; padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--font-sub); color: var(--text-sub); line-height: 1.7; }
.cat-summary a, .link { color: var(--brand); cursor: pointer; }
.cat-summary a:hover, .link:hover { text-decoration: underline; }
.er-h2 { position: relative; padding-left: 12px; font-size: var(--font-title); font-weight: 700; color: var(--text-title); margin-bottom: 16px; }
.er-h2::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 2px; background: var(--brand-gradient); }

/* 板块一：树形工种 / 培训类型下拉选择 */
.er-p1 { max-width: var(--pc-maxw); }
.er-pick { display: flex; flex-wrap: wrap; gap: 20px; }
.er-pick-item { flex: 1 1 320px; min-width: 280px; }
.er-pick-label { display: block; margin-bottom: 8px; font-size: var(--font-sub); font-weight: 600; color: var(--text-main); }
.er-tree { position: relative; }
.er-select {
  width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: var(--font-body); color: var(--text-main); background: var(--bg-page); text-align: left; cursor: pointer;
}
.er-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(26, 79, 139, 0.12); }
.er-tree-btn { display: flex; align-items: center; }
.er-tree-cur { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.er-tree-cur.ph { color: var(--text-tip); }
.er-tree-pop {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; max-height: 320px; overflow: auto;
  padding: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-hover);
}
.er-tree-pop[hidden] { display: none; }
.er-tree-row { display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: var(--radius-sm); font-size: var(--font-body); color: var(--text-main); cursor: pointer; }
.er-tree-row:hover { background: var(--brand-light); }
.er-tree-row.on { background: var(--brand); color: #fff; font-weight: 600; }
.er-tree-row.off { opacity: 0.5; pointer-events: none; }
.er-tree-cat { cursor: default; font-weight: 700; color: var(--text-title); background: none; }
.er-tree-cat:hover { background: var(--divider); }
.er-tree-row .er-tree-name { display: block; }
.er-tree-row[data-lvl="2"] .er-tree-name { padding-left: 18px; }
.er-tree-row[data-lvl="3"] .er-tree-name { padding-left: 36px; }
.er-tree-row[data-lvl="4"] .er-tree-name { padding-left: 54px; }
.er-tree-row[data-lvl="5"] .er-tree-name { padding-left: 72px; }
.er-pick-tip { margin-top: 18px; font-size: var(--font-sub); color: var(--text-tip); line-height: 1.6; }

/* 板块二：报名表概览 + 表单挂载 */
.er-p2 { max-width: var(--pc-maxw); margin-top: 8px; }
.er-p2[hidden] { display: none; }
.er-p2-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 12px; }
.er-p2-sum { font-size: var(--font-sub); color: var(--text-sub); }
.er-p2-batch { display: inline-flex; align-items: center; gap: 10px; }
.er-p2-batch label { font-size: var(--font-sub); color: var(--text-main); }
.er-p2-batch .er-select { width: auto; min-width: 220px; height: 40px; }
.er-form { max-width: var(--pc-maxw); }

/* 兜底折叠区（无 JS / 爬虫 / 旧收藏可见全部报名表真实链接） */
.er-all { max-width: var(--pc-maxw); margin-top: 24px; padding: 4px 24px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.er-all > summary { cursor: pointer; padding: 16px 0; font-size: var(--font-sub); font-weight: 600; color: var(--text-sub); list-style: none; }
.er-all > summary::-webkit-details-marker { display: none; }
.er-search { margin-bottom: 12px; }
.er-search-input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--font-body); color: var(--text-main); background: var(--bg-page); }
.er-search-input:focus { outline: none; border-color: var(--brand); background: var(--bg-card); }
.er-trade-wrap { margin-bottom: 8px; }
.er-trade { padding: 14px 4px 8px; }
.er-trade-main { display: inline-flex; align-items: center; gap: 8px; }
.er-trade-name { font-size: var(--font-body); font-weight: 700; color: var(--text-title); }
.er-row { display: flex; align-items: center; gap: 16px; padding: 14px 12px; border-radius: var(--radius-md); border: 1px solid transparent; }
.er-row:hover { background: var(--bg-page); border-color: var(--border); }
.er-row-main { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }
.er-row-name { font-size: var(--font-body);color: var(--text-title); }
.er-row:hover .er-row-name { color: var(--brand); }
.er-row-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.er-row-arrow { flex: 0 0 auto; display: inline-flex; }

/* 表单页头部：返回链→页首，.er-head 卡片（工种/状态标签 + 适用工种 + 简介 + 公共说明），与下方栅格同宽对齐 */
.er-navback { margin-bottom: 14px; font-size: var(--font-sub); }
.er-navback a { display: inline-flex; align-items: center; gap: 4px; padding: 6px 15px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-round); color: var(--text-sub); transition: color .15s ease, border-color .15s ease; }
.er-navback a:hover { color: var(--brand); border-color: var(--brand); }
.er-head { padding: 20px 24px; margin-bottom: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.er-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.er-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.er-bar-date { font-size: var(--font-sub); color: var(--text-tip); }
.er-intro { margin-top: 14px; font-size: var(--font-body); color: var(--text-main); line-height: 1.8; }
.er-intro:first-of-type { margin-top: 0; }
.er-public-note { margin-top: 14px; padding: 12px 16px; background: var(--brand-light); border-radius: var(--radius-md); font-size: var(--font-sub); color: var(--text-sub); line-height: 1.7; }
.er-public-note b { color: var(--brand); }
.er-pick-empty { margin-top: 14px; padding: 12px 16px; background: #fff7e6; border: 1px solid #ffe7ba; border-radius: var(--radius-md); font-size: var(--font-sub); color: #ad6800; line-height: 1.6; }
/* 材料清单：编号圆点 + 名称/必填/提示分行，层级清晰 */
.er-mat { margin: 0; padding-left: 0; list-style: none; counter-reset: ermat; font-size: var(--font-body); color: var(--text-main); }
.er-mat li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--divider); }
.er-mat li:last-child { border-bottom: 0; }
.er-mat li::before { counter-increment: ermat; content: counter(ermat); flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-light); color: var(--brand); font-size: var(--font-tag); font-weight: 700; display: grid; place-items: center; }
.er-mat-body { flex: 1 1 auto; min-width: 0; }
.er-mat-label { font-weight: 600; color: var(--text-title); }
.er-req { margin-left: 6px; font-style: normal; font-size: var(--font-tag); color: var(--danger); }
.er-mat-tip { display: block; margin-top: 4px; font-size: var(--font-tip); color: var(--text-tip); line-height: 1.6; }
.er-nojs { display: flex; align-items: flex-start; gap: 10px; font-size: var(--font-sub); color: var(--text-sub); line-height: 1.7; }
.er-nojs svg { flex: 0 0 auto; margin-top: 2px; }
.er-closed { font-size: var(--font-sub); color: var(--text-tip); line-height: 1.7; }
.er-foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--divider); font-size: var(--font-sub); color: var(--text-sub); }
.er-foot a { color: var(--brand); }
/* 报名页（/enroll/{id}）左右结构：左=需提交材料侧栏（吸顶），右=报名须知 + 填写报名信息；窄屏降级为纵向堆叠 */
.er-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 0; }
.er-side { position: sticky; top: 16px; min-width: 0; }
.er-main { min-width: 0; }
/* 版心内取消 .pc-panel 的居中限宽与自动外边距，改由栅格列与列间距控制；右栏相邻面板之间补纵向间距 */
.er-layout .pc-panel { max-width: none; margin: 0; }
.er-main .pc-panel + .pc-panel { margin-top: 20px; }
/* 左栏现含「报名须知 + 材料清单」两块面板，相邻时补纵向间距 */
.er-side .pc-panel + .pc-panel { margin-top: 16px; }
@media (max-width: 900px) { .er-layout { grid-template-columns: 1fr; } .er-side { position: static; } }
.er-query-foot { margin: 24px 0; }

/* JS 注入的表单控件（挂载于 #erFormMount / #enrollForm） */
.ef-title { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding-left: 12px; font-size: var(--font-title); font-weight: 700; color: var(--text-title); margin-bottom: 18px; }
.ef-title::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 2px; background: var(--brand-gradient); }
.ef-title-sub { font-size: var(--font-sub); font-weight: 400; color: var(--text-tip); }
.ef-item { margin-bottom: 18px; }
.ef-label { display: block; margin-bottom: 8px; font-size: var(--font-sub); font-weight: 600; color: var(--text-main); }
.input.ef-input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--font-body); color: var(--text-main); background: var(--bg-page); }
.input.ef-input:focus { outline: none; border-color: var(--brand); background: var(--bg-card); box-shadow: 0 0 0 3px rgba(26, 79, 139, 0.12); }
.ef-textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
select.ef-input { cursor: pointer; }
.ef-opts { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.ef-opt { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-body); color: var(--text-main); cursor: pointer; }
.ef-photo { display: flex; flex-direction: column; gap: 10px; }
.ef-photo-img { width: 140px; height: 140px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-page); }
.ef-photo-btn { display: inline-flex; align-items: center; justify-content: center; width: 140px; height: 40px; border-radius: var(--radius-md); border: 1px dashed var(--brand); color: var(--brand); font-size: var(--font-sub); cursor: pointer; }
.ef-photo-btn:hover { background: var(--brand-light); }
.ef-photo-state { font-size: var(--font-tip); color: var(--text-tip); }
.ef-tip { margin-top: 6px; font-size: var(--font-tip); color: var(--text-tip); }
.ef-err { margin-top: 6px; font-size: var(--font-tip); color: var(--danger); }
.ef-err[hidden] { display: none; }
.ef-bad { border-color: var(--danger) !important; }
.ef-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ef-agree { margin: 20px 0; }
.ef-submit { width: 100%; height: 48px; border: 0; border-radius: var(--radius-md); background: var(--brand-gradient); color: #fff; font-size: var(--font-body); font-weight: 700; cursor: pointer; }
.ef-submit:hover { opacity: 0.92; }
.ef-submit[disabled] { opacity: 0.6; pointer-events: none; }
.ef-foot { margin-top: 12px; font-size: var(--font-tip); color: var(--text-tip); }
.er-primary { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: var(--radius-md); background: var(--brand-gradient); color: #fff; font-size: var(--font-sub); font-weight: 600; }
.er-primary:hover { color: #fff; opacity: 0.92; }
.er-ok { padding: 32px 24px; text-align: center; }
.er-ok svg { margin-bottom: 12px; }
.er-ok-title { font-size: var(--font-title); font-weight: 700; color: var(--text-title); }
.er-ok-sub { margin-top: 8px; font-size: var(--font-sub); color: var(--text-sub); }
.er-ok-actions { margin-top: 20px; display: flex; justify-content: center; gap: 12px; }
.er-ok-tip { margin-top: 16px; font-size: var(--font-tip); color: var(--text-tip); }

/* 进度查询结果卡（限定 .enq-result 内，避免 .card/.k/.v 污染全局） */
.enq-result { max-width: 720px; margin: 20px auto; }
.enq-result .card { padding: 20px 24px; margin-bottom: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.enq-result .card-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--divider); }
.enq-result .card-head svg { flex: 0 0 auto; }
.enq-result .card-status { font-size: var(--font-title); font-weight: 700; }
.enq-result .bad-text { color: var(--danger); }
.enq-result .kv-row { display: flex; gap: 12px; padding: 7px 0; font-size: var(--font-body); line-height: 1.6; }
.enq-result .kv-row .k { flex: 0 0 96px; color: var(--text-tip); }
.enq-result .kv-row .v { flex: 1 1 auto; color: var(--text-main); word-break: break-all; }
.enq-result .bad-tip { margin-top: 12px; padding: 12px 14px; background: #fef0f0; border-radius: var(--radius-md); font-size: var(--font-sub); color: #c9252d; line-height: 1.7; }

/* 缴费板块与弹窗（.eq-* 全局；结果块随 .enq-result，弹窗挂 body） */
.eq-block { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.eq-row { display: flex; gap: 12px; padding: 7px 0; font-size: var(--font-body); }
.eq-k { flex: 0 0 96px; color: var(--text-tip); }
.eq-v { flex: 1 1 auto; color: var(--text-main); }
.eq-paid { color: #00a870; font-weight: 600; }
.eq-unpaid { color: var(--warning); font-weight: 600; }
.eq-pay { margin-top: 8px; height: 38px; padding: 0 18px; border: 1px solid var(--brand); border-radius: var(--radius-md); background: var(--bg-card); color: var(--brand); font-size: var(--font-sub); font-weight: 600; cursor: pointer; }
.eq-pay:hover { background: var(--brand); color: #fff; }
.eq-mrow { display: flex; gap: 12px; padding: 5px 0; font-size: var(--font-sub); }
.eq-mk { flex: 0 0 96px; color: var(--text-tip); }
.eq-mv { flex: 1 1 auto; color: var(--text-main); word-break: break-all; }
.eq-mask { z-index: 1000; }
.eq-box { position: relative; width: 380px; max-width: 92vw; padding-top: 30px; }
.eq-body { padding: 8px 0 4px; }
.eq-x { position: absolute; top: 12px; right: 16px; width: 32px; height: 32px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--text-tip); cursor: pointer; }
.eq-x:hover { color: var(--text-main); }
.eq-amount { text-align: center; font-size: 30px; font-weight: 800; color: var(--danger); margin-bottom: 12px; }
.eq-status { padding: 12px 0; text-align: center; font-size: var(--font-sub); color: var(--text-sub); }
.eq-status.eq-paid { color: #00a870; }
.eq-pay-btn { width: 100%; height: 46px; margin-top: 12px; border: 0; border-radius: var(--radius-md); background: #07c160; color: #fff; font-size: var(--font-body); font-weight: 700; cursor: pointer; }
.eq-pay-btn:hover { opacity: 0.92; }
.eq-pay-btn[disabled] { opacity: 0.6; pointer-events: none; }
.eq-qr { margin-top: 16px; 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-sub); color: var(--text-sub); }
.eq-note { margin-top: 12px; font-size: var(--font-tip); color: var(--text-tip); text-align: center; line-height: 1.6; }
.eq-loading { padding: 24px 0; text-align: center; font-size: var(--font-sub); color: var(--text-tip); }

/* ===== 缴费 / 自助购买页（/enroll/pay · /buy，enroll-pay.js/buy.js 选择器对齐） ===== */
/* 页面专属（bodyClass=pc-page-buy 作用域，不影响其它 PC 页）：标题「开通练习功能/购买课程」居中显示 */
body.pc-page-buy .pc-page-title { text-align: center; }
.btn-primary { display: block; width: 100%; height: 48px; border: 0; border-radius: var(--radius-md); background: var(--brand-gradient); color: #fff; font-size: var(--font-body); font-weight: 700; cursor: pointer; }
.btn-primary:hover { color: #fff; opacity: 0.92; }
.btn-primary[disabled] { opacity: 0.6; pointer-events: none; }
.btn-primary[hidden] { display: none; }
.buy { max-width: 560px; margin: 24px auto 0; }
.buy-loading, .buy-empty { padding: 32px 4px; color: var(--text-tip); font-size: var(--font-body); text-align: center; }
.buy-empty { color: var(--warning); }
.buy-gate { padding: 36px 24px; text-align: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.buy-gate-text { color: var(--text-tip); font-size: var(--font-body); margin-bottom: 18px; }
/* 操作提示行（与移动端同构，现在走在权益行之前） */
.buy-tip { color: var(--text-sub); font-size:16px; margin: 4px 2px 8px; }
/* 开通权益行（仅练习语境）：浅底品牌色把「一次开通包含哪些板块」显性化，排在操作提示之下
   （与移动端同一数据源：PC 拼整句、移动端渲染成 .bi-* 标签卡） */
.buy-includes { margin: 0 2px 16px; padding: 11px 14px; background: var(--brand-light); border-radius: var(--radius-md); color: var(--brand); font-size: var(--font-sub); line-height: 1.7; }
.buy-main { padding: 24px 28px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.buy-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.buy-opt { position: relative; padding: 10px 8px; text-align: center; background: var(--bg-card); border:1px solid #0000001a; border-radius: var(--radius-md); box-shadow: var(--shadow-card); cursor: pointer; transition: border-color 0.15s, box-shadow 0.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:14px; padding: 14px 16px; background: var(--bg-page); border-radius: var(--radius-md); }
.buy-sum-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: var(--font-body); color: var(--text-sub); }
.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-page); border-radius: var(--radius-md); text-align: center; }
.buy-qr[hidden] { display: none; }
.buy-qr-canvas { width: 220px; height: 220px; image-rendering: pixelated; }
.buy-qr-tip { margin-top: 10px; font-size: var(--font-sub); color: var(--text-title); }
.buy-note { margin-top: 10px; min-height: 18px; font-size: var(--font-tip); color: var(--text-tip); text-align: center; line-height: 1.6; }
/* 随机激励文案（开通练习功能页底）：轻量卡片 + 品牌色书名号点缀，不抢支付区视觉 */
.buy-quote { margin-top: 16px; padding: 14px 20px; font-size:16px; line-height: 1.8; color:#14397f; text-align: center; background: var(--bg-card); border: 1px solid var(--border); 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; }
/* 报名缴费专属（复用 .buy 容器，另加 .ep-*） */
.ep .ep-sum { margin-top: 0; }
.ep-amount-row b.ep-amount { color: var(--brand); font-size: 26px; }
.ep-meta { margin-top: 8px; border-top: 1px solid var(--divider); 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); font-weight: 600; }
.ep-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.ep-actions .ep-query { text-align: center; }
.ep-actions .ep-back { text-align: center; color: var(--text-tip); font-size: var(--font-body); }

/* ===== 个人中心（mine.js）：账号卡 / 资料表 / 菜单 ===== */
.section { padding: 18px 20px; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-bottom: 16px; }
.section-title { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 16px; font-weight: 600; color: var(--text-title); }
/* 返回胶囊行：.pc-wrap 无顶部内距，crumbs 为页首元素，需上间距与顶部拉开、下间距与正文拉开（全站 8 个详情页统一） */
.crumbs { margin: 16px 0 14px; }
.more { padding: 16px 0; text-align: center; color: var(--text-tip); font-size: var(--font-sub); }
.empty { padding: 40px 16px; text-align: center; color: var(--text-tip); font-size: var(--font-sub); }
/* 入口参数不合法时的退路（practice-play.js 注入）：同行按钮不撑满宽度 */
.empty .btn-primary { display: inline-block; width: auto; margin-top: 14px; padding: 0 22px; text-decoration: none; }

.mi-profile { display: flex; align-items: center; gap: 16px; padding: 22px 24px; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-bottom: 16px; }
.mi-avatar { width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%; background: var(--brand-gradient); color: #fff; font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mi-profile-info { flex: 1; min-width: 0; }
.mi-name { font-size: 18px; font-weight: 700; color: var(--text-title); }
.mi-name-empty { color: var(--text-tip); font-weight: 500; }
.mi-miss { margin-top: 4px; color: var(--warning); font-size: var(--font-tip); }
.mi-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mi-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-round); font-size: var(--font-tag); background: var(--bg-page); color: var(--text-tip); }
.mi-chip.on { color: var(--success); background: #e6f7f0; }
.mi-chip.todo { color: #d46b08; background: #fff7e8; }
.mi-kv-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--divider); font-size: var(--font-body); }
.mi-kv-row:last-child { border-bottom: none; }
.mi-kv-label { width: 88px; flex-shrink: 0; color: var(--text-tip); }
.mi-kv-value { flex: 1; min-width: 0; color: var(--text-main); word-break: break-all; }
.mi-kv-need { color: var(--warning); font-size: var(--font-tag); }
.mi-kv-note { color: var(--text-tip); font-size: var(--font-tag); }
.mi-acc-foot { margin-top: 12px; text-align: center; }
.mi-acc-foot .btn-primary { width: 200px; margin: 0 auto; }
.mi-menu { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.mi-menu-item { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--divider); color: var(--text-main); font-size: var(--font-body); cursor: pointer; text-decoration: none; }
.mi-menu-item:last-child { border-bottom: none; }
.mi-menu-item:hover { background: var(--brand-light); color: var(--brand); }
.mi-menu-ico { display: flex; align-items: center; color: var(--brand); }
.mi-menu-text { flex: 1; min-width: 0; }
.mi-menu-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 12px; line-height: 18px; text-align: center; }
.mi-menu-badge:empty { display: none; }
.mi-menu-arrow { display: flex; align-items: center; color: var(--text-tip); }
.mi-menu-item.mi-danger .mi-menu-text, .mi-menu-item.mi-danger .mi-menu-ico { color: var(--danger); }
/* 个人中心左右结构：左栏功能导航（复用 .mi-menu 卡片样式），右栏放对应页面内容；左栏吸顶便于长列表滚动时仍可见 */
.mi-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.mi-side { position: sticky; top: 16px; }
.mi-main { min-width: 0; }
.mi-menu-item.cur { background: var(--brand-light); color: var(--brand); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand); }
.mi-menu-item.cur .mi-menu-text, .mi-menu-item.cur .mi-menu-ico { color: var(--brand); }
@media (max-width: 900px) { .mi-layout { grid-template-columns: 1fr; } .mi-side { position: static; } }
.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; width: auto; padding: 0 28px; }
.wx-qr { min-height: 300px; height: 335px; 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-fallback { display: inline-block; margin-top: 12px; color: var(--brand); font-size: var(--font-tip); text-decoration: underline; }

/* ===== 必填资料门禁（ProfileGate，pc-site.js openProfileGate 注入 .mask/.agreement-box/.field/.input） ===== */
.agreement-box .field { margin-bottom: 14px; }
.agreement-box .input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--font-body); color: var(--text-main); background: var(--bg-page); box-sizing: border-box; }
.agreement-box .input:focus { outline: none; border-color: var(--brand); background: var(--bg-card); box-shadow: 0 0 0 3px rgba(26, 79, 139, 0.12); }
.input:disabled { color: var(--text-tip); -webkit-text-fill-color: var(--text-tip); opacity: 1; cursor: not-allowed; }
.pg-meta { margin-bottom: 12px; 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; }
.pg-req { margin-left: 2px; color: var(--warning); font-size: var(--font-tag); }
.pg-tip { margin-top: 4px; color: var(--text-tip); font-size: var(--font-tip); line-height: 1.6; }
.pg-locked { margin-top: 5px; color: var(--text-tip); font-size: var(--font-tag); line-height: 1.6; }
.pg-submit { margin-top: 16px; }
.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); 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); }
.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); }

/* ===== 学习中心 / 我的培训班：培训班行（study.js） ===== */
/* 学习中心含「培训班 + 课程」两个 section 卡，板块间沿用全局 .section 的 16px 下间距（末块不留），避免上下拥挤 */
.study .section { margin-bottom: 16px; }
.study .section:last-child { margin-bottom: 0; }
.plan-row {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); overflow: hidden; color: var(--text-main); text-decoration: none;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.plan-row:last-child { margin-bottom: 0; }
.plan-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;}
.plan-row.is-doing::before { }
.plan-row.is-grad::before { background: var(--gold); }
.plan-row.is-ended::before { background: var(--text-tip); }
.plan-row.is-todo::before { background: var(--warning); }
.plan-row:hover { box-shadow: var(--shadow-hover); border-color: rgba(26, 79, 139, .35); transform: translateY(-2px); }
.plan-row:hover .plan-name { color: var(--brand); }
.plan-thumb { flex: 0 0 auto; width: 128px; height: 88px; object-fit: cover; border-radius: var(--radius-md); background: var(--bg-page); }
.plan-thumb-ph { display: grid; place-items: center; background: var(--brand-light); }
.plan-main { flex: 1; min-width: 0; }
.plan-name { font-size: var(--font-title); font-weight: 600; color: var(--text-title); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-date { margin-top: 6px; font-size: var(--font-tip); color: var(--text-tip); }
.plan-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.plan-prog { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.pp-track { flex: 1; min-width: 120px; height: 8px; background: var(--divider); border-radius: var(--radius-round); overflow: hidden; }
.pp-track > i { display: block; height: 100%; background: var(--brand-gradient); border-radius: var(--radius-round); transition: width .3s ease; }
.plan-row.is-doing .pp-track > i { background: var(--success); }
.pp-txt { flex-shrink: 0; font-size: var(--font-tag); color: var(--text-sub); }
.plan-hours-flat { margin-top: 12px; font-size: var(--font-tip); color: var(--text-sub); }
.plan-go {
  flex-shrink: 0; align-self: center; padding: 8px 16px; white-space: nowrap; border-radius: var(--radius-round);
  background: var(--brand-light); color: var(--brand); font-size: var(--font-sub); font-weight: 600;
  transition: background .18s ease, color .18s ease;
}
.plan-row:hover .plan-go { background: var(--brand-gradient); color: #fff; }
.hours-note {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 14px;
  background: var(--brand-light); border-radius: var(--radius-md); font-size: var(--font-tip); color: var(--text-sub);
}
.hours-note::before { content: '\24D8'; color: var(--brand); font-size: 15px; line-height: 1; }
.plan-arrow { flex-shrink: 0; margin-left: 8px; color: var(--text-tip); }
@media (max-width: 767px) {
  .plan-row { flex-wrap: wrap; }
  .plan-go { display: none; }
}

/* ===== 应学课程（plan-courses.js） ===== */
.course-card {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 16px;
  background: var(--bg-card); border: 1px solid transparent; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); margin-bottom: 12px; text-decoration: none; color: inherit;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.course-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); border-color: rgba(26, 79, 139, .35); }
.course-card.is-done { border-color: rgba(0, 168, 112, .35); }
.course-cover { width: 148px; height: 92px; flex-shrink: 0; border-radius: var(--radius-md); object-fit: cover; background: var(--brand-light); box-shadow: var(--shadow-card); }
.course-cover.placeholder { display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; color: #fff; background: var(--brand-gradient); }
.course-info { flex: 1; min-width: 0; }
.course-name { font-size: var(--font-title); font-weight: 600; color: var(--text-title); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.course-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--font-tip); color: var(--text-sub); }
.course-facts b { color: var(--text-title); font-weight: 600; }
.cf-dot { width: 3px; height: 3px; flex-shrink: 0; border-radius: 50%; background: var(--text-tip); opacity: .55; }
.course-prog { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.cp-track { flex: 1; min-width: 120px; height: 8px; background: var(--divider); border-radius: var(--radius-round); overflow: hidden; }
.cp-track > i { display: block; height: 100%; background: var(--brand-gradient); border-radius: var(--radius-round); transition: width .3s ease; }
.cp-pct { flex-shrink: 0; min-width: 36px; text-align: right; font-size: var(--font-tag); font-weight: 600; color: var(--brand); }
.course-card.is-done .cp-track > i { background: var(--success); }
.course-card.is-done .cp-pct { color: var(--success); }
.course-go {
  flex-shrink: 0; align-self: center; margin-left: 4px; padding: 8px 16px; white-space: nowrap;
  border-radius: var(--radius-round); background: var(--brand-light); color: var(--brand);
  font-size: var(--font-sub); font-weight: 600; transition: background .18s ease, color .18s ease;
}
.course-card:hover .course-go { background: var(--brand-gradient); color: #fff; }
/* 结业考试入口卡（渐变高亮面板，图标 + 正文 + 右侧 CTA） */
.finish-card {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 20px; margin-bottom: 12px;
  background: linear-gradient(135deg, #f3f7fd, #e9f1fb); border: 1px solid rgba(26, 79, 139, .18);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.finish-card.ready { border-color: rgba(26, 79, 139, .42); }
.finish-ico { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--bg-card); box-shadow: var(--shadow-card); }
.finish-body { flex: 1; min-width: 0; }
.finish-name { font-size: var(--font-body); font-weight: 700; color: var(--text-title); }
.finish-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; font-size: var(--font-tip); color: var(--text-sub); }
.finish-status { margin-top: 8px; font-size: var(--font-sub); }
.finish-status .ok { color: var(--success); font-weight: 600; }
.finish-status .warn { color: var(--warning); }
.finish-cta { flex-shrink: 0; }
.finish-btn {
  display: inline-block; padding: 9px 22px; border-radius: var(--radius-round); white-space: nowrap;
  background: var(--brand-gradient); color: #fff; font-size: var(--font-sub); font-weight: 600;
  text-decoration: none; box-shadow: var(--shadow-card); transition: transform .18s ease, box-shadow .18s ease;
}
.finish-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-hover); }
@media (max-width: 767px) {
  .course-card { flex-wrap: wrap; }
  .course-cover { width: 100%; height: 168px; }
  .course-go { display: none; }
  .finish-card { flex-wrap: wrap; }
  .finish-cta { width: 100%; }
  .finish-btn { display: block; text-align: center; }
}

/* ===== 消息中心（messages.js） ===== */
.msg-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: var(--font-sub); color: var(--text-sub); }
.msg-toolbar:empty { display: none; }
.msg-count { color: var(--text-tip); }
.msg-readall { color: var(--brand); cursor: pointer; }
.msg-row { display: block; padding: 16px 18px; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-bottom: 12px; cursor: pointer; }
.msg-row:hover { box-shadow: var(--shadow-hover); }
.msg-row-title { display: flex; align-items: center; gap: 8px; }
.msg-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--danger); }
.msg-row:not(.unread) .msg-dot { background: transparent; }
.msg-row-name { margin-top: 8px; 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: 8px; font-size: var(--font-tag); color: var(--text-tip); }
.msg-detail-title { font-size: var(--font-title); font-weight: 700; color: var(--text-title); }
.msg-detail-meta { margin: 8px 0 14px; font-size: var(--font-tip); color: var(--text-tip); }
.msg-detail-content { font-size: var(--font-body); color: var(--text-main); line-height: 1.8; }

/* ===== 我的证书（certs.js） ===== */
.cert-group { margin-bottom: 20px; }
.cert-group-t { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--text-title); margin-bottom: 10px; }
.cert-group-tip { font-size: var(--font-tip); color: var(--text-tip); margin-bottom: 10px; }
.cert { padding: 16px 18px; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-bottom: 12px; }
.cert-info { min-width: 0; }
.cert-name { font-size: var(--font-body); font-weight: 600; color: var(--text-title); }
.cert-meta { margin-top: 6px; font-size: var(--font-tip); color: var(--text-sub); line-height: 1.7; }
.cert-tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--brand-light); color: var(--brand); font-size: var(--font-tag); }
.cert-revoked .cert-name, .cert-revoked .cert-tag { color: var(--text-tip); background: var(--bg-page); }
.cert-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.cert-dl { display: inline-block; padding: 7px 18px; border-radius: var(--radius-round); background: var(--brand); color: #fff; font-size: var(--font-sub); cursor: pointer; text-decoration: none; }
.cert-dl:hover { color: #fff; opacity: 0.92; }
.cert-view-tip, .cert-view { margin-top: 10px; }
.cert-view img { max-width: 100%; border-radius: var(--radius-md); }

/* ===== 学习记录（records.js） ===== */
.sr-item { padding: 14px 18px; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-bottom: 10px; }
.sr-lesson { font-size: var(--font-body); font-weight: 600; color: var(--text-title); }
.sr-line1, .sr-line2, .sr-line3 { margin-top: 6px; font-size: var(--font-tip); color: var(--text-sub); line-height: 1.6; }

/* ===== 视频学习播放器（study/player + player.js） ===== */
.player-page { background: var(--bg-page); padding: 16px 0 40px; }
/* 返回课程条（视频与固定顶栏/导航之间的缓冲，兼作返回出口） */
.vp-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; min-width: 0; }
/* 返回胶囊：播放器 .vp-back 与各页顶部 .crumbs 返回链共用同一套样式（分组选择器，保证多页一致不再分叉） */
.vp-back, .crumbs a {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 7px 16px;
  border-radius: var(--radius-round); background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-main); font-size: var(--font-sub); text-decoration: none; box-shadow: var(--shadow-card);
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.vp-back:hover, .crumbs a:hover { color: var(--brand); border-color: var(--brand); transform: translateX(-2px); }
.vp-back-arrow, .crumbs .cb-arrow { font-size: 15px; line-height: 1; }
.vp-course-name { font-size: var(--font-sub); color: var(--text-tip); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-wrap { position: relative; width: 100%; background: #000; border-radius: var(--radius-lg); overflow: hidden; }
.video { width: 100%; aspect-ratio: 16 / 9; background: #000; display: block; }
.video.loading { display: flex; align-items: center; justify-content: center; color: #aaa; }
.video.sim { display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, #2b3a67, #1a1a1a); color: #fff; }
.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; }
.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(--brand); }
.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-top: 16px; border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-card); }
.vp-lesson-name { font-size: var(--font-title); font-weight: 600; color: var(--text-title); }
.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-top: 16px; border-radius: var(--radius-lg); padding: 16px 18px; 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; }

/* 人脸核验面板（全屏遮罩，叠加播放器之上） */
.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; }
.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; }

/* 培训班级不可学友好页（StudyController::player 服务端直出） */
.vp-ended { padding: 8px 0; }
.ve-hero { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #fa8c16, #d46b08); color: #fff; border-radius: var(--radius-lg); padding: 18px 20px; }
.ve-ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.ve-head { font-size: var(--font-title); font-weight: 600; line-height: 1.4; }
.ve-reason { margin-top: 12px; 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: 16px; background: var(--bg-card); border-radius: var(--radius-lg); padding: 18px 20px; 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: 8px 0; border-bottom: 1px solid var(--divider); font-size: var(--font-sub); }
.ve-row:last-child { border-bottom: none; }
.ve-k { width: 92px; 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: 12px; margin-top: 16px; }
.ve-btn { flex: 1; text-align: center; padding: 11px 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); }

/* ===== <1024px 可用降级（不追求像素级；窄屏交移动版） ===== */
/* ===== 考前练习：工种目录（/practice） ===== */
.search { margin-bottom: 18px; max-width: 460px; }
.search-input {
  width: 100%; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 10px 14px; font-size: var(--font-body);
  box-shadow: var(--shadow-card); outline: none;
}
.search-input:focus { border-color: var(--brand); }
.group { margin-bottom: 12px; }
.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: 1px solid transparent; border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 12px;
  box-shadow: var(--shadow-card); text-decoration: none; color: inherit;
  transition: box-shadow .18s ease, transform .18s ease;
}
.trade-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.trade-main { flex: 1; min-width: 0; }
.trade-name { font-size: var(--font-body); font-weight: 500; 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; }
/* 登录后按准入区分（practice-catalog.js 打 data-accessible：1 有权限 / 2 可自助开通 / 0 无权限；游客无此属性保持默认中性）：
   有权限=品牌蓝左边条 + 淡蓝底 + 蓝边框 + 「可练习」绿标；无权限=虚线灰边 + 弱化，一眼可辨 */
.trade-card[data-accessible="1"] {
  border-color: rgba(26, 79, 139, .45); background: var(--brand-light);
  box-shadow: inset 4px 0 0 var(--brand), var(--shadow-card);
}
.trade-card[data-accessible="1"]:hover { box-shadow: inset 4px 0 0 var(--brand), var(--shadow-hover); }
.trade-card[data-accessible="1"] .trade-name { color: var(--brand); }
.trade-card[data-accessible="1"] .trade-name::after {
  content: '可练习'; margin-left: 8px; padding: 1px 7px; border-radius: var(--radius-round);
  font-size: var(--font-tag); font-weight: 600; color: #fff; background: var(--success); vertical-align: 2px;
}
.trade-card[data-accessible="1"] .trade-arrow { color: var(--brand); }
.trade-card[data-accessible="0"] { border-style: dashed; border-color: var(--divider); opacity: .82; }
.trade-card[data-accessible="0"] .trade-name { color: var(--text-sub); }
.trade-card[data-accessible="0"]:hover { transform: none; box-shadow: var(--shadow-card); }
/* 开放/混合模式（data-accessible="2"）：工种可进入（「模拟考试」对所有登录学员免费，「免费」字样只出现于工种详情页模拟考卡片，目录卡片不再徒章）——
   金色左边条 + 淡金底，区别于绿底「可练习」与虚线灰「暂无权限」；卡片保持可点（不被目录点击拦截） */
.trade-card[data-accessible="2"] {
  border-color: rgb(178 189 215 / 45%); 
}
.trade-card[data-accessible="2"]:hover { box-shadow: inset 4px 0 0 var(--warning), var(--shadow-hover); }
.trade-card[data-accessible="2"] .trade-arrow { color: var(--warning); }
/* 工种详情页「模拟考试」卡片的【免费】标（开放/混合模式服务端渲染，仅该模式出现；auth 模式不渲染） */
.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;
}
.cat-block { margin-bottom: 22px; }
.cat-block-title {
  display: flex; align-items: center; gap: 8px; font-size: var(--font-title);
  font-weight: 700; color: var(--text-title); letter-spacing: .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);
}
/* 一级板块内：工种卡片按桌面宽度多列排布（移动为单列堆叠） */
.cat-block .group {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px 16px;
}
.cat-block .group > .group-title { grid-column: 1 / -1; }
.cat-block .group .trade-card { margin-bottom: 0; }
.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);
}

/* ===== 工种练习首页（/practice/{trade}） ===== */
.trade-strategy {
  display: flex; flex-wrap: wrap; gap: 10px; background: var(--bg-card);
  border: 1px solid var(--divider); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.ts-item { flex: 1 1 0; min-width: 82px; 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); }
.quota-tip {
  background: var(--bg-card); border: 1px solid var(--divider); border-left: 3px solid var(--brand);border-right: 3px solid var(--brand);
  border-radius: var(--radius-lg); padding: 10px 14px; margin-bottom: 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-bottom: 14px; 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: 14px 16px; margin-bottom: 14px; box-shadow: var(--shadow-card);
  text-decoration: none; color: inherit; transition: box-shadow .18s ease, transform .18s ease;
}
.entry:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.entry.primary { border: 1px solid var(--brand); background: #f5f8ff; }
.entry-ico {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; margin-right: 14px; 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 { font-size: var(--font-body); font-weight: 600; color: var(--text-title); display: flex; align-items: center; }
.entry.primary .entry-name { color: var(--brand); }
.entry-sub { margin-top: 4px; color: var(--text-tip); font-size: var(--font-tip); }
.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); }
.links { display: flex; justify-content: center; gap: 40px; background: var(--bg-card); border-radius: var(--radius-lg); padding: 16px 0; margin: 6px 0 18px; box-shadow: var(--shadow-card); }
.links .link { color: var(--brand); font-size: var(--font-sub); text-decoration: none; }
.links .link:hover { text-decoration: underline; }

/* ===== 答题页（/practice/play、/exam/run） ===== */
.play { max-width: 820px; margin: 0 auto; padding: 20px 16px calc(56px + 24px); }
.exam-run { max-width: 820px; margin: 0 auto; padding: 0 16px 90px; }
.play-title { margin-bottom: 10px; 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: 10px; margin-bottom: 16px; }
/* 退出按钮：危险色描边胶囊，突出可点；hover 实色反白，与移动端 .quit 同一视觉语言 */
.quit { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 16px; 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; }
.quit:hover { 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 .2s ease; }
.progress-text { color: var(--brand); flex-shrink: 0; }
.resume-tip { margin-bottom: 10px; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--brand-light); color: var(--brand); font-size: var(--font-tip); }
.q-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-card); }
.q-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.q-head-left { display: flex; align-items: center; gap: 8px; 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; cursor: pointer; }
.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: 40px 20px 44px; text-align: center; }
.qe-title { font-size: var(--font-head); font-weight: 700; color: var(--text-title); }
.qe-tip { margin-top: 10px; font-size: var(--font-sub); line-height: 1.7; color: var(--text-tip); }
.q-empty .btn-primary { margin: 18px auto 0; max-width: 260px; text-decoration: none; }
.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; cursor: pointer; }
.q-stem { margin: 16px 0 18px; font-size: var(--font-body); line-height: 1.75; letter-spacing: .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; }
.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: 14px; }
.option { display: flex; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px; font-size: var(--font-body); line-height: 1.5; cursor: pointer; letter-spacing: .07em; }
.option:hover { border-color: var(--brand); }
.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: 10px; width: auto; padding: 0 28px; display: inline-block; }
.result-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; justify-content: flex-start; font-size:1em; font-weight: 600; margin-top: 16px; margin-bottom: 16px; }
.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: 8px; background: #f7f8fa; border-radius: var(--radius-sm); padding: 10px 12px; 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: 10px; }
.analysis-btn { border: 1px solid var(--brand); color: var(--brand); background: #fff; border-radius: var(--radius-sm); padding: 5px 14px; font-size: var(--font-tip); cursor: pointer; transition: background-color .2s ease; }
.analysis-btn:hover { background: rgba(26, 79, 139, .06); }
.multi-tip { color: var(--text-tip); font-size: var(--font-tag); text-align: center; margin-top: 8px; }
/* 字号 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: 8px; background: var(--bg-card); padding: 10px 16px; box-shadow: 0 -1px 6px rgba(0, 0, 0, .06); }
.play-footer .inner { display: flex; gap: 10px; width: 100%; max-width: 788px; margin: 0 auto; }
.fbtn { flex: 1; height: 42px; line-height: 42px; font-size: var(--font-sub); background: var(--bg-page); color: var(--text-main); border-radius: 6px; text-align: center; border: none; padding: 0; margin: 0; cursor: pointer; transition: background-color .15s ease, transform .1s ease; }
.fbtn:hover { background-color: #e6e8eb; }
.fbtn:active { transform: scale(0.98); }
.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; }
/* 答题卡 Sheet（桌面居中浮层，替代移动底部抽屉） */
.sheet-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 900; }
.sheet {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.96); z-index: 901;
  background: var(--bg-card); border-radius: 12px; opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease; display: flex; flex-direction: column;
  max-height: 80vh; width: 560px; max-width: 92vw; box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}
.sheet.show { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.sheet-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 8px; }
.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; cursor: pointer; }
.sheet-stats { display: flex; gap: 12px; padding: 4px 18px 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; padding: 0 18px; }
.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: 34px; height: 34px; line-height: 34px; text-align: center; border-radius: 6px; font-size: 12px; background: var(--bg-page); color: var(--text-sub); position: relative; border: none; padding: 0; cursor: pointer; }
.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); }
.sheet-seg { display: flex; gap: 4px; margin: 0 18px 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); cursor: pointer; }
.seg-btn.on { background: var(--bg-card); color: var(--brand); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.sheet-filter { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 18px 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; cursor: pointer; }
.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; cursor: pointer; }
.sheet-font { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; 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); cursor: pointer; }
.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 18px; border-top: 1px solid var(--divider); }
.toggle { width: 44px; height: 24px; border-radius: 12px; background: #d0d3d9; position: relative; transition: background-color .2s ease; border: none; padding: 0; cursor: pointer; }
.toggle.on { background: var(--brand); }
.toggle-dot { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s ease; }
.toggle.on .toggle-dot { transform: translateX(20px); }
.sheet-submit { padding: 12px 18px; 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; cursor: pointer; }
/* 练习小结 */
.summary-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 28px 24px; 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: 16px; 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; max-width: 280px; margin-left: auto; margin-right: auto; }

/* ===== 考试（答题 / 结果 / 回顾 / 记录 / 报告）===== */
/* 考试中心列表页已下线（入口并入练习页/培训班课程页），其专属样式 .ex-tabs/.ex-tab/.exam/#examList/.ex-card/.ex-name/.ex-sub/.ex-meta/.ex-last/.ex-status/.ex-btn/.ex-links/.ex-link 随之移除；
   以下 .ex-head/.ex-timer/.ex-bar/.ex-submit 等仍由答题页（/exam/run）复用 */
/* 考试答题页头部 */
.ex-head { display: flex; flex-direction: column; gap: 8px; background: var(--bg-card); padding: 14px 18px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: 0 1px 6px rgba(0, 0, 0, .04); margin-bottom: 16px; }
.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, #2d6cb5, var(--brand)); border-radius: var(--radius-round); transition: width .3s ease; }
.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; cursor: pointer; }
.ex-submit:disabled { opacity: 0.5; }
/* 交卷结果 */
.ex-result-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 32px 24px; text-align: center; box-shadow: var(--shadow-card); margin-bottom: 16px; max-width: 520px; margin-left: auto; margin-right: auto; }
.ex-score { font-size: 56px; 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: 18px auto; text-align: left; max-width: 360px; }
.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: 12px; max-width: 360px; margin-left: auto; margin-right: auto; }
.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; text-decoration: none; cursor: pointer; }
/* 答卷回顾 */
.rv-card { margin-bottom: 14px; }
.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); }
/* 题库练习记录 */
.rc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.rc-tab { flex-shrink: 0; padding: 6px 16px; 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; cursor: pointer; }
.rc-tab.on { background: var(--brand-gradient); color: #fff; font-weight: 600; }
.rc-card { margin-bottom: 14px; 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); }
/* 考试报告 */
.panel { background: var(--bg-card); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-card); margin-bottom: 18px; }
.panel .tip { color: var(--text-sub); font-size: var(--font-sub); line-height: 1.6; }
.rp-block { margin-bottom: 18px; }
.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: 25%; 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; }
.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; }

/* ===== 设备互转提示弹窗（DeviceSwitch 服务端直出，自带内联脚本） =====
   PC 端该提示仅移动 UA 命中，且此时视口为桌面宽（整页缩放）。
   居中采用「四边 inset:0 + margin:auto + height:fit-content」，不依赖 transform，
   避免缩放视口下固定居中卡片被拉伸；高度贴合内容，且在移动端屏幕上下左右居中。 */
.ds-hint {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0;
  margin: auto;
  z-index: 3000;
  width: 760px; max-width: 92vw;
  height: fit-content;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  padding: 48px 44px; background: #10233f; color: #fff;
  border-radius: 28px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  font-size: 40px; text-align: center;
}
.ds-hint-text { line-height: 1.5; }
.ds-hint-acts { display: flex; align-items: center; gap: 20px; }
.ds-btn {
  height: 92px; padding: 0 42px; border-radius: 46px;
  font-size: 34px; color: #c4ccdd; background: rgba(255, 255, 255, 0.14);
}
.ds-btn-primary { background: var(--brand); color: #fff; font-weight: 600; }
.ds-btn:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.ds-btn-primary:hover { background: var(--brand-dark); }
.ds-btn-x {
  position: absolute; top: 14px; right: 14px;
  width: 64px; height: 64px; padding: 0; font-size: 40px; line-height: 1;
  background: transparent; color: #8b97ab;
}

@media (max-width: 1023px) {
  :root { --pc-topbar-h: 56px; --pc-navbar-h: 52px; --pc-head-h: 108px; }
  .pc-topbar-inner, .pc-navbar-inner { gap: 12px; }
  .pc-search { width: 150px; }
  .pc-nav-list { gap: 0; }
  .pc-nav-link { padding: 0 10px; }
  .pc-banner-slide img { height: 260px; }
  .pc-section-cols { grid-template-columns: 1fr; gap: 44px; margin: 48px auto; }
  .pc-rank-cols { grid-template-columns: 1fr; gap: 0; }
  /* 窄屏回落单列：去掉左右两列间的竖直分割线与分侧内边距 */
  .pc-rank-cols .pc-rank-col + .pc-rank-col { border-left: 0; padding-left: 0; }
  .pc-rank-cols:not(.pc-rank-cols--single) .pc-rank-col:first-child { padding-right: 0; }
  .pc-plan-cols--home { grid-template-columns: 1fr; gap: 0; }
  /* 窄屏回落单列：去掉两列间的竖直分割线与分侧内边距 */
  .pc-plan-cols--home .pc-plan-col--home + .pc-plan-col--home { border-left: 0; padding-left: 0; }
  .pc-plan-cols--home:not(.is-single) .pc-plan-col--home:first-child { padding-right: 0; }
  /* 服务宫格降列：窄屏不追求每行 8（仅保证 ≤8），避免图标卡被挤得过小 */
  .pc-tiles { grid-template-columns: repeat(4, 1fr); }
  .pc-footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .pc-rank-head, .pc-rank-row { grid-template-columns: 52px 0.7fr 1.3fr 64px; }
  /* P2/P3 可用降级（不追求像素级；窄屏引导走移动版） */
  .links, .ex-links { flex-wrap: wrap; gap: 14px 22px; }
  .rp-cell { width: 33.33%; }
  .play, .exam-run { padding-left: 12px; padding-right: 12px; }
  .ex-result-card, .summary-card { max-width: none; }
  .sheet { width: 92vw; }
  /* Hero 降级：仅收窄容器高度与内边距（文案/CTA 的字号间距降级随模板 <style> 内的同名 media 规则生效） */
  .pc-hero-inner { min-height: clamp(440px, 66vh, 600px); padding-top: 40px; padding-bottom: 40px; }
}
@media (max-width: 767px) {
  :root { --pc-topbar-h: 56px; --pc-navbar-h: 48px; --pc-head-h: 104px; }
  .pc-nav { display: none; }           /* 窄屏主导航收起，引导走移动版 */
  .pc-navbar-inner { justify-content: flex-end; }   /* 导航隐藏后登录按钮靠右 */
  .pc-topbar-inner { gap: 12px; }
  .pc-brand-logo { height: 36px; }
  .pc-brand-mark { width: 36px; height: 36px; }
  .pc-brand-name { font-size: 18px; }
  .pc-search { flex: 1 1 auto; max-width: 220px; }
  .pc-plan-grid { grid-template-columns: 1fr 1fr; }
  .pc-tiles { grid-template-columns: repeat(3, 1fr); }
  .pc-news-grid { grid-template-columns: 1fr; }
  .pc-footer-cols { grid-template-columns: 1fr; }
  .pc-banner-slide img { height: 180px; }
  .pc-list-item { flex-direction: column; align-items: stretch; }
  .pc-list-thumb { width: 100%; height: 170px; }
  .plan-thumb { width: 104px; height: 74px; }
  .pc-article-title { font-size: 22px; }
  /* Hero 窄屏再降：去固定高度（按钮/字号随视口的规则已抽入模板 <style>，此处只留容器锚点） */
  .pc-hero-inner { min-height: auto; padding-top: 44px; padding-bottom: 44px; }
}

/* ===== 课程自助购买与观看（P4）：商店列表 / 详情 / 课时清单 / 学习中心课程 ===== */
/* 商店列表（/courses + 首页精选课程复用 .pc-course-grid/.pc-course-card）；搜索框采用资讯列表同款 .pc-searchbar（见公共 partials/searchbox.php） */
/* 课程商店页专属（bodyClass=pc-page-courses 作用域，不影响资讯列表）：搜索板块拉开与上方标题、下方课程网格的上下间距 */
body.pc-page-courses .pc-searchbar-wrap { margin: 14px 0 24px; }
.pc-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); }
.pc-course-card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pc-course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.pc-course-cover { position: relative; height: 150px; background: var(--brand-light); }
.pc-course-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-course-cover-ph { display: grid; place-items: center; height: 150px; }
.pc-course-badge-public {
  position: absolute; top: 8px; left: 8px; font-style: normal; font-size: var(--font-tag); font-weight: 600;
  padding: 2px 9px; border-radius: var(--radius-round); background: rgba(0, 168, 112, 0.9); color: #fff;
}
.pc-course-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pc-course-name {
  font-size: var(--font-title); font-weight: 600; color: var(--text-title); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-course-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: var(--font-tip); color: var(--text-tip); }
.pc-course-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 4px; }
.pc-course-price { font-size: var(--font-body); font-weight: 700; color: var(--danger); }
.pc-course-price[hidden] { display: none; }
.pc-course-owned { font-size: var(--font-sub); font-weight: 600; color: var(--success); }
.pc-course-owned[hidden] { display: none; }
.pc-course-empty { padding: 40px; text-align: center; font-size: var(--font-sub); color: var(--text-tip); background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.pc-course-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 26px; }
.pc-course-page {
  padding: 7px 16px; border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: var(--font-sub); color: var(--text-sub); background: var(--bg-card); text-decoration: none; transition: all 0.15s ease;
}
.pc-course-page:hover { border-color: var(--brand); color: var(--brand); }
.pc-course-page-cur { font-size: var(--font-sub); color: var(--text-tip); }

/* 课程详情（/course/{id}） */
.pc-cd-head {
  display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: stretch;
  padding: 20px; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-bottom: 16px;
}
.pc-cd-cover { position: relative; height: 210px; border-radius: var(--radius-md); overflow: hidden; background: var(--brand-light); }
.pc-cd-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-cd-cover-ph { display: grid; place-items: center; height: 210px; }
.pc-cd-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pc-cd-name { font-size: var(--font-head); font-weight: 700; color: var(--text-title); line-height: 1.4; margin: 0; }
.pc-cd-meta { font-size: var(--font-sub); color: var(--text-tip); }
.pc-cd-cta { margin-top: auto; padding-top: 8px; }
.pc-cd-cta-loading, .pc-cd-cta-tip { font-size: var(--font-sub); color: var(--text-tip); line-height: 1.7; }
.pc-cd-opened { font-size: var(--font-body); font-weight: 600; color: var(--success); margin-bottom: 12px; }
.pc-cd-start { max-width: 260px; }
.pc-cd-tiers { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.pc-cd-tier {
  display: flex; flex-direction: column; gap: 4px; min-width: 96px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-page);
}
.pc-cd-tier-label { font-size: var(--font-tip); color: var(--text-sub); }
.pc-cd-tier-price { font-size: var(--font-title); font-weight: 700; color: var(--danger); }
.pc-cd-buy { display: inline-block; width: auto; max-width: 320px; padding: 0 30px; text-decoration: none; line-height: 48px; }

/* 课时清单（详情 #courseLessons，course-store-detail.js 渲染） */
.cd-chapter { font-size: var(--font-body); font-weight: 600; color: var(--text-title); padding: 12px 0 6px; border-bottom: 1px solid var(--divider); }
.cd-lesson { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--divider); cursor: pointer; transition: background 0.15s ease; }
.cd-lesson:hover { background: var(--bg-page); }
.cd-lesson:last-child { border-bottom: none; }
.cd-lesson.locked { cursor: pointer; }
.cd-lesson.locked .cd-lesson-name { color: var(--text-tip); }
.cd-lesson-left { flex-shrink: 0; width: 72px; }
.cd-lesson-main { flex: 1; min-width: 0; }
.cd-lesson-name { font-size: var(--font-body); color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-lesson.locked .cd-lesson-name { overflow: visible; white-space: normal; }
.cd-lesson-meta { margin-top: 3px; font-size: var(--font-tip); color: var(--text-tip); }
.cd-lesson-arrow { flex-shrink: 0; font-size: 20px; color: var(--text-tip); }
.tag-warning { background: rgba(250, 140, 22, 0.12); color: var(--warning); }

/* ===== 课程详情重设计（/study/course/{id}，course-detail.js 渲染）===== */
/* 英雄区：左封面 + 右信息（标题/标签/进度/主 CTA） */
.cd-hero { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: stretch; padding: 20px; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-bottom: 16px; }
.cd-hero-cover { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--brand-light); min-height: 196px; }
.cd-hero-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-hero-cover-ph { display: grid; place-items: center; height: 100%; min-height: 196px; }
.cd-hero-info { display: flex; flex-direction: column; min-width: 0; }
.cd-hero-crumb { font-size: var(--font-sub); color: var(--brand); margin-bottom: 6px; }
.cd-hero-title { font-size: var(--font-head); font-weight: 700; color: var(--text-title); line-height: 1.35; }
.cd-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cd-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: var(--radius-round); background: var(--bg-page); color: var(--text-sub); font-size: var(--font-tip); }
.cd-chip .cd-ico { fill: var(--brand); }
.cd-progress { margin-top: 18px; max-width: 460px; }
.cd-progress-top { display: flex; justify-content: space-between; font-size: var(--font-tip); color: var(--text-tip); margin-bottom: 6px; }
.cd-bar { height: 8px; border-radius: var(--radius-round); background: var(--divider); overflow: hidden; }
.cd-bar > i { display: block; height: 100%; border-radius: var(--radius-round); background: var(--brand-gradient); transition: width .4s ease; }
.cd-bar-hours > i { background: var(--gold-gradient); }
.cd-hero-cta { margin-top: auto; padding-top: 18px; }
.cd-cta { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 28px; border: 0; border-radius: var(--radius-round); background: var(--brand-gradient); color: #fff; font-size: var(--font-body); font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(26,79,139,.25); transition: opacity .15s ease, transform .15s ease; }
.cd-cta:hover { color: #fff; opacity: .92; transform: translateY(-1px); }
.cd-cta[disabled] { background: var(--divider); color: var(--text-tip); box-shadow: none; cursor: not-allowed; transform: none; }
/* 主体两栏：左内容/简介/详情，右侧学习进度与信息卡 */
.cd-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.cd-main { min-width: 0; }
.cd-main .section { margin-bottom: 16px; }
.cd-main .section:last-child { margin-bottom: 0; }
.cd-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.cd-side-card { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 18px 20px; }
.cd-side-h { font-size: 16px; font-weight: 700; color: var(--text-title); margin-bottom: 14px; padding-left: 10px; border-left: 3px solid var(--brand); line-height: 1.2; }
.cd-stat { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--font-sub); color: var(--text-sub); margin-bottom: 8px; }
.cd-stat b { font-size: var(--font-body); color: var(--text-title); font-weight: 700; }
.cd-stat-note { margin-top: 6px; font-size: var(--font-tip); color: var(--text-tip); }
.cd-pills { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.cd-pill { font-size: var(--font-tip); line-height: 1.6; padding: 9px 12px; border-radius: var(--radius-md); }
.cd-pill-ok { display: flex; align-items: flex-start; gap: 6px; background: rgba(0,168,112,.1); color: #00875c; }
.cd-pill-warn { background: rgba(245,63,63,.08); color: #c62f2f; }
.cd-pill-info { background: var(--brand-light); color: var(--brand); }
.cd-info-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--divider); font-size: var(--font-sub); }
.cd-info-row:last-child { border-bottom: none; }
.cd-info-row span { color: var(--text-tip); flex: none; }
.cd-info-row b { color: var(--text-main); font-weight: 600; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 课时行：左侧圆形序号/完成态 + 主信息 + 右侧状态徒标与箭头 */
.cd-lesson { display: flex; align-items: center; gap: 12px; padding: 13px 8px; border-bottom: 1px solid var(--divider); cursor: pointer; transition: background .15s ease; }
.cd-lesson:hover { background: var(--bg-page); }
.cd-lesson:last-child { border-bottom: none; }
.cd-no { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-page); color: var(--text-sub); font-size: var(--font-tip); font-weight: 700; }
.cd-no.is-done { background: rgba(0,168,112,.12); color: var(--success); }
.cd-no.is-lock { color: var(--text-tip); }
.cd-lesson.current { background: var(--brand-light); box-shadow: inset 3px 0 0 var(--brand); border-radius: var(--radius-sm); }
.cd-lesson.current .cd-no { background: var(--brand-gradient); color: #fff; }
.cd-lesson.done .cd-lesson-name { color: var(--text-sub); }
.cd-lesson.locked .cd-lesson-name { color: var(--text-tip); }
.cd-lesson-main { flex: 1; min-width: 0; }
.cd-lesson-name { font-size: var(--font-body); color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-lesson-meta { margin-top: 3px; font-size: var(--font-tip); color: var(--text-tip); }
.cd-lesson-state { flex: none; }
.cd-lesson-arrow { flex: none; display: inline-flex; }
.cd-lesson-arrow .cd-ico { fill: var(--text-tip); }
.cd-lesson.current .cd-lesson-arrow .cd-ico { fill: var(--brand); }
@media (max-width: 1023px) {
  .cd-body { grid-template-columns: 1fr; }
  .cd-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .cd-side-card { flex: 1 1 280px; }
}
@media (max-width: 767px) {
  .cd-hero { grid-template-columns: 1fr; }
  .cd-hero-cover, .cd-hero-cover-ph { min-height: 170px; }
  .cd-hero-title { font-size: var(--font-title); }
}

/* 学习中心课程 section：标题右侧「更多课程」链接（课程卡本身复用课程商店 .pc-course-grid/.pc-course-card，无需额外样式） */
.study-course-more { margin-left: auto; font-size: var(--font-sub); font-weight: 400; color: var(--brand); text-decoration: none; }
.study-course-more:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .pc-course-grid { grid-template-columns: 1fr 1fr; }
  .pc-cd-head { grid-template-columns: 1fr; }
  .pc-cd-cover, .pc-cd-cover-ph { height: 180px; }
}