/* =========================================================
   NOAH AI SCHOOL HOME UI V4 LITE - 2026-06-25
   目标：修复 V3 页面无响应，重新设计首页首屏/头条/今日推荐/顶部导航。
   说明：只做前端显示层覆盖，不改登录、注册、购买、播放、会员中心等业务逻辑。
========================================================= */
:root{
  --noah-navy:#07152e;
  --noah-navy2:#102b5c;
  --noah-blue:#1677ff;
  --noah-cyan:#28d7ff;
  --noah-purple:#7557ff;
  --noah-text:#0f172a;
  --noah-muted:#64748b;
  --noah-card:#ffffff;
  --noah-line:rgba(22,119,255,.14);
  --noah-shadow:0 22px 60px rgba(15,37,84,.16);
}
html body.web-index{
  background:#f6f9ff!important;
  color:var(--noah-text)!important;
}
html body.web-index *{box-sizing:border-box;}

/* HEADER 全站顶部：白色科技玻璃栏，保证 Logo / 主导航 / 登录注册 / 搜索 / 语言切换可见 */
html body.web-index .web_header{
  position:sticky!important;
  top:0!important;
  z-index:10000!important;
  width:100%!important;
  height:88px!important;
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid rgba(15,23,42,.08)!important;
  box-shadow:0 16px 42px rgba(15,37,84,.08)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
html body.web-index .headerah,
html body.web-index .headerlg{height:88px!important;min-height:88px!important;}
html body.web-index .headerlg{
  display:flex!important;
  align-items:center!important;
  gap:22px!important;
  width:calc(100% - 64px)!important;
  max-width:1240px!important;
  margin:0 auto!important;
  padding:0!important;
}
html body.web-index .weblogo{
  float:none!important;
  flex:0 0 176px!important;
  width:176px!important;
  height:64px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
}
html body.web-index .weblogo a{
  display:block!important;
  width:176px!important;
  height:58px!important;
  background:url(https://www.nuoyazhijie.com/logo.png) left center/contain no-repeat!important;
  filter:drop-shadow(0 10px 20px rgba(22,119,255,.16))!important;
}
html body.web-index .webnav,
html body.web-index .wb-main-nav{
  float:none!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  height:88px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
html body.web-index .webnav>li,
html body.web-index .webnavag,
html body.web-index .webnavtit{
  float:none!important;
  width:auto!important;
  height:auto!important;
  line-height:normal!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
html body.web-index .webnavtit>a{
  display:flex!important;
  align-items:center!important;
  height:42px!important;
  line-height:42px!important;
  padding:0 15px!important;
  border-radius:999px!important;
  color:#1e293b!important;
  background:transparent!important;
  border:1px solid transparent!important;
  text-decoration:none!important;
  transition:all .18s ease!important;
}
html body.web-index .webnavtit>a h2{
  margin:0!important;
  padding:0!important;
  line-height:42px!important;
  color:inherit!important;
  font-size:15px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
html body.web-index .webnavtit>a:hover,
html body.web-index .webnavtit>a.hover{
  color:#0757d8!important;
  background:linear-gradient(135deg,rgba(22,119,255,.12),rgba(40,215,255,.12))!important;
  border-color:rgba(22,119,255,.16)!important;
}
html body.web-index .web_navcb{
  border:1px solid rgba(22,119,255,.14)!important;
  border-radius:18px!important;
  box-shadow:0 20px 50px rgba(15,37,84,.15)!important;
  overflow:hidden!important;
}
html body.web-index .web_navcb a:hover{background:linear-gradient(135deg,var(--noah-blue),var(--noah-cyan))!important;color:#fff!important;}
html body.web-index #ey_htmlid_1609665117,
html body.web-index .web-louser,
html body.web-index .web_serch{
  float:none!important;
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  margin:0!important;
}
html body.web-index .web-louser{gap:10px!important;padding:0!important;}
html body.web-index .web-louser li,
html body.web-index .web-louser li span{float:none!important;display:block!important;margin:0!important;}
html body.web-index .web-louser li span a{
  display:block!important;
  min-width:58px!important;
  height:40px!important;
  line-height:40px!important;
  padding:0 17px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,var(--noah-blue),var(--noah-cyan))!important;
  color:#fff!important;
  text-align:center!important;
  font-size:14px!important;
  font-weight:900!important;
  box-shadow:0 12px 28px rgba(22,119,255,.24)!important;
}
html body.web-index .web-louser li+li span a{
  background:#f1f5f9!important;
  color:#1e293b!important;
  box-shadow:none!important;
}
html body.web-index .web_serch form{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  width:220px!important;
  height:40px!important;
  margin:0!important;
  border:1px solid rgba(22,119,255,.16)!important;
  border-radius:999px!important;
  background:#fff!important;
  overflow:hidden!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)!important;
}
html body.web-index .web_serch .text1{
  flex:1!important;
  width:auto!important;
  height:40px!important;
  line-height:40px!important;
  padding:0 12px 0 18px!important;
  color:#64748b!important;
  background:transparent!important;
}
html body.web-index .web_serch .submit1{
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  margin:0 1px 0 0!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,var(--noah-blue),var(--noah-cyan))!important;
}
html body.web-index .wb-lang-switcher.noah-header-lang,
html body.web-index #wbLangSwitcher.noah-header-lang{
  position:static!important;
  flex:0 0 auto!important;
  display:flex!important;
  margin:0!important;
  padding:5px!important;
  border-radius:999px!important;
  border:1px solid rgba(22,119,255,.14)!important;
  background:#f8fbff!important;
  box-shadow:none!important;
  z-index:auto!important;
}
html body.web-index .wb-lang-switcher.noah-header-lang button{padding:8px 11px!important;color:#475569!important;}
html body.web-index .wb-lang-switcher.noah-header-lang button.is-active{background:linear-gradient(135deg,var(--noah-blue),var(--noah-cyan))!important;color:#fff!important;}

/* HOME 首页首屏：大轮播 + 右侧短头条面板 */
html body.web-index .web_main{
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:42px 0 72px!important;
  background:
    radial-gradient(circle at 14% 8%,rgba(40,215,255,.30),transparent 28%),
    radial-gradient(circle at 86% 5%,rgba(117,87,255,.24),transparent 30%),
    linear-gradient(180deg,var(--noah-navy) 0,var(--noah-navy2) 560px,#f6f9ff 560px,#f8fbff 100%)!important;
  overflow:hidden!important;
}
html body.web-index .web_main:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px)!important;
  background-size:46px 46px!important;
  pointer-events:none!important;
}
html body.web-index .web_ycbox{
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 330px!important;
  gap:24px!important;
  width:calc(100% - 64px)!important;
  max-width:1240px!important;
  min-height:430px!important;
  margin:0 auto 34px!important;
  padding:24px!important;
  border-radius:34px!important;
  background:rgba(255,255,255,.12)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 32px 84px rgba(2,8,23,.30)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
html body.web-index .web_zcbox,
html body.web-index .web_ycbox>.clear{display:none!important;}
html body.web-index .web_huand,
html body.web-index .web_ycdl{
  float:none!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:430px!important;
  margin:0!important;
  padding:0!important;
}
html body.web-index .web_huand{
  position:relative!important;
  overflow:hidden!important;
  border-radius:28px!important;
  background:#07152e!important;
  box-shadow:0 22px 60px rgba(2,8,23,.34)!important;
}
html body.web-index .web_banner,
html body.web-index .web_banner .swiper-wrapper,
html body.web-index .web_banner .swiper-slide,
html body.web-index .web_banner li,
html body.web-index .web_banner a{
  width:100%!important;
  height:100%!important;
  min-height:430px!important;
  border-radius:28px!important;
  overflow:hidden!important;
}
html body.web-index .web_banner{margin:0!important;background:#07152e!important;border:1px solid rgba(255,255,255,.18)!important;}
html body.web-index .web_banner img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;filter:saturate(1.08) contrast(1.04)!important;}
html body.web-index .web_ycdl{display:block!important;}
html body.web-index .web_tout{
  width:100%!important;
  height:430px!important;
  min-height:0!important;
  padding:20px!important;
  border-radius:28px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(239,247,255,.94))!important;
  border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:0 22px 60px rgba(2,8,23,.18)!important;
  overflow:hidden!important;
}
html body.web-index .wb-headline-title{
  display:flex!important;
  align-items:center!important;
  height:30px!important;
  margin:0 0 14px!important;
  color:#0f172a!important;
  font-size:21px!important;
  font-weight:950!important;
}
html body.web-index .wb-headline-title:before{
  content:""!important;
  display:inline-block!important;
  width:8px!important;
  height:22px!important;
  border-radius:999px!important;
  margin-right:10px!important;
  background:linear-gradient(180deg,var(--noah-blue),var(--noah-cyan))!important;
}
html body.web-index .wb-headline-grid,
html body.web-index .wb-headline-grid.noah-headline-ready{
  display:grid!important;
  grid-template-rows:164px repeat(3,66px)!important;
  gap:10px!important;
  height:356px!important;
  overflow:hidden!important;
}
html body.web-index .wb-headline-card{display:none!important;}
html body.web-index .wb-headline-card[data-noah-show="1"]{
  display:grid!important;
  grid-template-columns:82px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:center!important;
  min-height:66px!important;
  padding:9px!important;
  border-radius:18px!important;
  background:#fff!important;
  border:1px solid rgba(22,119,255,.12)!important;
  box-shadow:0 8px 24px rgba(15,37,84,.07)!important;
  color:#0f172a!important;
}
html body.web-index .wb-headline-card[data-noah-show="1"] img{
  width:82px!important;
  height:48px!important;
  object-fit:cover!important;
  border-radius:12px!important;
  background:#e8eef6!important;
}
html body.web-index .wb-headline-card[data-noah-show="1"] span{
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  color:#0f172a!important;
  line-height:1.38!important;
  font-size:13px!important;
  font-weight:850!important;
}
html body.web-index .wb-headline-card.noah-headline-feature[data-noah-show="1"]{
  position:relative!important;
  display:block!important;
  min-height:164px!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:22px!important;
  background:#07152e!important;
}
html body.web-index .wb-headline-card.noah-headline-feature[data-noah-show="1"]:after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(180deg,rgba(7,21,46,.08),rgba(7,21,46,.80))!important;
  pointer-events:none!important;
}
html body.web-index .wb-headline-card.noah-headline-feature[data-noah-show="1"] img{
  width:100%!important;
  height:100%!important;
  min-height:164px!important;
  border-radius:22px!important;
  object-fit:cover!important;
  display:block!important;
}
html body.web-index .wb-headline-card.noah-headline-feature[data-noah-show="1"] span{
  position:absolute!important;
  left:16px!important;
  right:16px!important;
  bottom:14px!important;
  z-index:2!important;
  color:#fff!important;
  font-size:15px!important;
  line-height:1.42!important;
  font-weight:950!important;
  text-shadow:0 4px 16px rgba(0,0,0,.35)!important;
}
html body.web-index .web_tout .advs-box,
html body.web-index .web_tout .cont1{display:none!important;}
html body.web-index .swiper-pagination-bullet-active{background:linear-gradient(135deg,var(--noah-blue),var(--noah-cyan))!important;}

/* 首页中间旧就业/公众号模块隐藏，突出课程内容 */
html body.web-index .web_hdxm{display:none!important;}

/* HOME 今日推荐：改成随机课程网格，避免两行重复 */
html body.web-index .web_jrtj,
html body.web-index .webtoday,
html body.web-index .wb-home-today{
  position:relative!important;
  z-index:2!important;
  width:calc(100% - 64px)!important;
  max-width:1240px!important;
  margin:0 auto!important;
  padding:28px 30px 34px!important;
  border-radius:30px!important;
  background:#fff!important;
  border:1px solid rgba(22,119,255,.10)!important;
  box-shadow:var(--noah-shadow)!important;
  overflow:hidden!important;
}
html body.web-index .webjrtit{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  height:auto!important;
  margin:0 0 22px!important;
  padding:0!important;
}
html body.web-index .webjrtit h2{
  position:relative!important;
  margin:0!important;
  padding-left:18px!important;
  color:#0f172a!important;
  font-size:26px!important;
  font-weight:950!important;
  line-height:1.2!important;
}
html body.web-index .webjrtit h2:before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:4px!important;
  width:8px!important;
  height:26px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,var(--noah-blue),var(--noah-cyan))!important;
}
html body.web-index .wb-today-more{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:116px!important;
  height:40px!important;
  padding:0 18px!important;
  border-radius:999px!important;
  background:#f1f6ff!important;
  border:1px solid rgba(22,119,255,.14)!important;
  color:#0757d8!important;
  font-weight:850!important;
}
html body.web-index .webtoday:not(.noah-today-ready) .swiper-wrapper>.swiper-slide:nth-of-type(n+2){display:none!important;}
html body.web-index .noah-today-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:22px!important;
}
html body.web-index .noah-today-card{
  display:block!important;
  overflow:hidden!important;
  border-radius:22px!important;
  background:#fff!important;
  border:1px solid rgba(22,119,255,.10)!important;
  box-shadow:0 16px 36px rgba(15,37,84,.08)!important;
  color:#0f172a!important;
  text-decoration:none!important;
  transition:transform .18s ease, box-shadow .18s ease!important;
}
html body.web-index .noah-today-card:hover{transform:translateY(-4px)!important;box-shadow:0 22px 48px rgba(15,37,84,.14)!important;}
html body.web-index .noah-today-thumb{
  display:block!important;
  width:100%!important;
  height:136px!important;
  object-fit:cover!important;
  background:#eaf0f8!important;
}
html body.web-index .noah-today-body{padding:14px!important;}
html body.web-index .noah-today-title{
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  min-height:40px!important;
  overflow:hidden!important;
  color:#0f172a!important;
  font-size:14px!important;
  line-height:1.45!important;
  font-weight:900!important;
}
html body.web-index .noah-today-price{
  margin-top:10px!important;
  color:#ff5a1f!important;
  font-size:14px!important;
  font-weight:950!important;
}
html body.web-index .webtoday.noah-today-ready .wb-today-feed,
html body.web-index .webtoday.noah-today-ready .wb-today-dynamic,
html body.web-index .webtoday.noah-today-ready .zsff_banner:not(.noah-keep-original){display:none!important;}

/* 右侧浮动导航：窄化、轻量，避免压住首页 */
html body.web-index .web_right{
  right:18px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:92px!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(22,119,255,.12)!important;
  box-shadow:0 18px 48px rgba(15,37,84,.12)!important;
  overflow:hidden!important;
}
html body.web-index .web_rightlb li a{height:42px!important;line-height:42px!important;color:#64748b!important;}
html body.web-index .web_rightlb li a:hover{background:linear-gradient(135deg,var(--noah-blue),var(--noah-cyan))!important;color:#fff!important;}

/* 弹窗品牌 */
html .wb-notice-popup-brand{color:var(--noah-blue)!important;font-weight:950!important;letter-spacing:.06em!important;}
html .wb-notice-popup-title{color:#0f172a!important;}
html .wb-notice-popup-close-text,
html .wb-notice-popup-close,
html .wb-notice-popup-bottom button{background:linear-gradient(135deg,var(--noah-blue),var(--noah-cyan))!important;color:#fff!important;border-radius:999px!important;}

@media (max-width:1180px){
  html body.web-index .headerlg{width:calc(100% - 32px)!important;gap:14px!important;}
  html body.web-index .web_serch form{width:180px!important;}
  html body.web-index .web_ycbox{grid-template-columns:1fr!important;width:calc(100% - 32px)!important;}
  html body.web-index .web_huand{min-height:390px!important;}
  html body.web-index .web_ycdl{min-height:0!important;}
  html body.web-index .web_tout{height:auto!important;min-height:360px!important;}
  html body.web-index .noah-today-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media (max-width:768px){
  html body.web-index .web_header{height:auto!important;position:relative!important;}
  html body.web-index .headerlg{height:auto!important;min-height:auto!important;flex-wrap:wrap!important;padding:14px 0!important;}
  html body.web-index .webnav{order:3!important;width:100%!important;overflow-x:auto!important;height:auto!important;padding-bottom:4px!important;}
  html body.web-index .web_ycbox{padding:14px!important;border-radius:24px!important;}
  html body.web-index .web_huand,html body.web-index .web_banner,html body.web-index .web_banner .swiper-wrapper,html body.web-index .web_banner .swiper-slide,html body.web-index .web_banner li,html body.web-index .web_banner a{min-height:250px!important;height:250px!important;}
  html body.web-index .web_jrtj,html body.web-index .webtoday,html body.web-index .wb-home-today{width:calc(100% - 24px)!important;padding:20px!important;}
  html body.web-index .noah-today-grid{grid-template-columns:1fr!important;}
  html body.web-index .web_right{display:none!important;}
}