/* ===== saleapp 首页:刺猬式布局 × 平头哥暗黑霓虹皮肤 ===== */

/* —— Hero:左大字 + 右双卡 —— */
.sale-hero {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(0, 920px);
  gap: 3rem;
  align-items: center;
  max-width: 1480px;
  margin: 0 auto;
  padding: 8.5rem 2.5rem 1.5rem;
}
.sale-word {
  font-size: clamp(4.5rem, 10vw, 9rem);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: .95;
  margin: 0;
  background: linear-gradient(120deg, #fff 30%, var(--accent, #e6315f) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(230, 49, 95, .35));
}
.sale-word-sub { color: var(--text-muted, #9a93a8); margin: .9rem 0 0; font-size: .98rem; letter-spacing: .04em; }

/* paywall 双卡并排:刺猬式双色分工——会员卡=品红(付费),社群卡=绿(安心) */
/* 两卡等宽等高(1:1)。
   ① 选择器必须带 #lab-paywall:style.css 的 #lab-paywall(ID)自带 1.6fr 1fr,类选择器压不过它;
   ② 必须 minmax(0,1fr):纯 1fr 会被会员卡长内容撑宽 */
#lab-paywall.sale-hero-cards {
  max-width: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 1.2rem; align-items: stretch;
}
/* 等高完全靠 grid stretch 拉伸;勿写任何百分比高度(auto 行高下解析不稳,窄视口会一高一矮) */
.sale-hero-cards .member-card, .sale-hero-cards .community-card { margin: 0; }
/* 会员卡:整卡品红渐变色块(对标刺猬橙红会员卡) */
.sale-hero-cards .member-card {
  background: linear-gradient(155deg, rgba(230,49,95,.26), rgba(230,49,95,.08) 55%, rgba(139,92,246,.1));
  border: 1px solid rgba(230,49,95,.5);
  box-shadow: 0 10px 38px rgba(230,49,95,.14);
  position: relative; overflow: hidden;
}
.sale-hero-cards .member-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(230,49,95,.85), rgba(139,92,246,.6), transparent);
  background-size: 200% 100%; animation: saleShimmer 5s linear infinite;
}
.sale-hero-cards .member-card .member-cta {
  background: var(--accent, #e6315f); color: #fff; border: none;
  box-shadow: 0 4px 18px rgba(230,49,95,.4);
}
/* 社群卡:中性玻璃(信息容器不染色,价值点用金) */
.sale-hero-cards .community-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 34px rgba(0,0,0,.3);
}
.sale-hero-cards .community-card .community-title { color: #fff; }
.sale-hero-cards .community-card .community-qr { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.7); }

/* —— 工具条 —— */
.sale-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  max-width: 1480px; margin: 1.2rem auto 0; padding: 0 2.5rem;
}
.sale-toolbar-left, .sale-toolbar-right { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.sale-date-pill, .sale-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1.1rem; border-radius: 999px; font-size: .88rem;
  border: 1px solid var(--border-glass, rgba(255,255,255,.12));
  background: rgba(255,255,255,.03); color: var(--text-muted, #9a93a8);
  backdrop-filter: blur(8px); text-decoration: none; transition: all .25s ease;
}
.sale-date-pill i, .sale-pill i { width: 15px; height: 15px; }
/* 官方直营服务:中性亮玻璃(信任入口,不喊话) */
.sale-pill.primary { color: #fff; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); }
.sale-pill.primary:hover { background: rgba(255,255,255,.12); }
.sale-pill.ghost:hover { color: #fff; border-color: rgba(230,49,95,.45); }

/* —— 玻璃岛:滚动条 + tab + 搜索 熔为一体 —— */
.sale-island {
  max-width: 1420px; margin: 2rem auto 0;
  padding: .35rem 1.6rem .9rem;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 42px rgba(0,0,0,.35), 0 0 36px rgba(230,49,95,.07);
  overflow: hidden;
  position: sticky; top: 70px; /* 实际 top 由 sale.js 按 nav 高度动态校准 */
  z-index: 30;
  transition: background .3s ease, border-radius .3s ease, box-shadow .3s ease, max-width .3s ease, padding .3s ease;
}
/* 岛顶流光线:借背景流体的品红→紫→蓝,提精致感不引入新色 */
.sale-island::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(230,49,95,.65) 25%, rgba(139,92,246,.6) 55%, rgba(56,130,246,.45) 80%, transparent);
  animation: saleShimmer 6s linear infinite; background-size: 200% 100%;
}
@keyframes saleShimmer { from { background-position: 0% 0; } to { background-position: 200% 0; } }
/* 吸顶态:拉满全宽与 nav 无缝相接(双层导航),透光毛玻璃,滚动条行收起 */
.sale-island.is-stuck {
  max-width: 100%;
  border-radius: 0;
  border-left: none; border-right: none; border-top-color: transparent;
  background: rgba(12, 9, 20, .55);
  backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border-bottom: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  /* 内容仍对齐 1420 栅格 */
  padding-inline: max(1.6rem, calc((100vw - 1420px) / 2));
}
.sale-island .sale-ticker { max-height: 40px; transition: max-height .3s ease, opacity .25s ease, padding .3s ease; }
.sale-island.is-stuck .sale-ticker { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; border-bottom: none; }
.sale-filter-row { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; flex-wrap: wrap; padding-top: .7rem; }
.sale-filter-row .lab-cats { margin: 0; justify-content: flex-start; flex: 1 1 auto; }
.sale-search { max-width: 290px; flex: 0 0 auto; margin: 0; }

/* 岛内 tab / 搜索:磨砂玻璃化(覆写 style.css 原 .lab-cat) */
.sale-island .lab-cat {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text-muted, #9a93a8);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  transition: all .25s ease;
}
.sale-island .lab-cat:hover { color: #fff; border-color: rgba(230,49,95,.4); }
.sale-island .lab-cat:hover i, .sale-island .lab-cat:hover svg { color: var(--accent, #e6315f); }
/* 选中 = 品红实心色块(刺猬式高对比,不玩玻璃) */
.sale-island .lab-cat.active {
  background: var(--accent, #e6315f);
  border-color: var(--accent, #e6315f);
  color: #fff;
  box-shadow: 0 4px 16px rgba(230,49,95,.4);
}
.sale-island .lab-cat.active i, .sale-island .lab-cat.active svg { color: #fff; }
.sale-island .lab-cat.active .cat-count { color: rgba(255,255,255,.8); }
.sale-island .lab-cat.active .cat-tag.hot { background: #fff; color: var(--accent, #e6315f); }
.sale-island .mega-search {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
}
/* tab 上的数量/HOT/NEW 小角标与锁 */
.cat-count { font-size: .68em; opacity: .65; margin-left: .3em; font-weight: 400; }
.cat-tag {
  font-size: .58em; font-weight: 800; letter-spacing: .05em;
  padding: .15em .5em; margin-left: .45em; border-radius: 999px;
  vertical-align: 2px; display: inline-block;
}
.cat-tag.hot { background: rgba(230,49,95,.9); color: #fff; }
.cat-tag.new { background: transparent; border: 1px solid rgba(255,255,255,.35); color: rgba(255,255,255,.8); }
.cat-lock { font-size: .8em; margin-left: .25em; color: #ffd34d; }
/* tab 内 lucide 单色图标(替代彩色 emoji) */
.lab-cat i, .lab-cat svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: .3em; display: inline-block; }

/* —— 课程网格:4 列(刺猬同款密度) —— */
.sale-grid-wrap { max-width: 1480px; margin: 1.6rem auto 0; padding: 0 2.5rem 3rem; }
.sale-grid.skill-grid { grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.sale-empty { text-align: center; color: var(--text-muted, #9a93a8); padding: 3rem 0; }
/* 卡片 hover:品红描边 + 上浮 + 辉光,让货架有交互生命力 */
.sale-grid .skill-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; border-radius: 16px; }
.sale-grid .skill-card:hover {
  transform: translateY(-4px);
  border-color: rgba(230,49,95,.45);
  box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 26px rgba(230,49,95,.16);
}
/* 搜索框聚焦:品红光 */
.sale-search:focus-within { border-color: rgba(230,49,95,.55); box-shadow: 0 0 16px rgba(230,49,95,.2); }

/* —— 页脚 —— */
.sale-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  max-width: 1480px; margin: 0 auto; padding: 1.6rem 2.5rem 2.2rem;
  border-top: 1px solid rgba(255,255,255,.06);
  color: var(--text-muted, #9a93a8); font-size: .85rem;
}
.sale-footer-links { display: flex; gap: 1.2rem; }
.sale-footer-links a { color: var(--text-muted, #9a93a8); text-decoration: none; }
.sale-footer-links a:hover { color: #fff; }

/* —— saleapp 导航:透光毛玻璃(强模糊防穿透,背景流体透色) —— */
.sale-page nav {
  background: rgba(12, 9, 20, .5);
  backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ===== 转化钩子组 ===== */

/* ① 顶栏「新人试学」渐变 pill */
.sale-promo-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem 1rem; margin-left: 1rem; border-radius: 999px;
  font-size: .82rem; font-weight: 600; color: #fff; text-decoration: none;
  background: linear-gradient(120deg, rgba(230,49,95,.9), rgba(139,92,246,.8));
  box-shadow: 0 0 16px rgba(230,49,95,.35);
  animation: salePulse 2.6s ease-in-out infinite;
}
.sale-promo-pill i { width: 14px; height: 14px; }
@keyframes salePulse { 0%,100% { box-shadow: 0 0 12px rgba(230,49,95,.3); } 50% { box-shadow: 0 0 24px rgba(230,49,95,.55); } }

/* ② 社证数字高亮 */
.sale-num { color: var(--accent, #e6315f); font-weight: 800; font-style: normal; }

/* ④ Hero 免费钩子按钮 */
.sale-hero-hooks { display: flex; gap: .9rem; margin-top: 1.4rem; flex-wrap: wrap; }
.sale-hero-hooks .lab-btn { display: inline-flex; align-items: center; gap: .45rem; }
.sale-hero-hooks .lab-btn i { width: 16px; height: 16px; }

/* ③⑤ 会员卡:倒计时数字 + 划线价 + 入会人数 */
#sale-countdown { font-variant-numeric: tabular-nums; font-weight: 800; color: #ffd34d; }
.sale-price-orig { opacity: .45; font-size: .72em; margin-right: .35rem; }
.sale-price-note { display: inline-block; margin-left: .5rem; font-size: .62em; color: var(--text-muted, #9a93a8); font-weight: 400; }
.sale-proof { margin: .8rem 0 0; font-size: .82rem; color: var(--text-muted, #9a93a8); }
.sale-proof b { color: #fff; }

/* ⑥⑦ 社群卡福利与名额 */
.sale-comm-hooks { margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed rgba(255,255,255,.12); }
.sale-comm-gift { display: flex; align-items: center; gap: .4rem; margin: 0 0 .4rem; font-size: .82rem; color: #fff; }
.sale-comm-gift i { width: 14px; height: 14px; color: #ffd34d; }
.sale-comm-quota { margin: 0; font-size: .78rem; color: var(--text-muted, #9a93a8); }
.sale-comm-quota b { color: #ffd34d; }

/* ⑧ 直播 pill:中性玻璃 + 品红跳动红点(红点=直播,人人都懂) */
.sale-pill.live { color: #fff; }
.sale-pill.live:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); }
.sale-pill.live i { color: var(--accent, #e6315f); animation: salePulse 2s infinite; border-radius: 50%; }

/* ⑩ 学员动态滚动条(嵌入玻璃岛顶部,两端渐隐) */
.sale-ticker {
  display: flex; align-items: center; gap: .7rem; overflow: hidden;
  padding: .55rem .2rem .5rem;
  border-bottom: 1px dashed rgba(255,255,255,.08);
  font-size: .78rem; color: var(--text-muted, #9a93a8);
}
.sale-ticker > i { width: 14px; height: 14px; color: var(--accent, #e6315f); flex: 0 0 auto; }
.sale-ticker-track {
  display: flex; gap: 3.2rem; white-space: nowrap;
  animation: saleScroll 46s linear infinite;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.sale-ticker-track:hover { animation-play-state: paused; }
@keyframes saleScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* —— 🌱 零基础钩子(金色系=免费占便宜,与品红会员卡形成红金双块) —— */
@keyframes goldPulse { 0%,100% { box-shadow: 0 0 10px rgba(255,211,77,.25); } 50% { box-shadow: 0 0 22px rgba(255,211,77,.5); } }
.sale-gold { color: #ffd34d; font-style: normal; font-weight: 800; }

/* ① Hero 下:金色 pill 按钮(小白入口,一眼可见) */
.sale-starter-link {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: 1.15rem; font-size: .88rem; font-weight: 600;
  color: #ffd34d; text-decoration: none;
  padding: .5rem 1.15rem; border-radius: 999px;
  border: 1px solid rgba(255,211,77,.5);
  background: rgba(255,211,77,.08);
  transition: all .25s ease;
}
.sale-starter-link:hover { background: rgba(255,211,77,.16); border-color: #ffd34d; color: #ffe28a; }

/* ② 路线横幅:金色块(对峙品红会员卡) */
.sale-starter {
  max-width: 1420px; margin: 1.4rem auto 0;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255,211,77,.35);
  background: linear-gradient(155deg, rgba(255,211,77,.09), rgba(255,211,77,.02) 60%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 0 26px rgba(255,211,77,.06);
}
.sale-starter-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%;
  padding: .85rem 1.6rem; cursor: pointer;
  background: none; border: none; color: #fff; font-size: .95rem; text-align: left;
}
.sale-starter-bar:hover { background: rgba(255,211,77,.05); }
.sale-starter { transition: border-color .3s ease, box-shadow .3s ease; }
.sale-starter:hover { border-color: rgba(255,211,77,.6); }
.sale-starter-title { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sale-starter-title b { color: var(--accent, #e6315f); }
/* 「看路线」= 金色实体小按钮 + 呼吸光晕(原来是灰字没人想点) */
.sale-starter-arrow {
  display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 auto;
  font-size: .82rem; font-weight: 700; color: #1c1503;
  background: #ffd34d; border-radius: 999px; padding: .4rem 1rem;
  animation: goldPulse 2.6s ease-in-out infinite;
  transition: background .25s ease;
}
.sale-starter-bar:hover .sale-starter-arrow { background: #ffe28a; }
.sale-starter-arrow i { width: 16px; height: 16px; transition: transform .3s ease; }
.sale-starter.open .sale-starter-arrow i { transform: rotate(180deg); }

/* 展开:5 步路线 */
.sale-starter-body { padding: .4rem 1.6rem 1.3rem; border-top: 1px dashed rgba(255,255,255,.1); }
.sale-starter-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: .9rem; margin-top: 1rem; }
.sale-step {
  display: block; padding: .9rem 1rem; border-radius: 14px; text-decoration: none;
  border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.03);
  transition: all .25s ease; position: relative;
}
.sale-step:hover { border-color: rgba(230,49,95,.45); background: rgba(230,49,95,.05); transform: translateY(-2px); }
.sale-step-day {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  color: #fff; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; padding: .14em .65em; margin-bottom: .55rem;
}
.sale-step-day.free { background: #ffd34d; border-color: #ffd34d; color: #1c1503; }
.sale-step-goal { color: #fff; font-size: .9rem; line-height: 1.45; margin: 0 0 .45rem; font-weight: 600; }
.sale-step-course { color: var(--text-muted, #9a93a8); font-size: .74rem; line-height: 1.4; display: block; }
/* 路线底部 CTA 收口 */
.sale-starter-cta {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed rgba(255,255,255,.12);
  font-size: .88rem; color: var(--text-muted, #9a93a8);
}
.sale-starter-cta b { color: #ffd34d; }
.sale-starter-cta .lab-btn { flex: 0 0 auto; }
.sale-starter-body { border-top-color: rgba(255,211,77,.22); }

/* ③ 零基础 tab:金描边(与 ⭐专属排序 同级——一个给老手,一个给小白) */
.sale-island .lab-cat.sale-starter-tab { border-color: rgba(255,211,77,.45); color: #ffd34d; }
.sale-island .lab-cat.sale-starter-tab:hover { border-color: #ffd34d; box-shadow: 0 0 14px rgba(255,211,77,.2); }
.sale-island .lab-cat.sale-starter-tab.active { background: rgba(255,211,77,.16); border-color: #ffd34d; color: #ffd34d; box-shadow: 0 0 18px rgba(255,211,77,.28); }
.sale-island .lab-cat.sale-starter-tab.active .cat-count { color: rgba(255,211,77,.8); }

@media (max-width: 1100px) { .sale-starter-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .sale-starter-steps { grid-template-columns: 1fr; } }

/* ⑪ ⭐专属排序金色 tab */
.lab-cat.sale-sort-tab { border-color: rgba(255,211,77,.45); color: #ffd34d; }
.lab-cat.sale-sort-tab:hover { border-color: #ffd34d; box-shadow: 0 0 14px rgba(255,211,77,.2); }
.lab-cat.sale-sort-tab:hover i, .lab-cat.sale-sort-tab:hover svg { color: #ffd34d; }
.lab-cat.sale-sort-tab.active { background: rgba(255,211,77,.16); border-color: #ffd34d; color: #ffd34d; box-shadow: 0 0 18px rgba(255,211,77,.28); }
/* 滚动条里的成交金额:品红高亮(价值点) */
.sale-amt { color: var(--accent, #e6315f); font-weight: 800; font-style: normal; }

/* —— 响应式 —— */
@media (max-width: 1280px) {
  .sale-grid.skill-grid { grid-template-columns: repeat(3, 1fr); }
  .sale-hero { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 900px) {
  .sale-hero-cards { grid-template-columns: 1fr; }
  .sale-grid.skill-grid { grid-template-columns: repeat(2, 1fr); }
  .sale-island { position: static; border-radius: 16px; }
  .sale-ticker { display: none; }
}
@media (max-width: 580px) {
  .sale-grid.skill-grid { grid-template-columns: 1fr; }
  .sale-hero { padding-top: 6.5rem; }
}
@media (max-width: 1100px) { .sale-promo-pill { display: none; } }