/* ===== 兆伸讲师网 前台样式 v3.0（与后台 admin.css v3.0 共享设计 token）
   UICraft 工作流：normalize + typeset + arrange + polish
   主题：深蓝品牌 + 白色卡片 + 细边框 + 极淡阴影 + 数值等宽字形。 */

/* 思源黑体（Source Han Sans）· Google Fonts 镜像 Noto Sans SC · SIL OFL 开源可商用
   字体链接改到 inc/layout.php 里用 media="print" 非阻塞加载：
   @import 会让浏览器等 fonts.googleapis.com 返回后才开始画字，
   国内手机 4G 上这个域名经常几秒不响应，表现为点开页面一片白。
   这里不加载也不影响阅读，font-family 已回落到苹方/微软雅黑。 */

:root {
  /* —— 共享 token（与 admin.css v3.0 保持一致，整站一个产品感） —— */
  --brand:        #1B57D9;
  --brand-rgb:     27, 87, 217;
  --brand-hover:  #2E6CE6;
  --brand-dark:   #0E4DBF;
  --brand-light:  #EEF3FF;
  --brand-soft:   #F7FAFF;

  --ink:          #0D1730;
  --ink-2:        #46566F;
  --muted:        #7488A2;

  --line:         #E8EEF8;
  --line-2:       #DFE9F5;
  --bg:           #ffffff;
  --bg-alt:       #F5F8FC;
  --surface:      #F4F7FC;

  --ai:           #0E9E6B;
  --success:      #116d45;
  --warning:      #B25E00;
  --danger:       #C0392B;

  --shadow-xs:    0 1px 2px rgba(13,23,48,.04);
  --shadow-sm:    0 1px 3px rgba(13,23,48,.05), 0 6px 18px rgba(13,23,48,.04);
  --shadow:       0 12px 32px rgba(13,23,48,.08);
  --shadow-hover: 0 10px 28px rgba(27,87,217,.14);

  --radius:       14px;
  --radius-sm:    10px;
  --radius-xs:    8px;
  --radius-lg:    22px;

  --grad-btn:    linear-gradient(180deg, #3B7BF0 0%, #1B57D9 60%, #144FBF 100%);
  --grad-hero:   linear-gradient(155deg, #0D2C6E 0%, #144FBF 45%, #1B57D9 100%);
  --grad-footer: linear-gradient(180deg, #0E4DBF 0%, #144FBF 50%, #1B57D9 100%);

  --dur-fast:  .14s;
  --dur:       .2s;
  --dur-slow:  .35s;
  --ease-out:  cubic-bezier(.2,.8,.2,1);
  --ease-in:   cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* 关掉 Android/鸿蒙/微信浏览器的小屏字号自动放大，否则只有正文被撑大、卡片和按钮不变，版式会错位 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: 'Noto Sans SC', 'Source Han Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: var(--ink); background: var(--bg); line-height: 1.65;
  overflow-wrap: break-word;
}
/* 触屏：去掉双击缩放等待（不关用户双指缩放），并给可点元素留出可点区域 */
a, button, label, summary, [role="button"], input[type="submit"] { touch-action: manipulation; }
a, button, .chip, .mode-tab, .demo-trigger, .fav-btn, .cmp-chip { -webkit-tap-highlight-color: rgba(var(--brand-rgb), .12); }
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--brand-hover); }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 560px; }
main.site-main { min-height: 60vh; }

/* ---------- 长文阅读页（知识库条目、平台资讯）
   桌面：正文列 + 300px 侧栏；1024px 以下自动收成单列，手机端DOM顺序与原来一致。 */
.wrap-read { max-width: 1064px; }
.read-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.read-main { min-width: 0; max-width: 760px; }
.read-col { max-width: 760px; margin: 0 auto; }
.read-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.read-side .card { padding: 16px; }

/* 富文本正文样式（后台 rich() 允许的标签全覆盖） */
.article-body { font-size: 15.5px; line-height: 1.95; }
.article-body > :first-child { margin-top: 0; }
.article-body p { margin: 0 0 14px; }
.article-body h2 { font-size: 20px; line-height: 1.5; margin: 26px 0 10px; }
.article-body h3 { font-size: 17.5px; line-height: 1.5; margin: 20px 0 8px; }
.article-body h4 { font-size: 16px; margin: 16px 0 6px; }
.article-body ul, .article-body ol { margin: 0 0 14px; padding-left: 24px; }
.article-body li { margin: 5px 0; }
.article-body a { text-decoration: underline; text-underline-offset: 3px; }
.article-body img { border-radius: var(--radius-sm); margin: 14px 0; height: auto; }
.article-body blockquote {
  margin: 16px 0; padding: 12px 16px; border-left: 3px solid var(--brand);
  background: var(--bg-alt); color: var(--ink-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.article-body table { width: 100%; border-collapse: collapse; font-size: 14px; }
/* 宽表在小屏横向自己滚，不把整页撑出横向溢出（滚动容器由 site.js 包一层 .tbl-scroll） */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; margin: 0 0 16px; }
.tbl-scroll table { min-width: 560px; margin: 0; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.article-body th { background: var(--bg-alt); font-weight: 600; }

code, .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---------- 顶栏 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(230,237,245,.8);
  transition: box-shadow var(--dur) var(--ease-out);
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
/* 顶栏：9 项导航 + Logo + 登录态按钮在 1280 笔电上会挤爆，
   所以允许导航条在窄一点时换行、高度自动长（min-height 而非固定 64px），避免整站横向溢出。 */
.header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; min-height: 64px; padding: 4px 0; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 700; flex: 0 1 auto; min-width: 0; }
.brand-logo { height: 44px; width: auto; max-width: 168px; object-fit: contain; }
.brand-name {
  font-family: 'Noto Sans SC', 'Source Han Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 18px; letter-spacing: .8px; font-weight: 700;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.nav-toggle {
  display: none; background: none; border: 0; font-size: 22px;
  cursor: pointer; color: var(--ink); padding: 6px; border-radius: 8px;
  width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center;
  transition: background var(--dur-fast);
}
.nav-toggle:hover { background: var(--bg-alt); }
.main-nav { flex: 1 1 auto; min-width: 0; }
.main-nav ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.main-nav a {
  display: block; padding: 7px 11px; border-radius: 8px;
  color: var(--ink); font-size: 14px; font-weight: 500; letter-spacing: .1px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.main-nav a:hover { background: rgba(var(--brand-rgb), .06); color: var(--brand); }
.main-nav a.on   { background: rgba(var(--brand-rgb), .08); color: var(--brand); }
.header-actions { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }
.header-actions .btn { padding: 0 12px; }
.lang-switch {
  font-size: 13px; color: var(--muted);
  border: 1px solid var(--line); padding: 5px 10px; border-radius: 6px;
  transition: all var(--dur-fast);
}
.lang-switch:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 18px; border-radius: 9px;
  border: 1px solid transparent; font-size: 13.5px; cursor: pointer; background: none;
  font-weight: 500; text-align: center; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              filter var(--dur-fast),
              border-color var(--dur-fast),
              color var(--dur-fast);
  user-select: none; font-family: inherit;
}
.btn:active { transform: translateY(.5px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .18); }
.btn.solid {
  background: var(--grad-btn); color: #fff;
  box-shadow: 0 2px 10px rgba(var(--brand-rgb), .28);
}
.btn.solid:hover {
  background: var(--grad-btn); filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(var(--brand-rgb), .36);
  color: #fff;
}
.btn.ghost { border-color: var(--line-2); color: var(--ink); background: #fff; box-shadow: var(--shadow-xs); }
.btn.ghost:hover { border-color: #BFD1F2; color: var(--brand); background: var(--brand-soft); }
.btn.big { height: 44px; padding: 0 28px; font-size: 15px; border-radius: 10px; }
form .btn { width: 100%; }

/* ---------- 通用 ---------- */
.page-title { margin: 36px 0 6px; font-size: 30px; letter-spacing: -.4px; font-weight: 700; }
.page-sub { color: var(--muted); margin: 0 0 24px; font-size: 14px; }
/* 表单/栏目下的说明小字：原来是内联 font-size:12px，媒体查询够不到，手机上偏小 */
.page-sub.sm { font-size: 12px; margin: 6px 0 0; }
.dim.sm { font-size: 12px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.card:hover { border-color: #D8E3F6; }
.msg { padding: 11px 15px; border-radius: 10px; margin: 12px 0; font-size: 13.5px; line-height: 1.6; }
.msg.err { background: #FDF2F2; color: var(--danger); border: 1px solid #F4D2D2; }
.msg.ok  { background: #F0FAF4; color: var(--success); border: 1px solid #C3E7D2; }
.msg.info { background: #E7EEFF; color: #2A3F9C; border: 1px solid #CDDBFA; }
.dim { color: var(--muted); }
.empty { text-align: center; }

/* ---------- 芯片 / 标签 ---------- */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: auto; min-height: 32px; padding: 5px 14px; max-width: 100%;
  border-radius: 999px; font-size: 13px; line-height: 1.35;
  border: 1px solid var(--line-2); background: #fff;
  cursor: pointer; color: var(--ink); font-weight: 500;
  transition: all var(--dur-fast);
}
.chip:hover { border-color: #BFD1F2; color: var(--brand); background: var(--brand-soft); }
.chip.on { background: var(--grad-btn); color: #fff; border-color: transparent; box-shadow: 0 2px 10px rgba(var(--brand-rgb), .28); }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px; border-radius: 6px;
  font-size: 12px; font-weight: 600; margin-left: 6px;
  border: 1px solid var(--line); background: #F2F5FB; color: var(--ink-2);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.pill.enterprise { background: #E8F2FF; color: #0F6FD6; border-color: #BCD6F5; }
.pill.personal   { background: #F3EAFD; color: #7A2EE6; border-color: #DDCBFA; }
.pill.job        { background: #FFF4E5; color: #D97706; border-color: #FBDCB0; }
.pill.on { background: #EDF9F2; color: #177A41; border-color: #C3E7D2; }
.pill.off { background: #F5F7FA; color: #6B7A8D; border-color: #E3E9F2; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--grad-hero);
  color: #fff; padding: 76px 0 80px;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1100px 480px at 80% -10%, rgba(120,175,255,.25), transparent 62%),
    radial-gradient(700px 400px at 100% 100%, rgba(59,123,240,.35), transparent 55%),
    radial-gradient(600px 300px at 0% 80%, rgba(255,255,255,.06), transparent 60%);
  z-index: 0; pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; left: 6%; bottom: -42%; width: 38%; height: 72%;
  background: radial-gradient(circle, rgba(160,200,255,.12), transparent 70%);
  z-index: 0; pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-inner { text-align: center; }
.hero-tagline {
  color: #B0C8FF; letter-spacing: 6px; font-size: 11px;
  font-weight: 700; text-transform: uppercase;
}
.hero-title {
  font-size: 44px; line-height: 1.18; margin: 10px 0 18px;
  font-weight: 800; letter-spacing: -.6px;
  text-shadow: 0 4px 24px rgba(0,0,0,.18);
}
.hero-sub { max-width: 640px; margin: 0 auto 28px; color: #D4E3FA; font-size: 16px; line-height: 1.7; }

/* Hero AI 卡：白底 + 1px 内描边 + 深蓝晕染 + 更强阴影，使其从 hero 深色背景中立体地浮现出来 */
.hero-ai {
  max-width: 740px; margin: 0 auto; text-align: left; color: var(--ink);
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.85);
  box-shadow:
    0 30px 60px rgba(13,44,110,.45),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(120,165,255,.18);
  animation: heroCardIn .7s var(--ease-out) both;
  position: relative; overflow: hidden;
}
.hero-ai::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(480px 240px at 50% -20%, rgba(var(--brand-rgb), .08), transparent 70%);
}
@keyframes heroCardIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-ai > * { position: relative; z-index: 1; }
.hero-ai-link { text-align: center; font-size: 13px; margin-top: 10px; color: var(--muted); }
.hero-ai-link a { font-weight: 600; }
.hero-search { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-search input, .hero-search select {
  flex: 1 1 200px; height: 44px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 10px; font: inherit;
  background: #fff; color: var(--ink);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.hero-search select { min-width: 130px; }
.hero-search input:focus, .hero-search select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
}
.hero-search .btn { height: 44px; padding: 0 24px; flex: 0 0 auto; }
.hero-ai-tip { font-size: 13px; color: var(--muted); margin: 0 0 10px; text-align: center; }

/* ---------- AI 对话 ---------- */
/* AI 对话卡不在 .wrap 内，手机上是满屏宽，两侧留出 18px 才不贴边 */
.ai-chat { max-width: 780px; width: calc(100% - 36px); margin: 20px auto; }
.chat-log { height: 320px; overflow-y: auto; padding: 6px 2px 10px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.chat-log.compact { height: 210px; }
.msg.bot, .msg.user { animation: msgIn .3s var(--ease-out) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.msg.user { justify-content: flex-end; }
.bubble {
  max-width: 85%; padding: 11px 15px; border-radius: 14px;
  background: var(--bg-alt); font-size: 14.5px; line-height: 1.65;
  white-space: normal; word-break: break-word;
  box-shadow: var(--shadow-xs);
}
.bubble p { margin: 0 0 .5em; } .bubble p:last-child { margin: 0; }
.msg.user .bubble { background: var(--grad-btn); color: #fff; border-bottom-right-radius: 4px; box-shadow: 0 2px 10px rgba(var(--brand-rgb), .3); }
.msg.bot .bubble { border-bottom-left-radius: 4px; background: #fff; border: 1px solid var(--line); }
.quicks {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line);
}
.chat-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.chat-form input {
  flex: 1; min-width: 150px; height: 44px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 10px; font: inherit;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.chat-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12); }
.chat-form .btn { height: 44px; padding: 0 22px; }
.chat-form.blocked { opacity: .55; }

/* ---------- 筛选 / 搜索 ---------- */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 24px; align-items: center; }
.filter-bar input, .filter-bar select {
  height: 40px; padding: 0 12px; border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); font: inherit; background: #fff; color: var(--ink);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.filter-bar input:focus, .filter-bar select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12); }
.filter-bar .check { width: auto; }
.mode-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; padding: 4px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 12px; }
.mode-tab {
  flex: 1 1 0; text-align: center; padding: 11px 14px;
  border: 1px solid transparent; border-radius: 9px;
  color: var(--ink-2); font-size: 14px; font-weight: 600; letter-spacing: .2px;
  cursor: pointer; background: transparent;
  transition: all var(--dur-fast) var(--ease-out);
}
.mode-tab:hover { color: var(--brand); background: #fff; border-color: var(--line-2); }
.mode-tab.on {
  border-color: transparent; color: #fff; background: var(--grad-btn);
  box-shadow: 0 2px 10px rgba(var(--brand-rgb), .28);
}
.mode-tab.on.on-job {
  background: linear-gradient(135deg, #7C3AED, #4F46E5);
  box-shadow: 0 2px 10px rgba(124,58,237,.35);
}
.mode-hint { color: var(--muted); font-size: 13px; margin: 12px 0 0; }

.fsearch { padding: 18px 20px; margin: 16px 0 22px; }
.fs-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fs-row .fs-kw {
  flex: 2 1 260px; height: 40px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); font: inherit;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.fs-row .fs-kw:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12); }
.fs-row select {
  flex: 1 1 130px; height: 40px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); font: inherit;
  background: #fff; color: var(--ink);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.fs-row select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12); }
.fs-row .btn { height: 40px; padding: 0 22px; flex: 0 0 auto; }
.fs-more { margin-top: 14px; border-top: 1px dashed var(--line-2); padding-top: 12px; }
.fs-more summary { cursor: pointer; color: var(--brand); font-size: 14px; font-weight: 600; padding: 4px 0; }
.fs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 14px 18px; margin-top: 14px; align-items: end; }
.fs-grid > label { font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.fs-grid select { height: 36px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--radius-xs); font: inherit; color: var(--ink); background: #fff; }
.fs-checks { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.fs-checks .lbl { width: 100%; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.fs-checks .check { font-size: 13px; color: var(--ink); }
.fs-active { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.fs-active .lbl { font-size: 13px; color: var(--muted); }
.fs-active .chip b { color: var(--brand); font-weight: 700; }
.fs-clear { font-size: 13px; color: var(--muted); }
.fs-clear:hover { color: var(--brand); }
.fs-count { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.fs-count b { color: var(--brand); font-size: 16px; font-variant-numeric: tabular-nums; }

/* ---------- 讲师卡片 ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 22px; }
.card-grid.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.grid-3 .teacher-card { min-width: 0; }
.card-grid.grid-5 { grid-template-columns: repeat(5, 1fr); gap: 18px; }
.card-grid.grid-5 .teacher-card {
  min-width: 0; border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.card-grid.grid-5 .teacher-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(var(--brand-rgb), .18);
  border-color: rgba(var(--brand-rgb), .3);
}
.card-grid.grid-5 .tc-photo { aspect-ratio: 2 / 3; }
.card-grid.grid-5 .tc-photo.ph { font-size: 46px; }
.card-grid.grid-5 .tc-body { padding: 12px 12px 14px; }
.card-grid.grid-5 .tc-head { gap: 6px; margin-bottom: 4px; }
.card-grid.grid-5 .tc-id b { font-size: 15px; }
.card-grid.grid-5 .tc-id span { font-size: 12px; }
.card-grid.grid-5 .tc-field { font-size: 13px; margin-bottom: 3px; }
.card-grid.grid-5 .tc-courses { font-size: 12.5px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-grid.grid-5 .tc-fee { font-size: 12px; margin-bottom: 6px; }
.card-grid.grid-5 .tc-more { font-size: 12px; }
.card-grid.grid-5 .ai-badge { font-size: 10px; padding: 1px 7px; }

.teacher-card {
  display: block; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur);
  overflow: hidden;
}
.teacher-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(var(--brand-rgb), .25);
  opacity: 1;
}
.tc-photo {
  width: 100%; aspect-ratio: 2 / 3;
  background: linear-gradient(160deg, #EEF3FF, #DCE7FA);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  position: relative;
}
.tc-photo .aff-badge {
  position: absolute; left: 10px; bottom: 10px; height: 26px; padding: 0 12px;
  margin: 0; display: flex; align-items: center; line-height: 1;
  z-index: 2; box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(11,34,90,.18);
}
.tc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-photo.ph { font-size: 76px; font-weight: 800; color: rgba(var(--brand-rgb), .45); letter-spacing: -2px; }
.tc-photo.logo img { object-fit: contain; padding: 26px; }
.tc-body { padding: 15px 17px 17px; }
.tc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tc-avatar { width: 36px; aspect-ratio: 2/3; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.tc-avatar.ph { background: rgba(var(--brand-rgb), .1); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }
.tc-id { flex: 1; min-width: 0; }
.tc-id b { display: block; font-size: 16.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; letter-spacing: -.1px; }
.tc-id span { color: var(--muted); font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tc-field { color: var(--brand); font-weight: 600; margin: 0 0 4px; font-size: 13.5px; }
.tc-courses { color: var(--ink-2); margin: 0 0 4px; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tc-fee { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
.tc-more { font-size: 13px; color: var(--brand); font-weight: 600; }

/* ---------- 徽章 ---------- */
.ai-badge {
  background: linear-gradient(135deg, #2E8BFF 0%, #0E9E6B 100%);
  color: #fff; font-size: 11px; padding: 3px 10px; border-radius: 999px;
  font-weight: 700; letter-spacing: .3px;
  box-shadow: 0 2px 6px rgba(14,158,107,.28);
}
.ai-badge::before { content: "✦"; margin-right: 3px; font-size: 10px; opacity: .9; }
.ms-badge {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .3px;
  padding: 3px 10px; border-radius: 999px; margin-left: 6px; line-height: 1;
  vertical-align: middle;
}
.aff-badge {
  display: inline-flex; align-items: center;
  min-width: fit-content; font-size: 12px; line-height: 1; padding: 5px 11px;
  border-radius: 999px; font-weight: 600;
}
.aff-badge.free   { background: #E8F3FF; color: #1571E0; border: 1px solid #BBD7FA; }
.aff-badge.agency { background: #E9F8F2; color: #0E9E6B; border: 1px solid #BCE8D5; }
.aff-badge.corp   { background: #F4EFFE; color: #7C3AED; border: 1px solid #DACCFB; }
.dim { color: var(--muted); }

/* ---------- 表单 ---------- */
.form-stack label, .reg-form fieldset label { display: block; margin-bottom: 14px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.form-stack input, .form-stack select, .form-stack textarea,
.reg-form input, .reg-form select, .reg-form textarea {
  width: 100%; margin-top: 6px; height: 40px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); font: inherit;
  background: #fff; color: var(--ink);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-stack textarea, .reg-form textarea {
  height: auto; min-height: 120px; padding: 10px 12px;
}
.form-stack input:focus, .reg-form input:focus,
.form-stack textarea:focus, .reg-form textarea:focus,
.form-stack select:focus, .reg-form select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
}
.form-stack input::placeholder, .form-stack textarea::placeholder,
.reg-form input::placeholder, .reg-form textarea::placeholder,
.chat-form input::placeholder { color: #A8B8CC; opacity: 1; }
.form-stack input[type="checkbox"], .form-stack input[type="radio"],
.reg-form input[type="checkbox"], .reg-form input[type="radio"] { height: auto; margin-top: 0; accent-color: var(--brand); }
.form-stack input[type="file"], .reg-form input[type="file"] { height: auto; padding: 8px 10px; }
/* 独立搜索框（知识库等）：原来只有 class 没有样式，手机上会退回浏览器默认外观且字号偏小 */
.input {
  width: 100%; height: 40px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
  color: var(--ink); font: inherit; font-size: 14px;
  -webkit-appearance: none; appearance: none; /* iOS 上 type=search 默认带内阴影和圆角，和站内其他输入框不一样 */
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14); }

.field-row { display: flex; gap: 12px; }
.field-row > label { flex: 1; }
.region-pick { display: flex; gap: 8px; margin-top: 4px; }
.region-pick select { flex: 1; min-width: 0; margin-top: 0; }
.check { display: inline-flex !important; align-items: center; gap: 6px; flex-direction: row !important; font-size: 13.5px; color: var(--ink); }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.check-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.check-line .lbl, .check-line label { font-size: 13.5px; }
.check-line .lbl { display: block; width: 100%; }
.agree { margin: 8px 0 16px; }

/* 注册表单 */
.reg-wrap { max-width: 760px; }
.role-picker { display: flex; gap: 10px; margin: 16px 0 20px; }
.role-btn {
  flex: 1; padding: 16px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.role-btn:hover { border-color: var(--brand); color: var(--brand); box-shadow: var(--shadow-xs); }
.role-btn.on {
  border-color: var(--brand); color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
}
.fs-role { display: none; }
.fs-role:first-of-type { display: block; }
.reg-form fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; }
.reg-form legend { font-size: 15px; font-weight: 700; padding: 0 8px; color: var(--ink); }
.reg-form legend em { font-weight: 400; font-style: normal; color: var(--muted); font-size: 13px; }
.ext-collapse { margin: 4px 0 14px; color: var(--muted); }
.ext-collapse summary { cursor: pointer; }
.form-stack .btn, .reg-form > .btn { margin-top: 8px; }

/* ---------- 讲师详情 ---------- */
.vc-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; margin: 16px 0;
}
.tpl { display: flex; gap: 24px; align-items: center; }
.big-avatar {
  width: 150px; aspect-ratio: 2/3; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0;
  box-shadow: 0 4px 18px rgba(13,23,48,.12);
}
.big-avatar.ph { background: rgba(var(--brand-rgb), .1); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; }
.tpl h1 { margin: 0 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -.3px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tpl .meta { color: var(--muted); margin: 2px 0; font-size: 13.5px; }
.vc-grid { column-count: 3; column-gap: 16px; }
@media (max-width: 1024px) { .vc-grid { column-count: 2; } }
@media (max-width: 620px) { .vc-grid { column-count: 1; } }
.vc-sec {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 18px; transition: border-color var(--dur-fast);
}
.vc-grid > .vc-sec {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  margin: 0 0 16px;
}
.vc-sec:hover { border-color: rgba(var(--brand-rgb), .25); }
.vc-sec h3 { margin: 0 0 8px; font-size: 15px; color: var(--brand); font-weight: 600; }
.vc-sec p { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.7; }
.fs-sub { margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--line); font-size: 14px; color: var(--brand); font-weight: 600; }
.ai-bio { background: var(--brand-soft); border: 1px solid #DCE8FA; border-radius: var(--radius-sm); padding: 14px 16px; }
.ai-bio-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ai-bio-head label { margin: 0; }
.ai-bio-head .btn { width: auto; padding: 6px 14px; font-size: 13px; height: 32px; }
.escrow-note { border-left: 4px solid var(--ai); }
.escrow-note h3 { margin: 0 0 8px; }
.escrow-note p { margin: 0 0 8px; color: var(--ink-2); font-size: 13.5px; }

/* View stats (人气浏览) */
.view-stats { display: flex; gap: 12px; margin-top: 10px; }
.view-stats .vs-item {
  flex: 1; background: linear-gradient(135deg, #F5F8FC 0%, #EEF2FF 100%);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 12px; text-align: center;
}
.view-stats .vs-item b {
  display: block; font-size: 26px; color: var(--brand); line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -1px;
}
.view-stats .vs-item span { font-size: 12px; color: var(--muted); }

/* 弹窗 / 试听触发 */
.demo-qr .demo-qr-box { max-width: 220px; }
/* 分享弹层二维码（本地 qrcode.min.js 生成，容器由 JS 塞入 img/canvas） */
.share-qr { width: 180px; height: 180px; margin: 10px auto; border: 1px solid #EEF3FA; border-radius: 10px; padding: 6px; background: #fff; overflow: hidden; }
.share-qr img, .share-qr canvas { display: block; width: 100% !important; height: 100% !important; }
.demo-qr-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; margin: 0 auto; }
.demo-qr-box img { width: 100%; height: auto; display: block; border-radius: 6px; }
.demo-trigger {
  position: absolute; top: 10px; right: 10px; z-index: 3; cursor: pointer;
  border: 1px solid rgba(255,255,255,.9);
  background: var(--ai); color: #fff; font-size: 12px; font-weight: 600;
  padding: 8px 12px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: transform var(--dur-fast), background var(--dur-fast);
}
.demo-trigger:hover { transform: scale(1.05); filter: brightness(1.08); }
.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 999;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: fadeIn .2s var(--ease-out);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
  position: relative; background: #fff; border-radius: var(--radius-sm); padding: 22px; max-width: 340px; width: 100%;
  margin: auto; /* 配合 .modal-mask 的 overflow-y:auto：内容高于视口时可上下滚动，顶部不被裁掉 */
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
  animation: modalIn .3s var(--ease-out);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-close {
  position: absolute; top: 10px; right: 14px; font-size: 22px; line-height: 1; color: #9BAFC5; cursor: pointer;
  min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--dur-fast);
}
.modal-close:hover { color: var(--ink); }

/* 双满意 / 口碑徽标 */
.sat-pill { display: inline-flex; gap: 18px; flex-wrap: wrap; margin: 8px 0 0; }
.sat-item b { font-size: 18px; color: var(--brand); font-variant-numeric: tabular-nums; }
.sat-item span { font-size: 12px; color: var(--muted); display: block; }
.dual-badge, .amb-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; height: 22px; padding: 0 10px; border-radius: 999px;
  margin-left: 6px; vertical-align: middle; color: #fff;
}
.dual-badge { background: linear-gradient(135deg,#E2620F,#F5A623); box-shadow: 0 2px 6px rgba(226,98,15,.25); }
.amb-badge  { background: linear-gradient(135deg,#7A3FF2,#5578FF); box-shadow: 0 2px 6px rgba(122,63,242,.25); }

/* 收藏 + 对比 */
.fav-btn {
  cursor: pointer; background: #fff; border: 1px solid var(--line-2); border-radius: 999px;
  padding: 5px 13px; font-size: 13px; color: var(--muted);
  transition: all var(--dur-fast);
}
.fav-btn.on { background: #FFF7E8; border-color: #F5A623; color: #E2620F; }
.tc-fav { position: absolute; top: 8px; left: 8px; z-index: 3; background: rgba(255,255,255,.9); border-radius: 999px; padding: 2px 9px; font-size: 12px; color: #E2620F; }
.compare-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  padding: 10px 20px; display: flex; align-items: center; gap: 12px; z-index: 50;
  animation: slideUp .3s var(--ease-out);
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.compare-bar .avs { display: flex; gap: 8px; flex: 1; overflow-x: auto; }
.compare-bar .av { position: relative; width: 34px; aspect-ratio: 2/3; border-radius: 5px; overflow: hidden; background: #eee; flex-shrink: 0; }
.compare-bar .av img { width: 100%; height: 100%; object-fit: cover; }
.compare-bar .av .rm {
  position: absolute; top: -4px; right: -4px; background: #E34; color: #fff; border-radius: 50%;
  width: 16px; height: 16px; font-size: 11px; line-height: 16px; text-align: center; cursor: pointer;
  transition: transform var(--dur-fast);
}
.compare-bar .av .rm:hover { transform: scale(1.15); }
.compare-table th, .compare-table td { padding: 12px 14px; border: 1px solid var(--line); vertical-align: middle; font-size: 13px; text-align: center; }
.compare-table th { text-align: left; color: var(--muted); background: var(--bg-alt); min-width: 96px; }
.compare-table th.fst { text-align: left; color: var(--muted); background: var(--bg-alt); width: 130px; }
.honor-tab { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 18px; }
.honor-tab a {
  height: 32px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--ink); font-size: 13px; font-weight: 500;
  transition: all var(--dur-fast);
}
.honor-tab a:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.honor-tab a.on { background: var(--grad-btn); color: #fff; border-color: transparent; box-shadow: 0 2px 10px rgba(var(--brand-rgb), .28); }

.cmp-chip {
  cursor: pointer;
  border: 1px solid var(--line-1); background: #fff;
  color: var(--brand); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  transition: all var(--dur-fast); white-space: nowrap; flex-shrink: 0;
}
.cmp-chip:hover { background: var(--brand-soft); border-color: var(--brand); }
.cmp-chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.tc-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px; gap: 8px;
}
.tc-foot .tc-more { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  background: var(--ink); color: #fff; border-radius: 14px; padding: 14px 18px;
  font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3);
  display: flex; flex-direction: column; gap: 8px; min-width: 280px;
  max-width: calc(100vw - 24px);
  animation: toastIn .3s var(--ease-out);
}
/* 底部浮条出现时给页面留出空间，避免遮住页脚与最后一块内容（由 refreshCmp 切换 has-cmp） */
body.has-cmp { padding-bottom: 150px; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.cmp-toast a { color: #7FC0FF; font-weight: 600; align-self: flex-end; }
.cmp-toast .btn.solid { padding: 8px 16px; align-self: flex-end; }
.cmp-head { display: flex; justify-content: space-between; align-items: center; }
.cmp-clear { background: transparent; border: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.7); font-size: 12px; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.cmp-clear:hover { color: #fff; border-color: #fff; }
.cmp-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.cmp-tag { background: rgba(255,255,255,.12); padding: 4px 10px; border-radius: 999px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.cmp-tag span { cursor: pointer; color: #ff6b6b; font-weight: 700; }
.cmp-tag span:hover { color: #fff; }
.cmp-table tbody tr:nth-child(odd) { background: var(--bg-alt); }
.cmp-avatar td { text-align: center; }
.cmp-avatar img { width: 72px; height: 92px; object-fit: cover; border-radius: 10px; display: block; margin: 4px auto; }
.cmp-avatar .ph { width: 72px; height: 92px; margin: 4px auto; font-size: 28px; background: var(--brand-soft); color: var(--brand); }
.cmp-name { margin-top: 6px; font-weight: 700; color: var(--ink); }
.cmp-sat { font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }

/* 漏斗 */
.funnel-bar { height: 10px; background: #EEF2F7; border-radius: 999px; overflow: hidden; }
.funnel-fill { height: 100%; background: linear-gradient(90deg,#0F6FD6,#0E9E6B); border-radius: 999px; transition: width .3s var(--ease-out); }

/* 列表 */
.cta-line { margin: 26px 0; display: flex; gap: 12px; flex-wrap: wrap; }
.link { color: var(--brand); font-size: 14px; font-weight: 600; }
/* 内链词云（AI 找讲师页的领域/城市）：原来只有 class 没有样式，手机上链接会挤成一坨难点中 */
.links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.links a { color: var(--brand); padding: 6px 0; }
.links a:hover { color: var(--brand-dark); text-decoration: underline; }
.rank { font-size: 20px; font-weight: 800; width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
/* 排行榜行：姓名/领域列可压缩，统计列小屏不再挤压（原来全是内联样式，媒体查询够不到） */
.rank-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #eef; color: inherit; text-decoration: none; }
.rank-row:hover { background: var(--brand-soft); }
.rank-row .rank { flex: 0 0 auto; }
.rank-info { flex: 1 1 auto; min-width: 0; }
.rank-stat { flex: 0 0 auto; text-align: right; line-height: 1.5; }
@media (max-width: 480px) {
  .rank-row { padding: 12px 14px; gap: 8px; }
  .rank-stat { font-size: 12px; }
}
.stars { color: #E2620F; letter-spacing: 1px; }
.stars b { margin-left: 2px; }

.enter-role-row, .job-block { margin-top: 8px; }
.inst-type-row { margin-top: 6px; }
.inst-type-row .check { margin-right: 16px; }
.job-block { border-left: 3px solid var(--brand); padding-left: 14px; margin-top: 10px; }
.job-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.job-cell { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 14px; transition: border-color var(--dur-fast); }
.job-cell:hover { border-color: var(--brand); }
.job-cell span { display: block; font-size: 12px; color: #8A93A6; margin-bottom: 3px; }
.job-cell b { font-size: 14px; color: var(--ink); font-weight: 600; }
@media (max-width: 520px) { .job-grid { grid-template-columns: 1fr; } }

/* ---------- 个人中心 ---------- */
.member-wrap { display: flex; gap: 26px; margin: 30px auto; align-items: flex-start; }
.member-side { width: 232px; flex-shrink: 0; position: sticky; top: 84px; }
.member-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; text-align: center; box-shadow: var(--shadow); }
.member-card .avatar, .avatar.big {
  width: 52px; aspect-ratio: 2/3; border-radius: 8px; margin: 0 auto 12px;
  background: var(--brand-soft); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; overflow: hidden;
}
.member-card .avatar img, .avatar.big img { width: 100%; height: 100%; object-fit: cover; }
.member-card b { display: block; font-size: 14px; font-weight: 700; }
.member-card .tag { display: inline-block; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 999px; margin: 8px 0; }
.member-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.member-nav a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 9px;
  color: var(--ink-2); font-size: 13.5px; font-weight: 500;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.member-nav a:hover { background: var(--brand-soft); color: var(--brand); }
.member-nav a.on { background: var(--grad-btn); color: #fff; box-shadow: 0 2px 10px rgba(var(--brand-rgb), .28); }
.member-body { flex: 1; min-width: 0; }
.member-body h2 { margin: 22px 0 12px; font-size: 19px; font-weight: 700; letter-spacing: -.2px; }
.member-overview .kv { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--line-2); font-size: 13.5px; }
.member-overview .kv span { color: var(--muted); } .member-overview .kv b { font-weight: 600; color: var(--ink); }
.need-item b { display: block; margin-bottom: 4px; font-weight: 600; }
.need-item .meta { color: var(--muted); font-size: 13px; }

/* ---------- 价值区 / 页脚 ---------- */
.section { padding: 56px 0; }
.section.alt { background: var(--bg-alt); }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; gap: 12px; }
.section-head h2 { margin: 0; font-size: 24px; letter-spacing: -.3px; font-weight: 700; color: var(--ink); }
.value-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.value {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur);
  position: relative; overflow: hidden;
}
.value::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--ai));
  opacity: 0; transition: opacity var(--dur);
}
.value:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: rgba(var(--brand-rgb), .18); }
.value:hover::before { opacity: 1; }
.value-num { color: rgba(var(--brand-rgb), .12); font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -2px; }
.value h3 { margin: 14px 0 8px; font-size: 16px; font-weight: 700; letter-spacing: -.1px; }
.value p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.75; }

.site-footer {
  border-top: none;
  background: var(--grad-footer);
  color: #DCE9FA; margin-top: 56px; padding: 48px 0;
  position: relative; overflow: hidden;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(800px 300px at 50% 0%, rgba(255,255,255,.08), transparent 70%);
  pointer-events: none;
}
.site-footer .wrap { text-align: center; position: relative; z-index: 1; }
.foot-slogan { font-size: 15px; color: #fff; margin: 0 0 10px; font-weight: 500; letter-spacing: .3px; }
.foot-legal { font-size: 13px; color: #B6D3F5; margin: 0 0 14px; line-height: 1.7; }
.foot-nav { display: flex; justify-content: center; gap: 22px; font-size: 13px; flex-wrap: wrap; }
.foot-nav a { color: #DCE9FA; transition: color var(--dur-fast); }
.foot-nav a:hover { color: #fff; }
.foot-beian { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; line-height: 1; }
.foot-beian a { display: inline-flex; align-items: center; gap: 4px; color: #B6D3F5; transition: color var(--dur-fast); }
.foot-beian a:hover { color: #fff; }
.foot-beian .sep { color: #B6D3F5; opacity: .55; }
.police-ico { width: 14px; height: 14px; flex: none; }

/* ---------- 公司 / 公示 ---------- */
.section-title { font-size: 22px; margin: 30px 0 12px; font-weight: 700; letter-spacing: -.2px; }
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding: 4px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table-wrap th, .table-wrap td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.table-wrap th {
  color: var(--muted); font-weight: 600; font-size: 11.5px; letter-spacing: .7px; text-transform: uppercase;
  background: var(--bg-alt); position: sticky; top: 0;
}
.table-wrap tbody tr { transition: background var(--dur-fast); }
.table-wrap tbody tr:hover { background: var(--brand-soft); }
.pay { background: rgba(var(--brand-rgb), .1); color: var(--brand); padding: 2px 10px; border-radius: 999px; font-size: 12px; white-space: nowrap; font-weight: 500; }
.pay.settled { background: rgba(14,158,107,.14); color: var(--ai); }

.corp { display: grid; grid-template-columns: 1fr 320px; gap: 26px; margin: 28px auto; align-items: start; }
.corp-body .lead { font-size: 17px; color: var(--ink); font-weight: 500; margin-top: 0; line-height: 1.65; }
.corp-body p { color: var(--ink-2); line-height: 1.75; }
.corp-side { background: var(--bg-alt); border-radius: var(--radius); padding: 20px; font-size: 14px; border: 1px solid var(--line); }
.corp-side h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.corp-side .kv { display: flex; flex-direction: column; margin-bottom: 12px; }
.corp-side .kv span { color: var(--muted); font-size: 12.5px; margin-bottom: 2px; }
.corp-side .kv b { font-weight: 600; color: var(--ink); }
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C7D3E3; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #9FB0C6; background-clip: content-box; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .card-grid.grid-5 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .card-grid.grid-5 .tc-photo { aspect-ratio: 2 / 3; }
  .card-grid.grid-5 .tc-photo.ph { font-size: 64px; }
  .card-grid.grid-5 .tc-body { padding: 14px 16px 16px; }
  .card-grid.grid-5 .tc-id b { font-size: 16.5px; }
  .card-grid.grid-5 .tc-id span { font-size: 13px; }
  .card-grid.grid-5 .tc-field { font-size: 13.5px; }
  .card-grid.grid-5 .tc-courses { font-size: 13.5px; }
  .card-grid.grid-5 .tc-fee { font-size: 13px; }
  .card-grid.grid-5 .tc-more { font-size: 13px; }
  .card-grid.grid-5 .ai-badge { font-size: 11px; padding: 2px 8px; }
  .hero-title { font-size: 36px; }
  .member-side { width: 208px; }
  .corp { grid-template-columns: 1fr; }
  .read-grid { grid-template-columns: 1fr; gap: 0; }
  .read-side { margin-top: 26px; }
  /* 顶栏导航：9 项 + Logo + 登录按钮在 1024 以下必然排不下，统一改走抽屉菜单 */
  .nav-toggle { display: inline-flex; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 8px 16px; box-shadow: var(--shadow-sm);
    animation: slideDown .25s var(--ease-out);
    /* 菜单项多于屏幕高度时（横屏/小屏手机），抽屉自身可滚动，否则底部条目点不到。
       110px 是按顶栏两行（讲师登录态有三个按钮）时的高度留的安全值。 */
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; }
  .main-nav a { padding: 10px 14px; font-size: 15px; }
  .brand-name { font-size: 16px; }
}
@media (max-width: 760px) {
  .field-row { flex-direction: column; }
  .hero { padding: 52px 0 56px; }
  .hero-title { font-size: 28px; letter-spacing: .3px; }
  .hero-sub { font-size: 14px; }
  .member-wrap { flex-direction: column; }
  .member-side { width: 100%; position: static; }
  .member-nav { flex-direction: row; flex-wrap: wrap; }
  .card-grid.grid-3, .card-grid.grid-5 { grid-template-columns: repeat(2, 1fr); }
  .tpl { flex-direction: column; text-align: center; }
  .tpl h1 { justify-content: center; }
  .big-avatar { width: 110px; }
  .section { padding: 36px 0; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .role-picker { flex-direction: column; }
  .compare-bar { padding: 8px 12px; }
  .value-row { grid-template-columns: 1fr; }
  .wrap { padding: 0 18px; }
}
@media (max-width: 480px) {
  .card-grid.grid-3, .card-grid.grid-5 { grid-template-columns: 1fr; }
  .btn.big { padding: 0 20px; font-size: 14px; height: 40px; }
  .hero-ai { border-radius: 16px; }
  .hero-title { font-size: 24px; }
  .page-title { font-size: 24px; margin: 28px 0 4px; }
  .article-body { font-size: 15px; }
  .article-body th, .article-body td { padding: 6px 7px; font-size: 13px; }
  .article-body ul, .article-body ol { padding-left: 20px; }
}

/* ===== 讲师入库证书（首页滚动带 + 单张证书卡） ===== */
.zcert-strip {
  overflow: hidden; margin-bottom: 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.zcert-track { display: flex; width: 100%; animation: zcert-scroll var(--dur, 26s) linear infinite; }
.zcert-track.rev { animation-direction: reverse; }
.zcert-strip:hover .zcert-track { animation-play-state: paused; }
.zcert-group { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; flex: 0 0 100%; }
.zcert-mini {
  display: block; background: #fff; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(16, 40, 90, .06); transition: box-shadow .2s, transform .2s;
}
.zcert-mini:hover { box-shadow: 0 10px 24px rgba(16, 40, 90, .16); transform: translateY(-2px); }
.zcert-mini svg { display: block; width: 100%; height: auto; }
@keyframes zcert-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.zcert-card .zcert-svg { display: block; width: 100%; max-width: 780px; height: auto; margin: 0 auto; border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 4px 16px rgba(16, 40, 90, .08); }
.zcert-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
/* 讲师主页名片右上角的缩略证书（同一份 SVG，只是容器变窄） */
.tpl { flex-wrap: wrap; }
.tpl .tpl-info { flex: 1 1 auto; min-width: 0; }
.zcert-side { flex: 0 0 300px; width: 300px; margin-left: auto; align-self: flex-start; }
.zcert-side-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.zcert-zoom { border: 1px solid var(--line-2); background: #fff; color: var(--brand); font-size: 12px; line-height: 1; padding: 5px 9px; border-radius: 999px; cursor: pointer; }
.zcert-side .zcert-svg { width: 100%; max-width: none; cursor: zoom-in; }
.zcert-side .zcert-acts { margin-top: 8px; gap: 6px; }
.zcert-side .zcert-acts .btn { flex: 1 1 auto; padding: 7px 10px; font-size: 12.5px; }
.zcert-side .zcert-tip { display: none; }
/* 缩略证书放大层：复用名片上那张已画好二维码的 SVG 的克隆 */
.zcert-lb { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.zcert-lb-box { position: relative; flex: 0 0 auto; width: 100%; max-width: 880px; margin: auto; background: #fff; border-radius: var(--radius-sm); padding: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.zcert-lb .zcert-svg { max-width: none; }
.zcert-lb-x { top: -10px; right: -10px; width: 30px; height: 30px; margin: 0; border-radius: 50%; background: #fff; color: #6B7C93; box-shadow: 0 2px 10px rgba(0, 0, 0, .28); display: flex; align-items: center; justify-content: center; font-size: 19px; z-index: 1; }
.zcert-lb-x:hover { color: var(--ink); }
body.zcert-lb-on { overflow: hidden; }
@media (max-width: 900px) {
  .zcert-side { flex: 1 1 100%; width: auto; max-width: 340px; margin: 6px auto 0; }
}
@media (max-width: 760px) {
  .zcert-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; mask-image: none; -webkit-mask-image: none; }
  .zcert-track { animation: none; width: auto; }
  .zcert-group { display: flex; flex: 0 0 auto; }
  .zcert-mini { flex: 0 0 236px; width: 236px; }
  .zcert-group + .zcert-group { display: none; }
  .zcert-strip { overscroll-behavior-x: contain; }
}

/* ============================================================
   移动端适配 —— 触屏设备（iPhone / Android / 鸿蒙 / 微信内置浏览器）
   为什么用 pointer:coarse 而不是宽度断点：iPad 竖屏 768px 宽、鸿蒙折叠屏
   展开后也超过 760px，但仍然是手指操作；只看宽度会漏掉这些设备，
   而带鼠标的桌面浏览器不会被这些规则影响，版式保持原样。
   本块放在文件末尾是因为前面的 .hero-search .btn / .fs-row .btn 等是双类
   选择器，单写 .btn 覆盖不动，必须用同样的选择器并靠后声明才生效。
   ============================================================ */
@media (pointer: coarse) {
  /* 1) 输入框：iOS/微信聚焦时字号小于 16px 会把整页放大，用户要手动缩回去 */
  .filter-bar input, .filter-bar select,
  .fs-row .fs-kw, .fs-row select, .fs-grid select,
  .hero-search input, .hero-search select,
  .chat-form input, .input,
  .form-stack input, .form-stack select, .form-stack textarea,
  .reg-form input, .reg-form select, .reg-form textarea { font-size: 16px; }
  /* 2) 输入框高度：控件本体也要够大才好点 */
  .filter-bar input, .filter-bar select,
  .fs-row .fs-kw, .fs-row select,
  .form-stack input, .form-stack select,
  .reg-form input, .reg-form select,
  .input { height: 46px; }
  .fs-grid select { height: 44px; }
  /* 3) 按钮：允许折行，高度靠内容撑开但不低于 44px */
  .btn { height: auto; min-height: 44px; padding: 10px 18px; white-space: normal; line-height: 1.3; }
  .btn.big { height: auto; min-height: 48px; padding: 12px 24px; }
  .header-actions .btn { padding: 8px 12px; }
  .hero-search .btn, .chat-form .btn { height: auto; min-height: 46px; }
  .fs-row .btn { height: auto; min-height: 46px; padding: 10px 18px; white-space: normal; }
  .ai-bio-head .btn { height: auto; min-height: 40px; padding: 8px 14px; }
  .zcert-side .zcert-acts .btn { padding: 9px 10px; }
  /* 4) 小胶囊和文字链接：只加内边距，视觉外观不变 */
  .chip { min-height: 40px; padding: 7px 14px; }
  .fav-btn { padding: 9px 14px; }
  .cmp-chip, .cmp-clear { padding: 9px 14px; }
  .cmp-chip { font-size: 13px; }
  .zcert-zoom, .demo-trigger { padding: 8px 14px; }
  .mode-tab { padding: 13px 14px; }
  .link, .links a { padding: 8px 2px; }
  .link { display: inline-flex; align-items: center; min-height: 40px; }
  .foot-nav a, .foot-beian a { padding: 10px 2px; }
  .member-nav a { padding: 13px 14px; }
  .rank-row { padding: 14px; }
  .fs-more summary { padding: 10px 0; }
  .fs-active .chip { min-height: 36px; }
  .brand { min-height: 44px; }
  .cmp-chip { min-height: 40px; min-width: 40px; }
  .zcert-zoom { min-height: 36px; display: inline-flex; align-items: center; }
  /* 卡片末尾单独成行的「了解 …→」引导链接：不是正文里的连写词，按按钮尺寸给足命中区 */
  .escrow-note > a { display: inline-flex; align-items: center; min-height: 40px; }
  /* 列表标题链接：内联元素加行内块 + 负外边距，命中区变高但排版位置一点不动 */
  .kb-t, .card h3 > a { display: inline-block; padding: 8px 0; margin: -8px 0; }
  /* 正文句子里的小链接同理：用等量负外边距换出命中区，视觉位置一个字都不挪。
     只挑 <p> 里的裸链接，胶囊/按钮/标签页这些自带尺寸的排除在外，导航不在 <p> 里所以不受影响。 */
  .wrap p a:not(.btn):not(.link):not(.chip):not(.mode-tab):not(.demo-trigger),
  .hero-ai-link a:not(.btn), .msg a:not(.btn), .cs-value a:not(.btn) {
    display: inline-block; padding: 10px 3px; margin: -10px -3px;
  }
  /* 5) 说明小字：12px 在手机上看清费劲，统一升到 13px（桌面不变） */
  .page-sub.sm, .dim.sm, .rank-stat { font-size: 13px; }
}

/* 手指点击后 :hover 会一直粘住（要再点别处才取消），卡片会停在抬起状态看着像错位 */
@media (hover: none) {
  .value:hover { transform: none; box-shadow: var(--shadow); border-color: var(--line); }
  .value:hover::before { opacity: 0; }
  .zcert-mini:hover { transform: none; box-shadow: 0 1px 3px rgba(16, 40, 90, .06); }
  .demo-trigger:hover { transform: none; }
  .role-btn:hover { box-shadow: none; }
}

/* 窄屏（手机竖屏）：底部浮条和弹层让开 iPhone 横条/手势区 */
@media (max-width: 760px) {
  .modal-mask { padding: 14px; }
  .cmp-toast {
    left: 12px; right: 12px; transform: none;
    bottom: calc(12px + env(safe-area-inset-bottom));
    min-width: 0; width: auto; max-width: none;
  }
  .cmp-toast a, .cmp-toast .btn.solid { align-self: flex-start; }
  @keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  body.has-cmp { padding-bottom: calc(190px + env(safe-area-inset-bottom)); }
  .member-body h2 { font-size: 17px; }
}

/* 手机竖屏：讲师名片原来是「整幅 2:3 照片 + 下面文字」，一张卡比屏幕还高，
   一屏只能看到一位讲师，翻 7 个人要划 7 屏。这里改成照片靠左、信息靠右的横排列表。 */
@media (max-width: 560px) {
  .card-grid { gap: 12px; }
  .card-grid.grid-3, .card-grid.grid-5 { grid-template-columns: 1fr; }
  .teacher-card { display: flex; align-items: stretch; }
  .tc-photo, .card-grid.grid-5 .tc-photo {
    width: 104px; flex: 0 0 104px; aspect-ratio: auto; min-height: 148px;
  }
  .tc-photo.ph, .card-grid.grid-5 .tc-photo.ph { font-size: 40px; letter-spacing: -1px; }
  .tc-photo.logo img { padding: 12px; }
  .tc-photo .aff-badge { left: 6px; bottom: 6px; height: 22px; padding: 0 9px; }
  .tc-body, .card-grid.grid-5 .tc-body { flex: 1 1 auto; min-width: 0; padding: 12px 14px; }
  .card-grid.grid-5 .tc-id b, .tc-id b { font-size: 16px; }
  .card-grid.grid-5 .tc-courses { white-space: normal; }
  /* 顶部模式页签：四个挤一行会把「找讲师全职上班」拆成三行，改成两列一行两个 */
  .mode-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .mode-tab { padding: 12px 6px; }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}