:root {
  --site-ink: #1c2c27;
  --site-muted: #68756e;
  --site-cream: #ffffff;
  --site-paper: #ffffff;
  --site-green: #145a43;
  --site-green-deep: #073b2b;
  --site-rust: #b96546;
  --site-line: rgba(28, 44, 39, 0.14);
  --site-shadow: 0 24px 70px rgba(28, 44, 39, 0.12);
  --site-max: 1180px;
}

html,
body {
  min-width: 320px;
  background: var(--site-cream) !important;
  color: var(--site-ink);
  font-family: "Avenir Next", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  user-select: text;
}

body {
  overflow-x: hidden;
}

#app,
uni-app,
uni-page,
uni-page-wrapper,
uni-page-body {
  height: auto !important;
  min-height: 0 !important;
}

#app {
  padding-top: 76px;
}

uni-page-head {
  display: none !important;
}

uni-tabbar {
  display: none !important;
}

.site-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  height: 84px;
  border-bottom: 1px solid rgba(194, 161, 91, 0.42);
  background:
    linear-gradient(112deg, rgba(5, 54, 39, 0.98), rgba(8, 67, 47, 0.97) 54%, rgba(4, 45, 32, 0.98)),
    var(--site-green-deep);
  color: #fff;
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 24px rgba(3, 35, 25, 0.16);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  width: min(calc(100% - 64px), var(--site-max));
  height: 100%;
  margin: 0 auto;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}

.site-brand img {
  width: 132px;
  height: 44px;
  object-fit: contain;
  border-radius: 0;
}

.site-brand span {
  display: grid;
  gap: 3px;
}

.site-brand strong {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.site-brand small {
  color: rgba(225, 196, 129, 0.72);
  font-size: 9px;
  letter-spacing: 0.12em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-left: auto;
}

.site-nav a,
.site-header__cta {
  position: relative;
  color: rgba(255, 255, 255, 0.66);
  font-size: 13px;
  text-decoration: none;
  transition: color 180ms ease;
}

.site-nav a::after {
  position: absolute;
  right: 0;
  bottom: -9px;
  left: 0;
  height: 2px;
  background: #c6a15b;
  content: "";
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.site-nav a:hover,
.site-nav a.is-active,
.site-header__cta:hover {
  color: #fff;
}

.site-nav a.is-active::after {
  transform: scaleX(1);
}

.site-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid rgba(205, 172, 101, 0.66);
  border-radius: 2px;
  color: #fff;
  background: rgba(196, 160, 87, 0.08);
}

.site-header__cta span,
.site-mobile-menu a span {
  color: #c6a15b;
}

.site-menu-button,
.site-mobile-menu {
  display: none;
}

.site-footer {
  padding: 42px 32px;
  background: var(--site-green-deep);
  color: rgba(255, 255, 255, 0.74);
}

.site-footer__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  width: min(100%, var(--site-max));
  margin: 0 auto;
}

.site-footer__inner > div:first-child {
  display: grid;
  gap: 8px;
}

.site-footer strong {
  color: #fff;
  font-size: 18px;
  letter-spacing: 0.12em;
}

.site-footer span {
  font-size: 12px;
}

.site-footer__meta {
  display: grid;
  gap: 7px;
  text-align: right;
}

.page-shell,
.home-ui2,
.course-ui2,
.profile-ui2,
.training-page {
  min-height: 0 !important;
  background: var(--site-cream) !important;
  background-image: none !important;
}

.app-page-shell--tab,
.tab-page-shell {
  padding-bottom: 0 !important;
}

.immersive-hero {
  min-height: 690px !important;
  border-radius: 0 !important;
}

.immersive-hero__inner {
  width: min(100% - 80px, var(--site-max)) !important;
  margin: 0 auto !important;
  padding: 66px 0 52px !important;
}

.immersive-hero__brand-row {
  display: none !important;
}

.immersive-hero__copy {
  max-width: 620px !important;
  margin-top: 170px !important;
}

.immersive-hero__title {
  max-width: 700px !important;
  font-size: clamp(46px, 5.3vw, 78px) !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
}

.immersive-hero__subtitle {
  max-width: 500px !important;
  margin-top: 28px !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
}

.immersive-hero__actions {
  margin-top: 34px !important;
}

.immersive-hero__proof {
  right: max(40px, calc((100vw - var(--site-max)) / 2)) !important;
  bottom: 44px !important;
  left: max(40px, calc((100vw - var(--site-max)) / 2)) !important;
  padding-top: 22px !important;
}

.home-ui2__content > *,
.home-ui2 > section {
  width: min(calc(100% - 80px), var(--site-max));
  margin-right: auto !important;
  margin-left: auto !important;
}

.home-ui2__recommendation {
  width: min(calc(100% - 80px), var(--site-max)) !important;
  margin: -28px auto 0 !important;
}

.academy-principles,
.plan-spectrum,
.editorial-courses,
.faculty-section,
.stories-section,
.goal-plan,
.home-closing {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.academy-principles {
  margin-top: 0 !important;
  padding-top: 74px !important;
  padding-bottom: 74px !important;
}

.plan-spectrum {
  padding-top: 24px !important;
  padding-bottom: 82px !important;
}

.plan-spectrum__track {
  gap: 18px !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  animation: none !important;
}

.plan-glimpse {
  width: 250px !important;
  min-height: 250px !important;
  padding: 24px !important;
  border-radius: 2px !important;
}

.editorial-courses {
  padding-top: 80px !important;
  padding-bottom: 86px !important;
}

.featured-course {
  width: 100% !important;
  margin-top: 28px !important;
  border-radius: 2px !important;
  box-shadow: var(--site-shadow) !important;
}

.course-rail__track {
  gap: 16px !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  animation: none !important;
}

.course-story {
  width: 230px !important;
  border-radius: 2px !important;
}

.faculty-section {
  padding-top: 78px !important;
  padding-bottom: 88px !important;
}

.faculty-section__layout {
  gap: 24px !important;
  margin-top: 32px !important;
}

.faculty-card {
  border-radius: 2px !important;
}

.teaching-story {
  width: 100% !important;
  padding-top: 84px !important;
  padding-bottom: 92px !important;
}

.teaching-story__copy,
.teaching-story__layout {
  width: min(calc(100% - 80px), var(--site-max));
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.teaching-story__title {
  max-width: 720px !important;
  font-size: 36px !important;
}

.teaching-story__layout {
  gap: 24px !important;
  margin-top: 32px !important;
}

.teaching-story__main {
  height: 470px !important;
  border-radius: 2px !important;
}

.home-closing {
  padding-top: 26px !important;
  padding-bottom: 74px !important;
}

.home-closing__panel {
  padding: 54px !important;
  border-radius: 2px !important;
}

.course-hero {
  min-height: 380px !important;
  padding: 92px max(40px, calc((100vw - var(--site-max)) / 2)) 56px !important;
}

.course-hero__title {
  max-width: 780px !important;
  font-size: clamp(42px, 5vw, 70px) !important;
  line-height: 1.06 !important;
}

.course-hero__desc {
  max-width: 560px !important;
  margin-top: 22px !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

.course-search {
  max-width: 530px !important;
  margin-top: 30px !important;
}

.course-tabs {
  width: min(calc(100% - 80px), var(--site-max)) !important;
  margin: 0 auto !important;
  background: transparent !important;
}

.course-tabs__track {
  gap: 24px !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.course-feature,
.course-editorial,
.course-path {
  width: min(calc(100% - 80px), var(--site-max)) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.course-feature {
  height: 500px !important;
  margin-top: 42px !important;
  border-radius: 2px !important;
}

.course-editorial {
  padding-top: 76px !important;
  padding-bottom: 80px !important;
}

.course-editorial__list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px !important;
  margin-top: 30px !important;
}

.course-editorial__list .item {
  min-height: 360px;
  padding: 0 0 20px !important;
  border-radius: 2px !important;
  background: var(--site-paper) !important;
}

.course-editorial__list .item__image {
  height: 220px !important;
}

.course-editorial__list .item__content {
  padding: 18px !important;
}

.course-path {
  margin-bottom: 76px !important;
  padding: 36px !important;
  border-radius: 2px !important;
}

.training-page,
.registration,
.confirm,
.payment,
.pay-result,
.consultations,
.detail,
.certificate-page,
.account-page,
.orders {
  width: min(calc(100% - 80px), 960px) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.training-head,
.registration-head,
.confirm-head,
.payment-head {
  margin: 0 calc((960px - min(100vw - 96px, 960px)) / -2) !important;
  padding: 88px max(48px, calc((100vw - var(--site-max)) / 2)) 48px !important;
}

.profile-ocean {
  width: 100vw !important;
  margin-left: calc((min(100vw, var(--site-max)) - 100vw) / 2) !important;
  padding-right: max(48px, calc((100vw - var(--site-max)) / 2)) !important;
  padding-left: max(48px, calc((100vw - var(--site-max)) / 2)) !important;
}

.profile-ocean,
.member-glass,
.service-main,
.service-mid,
.next-action,
.rules,
.registration-body,
.confirm-body,
.payment-body {
  border-radius: 2px !important;
}

.immersive-hero__color {
  background: rgba(18, 56, 45, 0.74) !important;
}

@media (min-width: 800px) {
  uni-page-body {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
}

@media (max-width: 799px) {
  #app {
    padding-top: 68px;
  }

  .site-header {
    height: 68px;
  }

  .site-header__inner {
    width: calc(100% - 32px);
  }

  .site-brand img {
    width: 124px;
    height: 40px;
  }

  .site-brand strong {
    font-size: 15px;
  }

  .site-brand small {
    font-size: 7px;
  }

  .site-nav,
  .site-header__cta {
    display: none;
  }

  .site-menu-button {
    display: grid;
    place-content: center;
    gap: 6px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 2px;
    background: transparent;
    color: #fff;
  }

  .site-menu-button span {
    display: block;
    width: 17px;
    height: 1px;
    background: #fff;
    transition: transform 180ms ease;
  }

  .site-header.is-open .site-menu-button span:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }

  .site-header.is-open .site-menu-button span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }

  .site-mobile-menu {
    position: fixed;
    top: 64px;
    right: 0;
    left: 0;
    display: block;
    padding: 20px 16px 24px;
    border-bottom: 1px solid var(--site-line);
    background: var(--site-paper);
    box-shadow: 0 18px 34px rgba(28, 44, 39, 0.14);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .site-header.is-open .site-mobile-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .site-mobile-menu__links {
    display: grid;
  }

  .site-mobile-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 2px;
    border-bottom: 1px solid var(--site-line);
    color: var(--site-ink);
    font-size: 15px;
    text-decoration: none;
  }

  .site-mobile-menu a.is-active {
    color: var(--site-rust);
  }

  .site-mobile-menu__cta {
    margin-top: 14px;
    padding: 14px 16px !important;
    border: 0 !important;
    background: var(--site-green);
    color: #fff !important;
  }

  .site-footer {
    padding: 32px 20px;
  }

  .site-footer__inner {
    display: grid;
    gap: 22px;
  }

  .site-footer__meta {
    text-align: left;
  }

  .immersive-hero__inner,
  .teaching-story__copy,
  .teaching-story__layout,
  .home-ui2__content > *,
  .home-ui2 > section,
  .course-tabs,
  .course-feature,
  .course-editorial,
  .course-path {
    width: calc(100% - 32px) !important;
  }

  .immersive-hero {
    min-height: 650px !important;
  }

  .immersive-hero__inner {
    padding-top: 28px !important;
  }

  .immersive-hero__copy {
    margin-top: 138px !important;
  }

  .immersive-hero__title {
    font-size: 42px !important;
  }

  .immersive-hero__subtitle {
    font-size: 15px !important;
  }

  .immersive-hero__proof {
    right: 16px !important;
    bottom: 26px !important;
    left: 16px !important;
  }

  .course-hero {
    min-height: 360px !important;
    padding: 64px 16px 42px !important;
  }

  .course-hero__title {
    font-size: 42px !important;
  }

  .course-editorial__list {
    grid-template-columns: 1fr !important;
  }

  .course-feature {
    height: 410px !important;
  }

  .training-head,
  .registration-head,
  .confirm-head,
  .payment-head {
    margin: 0 -16px !important;
    padding: 64px 16px 36px !important;
  }

  .training-page,
  .registration,
  .confirm,
  .payment,
  .pay-result,
  .consultations,
  .detail,
  .certificate-page,
  .account-page,
  .orders {
    width: calc(100% - 32px) !important;
  }
}