/* ============================================================
   设计系统 · Design Tokens
   ============================================================ */
:root{
  --ink:#0B1220;
  --ink-2:#1C2637;
  --body:#4B5563;
  --muted:#8B95A7;
  --line:#E7EAEF;
  --line-soft:#F0F2F6;
  --surface:#FFFFFF;
  --bg:#F7F8FA;
  --accent:#1D4ED8;
  --accent-deep:#153FB0;
  --accent-soft:#EEF3FF;
  --radius:16px;
  --radius-sm:10px;
  --radius-xs:6px;
  --maxw:1180px;
  --nav-h:66px;
  --shadow-sm:0 1px 2px rgba(11,18,32,.04);
  --shadow-md:0 8px 28px -12px rgba(11,18,32,.14);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  margin:0;background:var(--surface);color:var(--body);
  font-family:var(--sans);font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"tnum" 1,"cv11" 1;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:600;line-height:1.25;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:#D8E2FF;color:var(--ink)}

/* 滚动条 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#D5DAE3;border-radius:20px;border:3px solid #fff}
::-webkit-scrollbar-track{background:#fff}

/* ============================================================
   布局工具
   ============================================================ */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.section{padding:96px 0;position:relative}
.section--tint{background:var(--bg)}
.section--line{border-top:1px solid var(--line-soft)}

/* 章节标题模块 */
.sec-head{margin-bottom:52px;max-width:760px}
.sec-head__top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.sec-num{
  font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--accent);
  padding:3px 9px;background:var(--accent-soft);border-radius:var(--radius-xs);
}
.sec-kicker{font-size:12px;font-weight:500;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.sec-title{font-size:clamp(24px,3.1vw,34px);letter-spacing:-.02em}
.sec-desc{margin-top:16px;font-size:15.5px;color:var(--body);max-width:660px}
.sec-rule{height:1px;background:var(--line);flex:1;min-width:40px}

/* ============================================================
   顶部导航
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s;
}
.nav.is-stuck{border-bottom-color:var(--line);box-shadow:0 1px 20px -14px rgba(11,18,32,.28)}
.nav__inner{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px}
.brand__mark{
  width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:16px;font-weight:600;letter-spacing:0;
  box-shadow:0 4px 12px -4px rgba(29,78,216,.5);
}
.brand__txt{line-height:1.15}
.brand__name{display:block;font-size:15.5px;font-weight:600;color:var(--ink);letter-spacing:.02em}
.brand__sub{display:block;font-size:10.5px;color:var(--muted);letter-spacing:.08em}
.nav__links{display:flex;align-items:center;gap:4px}
.nav__link{
  position:relative;padding:8px 13px;border-radius:8px;font-size:14px;color:var(--ink-2);
  transition:color .2s,background .2s;
}
.nav__link:hover{color:var(--accent);background:var(--accent-soft)}
.nav__link.is-active{color:var(--accent);font-weight:500}
.nav__link.is-active::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;background:var(--accent);
}
.nav__cta{
  padding:9px 18px;border-radius:9px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:500;
  transition:transform .2s,background .2s;
}
.nav__cta:hover{background:var(--accent);transform:translateY(-1px)}
.nav__burger{display:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--line);place-items:center}
.nav__burger span{display:block;width:16px;height:1.6px;background:var(--ink);border-radius:2px;position:relative}
.nav__burger span::before,.nav__burger span::after{content:"";position:absolute;left:0;width:16px;height:1.6px;background:var(--ink);border-radius:2px}
.nav__burger span::before{top:-5px}.nav__burger span::after{top:5px}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:calc(var(--nav-h) + 66px) 0 0;position:relative;overflow:hidden}
.hero__bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(680px 380px at 78% 8%,rgba(29,78,216,.07),transparent 70%),
    linear-gradient(180deg,#FBFCFE 0%,#FFFFFF 62%);
}
.hero__grid-lines{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 78%);
}
.hero__inner{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:end}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:500;
  letter-spacing:.16em;color:var(--accent);text-transform:uppercase;
  padding:6px 13px;border:1px solid #DCE5FA;background:#fff;border-radius:100px;
}
.hero__eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--accent);display:block;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.hero__name{font-size:clamp(46px,7.2vw,80px);font-weight:600;letter-spacing:-.035em;line-height:1.02;margin:26px 0 0}
.hero__name em{font-style:normal;color:var(--accent)}
.hero__role{font-size:clamp(17px,2vw,21px);color:var(--ink-2);font-weight:500;margin-top:14px;letter-spacing:.01em}
.hero__tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.tag{
  font-size:13px;color:var(--ink-2);padding:6px 13px;background:#fff;
  border:1px solid var(--line);border-radius:100px;
}
/* Hero 资质标签：加大字号与内距，提升视觉权重 */
.hero__tags .tag{
  font-size:14px;font-weight:600;line-height:1.32;letter-spacing:.01em;color:var(--ink);
  padding:9px 17px;background:#fff;border-color:#D6DDEA;
  box-shadow:0 2px 10px -6px rgba(11,18,32,.22);
}
/* 首个（核心卖点：三语授课）用主色实底强调 */
.hero__tags .tag:first-child{
  color:#fff;background:var(--accent);border-color:var(--accent);
  box-shadow:0 10px 22px -12px rgba(29,78,216,.7);
}
.hero__lead{margin-top:26px;font-size:15.5px;line-height:1.85;color:var(--body);max-width:520px}
.hero__lead strong{color:var(--ink);font-weight:600}
/* Hero 特质关键词：浅蓝底胶囊，权重低于上方资质标签、明显高于正文 */
.hero__lead .lead-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 13px}
.hero__lead .lead-chip{
  font-size:14px;font-weight:600;line-height:1.3;letter-spacing:.01em;
  color:var(--accent-deep);background:var(--accent-soft);
  padding:6px 12px;border:1px solid #D8E2FB;border-radius:100px;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:10px;
  font-size:14.5px;font-weight:500;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
}
.btn--primary{background:var(--accent);color:#fff;box-shadow:0 8px 22px -12px rgba(29,78,216,.7)}
.btn--primary:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(29,78,216,.8)}
.btn--ghost{border:1px solid var(--line);background:#fff;color:var(--ink)}
.btn--ghost:hover{border-color:#C9D3E6;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn__arrow{transition:transform .25s}
.btn:hover .btn__arrow{transform:translateX(3px)}

.hero__portrait{position:relative;display:flex;justify-content:center;align-items:flex-end}
.hero__portrait-frame{
  position:relative;width:100%;max-width:430px;aspect-ratio:3/3.6;
  display:flex;align-items:stretch;justify-content:center;overflow:hidden;
  border-radius:20px 20px 0 0;
  background:linear-gradient(168deg,#EEF3FD 0%,#F8FAFF 46%,#FFFFFF 100%);
  border:1px solid var(--line);border-bottom:0;
}
.hero__portrait-frame::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(90deg,rgba(255,255,255,.9) 1px,transparent 1px);
  background-size:44px 100%;opacity:.55;pointer-events:none;
}
.hero__portrait img{
  position:relative;z-index:2;width:100%;
  /* 高度靠父级的 flex `align-items:stretch` 撑满，**不要写百分比高度/max-height**。
     ⚠️ 这里原来写的是 `height:auto;max-height:105%`，是两处裁切的根源：
       · Chromium 能解析 105%（框高 396 → 415.8px），但盒子比框高 19px，
         底部对齐后顶部被 overflow 裁掉 19px（≈原图高 4.6%），桌面端一直如此；
       · iOS Safari 对 aspect-ratio 派生高度的百分比解析不可靠 → max-height 失效，
         盒子退回原始比例 328×492，顶部被裁掉 96px（≈19.5%），
         切口正好落在眼镜上沿，整个头顶消失 —— 手机上看到的就是这个。
     现在盒子严格等于框，再用 cover + 顶部锚定：
       · 横向恰好铺满（原图 0.666 比框 0.833 更瘦，cover 只裁纵向，左右不会切到人）；
       · 纵向从**顶部对齐**，只裁底部（原图下缘约 20%，即大腿以下），
         头顶上方原图自带的 8.5% 留白完整保留 —— 所以脸部一定完整可见。
     若哪天想改成"全身照完整显示、不裁任何像素"，把 cover 换成 contain 即可，
     代价是人物会明显变小、两侧留白变宽。 */
  object-fit:cover;object-position:50% 0%;
  filter:drop-shadow(0 24px 34px rgba(11,18,32,.14));
}
.hero__badge{
  position:absolute;z-index:3;left:-14px;bottom:74px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:12px 16px;box-shadow:var(--shadow-md);
}
.hero__badge b{display:block;font-size:20px;color:var(--ink);letter-spacing:-.02em;line-height:1.2}
.hero__badge span{font-size:11.5px;color:var(--muted);letter-spacing:.03em}

/* 数据条 */
.stats{border-top:1px solid var(--line);margin-top:64px;background:#fff;position:relative}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:30px 24px;border-right:1px solid var(--line-soft);text-align:left}
.stat:last-child{border-right:0}
.stat__num{font-size:clamp(26px,3.4vw,38px);font-weight:600;color:var(--ink);letter-spacing:-.03em;line-height:1.1}
.stat__num i{font-style:normal;font-size:.58em;color:var(--accent);margin-left:2px;font-weight:600}
.stat__label{margin-top:7px;font-size:13px;color:var(--muted);letter-spacing:.01em}

/* ============================================================
   卡片 / 网格
   ============================================================ */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;transition:border-color .25s,box-shadow .25s,transform .25s;
}
.card:hover{border-color:#D2DBEA;box-shadow:var(--shadow-md);transform:translateY(-3px)}
.card__idx{font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.12em}
.card__title{font-size:17.5px;margin-top:12px;font-weight:600}
.card__text{margin-top:10px;font-size:14.5px;line-height:1.8;color:var(--body)}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}

/* ============================================================
   01 热点课程
   ============================================================ */
.hot{display:grid;gap:16px}
.hotcard{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.hotcard:hover{border-color:#D2DBEA;box-shadow:var(--shadow-md);transform:translateY(-3px)}
.hotcard__fig{margin:0;background:#EFF2F7;border-bottom:1px solid var(--line-soft)}
.hotcard__fig img{width:100%;cursor:zoom-in}
/* 主推课：整栏横幅，左边全景图、右边文案 */
.hotcard--feature{display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch}
.hotcard--feature .hotcard__fig{
  border-bottom:0;border-right:1px solid var(--line-soft);background:#fff;
  display:grid;place-items:center;padding:20px;
}
.hotcard--feature .hotcard__fig img{border-radius:var(--radius-xs)}
.hotcard--feature .hotcard__t{font-size:19.5px}
.hotcard--feature .hotcard__body{padding:30px 32px}
/* 无配图的课：整栏横排，左侧文案 + 右侧标记位（避免半宽卡孤零零挂在下面） */
.hotcard--wide{display:grid;grid-template-columns:1.32fr .68fr;align-items:stretch}
.hotcard--wide .hotcard__body{padding:34px 36px}
.hotcard--wide .hotcard__d{flex:0 1 auto;max-width:64ch}
.hotcard__mark{
  display:flex;flex-direction:column;justify-content:center;gap:12px;
  padding:34px 36px;border-left:1px solid var(--line-soft);
  background:linear-gradient(158deg,#F8FAFF 0%,#EFF3FB 100%);
}
.hotcard__mark b{font-size:46px;line-height:1;font-weight:700;letter-spacing:-.02em;color:#C3D1EC}
.hotcard__mark span{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.hotcard__mark p{font-size:13.5px;line-height:1.8;color:var(--body)}
.hotcard__body{display:flex;flex-direction:column;flex:1;padding:26px 28px 28px}
.hotcard__top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:15px}
.hotcard__pill{
  font-size:11px;font-weight:600;letter-spacing:.18em;color:#fff;background:var(--ink);
  padding:5px 11px;border-radius:var(--radius-xs);line-height:1.25;
}
.hotcard__no{font-size:11.5px;font-weight:600;letter-spacing:.16em;color:var(--muted)}
.hotcard__t{font-size:17.5px;font-weight:600;line-height:1.5}
.hotcard__sub{margin-top:8px;font-size:13.5px;line-height:1.7;color:var(--muted)}
.hotcard__d{margin-top:12px;font-size:14px;line-height:1.85;color:var(--body);flex:1}
.hotcard__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.hot-chip{
  font-size:12px;color:var(--ink-2);background:#F4F6FA;border:1px solid var(--line);
  padding:5px 11px;border-radius:100px;letter-spacing:.01em;line-height:1.5;
}
.hot__note{margin-top:22px;display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:13.5px;color:var(--muted)}
.hot__note a{color:var(--accent);font-weight:500;transition:color .2s}
.hot__note a:hover{color:var(--accent-deep)}
/* 卡片内跳转课程详情 */
.hotcard__link{transition:color .2s}
.hotcard:hover .hotcard__link,.hotcard__link:hover{color:var(--accent)}
.hotcard__foot{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft);
}
.hotcard__cta{
  display:inline-flex;align-items:center;gap:8px;line-height:1.2;
  font-size:13.5px;font-weight:600;color:#fff;background:var(--accent);
  padding:10px 18px;border-radius:9px;
  box-shadow:0 8px 20px -12px rgba(29,78,216,.75);
  transition:background .2s,transform .2s,box-shadow .2s;
}
.hotcard__cta:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(29,78,216,.85)}
.hotcard__cta .btn__arrow{transition:transform .25s}
.hotcard__cta:hover .btn__arrow{transform:translateX(4px)}
.hotcard__note{font-size:12.5px;color:var(--muted);letter-spacing:.01em}

/* ============================================================
   02 讲师定位
   ============================================================ */
.position{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.position__quote{
  border-left:2px solid var(--accent);padding-left:22px;
  font-size:clamp(17px,2.1vw,20px);color:var(--ink);line-height:1.75;font-weight:500;letter-spacing:-.01em;
}
.position__quote span{display:block;margin-top:12px;font-size:14px;font-weight:400;color:var(--muted)}
.position__body p+p{margin-top:16px}
.position__body{font-size:15.5px;line-height:1.9}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pillar{background:#fff;padding:22px 20px;transition:background .25s}
.pillar:hover{background:#FAFBFF}
.pillar__k{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
.pillar__k i{width:5px;height:5px;border-radius:50%;background:var(--accent);display:block}
.pillar__v{margin-top:7px;font-size:13px;color:var(--muted);line-height:1.7}

/* ============================================================
   03 履历 时间线
   ============================================================ */
.timeline{position:relative;padding-left:0}
.tl-item{
  display:grid;grid-template-columns:200px 1fr;gap:32px;padding:26px 0;
  border-top:1px solid var(--line-soft);align-items:start;
}
.tl-item:last-child{border-bottom:1px solid var(--line-soft)}
.tl-item__period{font-size:13.5px;color:var(--muted);letter-spacing:.02em;padding-top:2px}
.tl-item__co{font-size:13px;color:var(--accent);font-weight:500;letter-spacing:.02em}
.tl-item__role{font-size:17px;color:var(--ink);font-weight:600;margin-top:6px}
.tl-item__desc{margin-top:8px;font-size:14.5px;line-height:1.85}
.tl-item:hover .tl-item__role{color:var(--accent)}
.tl-item__role,.tl-item__co{transition:color .2s}

.edu{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px}
.edu__item{display:flex;gap:16px;align-items:flex-start;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.edu__icon{
  flex:0 0 40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-size:15px;font-weight:600;
}
.edu__t{font-size:15.5px;font-weight:600;color:var(--ink)}
.edu__d{margin-top:5px;font-size:13.5px;color:var(--muted);line-height:1.7}

/* ============================================================
   04 实战项目
   ============================================================ */
.pcase{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:32px;transition:border-color .25s,box-shadow .25s,transform .25s;
}
.pcase:hover{border-color:#D2DBEA;box-shadow:var(--shadow-md);transform:translateY(-3px)}
.pcase__top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.pcase__no{font-size:11.5px;font-weight:600;letter-spacing:.16em;color:var(--muted)}
.pcase__chip{font-size:11.5px;color:var(--accent);background:var(--accent-soft);padding:4px 10px;border-radius:var(--radius-xs);letter-spacing:.02em}
.pcase__title{font-size:18px;font-weight:600;line-height:1.45}
.pcase__desc{margin-top:12px;font-size:14.5px;line-height:1.85;flex:1}
.pcase__metrics{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line-soft);
}
.pcase__metric b{display:block;font-size:19px;color:var(--ink);letter-spacing:-.02em;line-height:1.2}
.pcase__metric span{display:block;margin-top:4px;font-size:12px;color:var(--muted);line-height:1.5}

/* ============================================================
   06 课程体系
   ============================================================ */
.course{display:grid;gap:20px}
.tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.tier{display:flex;gap:18px;padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:border-color .25s,box-shadow .25s}
.tier:hover{border-color:#D2DBEA;box-shadow:var(--shadow-md)}
.tier__lv{
  flex:0 0 62px;height:62px;border-radius:12px;background:var(--ink);color:#fff;
  display:grid;place-items:center;align-content:center;gap:2px;line-height:1;
}
.tier__lv b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.tier__lv span{font-size:9.5px;letter-spacing:.14em;opacity:.65}
.tier:nth-child(2) .tier__lv{background:#24406E}
.tier:nth-child(3) .tier__lv{background:var(--accent)}
.tier__t{font-size:16px;font-weight:600;color:var(--ink)}
.tier__m{margin-top:6px;font-size:13px;color:var(--accent);letter-spacing:.01em}
.tier__d{margin-top:9px;font-size:14px;line-height:1.8;color:var(--body)}

.specs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.specs__item{background:#fff;padding:20px 22px}
.specs__item b{display:block;font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.06em;margin-bottom:7px}
.specs__item span{font-size:13.5px;color:var(--body);line-height:1.7}

.course__map{
  margin:0;border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:20px;
}
.course__map img{width:100%;border-radius:10px;cursor:zoom-in}
.course__map figcaption{margin-top:16px;font-size:12.5px;color:var(--muted);text-align:center;letter-spacing:.02em}

/* 人才层级 AI 学习地图 */
.tmap{
  border:1px solid var(--line);border-radius:var(--radius);background:#FBFCFF;
  padding:32px 30px 34px;
}
.tmap__head{max-width:840px;margin-bottom:26px}
.tmap__badge{
  display:inline-flex;align-items:center;gap:9px;padding:5px 12px;border-radius:100px;
  background:var(--accent-soft);color:var(--accent);
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.tmap__title{margin-top:16px;font-size:20px;letter-spacing:-.018em}
.tmap__note{margin-top:12px;font-size:14px;line-height:1.85;color:var(--body)}
.tmap__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
.tmap__card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:22px 20px;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.tmap__card:hover{border-color:#D2DBEA;box-shadow:var(--shadow-md);transform:translateY(-3px)}
.tmap__top{display:flex;align-items:center;gap:12px}
.tmap__lv{
  flex:0 0 44px;height:44px;border-radius:12px;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:15px;font-weight:600;letter-spacing:.01em;
}
.tmap__card:nth-child(2) .tmap__lv{background:#24406E}
.tmap__card:nth-child(3) .tmap__lv{background:#1B54C8}
.tmap__card:nth-child(4) .tmap__lv{background:var(--accent)}
.tmap__name b{display:block;font-size:15px;font-weight:600;color:var(--ink);line-height:1.35}
.tmap__name em{display:block;font-style:normal;margin-top:4px;font-size:12px;color:var(--muted);letter-spacing:.02em}
.tmap__kw{
  margin-top:18px;padding:9px 12px;border-radius:var(--radius-xs);background:var(--accent-soft);
  font-size:13.5px;font-weight:600;color:var(--accent);text-align:center;letter-spacing:.01em;
}
.tmap__rows{margin-top:20px;display:grid;gap:15px}
.tmap__rows>div>span{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.tmap__rows>div>b{display:block;margin-top:6px;font-size:13.5px;font-weight:500;color:var(--ink-2);line-height:1.7}
.tmap__links{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.tmap__links a{
  display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:100px;
  border:1px solid #DCE5FA;background:var(--accent-soft);color:var(--accent);
  font-size:12.5px;font-weight:500;transition:background .2s,border-color .2s,color .2s;
}
.tmap__links a:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.tmap__foot{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft);
  display:flex;align-items:baseline;gap:10px;
}
.tmap__foot span{flex:0 0 auto;font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.tmap__foot b{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.005em}

.lv-scope__v a{color:var(--accent);border-bottom:1px solid rgba(29,78,216,.3);transition:border-color .2s}
.lv-scope__v a:hover{border-bottom-color:var(--accent)}

/* ============================================================
   08 认证
   ============================================================ */
.honor{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.honor__list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.honor__row{background:#fff;padding:18px 22px;display:flex;align-items:flex-start;gap:14px;transition:background .2s}
.honor__row:hover{background:#FAFBFF}
.honor__row i{
  flex:0 0 30px;height:30px;border-radius:8px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-size:13px;font-weight:600;font-style:normal;margin-top:2px;
}
.honor__row b{font-size:14.5px;color:var(--ink);font-weight:500}
.honor__row em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.6}
.certs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.certs figure{margin:0;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:#fff;transition:box-shadow .25s,transform .25s}
.certs figure:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
/* 证书卡统一用竖版卡框：cert-1/cert-2 是竖图（3:4），cert-3 是横图（4:3）——
   卡框取竖版让两张竖图满铺，横图居中留浅灰上下边，三张卡高度一致、行内不参差 */
.certs img{width:100%;aspect-ratio:3/4;object-fit:contain;background:#F7F8FA;cursor:zoom-in}
.certs figcaption{padding:11px 13px;font-size:12px;color:var(--muted);border-top:1px solid var(--line-soft);line-height:1.55}

.events{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.events figure{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;transition:box-shadow .25s,transform .25s}
.events figure:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.events img{width:100%;aspect-ratio:3/2;object-fit:cover;cursor:zoom-in}
.events figcaption{padding:14px 18px;font-size:13px;color:var(--body);border-top:1px solid var(--line-soft);display:flex;align-items:center;gap:9px}
.events figcaption::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:0 0 5px}

/* ============================================================
   09 客户
   ============================================================ */
.clients{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.client-row{display:grid;grid-template-columns:196px 1fr;gap:28px;padding:22px 26px;border-top:1px solid var(--line-soft);transition:background .2s}
.client-row:first-child{border-top:0}
.client-row:hover{background:#FAFBFF}
.client-row__k{font-size:14px;font-weight:600;color:var(--ink);display:flex;gap:9px;align-items:flex-start;line-height:1.6}
.client-row__k i{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:0 0 5px;margin-top:9px}
.client-row__v{display:flex;flex-wrap:wrap;gap:7px 8px}
.chip{font-size:13px;color:var(--ink-2);padding:5px 12px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-xs);transition:border-color .2s,color .2s,background .2s}
.client-row:hover .chip{border-color:#DCE5FA;background:#fff}
.chip:hover{border-color:var(--accent);color:var(--accent)}

/* ============================================================
   10 照片墙
   ============================================================ */
.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.wall figure{
  margin:0;position:relative;overflow:hidden;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:#fff;cursor:zoom-in;
}
.wall img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.wall figure:hover img{transform:scale(1.055)}
.wall figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:20px 13px 10px;
  font-size:12px;color:#fff;letter-spacing:.02em;
  background:linear-gradient(0deg,rgba(8,14,26,.72),rgba(8,14,26,0));
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;
}
.wall figure:hover figcaption{opacity:1;transform:none}

/* 国际经历 */
.intl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.intl figure{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;transition:box-shadow .25s,transform .25s}
.intl figure:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.intl img{width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in}
.intl figcaption{padding:14px 18px;font-size:13px;color:var(--body);border-top:1px solid var(--line-soft)}

/* ============================================================
   12 讲师海报
   ============================================================ */
/* 海报栏宽随视口收缩（356→220），避免 900–1100 这段区间海报栏占比过大、文字栏被挤瘦 */
.poster{display:grid;grid-template-columns:clamp(220px,26vw,356px) 1fr;gap:clamp(26px,3.2vw,44px);align-items:start}
.poster__fig{
  margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-md);
}
.poster__fig img{width:100%;cursor:zoom-in}
.poster__h{font-size:19px}
.poster__lede{margin-top:14px;font-size:15.5px;line-height:1.9}
.poster__lede strong{color:var(--ink);font-weight:600}
.poster__specs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;margin-top:24px;
}
.poster__spec{background:#fff;padding:15px 18px}
.poster__spec-k{font-size:11px;font-weight:600;letter-spacing:.13em;color:var(--muted);text-transform:uppercase}
.poster__spec-v{margin-top:7px;font-size:14px;font-weight:500;color:var(--ink);line-height:1.6}
.poster__uses{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.poster__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px}
.poster__hint{font-size:13px;color:var(--muted);line-height:1.6}

/* ============================================================
   CTA / 联系
   ============================================================ */
.cta{position:relative;overflow:hidden;background:var(--ink);color:#C7D0DE}
.cta .wrap{position:relative;z-index:2}
.cta__glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 320px at 82% 0%,rgba(29,78,216,.42),transparent 68%);
}
.cta__grid{
  position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent);
}
.cta__eyebrow{font-size:12px;letter-spacing:.18em;color:#8FB0FF;text-transform:uppercase}
.cta__title{color:#fff;font-size:clamp(26px,3.6vw,40px);letter-spacing:-.025em;margin-top:18px;line-height:1.28}
.cta__desc{margin-top:18px;max-width:620px;font-size:15.5px;line-height:1.85;color:#A9B5C7}
.contact{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}
.contact__item{
  border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:22px;
  background:rgba(255,255,255,.03);transition:background .25s,border-color .25s,transform .25s;
}
.contact__item:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.24);transform:translateY(-3px)}
.contact__k{font-size:12px;letter-spacing:.1em;color:#8FA0BA;text-transform:uppercase}
.contact__v{margin-top:10px;font-size:16px;color:#fff;font-weight:500;letter-spacing:.01em;word-break:break-all}
.contact__v.is-empty{color:#8FA0BA;font-weight:400;font-size:14.5px}
.contact__item.is-empty{border-style:dashed}
.contact__note{margin-top:6px;font-size:12px;color:#7C8DA8}
.cta__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:#EDF1F9;transform:translateY(-2px)}
.btn--outline{border:1px solid rgba(255,255,255,.28);color:#fff}
.btn--outline:hover{border-color:rgba(255,255,255,.6);transform:translateY(-2px)}

/* ============================================================
   Footer
   ============================================================ */
.footer{background:var(--ink);border-top:1px solid rgba(255,255,255,.1);padding:32px 0;color:#7C8DA8}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px}
.footer__brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:500;letter-spacing:.02em}
.footer__brand span{width:26px;height:26px;border-radius:7px;background:var(--accent);display:grid;place-items:center;font-size:12.5px}
.footer__links{display:flex;gap:20px;flex-wrap:wrap}
.footer__links a{transition:color .2s}
.footer__links a:hover{color:#fff}

/* ============================================================
   灯箱
   ============================================================ */
.lightbox{
  position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(8,12,20,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:60px 76px;
}
.lightbox.is-open{display:flex;animation:lbIn .22s ease}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
/* 图片容器：竖版长图靠它内部滚动，按钮与图注在滚动区之外，滚动时不会被带走 */
.lightbox__body{display:flex;align-items:center;justify-content:center;width:100%;max-height:100%}
.lightbox img{max-width:100%;max-height:80vh;border-radius:10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
/* 竖版长图（如课程全景图）：不按 80vh 压缩，容器内滚动看原尺寸，保证图内小字可读 */
.lightbox--tall .lightbox__body{overflow:auto;align-items:flex-start;border-radius:10px}
.lightbox--tall img{max-height:none}
/* 长图铺满灯箱时图注会压在图上，给个暗底药丸保证可读 */
.lightbox--tall .lightbox__cap{
  left:50%;right:auto;transform:translateX(-50%);width:auto;max-width:calc(100% - 40px);
  padding:8px 18px;border-radius:100px;background:rgba(8,12,20,.72);
}
@media (max-width:760px){
  .lightbox--tall{padding:58px 12px 52px}
  /* 手机上按屏宽缩放长图＝看不清；给足宽度让它横向滚动，图内小字才读得出来 */
  .lightbox--tall .lightbox__body{justify-content:flex-start}
  .lightbox--tall img{width:740px;max-width:none}
  /* 窄屏图注药丸会折成三行压住长图；同样的文字在页面里的 figcaption 已经有一份 */
  .lightbox--tall .lightbox__cap{display:none}
}
.lightbox__cap{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:#DCE3EF;font-size:13.5px;letter-spacing:.02em}
.lightbox__btn{
  position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.24);color:#fff;font-size:18px;display:grid;place-items:center;
  transition:background .2s,border-color .2s;
}
.lightbox__btn:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.5)}
.lightbox__prev{left:18px}.lightbox__next{right:18px}
.lightbox__close{position:absolute;top:18px;right:20px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.24);color:#fff;font-size:19px;display:grid;place-items:center;transition:background .2s}
.lightbox__close:hover{background:rgba(255,255,255,.13)}

/* 回到顶部
   ------------------------------------------------------------
   右下角最下位是「课程知识问答」悬浮按钮（.qa__fab，56px 高），
   回到顶部必须让开它，否则两个按钮在同一个角上叠住 —— 上移到浮标之上。
   （面板展开时由 html.qa-open 把 totop 整体淡出，见文件末尾 .qa 区块） */
.totop{
  position:fixed;right:24px;bottom:calc(24px + 56px + 12px);z-index:110;width:44px;height:44px;border-radius:12px;
  background:#fff;border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;
  box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(8px);transition:.3s;
}
.totop.is-show{opacity:1;visibility:visible;transform:none}
.totop:hover{border-color:#C9D3E6;color:var(--accent)}

/* ============================================================
   入场动画
   ============================================================ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.07s}
.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}
.reveal[data-d="4"]{transition-delay:.28s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:1080px){
  .nav__links{display:none}
  .nav__links.is-open{
    display:flex;position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;
    gap:2px;padding:14px 20px calc(20px + env(safe-area-inset-bottom));background:#fff;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);
    /* 菜单挂在 position:fixed 的导航上，屏高不足时底部链接会永久够不到 ——
       必须限高并允许自身滚动（dvh 让移动端地址栏收起/展开时高度计算正确） */
    max-height:calc(100vh - var(--nav-h));
    max-height:calc(100dvh - var(--nav-h));
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  .nav__links.is-open .nav__link{padding:12px 14px}
  .nav__link.is-active::after{display:none}
  .nav__burger{display:grid}
  .nav__cta{display:none}
  .hero__inner{grid-template-columns:1fr;gap:40px;align-items:start}
  .hero__portrait{order:-1}
  .hero__portrait-frame{max-width:330px;margin:0 auto}
  .hero__badge{left:auto;right:-8px;bottom:40px}
  .position{grid-template-columns:1fr;gap:32px}
  .tiers{grid-template-columns:1fr}
  .hotcard--feature{grid-template-columns:1fr}
  .hotcard--feature .hotcard__fig{border-right:0;border-bottom:1px solid var(--line-soft);padding:20px}
  /* 单列时全景图铺满整栏会过高，压到 860 宽居中，图上文字仍清楚 */
  .hotcard--feature .hotcard__fig img{max-width:860px;margin:0 auto}
  /* 无配图的整栏卡收成单列，右侧标记位变成底部一条标记带 */
  .hotcard--wide{grid-template-columns:1fr}
  .hotcard--wide .hotcard__body{padding:30px 28px}
  .hotcard__mark{
    flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:8px 18px;
    border-left:0;border-top:1px solid var(--line-soft);padding:20px 26px;
  }
  .hotcard__mark b{font-size:30px}
  .hotcard__mark p{margin-left:auto}
  .tmap__grid{grid-template-columns:repeat(2,1fr)}
  .specs{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .wall{grid-template-columns:repeat(3,1fr)}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stat{border-bottom:1px solid var(--line-soft)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .stat:nth-last-child(-n+2){border-bottom:0}
  .honor{grid-template-columns:1fr}
  .certs{grid-template-columns:repeat(3,1fr)}
  .client-row{grid-template-columns:170px 1fr;gap:20px}
  .lightbox{padding:56px 20px}
  .lightbox__btn{display:none}
}
@media (max-width:760px){
  .wrap{padding:0 20px}
  .section{padding:72px 0}
  .hero{padding-top:calc(var(--nav-h) + 44px)}
  .sec-head{margin-bottom:36px}
  .grid-2,.grid-3,.grid-4,.grid-6,.edu,.events,.intl,.contact,.specs{grid-template-columns:1fr}
  .tier{flex-direction:column;gap:14px}
  .hotcard__body{padding:22px 20px 24px}
  .hotcard__t{font-size:16.5px}
  .hotcard--feature .hotcard__body{padding:22px 20px 24px}
  .hotcard--feature .hotcard__t{font-size:17px}
  .hotcard--feature .hotcard__fig{padding:14px}
  .hotcard--wide .hotcard__body{padding:22px 20px 24px}
  .hotcard__mark{padding:16px 20px;gap:6px 14px}
  .hotcard__mark b{font-size:24px}
  .hotcard__mark p{display:none}
  .tmap{padding:22px 20px 24px}
  .tmap__grid{grid-template-columns:1fr}
  .course__map{padding:12px}
  .wall{grid-template-columns:repeat(2,1fr);gap:10px}
  .tl-item{grid-template-columns:1fr;gap:10px;padding:22px 0}
  .tl-item__period{padding-top:0}
  .client-row{grid-template-columns:1fr;gap:12px;padding:20px}
  .certs{grid-template-columns:1fr}
  /* 单列时按各自原始比例显示：竖图就是竖的、横图就是横的，不必再套统一卡框。
     竖图此时会很高（750x1000 铺满单列），限高并居中，避免一张证书就占掉一屏 */
  .certs img{aspect-ratio:auto;width:auto;max-width:100%;max-height:560px;margin:0 auto;display:block}
  .pillars{grid-template-columns:1fr}
  /* 讲师海报转单列：竖版海报铺满整栏会变成 700×967 的一块，限宽后居中。
     ⚠️ 必须同时写 `width:100%` + `justify-self:center` —— 单靠 `margin:0 auto` 会让
     网格项变成 shrink-to-fit，而 `img{width:100%}` 的百分比失去参照，图会被压成 0 宽（只剩边框 2px）。 */
  .poster{grid-template-columns:1fr;gap:30px}
  .poster__fig{width:100%;max-width:360px;justify-self:center}
  .poster__lede{max-width:64ch}
  .poster__specs{grid-template-columns:1fr}
  .poster__actions .btn{flex:1 1 100%;justify-content:center}
  .position__quote{font-size:17px}
  .hero__actions .btn{flex:1 1 100%;justify-content:center}
  .cta__actions .btn{flex:1 1 100%;justify-content:center}
  .pcase{padding:24px}
  .pcase__metrics{gap:20px}
  .footer__inner{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (max-width:520px){
  .stats__grid{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--line-soft)!important;padding:20px 0}
  .stat:last-child{border-bottom:0!important}
  .wall{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   课程层级专属页
   ============================================================ */
.page-hero{padding:calc(var(--nav-h) + 52px) 0 0;position:relative;overflow:hidden}
.page-hero__bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(620px 340px at 84% 0%,rgba(29,78,216,.07),transparent 70%),
    linear-gradient(180deg,#FBFCFE 0%,#FFFFFF 70%);
}
.page-hero .wrap{position:relative;z-index:2}

.crumb{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.crumb a{transition:color .2s}
.crumb a:hover{color:var(--accent)}
.crumb i{font-style:normal;opacity:.45}

.level-head{display:grid;grid-template-columns:1.35fr .65fr;gap:48px;align-items:end;margin-top:28px}
.level-tag{
  display:inline-flex;align-items:center;gap:10px;padding:6px 14px;border-radius:100px;
  background:var(--accent-soft);color:var(--accent);font-size:12.5px;font-weight:600;letter-spacing:.1em;
}
.level-title{
  font-size:clamp(27px,3.7vw,42px);letter-spacing:-.025em;line-height:1.22;margin-top:20px;
}
.level-title em{font-style:normal;display:block;color:var(--accent)}
.level-lead{margin-top:18px;font-size:16px;line-height:1.85;color:var(--body);max-width:640px}

.level-figure{text-align:right}
.level-figure b{display:block;font-size:clamp(44px,6.4vw,68px);color:var(--ink);letter-spacing:-.045em;line-height:1;font-weight:600}
.level-figure b i{font-style:normal;font-size:.4em;color:var(--accent);margin-left:4px;font-weight:600}
.level-figure span{display:block;margin-top:10px;font-size:13px;color:var(--muted);letter-spacing:.02em}

.lv-scope{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:44px;
}
.lv-scope__item{background:#fff;padding:24px 26px}
.lv-scope__k{font-size:11.5px;font-weight:600;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.lv-scope__v{margin-top:10px;font-size:15px;color:var(--ink);line-height:1.75;font-weight:500}

/* 层级切换 tab */
.lv-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.lv-tab{
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:20px 22px;
  transition:border-color .25s,box-shadow .25s,transform .25s;display:block;
}
.lv-tab:hover{border-color:#D2DBEA;box-shadow:var(--shadow-md);transform:translateY(-3px)}
.lv-tab.is-current{border-color:var(--accent);background:var(--accent-soft);pointer-events:none}
.lv-tab__k{font-size:11.5px;font-weight:600;letter-spacing:.12em;color:var(--accent)}
.lv-tab__t{margin-top:9px;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.5}
.lv-tab__n{margin-top:7px;font-size:12.5px;color:var(--muted)}

/* 模块标题 */
.module{margin-top:56px}
.module:first-of-type{margin-top:0}
.module-head{
  display:flex;align-items:baseline;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.module-idx{font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--accent)}
.module-head h3{font-size:19px;letter-spacing:-.015em}
.module-lead{font-size:13.5px;color:var(--muted);margin-left:auto;letter-spacing:.01em}

/* 课程条目 */
.course-list{display:grid;gap:14px;margin-top:22px}
.course-item{
  display:grid;grid-template-columns:60px 1fr;gap:24px;padding:26px 28px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.course-item:hover{border-color:#D2DBEA;box-shadow:var(--shadow-md);transform:translateY(-2px)}
.course-item__no{
  font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.06em;
  padding-top:3px;font-variant-numeric:tabular-nums;
}
.course-item.is-rec .course-item__no{color:var(--accent)}
.course-item__title{font-size:17.5px;font-weight:600;color:var(--ink);line-height:1.55;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rec{
  font-size:11px;font-weight:600;color:#fff;background:var(--accent);
  padding:3px 9px;border-radius:5px;letter-spacing:.06em;flex:0 0 auto;
}
.course-item__meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;margin-top:16px}
.meta{font-size:13.5px;line-height:1.7;color:var(--body)}
.meta b{display:block;font-size:11.5px;font-weight:600;letter-spacing:.1em;color:var(--muted);margin-bottom:3px;text-transform:uppercase}
.course-item__kw{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.course-item__sum{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-size:14.5px;line-height:1.85;color:var(--body);
}

/* 底部前后层级 */
.lv-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px}
.lv-nav a{
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:22px 24px;
  transition:border-color .25s,box-shadow .25s,transform .25s;display:block;
}
.lv-nav a:hover{border-color:#D2DBEA;box-shadow:var(--shadow-md);transform:translateY(-3px)}
.lv-nav span{font-size:11.5px;font-weight:600;letter-spacing:.12em;color:var(--muted)}
.lv-nav b{display:block;margin-top:8px;font-size:16px;color:var(--ink);font-weight:600;line-height:1.5}
.lv-nav a.is-next{text-align:right}

/* 层级页响应式 */
@media (max-width:1080px){
  .level-head{grid-template-columns:1fr;gap:28px;align-items:start}
  .level-figure{text-align:left}
  .lv-scope{grid-template-columns:1fr}
  .lv-tabs{grid-template-columns:1fr}
}
@media (max-width:760px){
  .page-hero{padding-top:calc(var(--nav-h) + 34px)}
  .course-item{grid-template-columns:1fr;gap:12px;padding:22px}
  .course-item__no{padding-top:0}
  .course-item__meta{grid-template-columns:1fr;gap:12px}
  .lv-nav{grid-template-columns:1fr}
  .lv-nav a.is-next{text-align:left}
  .module-lead{margin-left:0;flex-basis:100%}
}

/* 课程层级卡片：可点击进入专属页 */
a.tier{cursor:pointer}
.tier__more{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-size:13px;font-weight:500;color:var(--accent);letter-spacing:.01em;
}
.tier__more .btn__arrow{transition:transform .25s}
a.tier:hover .tier__more .btn__arrow{transform:translateX(4px)}

/* ============================================================
   课程详情页
   ============================================================ */
.lv-scope.cols-4{grid-template-columns:repeat(4,1fr)}
/* 课程页：页头下载按钮行 */
.lv-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.lv-actions__hint{font-size:13px;color:var(--muted);line-height:1.6}
.btn__ico{font-size:15px;line-height:1;font-weight:600}

.cd-fig{margin:0;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden}
.cd-fig img{width:100%;cursor:zoom-in}
.cd-fig figcaption{
  padding:14px 22px 18px;font-size:12.5px;color:var(--muted);text-align:center;
  letter-spacing:.01em;border-top:1px solid var(--line-soft);
}
/* 课程全景图（竖版信息长图）：整栏宽，与站内其它卡片左边缘对齐；
   整栏宽还有个好处——图被放大到接近原尺寸（1124 / 1280），图内小字最清楚 */
.cd-fig--poster{margin:0}
.cd-fig__txt{display:block}
.cd-fig__zoom{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-size:12.5px;font-weight:500;color:var(--accent);
  background:var(--accent-soft);border-radius:100px;padding:6px 14px;
  transition:background .2s,color .2s;
}
.cd-fig__zoom i{font-style:normal}
.cd-fig__zoom:hover{background:var(--accent);color:#fff}

.toc{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.toc a{
  font-size:13.5px;color:var(--ink-2);padding:7px 15px;background:#fff;
  border:1px solid var(--line);border-radius:100px;
  transition:border-color .2s,color .2s,background .2s;
}
.toc a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
/* 目录里的分组标签（多天课程如「第一天 / 第二天」），强制独占一行 */
.toc__g{flex:0 0 100%;font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--muted)}
.toc__g:not(:first-child){margin-top:6px}

/* 课程收益 / 授课方法 / 配套资料 卡片网格 */
.gain-grid,.method-grid,.kit-grid{display:grid;gap:14px}
.gain-grid{grid-template-columns:repeat(4,1fr)}
.method-grid{grid-template-columns:repeat(3,1fr)}
.kit-grid{grid-template-columns:repeat(4,1fr)}
.gain,.method,.kit{
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:22px;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.gain:hover,.method:hover,.kit:hover{border-color:#D2DBEA;box-shadow:var(--shadow-md);transform:translateY(-3px)}
.gain__i,.method__i,.kit__i{font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--accent)}
.gain__t,.method__t,.kit__t{margin-top:10px;font-size:15px;font-weight:600;color:var(--ink);line-height:1.55}
.gain__d,.method__d,.kit__d{margin-top:8px;font-size:13.5px;line-height:1.75;color:var(--body)}

/* 课程大纲章节 */
.chap{
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:28px 32px;transition:border-color .25s,box-shadow .25s;
}
.chap+.chap{margin-top:14px}
.chap:hover{border-color:#D2DBEA;box-shadow:var(--shadow-md)}
.chap__hd{display:flex;align-items:center;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line-soft)}
.chap__no{
  flex:0 0 auto;min-width:46px;height:46px;padding:0 11px;border-radius:12px;
  background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-size:16px;font-weight:600;line-height:1;letter-spacing:0;
}
/* 大纲章节的分组带（「第一天 / 第二天」这类跨章节分组） */
.chap-group{margin:34px 0 14px;display:flex;align-items:center;gap:14px}
.toc+.chap-group{margin-top:10px}
.chap-group__d{
  flex:0 0 auto;font-size:11px;font-weight:600;letter-spacing:.14em;color:#fff;
  background:var(--ink);padding:5px 11px;border-radius:100px;
}
.chap-group__t{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.chap-group__r{flex:1;height:1px;background:var(--line)}
.chap__t{font-size:18px;letter-spacing:-.015em}
.chap__n{margin-left:auto;font-size:12px;color:var(--muted);letter-spacing:.06em;white-space:nowrap}
.chap__list{margin-top:18px;display:grid;gap:11px}
.oitem{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.8;color:var(--body)}
.oitem::before{content:"";flex:0 0 5px;height:5px;border-radius:50%;background:var(--accent);margin-top:11px}
.oitem>span:not(.oitem__tag){flex:1}
.oitem>div{flex:1}
.oitem b{color:var(--ink);font-weight:600}
.oitem__tag{
  flex:0 0 auto;font-size:11px;font-weight:600;color:#fff;background:var(--accent);
  padding:2px 8px;border-radius:5px;letter-spacing:.06em;margin-top:4px;
}
.osub{margin-top:10px;padding-left:16px;border-left:1px solid var(--line);display:grid;gap:7px}
.osub>div{padding-left:14px;font-size:13.5px;line-height:1.8;color:var(--body)}
.osub b{color:var(--ink-2);font-weight:600}

/* 层级页课程卡：可跳转详情 */
.course-item__link{transition:color .2s}
.course-item__link:hover{color:var(--accent)}
.course-item__more{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  font-size:13px;font-weight:500;color:var(--accent);letter-spacing:.01em;
}
.course-item__more .btn__arrow{transition:transform .25s}
.course-item:hover .course-item__more .btn__arrow{transform:translateX(4px)}

/* 课程详情页响应式 */
@media (max-width:1080px){
  .lv-scope.cols-4{grid-template-columns:repeat(2,1fr)}
  .gain-grid,.kit-grid{grid-template-columns:repeat(2,1fr)}
  .method-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .lv-scope.cols-4{grid-template-columns:1fr}
  .gain-grid,.kit-grid{grid-template-columns:1fr}
  .chap{padding:22px}
  .chap__hd{flex-wrap:wrap;gap:12px}
  .chap__t{font-size:16.5px}
  .chap__n{margin-left:0;flex-basis:100%}
  .chap-group{margin:26px 0 12px;flex-wrap:wrap;gap:8px 12px}
  .chap-group__r{display:none}
}
.cd-2col{display:grid;grid-template-columns:1fr .82fr;gap:44px;align-items:start}
@media (max-width:1080px){.cd-2col{grid-template-columns:1fr;gap:30px;align-items:start}}

/* 01 课程背景正文块（2 栏时是左栏，无配图时单栏居中留白） */
.cd-text{display:grid;gap:18px;max-width:840px;font-size:15.5px;line-height:1.95;color:var(--body)}

/* 大纲章节末尾的作者按语 / 章节说明 */
.chap-note{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-size:13px;line-height:1.8;color:var(--muted);
}

/* ============================================================
   课程详情页：图内信息文字化（场景 / 资料 / 工具清单）
   ============================================================ */
.scene-panel{
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:28px 30px;display:flex;flex-direction:column;justify-content:center;
}
.scene-panel__k{font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--accent)}
.scene-panel__t{margin-top:10px;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.015em}
.scene-panel__list{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.scene-pill{
  font-size:13.5px;color:var(--ink-2);background:#F5F7FB;
  border:1px solid var(--line-soft);border-radius:100px;padding:7px 15px;
  transition:border-color .2s,background .2s,color .2s;
}
.scene-pill:hover{border-color:#D2DBEA;background:#fff;color:var(--accent)}

/* 大纲章节内嵌的配套工具清单（如「四、AI 可视化汇报工具」下的 AI PPT 工具）
   用灰色格子条而非白色卡片，避免在白色 .chap 卡里再套一层白卡 */
.chap-extra{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft)}
.chap-extra__hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.chap-extra__k{font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--accent)}
.chap-extra__n{font-size:12.5px;color:var(--muted);letter-spacing:.01em}
.chap-extra__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden;
}
.chap-tool{background:#FBFCFE;padding:16px 18px}
.chap-tool b{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.5;letter-spacing:-.01em}
.chap-tool span{display:block;margin-top:7px;font-size:12.5px;line-height:1.72;color:var(--body)}

@media (max-width:1080px){.chap-extra__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  .scene-panel{padding:22px}
  .chap-extra__grid{grid-template-columns:1fr}
  .chap-tool{padding:14px 16px}
}

/* ============================================================
   知识助手（07 板块）· 嵌入 knowledge-agent 这个独立应用
   ------------------------------------------------------------
   用 <iframe> 隔离，**不把应用的 DOM/CSS 并进本站**：两边类名大量重名
   （.brand / .btn / .wrap / .modal / .mask / .side / .pill / .field / .dot），
   直接并入必然互相污染，且应用自带一套 :root 设计令牌会覆盖全站变量。
   应用自身已按 960 / 700 / 560 三个断点响应式，**iframe 的宽度就是它的视口宽度**，
   所以外层只需要给对「宽度」和「高度」，内部布局它自己会适配。
   它的 .app 用 height:calc(100vh - 64px)，而 iframe 内 100vh = iframe 高度，
   所以外层高度设多少，内部就按多少算，不需要额外传参。
   ============================================================ */
.section--assist{
  background:linear-gradient(180deg,#F5F8FF 0%,#FFFFFF 46%);
  border-top:1px solid var(--line-soft);
}
.assist__frame{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 30px 64px -36px rgba(29,78,216,.40),0 2px 10px -6px rgba(11,18,32,.14);
}
.assist__app{display:block;width:100%;height:720px;border:0}
/* 微信里 07 板块不加载 iframe（平台 403），说明块给一个得体的留白高度 */
.assist__frame .wxnote{padding:clamp(52px,9vh,88px) 26px}
.assist__foot{display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;margin-top:18px}
.assist__note{margin:0;flex:1 1 320px;font-size:13.5px;line-height:1.7;color:var(--muted)}
.assist__open{font-size:14px;font-weight:600;color:var(--accent);white-space:nowrap;transition:color .2s}
.assist__open:hover{color:var(--accent-deep)}
.assist__open .btn__arrow{display:inline-block;transition:transform .2s}
.assist__open:hover .btn__arrow{transform:translateX(3px)}

/* 课程体系板块末尾的引导句（把「不知道选哪门」的访客接到助手） */
.course__ask{margin-top:26px;font-size:15px;color:var(--body)}
.course__ask a{color:var(--accent);font-weight:600;transition:color .2s}
.course__ask a:hover{color:var(--accent-deep)}

@media (max-width:1080px){
  .assist__app{height:660px}
}
@media (max-width:760px){
  /* 手机上让助手占满整屏宽度：聊天区能多出约 40px 可用宽度 ——
     对 390 宽的屏来说，这 40px 直接决定消息气泡会不会挤成一列窄条 */
  .section--assist .wrap{padding:0}
  .section--assist .sec-head{padding:0 20px}
  .assist__frame{border-radius:0;border-left:0;border-right:0;box-shadow:none}
  .assist__app{height:clamp(520px,74vh,640px)}
  .assist__foot{padding:0 20px;margin-top:16px}
  .assist__note{flex:1 1 100%}
  .course__ask{margin-top:20px;font-size:14px}
}

/* ============================================================
   课程知识问答 · 全站悬浮组件（.qa）
   ------------------------------------------------------------
   让「课程知识问答」在**每个页面**随时可达：右下角一枚浮标，点开就是可
   直接提问的对话面板，关掉面板后对话还在（只隐藏不销毁）。
   实现方式：**只在公共 site.css / site.js 各加一段，不动任何一页 HTML** ——
   28 个页面都引这两份文件，改一处即全站生效，也绕开各页生成器。
   内容复用「课程知识问答」这个独立应用，用 <iframe> 隔离塞进浮层：
   两边类名大量重名（.brand/.btn/.wrap/.side/.modal…）且它自带一套 :root
   令牌，并 DOM 必然互相污染，只能隔离。iframe 宽度就是它的视口宽度，
   所以只需给对宽高，内部按自己的 960/700/560 断点适配。
   （2026-09-21 起那个应用**跨域引用** WorkBuddy 托管的那一份，站点里不再放副本；
   地址与 site= 参数在 site.js 里拼见那里的注释。）
   性能：kb.js 有 388KB，**iframe 首次点击才赋 src**，不在 28 个页面里预加载。
   层级：z-index 150 —— 要盖住导航(120) 和回到顶部(110)：手机上展开是整屏，
   若低于导航，顶部那一行标题会被导航压住（看不到关闭按钮，等於出不去）；
   但仍低于灯箱(200)，保证图片灯箱永远在最上层。
   ============================================================ */
.qa{position:fixed;right:24px;bottom:24px;z-index:150}

/* --- 浮标 --- */
.qa__fab{
  position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:18px;
  background:linear-gradient(135deg,#2563EB 0%,#1D4ED8 58%,#153FB0 100%);
  color:#fff;box-shadow:0 14px 30px -10px rgba(29,78,216,.55),0 2px 8px -4px rgba(11,18,32,.20);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,opacity .2s,visibility .2s;
}
.qa__fab:hover{transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(29,78,216,.60),0 2px 8px -4px rgba(11,18,32,.24)}
.qa__fab:active{transform:translateY(0)}
.qa__fab:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px rgba(29,78,216,.45)}
.qa__fab svg{display:block;width:26px;height:26px}
/* 呼吸光环：让人注意到「这里可以问」 */
.qa__fab::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  animation:qa-pulse 2.8s ease-out 1.4s infinite;
}
@keyframes qa-pulse{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.42)}
  70%{box-shadow:0 0 0 15px rgba(37,99,235,0)}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}
}
@media (hover:hover){
  .qa__fab::before{
    content:"课程知识问答";position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);
    padding:7px 11px;border-radius:8px;background:var(--ink);color:#fff;
    font-size:12.5px;font-weight:500;line-height:1.3;letter-spacing:.01em;white-space:nowrap;
    opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;pointer-events:none;
  }
  .qa__fab:hover::before{opacity:1;visibility:visible}
}

/* --- 对话面板 --- */
.qa__panel{
  position:fixed;right:24px;bottom:calc(24px + 56px + 16px);z-index:150;
  width:min(400px,calc(100vw - 48px));
  height:min(620px,calc(100vh - 24px - 56px - 16px - 24px));
  height:min(620px,calc(100dvh - 24px - 56px - 16px - 24px));
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 32px 70px -24px rgba(11,18,32,.38),0 4px 14px -8px rgba(11,18,32,.16);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);transform-origin:100% 100%;
  transition:opacity .24s cubic-bezier(.2,.7,.3,1),transform .24s cubic-bezier(.2,.7,.3,1),visibility .24s;
}
.qa.is-open .qa__panel{opacity:1;visibility:visible;transform:none}
/* 面板打开时浮标收起（关闭入口在面板头部），两者不挤在同一个角上 */
.qa.is-open .qa__fab{opacity:0;visibility:hidden;transform:scale(.9)}

.qa__head{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:11px 10px 11px 15px;border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,#F7FAFF 0%,#FFFFFF 100%);
}
.qa__mark{
  flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,#2563EB,#153FB0);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
}
.qa__title{flex:1 1 auto;min-width:0}
.qa__title b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.35}
.qa__title span{
  display:block;font-size:11.5px;color:var(--muted);line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qa__acts{flex:0 0 auto;display:flex;align-items:center;gap:2px}
.qa__ibtn{
  display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  color:var(--muted);transition:background .2s,color .2s;
}
.qa__ibtn:hover{background:var(--accent-soft);color:var(--accent)}
.qa__ibtn:focus-visible{outline:2px solid rgba(29,78,216,.5);outline-offset:1px}
.qa__ibtn svg{display:block;width:17px;height:17px}

.qa__body{position:relative;flex:1 1 auto;min-height:0;background:#fff}
.qa__frame{display:block;width:100%;height:100%;border:0}
.qa__load{
  position:absolute;inset:0;display:grid;place-content:center;gap:9px;
  padding:0 26px;text-align:center;background:#fff;color:var(--muted);
  font-size:12.5px;line-height:1.65;transition:opacity .3s,visibility .3s;
}
.qa__load b{display:block;color:var(--ink);font-size:14px;font-weight:600;line-height:1.4}
.qa__spin{
  width:22px;height:22px;margin:0 auto;border-radius:50%;
  border:2px solid #DCE4F5;border-top-color:var(--accent);animation:qa-spin .8s linear infinite;
}
@keyframes qa-spin{to{transform:rotate(360deg)}}
.qa.is-ready .qa__load{opacity:0;visibility:hidden}

/* 微信里不加载 iframe（平台按 UA 拦截、整站 403），正文换成下面这块说明 */
.qa.is-wx .qa__load,.qa.is-wx .qa__frame{display:none}

/* --- 微信说明块（浮窗正文 / 首页 07 板块 两处共用同一个组件） ---
   ⚠️ 只做**朴素文字说明**：不画指向右上角的箭头、不仿微信菜单截图 ——
   《微信外部链接内容管理规范》明确禁止"模仿微信 UI 引导离开"。 */
.wxnote{
  height:100%;display:grid;place-content:center;justify-items:center;gap:12px;
  padding:44px 26px;text-align:center;background:#fff;color:var(--muted);
  font-size:13px;line-height:1.75;
}
.wxnote__ico{
  display:grid;place-items:center;width:46px;height:46px;margin-bottom:2px;
  border-radius:15px;background:var(--accent-soft);color:var(--accent);
}
.wxnote__ico svg{display:block;width:23px;height:23px}
.wxnote b{color:var(--ink);font-size:15px;font-weight:600;line-height:1.4}
.wxnote p{margin:0;max-width:440px}
.wxnote__k{
  display:inline-block;margin:0 2px;padding:0 7px;border:1px solid var(--line);
  border-radius:var(--radius-xs);background:#F7F9FE;color:var(--ink);
  font-style:normal;font-size:12.5px;font-weight:600;
}
.wxnote__acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:4px}
.wxnote__btn{
  height:38px;padding:0 18px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:#fff;color:var(--accent);font:inherit;font-size:13.5px;font-weight:600;
  cursor:pointer;transition:background .2s,border-color .2s,color .2s;
}
.wxnote__btn:hover{background:var(--accent-soft);border-color:rgba(29,78,216,.28)}
.wxnote__btn:focus-visible{outline:2px solid rgba(29,78,216,.5);outline-offset:2px}
/* 自动复制失败时才显示，供长按手动复制 */
.wxnote__url{
  max-width:440px;word-break:break-all;color:var(--ink);
  font-size:12px;line-height:1.6;-webkit-user-select:text;user-select:text;
}

/* 自动复制的结果反馈（浮窗与首页共用；层级高于助手浮窗 150、低于灯箱 200） */
.wxtoast{
  position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));z-index:170;
  transform:translate(-50%,10px);max-width:min(88vw,420px);
  padding:11px 18px;border-radius:12px;background:rgba(11,18,32,.9);color:#fff;
  font-size:13px;line-height:1.55;text-align:center;
  opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;
  pointer-events:none;
}
.wxtoast.is-show{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media (max-width:760px){
  /* 手机上给底部的安全区留够，别被 Home 指示条压住 */
  .wxtoast{bottom:calc(20px + env(safe-area-inset-bottom))}
  .wxnote{padding:36px 22px}
}

/* 整屏模式：窄屏（手机）**或**够矮的视口（横屏手机、矮窗口）都要走 ——
   浮窗模式在 390 高时只剩约 270px 面板高，扣掉标题栏只给助手 209px，
   连它自己的顶栏加输入框都放不下（内部必溢出、输入框被裁）。
   留 200px 给浮窗上下留白，低于这个高度就没什么可留的了，直接铺满。 */
@media (max-width:760px),(max-height:560px){
  .qa__panel{
    left:0;right:0;top:0;bottom:auto;width:100%;
    height:100vh;height:100dvh;border:0;border-radius:0;transform:translateY(10px);
  }
  .qa__head{padding:calc(9px + env(safe-area-inset-top)) 8px 9px 13px}
  .qa__ibtn{width:38px;height:38px}
  .qa__ibtn svg{width:18px;height:18px}
}
@media (max-width:760px){
  /* 手机上浮标贴边收小，别挡内容 */
  .qa{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
  .totop{right:16px;bottom:calc(16px + 52px + 12px + env(safe-area-inset-bottom))}
  .qa__fab{width:52px;height:52px;border-radius:17px}
  .qa__fab svg{width:24px;height:24px}
}
@media (max-height:560px){
  .totop{right:16px;bottom:calc(16px + 52px + 12px + env(safe-area-inset-bottom))}
  .qa{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
}
/* 面板占着右下角时，回到顶部按钮先让位，避免叠在面板上 */
html.qa-open .totop{opacity:0;visibility:hidden}
@media (prefers-reduced-motion:reduce){
  .qa__fab::after{animation:none}
  .qa__fab{transition:none}
  .qa__panel{transition:opacity .16s,visibility .16s;transform:none}
  .qa__spin{animation-duration:2s}
}