
/* === 导航科技感增强 (navfx) === */
.nav-links a{position:relative;padding:8px 2px;letter-spacing:.02em;
  transition:color .25s,text-shadow .25s,letter-spacing .35s var(--ease,cubic-bezier(.16,1,.3,1))}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan,#22d3ee),var(--blue,#4f7bff));
  box-shadow:0 0 12px rgba(34,211,238,.65);
  transition:width .3s var(--ease,cubic-bezier(.16,1,.3,1))}
.nav-links a:hover{color:var(--text-hi,#eef5ff);text-shadow:0 0 14px rgba(34,211,238,.55);letter-spacing:.06em}
.nav-links a:hover::after{width:100%}
.nav-links a::before{content:'';position:absolute;left:-13px;top:50%;width:5px;height:5px;margin-top:-3px;
  background:var(--cyan,#22d3ee);box-shadow:0 0 9px var(--cyan,#22d3ee);
  opacity:0;transform:translateX(8px) rotate(45deg);
  transition:opacity .3s,transform .35s var(--ease,cubic-bezier(.16,1,.3,1))}
.nav-links a:hover::before{opacity:1;transform:translateX(0) rotate(45deg)}
@keyframes navPulse{0%,100%{opacity:1}50%{opacity:.45}}
.nav-links a.nav-hot:not([data-ext]){color:var(--cyan,#22d3ee);text-shadow:0 0 14px rgba(34,211,238,.5)}
.nav-links a.nav-hot:not([data-ext])::after{width:100%;animation:navPulse 2.6s ease-in-out infinite}

/* === 点击反馈 / 当前区块 / 跳转进度条 (navfx v2) === */
.nav-links a.is-click{color:var(--text-hi,#eef5ff);text-shadow:0 0 18px rgba(34,211,238,.9);
  animation:navClick .5s var(--ease,cubic-bezier(.16,1,.3,1))}
.nav-links a.is-click::after{width:100%;box-shadow:0 0 16px rgba(34,211,238,.95);animation:navSweep .55s ease-out}
.nav-links a.is-click::before{opacity:1;transform:translateX(0) rotate(45deg) scale(1.4);
  box-shadow:0 0 14px var(--cyan,#22d3ee)}
@keyframes navClick{0%{transform:scale(1)}28%{transform:scale(1.09)}100%{transform:scale(1)}}
@keyframes navSweep{0%{width:0}45%{width:100%}100%{width:100%}}
.nav-links a.is-current{color:var(--cyan,#22d3ee);text-shadow:0 0 12px rgba(34,211,238,.5)}
.nav-links a.is-current::after{width:100%;animation:navPulse 2.6s ease-in-out infinite}
.nav-links a.is-current::before{opacity:1;transform:translateX(0) rotate(45deg)}
#navTopBar{position:fixed;top:0;left:0;height:2px;width:0;z-index:9999;pointer-events:none;
  background:linear-gradient(90deg,#22d3ee,#4f7bff);box-shadow:0 0 12px rgba(34,211,238,.85)}

/* === 修复：整屏分页指示器撑满宽度误吞点击 === */
.pager-dots{pointer-events:none}
.pager-dots button{pointer-events:auto}

/* === 培训亮点：两栏布局 + 紧凑学员群聊 (mini-chat) === */
#highlights .hl-wrap{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:20px;align-items:start;margin-top:6px}
#highlights .hl-grid{grid-template-columns:1fr;gap:14px;margin:0}
.hl-chat{border:1px solid var(--line,#5a82d12e);background:rgba(11,19,34,.72);overflow:hidden;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.mc-head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line,#5a82d12e);background:rgba(34,211,238,.05)}
.mc-avas{display:flex}
.mc-avas i,.mc-ava{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:700;color:#04070f;font-style:normal;margin-left:-6px;border:2px solid #0b1322;flex:none}
.mc-avas i:first-child{margin-left:0}
.mc-avas .a1,.mc-ava.a1{background:linear-gradient(135deg,#7df9ff,#22d3ee)}
.mc-avas .a2,.mc-ava.a2{background:linear-gradient(135deg,#8b6cf5,#4f7bff)}
.mc-avas .a3,.mc-ava.a3{background:linear-gradient(135deg,#ff3d81,#8b6cf5)}
.mc-avas .mm{background:rgba(120,170,240,.25);color:#9fb2d0;font-size:8px}
.mc-head b{font-size:12.5px;color:#eef5ff;font-weight:600}
.mc-n{font-size:11px;color:#22d3ee}
.mc-typing{margin-left:auto;display:flex;gap:4px;align-items:center}
.mc-typing i{width:3.5px;height:3.5px;border-radius:50%;background:#22d3ee;animation:mcBlink 1.4s infinite}
.mc-typing i:nth-child(2){animation-delay:.2s}
.mc-typing i:nth-child(3){animation-delay:.4s}
@keyframes mcBlink{0%,100%{opacity:.2}50%{opacity:1}}
.mc-body{padding:12px 12px 6px;display:grid;gap:10px}
.mc-sys{font-size:10.5px;color:#5d6f8f;text-align:center;font-family:ui-monospace,Consolas,monospace;margin:0}
.mc-row{display:flex;gap:8px;align-items:flex-start}
.mc-row em{display:block;font-size:11px;color:#5d6f8f;font-style:normal;margin-bottom:3px}
.mc-row em time{margin-left:6px;font-family:ui-monospace,Consolas,monospace;font-size:10px}
.mc-row p{margin:0;font-size:12.8px;line-height:1.6;font-weight:300;color:#9fb2d0;padding:8px 11px;
  border:1px solid var(--line,#5a82d12e);background:rgba(10,18,34,.72);border-radius:2px 10px 10px 10px}
.mc-link{display:block;padding:9px 14px;border-top:1px solid var(--line,#5a82d12e);font-size:12.5px;color:#22d3ee;text-align:center;transition:background .25s}
.mc-link:hover{background:rgba(34,211,238,.08)}
@media(max-width:1000px){#highlights .hl-wrap{grid-template-columns:1fr}}
@media(max-width:760px){#highlights .hl-wrap{grid-template-columns:1fr;gap:16px}}

/* === NAVALIGN2026 全站导航位置与视觉统一（基准：首页 1240/18px/74px） === */
header{padding:0!important}
header .wrap.hbar,header .hbar{max-width:1240px!important;margin:0 auto!important;
  padding:0 18px!important;height:74px!important;gap:0!important;flex-wrap:nowrap!important;align-items:center}
header .hbar>nav{margin-left:auto;display:flex;align-items:center;gap:32px}
header .hbar>nav a{margin-left:0!important;font-size:14.5px}
nav.nav .nav-in,nav .nav-in{max-width:1240px!important;margin-left:auto;margin-right:auto;padding-left:18px!important;padding-right:18px!important;height:74px}
nav.nav .nav-in .nav-links,nav .nav-in .nav-links{gap:32px;font-size:14.5px;margin-left:auto;flex-wrap:nowrap}
header .logo,nav .logo{font-size:18px;font-weight:900;display:flex;align-items:center;gap:10px;letter-spacing:.01em}
header .logo::before{content:'';width:9px;height:9px;background:#22d3ee;transform:rotate(45deg);display:inline-block;flex:0 0 auto}
nav.nav .logo i,nav .logo i{width:9px;height:9px;background:#22d3ee;transform:rotate(45deg);flex:0 0 auto}
header .hbar>nav a{position:relative;padding:8px 2px;transition:color .25s,text-shadow .25s}
header .hbar>nav a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:2px;
  background:linear-gradient(90deg,#22d3ee,#4f7bff);transition:width .3s}
header .hbar>nav a:hover{color:#eaf2ff;text-shadow:0 0 12px rgba(34,211,238,.45)}
header .hbar>nav a:hover::after{width:100%}
@media(max-width:1080px){header .hbar>nav,nav .nav-in .nav-links{gap:20px;font-size:13.5px}}
@media(max-width:900px){
  header .wrap.hbar,header .hbar,nav.nav .nav-in,nav .nav-in{height:auto!important;padding:12px 16px!important;flex-wrap:wrap!important}
  header .hbar>nav,nav .nav-in .nav-links{gap:15px;font-size:13px;flex-wrap:wrap}
}

/* === HLLIVE2026 培训亮点：紧凑卡片 + 实时感群聊 === */
#highlights .hl-wrap{align-items:stretch!important}
#highlights .hl-card{padding:20px 22px!important}
#highlights .hl-card .ico{width:34px;height:34px;margin-bottom:10px!important}
#highlights .hl-card .ico svg{width:16px;height:16px}
#highlights .hl-card h3{font-size:15.5px!important;margin-bottom:6px!important}
#highlights .hl-card p{font-size:13.5px!important;line-height:1.65!important}
#highlights .hl-grid{gap:12px!important}
.hl-chat{display:flex!important;flex-direction:column}
.hl-chat .mc-body{flex:1!important;overflow-y:auto;min-height:0;scrollbar-width:thin}
.mc-row{animation:mcIn .32s ease}
@keyframes mcIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mc-row.mine{flex-direction:row-reverse}
.mc-row.mine em{text-align:right}
.mc-row.mine p{background:rgba(34,211,238,.12)!important;border-color:rgba(34,211,238,.32)!important;color:#d5efff!important}
.mc-row p i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#22d3ee;margin:0 2px;animation:mcBlink 1.2s infinite}
.mc-input{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line,#5a82d12e);background:rgba(6,11,22,.62)}
.mc-input input{flex:1;min-width:0;background:rgba(10,18,34,.72);border:1px solid var(--line,#5a82d12e);
  color:#eaf2ff;font-size:12.5px;padding:8px 12px;outline:none;border-radius:2px;transition:border-color .2s}
.mc-input input:focus{border-color:rgba(34,211,238,.55);box-shadow:0 0 0 2px rgba(34,211,238,.12)}
.mc-input input::placeholder{color:#4d5f80}
.mc-input button{background:linear-gradient(135deg,#22d3ee,#4f7bff);border:0;color:#04070f;font-size:12.5px;
  font-weight:700;padding:0 16px;cursor:pointer;border-radius:2px;transition:filter .2s}
.mc-input button:hover{filter:brightness(1.12)}

/* === HLLIVE2026-2 聊天卡高度锁定（与左列一致，消息区内部滚动） === */
#highlights .hl-chat{height:446px}
@media(max-width:1000px){#highlights .hl-chat{height:auto}#highlights .hl-chat .mc-body{max-height:320px}}

/* === HLAVATAR2026 头像高亮 + 高度自适应 === */
.mc-ava.a4{background:linear-gradient(135deg,#22d3ee,#4f7bff)!important;box-shadow:0 0 10px rgba(34,211,238,.45)}
.mc-ava.me{background:linear-gradient(135deg,#7df9ff,#22d3ee)!important}
.mc-avas i,.mc-ava{color:#04070f!important;font-size:9.5px}
#highlights.hl-shrink .hl-card{padding:14px 18px!important}
#highlights.hl-shrink .hl-card .ico{width:30px;height:30px;margin-bottom:8px!important}
#highlights.hl-shrink .hl-card h3{font-size:14.5px!important;margin-bottom:4px!important}
#highlights.hl-shrink .hl-card p{font-size:13px!important;line-height:1.55!important}

/* === HLSHRINK2026 矮屏两级压缩 === */
#highlights.hl-shrink2 .hl-card{padding:11px 15px!important}
#highlights.hl-shrink2 .hl-card .ico{width:26px;height:26px;margin-bottom:6px!important}
#highlights.hl-shrink2 .hl-card h3{font-size:14px!important;margin-bottom:3px!important}
#highlights.hl-shrink2 .hl-card p{font-size:12.5px!important;line-height:1.5!important}
#highlights.hl-shrink2 .hl-grid{gap:10px!important}

/* ==== NAVUNIFY2026 全站导航几何统一 ==== */
nav, body>header{position:sticky;top:0;z-index:60}
nav#nav{position:fixed;top:0;left:0;right:0}
nav .nav-inner, nav .nav-in, header .hbar{
  width:100% !important; max-width:1240px !important; margin:0 auto !important;
  padding:0 18px !important; height:75px !important; box-sizing:border-box !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important; gap:20px !important;
}
nav .logo, header .logo{
  flex:0 0 auto !important; display:flex !important; align-items:center !important;
  gap:9px !important; font-size:17px !important; letter-spacing:.4px !important; white-space:nowrap !important;
}
.nav-links, header .hbar nav{
  flex:0 1 auto !important; display:flex !important; align-items:center !important;
  gap:24px !important; margin:0 auto !important; list-style:none !important; padding:0 !important;
}
.nav-links a, header .hbar nav a{
  font-size:14px !important; letter-spacing:.4px !important; white-space:nowrap !important; line-height:1 !important;
}
.nav-links li, header .hbar nav > a{flex:0 0 auto !important}
.nav-cta{
  flex:0 0 auto !important; min-width:118px !important; max-width:118px !important;
  text-align:center !important; box-sizing:border-box !important; white-space:nowrap !important;
}
@media(max-width:1180px){
  .nav-links, header .hbar nav{gap:16px !important}
  .nav-links a, header .hbar nav a{font-size:13.5px !important}
  nav .logo, header .logo{font-size:16px !important}
}
@media(max-width:1000px){
  .nav-links, header .hbar nav{gap:11px !important}
  .nav-links a, header .hbar nav a{font-size:12.5px !important}
  .nav-cta{min-width:96px !important;max-width:96px !important;font-size:12.5px !important}
}
@media(max-width:820px){
  .nav-cta{display:none !important}
  nav .nav-inner, nav .nav-in, header .hbar{padding:0 14px !important}
  .nav-links, header .hbar nav{gap:9px !important;flex-wrap:wrap !important;justify-content:flex-end !important}
  .nav-links a, header .hbar nav a{font-size:12px !important}
}

/* ==== NAVUNIFY2026B 导航几何最终统一（logo 定宽 / 高度统一） ==== */
nav, body>header{height:75px !important; box-sizing:border-box !important}
nav .logo, header .logo{
  flex:0 0 160px !important; width:160px !important; max-width:160px !important;
}
nav .logo span, header .logo span{white-space:nowrap !important}

/* ==== NAVUNIFY2026C 移动端导航：单行横向滚动 ==== */
@media(max-width:820px){
  nav, body>header{height:auto !important; min-height:62px !important}
  nav .nav-inner, nav .nav-in, header .hbar{
    height:auto !important; min-height:62px !important; padding:0 14px !important;
    gap:10px !important; flex-wrap:nowrap !important;
  }
  nav .logo, header .logo{flex:0 0 auto !important; width:auto !important; max-width:none !important; font-size:14.5px !important}
  .nav-links, header .hbar nav{
    flex:1 1 auto !important; flex-wrap:nowrap !important; overflow-x:auto !important; overflow-y:hidden !important;
    justify-content:flex-start !important; gap:14px !important; margin:0 !important; padding:2px 0 !important;
    scrollbar-width:none !important; -ms-overflow-style:none !important; -webkit-overflow-scrolling:touch;
  }
  .nav-links::-webkit-scrollbar, header .hbar nav::-webkit-scrollbar{display:none !important; height:0 !important}
  .nav-links a, header .hbar nav a{font-size:12.5px !important}
  .nav-cta{display:none !important}
}

/* ==== NAVUNIFY2026D 移动端收缩修正 ==== */
@media(max-width:820px){
  nav .nav-inner, nav .nav-in, header .hbar{overflow:hidden !important}
  .nav-links, header .hbar nav{min-width:0 !important; flex-shrink:1 !important}
  nav .logo, header .logo{flex-shrink:0 !important}
}

/* ==== NAVUNIFY2026E CTA 背景按钮 ==== */
.nav-cta{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  height:38px !important; padding:0 14px !important; border-radius:6px !important;
  background:linear-gradient(135deg,rgba(34,211,238,.20),rgba(79,123,255,.20)) !important;
  border:1px solid rgba(34,211,238,.55) !important;
  color:#7df9ff !important; font-weight:600 !important; font-size:13.5px !important;
  letter-spacing:.5px !important; text-decoration:none !important; cursor:pointer !important;
  box-shadow:0 0 16px rgba(34,211,238,.18), inset 0 0 12px rgba(34,211,238,.06) !important;
  transition:background .25s, box-shadow .25s, color .25s !important;
}
.nav-cta:hover{
  background:linear-gradient(135deg,rgba(34,211,238,.38),rgba(79,123,255,.38)) !important;
  color:#e6feff !important; box-shadow:0 0 26px rgba(34,211,238,.48) !important;
}
.nav-cta:active{transform:translateY(1px)}
@media(max-width:820px){
  body header .hbar, body nav .nav-in, body nav .nav-inner{flex-flow:row nowrap !important}
}
