/* =========================================================
   UI Polish v1 —— 全站丝滑交互层（叠加式，不改变原有布局）
   站点品牌：粉 #FF2D78 / 黄 #FFE500 / 蓝 #00B7FF / 黑描边
   ========================================================= */
:root{
  --ui-ease: cubic-bezier(.22,1,.36,1);
  --ui-ease-out: cubic-bezier(.16,1,.3,1);
  --ui-fast: .18s;
  --ui-mid: .32s;
  --ui-slow: .55s;
  --ui-radius: 16px;
  --ui-ink: #15110A;
  --ui-line: rgba(21,17,10,.84);
  --ui-shadow-1: 0 2px 0 rgba(21,17,10,.9), 0 8px 24px rgba(21,17,10,.10);
  --ui-shadow-2: 0 4px 0 rgba(21,17,10,.9), 0 18px 44px rgba(21,17,10,.18);
}

html{ scroll-behavior: smooth; }
body{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

::selection{ background: #FF2D78; color:#fff; }

/* 滚动条 */
*{ scrollbar-width: thin; scrollbar-color: #FF2D78 rgba(21,17,10,.08); }
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: rgba(21,17,10,.06); }
*::-webkit-scrollbar-thumb{ background: linear-gradient(180deg,#FF2D78,#FF6B00); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover{ background: linear-gradient(180deg,#FF2D78,#CC44FF); background-clip: padding-box; }

/* 顶部滚动进度条 */
.ui-progress{ position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 9999;
  background: linear-gradient(90deg,#FF2D78,#FFE500,#00B7FF,#CC44FF);
  box-shadow: 0 0 12px rgba(255,45,120,.7); transition: width .08s linear; pointer-events:none; }

/* 顶栏玻璃 + 滚动加深 */
.gtop, .topbar, .cz-top, header.topbar, .nav{
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  transition: box-shadow var(--ui-mid) var(--ui-ease), background var(--ui-mid);
}
.gtop.ui-scrolled, .topbar.ui-scrolled, header.ui-scrolled{
  box-shadow: 0 10px 30px rgba(21,17,10,.18);
}
.gtop.ui-scrolled{ background: rgba(255,45,120,.92) !important; }

/* 按钮：按压缩放 + 悬停抬升 + 光泽 */
button, .btn, a.btn, .bill-pill, .gbtn>button, .acc-pill a{
  position: relative; overflow: hidden;
  transition: transform var(--ui-fast) var(--ui-ease), box-shadow var(--ui-fast) var(--ui-ease),
              background-color var(--ui-fast), color var(--ui-fast), border-color var(--ui-fast);
  will-change: transform;
}
button:hover, .btn:hover, a.btn:hover, .bill-pill:hover, .gbtn>button:hover{
  transform: translateY(-2px);
}
button:active, .btn:active, a.btn:active, .bill-pill:active, .gbtn>button:active{
  transform: translateY(0) scale(.97);
}
button:focus-visible, a:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 3px solid #00B7FF; outline-offset: 2px; border-radius: 10px;
}

/* 点击涟漪 */
.ui-ripple{ position:absolute; border-radius:50%; transform: scale(0); pointer-events:none;
  background: radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(255,255,255,.25) 45%, transparent 70%);
  animation: uiRipple .65s var(--ui-ease-out) forwards; mix-blend-mode: screen; }
@keyframes uiRipple{ to{ transform: scale(2.6); opacity: 0; } }

/* 卡片：悬停抬升 + 指针聚光 + 渐变描边 */
.ui-spot{ position: relative; overflow: hidden; transition: transform var(--ui-mid) var(--ui-ease), box-shadow var(--ui-mid) var(--ui-ease), border-color var(--ui-fast); }
.ui-spot::before{
  content:''; position:absolute; inset:-1px; border-radius: inherit; pointer-events:none;
  background: radial-gradient(340px circle at var(--ui-mx,50%) var(--ui-my,50%),
              rgba(255,229,0,.20), rgba(0,183,255,.12) 35%, transparent 62%);
  opacity: 0; transition: opacity var(--ui-mid) var(--ui-ease); z-index: 0;
}
.ui-spot:hover::before{ opacity: 1; }
.ui-spot > *{ position: relative; z-index: 1; }
.ui-spot:hover{ transform: translateY(-3px); }

.card, .kpi, .lesson, .q-card, .stu, .plane-card, .feedback-card, .ai-card, .bill-card, .feature, .price-card{
  transition: transform var(--ui-mid) var(--ui-ease), box-shadow var(--ui-mid) var(--ui-ease), border-color var(--ui-fast);
}
.card:hover, .lesson:hover, .q-card:hover, .stu:hover, .feedback-card:hover, .ai-card:hover, .feature:hover, .price-card:hover, .kpi:hover{
  box-shadow: var(--ui-shadow-2);
}
.q-card:hover, .lesson:hover{ transform: translateY(-2px); }

/* 输入框：专注光晕 */
input, select, textarea{
  transition: border-color var(--ui-fast), box-shadow var(--ui-fast), background var(--ui-fast);
}
input:focus, select:focus, textarea:focus{
  box-shadow: 0 0 0 4px rgba(0,183,255,.16), 0 2px 0 rgba(21,17,10,.9);
}

/* 导航：下划线滑动 */
.nav a, .tabs button, #nav button{ position: relative; }
.nav a::after, .tabs button::after{
  content:''; position:absolute; left: 50%; bottom: 6px; height: 3px; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg,#FFE500,#FF6B00);
  transform: translateX(-50%); transition: width var(--ui-mid) var(--ui-ease);
}
.nav a:hover::after, .tabs button:hover::after, .nav a.active::after{ width: 60%; }

/* 页面进入：内容淡入上浮（延迟 stagger 由 JS 添加） */
@keyframes uiPageIn{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
.ui-ready .page, .ui-ready .view.show, .ui-ready .wrap, .ui-ready main{
  animation: uiPageIn .5s var(--ui-ease-out) both;
}
.ui-reveal{ opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ui-ease-out), transform .55s var(--ui-ease-out); }
.ui-reveal.ui-in{ opacity: 1; transform: none; }

/* 数字滚动计数 */
[data-ui-count]{ font-variant-numeric: tabular-nums; }

/* 骨架屏 */
@keyframes uiShimmer{ 0%{ background-position: -300px 0; } 100%{ background-position: 300px 0; } }
.ui-skeleton{ border-radius: 12px; background: linear-gradient(90deg, rgba(21,17,10,.06) 25%, rgba(21,17,10,.12) 37%, rgba(21,17,10,.06) 63%);
  background-size: 600px 100%; animation: uiShimmer 1.25s linear infinite; }

/* 弹窗：弹性入场 */
.modal .box, .modal-box, .drawer-box{ animation: uiPop .32s var(--ui-ease-out) both; }
@keyframes uiPop{ from{ opacity:0; transform: translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }
.modal{ transition: opacity .2s var(--ui-ease); }

/* Toast 滑入 */
.toast{ transition: transform .28s var(--ui-ease-out), opacity .28s; }

/* 图片：渐显，避免生硬 */
img{ transition: opacity .3s var(--ui-ease); }

/* 回到顶部 */
.ui-top{ position: fixed; right: 22px; bottom: 24px; width: 44px; height: 44px; z-index: 998;
  border-radius: 50%; border: 2px solid var(--ui-ink); background: #FFE500; color: var(--ui-ink);
  display: none; place-items: center; cursor: pointer; font-weight: 900 18px;
  box-shadow: 3px 3px 0 var(--ui-ink); transition: transform var(--ui-fast) var(--ui-ease), opacity .25s; }
.ui-top:hover{ transform: translateY(-3px) rotate(-6deg); }
.ui-top.show{ display: grid; }

/* 减少动态效果偏好 */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .ui-reveal{ opacity:1; transform:none; }
}

/* 移动端微调 */
@media (max-width: 640px){
  .ui-top{ right: 14px; bottom: 16px; }
  button:hover, .btn:hover, .card:hover, .lesson:hover, .q-card:hover{ transform: none; }
}

/* =========================================================
   UI Polish v2 —— 视觉强化（大厂质感：氛围光 / 玻璃 / 渐变 / 微 3D）
   ========================================================= */

/* 首页顶栏玻璃 */
body.ui-ready .hd, body.ui-ready header, body.ui-ready .site-head{
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  transition: box-shadow .3s var(--ui-ease), background .3s;
}
body.ui-ready .hd.ui-scrolled, body.ui-ready header.ui-scrolled{
  box-shadow: 0 12px 34px rgba(21,17,10,.18);
}

/* 主按钮：流光扫过 */
.btn.primary, .btn.pink, button.primary, .btn.blue{
  overflow: hidden;
  position: relative;
}
.btn.primary::after, .btn.pink::after, button.primary::after, .btn.blue::after{
  content:''; position:absolute; inset:-40% -20%; pointer-events:none;
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.42) 50%, transparent 64%);
  transform: translateX(-130%); transition: transform .75s var(--ui-ease-out);
}
.btn.primary:hover::after, .btn.pink:hover::after, button.primary:hover::after, .btn.blue:hover::after{
  transform: translateX(130%);
}

/* 卡片顶部渐变高光条 */
.q-card, .lesson, .kpi, .feature, .stu, .plane-card{ position: relative; }
.q-card::after, .lesson::after, .kpi::after, .feature::after{
  content:''; position:absolute; left:12px; right:12px; top:0; height:3px; border-radius:0 0 8px 8px;
  background: linear-gradient(90deg,#FF2D78,#FFE500,#00B7FF,#CC44FF);
  opacity:0; transform: scaleX(.4); transform-origin: left center;
  transition: opacity .3s var(--ui-ease), transform .45s var(--ui-ease-out);
  pointer-events:none;
}
.q-card:hover::after, .lesson:hover::after, .kpi:hover::after, .feature:hover::after{
  opacity:1; transform: scaleX(1);
}

/* 分区标题：渐变色下划线 */
.sec-h, .sec-title, .section-title{ position: relative; }
.sec-h::after, .sec-title::after, .section-title::after{
  content:''; display:block; width:44px; height:4px; margin-top:6px; border-radius:99px;
  background: linear-gradient(90deg,#FF2D78,#FF6B00,#FFE500);
  transition: width .45s var(--ui-ease-out);
}
.sec-h:hover::after, .sec-title:hover::after, .section-title:hover::after{ width:82px; }

/* 微 3D 倾斜卡片（由 JS 写入 --tx/--ty） */
.ui-tilt{ transform: perspective(950px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)); transform-style: preserve-3d; will-change: transform; }
.ui-tilt:hover{ box-shadow: var(--ui-shadow-2); }
.ui-tilt > *{ transform: translateZ(0); }

/* 链接箭头滑动 */
.link-arrow{ display:inline-flex; align-items:center; gap:4px; transition: gap .2s var(--ui-ease); }
.link-arrow:hover{ gap:9px; }

/* 状态徽章呼吸光 */
.pill.ok, .badge.ok{ box-shadow: 0 0 0 rgba(0,210,106,.5); animation: uiPulse 2.6s ease-in-out infinite; }
@keyframes uiPulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(0,210,106,.32);} 50%{ box-shadow: 0 0 0 6px rgba(0,210,106,0);} }

/* 题库长列表滚动流畅性 */
.q-card{ content-visibility: auto; contain-intrinsic-size: auto 320px; }

@media (prefers-reduced-motion: reduce){
  body.ui-ready::before{ animation: none; }
  .btn.primary::after, .btn.pink::after, button.primary::after, .btn.blue::after{ display:none; }
  .ui-tilt{ transform:none !important; }
}


/* =========================================================
   UI Polish v3 —— 首页 Hero 科技感主视觉 & 版式节奏
   ========================================================= */
.hero{ position: relative; isolation: isolate; gap: 30px; }
.hero::before{
  content:''; position:absolute; inset:-20px -14px; z-index:-2; border-radius:30px;
  background:
    radial-gradient(58% 80% at 12% 12%, rgba(255,45,120,.20), transparent 62%),
    radial-gradient(52% 72% at 88% 18%, rgba(0,183,255,.20), transparent 64%),
    radial-gradient(60% 80% at 50% 110%, rgba(255,229,0,.26), transparent 66%),
    linear-gradient(135deg, rgba(255,251,239,.94), rgba(255,255,255,.62));
  border: 1px solid rgba(21,17,10,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.hero::after{
  content:''; position:absolute; inset:-20px -14px; z-index:-1; border-radius:30px; pointer-events:none;
  background-image:
    linear-gradient(rgba(21,17,10,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,17,10,.055) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(72% 72% at 50% 42%, #000 28%, transparent 78%);
  mask-image: radial-gradient(72% 72% at 50% 42%, #000 28%, transparent 78%);
  animation: heroGrid 24s linear infinite;
}
@keyframes heroGrid{ from{ background-position: 0 0, 0 0; } to{ background-position: 0 46px, 46px 0; } }

.hero-kicker{ position: relative; display:inline-flex; align-items:center; gap:8px; }
.hero-kicker::before{
  content:''; width:8px; height:8px; border-radius:50%; background:#00D26A; display:inline-block;
  box-shadow: 0 0 0 0 rgba(0,210,106,.55); animation: heroPulse 2.2s ease-out infinite;
}
@keyframes heroPulse{ 0%{ box-shadow: 0 0 0 0 rgba(0,210,106,.5);} 70%{ box-shadow: 0 0 0 10px rgba(0,210,106,0);} 100%{ box-shadow:0 0 0 0 rgba(0,210,106,0);} }

.hero h1{ letter-spacing: -.035em; line-height: 1.06; }
.hero h1 em{
  position: relative; display:inline-block;
  background: linear-gradient(100deg,#FF2D78 0%,#FF6B00 38%,#FFB800 62%,#FF2D78 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: heroTitleFlow 6s ease-in-out infinite alternate;
}
.hero h1 em::after{
  content:''; position:absolute; left:2%; right:2%; bottom:-6px; height:6px; border-radius:99px;
  background: linear-gradient(90deg, rgba(255,45,120,.55), rgba(255,229,0,.7), transparent);
  transform: scaleX(.72); transform-origin:left; opacity:.9;
}
@keyframes heroTitleFlow{ from{ background-position: 0% 50%; } to{ background-position: 100% 50%; } }

.hero-copy p{ line-height: 1.85; color: rgba(21,17,10,.82); }

.hero-path{
  position: relative;
  background: rgba(255,255,255,.74) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  border: 2px solid var(--ui-ink) !important;
  box-shadow: 6px 8px 0 rgba(21,17,10,.9), 0 24px 60px rgba(21,17,10,.16) !important;
  border-radius: 18px !important;
  transition: transform .35s var(--ui-ease), box-shadow .35s var(--ui-ease);
}
.hero-path::before{
  content:''; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
  transform: translateX(-120%); transition: transform .9s var(--ui-ease-out);
}
.hero-path:hover::before{ transform: translateX(120%); }
.hero-path:hover{ transform: translateY(-4px) rotate(-.3deg); box-shadow: 8px 12px 0 rgba(21,17,10,.9), 0 30px 70px rgba(21,17,10,.2) !important; }
.hero-path-row{ border-radius: 12px; padding: 8px 10px; transition: background .2s var(--ui-ease), transform .2s var(--ui-ease); }
.hero-path-row:hover{ background: rgba(255,229,0,.24); transform: translateX(4px); }
.hero-path-row b{
  display:inline-flex; align-items:center; justify-content:center; min-width: 34px; height: 26px;
  border-radius: 9px; background: linear-gradient(135deg,#FF2D78,#FF6B00); color:#fff;
  box-shadow: 2px 2px 0 rgba(21,17,10,.85); font-size: 12px;
}

.entry-heading h2{ letter-spacing:-.01em; }
.entry-heading h2::after{
  content:''; display:block; width:54px; height:5px; margin-top:8px; border-radius:99px;
  background: linear-gradient(90deg,#FF2D78,#FFE500,#00B7FF);
  transition: width .45s var(--ui-ease-out);
}
.entry-heading:hover h2::after{ width:96px; }

.entries .card{ position:relative; overflow:hidden; border-width:2px !important; }
.entries .card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px;
  background: linear-gradient(90deg,#FF2D78,#FFE500,#00B7FF,#CC44FF);
  opacity:.9; transform: scaleX(.35); transform-origin:left; transition: transform .5s var(--ui-ease-out);
}
.entries .card:hover::before{ transform: scaleX(1); }
.entries .card .ic{
  display:inline-grid; place-items:center; width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,229,0,.65), rgba(255,45,120,.16));
  border: 2px solid var(--ui-ink); box-shadow: 3px 3px 0 rgba(21,17,10,.9);
  transition: transform .35s var(--ui-ease), box-shadow .35s var(--ui-ease);
}
.entries .card:hover .ic{ transform: rotate(-6deg) scale(1.05); box-shadow: 5px 5px 0 rgba(21,17,10,.9); }
.entries .card .go{
  display:inline-flex; align-items:center; gap:6px; font-weight: 900;
  transition: gap .22s var(--ui-ease), transform .22s var(--ui-ease);
}
.entries .card:hover .go{ gap:12px; transform: translateX(2px); }
.entries .card h3{ letter-spacing:-.01em; }

/* 统计数字卡（若存在） */
.stat-grid, .stats{ gap: 16px !important; }
.stat, .stat-card{ transition: transform .3s var(--ui-ease), box-shadow .3s var(--ui-ease); }
.stat:hover, .stat-card:hover{ transform: translateY(-3px); }

/* 字体细节 */
h1, h2, h3{ text-wrap: balance; }
body.ui-ready a{ text-decoration-thickness: 2px; text-underline-offset: 3px; }

@media (max-width: 900px){
  .hero::before, .hero::after{ inset: -12px -8px; border-radius: 22px; }
  .hero-path{ transform:none !important; }
}
@media (prefers-reduced-motion: reduce){
  .hero::after, .hero h1 em{ animation: none; }
  .hero-path::before{ display:none; }
}