/* =========================================================
 * 首页落地页（简洁版）：左侧站点介绍 + 右侧注册通道
 * 兼容老内核：不使用 aspect-ratio / inset / color-mix()，
 * 阴影与圆角全部用常规写法；栅格用 float/百分比宽度回退。
 * ========================================================= */
.gate-wrap {
  position: relative;
  margin: 18px 0 8px;
  overflow: hidden;
  /* v51：改 flex 双列 —— 右列随左列等高拉伸，海报框才能在
     「左列门头图顶边 ↔ 「扫码解锁全部服务」金条底边」之间垂直居中 */
  display: flex;
  align-items: stretch;
}
.gate-wrap:before,
.gate-wrap:after {
  content: " ";
  display: table;
}
.gate-wrap:after { clear: both; }

.gate-left {
  float: left;
  width: 58%;
  padding: 26px 30px 26px 0;
  box-sizing: border-box;
}
.gate-right {
  float: left;
  width: 42%;
  box-sizing: border-box;
  /* v51：列内纵向布局 + 垂直居中 —— 海报 / 注册成功页在整列高度中上下居中；
     flex 项里 float 自动失效（左列同理由 flex 接管排布），窄屏由媒体查询转单列 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.gate-title {
  font-size: 26px;
  line-height: 1.35;
  margin: 0 0 10px;
  color: var(--ink);
  font-weight: 700;
}
.gate-title span { color: var(--primary-2); }
.gate-lead {
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.gate-ledger {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.gate-ledger li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 2;
  color: var(--ink-2);
}
.gate-ledger li:before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary-2);
  font-size: 12px;
}
/* v35：首页注册要点（年限资历 + 服务覆盖）——七条金色要点两列排 + 一条金色 CTA
   （原 .gate-note-line 长句说明已整段替换，旧类不再使用） */
.gate-hl {
  margin: 16px 0 0;
  padding: 12px 14px;
  list-style: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 211, 110, .45);
  border-left: 4px solid #ffd36e;
  font-size: 0;
  letter-spacing: .3px;
}
.gate-hl li {
  display: inline-block;
  white-space: nowrap;
  width: 50%;
  box-sizing: border-box;
  position: relative;
  padding: 4px 6px 4px 15px;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 700;
  color: #ffd76a;
  vertical-align: top;
  text-shadow: 0 1px 2px rgba(90, 15, 20, .35);
}
.gate-hl li:before {
  content: "\2726";
  position: absolute;
  left: 0;
  top: 4px;
  font-size: 11px;
  font-weight: 400;
  color: #ffb43c;
}
.gate-hl li.hl-span { width: 100%; }
.gate-hl li.hl-cta {
  display: block;
  width: auto;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  background: #ffd36e;
  background: linear-gradient(135deg, #ffe79a 0%, #ffb32e 100%);
  color: #5b1e0e;
  font-size: 14.5px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 2px;
  text-shadow: none;
}
.gate-hl li.hl-cta:before { content: none; }
@media (max-width: 560px) {
  .gate-hl li { width: 100%; }
}

/* ---- 注册通道卡 ---- */
.gate-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(23, 43, 91, .12);
}

/* v31：注册卡门头横匾（.gate-head / .gate-head-plate / .gate-head-txt /
   .gate-head-sub / .gate-head-img）已随 HTML 整体删除，样式一并清理 */

.gate-body { padding: 18px 20px 20px; }

.gate-price {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff7e6 0%, #fff1d6 100%);
  border: 1px dashed #e2bf6a;
  font-size: 13px;
  line-height: 1.9;
  color: #7a4c05;
}
.gate-price b { color: #c0392b; font-size: 16px; }
.gate-price .hl {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 20px;
  background: #c0392b;
  color: #fff;
  font-size: 12px;
}

/* v32：会员欢迎块（.gate-welcome / .gate-points）随首页 gateMember 整块删除而清理；
   ⚠ .gate-points-row / .cashcell 系列**必须保留** —— points.html 的积分规则页在复用 */
.gate-points-row {
  display: block;
  margin-top: 10px;
}
.gate-points-row:before,
.gate-points-row:after {
  content: " ";
  display: table;
}
.gate-points-row:after { clear: both; }
.gate-points-row > div {
  float: left;
  width: 50%;
  box-sizing: border-box;
  text-align: center;
  padding: 8px 4px;
  border-radius: 10px;
}
.gate-points-row .cashcell {
  border-left: 1px solid var(--line);
}
.gate-points-row .pn {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.gate-points-row .pt {
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 2px;
}
/* v32：.gate-signbtn / .gate-entry 两个只为首页会员欢迎块服务的样式已删除 */

/* ---- 锁提示 ---- */
.gate-lock {
  margin: 10px 0 0;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  text-align: center;
  background: rgba(255, 255, 255, .6);
}
.gate-lock .lk-i { font-size: 30px; }
.gate-lock h3 { margin: 6px 0 6px; font-size: 16px; }
.gate-lock p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.8; }

@media (max-width: 900px) {
  .gate-wrap { flex-direction: column; } /* v51：flex 容器窄屏转纵向堆叠 */
  .gate-left, .gate-right {
    float: none;
    width: 100%;
    padding-right: 0;
  }
  .gate-right { margin-top: 16px; }
}

/* ---- 会员墙遮罩 / 弹窗 ---- */
.gate-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(32, 3, 9, .62);
  z-index: 9998;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 20px;
  overflow: auto;
}
.gate-dialog {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 16px;
  padding: 26px 22px 22px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(32, 3, 9, .35);
}
.gate-dialog h3 { margin: 8px 0 10px; font-size: 18px; }
.gate-dialog p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.9; }
.gate-dialog .btn-row { margin-top: 16px; }

/* ---- v58：学习中心「会员密码门」 ----
   半透明遮罩挡不住内容，密码门必须用近乎不透明的底，否则后面页面照样能看清。 */
/* v67：全站统一中国红，密码门遮罩由深藏蓝改深酒红 */
.gate-mask.solid { background: rgba(26, 3, 8, .975); }
.unlock-pop { max-width: 342px; }
/* 首页是深红主题：h3 金字 / outline 白字压在白卡片上看不清，密码门里必须强制深色 */
.unlock-pop h3 { color: #1c2b4a; }
.unlock-pop .btn.outline { color: #26324e; border-color: #c7cdd9; }
.unlock-pop .ul-sub { margin: 0 0 14px; font-size: 13px; color: #4a5670; line-height: 1.9; }
.unlock-pop .ul-sub b { color: #1c2b4a; }
.ul-input {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #d9dee8;
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
}
.ul-input:focus { border-color: #c9a227; box-shadow: 0 0 0 3px rgba(201, 162, 39, .18); }
.ul-err { min-height: 18px; margin: 6px 0 4px; font-size: 12px; line-height: 18px; color: #c0392b; }
.unlock-pop .btn.block { margin-top: 0; }
.unlock-pop .ul-cancel { margin-top: 8px; }
.ul-alt { display: block; margin-top: 10px; font-size: 12px; color: #9c1424; }
.ul-hint { margin-top: 12px; font-size: 12px; color: #4a5670; line-height: 1.75; opacity: .78; }

/* ---- v64（用户要求）：游客「进入学习中心」提示框改版 ----
   正文解释整段删除，只留「顶部红色背景长条（标题）+ 右上关闭角标 + 两个操作按钮」。
   红条要贴到卡片圆角上，所以整卡 padding 归零、由 ap-body 自己撑内边距。 */
.unlock-pop.ask-pop {
  padding: 0;
  overflow: hidden;
  text-align: center;
}
.ask-pop .ap-head {
  position: relative;
  background: #b3152a;
  background: linear-gradient(90deg, #8d1020 0%, #c2182b 55%, #8d1020 100%);
  padding: 15px 50px 15px 20px;
  text-align: left;
}
.ask-pop .ap-head h3 {
  margin: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .5px;
}
.ask-pop .ap-x {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 19px;
  line-height: 27px;
  text-align: center;
  cursor: pointer;
  outline: none;
}
.ask-pop .ap-x:hover { background: rgba(255, 255, 255, .34); }
.ask-pop .ap-body { padding: 20px 22px 22px; }
.ask-pop .ap-body .btn.block { margin-top: 0; }
.ask-pop .ap-body .ul-cancel { margin-top: 10px; }
.sign-pop {
  background: linear-gradient(180deg, #fffdf6 0%, #fff 40%);
  border-top: 4px solid #c9a227;
}
.sign-pop .sp-line { font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.sign-pop .sp-num { font-size: 28px; color: #c0392b; }
.sign-pop .sp-sub { font-size: 12px; color: var(--ink-2); margin-bottom: 14px; }
.sign-pop #spEarned, .sign-pop #spBal { color: var(--primary-2); }
/* 签到弹窗的两种显式关闭方式：右上角叉 + 底部「暂不领取」。
   缺了它们用户会被全屏遮罩困住，务必保留。 */
.sp-close {
  position: absolute;
  right: 8px;
  top: 6px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
  padding: 0;
}
.sp-close:hover { color: var(--ink); }
.sign-pop .sp-later { margin-top: 8px; }

/* =========================================================
 * 注册成功页（v24）：只在注册成功那一次出现在最右列
 * 内容按用户要求固定为 —— 恭喜注册成功 / 个人级别 / 学习积分剩余 / 恭喜你获得 10000 自学积分。
 * 一次性：看过后由 index.html 打上 localStorage 标记，以后不再出现。
 * ========================================================= */
.gate-ok {
  margin: 0 0 14px;
  padding: 18px 16px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdf6 0%, #ffffff 46%);
  border: 1px solid #e2bf6a;
  border-top: 4px solid #c9a227;
  box-shadow: 0 12px 34px rgba(92, 6, 18, .22);
  text-align: center;
}
.gate-ok .ok-face { font-size: 40px; line-height: 1; }
.gate-ok .ok-title {
  margin: 8px 0 4px;
  font-size: 20px;
  letter-spacing: 2px;
  color: #8e0a18;
}
.gate-ok .ok-gift { margin: 0 0 6px; font-size: 15px; color: #7a4c05; }
.gate-ok .ok-gift b { font-size: 26px; color: #c0392b; margin: 0 2px; }
.gate-ok .ok-sub {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-3);
}
.gate-ok .ok-rows {
  border-top: 1px dashed #e6d3a3;
  padding-top: 10px;
  margin-bottom: 12px;
}
.gate-ok .ok-row {
  display: block;
  padding: 7px 2px;
  font-size: 13px;
  color: var(--ink-2);
}
.gate-ok .ok-row:before,
.gate-ok .ok-row:after { content: " "; display: table; }
.gate-ok .ok-row:after { clear: both; }
.gate-ok .ok-row span { float: left; color: var(--ink-3); }
.gate-ok .ok-row b { float: right; font-size: 14px; color: var(--ink); }
.gate-ok .ok-row b.ok-num { font-size: 18px; color: #c0392b; }
.gate-ok .btn { margin-bottom: 8px; }
/* 深红首页把 .btn.outline 染成了白字（给深色底用的），成功页卡片是白底，恢复深色字 */
.gate-ok .btn.outline { background: #fff; color: var(--primary); border-color: #c9d4ea; }
.gate-ok .ok-tip {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-3);
}

/* 访客版顶栏：更薄更素，只有站点门头 + 登录入口（仿百度首页那种干净） */
.topbar.guest { background: rgba(12, 18, 40, .55); }
.topbar.guest .nav-entry { border-color: rgba(255, 255, 255, .18); }
.topbar.guest .nav-entry b { font-size: 13px; }

/* =========================================================
 * 专属海报二维码框：注册框正上方
 * 未登录显示分享者海报 → 注册成功当场换成自己的（可下载分享）
 * ========================================================= */
.poster-box {
  margin: 0; /* v51：原 0 0 14px —— 右列改 flex 后间距由 gap 统一，留底边距会让居中偏上 */
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .58);
  box-shadow: 0 10px 30px rgba(92, 6, 18, .26);
}
.poster-cap { text-align: center; margin-bottom: 10px; }
.poster-cap .pc-t { display: block; font-size: 15px; font-weight: 800; color: #8e0a18; }
.poster-cap .pc-s { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.poster-stage { text-align: center; }
.poster-stage canvas { width: 100%; height: auto; border-radius: 12px; }
.poster-stage img#posterImg { display: block; width: 100%; border-radius: 12px; }
.poster-fallback {
  padding: 16px 14px; border-radius: 12px; color: #fff8ec;
  background: linear-gradient(160deg, #c2101f 0%, #8e0a18 55%, #67000f 100%);
}
.poster-fallback .pf-tt { font-size: 15px; font-weight: 800; line-height: 1.5; }
.poster-fallback .pf-sl { font-size: 13px; color: #ffd36e; margin: 4px 0 10px; }
.poster-fallback img { width: 172px; margin: 0 auto; padding: 7px; background: #fff; border-radius: 10px; }
.poster-fallback .pf-code { font-size: 12px; opacity: .88; margin-top: 8px; }
.poster-meta { text-align: center; font-size: 13px; color: var(--ink-2); margin: 10px 0 8px; }
.poster-btns { justify-content: center; }
/* v53：海报框是白底卡片，而深红首页把 .btn.outline / .btn.ghost 染成浅色字（给深色底用的），
 * 导致「复制邀请链接 / 登录看我的海报」在白底上几乎看不见。
 * 这里统一点掉：黑体字（#1a1a1a + 700 加粗），底色与描边保持白底浅灰。
 * 同时把 :hover 也压住，否则悬停时 .brain-home 的 hover 规则又把字刷成白色。 */
.poster-btns .btn.outline,
.poster-btns .btn.ghost,
.brain-home .poster-btns .btn.outline,
.brain-home .poster-btns .btn.ghost {
  background: #fff; color: #1a1a1a; border-color: #d6d0c4; font-weight: 700;
}
.poster-btns .btn.outline:hover,
.poster-btns .btn.ghost:hover,
.brain-home .poster-btns .btn.outline:hover,
.brain-home .poster-btns .btn.ghost:hover {
  background: #fff7e8; color: #1a1a1a; border-color: #c9a86a;
}
/* v53：「扫这张海报注册，即锁定由 XX 为你提供全程服务。」整行已删除；
 * 非本人海报时 #posterTip 内容为空，用 :empty 收起，避免留一条 9px 的空行。 */
.poster-tip { margin-top: 9px; font-size: 12px; line-height: 1.8; color: var(--ink-2); text-align: center; }
.poster-tip:empty { display: none; }

/* v24：注册成功弹窗（.reg-mask / .reg-dlg）已下线，
 * 注册成功改为在右列显示一次性「恭喜注册成功」页（见上方 .gate-ok），
 * 海报仍在上方海报框里下载分享。 */

/* 首页（深红底）左侧站点介绍：文字一律亮色，避免看不清 */
.brain-home .gate-title { color: #fff8ec; }
.brain-home .gate-title span { color: #ffd36e; }
.brain-home .gate-lead { color: #ffe9dc; }
.brain-home .gate-ledger li { color: #ffe9dc; }
.brain-home .gate-ledger li:before { color: #ffd36e; }
/* v35：.gate-hl 的金色底色与描边已按首页深红底调好，这里只微调 CTA 的对比度 */
.brain-home .gate-hl li.hl-cta {
  color: #571c0c;
  box-shadow: 0 6px 16px rgba(120, 20, 10, .28);
}


/* v43：首页左列顶部门头宣传图 —— 宽度与下方文字同宽（.gate-left 内 100%），
 * 高度 = 宽度 × 2/3。老内核不支持 aspect-ratio，改用 padding-top 百分比撑高，
 * 图片绝对定位铺满 + object-fit: cover 裁切，避免上传竖版门头照把左列拉得过长。 */
.gate-hero {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 66.6667%;
  margin: 0 0 16px;
  border-radius: 14px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(255, 211, 110, .42);
  background: rgba(255, 248, 236, .08);
  box-shadow: 0 12px 28px rgba(52, 6, 12, .34);
}
.gate-hero img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
@media (max-width: 560px) {
  .gate-hero { margin-bottom: 14px; border-radius: 12px; }
}


/* v44：注册框从右列拉出，改成整站宽的一条横条，排在页面最下方。
 * 里层 .regbar-form 用 flex 自动换行：宽屏一行放「手机号 / 姓名 / 密码 / 注册 / 登录」，
 * 空间不够自动折行，≤560px 时每个输入框独占一行。
 * 说明：项目禁 aspect-ratio / inset，这里只用 flex + gap（老内核可用）。 */
.gate-regbar { margin: 26px 0 6px; }
.gate-regbar .gate-card { box-shadow: 0 12px 34px rgba(52, 6, 12, .32); }
.regbar-body { padding: 18px 22px 20px; }
.regbar-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}
.regbar-form .gate-price { flex: 1 1 100%; margin: 0; }
.regbar-form .rb-f { flex: 1 1 190px; min-width: 168px; margin: 0; }
.regbar-form .rb-f input { width: 100%; box-sizing: border-box; }
.regbar-form .rb-go,
.regbar-form .rb-login { flex: 0 0 auto; white-space: nowrap; }
/* 深红首页把 .btn.outline 染成白字（给深色底用的），注册横条是白底卡片，恢复深色字 */
.regbar-form .btn.outline { background: #fff; color: var(--primary); border-color: #c9d4ea; }
.regbar-form .rb-go { padding: 11px 20px; }
.regbar-form .rb-hint { flex: 1 1 100%; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
@media (max-width: 560px) {
  .gate-regbar { margin-top: 20px; }
  .regbar-body { padding: 14px 14px 16px; }
  .regbar-form .rb-f { flex: 1 1 100%; }
  .regbar-form .rb-go,
  .regbar-form .rb-login { flex: 1 1 100%; }
}

/* v45：首页区块顺序调整 —— 站点公告置顶，注册横条在扫码提示上方。
 * 公告为空时（后台没填）不占位；扫码提示落到页面末尾，底部留一点呼吸。 */
#siteNotice.gate-notice { margin: 18px 0 0; }
#siteNotice.gate-notice:empty { display: none; }
.tip.warn.gate-reftip { margin: 18px 0 24px; }
@media (max-width: 560px) {
  #siteNotice.gate-notice { margin-top: 14px; }
  .tip.warn.gate-reftip { margin: 14px 0 18px; }
}

/* v47：注册价格条改成「原价 3999 元 → 0 元注册」促销句，整条居中；
 * 原价划线弱化，正价句保持深棕正文色。后台换文案后仍按整条居中显示。
 * v50：整行加粗 + 字号略放大（13.5px → 15px），划线原价同步加粗但保持弱化色。 */
.regbar-form .gate-price { text-align: center; font-size: 15px; font-weight: 700; }
.gate-price .gp-old { color: #b08a5a; font-weight: 700; }

/* v48：首页课程介绍里的十三门潜能课名整体提亮 ——
 * 长句里十几个课名连成一片，用更亮的字色 + 半粗让家长一眼扫到「到底能学到什么」；
 * 只加亮中间一段，文案本身一字未动，「等」字仍在标签外。
 * v52：改「黄体字」—— 金黄字色 #ffd75e + 700 加粗，深红底上一眼就能扫到课名；
 * 两条规则都写同一个黄，避免别处（非 .brain-home 容器）回落成默认白字看不出重点。 */
.gate-lead .gl-skills { font-weight: 700; color: #ffd75e; }
.brain-home .gate-lead .gl-skills { color: #ffd75e; }