*{box-sizing:border-box}
html,body{margin:0;background:#07132d;font-family:"Microsoft YaHei",Arial,sans-serif;color:#fff}
body{display:flex;justify-content:center}
.phone{width:430px;min-height:932px;margin:0 auto;background:linear-gradient(#020817,#03122b 60%,#020817);overflow:hidden}

.hero{
  position:relative;
  height:425px;
  padding:18px 18px 0;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 78%,rgba(28,86,255,.20) 0%,rgba(20,53,145,.10) 35%,transparent 66%),
    radial-gradient(circle at 50% 42%,rgba(75,51,255,.12),transparent 37%),
    linear-gradient(180deg,#020819 0%,#03112d 57%,#020b20 100%);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.75;
  background:
    radial-gradient(circle at 7% 33%,#77caff 0 1px,transparent 1.8px),
    radial-gradient(circle at 15% 71%,#7b5cff 0 1.2px,transparent 2px),
    radial-gradient(circle at 23% 52%,#ffffff 0 1px,transparent 1.8px),
    radial-gradient(circle at 78% 40%,#5ccaff 0 1.2px,transparent 2px),
    radial-gradient(circle at 91% 65%,#9d6cff 0 1px,transparent 1.8px),
    radial-gradient(circle at 86% 26%,#ffffff 0 1px,transparent 1.7px);
}
.grid{
  position:absolute;
  inset:0;
  opacity:.07;
  background-image:
    linear-gradient(rgba(71,132,255,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(71,132,255,.16) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(#000,transparent 88%);
}
.logo{
  position:relative;
  z-index:10;
  font-size:18px;
  font-weight:800;
  letter-spacing:1px;
  color:#f5f9ff;
}
.logo:before{
  content:'DZ';
  display:inline-grid;
  place-items:center;
  width:31px;
  height:24px;
  margin-right:7px;
  border-radius:5px;
  background:linear-gradient(135deg,#2c9dff,#6452ff);
  box-shadow:0 0 12px rgba(50,126,255,.35);
  font-size:12px;
}
.title{
  position:relative;
  z-index:10;
  margin-top:24px;
  text-align:center;
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
  font-size:54px;
  font-weight:1000;
  font-style:italic;
  line-height:1.01;
  letter-spacing:-3.4px;
  transform:scaleX(1.02);
  color:transparent;
  background:
    linear-gradient(180deg,
      #ffffff 0%,
      #ffffff 20%,
      #ddecff 38%,
      #8fc4ff 58%,
      #6c8fff 72%,
      #8f6bff 87%,
      #c8a9ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-stroke:.7px rgba(245,250,255,.95);
  filter:
    drop-shadow(0 2px 0 rgba(132,190,255,.85))
    drop-shadow(0 5px 0 rgba(54,79,184,.90))
    drop-shadow(0 8px 0 rgba(61,35,148,.55))
    drop-shadow(0 0 8px rgba(59,139,255,.32))
    drop-shadow(0 0 13px rgba(130,72,255,.22));
}
.price{
  position:relative;
  z-index:10;
  margin:17px auto 0;
  width:400px;
  height:51px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(91,28,176,.95) 0%,rgba(49,50,167,.97) 46%,rgba(17,86,203,.96) 100%);
  border:1px solid rgba(117,131,255,.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -8px 22px rgba(51,18,120,.24),
    0 0 8px rgba(69,87,255,.42),
    0 0 18px rgba(94,46,255,.18);
  font-size:21px;
  font-weight:800;
}
.price::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
}
.price b{
  position:relative;
  z-index:2;
  font-size:31px;
  color:#ffc12e;
  font-style:italic;
  text-shadow:0 0 8px rgba(255,174,32,.28);
}
.price span{position:relative;z-index:2}

.cube-wrap{
  position:relative;
  z-index:4;
  width:400px;
  height:188px;
  margin:2px auto 0;
}
.ai-stage{
  position:absolute;
  inset:0;
}

.ai-holo{
  position:absolute;
  z-index:7;
  left:50%;
  top:8px;
  width:170px;
  height:112px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:aiFloat 3.2s ease-in-out infinite;
  will-change:transform;
}
.ai-word{
  position:relative;
  display:block;
  font-family:"Arial Black","Arial",sans-serif;
  font-size:92px;
  font-weight:900;
  font-style:italic;
  line-height:1;
  letter-spacing:-9px;
  padding-right:8px;
  color:transparent;
  background:linear-gradient(
    180deg,
    #ffffff 0%,
    #dff8ff 18%,
    #79d6ff 43%,
    #378fff 66%,
    #6d63ff 84%,
    #a974ff 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-stroke:1px rgba(219,246,255,.95);
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.95))
    drop-shadow(0 0 6px rgba(73,194,255,.72))
    drop-shadow(0 0 12px rgba(47,105,255,.45));
}
.ai-word::before{
  content:"AI";
  position:absolute;
  inset:0;
  z-index:-1;
  color:rgba(55,120,255,.16);
  -webkit-text-stroke:5px rgba(66,113,255,.08);
  filter:blur(5px);
}
.ai-word::after{
  content:"";
  position:absolute;
  left:12px;
  right:4px;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  box-shadow:0 -18px 0 rgba(104,214,255,.20),0 18px 0 rgba(137,100,255,.18);
  opacity:.7;
}

.orbit{
  position:absolute;
  z-index:8;
  left:50%;
  top:78px;
  width:330px;
  height:62px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
}
.orbit::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1.5px solid rgba(64,139,255,.48);
  box-shadow:
    0 0 6px rgba(54,153,255,.35),
    inset 0 0 5px rgba(111,83,255,.18);
}
.orbit-dot{
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:#dffcff;
  box-shadow:
    0 0 5px #ffffff,
    0 0 11px #4bd8ff,
    0 0 18px #566cff;
  animation:orbitHorizontal 8s linear infinite;
}
.orbit-dot::after{
  content:"";
  position:absolute;
  left:-20px;
  top:2.5px;
  width:24px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(85,198,255,.2),rgba(219,251,255,.95));
  filter:blur(.3px);
}
@keyframes orbitHorizontal{
  0%   {transform:rotate(0deg) translateX(165px) rotate(0deg)}
  100% {transform:rotate(360deg) translateX(165px) rotate(-360deg)}
}
.base-ring{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:30px;
  width:248px;
  height:43px;
  transform:translateX(-50%);
  border-radius:50%;
  border:3px solid rgba(51,210,255,.92);
  box-shadow:
    0 0 6px rgba(82,232,255,.9),
    0 0 15px rgba(29,110,255,.72),
    inset 0 0 8px rgba(67,109,255,.72);
}
.base-ring::before,
.base-ring::after{
  content:"";
  position:absolute;
  border-radius:50%;
  left:18px;
  right:18px;
  top:8px;
  bottom:8px;
  border:1px solid rgba(93,127,255,.72);
}
.base-ring::after{
  left:42px;
  right:42px;
  top:14px;
  bottom:14px;
  border-color:rgba(160,91,255,.58);
}
.particles{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
}
.particles i{
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#eaffff;
  box-shadow:0 0 4px #fff,0 0 8px #2c9fff;
  animation:particleTwinkle 1.8s ease-in-out infinite alternate;
}
.particles i:nth-child(3n){
  width:3px;height:3px;
  background:#69d8ff;
}
.particles i:nth-child(4n){
  background:#a879ff;
  box-shadow:0 0 4px #d9c2ff,0 0 8px #724cff;
}
.particles i:nth-child(5n)::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:1px;height:13px;
  transform:translate(-50%,-50%);
  background:linear-gradient(transparent,rgba(255,255,255,.75),transparent);
}
to{transform:rotate(360deg)}
}
@keyframes aiFloat{
  0%,100%{transform:translateX(-50%) translateY(4px)}
  50%{transform:translateX(-50%) translateY(-7px)}
}
@keyframes letterSpark{
  from{opacity:.38}
  to{opacity:1}
}
@keyframes particleTwinkle{
  from{opacity:.18;transform:scale(.65)}
  to{opacity:1;transform:scale(1.45)}
}
.section{padding:5px 17px 15px}
.section-title{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:18px;margin:5px 0 15px}.section-title:before,.section-title:after{content:'';width:48px;height:2px;background:linear-gradient(90deg,transparent,#4b85ff)}.section-title:after{transform:scaleX(-1)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.card{height:117px;padding:13px 8px;border:1px solid #286dd0;border-radius:9px;background:linear-gradient(180deg,#092653,#06172f);text-align:center}
.ico{margin:0 auto 9px;width:35px;height:35px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(145deg,#11468d,#09255d);border:1px solid #2e83ef;color:#61a7ff;font-size:19px}
.card small{display:block;color:#b7c9e4;font-size:12px}.card strong{display:block;margin-top:7px;font-size:17px}
.req{margin-top:9px;border:1px solid #245ea9;border-radius:8px;background:#071d40;padding:12px;display:flex;align-items:center;gap:11px}
.shield{width:33px;height:33px;display:grid;place-items:center;border-radius:8px;background:#0d3470;color:#58a5ff}.req b{display:block;font-size:14px}.req span{display:block;color:#aabedb;font-size:11px;margin-top:4px}
.course{margin-top:3px;padding:10px;border:1px solid #245da9;border-radius:10px;background:linear-gradient(#08214b,#05162f)}
.course-inner{height:132px;border-radius:8px;background:radial-gradient(circle at 50% 75%,#1671ff,transparent 17%),linear-gradient(180deg,#071943,#05142d);padding:13px;display:flex;justify-content:space-between}.course h2{font-size:20px;margin:0 0 5px}.course p{margin:0;color:#b4c6e2;font-size:11px}.poster{width:105px;height:108px;border:1px solid #176be4;background:linear-gradient(#082458,#061638);display:grid;place-items:center;font-size:27px;font-weight:900;color:#5db2ff}.meta{display:flex;justify-content:space-between;align-items:end;padding:10px 3px}.meta strong{font-size:25px;color:#ffad29}.btn{height:48px;border-radius:8px;background:linear-gradient(90deg,#176cff,#4c55ff,#d52bbd);display:grid;place-items:center;font-weight:800}.trust{text-align:center;color:#8195b4;font-size:11px;padding:15px}

/* v13: only hide the large blue ellipse; all other v10 geometry remains untouched */
.orbit {
  border-color: transparent !important;
  box-shadow: none !important;
}
.orbit::before {
  display: none !important;
}
.orbit-dot,
.orbit-dot::after {
  display: none !important;
}

/* v14 — ONLY the two requested changes */

/* AI gently floats up and down; appearance stays unchanged */
.ai-holo{
  animation:aiFloatV14 2.8s ease-in-out infinite !important;
  will-change:transform;
}
@keyframes aiFloatV14{
  0%,100%{transform:translateX(-50%) translateY(3px)}
  50%{transform:translateX(-50%) translateY(-9px)}
}

/* Remove the black seam between hero and the next section.
   Continue the same navy background so both areas visually connect. */
.hero{
  background:
    radial-gradient(ellipse at 50% 78%,rgba(28,86,255,.20) 0%,rgba(20,53,145,.10) 35%,transparent 66%),
    radial-gradient(circle at 50% 42%,rgba(75,51,255,.12),transparent 37%),
    linear-gradient(180deg,#020819 0%,#03112d 57%,#03122b 100%) !important;
}
.hero + .section{
  position:relative;
  margin-top:-1px;
  padding-top:5px;
  background:linear-gradient(180deg,#03122b 0%,#03122b 100%);
}

/* v15: make the hero -> core-info transition completely seamless.
   No divider, no hard horizontal color edge. */
.hero{
  background:
    radial-gradient(ellipse at 50% 78%,rgba(28,86,255,.18) 0%,rgba(20,53,145,.08) 38%,transparent 70%),
    radial-gradient(circle at 50% 42%,rgba(75,51,255,.12),transparent 37%),
    linear-gradient(180deg,#020819 0%,#03112b 72%,#03122b 100%) !important;
}
.hero + .section{
  margin-top:-2px !important;
  padding-top:7px !important;
  border:0 !important;
  box-shadow:none !important;
  background:#03122b !important;
}

/* v16: full-page code-generated star particles */
.phone{
  position:relative;
  isolation:isolate;
}
.page-stars{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.page-star{
  position:absolute;
  display:block;
  border-radius:50%;
  opacity:.55;
  background:#dff8ff;
  box-shadow:0 0 4px rgba(255,255,255,.9),0 0 9px rgba(52,154,255,.72);
  animation:pageStarTwinkle ease-in-out infinite alternate;
}
.page-star.blue{
  background:#5ecfff;
  box-shadow:0 0 4px #6ee0ff,0 0 10px rgba(43,119,255,.78);
}
.page-star.purple{
  background:#a76cff;
  box-shadow:0 0 4px #c2a3ff,0 0 10px rgba(114,66,255,.72);
}
.page-star.white{
  background:#fff;
  box-shadow:0 0 4px #fff,0 0 9px rgba(107,190,255,.65);
}
.page-star:nth-child(11n){
  border-radius:0;
  transform:rotate(45deg);
}
.page-star:nth-child(13n)::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:1px;height:10px;
  transform:translate(-50%,-50%);
  background:linear-gradient(transparent,rgba(255,255,255,.8),transparent);
}
@keyframes pageStarTwinkle{
  0%{opacity:.12;filter:brightness(.8);transform:scale(.65)}
  55%{opacity:.68}
  100%{opacity:1;filter:brightness(1.35);transform:scale(1.35)}
}

/* Keep every real page section above the star layer,
   while allowing the stars to remain visible through the dark backgrounds. */
.hero,.section{
  position:relative;
  z-index:2;
}
.hero{
  background:
    radial-gradient(ellipse at 50% 78%,rgba(28,86,255,.16) 0%,rgba(20,53,145,.07) 38%,transparent 70%),
    radial-gradient(circle at 50% 42%,rgba(75,51,255,.10),transparent 37%),
    linear-gradient(180deg,rgba(2,8,25,.88) 0%,rgba(3,17,43,.86) 72%,rgba(3,18,43,.84) 100%) !important;
}
.hero + .section,
.section{
  background:rgba(3,18,43,.86) !important;
}
.card,.req,.course{
  position:relative;
  z-index:3;
}

/* v17 — full-height continuous star field, including course details and all lower content */
.phone{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 12px 18px,rgba(255,255,255,.75) 0 1px,transparent 1.7px) 0 0/93px 121px,
    radial-gradient(circle at 47px 61px,rgba(82,204,255,.72) 0 1.2px,transparent 2px) 0 0/137px 157px,
    radial-gradient(circle at 91px 32px,rgba(157,101,255,.62) 0 1px,transparent 1.8px) 0 0/173px 149px,
    radial-gradient(circle at 34px 96px,rgba(255,255,255,.42) 0 1px,transparent 1.7px) 0 0/211px 187px,
    linear-gradient(180deg,#020819 0%,#03122b 48%,#03122b 100%) !important;
}
.phone::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 7%,rgba(91,208,255,.9) 0 1px,transparent 2px),
    radial-gradient(circle at 77% 12%,rgba(168,104,255,.8) 0 1px,transparent 2px),
    radial-gradient(circle at 36% 22%,rgba(255,255,255,.85) 0 1px,transparent 2px),
    radial-gradient(circle at 89% 31%,rgba(74,180,255,.8) 0 1.2px,transparent 2.2px),
    radial-gradient(circle at 11% 41%,rgba(145,94,255,.72) 0 1px,transparent 2px),
    radial-gradient(circle at 67% 52%,rgba(255,255,255,.72) 0 1px,transparent 2px),
    radial-gradient(circle at 25% 63%,rgba(64,194,255,.72) 0 1px,transparent 2px),
    radial-gradient(circle at 84% 72%,rgba(150,91,255,.7) 0 1.2px,transparent 2.2px),
    radial-gradient(circle at 43% 82%,rgba(255,255,255,.75) 0 1px,transparent 2px),
    radial-gradient(circle at 72% 94%,rgba(69,188,255,.72) 0 1px,transparent 2px);
  animation:fullPageStarsPulse 3.4s ease-in-out infinite alternate;
}
@keyframes fullPageStarsPulse{
  from{opacity:.58;filter:brightness(.9)}
  to{opacity:1;filter:brightness(1.25)}
}

/* Every content section uses transparent navy, so the same star field continues behind it. */
.hero,
.section,
.hero + .section{
  position:relative;
  z-index:2;
  background:transparent !important;
}

/* Preserve readable dark panels while still letting the surrounding star field show through. */
.card{
  background:linear-gradient(180deg,rgba(9,38,83,.94),rgba(6,23,47,.94)) !important;
}
.req{
  background:rgba(7,29,64,.94) !important;
}
.course{
  background:linear-gradient(rgba(8,33,75,.94),rgba(5,22,47,.94)) !important;
}
.course-inner{
  background:
    radial-gradient(circle at 50% 75%,rgba(22,113,255,.35),transparent 17%),
    linear-gradient(180deg,rgba(7,25,67,.92),rgba(5,20,45,.92)) !important;
}

/* Disable old v16 separate star overlay if any styles remain. */
.page-stars{display:none !important;}

/* v20 — only replace the four icons. No icon frame/background. */
.ico,.shield{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.ico{
  width:50px !important;
  height:50px !important;
  margin:0 auto 7px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.ico img{
  display:block !important;
  width:50px !important;
  height:50px !important;
  object-fit:contain !important;
}
.shield{
  width:48px !important;
  height:48px !important;
  flex:0 0 48px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.shield img{
  display:block !important;
  width:48px !important;
  height:48px !important;
  object-fit:contain !important;
}

/* v22 — 只调整标题字效 + 核心活动卡片的信息层级 */

/* 主标题：去掉过度扭斜和过重的紫色立体层，改成更正常的白/冰蓝/蓝紫渐变 */
.title{
  font-style:normal !important;
  transform:none !important;
  letter-spacing:-2.2px !important;
  background:linear-gradient(
    180deg,
    #ffffff 0%,
    #f4f9ff 24%,
    #d9eaff 47%,
    #9fc7ff 68%,
    #8498ff 84%,
    #8b78f6 100%
  ) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-stroke:.55px rgba(242,248,255,.92) !important;
  filter:
    drop-shadow(0 2px 0 rgba(117,167,235,.72))
    drop-shadow(0 4px 0 rgba(57,82,170,.58))
    drop-shadow(0 0 7px rgba(72,139,255,.22)) !important;
}

/* 三个核心活动卡片：缩小图标并上移，压缩图标和文字之间的空隙 */
.card{
  height:112px !important;
  padding:9px 7px 8px !important;
}
.ico{
  width:39px !important;
  height:39px !important;
  margin:0 auto 3px !important;
}
.ico img{
  width:39px !important;
  height:39px !important;
}

/* 文字成为卡片视觉重点 */
.card small{
  font-size:13px !important;
  line-height:1.15 !important;
  color:#d4e2f7 !important;
  margin:0 !important;
}
.card strong{
  margin-top:4px !important;
  font-size:18px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  color:#ffffff !important;
}
.card:nth-child(3) strong{
  margin-top:3px !important;
  font-size:14px !important;
  line-height:1.28 !important;
}

/* 报名要求：盾牌也稍微缩小，文字靠近图标 */
.req{
  gap:8px !important;
  padding:10px 12px !important;
}
.shield{
  width:40px !important;
  height:40px !important;
  flex:0 0 40px !important;
}
.shield img{
  width:40px !important;
  height:40px !important;
}
.req b{
  font-size:16px !important;
  line-height:1.1 !important;
}
.req span{
  margin-top:3px !important;
  font-size:12px !important;
  line-height:1.25 !important;
}

/* v24 — transparent PNG logo, no white rectangle */
.logo{
  width:118px !important;
  height:38px !important;
  display:flex !important;
  align-items:center !important;
  overflow:visible !important;
  font-size:0 !important;
}
.logo::before{display:none !important;content:none !important;}
.logo img{
  display:block;
  width:116px;
  height:auto;
  max-height:38px;
  object-fit:contain;
  object-position:left center;
  background:transparent !important;
}

/* v25 — only tighten the AI + lower ring spacing */
.ai-holo{
  top:15px !important; /* AI moves slightly downward toward the ring */
}
.base-ring{
  bottom:40px !important; /* ring moves upward */
}

/* v28 — 用户上传的课程主视觉放入“精选课程”卡片 */
.course-inner.course-cover-real{
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  display:block !important;
  overflow:hidden !important;
  border-radius:8px !important;
  background:#04142e !important;
}
.course-cover-real img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/9 !important;
  object-fit:cover !important;
  border-radius:8px !important;
}

/* v29 — only the three requested typography changes */

/* 1. Main title: clean white-to-blue gradient, remove purple/twisted feel */
.title{
  font-style:normal !important;
  transform:none !important;
  color:transparent !important;
  background:linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fcff 22%,
    #e7f4ff 43%,
    #c5e3ff 64%,
    #8fc6ff 82%,
    #5f9eff 100%
  ) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  -webkit-text-stroke:.45px rgba(244,250,255,.9) !important;
  filter:
    drop-shadow(0 2px 0 rgba(111,164,224,.65))
    drop-shadow(0 4px 0 rgba(52,91,160,.48))
    drop-shadow(0 0 6px rgba(73,156,255,.18)) !important;
}

/* 2. Widen the visual spacing of 199元 without changing the rest of the capsule */
.hero-price{
  letter-spacing:3px !important;
  margin-right:2px !important;
}

/* If the current markup uses a generic strong instead of hero-price */
.price-pill strong,
.hero-price-title strong{
  letter-spacing:3px !important;
}

/* 3. Make “推荐官专属学习价” clearly larger and more prominent */
.course-price-label{
  display:block !important;
  color:#dceaff !important;
  font-size:15px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:.4px !important;
  opacity:1 !important;
  text-shadow:0 0 5px rgba(71,139,255,.2) !important;
}

*{box-sizing:border-box}
html,body{margin:0;background:#07132d;font-family:"Microsoft YaHei",Arial,sans-serif;color:#fff}
body{display:flex;justify-content:center}
.phone{width:430px;min-height:932px;margin:0 auto;background:linear-gradient(#020817,#03122b 60%,#020817);overflow:hidden}

.hero{
  position:relative;
  height:425px;
  padding:18px 18px 0;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 78%,rgba(28,86,255,.20) 0%,rgba(20,53,145,.10) 35%,transparent 66%),
    radial-gradient(circle at 50% 42%,rgba(75,51,255,.12),transparent 37%),
    linear-gradient(180deg,#020819 0%,#03112d 57%,#020b20 100%);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.75;
  background:
    radial-gradient(circle at 7% 33%,#77caff 0 1px,transparent 1.8px),
    radial-gradient(circle at 15% 71%,#7b5cff 0 1.2px,transparent 2px),
    radial-gradient(circle at 23% 52%,#ffffff 0 1px,transparent 1.8px),
    radial-gradient(circle at 78% 40%,#5ccaff 0 1.2px,transparent 2px),
    radial-gradient(circle at 91% 65%,#9d6cff 0 1px,transparent 1.8px),
    radial-gradient(circle at 86% 26%,#ffffff 0 1px,transparent 1.7px);
}
.grid{
  position:absolute;
  inset:0;
  opacity:.07;
  background-image:
    linear-gradient(rgba(71,132,255,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(71,132,255,.16) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(#000,transparent 88%);
}
.logo{
  position:relative;
  z-index:10;
  font-size:18px;
  font-weight:800;
  letter-spacing:1px;
  color:#f5f9ff;
}
.logo:before{
  content:'DZ';
  display:inline-grid;
  place-items:center;
  width:31px;
  height:24px;
  margin-right:7px;
  border-radius:5px;
  background:linear-gradient(135deg,#2c9dff,#6452ff);
  box-shadow:0 0 12px rgba(50,126,255,.35);
  font-size:12px;
}
.title{
  position:relative;
  z-index:10;
  margin-top:24px;
  text-align:center;
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
  font-size:54px;
  font-weight:1000;
  font-style:italic;
  line-height:1.01;
  letter-spacing:-3.4px;
  transform:scaleX(1.02);
  color:transparent;
  background:
    linear-gradient(180deg,
      #ffffff 0%,
      #ffffff 20%,
      #ddecff 38%,
      #8fc4ff 58%,
      #6c8fff 72%,
      #8f6bff 87%,
      #c8a9ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-stroke:.7px rgba(245,250,255,.95);
  filter:
    drop-shadow(0 2px 0 rgba(132,190,255,.85))
    drop-shadow(0 5px 0 rgba(54,79,184,.90))
    drop-shadow(0 8px 0 rgba(61,35,148,.55))
    drop-shadow(0 0 8px rgba(59,139,255,.32))
    drop-shadow(0 0 13px rgba(130,72,255,.22));
}
.price{
  position:relative;
  z-index:10;
  margin:17px auto 0;
  width:400px;
  height:51px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(91,28,176,.95) 0%,rgba(49,50,167,.97) 46%,rgba(17,86,203,.96) 100%);
  border:1px solid rgba(117,131,255,.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -8px 22px rgba(51,18,120,.24),
    0 0 8px rgba(69,87,255,.42),
    0 0 18px rgba(94,46,255,.18);
  font-size:21px;
  font-weight:800;
}
.price::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
}
.price b{
  position:relative;
  z-index:2;
  font-size:31px;
  color:#ffc12e;
  font-style:italic;
  text-shadow:0 0 8px rgba(255,174,32,.28);
}
.price span{position:relative;z-index:2}

.cube-wrap{
  position:relative;
  z-index:4;
  width:400px;
  height:188px;
  margin:2px auto 0;
}
.ai-stage{
  position:absolute;
  inset:0;
}

.ai-holo{
  position:absolute;
  z-index:7;
  left:50%;
  top:8px;
  width:170px;
  height:112px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:aiFloat 3.2s ease-in-out infinite;
  will-change:transform;
}
.ai-word{
  position:relative;
  display:block;
  font-family:"Arial Black","Arial",sans-serif;
  font-size:92px;
  font-weight:900;
  font-style:italic;
  line-height:1;
  letter-spacing:-9px;
  padding-right:8px;
  color:transparent;
  background:linear-gradient(
    180deg,
    #ffffff 0%,
    #dff8ff 18%,
    #79d6ff 43%,
    #378fff 66%,
    #6d63ff 84%,
    #a974ff 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-stroke:1px rgba(219,246,255,.95);
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.95))
    drop-shadow(0 0 6px rgba(73,194,255,.72))
    drop-shadow(0 0 12px rgba(47,105,255,.45));
}
.ai-word::before{
  content:"AI";
  position:absolute;
  inset:0;
  z-index:-1;
  color:rgba(55,120,255,.16);
  -webkit-text-stroke:5px rgba(66,113,255,.08);
  filter:blur(5px);
}
.ai-word::after{
  content:"";
  position:absolute;
  left:12px;
  right:4px;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  box-shadow:0 -18px 0 rgba(104,214,255,.20),0 18px 0 rgba(137,100,255,.18);
  opacity:.7;
}

.orbit{
  position:absolute;
  z-index:8;
  left:50%;
  top:78px;
  width:330px;
  height:62px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
}
.orbit::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1.5px solid rgba(64,139,255,.48);
  box-shadow:
    0 0 6px rgba(54,153,255,.35),
    inset 0 0 5px rgba(111,83,255,.18);
}
.orbit-dot{
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:#dffcff;
  box-shadow:
    0 0 5px #ffffff,
    0 0 11px #4bd8ff,
    0 0 18px #566cff;
  animation:orbitHorizontal 8s linear infinite;
}
.orbit-dot::after{
  content:"";
  position:absolute;
  left:-20px;
  top:2.5px;
  width:24px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(85,198,255,.2),rgba(219,251,255,.95));
  filter:blur(.3px);
}
@keyframes orbitHorizontal{
  0%   {transform:rotate(0deg) translateX(165px) rotate(0deg)}
  100% {transform:rotate(360deg) translateX(165px) rotate(-360deg)}
}
.base-ring{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:30px;
  width:248px;
  height:43px;
  transform:translateX(-50%);
  border-radius:50%;
  border:3px solid rgba(51,210,255,.92);
  box-shadow:
    0 0 6px rgba(82,232,255,.9),
    0 0 15px rgba(29,110,255,.72),
    inset 0 0 8px rgba(67,109,255,.72);
}
.base-ring::before,
.base-ring::after{
  content:"";
  position:absolute;
  border-radius:50%;
  left:18px;
  right:18px;
  top:8px;
  bottom:8px;
  border:1px solid rgba(93,127,255,.72);
}
.base-ring::after{
  left:42px;
  right:42px;
  top:14px;
  bottom:14px;
  border-color:rgba(160,91,255,.58);
}
.particles{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
}
.particles i{
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#eaffff;
  box-shadow:0 0 4px #fff,0 0 8px #2c9fff;
  animation:particleTwinkle 1.8s ease-in-out infinite alternate;
}
.particles i:nth-child(3n){
  width:3px;height:3px;
  background:#69d8ff;
}
.particles i:nth-child(4n){
  background:#a879ff;
  box-shadow:0 0 4px #d9c2ff,0 0 8px #724cff;
}
.particles i:nth-child(5n)::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:1px;height:13px;
  transform:translate(-50%,-50%);
  background:linear-gradient(transparent,rgba(255,255,255,.75),transparent);
}
to{transform:rotate(360deg)}
}
@keyframes aiFloat{
  0%,100%{transform:translateX(-50%) translateY(4px)}
  50%{transform:translateX(-50%) translateY(-7px)}
}
@keyframes letterSpark{
  from{opacity:.38}
  to{opacity:1}
}
@keyframes particleTwinkle{
  from{opacity:.18;transform:scale(.65)}
  to{opacity:1;transform:scale(1.45)}
}
.section{padding:5px 17px 15px}
.section-title{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:18px;margin:5px 0 15px}.section-title:before,.section-title:after{content:'';width:48px;height:2px;background:linear-gradient(90deg,transparent,#4b85ff)}.section-title:after{transform:scaleX(-1)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.card{height:117px;padding:13px 8px;border:1px solid #286dd0;border-radius:9px;background:linear-gradient(180deg,#092653,#06172f);text-align:center}
.ico{margin:0 auto 9px;width:35px;height:35px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(145deg,#11468d,#09255d);border:1px solid #2e83ef;color:#61a7ff;font-size:19px}
.card small{display:block;color:#b7c9e4;font-size:12px}.card strong{display:block;margin-top:7px;font-size:17px}
.req{margin-top:9px;border:1px solid #245ea9;border-radius:8px;background:#071d40;padding:12px;display:flex;align-items:center;gap:11px}
.shield{width:33px;height:33px;display:grid;place-items:center;border-radius:8px;background:#0d3470;color:#58a5ff}.req b{display:block;font-size:14px}.req span{display:block;color:#aabedb;font-size:11px;margin-top:4px}
.course{margin-top:3px;padding:10px;border:1px solid #245da9;border-radius:10px;background:linear-gradient(#08214b,#05162f)}
.course-inner{height:132px;border-radius:8px;background:radial-gradient(circle at 50% 75%,#1671ff,transparent 17%),linear-gradient(180deg,#071943,#05142d);padding:13px;display:flex;justify-content:space-between}.course h2{font-size:20px;margin:0 0 5px}.course p{margin:0;color:#b4c6e2;font-size:11px}.poster{width:105px;height:108px;border:1px solid #176be4;background:linear-gradient(#082458,#061638);display:grid;place-items:center;font-size:27px;font-weight:900;color:#5db2ff}.meta{display:flex;justify-content:space-between;align-items:end;padding:10px 3px}.meta strong{font-size:25px;color:#ffad29}.btn{height:48px;border-radius:8px;background:linear-gradient(90deg,#176cff,#4c55ff,#d52bbd);display:grid;place-items:center;font-weight:800}.trust{text-align:center;color:#8195b4;font-size:11px;padding:15px}

/* v13: only hide the large blue ellipse; all other v10 geometry remains untouched */
.orbit {
  border-color: transparent !important;
  box-shadow: none !important;
}
.orbit::before {
  display: none !important;
}
.orbit-dot,
.orbit-dot::after {
  display: none !important;
}

/* v14 — ONLY the two requested changes */

/* AI gently floats up and down; appearance stays unchanged */
.ai-holo{
  animation:aiFloatV14 2.8s ease-in-out infinite !important;
  will-change:transform;
}
@keyframes aiFloatV14{
  0%,100%{transform:translateX(-50%) translateY(3px)}
  50%{transform:translateX(-50%) translateY(-9px)}
}

/* Remove the black seam between hero and the next section.
   Continue the same navy background so both areas visually connect. */
.hero{
  background:
    radial-gradient(ellipse at 50% 78%,rgba(28,86,255,.20) 0%,rgba(20,53,145,.10) 35%,transparent 66%),
    radial-gradient(circle at 50% 42%,rgba(75,51,255,.12),transparent 37%),
    linear-gradient(180deg,#020819 0%,#03112d 57%,#03122b 100%) !important;
}
.hero + .section{
  position:relative;
  margin-top:-1px;
  padding-top:5px;
  background:linear-gradient(180deg,#03122b 0%,#03122b 100%);
}

/* v15: make the hero -> core-info transition completely seamless.
   No divider, no hard horizontal color edge. */
.hero{
  background:
    radial-gradient(ellipse at 50% 78%,rgba(28,86,255,.18) 0%,rgba(20,53,145,.08) 38%,transparent 70%),
    radial-gradient(circle at 50% 42%,rgba(75,51,255,.12),transparent 37%),
    linear-gradient(180deg,#020819 0%,#03112b 72%,#03122b 100%) !important;
}
.hero + .section{
  margin-top:-2px !important;
  padding-top:7px !important;
  border:0 !important;
  box-shadow:none !important;
  background:#03122b !important;
}

/* v16: full-page code-generated star particles */
.phone{
  position:relative;
  isolation:isolate;
}
.page-stars{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.page-star{
  position:absolute;
  display:block;
  border-radius:50%;
  opacity:.55;
  background:#dff8ff;
  box-shadow:0 0 4px rgba(255,255,255,.9),0 0 9px rgba(52,154,255,.72);
  animation:pageStarTwinkle ease-in-out infinite alternate;
}
.page-star.blue{
  background:#5ecfff;
  box-shadow:0 0 4px #6ee0ff,0 0 10px rgba(43,119,255,.78);
}
.page-star.purple{
  background:#a76cff;
  box-shadow:0 0 4px #c2a3ff,0 0 10px rgba(114,66,255,.72);
}
.page-star.white{
  background:#fff;
  box-shadow:0 0 4px #fff,0 0 9px rgba(107,190,255,.65);
}
.page-star:nth-child(11n){
  border-radius:0;
  transform:rotate(45deg);
}
.page-star:nth-child(13n)::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:1px;height:10px;
  transform:translate(-50%,-50%);
  background:linear-gradient(transparent,rgba(255,255,255,.8),transparent);
}
@keyframes pageStarTwinkle{
  0%{opacity:.12;filter:brightness(.8);transform:scale(.65)}
  55%{opacity:.68}
  100%{opacity:1;filter:brightness(1.35);transform:scale(1.35)}
}

/* Keep every real page section above the star layer,
   while allowing the stars to remain visible through the dark backgrounds. */
.hero,.section{
  position:relative;
  z-index:2;
}
.hero{
  background:
    radial-gradient(ellipse at 50% 78%,rgba(28,86,255,.16) 0%,rgba(20,53,145,.07) 38%,transparent 70%),
    radial-gradient(circle at 50% 42%,rgba(75,51,255,.10),transparent 37%),
    linear-gradient(180deg,rgba(2,8,25,.88) 0%,rgba(3,17,43,.86) 72%,rgba(3,18,43,.84) 100%) !important;
}
.hero + .section,
.section{
  background:rgba(3,18,43,.86) !important;
}
.card,.req,.course{
  position:relative;
  z-index:3;
}

/* v17 — full-height continuous star field, including course details and all lower content */
.phone{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 12px 18px,rgba(255,255,255,.75) 0 1px,transparent 1.7px) 0 0/93px 121px,
    radial-gradient(circle at 47px 61px,rgba(82,204,255,.72) 0 1.2px,transparent 2px) 0 0/137px 157px,
    radial-gradient(circle at 91px 32px,rgba(157,101,255,.62) 0 1px,transparent 1.8px) 0 0/173px 149px,
    radial-gradient(circle at 34px 96px,rgba(255,255,255,.42) 0 1px,transparent 1.7px) 0 0/211px 187px,
    linear-gradient(180deg,#020819 0%,#03122b 48%,#03122b 100%) !important;
}
.phone::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 7%,rgba(91,208,255,.9) 0 1px,transparent 2px),
    radial-gradient(circle at 77% 12%,rgba(168,104,255,.8) 0 1px,transparent 2px),
    radial-gradient(circle at 36% 22%,rgba(255,255,255,.85) 0 1px,transparent 2px),
    radial-gradient(circle at 89% 31%,rgba(74,180,255,.8) 0 1.2px,transparent 2.2px),
    radial-gradient(circle at 11% 41%,rgba(145,94,255,.72) 0 1px,transparent 2px),
    radial-gradient(circle at 67% 52%,rgba(255,255,255,.72) 0 1px,transparent 2px),
    radial-gradient(circle at 25% 63%,rgba(64,194,255,.72) 0 1px,transparent 2px),
    radial-gradient(circle at 84% 72%,rgba(150,91,255,.7) 0 1.2px,transparent 2.2px),
    radial-gradient(circle at 43% 82%,rgba(255,255,255,.75) 0 1px,transparent 2px),
    radial-gradient(circle at 72% 94%,rgba(69,188,255,.72) 0 1px,transparent 2px);
  animation:fullPageStarsPulse 3.4s ease-in-out infinite alternate;
}
@keyframes fullPageStarsPulse{
  from{opacity:.58;filter:brightness(.9)}
  to{opacity:1;filter:brightness(1.25)}
}

/* Every content section uses transparent navy, so the same star field continues behind it. */
.hero,
.section,
.hero + .section{
  position:relative;
  z-index:2;
  background:transparent !important;
}

/* Preserve readable dark panels while still letting the surrounding star field show through. */
.card{
  background:linear-gradient(180deg,rgba(9,38,83,.94),rgba(6,23,47,.94)) !important;
}
.req{
  background:rgba(7,29,64,.94) !important;
}
.course{
  background:linear-gradient(rgba(8,33,75,.94),rgba(5,22,47,.94)) !important;
}
.course-inner{
  background:
    radial-gradient(circle at 50% 75%,rgba(22,113,255,.35),transparent 17%),
    linear-gradient(180deg,rgba(7,25,67,.92),rgba(5,20,45,.92)) !important;
}

/* Disable old v16 separate star overlay if any styles remain. */
.page-stars{display:none !important;}

/* v20 — only replace the four icons. No icon frame/background. */
.ico,.shield{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.ico{
  width:50px !important;
  height:50px !important;
  margin:0 auto 7px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.ico img{
  display:block !important;
  width:50px !important;
  height:50px !important;
  object-fit:contain !important;
}
.shield{
  width:48px !important;
  height:48px !important;
  flex:0 0 48px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.shield img{
  display:block !important;
  width:48px !important;
  height:48px !important;
  object-fit:contain !important;
}

/* v22 — 只调整标题字效 + 核心活动卡片的信息层级 */

/* 主标题：去掉过度扭斜和过重的紫色立体层，改成更正常的白/冰蓝/蓝紫渐变 */
.title{
  font-style:normal !important;
  transform:none !important;
  letter-spacing:-2.2px !important;
  background:linear-gradient(
    180deg,
    #ffffff 0%,
    #f4f9ff 24%,
    #d9eaff 47%,
    #9fc7ff 68%,
    #8498ff 84%,
    #8b78f6 100%
  ) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-stroke:.55px rgba(242,248,255,.92) !important;
  filter:
    drop-shadow(0 2px 0 rgba(117,167,235,.72))
    drop-shadow(0 4px 0 rgba(57,82,170,.58))
    drop-shadow(0 0 7px rgba(72,139,255,.22)) !important;
}

/* 三个核心活动卡片：缩小图标并上移，压缩图标和文字之间的空隙 */
.card{
  height:112px !important;
  padding:9px 7px 8px !important;
}
.ico{
  width:39px !important;
  height:39px !important;
  margin:0 auto 3px !important;
}
.ico img{
  width:39px !important;
  height:39px !important;
}

/* 文字成为卡片视觉重点 */
.card small{
  font-size:13px !important;
  line-height:1.15 !important;
  color:#d4e2f7 !important;
  margin:0 !important;
}
.card strong{
  margin-top:4px !important;
  font-size:18px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  color:#ffffff !important;
}
.card:nth-child(3) strong{
  margin-top:3px !important;
  font-size:14px !important;
  line-height:1.28 !important;
}

/* 报名要求：盾牌也稍微缩小，文字靠近图标 */
.req{
  gap:8px !important;
  padding:10px 12px !important;
}
.shield{
  width:40px !important;
  height:40px !important;
  flex:0 0 40px !important;
}
.shield img{
  width:40px !important;
  height:40px !important;
}
.req b{
  font-size:16px !important;
  line-height:1.1 !important;
}
.req span{
  margin-top:3px !important;
  font-size:12px !important;
  line-height:1.25 !important;
}

/* v24 — transparent PNG logo, no white rectangle */
.logo{
  width:118px !important;
  height:38px !important;
  display:flex !important;
  align-items:center !important;
  overflow:visible !important;
  font-size:0 !important;
}
.logo::before{display:none !important;content:none !important;}
.logo img{
  display:block;
  width:116px;
  height:auto;
  max-height:38px;
  object-fit:contain;
  object-position:left center;
  background:transparent !important;
}

/* v25 — only tighten the AI + lower ring spacing */
.ai-holo{
  top:15px !important; /* AI moves slightly downward toward the ring */
}
.base-ring{
  bottom:40px !important; /* ring moves upward */
}

/* v28 — 用户上传的课程主视觉放入“精选课程”卡片 */
.course-inner.course-cover-real{
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  display:block !important;
  overflow:hidden !important;
  border-radius:8px !important;
  background:#04142e !important;
}
.course-cover-real img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/9 !important;
  object-fit:cover !important;
  border-radius:8px !important;
}

/* v29 — only the three requested typography changes */

/* 1. Main title: clean white-to-blue gradient, remove purple/twisted feel */
.title{
  font-style:normal !important;
  transform:none !important;
  color:transparent !important;
  background:linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fcff 22%,
    #e7f4ff 43%,
    #c5e3ff 64%,
    #8fc6ff 82%,
    #5f9eff 100%
  ) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  -webkit-text-stroke:.45px rgba(244,250,255,.9) !important;
  filter:
    drop-shadow(0 2px 0 rgba(111,164,224,.65))
    drop-shadow(0 4px 0 rgba(52,91,160,.48))
    drop-shadow(0 0 6px rgba(73,156,255,.18)) !important;
}

/* 2. Widen the visual spacing of 199元 without changing the rest of the capsule */
.hero-price{
  letter-spacing:3px !important;
  margin-right:2px !important;
}

/* If the current markup uses a generic strong instead of hero-price */
.price-pill strong,
.hero-price-title strong{
  letter-spacing:3px !important;
}

/* 3. Make “推荐官专属学习价” clearly larger and more prominent */
.course-price-label{
  display:block !important;
  color:#dceaff !important;
  font-size:15px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:.4px !important;
  opacity:1 !important;
  text-shadow:0 0 5px rgba(71,139,255,.2) !important;
}

/* 第二张：课程详情页 */
.detail-page{
  min-height:100vh;
  padding-bottom:92px;
  color:#fff;
  background:
    radial-gradient(circle at 12% 13%,rgba(39,118,255,.16),transparent 25%),
    radial-gradient(circle at 87% 28%,rgba(96,60,255,.12),transparent 25%),
    radial-gradient(circle at 15px 22px,rgba(255,255,255,.7) 0 1px,transparent 1.7px) 0 0/103px 137px,
    radial-gradient(circle at 61px 74px,rgba(76,202,255,.65) 0 1px,transparent 1.8px) 0 0/151px 173px,
    radial-gradient(circle at 104px 35px,rgba(150,99,255,.55) 0 1px,transparent 1.8px) 0 0/181px 157px,
    linear-gradient(180deg,#020817,#03122b 52%,#03122b 100%) !important;
}
.detail-header{
  position:sticky;
  top:0;
  z-index:30;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 15px;
  background:rgba(2,8,23,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(71,127,222,.16);
}
.detail-header h1{margin:0;font-size:18px;letter-spacing:.5px}
.detail-header button{
  width:34px;height:34px;border:0;background:transparent;color:#eaf4ff;
  font-size:30px;display:grid;place-items:center;padding:0;
}
.share-btn{font-size:23px!important}
.detail-content{padding:12px 14px 24px}
.detail-hero-card{
  position:relative;
  height:282px;
  padding:18px 17px;
  overflow:hidden;
  border:1px solid rgba(50,124,255,.46);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(6,25,67,.93),rgba(3,14,39,.94));
  box-shadow:inset 0 0 24px rgba(26,87,190,.12),0 8px 28px rgba(0,0,0,.22);
}
.detail-hero-card::before{
  content:"";position:absolute;inset:0;opacity:.65;
  background:
    radial-gradient(circle at 18% 24%,#fff 0 1px,transparent 1.8px),
    radial-gradient(circle at 81% 18%,#61d4ff 0 1px,transparent 2px),
    radial-gradient(circle at 72% 68%,#9d6cff 0 1px,transparent 2px),
    linear-gradient(90deg,transparent 49.7%,rgba(42,112,255,.08) 50%,transparent 50.3%);
}
.detail-kicker{position:relative;z-index:2;color:#7fdcff;font-size:12px;font-weight:700;letter-spacing:1px}
.detail-hero-card h2{
  position:relative;z-index:2;margin:9px 0 6px;font-size:25px;line-height:1.15;
  background:linear-gradient(180deg,#fff,#d8edff 58%,#7ebcff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.detail-subtitle{position:relative;z-index:2;display:flex;gap:7px;font-size:13px;color:#dbe9ff}
.detail-subtitle b:first-child{color:#55d9ff}
.detail-hero-card p{position:relative;z-index:2;margin:8px 0 0;color:#b8c9e3;font-size:12px}
.year-stage{position:absolute;left:50%;bottom:4px;width:330px;height:165px;transform:translateX(-50%)}
.year-text{
  position:absolute;z-index:4;left:50%;top:20px;transform:translateX(-50%);
  font-size:75px;font-weight:900;letter-spacing:-5px;color:transparent;
  -webkit-text-stroke:1px rgba(201,245,255,.95);
  background:linear-gradient(#efffff,#6edaff 47%,#4b72ff);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 8px rgba(61,191,255,.75)) drop-shadow(0 0 20px rgba(47,88,255,.45));
}
.year-glow{position:absolute;left:50%;bottom:26px;width:165px;height:70px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(42,188,255,.6),rgba(48,78,255,.2) 42%,transparent 70%);filter:blur(8px)}
.year-ring{position:absolute;left:50%;border-radius:50%;transform:translateX(-50%);border:2px solid rgba(55,211,255,.8);box-shadow:0 0 10px rgba(55,170,255,.7)}
.r1{bottom:18px;width:250px;height:45px}.r2{bottom:29px;width:190px;height:29px;border-width:1px;border-color:rgba(121,87,255,.75)}
.detail-panel{
  margin-top:12px;padding:14px;border:1px solid rgba(47,117,226,.36);
  border-radius:12px;background:linear-gradient(180deg,rgba(8,32,73,.88),rgba(5,22,50,.9));
}
.detail-panel h3{margin:0;font-size:16px}
.intro-panel p{margin:9px 0 0;color:#b9c9e1;font-size:12px;line-height:1.75}
.panel-title-row{display:flex;align-items:center;justify-content:space-between}
.panel-title-row span{font-size:10px;color:#5caeff}
.module-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}
.module-grid div{
  min-height:37px;padding:7px 8px;display:flex;align-items:center;gap:7px;
  border:1px solid rgba(49,111,214,.24);border-radius:7px;
  background:linear-gradient(90deg,rgba(13,43,91,.85),rgba(7,27,61,.8));
}
.module-grid i{font-style:normal;font-size:10px;color:#79baff}
.module-grid b{font-size:11px;font-weight:600;color:#e5efff}
.benefit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.benefit{
  min-height:82px;padding:10px;display:flex;flex-direction:column;justify-content:center;
  border:1px solid rgba(51,122,230,.32);border-radius:9px;background:rgba(8,32,73,.72);
}
.benefit.full{grid-column:1/-1;min-height:76px;align-items:center;background:linear-gradient(90deg,rgba(26,72,154,.65),rgba(61,38,151,.45))}
.benefit span{font-size:20px;font-weight:900;color:#64cfff}.benefit .benefit-num{font-size:26px;color:#ffbd31}
.benefit b{margin-top:4px;font-size:12px}.benefit small{margin-top:3px;font-size:10px;color:#91a9c9}
.detail-bottom-bar{
  position:fixed;z-index:50;left:50%;bottom:0;width:min(430px,100%);
  transform:translateX(-50%);height:72px;padding:9px 13px;
  display:flex;align-items:center;gap:10px;
  background:rgba(3,12,31,.96);border-top:1px solid rgba(55,119,226,.3);
  backdrop-filter:blur(12px);
}
.bottom-price{width:125px}.bottom-price small{display:block;color:#9cb0cf;font-size:10px}.bottom-price strong{display:block;margin-top:2px;color:#ffb928;font-size:25px}
.detail-bottom-bar button{
  flex:1;height:50px;border:0;border-radius:9px;color:#fff;font-size:16px;font-weight:800;
  background:linear-gradient(90deg,#2377ff,#6447ff 56%,#e62cb5);
  box-shadow:0 0 14px rgba(64,91,255,.3);
}
.detail-bottom-bar em{font-style:normal;font-size:13px;margin-left:4px}

/* page2 v2 */
.module-toggle{
  border:0;background:transparent;color:#67b7ff;font-size:11px;font-weight:700;
  padding:4px 0;display:flex;align-items:center;gap:4px;
}
.module-toggle span{font-size:15px;transition:transform .25s ease}
.modules-panel.expanded .module-toggle span{transform:rotate(180deg)}
.module-more{display:none !important}
.modules-panel.expanded .module-more{display:flex !important}

.price-benefit-row{
  margin-top:12px;
  min-height:64px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(67,130,255,.42);
  border-radius:10px;
  background:linear-gradient(90deg,rgba(15,60,139,.82),rgba(39,42,139,.7),rgba(81,36,145,.58));
  box-shadow:inset 0 0 18px rgba(61,139,255,.08);
  white-space:nowrap;
}
.price-benefit-row strong{
  flex:none;
  color:#ffbe31;
  font-size:25px;
  line-height:1;
  letter-spacing:1px;
}
.price-benefit-main{
  color:#fff;
  font-size:14px;
  font-weight:800;
}
.price-benefit-tag{
  margin-left:auto;
  padding-left:9px;
  border-left:1px solid rgba(169,195,255,.3);
  color:#cfe2ff;
  font-size:11px;
  font-weight:700;
}

.icon-benefits .benefit{
  min-height:112px;
  align-items:center;
  text-align:center;
  justify-content:flex-start;
  padding:9px 6px 8px;
}
.icon-benefits .benefit img{
  width:47px;
  height:47px;
  object-fit:contain;
  display:block;
  margin:0 auto 3px;
}
.icon-benefits .benefit b{
  margin-top:1px;
  font-size:12px;
  line-height:1.25;
  color:#f4f8ff;
}
.icon-benefits .benefit small{
  font-size:9px;
  line-height:1.2;
}

/* page2 v3 — 顶部课程主视觉直接使用指定图片 */
.detail-hero-card.detail-cover-image{
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:14px !important;
  background:#03122b !important;
}
.detail-cover-image::before{display:none !important;}
.detail-cover-image img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/9 !important;
  object-fit:cover !important;
}

html,body{margin:0;min-height:100%;background:#06142f}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif}
.app-page{display:none!important}
.app-page.active-page{display:block!important}
button{font-family:inherit;cursor:pointer}
.flow-page{
  width:430px;min-height:100vh;margin:0 auto;color:#fff;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 15px 22px,rgba(255,255,255,.55) 0 1px,transparent 1.6px) 0 0/117px 143px,
    radial-gradient(circle at 69px 76px,rgba(67,190,255,.4) 0 1px,transparent 1.7px) 0 0/167px 191px,
    linear-gradient(180deg,#020817,#03122b 62%,#020817);
}
.flow-header{height:62px;display:grid;grid-template-columns:42px 1fr 42px;align-items:center;padding:0 14px;background:rgba(2,8,23,.95);border-bottom:1px solid rgba(65,124,222,.16)}
.flow-header h1{font-size:18px;text-align:center;margin:0}
.flow-header button{border:0;background:none;color:#fff;font-size:32px;padding:0}
.flow-content{padding:15px 14px 35px}
.steps{display:flex;align-items:center;justify-content:center;gap:9px;padding:10px;border:1px solid rgba(61,117,216,.3);border-radius:12px;background:rgba(7,26,60,.72);margin-bottom:16px}
.steps>span{color:#61a7ff}
.step{display:flex;align-items:center;gap:6px;color:#6f829f;font-size:11px}
.step i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;background:#111b32;border:1px solid #263752}
.step.active{color:#fff}.step.active i{background:linear-gradient(135deg,#0b8cff,#5147ff);border-color:#4f92ff;box-shadow:0 0 12px rgba(43,118,255,.45)}
.step.done{color:#9eb3d2}.step.done i{color:#62a7ff}
.signup-form{border:1px solid rgba(49,108,208,.25);border-radius:12px;overflow:hidden;background:rgba(6,24,56,.74)}
.signup-form>label{display:flex;gap:11px;padding:14px 13px;border-bottom:1px solid rgba(79,111,166,.18)}
.signup-form>label>span{color:#6dbdff;width:20px;padding-top:2px}
.signup-form>label>div{flex:1}.signup-form b{display:block;font-size:14px;margin-bottom:8px}
.signup-form input[type=text],.signup-form input:not([type]){width:100%;box-sizing:border-box}
.signup-form input#name,.signup-form input#phone,.signup-form input#wechat,.signup-form input#referrer{width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:13px;padding:0}
.signup-form input::placeholder{color:#647895}
.need-row{padding:15px 13px}.need-row>b{margin-bottom:12px}.need-row>div{display:flex;gap:32px}.need-row label{font-size:13px;color:#dce8fb}
.need-row input{accent-color:#2878ff}
.privacy-note{margin:17px 6px 6px;color:#879bb9;font-size:11px}
.form-error{min-height:17px;margin:5px 6px;color:#ff7188;font-size:11px}
.gradient-btn{width:100%;height:52px;border:0;border-radius:9px;color:#fff;font-size:16px;font-weight:800;background:linear-gradient(90deg,#2478ff,#6547ff 55%,#ed2cb2);box-shadow:0 0 15px rgba(77,75,255,.28)}
.safe-foot{text-align:center;color:#8194b2;font-size:11px;padding:18px 0 24px}
.pay-card{margin-top:13px;padding:15px;border:1px solid rgba(48,111,214,.34);border-radius:12px;background:linear-gradient(180deg,rgba(8,31,72,.9),rgba(5,21,49,.9))}
.pay-card h2{font-size:16px;margin:0 0 13px}.pay-title{display:flex;justify-content:space-between;align-items:center}.pay-title button{border:0;background:none;color:#4c75ff}
.confirm-list p{display:flex;justify-content:space-between;gap:15px;margin:12px 0;color:#9cafca;font-size:12px}.confirm-list b{color:#f4f8ff;font-weight:500;text-align:right}
.amount-card small{color:#879ab7}.pay-amount{font-size:57px;line-height:1.05;color:#ffad21;font-weight:800;margin:3px 0 4px}.pay-amount sup{font-size:24px;margin-right:3px}.amount-card>p{font-size:12px;color:#9cafca;margin:0 0 18px}
.wechat-pay{width:100%;height:54px;border:0;border-radius:7px;background:linear-gradient(#2fd14d,#13a92d);color:#fff;font-size:18px;font-weight:800}
.pay-safe{text-align:center;color:#8498b7;font-size:11px;margin-top:13px}.after-pay{display:flex;align-items:center;justify-content:space-between}.after-pay h3{font-size:14px;margin:0 0 6px}.after-pay p{font-size:12px;line-height:1.7;color:#a9bbd4;margin:0}.shield-code{width:58px;height:68px;display:grid;place-items:center;font-size:30px;color:#7ee6ff;border:2px solid #268cff;clip-path:polygon(50% 0,95% 18%,87% 75%,50% 100%,13% 75%,5% 18%);background:rgba(16,87,182,.25);filter:drop-shadow(0 0 9px #167fff)}
.success-wrap{padding:70px 24px;text-align:center}.success-icon{width:90px;height:90px;border-radius:50%;display:grid;place-items:center;margin:0 auto 22px;font-size:48px;color:#fff;background:linear-gradient(135deg,#1ecfff,#3e5cff);box-shadow:0 0 35px rgba(42,157,255,.45)}
.success-wrap h2{font-size:26px;margin:0}.success-price{font-size:42px;color:#ffb526;font-weight:900;margin:10px 0}.success-wrap>p{color:#a9bad4}
.success-box{text-align:left;margin:32px 0;padding:17px;border:1px solid rgba(57,122,226,.35);border-radius:12px;background:rgba(7,29,66,.75)}.success-box b{display:block;margin-bottom:8px}.success-box span{font-size:12px;line-height:1.7;color:#aabbd3}
@media(max-width:430px){.flow-page{width:100%}}

/* v3 fix: 首页“查看课程详情”是真正可点击按钮，视觉保持原样 */
.course-detail-btn{
  width:100%;
  border:0;
  font-family:inherit;
  cursor:pointer;
  box-sizing:border-box;
}

/* v4 简化报名 + 支付后客服二维码 + 本地客户统计后台 */
.simple-form b em{font-style:normal;color:#ff6f8c}.simple-form b small{font-weight:500;color:#7f96b7;margin-left:5px}
.simple-form textarea{width:100%;box-sizing:border-box;resize:none;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:13px;line-height:1.6}
.simple-form textarea::placeholder{color:#647895}
.text-btn{margin-top:12px;border:0;background:transparent;color:#8fa7c8;font-size:13px}
.qr-modal{display:none;position:fixed;z-index:999;inset:0;background:rgba(0,4,15,.78);backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:20px}
.qr-modal.open{display:flex}.qr-dialog{position:relative;width:min(330px,88vw);padding:24px 20px;text-align:center;border:1px solid rgba(73,137,255,.45);border-radius:18px;background:linear-gradient(180deg,#092451,#06152f);box-shadow:0 18px 60px rgba(0,0,0,.45),0 0 30px rgba(49,109,255,.18);color:#fff}
.qr-dialog h2{margin:0 0 7px;font-size:20px}.qr-dialog p{margin:0 0 18px;color:#aebfda;font-size:12px;line-height:1.6}.qr-dialog small{display:block;margin-top:12px;color:#7086a7;font-size:10px;line-height:1.5}
.qr-close{position:absolute;right:10px;top:8px;border:0;background:transparent;color:#9eb1ce;font-size:28px}
.qr-placeholder{width:210px;height:210px;margin:auto;padding:10px;border-radius:14px;background:#fff;box-sizing:border-box}.qr-grid{width:100%;height:100%;display:grid;place-items:center;color:#16305e;font-weight:900;font-size:23px;line-height:1.4;background:repeating-conic-gradient(#071b3d 0 25%,#fff 0 50%) 50%/22px 22px}
.admin-page{width:min(100%,900px);min-height:100vh;margin:auto;background:#f5f7fb;color:#17233c;font-family:inherit}
.admin-header{height:64px;padding:0 18px;display:grid;grid-template-columns:80px 1fr 80px;align-items:center;background:#fff;border-bottom:1px solid #e5e9f1}.admin-header h1{text-align:center;font-size:18px}.admin-header button{border:0;background:transparent;color:#2867e8;font-size:14px}.admin-header button:first-child{text-align:left;font-size:30px}
.admin-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px}.admin-summary div{padding:18px;border-radius:12px;background:#fff;box-shadow:0 3px 14px rgba(29,53,93,.06)}.admin-summary small{display:block;color:#7a879d}.admin-summary strong{display:block;margin-top:8px;font-size:25px}
.admin-list-wrap{margin:0 18px 30px;padding:18px;background:#fff;border-radius:12px}.admin-list-title{display:flex;align-items:center;justify-content:space-between}.admin-list-title h2{font-size:16px}.admin-list-title button{border:0;background:#f2f5fa;color:#8793a7;border-radius:7px;padding:7px 9px}
.admin-row{display:grid;grid-template-columns:1.1fr 1.5fr 1.4fr .8fr 1.5fr;gap:8px;padding:12px 6px;border-top:1px solid #edf0f5;font-size:12px;align-items:center}.admin-row.head{color:#7d899c;font-weight:700;background:#fafbfc}.admin-row .paid{color:#17a95a;font-weight:700}.admin-empty{text-align:center;color:#9aa5b6;padding:45px 10px}
@media(max-width:600px){.admin-row{grid-template-columns:1fr 1.3fr 1fr}.admin-row span:nth-child(3),.admin-row span:nth-child(5){display:none}.admin-summary{gap:7px;padding:12px}.admin-summary div{padding:12px}.admin-summary strong{font-size:19px}}

/* v5 正式客服二维码 */
.real-qr{
  width:230px;
  height:230px;
  padding:8px;
  background:#fff;
}
.real-qr img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:6px;
}

/* v9：真正复原首页。绝不再改 199 元、AI、光圈的原始定位。 */

/* 新 Logo：原图原色，小尺寸，不滤镜、不变色 */
#homePage .logo{
  width:150px !important;
  height:58px !important;
}

#homePage .logo img{
  display:block !important;
  width:150px !important;
  height:auto !important;
  max-height:58px !important;
  object-fit:contain !important;
  filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

/* 全页面光粒闪烁/轻微跳跃，只做背景动画，不改变任何内容布局 */
.phone::before{
  animation:v9StarBlink 1.35s ease-in-out infinite alternate !important;
}
@keyframes v9StarBlink{
  0%{opacity:.42;filter:brightness(.82);transform:translateY(1px)}
  38%{opacity:1;filter:brightness(1.55);transform:translateY(-1px)}
  68%{opacity:.58;filter:brightness(1);transform:translateY(1px)}
  100%{opacity:.95;filter:brightness(1.4);transform:translateY(-2px)}
}
#homePage .particles i{
  animation:v9ParticleBlink 1.05s ease-in-out infinite alternate !important;
}
#homePage .particles i:nth-child(2n){animation-duration:.78s !important;animation-delay:-.2s !important}
#homePage .particles i:nth-child(3n){animation-duration:1.42s !important;animation-delay:-.55s !important}
@keyframes v9ParticleBlink{
  from{opacity:.2;transform:translateY(2px) scale(.75);filter:brightness(.8)}
  to{opacity:1;transform:translateY(-3px) scale(1.25);filter:brightness(1.65)}
}
#homePage .title,
#homePage .price,
#homePage .cube-wrap,
#homePage .section{
  transform: translateY(-30px);
}
#homePage .title{
  transform: translateY(-50px);
}
#homePage .title{
  transform: translateY(-30px) !important;
  line-height: 0.82 !important;
}
/* 大标题：离 Logo 远一点，两排稍微分开 */
#homePage .title{
  transform: translateY(-18px) !important;
  line-height: 1 !important;
}

/* 199 元整条稍微往下 */
#homePage .price{
  transform: translateY(-15px) !important;
}
#homePage .particles{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:2 !important;
  pointer-events:none !important;
}

#homePage .particles i{
  animation:v9ParticleBlink 1.05s ease-in-out infinite alternate !important;
}

#homePage .particles i:nth-child(2n){
  animation-duration:.78s !important;
  animation-delay:-.2s !important;
}

#homePage .particles i:nth-child(3n){
  animation-duration:1.42s !important;
  animation-delay:-.55s !important;
}
#homePage{
  position:relative !important;
}
#homePage{
  position:relative;
}

#homePage .page-particles{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

#homePage .page-particles i{
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#eaffff;
  box-shadow:
    0 0 4px #fff,
    0 0 8px #2c9fff;

  animation:pageParticleJump 1.05s ease-in-out infinite alternate;
}

#homePage .page-particles i:nth-child(3n){
  width:3px;
  height:3px;
  background:#69d8ff;
}

#homePage .page-particles i:nth-child(4n){
  background:#a879ff;
  box-shadow:
    0 0 4px #d9c2ff,
    0 0 8px #724cff;
}

#homePage .page-particles i:nth-child(5n)::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:1px;
  height:13px;
  transform:translate(-50%,-50%);
  background:linear-gradient(
    transparent,
    rgba(255,255,255,.75),
    transparent
  );
}

#homePage .page-particles i:nth-child(2n){
  animation-duration:.78s;
  animation-delay:-.2s;
}

#homePage .page-particles i:nth-child(3n){
  animation-duration:1.42s;
  animation-delay:-.55s;
}

@keyframes pageParticleJump{
  from{
    opacity:.2;
    transform:translateY(2px) scale(.75);
    filter:brightness(.8);
  }

  to{
    opacity:1;
    transform:translateY(-3px) scale(1.25);
    filter:brightness(1.65);
  }
}
#homePage > section{
  position:relative;
  z-index:2;
}
/* =========================
   全首页动态闪跃粒子
   ========================= */

#homePage{
  position:relative !important;
}

#homePage .auto-page-particles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  pointer-events:none;
  z-index:3;
}

#homePage .auto-page-particles i{
  position:absolute;
  display:block;

  border-radius:50%;

  background:#dffcff;

  box-shadow:
    0 0 3px #ffffff,
    0 0 7px #37c8ff,
    0 0 12px rgba(55,200,255,.7);

  animation:
    autoParticleJump 1s
    ease-in-out
    infinite alternate;
}


/* 蓝色粒子 */
#homePage .auto-page-particles i:nth-child(3n){
  background:#4fdcff;

  box-shadow:
    0 0 4px #63e5ff,
    0 0 10px #168dff;
}


/* 紫色粒子 */
#homePage .auto-page-particles i:nth-child(5n){
  background:#b17cff;

  box-shadow:
    0 0 4px #dabfff,
    0 0 10px #7a4cff;
}


/* 部分做成星芒 */
#homePage .auto-page-particles i:nth-child(7n)::before{
  content:"";

  position:absolute;
  left:50%;
  top:50%;

  width:1px;
  height:14px;

  transform:translate(-50%,-50%);

  background:
    linear-gradient(
      transparent,
      rgba(255,255,255,.95),
      transparent
    );
}


@keyframes autoParticleJump{

  0%{
    opacity:.15;

    transform:
      translateY(4px)
      scale(.55);

    filter:brightness(.7);
  }

  45%{
    opacity:1;

    transform:
      translateY(-3px)
      scale(1.45);

    filter:brightness(1.8);
  }

  70%{
    opacity:.45;

    transform:
      translateY(1px)
      scale(.85);
  }

  100%{
    opacity:1;

    transform:
      translateY(-5px)
      scale(1.2);

    filter:brightness(1.6);
  }
}
#homePage .section-title{
  position:relative !important;
}


/* 标题左右的小闪光 */
#homePage .section-title::before,
#homePage .section-title::after{

  animation:
    titleLightBlink
    .9s
    ease-in-out
    infinite alternate !important;
}


@keyframes titleLightBlink{

  from{
    opacity:.35;

    filter:
      brightness(.8)
      drop-shadow(0 0 2px #168cff);
  }

  to{
    opacity:1;

    filter:
      brightness(2)
      drop-shadow(0 0 7px #29c9ff);
  }
}
/* =========================
   课程详情页背景高级闪烁
   ========================= */

#detailPage{
  position:relative !important;
  overflow:hidden;
}

/* 第一层：整页背景轻微呼吸 */
#detailPage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;

  background:
    radial-gradient(circle at 18% 20%, rgba(73,167,255,.13), transparent 28%),
    radial-gradient(circle at 82% 34%, rgba(107,76,255,.11), transparent 30%),
    radial-gradient(circle at 45% 72%, rgba(45,201,255,.08), transparent 32%);

  animation:detailBgBreath 3.2s ease-in-out infinite alternate;
}

@keyframes detailBgBreath{
  0%{
    opacity:.35;
    filter:brightness(.85);
  }

  50%{
    opacity:.72;
    filter:brightness(1.2);
  }

  100%{
    opacity:.45;
    filter:brightness(1);
  }
}


/* 第二层：星点轻微闪烁 */
#detailPage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;

  background:
    radial-gradient(circle at 8% 10%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 22% 18%, #63dfff 0 1.2px, transparent 2px),
    radial-gradient(circle at 39% 12%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 61% 21%, #9a79ff 0 1.2px, transparent 2px),
    radial-gradient(circle at 84% 15%, #5ad9ff 0 1px, transparent 1.8px),

    radial-gradient(circle at 14% 38%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 32% 44%, #55d7ff 0 1.2px, transparent 2px),
    radial-gradient(circle at 58% 36%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 76% 48%, #9e72ff 0 1.1px, transparent 2px),
    radial-gradient(circle at 93% 41%, #fff 0 1px, transparent 1.8px),

    radial-gradient(circle at 9% 63%, #60dcff 0 1.2px, transparent 2px),
    radial-gradient(circle at 27% 71%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 49% 61%, #9b7cff 0 1.2px, transparent 2px),
    radial-gradient(circle at 68% 74%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 88% 66%, #5ad9ff 0 1.2px, transparent 2px),

    radial-gradient(circle at 17% 88%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 41% 84%, #63dfff 0 1.2px, transparent 2px),
    radial-gradient(circle at 64% 92%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 86% 86%, #9a79ff 0 1.2px, transparent 2px);

  animation:detailStarsBlink 1.8s ease-in-out infinite alternate;
}

@keyframes detailStarsBlink{
  0%{
    opacity:.22;
    filter:brightness(.8);
  }

  35%{
    opacity:.85;
    filter:brightness(1.45);
  }

  68%{
    opacity:.38;
    filter:brightness(.95);
  }

  100%{
    opacity:.75;
    filter:brightness(1.3);
  }
}


/* 保证课程内容在闪光上方 */
#detailPage > *{
  position:relative;
  z-index:2;
}
/* 立即报名按钮：渐变流光闪烁 */
#detailPage .bottom-bar button{
  position:relative;
  overflow:hidden;

  background:linear-gradient(
    90deg,
    #176dff,
    #5b46ff,
    #b02cff,
    #ff2fb2,
    #5b46ff,
    #176dff
  );

  background-size:300% 100%;

  color:#fff;
  border:none;

  box-shadow:
    0 0 10px rgba(70,110,255,.45),
    0 0 18px rgba(207,47,255,.28);

  animation:
    signupGradientMove 2.4s linear infinite,
    signupGlow 1.4s ease-in-out infinite alternate;
}


/* 渐变不断流动 */
@keyframes signupGradientMove{
  0%{
    background-position:0% 50%;
  }

  100%{
    background-position:300% 50%;
  }
}


/* 整个按钮呼吸发光 */
@keyframes signupGlow{
  0%{
    box-shadow:
      0 0 8px rgba(65,120,255,.35),
      0 0 12px rgba(202,44,255,.2);

    filter:brightness(.95);
  }

  100%{
    box-shadow:
      0 0 14px rgba(72,150,255,.75),
      0 0 26px rgba(236,40,215,.48);

    filter:brightness(1.18);
  }
}
#detailPage .bottom-bar button::after{
  content:"";
  position:absolute;
  top:-30%;
  left:-35%;

  width:26%;
  height:160%;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.5),
    transparent
  );

  transform:skewX(-20deg);

  animation:signupLightSweep 2.2s ease-in-out infinite;
}

@keyframes signupLightSweep{
  0%{
    left:-35%;
    opacity:0;
  }

  15%{
    opacity:1;
  }

  55%{
    left:115%;
    opacity:.9;
  }

  100%{
    left:115%;
    opacity:0;
  }
}
/* 只让底部“立即报名 ¥199”按钮渐变 */
#detailPage .bottom-bar button{
  background:linear-gradient(
    90deg,
    #176dff,
    #5b46ff,
    #b02cff,
    #ff2fb2,
    #5b46ff,
    #176dff
  ) !important;

  background-size:300% 100% !important;

  animation:
    signupGradientMove 2.2s linear infinite,
    signupGlow 1.2s ease-in-out infinite alternate !important;
}
/* ==================================================
   三个主按钮统一：蓝紫粉渐变 + 流动 + 闪光
   ================================================== */

#homePage .btn,
#detailPage .bottom-bar button,
#signupPage .gradient-btn{
  position:relative !important;
  overflow:hidden !important;

  color:#fff !important;
  font-weight:700 !important;

  border:none !important;

  background:linear-gradient(
    90deg,
    #1670ff 0%,
    #356cff 20%,
    #7049ff 42%,
    #b934e8 65%,
    #ed28b9 82%,
    #1670ff 100%
  ) !important;

  background-size:300% 100% !important;

  animation:
    mainButtonGradient 2.4s linear infinite,
    mainButtonGlow 1.3s ease-in-out infinite alternate !important;

  box-shadow:
    0 0 8px rgba(38,118,255,.35),
    0 0 18px rgba(210,45,235,.25) !important;
}


/* 渐变从左往右流动 */
@keyframes mainButtonGradient{
  0%{
    background-position:0% 50%;
  }

  100%{
    background-position:300% 50%;
  }
}


/* 呼吸发光 */
@keyframes mainButtonGlow{
  0%{
    filter:brightness(.95);
    box-shadow:
      0 0 7px rgba(40,120,255,.3),
      0 0 13px rgba(211,49,235,.18);
  }

  100%{
    filter:brightness(1.16);
    box-shadow:
      0 0 14px rgba(53,146,255,.7),
      0 0 25px rgba(232,43,219,.45);
  }
}


/* 白色流光扫过 */
#homePage .btn::after,
#detailPage .bottom-bar button::after,
#signupPage .gradient-btn::after{
  content:"";
  position:absolute;

  top:-40%;
  left:-35%;

  width:22%;
  height:180%;

  pointer-events:none;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.12),
    rgba(255,255,255,.8),
    rgba(255,255,255,.12),
    transparent
  );

  transform:skewX(-22deg);

  animation:mainButtonSweep 2.1s ease-in-out infinite;
}


@keyframes mainButtonSweep{
  0%{
    left:-35%;
    opacity:0;
  }

  15%{
    opacity:1;
  }

  60%{
    left:115%;
    opacity:.9;
  }

  100%{
    left:115%;
    opacity:0;
  }
}
/* ==================================================
   三个主按钮：明显蓝→紫→粉流动渐变 + 白色闪光
   一定放在 style.css 最下面
   ================================================== */

/* 首页：查看课程详情 */
#homePage .course-detail-btn,

/* 课程详情页：立即报名 ¥199 */
#detailPage button[data-go="signupPage"],

/* 报名页：下一步支付 ¥199 */
#signupPage .gradient-btn {

  position: relative !important;
  overflow: hidden !important;

  color: #ffffff !important;
  font-weight: 800 !important;

  border: none !important;

  /* 故意把颜色差距拉大，肉眼明显看到渐变 */
  background-image: linear-gradient(
    110deg,
    #0088ff 0%,
    #245cff 18%,
    #713cff 38%,
    #bd2cff 58%,
    #ff20b7 78%,
    #713cff 90%,
    #0088ff 100%
  ) !important;

  background-size: 400% 100% !important;

  animation:
    szButtonGradient 3s linear infinite,
    szButtonGlow 1.25s ease-in-out infinite alternate !important;

  box-shadow:
    0 0 8px rgba(0, 140, 255, .45),
    0 0 18px rgba(183, 44, 255, .32) !important;
}


/* 蓝紫粉不断从左往右流动 */
@keyframes szButtonGradient {

  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}


/* 呼吸亮度 */
@keyframes szButtonGlow {

  0% {
    filter: brightness(.92);
    box-shadow:
      0 0 6px rgba(0, 132, 255, .35),
      0 0 12px rgba(199, 42, 255, .20);
  }

  100% {
    filter: brightness(1.22);
    box-shadow:
      0 0 14px rgba(0, 190, 255, .75),
      0 0 26px rgba(255, 35, 194, .50);
  }
}


/* ==================================================
   一道明显的白色流光从左向右扫
   ================================================== */

#homePage .course-detail-btn::after,
#detailPage button[data-go="signupPage"]::after,
#signupPage .gradient-btn::after {

  content: "";

  position: absolute;

  top: -50%;
  left: -45%;

  width: 28%;
  height: 200%;

  pointer-events: none;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.08) 20%,
    rgba(255,255,255,.9) 50%,
    rgba(255,255,255,.08) 80%,
    transparent 100%
  );

  transform: skewX(-22deg);

  animation: szButtonSweep 2.4s ease-in-out infinite;
}


@keyframes szButtonSweep {

  0% {
    left: -45%;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  55% {
    left: 120%;
    opacity: 1;
  }

  100% {
    left: 120%;
    opacity: 0;
  }
}
/* 首页：查看课程详情 */
#homePage button,

/* 报名页：下一步支付 */
#signupPage button[type="submit"]{
  position:relative !important;
  overflow:hidden !important;

  background-image:linear-gradient(
    110deg,
    #0088ff 0%,
    #245cff 18%,
    #713cff 38%,
    #bd2cff 58%,
    #ff20b7 78%,
    #713cff 90%,
    #0088ff 100%
  ) !important;

  background-size:400% 100% !important;

  animation:
    szButtonGradient 3s linear infinite,
    szButtonGlow 1.25s ease-in-out infinite alternate !important;

  color:#fff !important;
  border:none !important;
}
#homePage button::after,
#signupPage button[type="submit"]::after{
  content:"";
  position:absolute;
  top:-50%;
  left:-45%;
  width:28%;
  height:200%;
  pointer-events:none;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.1),
    rgba(255,255,255,.9),
    rgba(255,255,255,.1),
    transparent
  );

  transform:skewX(-22deg);
  animation:szButtonSweep 2.4s ease-in-out infinite;
}
/* ===== 强制：首页查看课程详情 + 报名页下一步，使用立即报名同款渐变 ===== */

#homePage button.course-detail-btn.flash-btn,
#signupPage button.gradient-btn.flash-btn{
  position:relative !important;
  overflow:hidden !important;

  background:linear-gradient(
    105deg,
    #008cff 0%,
    #3864ff 20%,
    #7c3cff 42%,
    #bd2ee8 65%,
    #ff27bb 82%,
    #7b3cff 92%,
    #008cff 100%
  ) !important;

  background-size:350% 100% !important;

  animation:
    flashBtnGradient 2.8s linear infinite,
    flashBtnGlow 1.15s ease-in-out infinite alternate !important;

  color:#fff !important;
  border:none !important;

  box-shadow:
    0 0 9px rgba(44,134,255,.45),
    0 0 20px rgba(214,41,238,.28) !important;
}


/* 白色流光，同立即报名 */
#homePage button.course-detail-btn.flash-btn::after,
#signupPage button.gradient-btn.flash-btn::after{
  content:"" !important;
  position:absolute !important;
  top:-60% !important;
  left:-40% !important;

  width:28% !important;
  height:220% !important;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.1),
    rgba(255,255,255,.9),
    rgba(255,255,255,.1),
    transparent
  ) !important;

  transform:skewX(-22deg) !important;
  pointer-events:none !important;

  animation:flashBtnSweep 2.3s ease-in-out infinite !important;
}
/* =========================================
   只修改：
   1. 查看课程详情
   2. 下一步：支付 ¥199
   蓝紫粉渐变流动 + 白色亮光扫过
   ========================================= */

#homePage .course-detail-btn,
#signupPage .gradient-btn{
  position:relative !important;
  overflow:hidden !important;

  color:#fff !important;
  font-weight:800 !important;
  border:none !important;

  background:linear-gradient(
    100deg,
    #078cff 0%,
    #2864ff 20%,
    #7146ff 42%,
    #b52fe8 62%,
    #ff27bd 82%,
    #7146ff 92%,
    #078cff 100%
  ) !important;

  background-size:350% 100% !important;

  animation:twoBtnGradient 2.8s linear infinite !important;

  box-shadow:
    0 0 10px rgba(40,130,255,.45),
    0 0 20px rgba(220,45,235,.28) !important;
}


/* 蓝紫粉渐变流动 */
@keyframes twoBtnGradient{
  0%{
    background-position:0% 50%;
  }

  50%{
    background-position:100% 50%;
  }

  100%{
    background-position:0% 50%;
  }
}


/* 白色亮光扫过 */
#homePage .course-detail-btn::after,
#signupPage .gradient-btn::after{
  content:"";
  position:absolute;

  top:-70%;
  left:-45%;

  width:30%;
  height:240%;

  pointer-events:none;

  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.08) 20%,
    rgba(255,255,255,.9) 50%,
    rgba(255,255,255,.12) 75%,
    transparent 100%
  );

  transform:skewX(-20deg);

  animation:twoBtnSweep 2.2s ease-in-out infinite;
}


@keyframes twoBtnSweep{
  0%{
    left:-45%;
    opacity:0;
  }

  12%{
    opacity:1;
  }

  55%{
    left:120%;
    opacity:1;
  }

  100%{
    left:120%;
    opacity:0;
  }
}
/* 只给这两个按钮加一道白色闪光 */

#courseDetailGlowBtn,
#signupPayGlowBtn{
  position:relative !important;
  overflow:hidden !important;
}

/* 白色扫光 */
#courseDetailGlowBtn::after,
#signupPayGlowBtn::after{
  content:"";
  position:absolute;
  top:-70%;
  left:-45%;

  width:28%;
  height:240%;

  pointer-events:none;

  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.08) 20%,
    rgba(255,255,255,.45) 38%,
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,.45) 62%,
    rgba(255,255,255,.08) 80%,
    transparent 100%
  );

  transform:skewX(-20deg);

  animation:buttonWhiteSweep 2s ease-in-out infinite;
}

@keyframes buttonWhiteSweep{
  0%{
    left:-45%;
    opacity:0;
  }

  10%{
    opacity:1;
  }

  55%{
    left:120%;
    opacity:1;
  }

  100%{
    left:120%;
    opacity:0;
  }
}
/* =========================================
   只改两个按钮：
   1. 查看课程详情
   2. 下一步：支付 ¥199
   其他按钮不动（尤其立即报名不动）
========================================= */

.btn-flow-light{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  color: #ffffff !important;
  border: none !important;

  /* 明显蓝 → 紫 → 粉渐变 */
  background: linear-gradient(
    90deg,
    #149bff 0%,
    #237eff 24%,
    #4b67ff 48%,
    #7a57ff 68%,
    #b34cff 84%,
    #ff43c7 100%
  ) !important;

  background-size: 220% 100% !important;
  animation: btnFlowGradientMove 3s linear infinite !important;

  box-shadow:
    0 0 14px rgba(35, 126, 255, 0.35),
    0 0 24px rgba(179, 76, 255, 0.22) !important;
}

/* 白色闪光扫过去 */
.btn-flow-light::after{
  content: "";
  position: absolute;
  top: -35%;
  left: -30%;
  width: 22%;
  height: 170%;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.06) 18%,
    rgba(255,255,255,0.35) 35%,
    rgba(255,255,255,0.92) 50%,
    rgba(255,255,255,0.35) 65%,
    rgba(255,255,255,0.06) 82%,
    transparent 100%
  );

  transform: skewX(-22deg);
  animation: btnFlowWhiteSweep 2.4s ease-in-out infinite !important;
}

/* 渐变底色缓慢流动 */
@keyframes btnFlowGradientMove{
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}

/* 白色高光周期扫过 */
@keyframes btnFlowWhiteSweep{
  0%{
    left: -30%;
    opacity: 0;
  }
  12%{
    opacity: 1;
  }
  55%{
    left: 110%;
    opacity: 1;
  }
  100%{
    left: 110%;
    opacity: 0;
  }
}
#homePage #myEnrollEntry{
  position:absolute !important;

  top:22px !important;
  right:18px !important;

  left:auto !important;
  bottom:auto !important;

  margin:0 !important;
  transform:none !important;

  z-index:999 !important;

  width:auto !important;
  min-width:88px !important;
  height:34px !important;

  padding:0 14px !important;

  display:none;

  border:1px solid rgba(100,170,255,.55) !important;
  border-radius:18px !important;

  background:linear-gradient(
    90deg,
    #275dff,
    #8b42ff,
    #d82fd6
  ) !important;

  color:#fff !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:34px !important;
  text-align:center !important;

  white-space:nowrap !important;
}

#homePage #myEnrollEntry.show{
  display:block !important;
}