/* ==========================================================================
   萌安我学 · 三上数学星河号
   视觉系统 v1.0 —— 深空星图 / 发光星球 / 玻璃舱体
   与四上「暖色闯关岛」、五上「米白档案」、六上「工程制图纸」四方区隔
   ========================================================================== */

:root{
  /* ---- 深空底 ---- */
  --space-0:#080C1F;
  --space-1:#0C1230;
  --space-2:#161D42;

  /* ---- 舱体卡 ---- */
  --card:linear-gradient(155deg, rgba(40,50,104,.94) 0%, rgba(24,31,70,.94) 100%);
  --card-solid:#1A224C;
  --card-2:rgba(48,60,120,.55);

  /* ---- 文字 ---- */
  --ink:#EEF2FF;
  --ink-2:#AEB8E4;
  --ink-3:#727FB0;

  --line:rgba(130,150,235,.16);
  --line-2:rgba(130,150,235,.09);

  /* ---- 强调色 ---- */
  --brand:#7B8CFF;
  --brand-2:#B06BFF;
  --brand-soft:rgba(123,140,255,.18);

  --neon:#2BE0B8;
  --ok:#2BE0B8;
  --ok-soft:rgba(43,224,184,.14);
  --no:#FF6B8A;
  --no-soft:rgba(255,107,138,.14);
  --gold:#FFC53D;
  --gold-soft:rgba(255,197,61,.15);
  --cyan:#38BDF8;
  --pink:#FF6B9D;
  --orange:#FF9A5B;

  --r-xs:8px;  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px;
  --sh-1:0 2px 10px rgba(0,0,0,.30);
  --sh-2:0 10px 28px rgba(0,0,0,.34);
  --sh-3:0 18px 44px rgba(0,0,0,.44);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0;
  font-family:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 700px at 14% -8%, rgba(123,140,255,.20) 0%, transparent 58%),
    radial-gradient(900px 620px at 100% 10%, rgba(43,224,184,.10) 0%, transparent 55%),
    radial-gradient(900px 700px at 50% 118%, rgba(176,107,255,.18) 0%, transparent 60%),
    #05081A;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

/* ---------- 手机外框 ---------- */
.phone{
  position:relative;
  width:390px; height:844px;
  border-radius:44px;
  overflow:hidden;
  display:flex; flex-direction:column;
  isolation:isolate;
  /* 星点 + 星云 + 基础渐变：全部走 background 层，避免伪元素遮挡内容 */
  background-image:
    /* 星点（细） */
    radial-gradient(1.6px 1.6px at 12% 6%,  rgba(255,255,255,.85), transparent),
    radial-gradient(1.3px 1.3px at 27% 3%,  rgba(255,255,255,.55), transparent),
    radial-gradient(1.8px 1.8px at 46% 9%,  rgba(255,255,255,.75), transparent),
    radial-gradient(1.2px 1.2px at 63% 4%,  rgba(255,255,255,.50), transparent),
    radial-gradient(1.7px 1.7px at 82% 11%, rgba(255,255,255,.80), transparent),
    radial-gradient(1.3px 1.3px at 94% 6%,  rgba(255,255,255,.45), transparent),
    radial-gradient(1.5px 1.5px at 8% 22%,  rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 88% 26%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.6px 1.6px at 34% 34%, rgba(255,255,255,.38), transparent),
    radial-gradient(1.2px 1.2px at 71% 31%, rgba(255,255,255,.32), transparent),
    radial-gradient(1.4px 1.4px at 19% 47%, rgba(255,255,255,.34), transparent),
    radial-gradient(1.2px 1.2px at 90% 52%, rgba(255,255,255,.34), transparent),
    radial-gradient(1.5px 1.5px at 55% 58%, rgba(255,255,255,.26), transparent),
    radial-gradient(1.2px 1.2px at 6% 66%,  rgba(255,255,255,.28), transparent),
    radial-gradient(1.6px 1.6px at 79% 71%, rgba(255,255,255,.28), transparent),
    radial-gradient(1.3px 1.3px at 30% 80%, rgba(255,255,255,.24), transparent),
    radial-gradient(1.5px 1.5px at 60% 88%, rgba(255,255,255,.22), transparent),
    radial-gradient(1.2px 1.2px at 15% 93%, rgba(255,255,255,.22), transparent),
    radial-gradient(1.4px 1.4px at 92% 95%, rgba(255,255,255,.20), transparent),
    /* 星云 */
    radial-gradient(560px 400px at 86% -4%,  rgba(123,140,255,.26) 0%, transparent 64%),
    radial-gradient(480px 360px at 4% 24%,   rgba(43,224,184,.13) 0%, transparent 62%),
    radial-gradient(620px 460px at 52% 106%, rgba(176,107,255,.20) 0%, transparent 64%),
    linear-gradient(180deg,#0A0F26 0%,#0C1230 46%,#0A1030 100%);
  background-repeat:no-repeat;
  box-shadow:
    0 0 0 9px #0B1024,
    0 0 0 11px rgba(123,140,255,.22),
    0 40px 100px rgba(0,0,0,.62),
    0 0 70px rgba(123,140,255,.14);
}
.phone::after{ /* 灵动岛 */
  content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:104px; height:26px; border-radius:14px; background:#05081A; z-index:60;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.statusbar{
  flex:0 0 46px; display:flex; align-items:center; justify-content:space-between;
  padding:0 26px; font-size:12.5px; font-weight:700; color:var(--ink);
  letter-spacing:.3px; position:relative; z-index:50;
}
.statusbar .sb-right{display:flex;align-items:center;gap:5px;}
.sb-bat{width:20px;height:10px;border:1.5px solid var(--ink);border-radius:3px;position:relative;opacity:.85}
.sb-bat::before{content:"";position:absolute;inset:1.5px;width:11px;background:var(--neon);border-radius:1px}
.sb-bat::after{content:"";position:absolute;right:-3.5px;top:2.5px;width:2px;height:5px;background:var(--ink);border-radius:0 1px 1px 0}

/* ---------- 屏幕容器 ---------- */
#app{flex:1 1 auto; position:relative; overflow:hidden;}
.screen{
  position:absolute; inset:0; display:none; flex-direction:column;
}
.screen.active{display:flex;}

.scroll{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  padding:0 18px 20px;
  scrollbar-width:none;
}
.scroll::-webkit-scrollbar{display:none}

/* ==========================================================================
   顶部栏 / 通用件
   ========================================================================== */
.topbar{
  flex:0 0 auto; padding:6px 18px 12px; display:flex; align-items:center; gap:12px;
}
.topbar .tb-title{font-size:19px; font-weight:800; letter-spacing:.4px;}
.topbar .tb-sub{font-size:11.5px; color:var(--ink-3); font-weight:600; margin-top:2px;}
.icon-btn{
  width:36px;height:36px;border-radius:12px;border:1px solid var(--line);
  background:rgba(48,60,120,.55);color:var(--ink);
  display:grid;place-items:center;box-shadow:var(--sh-1);cursor:pointer;flex:0 0 auto;
  transition:transform .15s, box-shadow .15s;
  backdrop-filter:blur(8px);
}
.icon-btn:active{transform:scale(.92)}

.pill{
  display:inline-flex;align-items:center;gap:5px;
  height:27px;padding:0 11px;border-radius:14px;
  font-size:11.5px;font-weight:800;background:rgba(48,60,120,.6);color:var(--ink-2);
  border:1px solid var(--line);white-space:nowrap;
}
.pill.gold{background:var(--gold-soft);color:var(--gold);border-color:rgba(255,197,61,.3)}
.pill.fire{background:var(--gold-soft);color:var(--gold);border-color:rgba(255,197,61,.32)}
.pill.brand{background:var(--brand-soft);color:var(--brand);border-color:rgba(123,140,255,.32)}
.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:rgba(43,224,184,.3)}
.pill.no{background:var(--no-soft);color:var(--no);border-color:rgba(255,107,138,.3)}

.h1{font-size:22px;font-weight:900;letter-spacing:.2px;margin:0}
.h2{font-size:16px;font-weight:800;margin:0;letter-spacing:.2px}
.muted{color:var(--ink-3);font-size:12px;font-weight:600;line-height:1.6}

.card{
  background:var(--card); border-radius:var(--r-md);
  border:1px solid var(--line);
  box-shadow:var(--sh-2), inset 0 1px 0 rgba(255,255,255,.05);
  padding:14px;
}
.sec-title{
  display:flex;align-items:center;justify-content:space-between;
  margin:18px 2px 10px;
}
.sec-title h3{
  margin:0;font-size:14.5px;font-weight:800;letter-spacing:.3px;
  display:flex;align-items:center;gap:7px;
}
.sec-title h3::before{
  content:"";width:3px;height:14px;border-radius:2px;
  background:linear-gradient(180deg,var(--neon),var(--brand-2));
  box-shadow:0 0 8px rgba(43,224,184,.6);
}
.sec-title .more{font-size:11.5px;color:var(--ink-3);font-weight:700;cursor:pointer}

/* 主按钮 */
.btn{
  border:none;cursor:pointer;font-family:inherit;font-weight:800;
  border-radius:16px; height:50px; padding:0 22px; font-size:15.5px;
  color:#04121A; background:linear-gradient(135deg,#4FEBCC,#22C7F5);
  box-shadow:0 6px 0 #0E8AA8, 0 14px 30px rgba(43,224,184,.30);
  transition:transform .12s, box-shadow .12s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
}
.btn:active{transform:translateY(4px); box-shadow:0 2px 0 #0E8AA8, 0 6px 16px rgba(43,224,184,.28)}
.btn.ghost{
  background:rgba(48,60,120,.6);color:var(--brand);
  border:1px solid rgba(123,140,255,.32);
  box-shadow:0 4px 0 rgba(20,26,58,.9), 0 10px 20px rgba(0,0,0,.3);
  backdrop-filter:blur(8px);
}
.btn.ghost:active{box-shadow:0 1px 0 rgba(20,26,58,.9)}
.btn.small{height:40px;font-size:13.5px;border-radius:13px;box-shadow:0 4px 0 #0E8AA8,0 10px 20px rgba(43,224,184,.24)}
.btn.small:active{box-shadow:0 1px 0 #0E8AA8}
.btn.ghost.small{box-shadow:0 4px 0 rgba(20,26,58,.9)}
.btn.green{background:linear-gradient(135deg,#4FEBCC,#22C7F5);box-shadow:0 6px 0 #0E8AA8,0 14px 30px rgba(43,224,184,.3)}
.btn.green:active{box-shadow:0 2px 0 #0E8AA8}
.btn[disabled]{opacity:.36;pointer-events:none;filter:saturate(.5)}

/* ==========================================================================
   首页 —— 指挥舱 + 星河航线
   ========================================================================== */
.hero{
  margin:0 0 4px; padding:16px 16px 14px; border-radius:var(--r-lg);
  background:linear-gradient(135deg,#3D4DB8 0%,#6A4BD0 52%,#9B4FD6 100%);
  color:#fff; position:relative; overflow:hidden;
  box-shadow:0 18px 40px rgba(106,75,208,.40), inset 0 1px 0 rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.10);
}
.hero::before{
  content:""; position:absolute; width:190px;height:190px;border-radius:50%;
  right:-62px; top:-78px;
  background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.22), rgba(255,255,255,.04) 70%);
}
.hero::after{
  content:""; position:absolute; width:130px;height:130px;border-radius:50%;
  right:34px; bottom:-70px;
  background:radial-gradient(circle at 50% 50%, rgba(43,224,184,.34), transparent 70%);
}
.hero-top{position:relative;display:flex;align-items:center;gap:11px}
.avatar{
  width:46px;height:46px;border-radius:16px;flex:0 0 auto;
  background:linear-gradient(135deg,#FFE29A,#FFC53D);
  display:grid;place-items:center;font-size:24px;
  box-shadow:0 6px 16px rgba(0,0,0,.28), inset 0 -2px 0 rgba(0,0,0,.10);
}
.hero-name{font-size:15.5px;font-weight:900;letter-spacing:.3px}
.hero-lv{font-size:11px;opacity:.94;font-weight:700;margin-top:3px;display:flex;align-items:center;gap:6px}
.lv-bar{width:74px;height:5px;border-radius:3px;background:rgba(255,255,255,.28);overflow:hidden}
.lv-bar i{
  display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#2BE0B8,#7BFFE4);
  box-shadow:0 0 9px rgba(43,224,184,.95);
}
.hero-stats{
  position:relative;margin-top:15px;display:grid;grid-template-columns:repeat(3,1fr);
  background:rgba(10,14,40,.30);border:1px solid rgba(255,255,255,.16);
  border-radius:16px;padding:10px 0;backdrop-filter:blur(6px);
}
.hero-stats .hs{text-align:center;position:relative}
.hero-stats .hs+.hs::before{
  content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:rgba(255,255,255,.20);
}
.hero-stats b{display:block;font-size:19px;font-weight:900;letter-spacing:.4px;font-variant-numeric:tabular-nums}
.hero-stats span{display:block;font-size:10.5px;opacity:.86;font-weight:700;margin-top:2px}

/* 今日航程条 */
.today{
  display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:var(--r-md);
  background:linear-gradient(135deg,rgba(255,197,61,.16),rgba(255,154,91,.10));
  border:1.5px dashed rgba(255,197,61,.42);
  box-shadow:0 8px 22px rgba(255,197,61,.10);
}
.today .t-ico{
  width:40px;height:40px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(255,255,255,.10);font-size:20px;border:1px solid rgba(255,197,61,.28);
}
.today .t-txt{flex:1 1 auto;min-width:0}
.today .t-txt b{display:block;font-size:13.5px;font-weight:800;margin-bottom:3px;color:var(--ink)}
.today .t-txt span{font-size:11.5px;color:var(--gold);font-weight:700}
.t-go{
  flex:0 0 auto;height:32px;padding:0 14px;border-radius:11px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#FFD75E,#FF9A5B);color:#3A1F00;font-weight:900;font-size:12.5px;
  font-family:inherit;box-shadow:0 3px 0 #C97A2A, 0 8px 18px rgba(255,154,91,.28);
}
.t-go:active{transform:translateY(2px);box-shadow:0 1px 0 #C97A2A}

/* 新教材变动卡（营销钩子，产品内也告诉家长） */
.change-card{
  margin-top:14px;
  background:linear-gradient(135deg,rgba(123,140,255,.16),rgba(176,107,255,.10));
  border:1px solid rgba(123,140,255,.28);
}
.change-card .cc-h{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:900;color:var(--ink);margin-bottom:7px;
}
.change-card .cc-tag{
  height:18px;padding:0 7px;border-radius:6px;display:inline-grid;place-items:center;
  background:linear-gradient(135deg,#4FEBCC,#22C7F5);color:#04121A;font-size:10px;font-weight:900;
  letter-spacing:.5px;
}
.change-card .cc-b{font-size:11.5px;line-height:1.75;color:var(--ink-2);font-weight:600}
.change-card .cc-b b{color:var(--neon)}

/* ---------- 星河航线 ---------- */
.star-map{position:relative;padding:4px 0 2px}
.planet{
  position:relative;display:flex;gap:12px;align-items:flex-start;
  padding-bottom:14px;cursor:pointer;
}
.planet:active .p-card{transform:scale(.982)}

/* 轨道栏（星球 + 连线） */
.p-rail{
  position:relative;flex:0 0 52px;display:flex;justify-content:center;
  align-self:stretch;padding-top:3px;
}
.p-orb{
  position:relative;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;flex:0 0 auto;
  background:radial-gradient(circle at 34% 30%, var(--c1), var(--c2) 78%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 8px 20px rgba(0,0,0,.48),
    0 0 22px -4px var(--c1),
    inset -3px -4px 10px rgba(0,0,0,.34),
    inset 2px 2px 6px rgba(255,255,255,.22);
}
.p-orb .p-ico{font-size:21px;line-height:1;position:relative;z-index:2;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.p-glow{
  position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--c1);opacity:0;pointer-events:none;
}
/* 航线（竖线）连到下一颗星球 */
.planet:not(:last-child) .p-rail::after{
  content:"";position:absolute;left:50%;top:49px;bottom:-14px;
  width:2px;transform:translateX(-50%);border-radius:1px;
  background:linear-gradient(180deg, var(--c1), rgba(130,150,235,.14));
  opacity:.42;
}
.planet.done:not(:last-child) .p-rail::after{
  opacity:.92;box-shadow:0 0 10px var(--c1);
}
/* 星球本体状态 */
.planet.lock .p-orb{filter:grayscale(.85) brightness(.62);box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.4)}
.planet.cur .p-glow{opacity:.95;animation:orbPulse 1.9s ease-out infinite}
@keyframes orbPulse{
  0%{transform:scale(.88);opacity:.95}
  70%{transform:scale(1.30);opacity:0}
  100%{transform:scale(1.30);opacity:0}
}
.planet.cur .p-orb{animation:orbFloat 3.4s ease-in-out infinite}
@keyframes orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* 星球卡 */
.p-card{
  flex:1 1 auto;min-width:0;position:relative;
  padding:11px 13px;border-radius:16px;
  background:linear-gradient(155deg, rgba(40,50,104,.92) 0%, rgba(24,31,70,.92) 100%);
  border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.planet.done .p-card{border-color:rgba(43,224,184,.20)}
.planet.cur .p-card{
  border-color:rgba(123,140,255,.44);
  box-shadow:0 14px 34px rgba(60,80,200,.30), 0 0 0 1px rgba(123,140,255,.16), inset 0 1px 0 rgba(255,255,255,.07);
}
.planet.lock{cursor:not-allowed}
.planet.lock .p-card{opacity:.55;filter:saturate(.45)}
.pc-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.pc-no{
  font-size:10px;font-weight:900;letter-spacing:1.1px;
  color:var(--c1);text-transform:uppercase;
}
.pc-stars{display:flex;gap:1.5px;font-size:12px;line-height:1}
.pc-stars i{font-style:normal;color:var(--ink-3);letter-spacing:1px;font-size:11px}
.pc-t{font-size:14.5px;font-weight:800;letter-spacing:.2px;margin-bottom:4px}
.pc-d{
  font-size:11px;color:var(--ink-3);font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pc-bar{
  height:4px;border-radius:2px;margin-top:9px;overflow:hidden;
  background:rgba(255,255,255,.08);
}
.pc-bar i{
  display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--c1),var(--c2));
  box-shadow:0 0 8px -1px var(--c1);
  transition:width .5s cubic-bezier(.2,.8,.3,1);
}
.pc-foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:6px;font-size:10.5px;font-weight:800;color:var(--ink-3);
}
.pc-foot .pc-n{color:var(--ink-3);opacity:.8}
.lockchip{
  display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;
  color:var(--ink-3);
}
.note-card{background:rgba(30,38,84,.55);border-style:dashed}

/* ==========================================================================
   单元页
   ========================================================================== */
.ls{
  border-radius:var(--r-lg); padding:16px 18px; color:#fff; position:relative;
  overflow:hidden; margin-bottom:4px;
  box-shadow:0 16px 36px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.16);
}
/* 单元色里有些偏亮（柠檬绿 / 银白 / 琥珀金），压一层深空遮罩保证白字可读，
   同时让所有头图统一带一点「夜色」，与整体星图调性一致 */
.ls::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg, rgba(6,10,30,.30) 0%, rgba(6,10,30,.52) 100%);
}
.ls > *{position:relative; z-index:1}
.ls::after{
  content:""; position:absolute; width:170px;height:170px;border-radius:50%;
  right:-56px; top:-66px;
  background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.24), rgba(255,255,255,.02) 72%);
}
.ls-tag{
  display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:7px;
  background:rgba(4,12,28,.30);font-size:10.5px;font-weight:900;letter-spacing:1px;
  border:1px solid rgba(255,255,255,.20);
}
.ls h2{margin:8px 0 5px;font-size:21px;font-weight:900;letter-spacing:.3px}
.ls p{margin:0;font-size:12px;font-weight:700;opacity:.92;line-height:1.55}

.kcard{
  position:relative;display:block;padding:12px 13px;border-radius:16px;
  background:linear-gradient(155deg, rgba(38,48,100,.86), rgba(23,30,68,.86));
  border:1px solid var(--line);border-left:3px solid var(--brand);
  box-shadow:0 8px 22px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04);
  margin-bottom:10px;transition:transform .14s, border-color .14s;
}
.kcard:active{transform:scale(.985)}
.kcard .k-h{display:flex;align-items:center;gap:11px;margin-bottom:3px}
.kcard .k-n{
  width:24px;height:24px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;
  font-size:12px;font-weight:900;color:#04121A;
}
.kcard .k-t{font-size:13.5px;font-weight:800;letter-spacing:.2px}
.kcard .muted{font-size:11px;font-weight:700}

/* 知识点正文 */
.k-b{font-size:13.5px;line-height:1.78;color:var(--ink-2)}
.k-b b{color:var(--ink);font-weight:800}
.formula{
  margin:9px 0;padding:10px 12px;border-radius:12px;
  background:rgba(43,224,184,.08);border:1px dashed rgba(43,224,184,.34);
  font-size:12.5px;font-weight:800;color:var(--neon);line-height:1.9;
  text-align:center;letter-spacing:.2px;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:9px 0}
.mini{
  padding:9px 10px;border-radius:12px;
  background:rgba(123,140,255,.10);border:1px solid rgba(123,140,255,.20);
}
.mini b{display:block;font-size:11.5px;font-weight:900;color:var(--brand);margin-bottom:3px}
.mini span{display:block;font-size:11px;font-weight:600;color:var(--ink-2);line-height:1.55}
.tip{
  display:flex;gap:8px;align-items:flex-start;
  margin:9px 0;padding:9px 11px;border-radius:12px;
  background:rgba(255,197,61,.10);border-left:3px solid var(--gold);
  font-size:11.5px;font-weight:600;color:var(--ink-2);line-height:1.68;
}
.tip .i{flex:0 0 auto;font-size:12px;line-height:1.4}
.tip.ok{background:rgba(43,224,184,.10);border-left-color:var(--neon)}

/* ==========================================================================
   答题页
   ========================================================================== */
.quiz-top{
  flex:0 0 auto;padding:8px 18px 12px;display:flex;align-items:center;gap:11px;
}
.prog{
  flex:1 1 auto;height:8px;border-radius:4px;overflow:hidden;
  background:rgba(255,255,255,.09);border:1px solid var(--line);
}
.prog i{
  display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,#4FEBCC,#7B8CFF);
  box-shadow:0 0 10px rgba(43,224,184,.7);
  transition:width .35s cubic-bezier(.2,.8,.3,1);
}
.hearts{display:flex;gap:3px;flex:0 0 auto;font-size:14px;line-height:1}
.hearts .h{transition:opacity .3s, transform .3s}
.hearts .h.gone{opacity:.28;transform:scale(.86)}

.qbox{
  padding:14px 15px;border-radius:var(--r-md);
  background:linear-gradient(155deg, rgba(42,52,110,.92), rgba(24,31,70,.92));
  border:1px solid var(--line);
  box-shadow:var(--sh-2), inset 0 1px 0 rgba(255,255,255,.05);
}
.q-index{
  font-size:10.5px;font-weight:900;letter-spacing:1.2px;color:var(--neon);
  margin-bottom:7px;text-transform:uppercase;
}
.q-stem{font-size:16px;font-weight:800;line-height:1.72;letter-spacing:.2px;color:var(--ink)}
.q-stem b{color:var(--neon)}

/* 选项 */
.opts{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.opt{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:13px 14px;border-radius:15px;cursor:pointer;text-align:left;
  font-family:inherit;font-size:13.5px;font-weight:700;color:var(--ink);
  background:linear-gradient(155deg, rgba(38,48,100,.88), rgba(23,30,68,.88));
  border:1.5px solid var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .13s, border-color .13s, box-shadow .13s, background .13s;
}
.opt:active{transform:scale(.985)}
.opt .k{
  width:26px;height:26px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  font-size:12px;font-weight:900;letter-spacing:.5px;
  background:rgba(123,140,255,.20);color:var(--brand);
  border:1px solid rgba(123,140,255,.28);
}
.opt .v{flex:1 1 auto;min-width:0;line-height:1.5}
.opt.pick{
  border-color:var(--neon);
  background:linear-gradient(155deg, rgba(43,224,184,.18), rgba(24,31,70,.9));
  box-shadow:0 0 0 1px rgba(43,224,184,.34), 0 10px 26px rgba(43,224,184,.22);
}
.opt.pick .k{background:var(--neon);color:#04121A;border-color:var(--neon)}
.opt.right{
  border-color:var(--neon);
  background:linear-gradient(155deg, rgba(43,224,184,.26), rgba(20,60,60,.9));
  box-shadow:0 0 0 1px rgba(43,224,184,.4), 0 10px 28px rgba(43,224,184,.24);
}
.opt.right .k{background:var(--neon);color:#04121A;border-color:var(--neon)}
.opt.wrong{
  border-color:var(--no);
  background:linear-gradient(155deg, rgba(255,107,138,.22), rgba(60,22,38,.9));
  box-shadow:0 0 0 1px rgba(255,107,138,.34), 0 10px 26px rgba(255,107,138,.20);
  animation:shake .34s ease-in-out;
}
.opt.wrong .k{background:var(--no);color:#fff;border-color:var(--no)}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-6px)}
  55%{transform:translateX(6px)}
  80%{transform:translateX(-3px)}
}
.opt[disabled]{cursor:default}
.opt[disabled]:not(.right):not(.wrong){opacity:.5}

/* 数字键盘 */
.padwrap{margin-top:14px}
.padview{
  display:flex;align-items:center;justify-content:center;gap:6px;
  height:58px;border-radius:15px;margin-bottom:11px;
  background:rgba(10,14,40,.55);border:1.5px solid rgba(43,224,184,.32);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.4);
}
.padview .pv{
  font-size:24px;font-weight:900;letter-spacing:2px;color:var(--neon);
  font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(43,224,184,.5);
}
.padview .pv.empty{font-size:13px;letter-spacing:0;color:var(--ink-3);font-weight:700;text-shadow:none}
.padview .unit{font-size:14px;font-weight:800;color:var(--ink-2);margin-left:2px}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.pad button{
  height:50px;border-radius:14px;cursor:pointer;font-family:inherit;font-size:19px;font-weight:800;
  color:var(--ink);
  background:linear-gradient(160deg, rgba(48,60,120,.72), rgba(26,33,74,.72));
  border:1px solid var(--line);
  box-shadow:0 4px 0 rgba(16,20,48,.9), 0 8px 18px rgba(0,0,0,.28);
  transition:transform .1s, box-shadow .1s;
  backdrop-filter:blur(6px);
}
.pad button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(16,20,48,.9)}
.pad button.fn{font-size:13.5px;color:var(--no);border-color:rgba(255,107,138,.26)}
.pad button.ok{
  font-size:14.5px;font-weight:900;color:#04121A;
  background:linear-gradient(135deg,#4FEBCC,#22C7F5);
  border-color:transparent;
  box-shadow:0 4px 0 #0E8AA8, 0 10px 22px rgba(43,224,184,.26);
}
.pad button.ok:active{box-shadow:0 1px 0 #0E8AA8}

/* 解析 */
.explain{
  margin-top:14px;padding:12px 13px;border-radius:15px;
  background:linear-gradient(155deg, rgba(38,48,100,.88), rgba(23,30,68,.88));
  border:1px solid var(--line);border-left:4px solid var(--neon);
  box-shadow:0 10px 26px rgba(0,0,0,.30);
  animation:riseIn .34s cubic-bezier(.2,.9,.3,1) both;
}
.ex-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:900;margin-bottom:8px}
.ex-h .dot{
  width:20px;height:20px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
}
.ex-b{font-size:12.5px;line-height:1.82;color:var(--ink-2);font-weight:600}
.ex-b b{color:var(--ink);font-weight:800}

/* 连击浮层 */
.combo{
  position:absolute;left:50%;top:30%;transform:translate(-50%,0) scale(.7);
  font-size:26px;font-weight:900;letter-spacing:1px;pointer-events:none;
  color:var(--gold);opacity:0;z-index:30;white-space:nowrap;
  text-shadow:0 0 20px rgba(255,197,61,.85), 0 3px 10px rgba(0,0,0,.5);
}
.combo.show{animation:comboPop .95s cubic-bezier(.2,.9,.3,1) both}
@keyframes comboPop{
  0%{opacity:0;transform:translate(-50%,10px) scale(.6)}
  28%{opacity:1;transform:translate(-50%,-6px) scale(1.16)}
  60%{opacity:1;transform:translate(-50%,-10px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-34px) scale(.96)}
}

/* ==========================================================================
   结算页
   ========================================================================== */
.result-wrap{
  flex:1 1 auto;overflow-y:auto;padding:8px 18px 26px;text-align:center;
  scrollbar-width:none;
}
.result-wrap::-webkit-scrollbar{display:none}
.ray{
  width:118px;height:118px;margin:8px auto 0;border-radius:50%;
  display:grid;place-items:center;position:relative;
  background:radial-gradient(circle at 50% 50%, rgba(123,140,255,.36), rgba(176,107,255,.10) 60%, transparent 72%);
}
.ray::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px dashed rgba(43,224,184,.42);
  animation:spin 14s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.ray .core{
  width:74px;height:74px;border-radius:50%;display:grid;place-items:center;font-size:34px;
  background:linear-gradient(135deg,rgba(79,235,204,.28),rgba(176,107,255,.28));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 0 30px rgba(123,140,255,.42), inset 0 1px 0 rgba(255,255,255,.20);
}
.star-row{display:flex;justify-content:center;gap:6px;margin:12px 0 6px;font-size:36px;line-height:1}
.star-row .big{color:rgba(255,255,255,.10);transition:color .3s, text-shadow .3s, transform .3s;transform:scale(.86)}
.star-row .big.on{
  color:var(--gold);text-shadow:0 0 22px rgba(255,197,61,.85);
  transform:scale(1.06);
}
.res-title{font-size:22px;font-weight:900;letter-spacing:.5px;margin-top:4px}
.res-sub{font-size:12.5px;color:var(--ink-3);font-weight:700;line-height:1.75;margin-top:5px}
.reward{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin:16px 0;border-radius:16px;overflow:hidden;
  background:var(--line);border:1px solid var(--line);
}
.reward .rw{
  padding:13px 0;background:linear-gradient(160deg, rgba(40,50,104,.92), rgba(24,31,70,.92));
}
.reward .rw b{
  display:block;font-size:18px;font-weight:900;color:var(--gold);
  font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(255,197,61,.35);
}
.reward .rw span{display:block;font-size:10.5px;color:var(--ink-3);font-weight:800;margin-top:3px}

/* ==========================================================================
   纠错舱
   ========================================================================== */
.wrong-item{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px 14px;margin-bottom:11px;
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.04);
}
.wi-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.wi-tag{
  height:19px;padding:0 8px;border-radius:6px;display:inline-grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);font-size:10px;font-weight:900;letter-spacing:.4px;
}
.wi-n{font-size:10.5px;font-weight:800;color:var(--ink-3)}
.wi-q{font-size:13.5px;font-weight:800;line-height:1.7;margin-bottom:9px;color:var(--ink)}
.wi-a{font-size:11.5px;font-weight:800;color:var(--ink-3);margin-bottom:8px;line-height:1.8}
.wi-a .bad{
  display:inline-flex;align-items:center;height:21px;padding:0 8px;border-radius:6px;
  background:var(--no-soft);color:var(--no);border:1px solid rgba(255,107,138,.3);
  text-decoration:line-through;text-decoration-thickness:1.5px;
}
.wi-a .good{
  display:inline-flex;align-items:center;height:21px;padding:0 8px;border-radius:6px;
  background:var(--ok-soft);color:var(--neon);border:1px solid rgba(43,224,184,.32);
}
.wi-x{
  font-size:11.5px;line-height:1.78;color:var(--ink-2);font-weight:600;
  padding:9px 11px;border-radius:11px;
  background:rgba(255,197,61,.08);border-left:3px solid rgba(255,197,61,.6);
}
.wi-x b{color:var(--ink)}

/* ==========================================================================
   航迹报告
   ========================================================================== */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px 12px;box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.04);
}
.stat .s-ico{
  width:32px;height:32px;border-radius:11px;display:grid;place-items:center;
  font-size:16px;margin-bottom:9px;border:1px solid var(--line);
}
.stat b{
  display:block;font-size:21px;font-weight:900;letter-spacing:.3px;
  font-variant-numeric:tabular-nums;margin-bottom:3px;
}
.stat span{font-size:11px;color:var(--ink-3);font-weight:800}
.bars{display:flex;align-items:flex-end;justify-content:space-between;height:118px;gap:8px;padding-top:8px}
.bar-c{flex:1 1 0;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;min-width:0}
.bar{
  width:100%;max-width:26px;border-radius:8px 8px 4px 4px;position:relative;
  background:linear-gradient(180deg,rgba(123,140,255,.85),rgba(123,140,255,.35));
  box-shadow:0 0 12px rgba(123,140,255,.28);
  transition:height .5s cubic-bezier(.2,.8,.3,1);
}
.bar.hi{background:linear-gradient(180deg,#4FEBCC,rgba(43,224,184,.35));box-shadow:0 0 14px rgba(43,224,184,.4)}
.bar.low{background:linear-gradient(180deg,rgba(114,127,176,.6),rgba(114,127,176,.2));box-shadow:none}
.bar .bv{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  font-size:10px;font-weight:900;color:var(--ink-2);
}
.bar-c .bl{font-size:9.5px;font-weight:800;color:var(--ink-3);margin-top:7px;white-space:nowrap}
.ring-wrap{display:flex;align-items:center;gap:14px}
.ring-txt{flex:1 1 auto;min-width:0}
.ring-txt b{display:block;font-size:13.5px;font-weight:800;margin-bottom:5px}
.ring-txt span{display:block;font-size:11.5px;color:var(--ink-3);font-weight:600;line-height:1.68}

/* ==========================================================================
   底部导航
   ========================================================================== */
#tabbar{
  flex:0 0 62px;display:flex;align-items:center;
  padding:0 8px 6px;
  background:rgba(10,14,38,.82);
  border-top:1px solid var(--line);
  backdrop-filter:blur(14px);
  position:relative;z-index:40;
}
#tabbar.hide{display:none}
.tab{
  flex:1 1 0;border:none;background:transparent;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 0;border-radius:14px;color:var(--ink-3);
  transition:color .16s, background .16s;
}
.tab .ti{font-size:19px;line-height:1;position:relative;transition:transform .16s}
.tab .tt{font-size:10.5px;font-weight:800;letter-spacing:.3px}
.tab.on{color:var(--neon);background:rgba(43,224,184,.09)}
.tab.on .ti{transform:translateY(-1px) scale(1.06);filter:drop-shadow(0 0 8px rgba(43,224,184,.7))}
.tab .dot{
  position:absolute;top:-4px;right:-9px;min-width:15px;height:15px;padding:0 4px;
  border-radius:8px;background:var(--no);color:#fff;font-size:9px;font-weight:900;
  display:grid;place-items:center;box-shadow:0 0 10px rgba(255,107,138,.7);
}

/* 底部操作条 */
.foot{
  flex:0 0 auto;padding:11px 18px 20px;
  background:linear-gradient(180deg, rgba(8,12,31,0), rgba(8,12,31,.86) 42%);
}

/* ==========================================================================
   动效
   ========================================================================== */
.fade-in{animation:riseIn .48s cubic-bezier(.2,.9,.3,1) both}
@keyframes riseIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
.stagger > *{animation:riseIn .46s cubic-bezier(.2,.9,.3,1) both}
.stagger > *:nth-child(1){animation-delay:.02s}
.stagger > *:nth-child(2){animation-delay:.06s}
.stagger > *:nth-child(3){animation-delay:.10s}
.stagger > *:nth-child(4){animation-delay:.14s}
.stagger > *:nth-child(5){animation-delay:.18s}
.stagger > *:nth-child(6){animation-delay:.22s}
.stagger > *:nth-child(7){animation-delay:.26s}
.stagger > *:nth-child(8){animation-delay:.30s}
.stagger > *:nth-child(9){animation-delay:.34s}
.stagger > *:nth-child(10){animation-delay:.38s}

#fx{position:fixed;inset:0;pointer-events:none;z-index:999;overflow:hidden}
.confetti{position:fixed;width:9px;height:9px;will-change:transform}
.float-xp{
  position:fixed;font-size:19px;font-weight:900;pointer-events:none;z-index:1000;
  animation:floatUp 1.05s cubic-bezier(.2,.9,.3,1) both;
  text-shadow:0 0 16px currentColor, 0 2px 8px rgba(0,0,0,.5);
}
@keyframes floatUp{
  0%{opacity:0;transform:translate(-50%,10px) scale(.8)}
  25%{opacity:1;transform:translate(-50%,-4px) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-64px) scale(1)}
}

/* 减少动效偏好 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ==== SHELL-OFF:BEGIN 2026-09-19 ==== */
/* 去掉「手机外壳」：原先这里是 390×844 圆角壳 + 阴影 + 假状态栏
   （9:41 / 5G / 电池），真机上打开 = 手机里再套一个手机，观感很怪。
   现改为铺满可用视口、顶部吃系统安全区。与 9sx4 的方案保持一致。
   ⚠ 桌面预览(≥430px)下 .phone 居中显示，不再有圆角与阴影 —— 有意的。 */
.phone {
  width: 100%;
  max-width: 430px;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0 auto;
  border-radius: 0;
  box-shadow: none;
  padding-top: calc(8px + env(safe-area-inset-top));
  box-sizing: border-box;
}
.phone::after { display: none; }   /* 灵动岛（math-star-grade3 为深色胶囊，隐藏） */
.statusbar { display: none; }   /* 假状态栏：真实状态栏由系统绘制，这里腾出来给顶部公告条 */
/* ==== SHELL-OFF:END ==== */

/* ── 教材条：首屏第一行告诉家长「这是哪一册」 ──────────────────────────
   文案由后台「主题设置 → H5 页头」统一维护（jl-hero.js 取 /wp-json/mx/v1/hero），
   这里写死的那句是断网/接口失败时的兜底，不是最终显示内容。            */
.bkbar{margin:2px 0 10px;padding:10px 13px;border-radius:14px;
  background:#fff;border:2px solid #EDE6DA;box-shadow:0 3px 0 rgba(74,64,56,.10)}
.bk-t{font-size:16.5px;font-weight:800;color:#4A4038;line-height:1.35;letter-spacing:.2px}
.bk-s{margin-top:4px;font-size:11.5px;color:#8A7F70;line-height:1.45}