* {
  box-sizing: border-box
}

html {
  background: #b90000
}

body {
  margin: 0;
  min-width: 320px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif
}

button {
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent
}

button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px
}

.shell {
  width: min(100%, 540px);
  margin: auto;
  container-type: inline-size;
  box-shadow: 0 0 28px rgb(76 0 0 / 20%)
}

.page {
  overflow: hidden;
  min-height: 100vh;
  padding-bottom: 7cqw;
  background: #bf0000
}

.hero {
  position: relative;
  height: 148cqw;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 72%, #ffb341 0, #f95c21 35%, #d5110a 68%, #bd0000 100%)
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 43cqw;
  background: linear-gradient(150deg, transparent 20%, rgb(255 118 83 / 17%) 30%, transparent 39%)
}

.brand {
  position: absolute;
  z-index: 2;
  top: 4.7cqw;
  left: 4.4cqw;
  width: 38cqw;
  height: auto
}

.share-entry {
  position: absolute;
  z-index: 3;
  top: 7.2cqw;
  right: 7.7cqw;
  width: 8.4cqw;
  height: 8.1cqw;
  padding: 0;
  border: 0;
  background: none
}

.share-entry img {
  display: block;
  width: 100%;
  height: 100%
}

.hero-copy {
  position: absolute;
  z-index: 2;
  top: 17.2cqw;
  width: 100%;
  text-align: center;
  color: #fff;
  text-shadow: 0 .65cqw .5cqw #a00b00
}

.year {
  font-size: 13.7cqw;
  font-weight: 900;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -.8cqw
}

.hero h1 {
  margin: 2cqw 0 0;
  font-size: 11.4cqw;
  font-weight: 900;
  font-style: italic;
  line-height: 1.15;
  letter-spacing: -.3cqw;
  white-space: nowrap
}

.hero-copy p {
  margin: 3.3cqw 0 0;
  color: #fff6d2;
  font-size: 5.2cqw;
  font-weight: 800;
  text-shadow: 0 .5cqw .2cqw #c21a09
}

.hero-copy p span {
  color: #fff6a8;
  font-size: 7.8cqw
}

.hero-books {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 80.6cqw;
  object-fit: cover
}

.framed {
  position: relative;
  margin: 3.1cqw 2.9cqw 0;
  border: .45cqw solid #f9a55e;
  border-radius: 3.7cqw;
  background: linear-gradient(140deg, #d01608, #ff3e17 55%, #d71b0a);
  box-shadow: inset 0 0 0 .5cqw #e04622, inset 0 0 0 .9cqw rgb(255 226 172 / 28%)
}

.gold-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 8.8cqw;
  padding: 0 3cqw;
  border: 0;
  border-radius: 8cqw;
  background: linear-gradient(#fff8db 5%, #ffe1a1 52%, #ffb54f 100%);
  color: #d10000;
  font-size: 4.2cqw;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 .7cqw .6cqw rgb(105 14 0 / 32%)
}

.red-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 7.8cqw;
  padding: 0 2.9cqw;
  border: 0;
  border-radius: 8cqw;
  background: linear-gradient(#ff5217, #ed1c00);
  color: #fff;
  font-size: 3.8cqw;
  font-weight: 800;
  white-space: nowrap
}

.offer {
  height: 34cqw;
  margin-top: -2.4cqw;
  text-align: center;
  background: linear-gradient(#d01708, #e62210)
}

.offer-button {
  position: relative;
  top: -5.5cqw;
  min-width: 41cqw;
  min-height: 10.5cqw;
  font-size: 5.5cqw
}

.offer p {
  margin: -1.2cqw 2cqw 0;
  color: #fff;
  font-size: 3.4cqw;
  font-weight: 700;
  line-height: 1.6
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.3cqw;
  margin: 0;
  color: #fff7da;
  font-size: 5.4cqw;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 .5cqw .3cqw #a71800;
  white-space: nowrap
}

.section-title::before,
.section-title::after {
  content: "";
  width: 18cqw;
  height: .55cqw;
  background: linear-gradient(90deg, transparent, #fff2c9)
}

.section-title::after {
  transform: rotate(180deg)
}

.selection {
  height: 98cqw;
  margin-top: 7cqw;
  padding: 7cqw 3.1cqw 4cqw
}

.selection-card {
  position: relative;
  height: 54cqw;
  margin: 7.1cqw 0 0;
  overflow: hidden;
  border-radius: 2.3cqw;
  background: #fff6e2
}

.selection-card::after {
  content: "";
  position: absolute;
  right: 2cqw;
  bottom: .7cqw;
  width: 28cqw;
  height: 3cqw;
  background: radial-gradient(ellipse, rgb(95 71 55 / 28%), transparent 72%);
}

.selection-fields {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.1cqw;
  width: 88%;
  padding: 6.8cqw 0 0 10.3cqw
}

.selection-row {
  display: grid;
  grid-template-columns: 22cqw 1fr;
  align-items: center;
  color: #191919;
  font-size: 3.8cqw;
  font-weight: 700;
  white-space: nowrap
}

.fake-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 7.4cqw;
  padding: 0 2.5cqw;
  border-radius: 5cqw;
  background: #ffdb98;
  font-size: 3.1cqw
}

.fake-select i {
  color: #776045;
  font-size: 2.5cqw;
  font-style: normal
}

.mascot {
  position: absolute;
  z-index: 2;
  right: 1.5cqw;
  bottom: 1cqw;
  width: 24cqw;
  height: auto
}

.selection-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 7cqw
}

.selection-actions button {
  min-height: 8.8cqw
}

.selection-actions .gold-button {
  width: 128px;
  width: 34cqw;
  font-size: 5.2cqw;
  text-decoration: none;
}

/* 微信内默认仍显示普通按钮兜底；开放标签触发 ready（可点击）后由 JS 给
   html 加 .is-weapp-ready 再切换为小程序按钮。这样标签渲染失败（签名错误、
   低版本微信、iframe 嵌入等）时按钮不会消失 */
.not-wechat #selection-launch,
.is-wechat #selection-launch {
  display: none;
}

.is-wechat.is-weapp-ready #selection-entry {
  display: none;
}

.is-wechat.is-weapp-ready #selection-launch {
  display: block;
}

.selection-launch {
  display: block;
  width: 128px;
  height: 44px;
  width: 34cqw;
  height: 8.8cqw;
}

.disabled-button {
  border: 0;
  border-radius: 8cqw;
  background: linear-gradient(#fff, #b9b9b9);
  color: #666;
  font-size: 4.2cqw;
  font-weight: 900;
  box-shadow: 0 .7cqw .5cqw rgb(83 18 0 / 35%);
  cursor: not-allowed
}

.quiz {
  height: 42.8cqw;
  margin-top: 7cqw;
  padding: 2cqw
}

.quiz-inner {
  position: relative;
  height: 100%;
  border-radius: 2.7cqw;
  background: repeating-linear-gradient(-20deg, transparent 0 2cqw, rgb(222 153 72 / 7%) 2.1cqw 2.3cqw), linear-gradient(110deg, #fff8e5, #ffdfad)
}

.quiz-phone {
  position: absolute;
  top: -2.8cqw;
  right: -5.5cqw;
  width: 43.1cqw;
  height: auto;
}

.quiz-copy {
  position: relative;
  z-index: 2;
  padding: 4.7cqw 0 0 3.8cqw
}

.quiz h2 {
  margin: 0;
  color: #f04408;
  font-size: 4.7cqw;
  font-weight: 900
}

.quiz p {
  margin: 1cqw 0 2.3cqw;
  color: #171717;
  font-size: 3.4cqw;
  font-weight: 800;
  line-height: 1.4
}

.quiz .red-button {
  min-height: 8cqw
}

.camp {
  margin-top: 4.5cqw;
  padding: 7cqw 3cqw 5cqw
}

.course-list {
  display: grid;
  gap: 2.3cqw;
  margin-top: 6.3cqw
}

.course-card {
  position: relative;
  height: 34cqw;
  padding: 3cqw 4.3cqw;
  overflow: hidden;
  border-radius: 2.8cqw;
  background: #fff;
  color: #242424
}

.course-card h3 {
  margin: 0;
  overflow: hidden;
  font-size: 3.7cqw;
  font-weight: 900;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap
}

.course-bottom {
  position: absolute;
  right: 3.7cqw;
  bottom: 2.7cqw;
  left: 4.3cqw;
  display: flex;
  align-items: end;
  gap: 2cqw;
  min-height: 10cqw
}

.provider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5cqw;
  color: #999;
  font-size: 2.5cqw
}

.price {
  margin-bottom: .2cqw;
  color: #ff5659;
  font-size: 4.4cqw;
  font-weight: 700;
  white-space: nowrap
}

.price small {
  font-size: 2.9cqw
}

.course-bottom .red-button {
  min-height: 7.8cqw;
  margin-left: auto;
  align-self: center
}

.more-button {
  display: flex;
  min-width: 46cqw;
  margin: 4.7cqw auto 0
}

.forward {
  height: 45cqw;
  margin-top: 7cqw;
  padding: 2cqw
}

.forward-inner {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 2.7cqw;
  background: #fff
}

.forward-copy {
  position: relative;
  z-index: 1;
  padding: 4cqw 0 0 3.8cqw
}

.forward h2 {
  margin: 0;
  color: #ec4407;
  font-size: 4.9cqw;
  font-weight: 900
}

.forward p {
  margin: 1.2cqw 0 2.2cqw;
  color: #111;
  font-size: 3cqw;
  font-weight: 700;
  line-height: 1.5
}

.forward p strong {
  color: #e31d00
}

.forward-actions {
  display: flex;
  gap: 1.2cqw
}

.forward-actions .red-button {
  min-height: 6.4cqw;
  padding: 0 2cqw;
  font-size: 3cqw
}

.gold-papers {
  position: absolute;
  right: 1.5cqw;
  top: 2.2cqw;
  width: 34cqw;
  height: auto;
  transform: rotate(5deg)
}

.rules {
  margin-top: 7cqw;
  padding: 2cqw
}

.rules-inner {
  padding: 5cqw 4cqw 6cqw;
  border-radius: 2.8cqw;
  background: #fff6e3
}

.rules h2 {
  margin: 0 0 3.2cqw;
  color: #d50000;
  font-size: 4.7cqw;
  font-weight: 900
}

.rules ol {
  margin: 0;
  padding-left: 4.2cqw;
  color: #212121;
  font-size: 2.9cqw;
  line-height: 1.85
}

.dialog {
  width: min(calc(100% - 32px), 380px);
  padding: 0;
  border: 0;
  border-radius: 20px;
  color: #3b2418;
  box-shadow: 0 14px 48px rgb(0 0 0 / 30%)
}

.dialog::backdrop {
  background: rgb(0 0 0 / 55%)
}

.dialog-body {
  position: relative;
  padding: 30px 24px 24px;
  text-align: center;
  background: #fff8eb
}

.dialog h2 {
  margin: 8px 0 10px;
  color: #d61908;
  font-size: 22px
}

.dialog p {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6
}

.dialog-icon {
  font-size: 40px;
  color: #e02a13
}

.close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  color: #8d6d60;
  font-size: 30px;
  line-height: 1
}

.primary {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 24px;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(#ff5a1f, #e31900)
}

.app-download {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  text-decoration: none
}

.app-download[hidden] {
  display: none
}

.selection-qr-img {
  display: block;
  width: 220px;
  max-width: 72%;
  margin: 6px auto 0;
  border-radius: 12px;
  background: #fff
}

.selection-qr-img[hidden] {
  display: none
}

.selection-qr-hint {
  margin: 6px 0 0;
  color: #b4392a;
  font-size: 14px;
  font-weight: 600
}

.wechat-guide {
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: rgb(0 0 0 / 78%);
  color: #fff;
  text-align: center
}

.wechat-guide[hidden] {
  display: none
}

.wechat-guide-content {
  position: absolute;
  top: max(6px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  width: min(290px, calc(100vw - 36px));
  padding-top: 100px
}

.wechat-guide-arrow {
  position: absolute;
  top: 0;
  right: 0;
  width: 88px;
  height: 105px
}

.wechat-guide p {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.8;
  text-shadow: 0 1px 3px rgb(0 0 0 / 30%)
}

.wechat-guide strong {
  padding: 0 4px;
  letter-spacing: 3px
}

.wechat-guide button {
  margin-top: 24px;
  padding: 9px 30px;
  border: 1px solid rgb(255 255 255 / 85%);
  border-radius: 24px;
  background: transparent;
  color: #fff;
  font-size: 15px
}

.toast {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: max(30px, env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(16px);
  max-width: calc(100% - 40px);
  padding: 10px 18px;
  border-radius: 24px;
  background: rgb(34 25 22 / 88%);
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0)
}

.hero {
  background: radial-gradient(ellipse at 50% 73%, #ffb341 0, #fa6426 36%, #d5110a 68%, #bd0000 100%)
}

.hero-books {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%);
  mask-image: linear-gradient(to bottom, transparent, #000 15%)
}

.provider img {
  width: 5.8cqw;
  height: 5.8cqw;
  border-radius: 50%;
}

.provider {
  flex: 0 1 15cqw;
  min-width: 0;
}

.provider span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price--long {
  font-size: 3.5cqw;
}

.course-status {
  display: grid;
  place-items: center;
  min-height: 34cqw;
  margin: 0;
  border-radius: 2.8cqw;
  background: #fff;
  color: #777;
  font-size: 3.2cqw;
}

.course-retry {
  justify-self: center;
  padding: 1.5cqw 4cqw;
  border: 0;
  border-radius: 5cqw;
  background: #e93613;
  color: #fff;
  font-size: 3cqw;
}

.course-card .red-button {
  text-decoration: none;
}

.consult-float {
  position: fixed;
  z-index: 20;
  right: max(0px, calc((100% - 540px) / 2));
  bottom: calc(23vh + env(safe-area-inset-bottom));
  width: clamp(70px, 18vw, 96px);
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  filter: drop-shadow(0 4px 8px rgb(105 9 0 / 25%));
}

.consult-float img {
  display: block;
  width: 100%;
  height: auto;
}