/* family.css —— 学霸星球学科站统一设计规范落地层（2026-11-08 语基海王）
 *
 * 为什么单独一个文件：
 *   style.css（功能层）→ premium.css（3D 卖相层）→ 本文件（家族规范层）。
 *   规范要求整站和题霸/听力王长得像一家人，而旧主题（宣纸暖色）的令牌散在
 *   两层 CSS 里、body 背景被改了三次。与其在旧文件里打补丁，不如最后加载
 *   一个覆盖层：旧令牌在这里整体重映射到规范色板，旧组件不用动就换肤。
 *
 * 内容：
 *   ① 规范 CSS 变量 + 旧令牌重映射（--red/--paper/... → 家族蓝紫）
 *   ② 页面背景：灰蓝紫渐变 + 品牌光晕（替代田字格纸纹）
 *   ③ 顶栏/底栏/星球 logo 换家族装
 *   ④ 首页营销 Hero 十二件套（.hero2 全套，对照听力王 web/style.css L95-145）
 *   ⑤ 双浮窗 + 客服/渠道弹层（对照听力王 style.css L147-166）
 *   ⑥ 跨学科互导卡
 */

/* ================= ① 规范变量 + 旧令牌重映射 ================= */
:root{
  --brand:#1f5fd6;
  --brand-dark:#1d4ed8;
  --brand-soft:#eef4ff;
  --violet:#8b5cf6;
  --grad:linear-gradient(135deg,#1f5fd6,#8b5cf6);
  --grad-btn:linear-gradient(135deg,#1f5fd6,#3b82f6);
  --bg:#eef1f5;
  --danger:#e11d48;
  --warn:#f59e0b;
  --radius:14px;
  --shadow:0 4px 28px rgba(16,24,40,.07), 0 1px 4px rgba(16,24,40,.04);

  /* 旧令牌重映射：style.css/premium.css 里成百处 --red/--paper/--ink 引用，
     在这里一次换血。--red 是旧主题的「品牌强调色」，重映射到品牌蓝后
     旧组件自动变家族色；语义上它不再是「红」，新代码请用 --brand。 */
  --paper:#eef1f5;
  --card:#ffffff;
  --ink:#1a1d21;
  --ink2:#4b5563;
  --ink3:#8b9199;
  --line:#e5e7eb;
  --line2:#eef1f4;
  --red:var(--brand);
  --red-soft:var(--brand-soft);
  --jade:#0e9f6e;
  --jade-soft:#e6f6f0;
  --gold:#b45309;
  --gold-soft:#fdf3df;
  --blue:var(--brand);
  --blue-soft:var(--brand-soft);
  --r:14px;
  --shadow:0 4px 28px rgba(16,24,40,.07), 0 1px 4px rgba(16,24,40,.04);
  /* premium.css 的深度令牌换家族色 */
  --lp-ink-deep:#14181e;
  --lp-red-deep:#1d4ed8;
  --lp-gold-light:#93b8f5;
  --lp-glass:rgba(255,255,255,.88);
}

/* ================= ② 页面背景：渐变 + 光晕（替代纸纹） ================= */
html{background:#eef1f5}
body{
  background:linear-gradient(165deg,#e3edfd 0%,#ece7fc 48%,#e4f0fd 100%) !important;
  background-attachment:fixed;
}
body::before{
  background:
    radial-gradient(560px 360px at 12% -4%, rgba(31,95,214,.14), transparent 62%),
    radial-gradient(640px 420px at 96% 30%, rgba(139,92,246,.12), transparent 65%),
    radial-gradient(520px 380px at 50% 108%, rgba(59,130,246,.10), transparent 60%) !important;
}
/* 落地页的宣纸渐变/噪点换成家族光晕 */
.lp-paper{background:none !important}
.lp-paper::before{display:none}

/* 小节标题：渐变竖条签名（规范 1.3）+ 去旧主题宋体。
   旧 .sec-title::before 是纯色 var(--red) 且 height 17px，这里对齐题霸/听力王：
   3px×14px、background:var(--grad) */
.sec-title{font-family:inherit;font-weight:800;letter-spacing:0}
.sec-title::before{width:3px;height:14px;background:var(--grad)}

/* toast 压过弹层（规范：toast≥300，弹层 200） */
#toast{z-index:300 !important}

/* ================= ③ 顶栏/底栏/Logo 换家族装 ================= */
.topbar{background:rgba(255,255,255,.88) !important;border-bottom:1px solid rgba(229,231,235,.8)}
.tabbar{background:rgba(255,255,255,.92) !important;border-top:1px solid rgba(229,231,235,.8)}
.gfilter{background:rgba(255,255,255,.92) !important}
/* 星球 logo：红陶土 → 品牌蓝紫，轨道环同色 */
.logo-mark{
  background:radial-gradient(circle at 34% 27%, #cfe0ff 0%, #5b8bef 28%, #2f5fd0 62%, #1d3f9e 100%);
  box-shadow:
    inset -2px -3px 7px rgba(16,32,84,.5),
    inset 1px 2px 3px rgba(255,255,255,.4),
    0 3px 9px -4px rgba(31,60,150,.7),
    15px -12px 0 -12px #8fb3f5;
}
.logo-mark::before{border-color:rgba(31,95,214,.55);border-top-color:rgba(139,92,246,.95)}
.logo-name{font-family:inherit;font-weight:800;letter-spacing:.01em}
/* 促销跑马灯：红金 → 渐变品牌条 */
.lp-promo{background:var(--grad-btn)}
/* 主按钮：金渐变 → 规范渐变主按钮 */
.lp-btn-main{background:var(--grad-btn);color:#fff;border:none;box-shadow:0 3px 10px rgba(31,95,214,.28)}
.lp-btn-main small{color:rgba(255,255,255,.85)}
/* 对比表「我们」列头 */
.lp-cmp thead th.us{background:linear-gradient(135deg,#1f5fd6,#3b82f6)}
/* 大幅广告位：深金 → 品牌渐变大卡 */
.lp-ad{background:linear-gradient(160deg,#1d4ed8,#7c3aed);border:none;color:#fff;box-shadow:0 14px 34px rgba(31,95,214,.30)}
.lp-ad .ad-kicker{color:#cfe0ff}
.lp-ad h2{color:#fff}
.lp-ad h2 u{color:#fde68a;text-decoration-color:rgba(253,230,138,.6)}
.lp-ad p{color:rgba(255,255,255,.88)}
.lp-ad .ad-price b{color:#fff}
.lp-ad .ad-price s{color:rgba(255,255,255,.55)}
.lp-ad .ad-note{color:rgba(255,255,255,.72)}
.lp-ad .lp-btn-main{background:#fff;color:#1f5fd6;box-shadow:none}
/* 深色收尾卡 → 深蓝 */
.dark-card{background:linear-gradient(160deg,#1e2a4a,#312e81);border:none}
/* 会员徽章/金棕点缀保留琥珀（价格语义），仅压暖度 */
.pl-badge{background:var(--brand-soft);color:var(--brand)}
.lp-plan.best .pl-badge{background:var(--grad-btn);color:#fff}
/* 进度条/强调渐变（错题/完成度） */
.gp-fill,.lu-bar i{background:var(--grad-btn)}

/* ================= ④ Hero 十二件套（规范第三节，全套照抄听力王） ================= */
.hero2{background:radial-gradient(120% 120% at 50% 0%, #eef3ff 0%, #f6f3ff 45%, #fff 100%);border:1px solid #e3e8f5;border-radius:20px;padding:24px 20px 20px;text-align:center;box-shadow:0 10px 34px rgba(31,95,214,.08);position:relative;overflow:hidden;margin:18px 0 14px}
.hero2::before{content:'';position:absolute;top:-70px;right:-40px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle, rgba(139,92,246,.16), transparent 70%)}
.hero2::after{content:'';position:absolute;bottom:-80px;left:-30px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle, rgba(31,95,214,.13), transparent 70%)}
.hero2 > *{position:relative;z-index:1}
.hbadge{display:inline-block;font-size:11px;letter-spacing:.08em;color:var(--brand);background:#fff;border:1px solid #d9e4f8;border-radius:20px;padding:4px 12px;margin-bottom:12px;box-shadow:0 1px 4px rgba(31,95,214,.08)}
.hero2 h2{font-size:24px;line-height:1.3;margin:0 0 10px;letter-spacing:.3px;font-weight:800;color:var(--ink);font-family:inherit}
.hero2 h2 b{background:linear-gradient(120deg,#1f5fd6,#8b5cf6 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero2 .hsub{font-size:13px;color:#5b6472;margin:0 0 16px;line-height:1.95}
.hstat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 auto 14px;max-width:560px}
.hstat div{background:rgba(255,255,255,.86);border:1px solid #e6ecf7;border-radius:12px;padding:10px 4px}
.hstat b{display:block;font-size:20px;font-weight:800;color:var(--brand);line-height:1.1;font-variant-numeric:tabular-nums}
.hstat span{display:block;font-size:10.5px;color:var(--ink3);margin-top:3px}
.hloop{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap;margin:0 0 16px}
.hloop b{font-size:12px;font-weight:800;color:#1f3a5f;background:#fff;border:1.5px solid #c7d4ec;border-radius:99px;padding:5px 13px;box-shadow:0 2px 8px rgba(16,24,40,.05)}
.hloop i{font-style:normal;color:var(--brand);font-weight:900;font-size:13px}
.hpts{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 16px;text-align:left}
.hp{background:#fff;border:1px solid #e9eef8;border-radius:14px;padding:13px 14px;box-shadow:0 2px 10px rgba(16,24,40,.04)}
.hp .hi{width:22px;height:22px;border-radius:50%;background:var(--grad);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;margin-bottom:7px}
.hp b{display:block;font-size:13.5px;color:#1f2b3d;margin-bottom:4px}
.hp span{display:block;font-size:11.5px;color:#6b7280;line-height:1.75}
.cred{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px;background:linear-gradient(135deg,#f7faff,#fdf8ff);border:1px solid #e8eefb;border-radius:12px;padding:12px 14px}
.cred-i{text-align:center}
.cred-t{font-size:10px;letter-spacing:.18em;color:#94a3b8;margin-bottom:3px}
.cred-v{font-size:12px;color:#334155;font-weight:600;line-height:1.5}
.hbig{margin:0 0 14px;text-align:center;font-size:20px;line-height:1.55;font-weight:900;letter-spacing:-.3px;color:#7c2d12;background:linear-gradient(135deg,#fff7ed,#ffe4e6);border:1.5px solid #fecdd3;border-radius:14px;padding:14px 16px;box-shadow:0 10px 26px rgba(225,29,72,.13)}
.hbig b{color:#dc2626;background:linear-gradient(180deg,transparent 58%,#fde68a 58%);padding:0 3px;border-radius:3px;animation:bigPulse 1.8s ease-in-out infinite}
@keyframes bigPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.hbig em{display:inline-block;margin-top:8px;font-style:normal;font-size:15px;font-weight:900;background:linear-gradient(90deg,#1d4ed8,#7c3aed,#db2777);-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4s linear infinite;background-size:200% auto}
@keyframes shine{to{background-position:200% center}}
.hero2 .price{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px}
.hero2 .price > div{border-radius:14px;padding:14px 10px;font-size:12px;line-height:1.7;color:#fff;text-align:center;cursor:pointer;transition:.18s;display:block}
.hero2 .price span{display:block;font-size:11.5px;opacity:.92}
.hero2 .price b{display:block;font-size:26px;font-weight:800;margin:4px 0 2px;letter-spacing:-.5px}
.hero2 .price b i{font-size:12px;font-weight:500;font-style:normal;opacity:.85}
.hero2 .price .pj{background:linear-gradient(135deg,#1f5fd6,#3b82f6);box-shadow:0 8px 20px rgba(31,95,214,.25)}
.hero2 .price .js{background:linear-gradient(135deg,#6d28d9,#a855f7);box-shadow:0 8px 20px rgba(124,58,237,.25)}
.hero2 .price > div:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(31,95,214,.28)}
.hbuy{font-size:12px;color:#7c2d12;background:#fff8e8;border:1px solid #f3e3bf;border-radius:9px;padding:9px 12px;line-height:1.8}
.hbuy b{color:#b45309;letter-spacing:.3px;user-select:all}
.hcta{margin-top:10px;font-size:12px;color:#1e3a8a;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:10px 12px;line-height:1.8}
@media (max-width:480px){
  /* 移动档整体收紧：版式预算闸给 index.html 的总高度红线是 9500px。
     重叠条目按听力王基准值照抄（hero2 padding / h2 19px / hstat 2×2 / hbig 16px），
     听力王未定义的条目（hbadge/hsub/hloop/hpts/price/hbuy/hcta）保留收紧值 */
  .hero2{padding:18px 13px 14px;margin:12px 0 10px}
  .hbadge{margin-bottom:8px;padding:3px 10px;font-size:10.5px}
  .hero2 h2{font-size:19px;margin:0 0 8px}
  .hero2 .hsub{font-size:12px;line-height:1.7;margin:0 0 10px}
  .hstat{grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:10px}
  .hstat div{padding:7px 3px}
  .hstat b{font-size:17px}
  .hstat span{font-size:10px;margin-top:2px}
  .hloop{margin-bottom:10px}
  .hloop b{padding:4px 9px;font-size:11px}
  .hpts{gap:8px;margin-bottom:10px}
  .hp{padding:10px 11px}
  .hp .hi{width:20px;height:20px;margin-bottom:5px}
  .hp b{font-size:12.5px;margin-bottom:3px}
  .hp span{font-size:11px;line-height:1.6}
  .cred{grid-template-columns:1fr;gap:5px;padding:9px 10px}
  .cred-i{text-align:left;display:flex;gap:8px;align-items:baseline}
  .cred-t{flex:0 0 auto;letter-spacing:.1em;font-size:9.5px;margin-bottom:0}
  .cred-v{font-size:11.5px}
  .hbig{font-size:16px;padding:10px 12px;margin-bottom:10px;border-radius:12px}
  .hbig em{font-size:13px;margin-top:5px}
  .hero2 .price{gap:9px;margin-bottom:10px}
  .hero2 .price > div{padding:11px 8px}
  .hero2 .price b{font-size:21px}
  .hbuy{padding:7px 10px;font-size:11px;line-height:1.6}
  .hcta{padding:7px 10px;font-size:11px;line-height:1.6;margin-top:8px}
  .hp span{line-height:1.55}
}

/* ================= ⑤ 双浮窗 + 弹层（规范第五节） ================= */
.cs-fab{position:fixed;bottom:74px;right:max(14px, calc(50vw - 306px));z-index:60;background:#07c160;color:#fff;border:none;border-radius:999px;padding:10px 16px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;box-shadow:0 6px 18px rgba(7,193,96,.35);transition:.15s}
.cs-fab:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(7,193,96,.45)}
.dist-fab{position:fixed;bottom:calc(74px + 52px);right:max(14px, calc(50vw - 306px));z-index:60;background:var(--grad-btn);color:#fff;border:none;border-radius:999px;padding:10px 16px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;box-shadow:0 6px 18px rgba(31,95,214,.35);transition:.15s}
.dist-fab:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(31,95,214,.45)}
/* 首页有吸底转化条，浮窗整体抬高让路 */
body:has(.lp-sticky) .cs-fab{bottom:138px}
body:has(.lp-sticky) .dist-fab{bottom:calc(138px + 52px)}
@media print{.cs-fab,.dist-fab,.ov{display:none !important}}

.ov{position:fixed;inset:0;background:rgba(15,20,28,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:200;display:none;align-items:flex-start;justify-content:center;padding:28px 16px;overflow-y:auto}
.ov.on{display:flex}
.ovbox{background:#fff;border-radius:16px;max-width:420px;width:100%;padding:20px 18px;box-shadow:0 24px 64px rgba(15,20,28,.28);margin:auto}
.ovbox h3{font-size:17px;font-weight:800;margin:0 0 8px}
.cs-sub{font-size:12px;color:#64748b;margin:0 0 12px;line-height:1.8}
.cs-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f7f9fc;border:1px solid #e6ecf5;border-radius:9px;padding:9px 12px;margin:8px 0;font-size:13px}
.cs-row b{user-select:all}
.cs-form{border-top:1px dashed var(--line);margin-top:12px;padding-top:12px}
.cs-t{font-size:12px;color:#334155;font-weight:600;margin-bottom:8px}
.cs-form input,.cs-form textarea{width:100%;border:1px solid #dbe3ee;border-radius:8px;padding:9px 10px;font-size:13px;margin-bottom:8px;font-family:inherit;outline:none;background:#fff;color:var(--ink)}
.cs-form input:focus,.cs-form textarea:focus{border-color:var(--brand)}
.cs-form textarea{height:60px;resize:vertical}
.cs-send{width:100%;border:none;border-radius:8px;padding:11px;background:#07c160;color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}
.cs-send:hover{filter:brightness(1.05)}
.cs-tip{font-size:10.5px;color:#94a3b8;margin-top:6px;text-align:center;line-height:1.7}
.ag-agree{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:#475569;line-height:1.6;margin:4px 0;cursor:pointer}
.ag-agree input{margin-top:2px;flex:none;accent-color:var(--brand)}
.ovbtn{margin-top:12px}
.mini{display:inline-block;border:none;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;background:var(--brand-soft);color:var(--brand);cursor:pointer;font-family:inherit}
.mini:hover{filter:brightness(.97)}

/* 授权码激活卡（member.html #licCard，lic.js 渲染） */
.lic-t{font-size:16px;font-weight:700;margin-bottom:8px}
.lic-ok{font-size:15px;font-weight:800;color:var(--jade);margin-bottom:8px}
.lic-line{font-size:12.5px;color:var(--ink2);margin-top:4px;line-height:1.7}
.lic-line b{color:var(--ink)}
.lic-row{display:flex;gap:8px;margin:10px 0 6px}
.lic-row input{flex:1;border:1px solid #dbe3ee;border-radius:8px;padding:10px;font-size:13px;font-family:inherit;outline:none}
.lic-row input:focus{border-color:var(--brand)}
.lic-tip{font-size:11px;color:var(--ink3);line-height:1.7}

/* ================= ⑥ 跨学科互导（家族矩阵入口） ================= */
.more-sites{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.ms-card{display:block;position:relative;overflow:hidden;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border:1px solid rgba(229,231,235,.8);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 14px 12px;transition:.15s}
.ms-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3.5px;background:var(--grad)}
.ms-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(31,95,214,.16)}
.ms-card .ms-tag{font-size:10px;letter-spacing:.14em;color:var(--ink3)}
.ms-card b{display:block;font-size:15px;color:var(--ink);margin:3px 0 4px;font-weight:800}
.ms-card span{display:block;font-size:11.5px;color:var(--ink2);line-height:1.7}
.ms-card .ms-go{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:var(--brand)}