/* Waterbear DETAIL top area UI repair V16
   Goal: white two-column card, no title/image/button overlap, only Buy + Favorite actions. */
html body.wb-view-page,
html body.wb-view-page.wb-detail-page-v18,
html body.wb-view-page.wb-detail-top-ui-v16{
  background:#f4f7fb!important;
  color:#0f172a!important;
}
html body.wb-view-page .top-yey-pc-gl{display:none!important;}
html body.wb-view-page .mianbaoxiao{
  max-width:1200px!important;
  width:calc(100% - 48px)!important;
  height:auto!important;
  margin:24px auto 12px!important;
  padding:0!important;
  background:transparent!important;
}
html body.wb-view-page .mianbao-min,
html body.wb-view-page .mianbao-min a{
  color:#7b8797!important;
  font-size:13px!important;
  line-height:24px!important;
}
html body.wb-view-page .course-head{
  background:transparent!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  min-height:0!important;
  border:0!important;
  box-shadow:none!important;
  clear:both!important;
}
/* Top product card */
html body.wb-view-page .course-head > .course-cover.container,
html body.wb-view-page.wb-detail-page-v18 .course-head > .course-cover.container,
html body.wb-view-page.wb-course-live-synced .course-head > .course-cover.container,
html body.wb-view-page.wb-detail-top-ui-v16 .course-head > .course-cover.container{
  box-sizing:border-box!important;
  max-width:1200px!important;
  width:calc(100% - 48px)!important;
  min-height:360px!important;
  margin:0 auto 24px!important;
  padding:28px!important;
  background:#fff!important;
  border:1px solid rgba(15,23,42,.08)!important;
  border-radius:24px!important;
  box-shadow:0 18px 48px rgba(15,23,42,.08)!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:48px!important;
  overflow:hidden!important;
  position:relative!important;
  clear:both!important;
  float:none!important;
  color:#0f172a!important;
}
html body.wb-view-page .course-head > .course-cover.container:before{
  content:""!important;
  position:absolute!important;
  right:-120px!important;
  top:-110px!important;
  width:360px!important;
  height:360px!important;
  background:radial-gradient(circle,rgba(20,184,166,.12),rgba(20,184,166,0) 65%)!important;
  pointer-events:none!important;
}
/* Thumbnail column */
html body.wb-view-page .course-head > .course-cover.container > .course-thum,
html body.wb-view-page.wb-detail-page-v18 .course-head > .course-cover.container > .course-thum{
  box-sizing:border-box!important;
  flex:0 0 520px!important;
  width:520px!important;
  max-width:520px!important;
  min-width:0!important;
  height:292px!important;
  min-height:292px!important;
  max-height:292px!important;
  margin:0!important;
  padding:0!important;
  float:none!important;
  clear:none!important;
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  overflow:hidden!important;
  border-radius:20px!important;
  background:#eef2f7!important;
  box-shadow:0 14px 32px rgba(15,23,42,.12)!important;
  z-index:1!important;
}
html body.wb-view-page .course-head > .course-cover.container > .course-thum img,
html body.wb-view-page .course-head > .course-cover.container > .course-thum .course-img-bg,
html body.wb-view-page .course-img-bg{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:20px!important;
  margin:0!important;
  padding:0!important;
  float:none!important;
  position:static!important;
  transform:none!important;
}
/* Text column */
html body.wb-view-page .course-head > .course-cover.container > .course-info,
html body.wb-view-page.wb-detail-page-v18 .course-head > .course-cover.container > .course-info{
  box-sizing:border-box!important;
  flex:1 1 auto!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  height:auto!important;
  min-height:292px!important;
  margin:0!important;
  padding:6px 4px!important;
  float:none!important;
  clear:none!important;
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  text-align:left!important;
  overflow:visible!important;
  z-index:1!important;
  color:#0f172a!important;
}
html body.wb-view-page .course-info h1,
html body.wb-view-page.wb-detail-page-v18 .course-info h1,
html body.wb-view-page.wb-course-live-synced .course-info h1{
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:0 0 18px!important;
  padding:0!important;
  color:#0f172a!important;
  background:transparent!important;
  font-size:28px!important;
  line-height:1.42!important;
  font-weight:850!important;
  letter-spacing:.01em!important;
  text-align:left!important;
  white-space:normal!important;
  word-break:break-word!important;
  overflow:visible!important;
  text-overflow:clip!important;
  -webkit-line-clamp:unset!important;
  -webkit-box-orient:initial!important;
  position:static!important;
  transform:none!important;
}
html body.wb-view-page .course-zj-djl{display:none!important;}
html body.wb-view-page .price,
html body.wb-view-page .price-mf,
html body.wb-view-page.wb-detail-page-v18 .price,
html body.wb-view-page.wb-detail-page-v18 .price-mf{
  box-sizing:border-box!important;
  list-style:none!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0 0 34px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#15a86a!important;
  font-size:30px!important;
  line-height:1.18!important;
  font-weight:850!important;
  text-align:left!important;
  float:none!important;
  clear:none!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  overflow:visible!important;
}
html body.wb-view-page .curr-price{
  color:#15a86a!important;
  font-size:30px!important;
  font-weight:850!important;
  line-height:1.18!important;
}
/* Actions: only Buy + Favorite, horizontal */
html body.wb-view-page .course-info .yey-list-jineuxuexi,
html body.wb-view-page .course-info .wb-detail-action-row{
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:14px!important;
  width:100%!important;
  min-height:50px!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
  position:static!important;
  inset:auto!important;
  float:none!important;
  clear:both!important;
  flex-wrap:nowrap!important;
  overflow:visible!important;
}
html body.wb-view-page .course-info .yey-list-jineuxuexi > a,
html body.wb-view-page .course-info .yey-list-jineuxuexi .vipxian,
html body.wb-view-page .course-info .yey-list-jineuxuexi .huiyuan-mf,
html body.wb-view-page #Xuexi20210201,
html body.wb-view-page #VipFreeLearn20210201{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html body.wb-view-page #BuyOnclick20210201,
html body.wb-view-page .course-info .yey-list-jineuxuexi > a#BuyOnclick20210201,
html body.wb-view-page .course-info .yey-list-jineuxuexi > a.wb-detail-main-buy{
  display:inline-flex!important;
  visibility:visible!important;
  pointer-events:auto!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  min-width:182px!important;
  width:auto!important;
  height:48px!important;
  line-height:48px!important;
  margin:0!important;
  padding:0 30px!important;
  border:0!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#ff7a18,#ff4f1f)!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:850!important;
  text-align:center!important;
  text-decoration:none!important;
  box-shadow:0 12px 28px rgba(255,105,24,.28)!important;
  float:none!important;
  position:static!important;
  transform:none!important;
  white-space:nowrap!important;
}
html body.wb-view-page #BuyOnclick20210201:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 16px 34px rgba(255,105,24,.34)!important;
}
html body.wb-view-page .wb-detail-collect-wrap,
html body.wb-view-page .course-info .yey-list-jineuxuexi .wb-detail-collect-wrap{
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  width:auto!important;
  height:48px!important;
  margin:0!important;
  padding:0!important;
  float:none!important;
  clear:none!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  overflow:visible!important;
}
html body.wb-view-page .wb-detail-collect-btn,
html body.wb-view-page .course-info .yey-list-jineuxuexi .wb-detail-collect-btn,
html body.wb-view-page .wb-detail-collect-wrap a{
  appearance:none!important;
  -webkit-appearance:none!important;
  display:inline-flex!important;
  visibility:visible!important;
  pointer-events:auto!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-width:136px!important;
  width:auto!important;
  height:48px!important;
  line-height:48px!important;
  margin:0!important;
  padding:0 22px!important;
  border:1px solid rgba(20,184,166,.45)!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#0f766e!important;
  font-size:15px!important;
  font-weight:850!important;
  text-align:center!important;
  text-decoration:none!important;
  box-shadow:0 8px 22px rgba(15,118,110,.12)!important;
  cursor:pointer!important;
  white-space:nowrap!important;
  float:none!important;
  position:static!important;
  transform:none!important;
}
html body.wb-view-page .wb-detail-collect-btn:hover,
html body.wb-view-page .wb-detail-collect-btn.is-collected{
  background:linear-gradient(135deg,#18c59f,#14a9e6)!important;
  border-color:transparent!important;
  color:#fff!important;
}
html body.wb-view-page .yey-kc-yxq{display:none!important;}
/* Detail/curriculum full width */
html body.wb-view-page .course-cover-2,
html body.wb-view-page.wb-detail-page-v18 .course-cover-2,
html body.wb-view-page.wb-course-live-synced .course-cover-2{
  box-sizing:border-box!important;
  max-width:1200px!important;
  width:calc(100% - 48px)!important;
  margin:0 auto 48px!important;
  padding:0!important;
  display:block!important;
  background:transparent!important;
  min-height:0!important;
  clear:both!important;
}
html body.wb-view-page .course-cover-fl,
html body.wb-view-page.wb-detail-page-v18 .course-cover-fl{
  width:100%!important;
  max-width:none!important;
  float:none!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html body.wb-view-page .course-cover-fr{display:none!important;}
html body.wb-view-page .aui-nav-content-box{
  background:#fff!important;
  border:1px solid rgba(15,23,42,.08)!important;
  border-radius:22px!important;
  box-shadow:0 18px 48px rgba(15,23,42,.06)!important;
  overflow:hidden!important;
  min-height:260px!important;
}
html body.wb-view-page .aui-nav-list-box{
  height:auto!important;
  background:#fff!important;
  border-bottom:1px solid rgba(15,23,42,.08)!important;
}
html body.wb-view-page .aui-nav-list-box ul{
  display:flex!important;
  align-items:center!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
html body.wb-view-page .aui-nav-list-box li{
  float:none!important;
  position:relative!important;
  min-width:150px!important;
  height:60px!important;
  line-height:60px!important;
  margin:0!important;
  padding:0 26px!important;
  border-right:1px solid rgba(15,23,42,.06)!important;
  color:#344054!important;
  font-size:16px!important;
  font-weight:850!important;
  text-align:center!important;
  cursor:pointer!important;
  background:#fff!important;
}
html body.wb-view-page .aui-nav-list-box li.aui-current{
  color:#ff5a1f!important;
  background:linear-gradient(180deg,#fff,#fff7f3)!important;
}
html body.wb-view-page .aui-nav-list-box li.aui-current:after{
  content:""!important;
  position:absolute!important;
  left:24px!important;
  right:24px!important;
  bottom:0!important;
  height:3px!important;
  border-radius:999px!important;
  background:#ff5a1f!important;
}
html body.wb-view-page .aui-nav-list-tab{padding:0!important;margin:0!important;}
html body.wb-view-page .aui-nav-list-item{
  box-sizing:border-box!important;
  padding:28px 30px 38px!important;
  min-height:180px!important;
  background:#fff!important;
}
html body.wb-view-page .yey-kc-jianjie{
  color:#334155!important;
  font-size:16px!important;
  line-height:1.9!important;
  word-break:break-word!important;
}
html body.wb-view-page .yey-kc-jianjie p{margin:0 0 14px!important;}
html body.wb-view-page .task-task-list{margin:0 0 14px!important;padding:0!important;}
html body.wb-view-page .task-task-item{
  display:block!important;
  margin:0!important;
  padding:0!important;
  background:#fff!important;
  border:1px solid rgba(15,23,42,.08)!important;
  border-radius:18px!important;
  box-shadow:0 10px 26px rgba(15,23,42,.04)!important;
  overflow:hidden!important;
  text-decoration:none!important;
}
html body.wb-view-page .task-tt{
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  min-height:64px!important;
  padding:18px 20px!important;
  overflow:visible!important;
}
html body.wb-view-page .task-tt-text,
html body.wb-view-page .task-tt-text-fr{
  float:none!important;
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  color:#344054!important;
  font-size:14px!important;
  line-height:1.5!important;
}
html body.wb-view-page .task-tt-text{gap:10px!important;font-weight:850!important;}
html body.wb-view-page .task-tt-text-fr{justify-content:flex-end!important;gap:16px!important;color:#64748b!important;white-space:nowrap!important;}
html body.wb-view-page .yey-ks{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:64px!important;
  height:30px!important;
  padding:0 13px!important;
  border-radius:999px!important;
  background:#eafaf2!important;
  color:#12a163!important;
  font-size:13px!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
html body.wb-view-page .ke-fufei,
html body.wb-view-page .keshikan{font-style:normal!important;color:#ff3b1f!important;font-weight:850!important;}
html body.wb-view-page .ke-shijian{color:#64748b!important;font-weight:800!important;font-variant-numeric:tabular-nums!important;}
@media(max-width:1080px){
  html body.wb-view-page .course-head > .course-cover.container{
    gap:28px!important;
  }
  html body.wb-view-page .course-head > .course-cover.container > .course-thum{
    flex-basis:46%!important;
    width:46%!important;
  }
}
@media(max-width:760px){
  html body.wb-view-page .mianbaoxiao,
  html body.wb-view-page .course-head > .course-cover.container,
  html body.wb-view-page .course-cover-2{width:calc(100% - 24px)!important;}
  html body.wb-view-page .course-head > .course-cover.container{
    flex-direction:column!important;
    align-items:stretch!important;
    gap:20px!important;
    padding:18px!important;
  }
  html body.wb-view-page .course-head > .course-cover.container > .course-thum{
    flex:0 0 auto!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
  html body.wb-view-page .course-head > .course-cover.container > .course-thum img,
  html body.wb-view-page .course-head > .course-cover.container > .course-thum .course-img-bg{height:auto!important;min-height:0!important;}
  html body.wb-view-page .course-info h1{font-size:22px!important;}
  html body.wb-view-page .price,html body.wb-view-page .price-mf,html body.wb-view-page .curr-price{font-size:26px!important;}
  html body.wb-view-page .course-info .yey-list-jineuxuexi{flex-wrap:wrap!important;}
  html body.wb-view-page #BuyOnclick20210201{min-width:150px!important;}
  html body.wb-view-page .wb-detail-collect-btn{min-width:124px!important;}
}