/* ============================================================
   艾玛的代码冒险岛 — 样式
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* 🌌 星海群岛 · 深色宇宙主题 (Cosmic Archipelago dark theme) */
  --sky-1: #14224a; --sky-2: #1f386f; --sky-3: #2f56a0;
  --ink: #eef4ff;            /* 主文字(浅) */
  --text-dim: #a9c0ee;       /* 次文字 */
  --card: #22346b;           /* 卡片/面板深色表面(纯色,用于边框/color-mix) */
  --card-grad: linear-gradient(90deg, #2a3f74, #22346b); /* 卡片渐变表面:全站统一"融进星空"的玻璃质感(源自地图卡片) */
  --surface-2: #2c3f7d;      /* 略亮表面(输入框/次级) */
  --border: rgba(255,255,255,.14);
  --accent: #ff9a4d;         /* 主强调(暖橙) */
  --gold: #ffd34d;           /* 金色高光 */
  --ok: #37d39b;
  --bad: #ff7a7a;
  --radius: 20px;
}

/* 纵向滚动条常显 → clientWidth 恒定:全屏场景页按 clientWidth 排版,滚动条出现/消失不再引发横向溢出 */
html { -webkit-text-size-adjust: 100%; overflow-y: scroll; scrollbar-gutter: stable; }
body { overflow-x: hidden; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: radial-gradient(125% 95% at 50% -12%, var(--sky-3), var(--sky-2) 46%, var(--sky-1) 100%) fixed;
  min-height: 100vh;
}
/* 星空:固定的稀疏星点 + 极慢闪烁 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.2px 1.2px at 32% 42%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.6px 1.6px at 58% 12%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.1px 1.1px at 74% 34%, rgba(255,255,255,0.533), transparent),
    radial-gradient(1.5px 1.5px at 88% 20%, rgba(255,255,255,0.733), transparent),
    radial-gradient(1.2px 1.2px at 22% 68%, rgba(255,255,255,0.533), transparent),
    radial-gradient(1.3px 1.3px at 64% 74%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.1px 1.1px at 45% 88%, rgba(255,255,255,0.467), transparent),
    radial-gradient(1.5px 1.5px at 92% 62%, rgba(255,255,255,0.667), transparent),
    radial-gradient(1.2px 1.2px at 8% 84%, rgba(255,255,255,0.533), transparent);
  background-repeat: no-repeat;
  animation: twinkle 5s ease-in-out infinite;
}
@keyframes twinkle { 0%,100%{opacity:.55} 50%{opacity:.9} }
#app { position: relative; z-index: 1; }
button { font-family: inherit; cursor: pointer; }
code {
  background: #f0f3ff; border-radius: 6px; padding: 1px 6px;
  font-family: Consolas, "Courier New", monospace; font-size: 0.95em; color: #4a54c4;
  display: inline-block; text-align: left;
}

/* ---------------- 顶部栏 ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px;
  background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(45,52,64,.08);
}
.logo { font-size: 1.15rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.xpwrap { flex: 1; min-width: 120px; }
.xptitle { font-size: .78rem; font-weight: 700; color: #6b7280; margin-bottom: 3px; }
.xpbar { height: 12px; background: #e5e9f2; border-radius: 8px; overflow: hidden; }
.xpfill {
  height: 100%; border-radius: 8px;
  background: linear-gradient(90deg, #feca57, #ff8a3d);
  transition: width .6s cubic-bezier(.2,.8,.3,1.2);
}
.streak { font-weight: 800; font-size: 1.05rem; }
.badgebtn {
  border: none; background: #fff3d6; border-radius: 12px;
  padding: 6px 12px; font-size: 1.1rem; font-weight: 800;
  box-shadow: 0 2px 0 #eec077, 0 2px 6px rgba(0,0,0,.08);
}
.badgecount { font-size: .85rem; margin-left: 3px; color: #b7791f; }
.langbtn {
  border: none; background: #e8f4ff; border-radius: 12px;
  padding: 6px 12px; font-size: .9rem; font-weight: 800; color: #22699e;
  box-shadow: 0 2px 0 #c4dff2, 0 2px 6px rgba(0,0,0,.08);
  white-space: nowrap;
}
.langbtn:hover { background: #d5eaff; }
.devtag { font-size: 1.1rem; cursor: help; }

/* ---------------- 地图 ---------------- */
.map, .islandpage, .badgepage, .levelpage {
  max-width: 880px; margin: 0 auto; padding: 22px 16px 60px;
}
/* 🗺️ 全屏场景页(地图/岛屿/指挥官…):去掉居中盒子,场景铺满整页;四周留白稍大 */
main.mapfull { max-width: none; margin: 0; padding: 20px 36px 60px; }
/* 顶部一行:问候左上置顶 + 继续冒险/每日挑战 右上置顶(不再三行叠加) */
.map-hero-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 2px; }
.map-hero-row .map-hello { flex: 1 1 auto; min-width: 0; }
.map-hero-row .map-hello h1 { font-size: 1.42rem; margin-bottom: 3px; }
.map-hero-row .map-hello p { margin-bottom: 0; font-size: .92rem; max-width: 620px; }
.map-hero-right { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; width: min(430px, 44vw); }
.map-hero-right .continuebtn { width: 100%; font-size: 1.02rem; padding: 12px 16px; margin: 0; }
.map-hero-right .dailycard { margin: 0; padding: 8px 14px; }
/* 底部:星图入口 + 提示,居中纤薄 */
.map-foot { max-width: 860px; margin: 4px auto 0; }
.map-foot .treecard { margin: 0 0 4px; padding: 10px 16px; }
/* 场景美术层(库生成的海图地形;尺寸/偏移由内联样式给出——外扩铺满整页) */
.wm-terrain { position: absolute; z-index: 0; pointer-events: none; }
/* 标题行与页脚浮在地图之上(地图铺满整页,UI 是浮层) */
.map-hero-row, .map-foot { position: relative; z-index: 2; }
.map-hello h1 { font-size: 1.7rem; margin-bottom: 6px; }
.map-hello p { color: #55606e; margin-bottom: 18px; }
.islands { display: flex; flex-direction: column; align-items: stretch; }
.path-dot { text-align: center; color: #b9c6d4; font-size: .7rem; line-height: .9; padding: 4px 0; }
.island {
  display: flex; align-items: center; gap: 16px;
  background: var(--card); border-radius: var(--radius);
  padding: 18px 20px; cursor: pointer;
  border-left: 10px solid var(--ic);
  box-shadow: 0 4px 14px rgba(45,52,64,.10);
  transition: transform .15s, box-shadow .15s;
}
.island:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 8px 22px rgba(45,52,64,.15); }
.island.locked { opacity: .55; filter: grayscale(.6); }
.island.complete { background: linear-gradient(90deg, #fffbe8, #ffffff); }
.island-emoji { font-size: 2.6rem; }
.island-info { flex: 1; }
.island-name { font-size: 1.25rem; font-weight: 800; }
.island-sub { color: #6b7280; font-size: .92rem; margin: 2px 0 8px; }
.island-progress { display: flex; align-items: center; gap: 10px; font-size: .85rem; font-weight: 700; color: #6b7280; }
.ipbar { flex: 1; max-width: 260px; height: 10px; background: #edf1f7; border-radius: 6px; overflow: hidden; }
.ipfill { height: 100%; background: var(--ic); border-radius: 6px; transition: width .5s; }
.island-lock { font-size: 1.4rem; color: var(--ic); }
.map-tip { text-align: center; color: #8a94a3; margin-top: 22px; font-size: .9rem; }
.mapnav { text-align: center; margin-top: 20px; }
.mapnav .btn { font-size: 1rem; padding: 12px 22px; }
.continuebtn { margin: 0 0 16px; animation: pulseglow 2s infinite; }
@keyframes pulseglow {
  0%, 100% { box-shadow: 0 4px 0 #d96f1e, 0 6px 14px rgba(0,0,0,.12); }
  50% { box-shadow: 0 4px 0 #d96f1e, 0 0 22px rgba(255,138,61,.65); }
}
.ob-rows { text-align: left; margin: 10px 0; }
.ob-row { padding: 8px 6px; font-weight: 700; line-height: 1.6; }
.skillrow.todo { border-left: 6px solid #c9b8f5; opacity: .8; background: #fbfaff; }
.symbtn.tpl { background: #f6efff; color: #7d3fc9; font-family: inherit; font-size: .85rem; }
.dailycard {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(90deg, #fff7e0, #ffffff);
  border: 2px solid #ffd76e; border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 18px; cursor: pointer;
  box-shadow: 0 3px 12px rgba(240,180,41,.18);
  transition: transform .12s;
}
.dailycard:hover { transform: translateY(-2px); }
.dailycard.ddone { border-color: #cde9d9; background: linear-gradient(90deg, #f0fbf5, #ffffff); box-shadow: none; }
.daily-emoji { font-size: 1.8rem; }
.daily-text { flex: 1; line-height: 1.5; }
.daily-text b { display: block; font-size: 1.05rem; }
.daily-go { font-size: 1.2rem; color: #f0a729; font-weight: 900; }
.dailycard.ddone .daily-go { color: #1dd1a1; }

/* ---------------- 岛屿页 ---------------- */
.backbtn {
  border: none; background: #fff; border-radius: 12px; padding: 8px 16px;
  font-weight: 700; box-shadow: 0 2px 8px rgba(45,52,64,.10); margin-bottom: 16px;
}
.island-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ih-emoji { font-size: 3rem; }
.island-head h1 { font-size: 1.6rem; }
.island-head p { color: #6b7280; }
.levellist { display: flex; flex-direction: column; gap: 12px; }
.levelcard {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border-radius: 16px; padding: 16px 18px;
  cursor: pointer; box-shadow: 0 3px 10px rgba(45,52,64,.08);
  border-left: 8px solid var(--ic);
  transition: transform .12s;
}
.levelcard:hover { transform: translateX(4px); }
.levelcard.locked { opacity: .5; }
.levelcard.done { background: #f4fff9; }
.lvl-num { font-size: 1.3rem; }
.lvl-title { flex: 1; font-weight: 800; font-size: 1.05rem; }
.lvl-xp { font-weight: 800; color: #f39c12; font-size: .9rem; }

/* ---------------- 徽章 ---------------- */
.badgepage h1 { margin-bottom: 4px; }
.badgepage .sub { color: #6b7280; margin-bottom: 18px; }
.badgegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.badge {
  background: var(--card); border-radius: 16px; padding: 18px 12px; text-align: center;
  box-shadow: 0 3px 10px rgba(45,52,64,.08);
}
.badge.notown { opacity: .55; filter: grayscale(1); }
.b-emoji { font-size: 2.4rem; }
.b-name { font-weight: 800; margin: 6px 0 4px; }
.b-desc { font-size: .8rem; color: var(--text-dim, #9fb0cc); } /* 原 #6b7280 是浅色主题灰,在深色徽章卡上对比度仅 2.45 看不清;改深色主题静音色 */
.resetline { margin-top: 30px; text-align: center; font-size: .82rem; color: #9aa4b2; }
.resetline a { color: #c0392b; }

/* ---------------- 关卡通用 ---------------- */
.level-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.level-head h1 { font-size: 1.45rem; }
.lvxp { color: #f39c12; font-weight: 800; }
.card {
  background: var(--card); border-radius: var(--radius);
  padding: 22px; box-shadow: 0 4px 16px rgba(45,52,64,.10);
  margin-bottom: 16px;
}
.intro { line-height: 1.75; margin-bottom: 16px; }
.btn {
  border: none; border-radius: 12px; padding: 10px 16px;
  font-weight: 800; font-size: .95rem;
  background: #eef2f8; color: var(--ink);
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
  transition: transform .1s;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(135deg, #ffb14d, var(--accent)); color: #fff; }
.btn.small { padding: 4px 10px; font-size: .8rem; }
.bigbtn {
  display: block; width: 100%; border: none; margin-top: 16px;
  background: linear-gradient(135deg, #ffb14d, var(--accent)); color: #fff;
  font-size: 1.15rem; font-weight: 900; padding: 14px; border-radius: 16px;
  box-shadow: 0 4px 0 #d96f1e, 0 6px 14px rgba(0,0,0,.12);
  transition: transform .1s;
}
.bigbtn:hover { transform: translateY(-2px); }
.toolrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.result { margin-top: 12px; }
.ok, .bad {
  border-radius: 12px; padding: 12px 14px; font-weight: 700; line-height: 1.6;
  animation: pop .25s;
}
.ok { background: #e3fbf2; color: #0d8a66; }
.bad { background: #ffecec; color: #c0392b; }
@keyframes pop { from { transform: scale(.92); opacity: 0; } }

/* ---------------- 课程卡 ---------------- */
.lesson h2 { margin-bottom: 12px; font-size: 1.3rem; }
.lesson-body { line-height: 1.9; font-size: 1.02rem; }
.lesson-body p { margin-bottom: 10px; }
.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.pagenum { font-weight: 800; color: #9aa4b2; }

/* ---------------- 问答 ---------------- */
.qnum { font-size: .82rem; font-weight: 800; color: #9aa4b2; margin-bottom: 8px; }
.qtext { font-size: 1.15rem; margin-bottom: 14px; line-height: 1.6; }
.opts { display: flex; flex-direction: column; gap: 10px; }
.optmenu { max-width: 460px; margin: 0 auto; }
.optmenu .opt { cursor: pointer; }
.opt {
  text-align: left; border: 2px solid #e5e9f2; background: #fafbfe;
  border-radius: 14px; padding: 13px 16px; font-size: 1rem; font-weight: 600;
  line-height: 1.55; transition: border .15s, background .15s;
}
.opt:hover:not(:disabled) { border-color: #ffb14d; background: #fff9ef; }
.opt.correct { border-color: var(--ok); background: #e3fbf2; }
.opt.wrong { border-color: var(--bad); background: #ffecec; animation: shake .4s; }
.opt.eliminated { opacity: .4; filter: grayscale(.8); text-decoration: line-through; cursor: not-allowed; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.why { margin-top: 14px; background: #f0f9ff; border-radius: 12px; padding: 12px 14px; line-height: 1.7; font-weight: 600; color: #22699e; }
#qnext, .quiz .btn.primary { margin-top: 14px; }

/* ---------------- 排序 ---------------- */
.oz-label { font-weight: 800; font-size: .88rem; color: #6b7280; margin: 10px 0 6px; }
.oz {
  min-height: 54px; border: 2px dashed #d5dce8; border-radius: 14px;
  padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: #fafbfe;
}
.oz.seq { border-color: #ffb14d; background: #fffaf1; }
.oz-empty { color: #a6b0bf; font-size: .9rem; }
.oz-empty.small { font-size: .78rem; }
.ochip {
  border: none; background: #fff; border-radius: 12px; padding: 9px 14px;
  font-weight: 700; box-shadow: 0 2px 6px rgba(45,52,64,.12);
  transition: transform .1s;
}
.ochip:hover { transform: translateY(-2px); }
.ochip.inseq { background: #ffedd3; }

/* ---------------- 机器人 ---------------- */
.robot-wrap { display: flex; gap: 22px; flex-wrap: wrap; }
.board {
  position: relative; display: grid;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(45,52,64,.15);
  flex-shrink: 0;
}
.cell {
  border: 1px solid rgba(0,0,0,.06);
  background: #d8f2d0;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.cell.wall { background: #5b4a41; }
.robot {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; transition: transform .3s ease;
  pointer-events: none;
}
.robot .facing { position: absolute; font-size: .8rem; right: 2px; bottom: 2px; }
.robot.crash { animation: crash .5s; }
@keyframes crash { 20% { transform-origin: center; filter: brightness(1.6); } 40% { margin-left: -4px; } 60% { margin-left: 4px; } 80% { margin-left: 0; } }
.robot-side { flex: 1; min-width: 260px; }
.progzone {
  min-height: 64px; border: 2px dashed #ffb14d; border-radius: 14px;
  background: #fffaf1; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.pchip {
  background: #fff; border-radius: 10px; padding: 7px 11px; font-weight: 700; font-size: .9rem;
  box-shadow: 0 2px 5px rgba(45,52,64,.12);
}
.pchip.mini { font-size: .8rem; padding: 5px 8px; }
.repblock {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  border: 2px solid #a55eea; border-radius: 12px; background: #f6efff; padding: 6px 8px;
}
.repblock.open { border-style: dashed; }
.repn { font-weight: 800; color: #7d3fc9; font-size: .9rem; display: inline-flex; align-items: center; gap: 4px; }
.nbtn {
  border: none; background: #e6d6fb; border-radius: 8px; width: 32px; height: 32px;
  font-weight: 900; color: #7d3fc9; line-height: 1; font-size: 1.05rem;
}
.palette { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cmd { background: #e8f4ff; }
.cmd.rep { background: #f6efff; color: #7d3fc9; }
.cnt { font-weight: 700; color: #b7791f; }

/* ---------------- 代码编辑 ---------------- */
.code-wrap { display: flex; gap: 18px; flex-wrap: wrap; }
.code-left { flex: 1.2; min-width: 300px; }
.code-right { flex: 1; min-width: 280px; }
.editor {
  width: 100%; resize: vertical;
  font-family: Consolas, "Courier New", monospace; font-size: .95rem; line-height: 1.6;
  border: 2px solid #d5dce8; border-radius: 12px; padding: 12px;
  background: #1e2433; color: #e8ecf5; caret-color: #ffb14d;
  outline: none; tab-size: 2;
}
.editor:focus { border-color: #ffb14d; }
.console {
  background: #0f1420; color: #9be89b; border-radius: 12px;
  min-height: 90px; max-height: 220px; overflow: auto;
  padding: 12px; font-family: Consolas, monospace; font-size: .9rem; line-height: 1.6;
}
.conline.err { color: #ff8787; }
.conline.small { font-size: .72rem; opacity: .7; }
.dim { color: #5b6577; }
.hintbox {
  margin-top: 10px; background: #fff8e1; border: 2px dashed #f2c94c;
  border-radius: 12px; padding: 10px 14px; font-weight: 600; line-height: 1.8;
  white-space: pre-wrap; animation: pop .25s;
}
.symbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.symbtn {
  border: none; background: #e8f4ff; border-radius: 8px;
  min-width: 42px; height: 36px; padding: 0 10px;
  font-family: Consolas, "Courier New", monospace; font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
}
.symbtn:hover { background: #d5eaff; }
.symtip { font-size: .75rem; color: #9aa4b2; }
.gallerygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.gitem {
  background: #fff; border-radius: 16px; padding: 12px;
  box-shadow: 0 3px 10px rgba(45,52,64,.1);
}
.gcv { width: 100%; border-radius: 10px; border: 1px solid #eef1f6; display: block; }
.gtitle { font-weight: 800; margin: 8px 0 2px; }
.drawcv {
  width: 100%; max-width: 400px; background: #fff;
  border-radius: 12px; box-shadow: 0 3px 10px rgba(45,52,64,.15);
  border: 2px solid #e5e9f2;
}

/* ---------------- 提示词 ---------------- */
.promptopt { font-family: inherit; }
.chipzone { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.chip {
  text-align: left; border: 2px solid #e5e9f2; border-radius: 12px;
  background: #fafbfe; padding: 10px 12px; font-weight: 600; line-height: 1.5;
}
.chip .chipcat {
  display: inline-block; background: #eef; color: #4a54c4; border-radius: 8px;
  font-size: .75rem; font-weight: 800; padding: 1px 8px; margin-right: 8px;
}
.chip.sel { border-color: #a55eea; background: #f6efff; }
.promptpreview {
  border: 2px dashed #a55eea; background: #fdfbff; border-radius: 12px;
  padding: 12px; line-height: 1.7; min-height: 52px; font-weight: 600;
}

/* ---------------- 蓝图 / 毕业 ---------------- */
.blueprint { display: flex; flex-direction: column; gap: 14px; }
.bp-field span { display: block; font-weight: 800; margin-bottom: 6px; }
.bp-input {
  width: 100%; border: 2px solid #d5dce8; border-radius: 12px; padding: 10px;
  font-family: inherit; font-size: .95rem; resize: vertical;
}
.bp-input:focus { border-color: #ffb14d; outline: none; }
.bp-input.miss { border-color: var(--bad); background: #fff6f6; }
.bp-recap {
  background: #f0f7ff; border-radius: 12px; padding: 12px 14px;
  line-height: 1.7; margin-bottom: 14px; font-size: .95rem;
}
.aihelp { margin-top: 18px; }
.aiprompt {
  background: #f6efff; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
}
.aiprompt-text { font-size: .85rem; color: #5b4a77; line-height: 1.7; margin-top: 6px; }
.launchlist { margin-top: 18px; }
.checkitem {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 4px;
  font-weight: 700; line-height: 1.5; cursor: pointer;
}
.checkitem input { width: 20px; height: 20px; accent-color: var(--accent); flex-shrink: 0; margin-top: 2px; }

/* ---------------- 弹层 / 提示 ---------------- */
.overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50;
  background: rgba(30,36,51,.55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ov-card {
  background: #fff; border-radius: var(--radius); padding: 30px 26px;
  max-width: 480px; width: 100%; max-height: 86vh; overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: rise .35s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes rise { from { transform: translateY(40px) scale(.9); opacity: 0; } }
.cele { text-align: center; }
.cele-emoji { font-size: 4rem; animation: bounce 1s infinite alternate; }
@keyframes bounce { to { transform: translateY(-10px); } }
.cele h2 { margin: 8px 0; }
.cele-xp { font-size: 1.5rem; font-weight: 900; color: #f39c12; margin-bottom: 10px; }
.cele-msg { line-height: 1.8; color: #55606e; margin-bottom: 8px; }
.won-badges { margin: 10px 0; }
.wonb {
  background: #fff3d6; border-radius: 12px; padding: 10px; font-weight: 800;
  margin-bottom: 6px; animation: pop .4s;
}
.wonb span { font-size: 1.3rem; }
.levelup { background: #efe6ff; color: #6c2bd9; border-radius: 12px; padding: 10px; font-weight: 800; margin: 8px 0; }
.confetti { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; pointer-events: none; }
.spark {
  position: fixed; z-index: 65; pointer-events: none;
  font-size: 1.2rem;
  animation: sparkfly .9s ease-out forwards;
}
@keyframes sparkfly {
  0% { transform: translateY(0) scale(.6); opacity: 1; }
  100% { transform: translateY(-70px) scale(1.3); opacity: 0; }
}
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px);
  background: #2d3440; color: #fff; border-radius: 14px; padding: 12px 20px;
  font-weight: 700; z-index: 70; opacity: 0; transition: all .35s;
  max-width: 90vw; text-align: center; line-height: 1.5;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------- 成长报告 ---------------- */
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 18px; }
.stat {
  background: #fff; border-radius: 14px; padding: 14px 8px; text-align: center;
  box-shadow: 0 3px 10px rgba(45,52,64,.08);
}
.stat b { display: block; font-size: 1.3rem; }
.stat span { font-size: .78rem; color: #6b7280; font-weight: 700; }
.skilllist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.skillrow {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(45,52,64,.06);
}
.skillrow.done { border-left: 6px solid #1dd1a1; }
.skillrow.doing { border-left: 6px solid #feca57; }
.skillrow.todo { border-left: 6px solid #d5dce8; opacity: .65; }
.sk-emoji { font-size: 1.5rem; }
.sk-text { flex: 1; font-weight: 700; line-height: 1.5; font-size: .95rem; }
.sk-status { text-align: center; font-weight: 800; font-size: .82rem; white-space: nowrap; }
.sk-status small { color: #9aa4b2; }
.certificate {
  margin: 20px 0; padding: 8px;
  background: linear-gradient(135deg, #f7d774, #f3b64c);
  border-radius: 20px;
}
.cert-inner {
  background: #fffdf5; border-radius: 14px; border: 2px dashed #d9a83f;
  text-align: center; padding: 26px 20px;
}
.cert-emoji { font-size: 3rem; }
.cert-inner h2 { margin: 6px 0 12px; letter-spacing: .2em; }
.cert-inner p { line-height: 1.9; color: #55606e; }
.cert-title { font-size: 1.15rem; font-weight: 900; color: #b7791f; margin-top: 8px; }
.cert-date { font-size: .85rem; margin-top: 12px; }
@media print {
  body * { visibility: hidden; }
  .reportpage, .reportpage * { visibility: visible; }
  .reportpage { position: absolute; top: 0; left: 0; width: 100%; }
  .noprint { display: none !important; }
  /* 深色主题下文字是浅色(--ink=#eef4ff),直接打印会在白纸上"隐形"。打印时强制纸质配色:深字白卡。
     关键:.bp-recap / 证书等自带 color:var(--ink) 的框,必须显式压回深色,否则家长打印时那几段洞察是白字白底看不见。 */
  .reportpage, .reportpage * { color: #2c3440 !important; }
  .reportpage span, .reportpage small, .reportpage .sub, .reportpage .dombar small,
  .reportpage .cert-inner p, .reportpage .cert-date { color: #55606e !important; }
  .reportpage .cert-title { color: #b7791f !important; }
  .reportpage .cert-note { color: #7d5a1f !important; }
  .reportpage .stat, .reportpage .skillrow, .reportpage .bp-recap,
  .reportpage .certificate, .reportpage .cert-inner { background: #fff !important; border: 1px solid #e5e9f2 !important; box-shadow: none !important; }
  /* 领域覆盖条 / 进度条:强制印出颜色(浏览器默认不打印背景色,否则条是空的) */
  .reportpage .ipbar { background: #edf1f7 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .reportpage .ipfill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------------- 创作沙盒 ---------------- */
.challengecard {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fff7e0; border: 2px dashed #ffd76e; border-radius: 14px;
  padding: 12px 16px; margin-bottom: 10px; font-weight: 700; line-height: 1.6;
}
.challengecard span { flex: 1; min-width: 200px; }
.cardtip { color: #b7791f; font-weight: 600; }
.stampgrid { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.stampchip {
  border: 2px solid #e5e9f2; background: #fafbfe; border-radius: 10px;
  min-width: 40px; height: 34px; font-weight: 800; font-size: .82rem; color: #6b7280;
}
.stampchip.cur { border-color: #ffb14d; background: #fff7e0; }
.stampchip.got { border-color: #1dd1a1; background: #e3fbf2; }
.cert-note { font-style: italic; color: #7d5a1f; margin-top: 10px; font-weight: 600; }
.cele-alt { text-align: center; margin-top: 10px; font-size: .85rem; }
.cele-alt a { color: #8a94a3; }

/* ---------------- 指令小课堂 ---------------- */
.demo-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #f7f9fd; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px;
}
.demo-row small { flex-basis: 100%; color: #6b7280; font-weight: 600; padding-left: 4px; }
.demo-strip { display: inline-flex; gap: 3px; align-items: center; }
.demo-cell {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; background: #d8f2d0; border-radius: 8px;
  font-size: 1.05rem; border: 1px solid rgba(0,0,0,.06);
}
.demo-bot { font-size: 1.4rem; }
.demo-face { font-size: 1.1rem; transition: transform .3s; }

/* ---------------- 皮肤 & 出题官 ---------------- */
.skinbar { display: flex; gap: 10px; flex-wrap: wrap; }
.skinchip {
  border: 2px solid #e5e9f2; background: #fff; border-radius: 14px;
  padding: 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-weight: 700; min-width: 84px; transition: transform .12s;
}
.skinchip:hover:not(.locked) { transform: translateY(-2px); }
.skinchip .skinface { font-size: 1.8rem; }
.skinchip.cur { border-color: #ffb14d; background: #fff7e0; }
.skinchip.locked { opacity: .5; cursor: not-allowed; }
.dcell { cursor: pointer; transition: background .1s; }
.dcell:hover { background: #c8ecbe; }
.dboard { margin: 0 auto 4px; }

/* ---------------- 天赋树 ---------------- */
.treepage { max-width: 1100px; margin: 0 auto; padding: 16px 12px 30px; }
.tree-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.tree-title { flex: 1; min-width: 220px; }
.tree-title b { font-size: 1.2rem; display: block; }
.tree-title span { font-size: .85rem; color: #6b7280; font-weight: 600; }
.tree-zoom { display: flex; gap: 6px; }
.treewrap {
  position: relative;
  background: radial-gradient(ellipse at 30% 20%, #1d2749, #0f1430 70%);
  border-radius: 20px; overflow: hidden;
  box-shadow: inset 0 0 60px rgba(120,150,255,.15), 0 6px 20px rgba(20,25,60,.35);
  height: 72vh; min-height: 420px;
}
/* 星图操作提示:一直显示到孩子第一次拖动/缩放,之后永不再现 */
.tree-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: rgba(16,26,58,.82); color: #dbe6ff; border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: .9rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.4); backdrop-filter: blur(6px);
  pointer-events: none; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis;
  animation: treehintpulse 2.2s ease-in-out infinite;
}
@keyframes treehintpulse { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .tree-hint { animation: none; } }
.treewrap svg { width: 100%; height: 100%; touch-action: none; display: block; }
.globewrap #globecv { display: block; touch-action: none; cursor: grab; width: 100%; height: 100%; }
.globewrap #globecv:active { cursor: grabbing; }
.globe3d-btn, .flat2d-btn { font-weight: 800; letter-spacing: .2px; }
/* 🌌 星系侧栏:12 领域选择 + 全部星系 */
.galaxy-sidebar {
  position: absolute; top: 52px; right: 10px; z-index: 4; width: 168px;
  max-height: calc(100% - 64px); overflow: hidden;
  display: flex; flex-direction: column; gap: 6px; padding: 7px;
  background: rgba(10,16,38,.62); border: 1px solid var(--border); border-radius: 12px;
  backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
/* 侧栏 collapse 下拉:标题按钮 + 可收起的列表 */
.gsb-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto;
  width: 100%; padding: 7px 10px; cursor: pointer; white-space: nowrap;
  background: rgba(22,30,58,.85); border: 1px solid var(--border); border-radius: 9px;
  color: #eaf1ff; font-weight: 800; font-size: .82rem;
}
.gsb-toggle:hover { background: rgba(32,42,78,.95); }
.gsb-toggle-tx { overflow: hidden; text-overflow: ellipsis; }
.gsb-caret { flex: 0 0 auto; opacity: .8; font-size: .78rem; }
.gsb-list { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.galaxy-sidebar.collapsed { width: auto; }
.galaxy-sidebar.collapsed .gsb-list { display: none; }
/* 树形星系菜单(gsb2):自适应宽(大屏 ~340,小屏收敛);每系一行 + 行尾 ▸/▾ 展开章节 */
.galaxy-sidebar.gsb2 { width: clamp(272px, 23vw, 348px); }
.galaxy-sidebar.gsb2.collapsed { width: auto; }
.gsb-sys { display: flex; flex-direction: column; }
.gsb-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 10px; border-radius: 10px; border: 1.5px solid transparent;
  background: rgba(255,255,255,.05); cursor: pointer;
  font-size: .9rem; font-weight: 700; color: #dbe6ff; -webkit-tap-highlight-color: transparent;
}
.gsb-row:hover { background: rgba(255,255,255,.13); }
.gsb-row:focus-visible { outline: 2px solid var(--gold, #f2c94c); outline-offset: 1px; }
.gsb-sys.active > .gsb-row { border-color: var(--gc, #f2c94c); background: rgba(255,255,255,.15); }
.gsb-row small { margin-left: auto; color: var(--text-dim, #9fb0cc); font-size: .72rem; font-variant-numeric: tabular-nums; }
.gsb-exp {
  flex: 0 0 auto; width: 27px; height: 27px; border-radius: 8px;
  border: 1px solid var(--border); background: rgba(255,255,255,.07);
  color: #dbe6ff; cursor: pointer; font-size: .8rem; line-height: 1;
}
.gsb-exp:hover { background: rgba(255,255,255,.2); }
.gsb-subs {
  display: flex; flex-direction: column; gap: 3px;
  margin: 4px 0 6px 13px; padding-left: 8px;
  border-left: 2px solid rgba(255,255,255,.13);
}
.gsb-subs .gsb-node { font-size: .84rem; padding: 6px 9px; white-space: normal; text-align: left; }
/* 全屏星系 + 浮层 HUD */
.galaxyfull { padding: 0; max-width: none; }
.galaxyfull .treewrap { border-radius: 0; margin: 0; width: 100%; box-shadow: none; }
.galaxy-hud { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 9px 12px; pointer-events: none; }
.galaxy-hud > * { pointer-events: auto; }
.galaxy-hud-title { display: flex; flex-direction: column; line-height: 1.14; color: #eaf1ff; min-width: 0; }
.galaxy-hud-title b { font-size: .96rem; white-space: nowrap; }
.galaxy-hud-title span { font-size: .72rem; color: var(--text-dim, #9fb0cc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.galaxy-hud-right { margin-left: auto; display: flex; gap: 6px; }
.galaxy-hud-btn { font-size: .8rem; font-weight: 800; color: #eaf1ff; cursor: pointer; background: rgba(10,16,38,.66); border: 1px solid var(--border); border-radius: 999px; padding: 7px 12px; backdrop-filter: blur(6px); white-space: nowrap; }
.galaxy-hud-btn:hover { background: rgba(22,32,66,.88); }
/* 侧栏:进入星系后的行星清单 */
.gsb-head { padding: 7px 9px 5px; font-size: .82rem; font-weight: 800; color: var(--gc, #eaf1ff); border-bottom: 1px solid var(--border); }
.gsb-node small { color: #7ee0b0; margin-left: auto; }
.gsb-node:not(.lit) .gsb-dot { opacity: .4; box-shadow: none; }
.gsb-item {
  display: flex; align-items: center; gap: 7px; text-align: left;
  font-size: .78rem; font-weight: 700; color: #dbe6ff;
  background: rgba(255,255,255,.05); border: 1.5px solid transparent; border-radius: 9px;
  padding: 6px 9px; cursor: pointer; white-space: nowrap;
}
.gsb-item:hover { background: rgba(255,255,255,.13); }
.gsb-item.active { border-color: var(--gc, #f2c94c); background: rgba(255,255,255,.15); }
.gsb-nm { overflow: hidden; text-overflow: ellipsis; }
.gsb-item small { margin-left: auto; color: var(--text-dim, #9fb0cc); font-size: .7rem; font-variant-numeric: tabular-nums; }
.gsb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gc, #888); flex: 0 0 auto; box-shadow: 0 0 6px var(--gc, #888); }
.gsb-all { justify-content: center; font-weight: 800; }
@media (max-width: 560px) {
  /* 手机:底部竖直抽屉(树形菜单需要纵向滚动),收起时缩成右下角一颗按钮 */
  .galaxy-sidebar, .galaxy-sidebar.gsb2 { top: auto; bottom: 8px; right: 8px; left: 8px; width: auto; max-height: 46vh; }
  .galaxy-sidebar.collapsed, .galaxy-sidebar.gsb2.collapsed { left: auto; width: auto; }
}
.globewrap { position: relative; }
.galaxy-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-dim, #9fb0cc); font-weight: 700; }
.galaxy-spinner { font-size: 3rem; display: inline-block; animation: galaxyspin 1.6s linear infinite; }
@keyframes galaxyspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .galaxy-spinner { animation: none; } }
.globe-tip {
  position: absolute; z-index: 3; transform: translate(-50%, -140%);
  background: rgba(10,16,38,.92); color: #eaf1ff; border: 1px solid var(--border);
  border-radius: 10px; padding: 5px 11px; font-weight: 700; font-size: .86rem;
  pointer-events: none; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
.treewrap .tnode text, .treewrap .tdom text { user-select: none; }
.treewrap .tnode > text[font-size="10.5"], .treewrap .tdom text[font-size="13"] { fill: #c9d4ee; }
.treecard { border-color: #b39ddb; background: linear-gradient(90deg, #f3eeff, #ffffff); box-shadow: 0 3px 12px rgba(121,80,242,.18); }
.treecard .daily-go { color: #7950F2; }
.nodepanel .np-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
/* 领域色不再用厚重左条,改成 emoji 后面一块柔和的同色圆角徽标(呼应天赋树的彩色星球节点)*/
.np-emoji {
  font-size: 1.9rem; flex: none;
  width: 52px; height: 52px; border-radius: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--dc) 26%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--dc) 55%, transparent);
}
.nodepanel h2 { margin: 0; }
.nodepanel small { color: #6b7280; font-weight: 700; }
.np-one { font-weight: 700; line-height: 1.7; }
.np-why { background: #fff8e1; border-radius: 10px; padding: 8px 12px; line-height: 1.7; font-size: .92rem; }
.ladder { display: flex; flex-direction: column; gap: 6px; }
.rung { border-radius: 10px; padding: 8px 12px; line-height: 1.5; font-size: .88rem; background: #f7f9fd; }
.rung b { margin-right: 6px; }
.rung small { color: #8a94a3; display: block; }
.rung.got { background: #e3fbf2; }
.rung.avail { background: #fff7e0; }
.rung.future { opacity: .65; }
.domgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 16px; margin-bottom: 14px; }
.dombar { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; }
.db-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dombar .ipbar { display: inline-block; flex: 0 0 120px; height: 8px; background: #edf1f7; border-radius: 5px; overflow: hidden; }
.dombar .ipfill { display: block; height: 100%; border-radius: 5px; }
.dombar small { color: #8a94a3; min-width: 34px; text-align: right; }

/* ---------------- 手机适配 ---------------- */
@media (max-width: 640px) {
  .logo span { display: none; }
  /* 顶栏在窄屏换行:XP 条独占一行,logo + 按钮群自动折行,杜绝横向溢出 */
  .topbar { flex-wrap: wrap; gap: 8px 6px; padding: 8px 10px; }
  .xpwrap { flex-basis: 100%; order: 10; min-width: 0; }
  .langbtn, .badgebtn { padding: 5px 9px; font-size: .82rem; }
  .badgebtn { font-size: 1rem; }
  .island-emoji { font-size: 2rem; }
  .card { padding: 16px; }
  .robot-wrap, .code-wrap { flex-direction: column; }
}

/* ---------------- 🧑‍🏫 AI 老师 / 冒险副驾驶 ---------------- */
.tutor-face { font-size: 3rem; text-align: center; animation: tutorbob 1.6s ease-in-out infinite; }
@keyframes tutorbob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.tutor-say { line-height: 1.7; text-align: left; }
.tutor-panel { text-align: center; }
.tutor-panel h2 { margin: 6px 0 10px; }
.tutor-bubble {
  text-align: left; line-height: 1.65; font-size: .95rem;
  border-radius: 14px; padding: 10px 14px; margin: 8px 0;
  white-space: pre-wrap; word-break: break-word;
}
.tutor-bubble.ai { background: #fff4e5; border: 1.5px solid #ffd9a8; margin-right: 24px; border-bottom-left-radius: 4px; }
.tutor-bubble.me { background: #e8f4ff; border: 1.5px solid #b9dcff; margin-left: 24px; border-bottom-right-radius: 4px; }
.tutor-bubble.dim { opacity: .6; }
.tutor-chat {
  max-height: 240px; overflow-y: auto; margin-top: 4px;
  background: #fafbfd; border-radius: 12px; padding: 8px 10px;
  border: 1.5px solid #eef2f8;
}
.tutor-inputrow { display: flex; gap: 8px; margin-top: 8px; }
.tutor-inputrow input {
  flex: 1; border: 2px solid #dfe6f0; border-radius: 12px;
  padding: 10px 12px; font-size: .95rem; font-family: inherit;
}
.tutor-inputrow input:focus { outline: none; border-color: var(--accent); }
.tutor-keyinput {
  width: 100%; box-sizing: border-box; border: 2px solid #dfe6f0; border-radius: 12px;
  padding: 10px 12px; font-size: .95rem; font-family: Consolas, monospace; margin: 10px 0;
}
.tutor-parentnote { margin-top: 12px; font-size: .82rem; }

/* ---------------- 🎯 猜数字(二分查找游戏) ---------------- */
.sg-bar {
  display: flex; height: 44px; border-radius: 12px; overflow: hidden;
  border: 2px solid #e3e8f0; margin: 6px 0 10px;
}
.sg-out { background: repeating-linear-gradient(45deg, #eceff4, #eceff4 8px, #e3e8f0 8px, #e3e8f0 16px); }
.sg-in {
  background: linear-gradient(180deg, #ffe9a8, #ffd75e);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #7a5b00; min-width: 40px;
  transition: flex .25s ease;
}
.sg-tries { font-size: 1.05rem; letter-spacing: 2px; margin-bottom: 6px; }
.sg-input {
  width: 110px; border: 2px solid #dfe6f0; border-radius: 12px;
  padding: 10px 12px; font-size: 1.05rem; font-weight: 800; font-family: inherit; text-align: center;
}
.sg-input:focus { outline: none; border-color: var(--accent); }
#sg-log .conline { color: #6b7280; }

/* ---------------- 🛠️ 自己造一关 ---------------- */
.mlg { text-align: center; }
.mlg h2 { margin: 6px 0 8px; }
.mlg-form { text-align: left; margin-top: 10px; }
.mlg-form input[type="text"], .mlg-form input:not([type]) {
  width: 100%; box-sizing: border-box; border: 2px solid #dfe6f0; border-radius: 12px;
  padding: 9px 12px; font-size: .95rem; font-family: inherit; margin: 4px 0 8px;
}
.mlg-form input:focus { outline: none; border-color: var(--accent); }
.mlg-opt { display: flex; align-items: center; gap: 8px; }
.mlg-opt input[type="radio"] { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.mlg-opt input:not([type]) { flex: 1; margin: 4px 0; }
.mlg-code {
  text-align: left; background: #1e2530; color: #d7e0ec; border-radius: 12px;
  padding: 12px 14px; font-family: Consolas, "Courier New", monospace; font-size: .82rem;
  overflow-x: auto; white-space: pre; margin: 8px 0;
}
.mlg-steps { text-align: left; line-height: 1.7; margin: 8px 0 8px 4px; padding-left: 20px; }
.mlg-steps li { margin-bottom: 6px; }

/* ---------------- 🤖 文字接龙模拟器(当一回大模型) ---------------- */
.llm-sentence {
  font-size: 1.35rem; font-weight: 800; line-height: 1.5;
  background: #f0f3ff; border-radius: 14px; padding: 14px 16px; margin: 6px 0 12px;
  color: #3a3f8a; min-height: 1.5em; word-break: break-all;
}
.llm-sentence.done { background: linear-gradient(90deg, #fff4e5, #ffe9c7); color: #7a5b00; }
.llm-caret { animation: llmblink 1s step-end infinite; color: var(--accent); }
@keyframes llmblink { 50% { opacity: 0; } }
.llm-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.llm-opt {
  display: flex; align-items: center; gap: 10px; text-align: left;
  border: 2px solid #e3e8f0; border-radius: 14px; padding: 10px 14px;
  background: var(--card); transition: transform .1s, border-color .15s;
}
.llm-opt:hover { transform: translateX(3px); border-color: var(--accent); }
.llm-opt.top { border-color: #ffd75e; background: #fffdf3; }
.llm-word { flex: none; min-width: 84px; font-weight: 800; }
.llm-word small { color: #c79a00; font-weight: 700; }
.llm-bar { flex: 1; height: 12px; background: #eef2f8; border-radius: 6px; overflow: hidden; }
.llm-fill { display: block; height: 100%; background: linear-gradient(90deg, #7a8cff, #48dbfb); border-radius: 6px; }
.llm-score { flex: none; font-weight: 800; color: #6b7280; min-width: 48px; text-align: right; }

/* ---------------- 🌐 网页编辑器(HTML 实时预览) ---------------- */
.webframe {
  width: 100%; height: 300px; border: 2px solid #e3e8f0; border-radius: 14px;
  background: #fff; box-sizing: border-box;
}

/* 答错时的常驻错因解释(与答对的 .why 对称,红色系,不再用一闪而过的 toast) */
.why.badwhy { background: #fff0f0; border: 1.5px solid #ffcdcd; color: #b3261e; }

/* ---------------- 🔬 D4 懂原理:读码题 ---------------- */
.predict-code {
  text-align: left; background: #1e2530; color: #d7e0ec; border-radius: 12px;
  padding: 12px 14px; font-family: Consolas, "Courier New", monospace; font-size: .9rem;
  line-height: 1.5; overflow-x: auto; white-space: pre; margin: 6px 0 12px;
}

/* 星球挑战 code/draw 关的"别被代码吓到"定心丸 */
.reassure {
  background: #eefaf1; border: 1.5px solid #b7e6c6; border-radius: 12px;
  padding: 10px 14px; margin: 0 0 14px; line-height: 1.6; font-size: .92rem; color: #1c7a43;
}

/* ---------------- 💬 意见反馈面板(Benji)---------------- */
.fbbtn { font-size: 1.05rem; }
.ov-x {
  position: absolute; top: 12px; right: 14px; border: none; background: #f0f3f8;
  width: 34px; height: 34px; border-radius: 50%; font-size: 1rem; cursor: pointer; color: #55606e;
}
.ov-x:hover { background: #e2e8f2; }
.ov-card { position: relative; }
/* ⚠️ 不能用 flex:文案里有 <b> 标签,flex 会把每段文字/每个 <b> 拆成独立 flex item,
   中文逐字竖排(反馈/云/欢迎回来面板的 Benji 头都中招)。改用 float 让文字自然绕排头像。*/
.fb-benji {
  overflow: hidden; /* 包住浮动的头像 */
  background: #eef4ff; border: 1.5px solid #cfe0ff; border-radius: 14px;
  padding: 12px 14px; line-height: 1.6; color: #26406e; font-size: .95rem; margin-bottom: 16px;
}
.fb-bot { float: left; margin: 2px 10px 2px 0; font-size: 1.6rem; line-height: 1; }
.fb-q { font-weight: 800; font-size: 1.05rem; margin: 4px 0 8px; color: #2b3a52; }
.fb-rate { display: flex; gap: 8px; justify-content: space-between; margin-bottom: 16px; }
.fb-face {
  flex: 1; border: 2px solid #e3e9f2; background: #fff; border-radius: 14px;
  font-size: 1.7rem; padding: 8px 0; cursor: pointer; transition: transform .12s, border-color .12s, background .12s;
  filter: grayscale(.5) opacity(.7);
}
.fb-face:hover { transform: translateY(-3px); }
.fb-face.sel { border-color: #ffb14d; background: #fff7e6; filter: none; transform: translateY(-3px) scale(1.08); }
.fb-label { display: block; font-size: .9rem; font-weight: 700; color: #55606e; margin-bottom: 12px; }
.fb-label input, .fb-label textarea {
  display: block; width: 100%; margin-top: 5px; padding: 9px 11px; font: inherit;
  border: 1.5px solid #dce3ee; border-radius: 12px; background: #fbfcfe; resize: vertical;
}
.fb-label input:focus, .fb-label textarea:focus { outline: none; border-color: #7fb0ff; background: #fff; }
.fb-send {
  width: 100%; border: none; border-radius: 14px; padding: 13px; margin-top: 4px;
  background: linear-gradient(180deg, #ffe07a, #ffce3d); color: #7a4f00; font-weight: 900;
  font-size: 1.05rem; cursor: pointer; box-shadow: 0 6px 16px rgba(255,180,50,.4);
}
.fb-send:hover { filter: brightness(1.04); }
.fb-send:disabled { opacity: .6; cursor: default; }

/* ============================================================
   🌌 深色宇宙主题 · 覆盖层 (Cosmic dark theme overrides)
   放在最后,靠层叠顺序覆盖上方硬编码的浅色。Stage 1:全局 + 地图 + 通用图元。
   ============================================================ */
code { background: rgba(255,255,255,0.078); color: #a9c9ff; }
.topbar { background: rgba(16,26,58,.74); backdrop-filter: blur(10px); box-shadow: 0 2px 16px rgba(0,0,0,.4); border-bottom: 1px solid var(--border); }
.xptitle { color: var(--text-dim); }
.xpbar, .ipbar { background: rgba(0,0,0,.34); }
.badgebtn { background: rgba(255,255,255,0.078); box-shadow: none; color: var(--ink); border: 1px solid var(--border); }
.badgecount { color: var(--gold); }
.langbtn { background: rgba(255,255,255,0.071); color: #cfe0ff; box-shadow: none; border: 1px solid var(--border); }
.langbtn:hover { background: rgba(255,255,255,0.141); }

.map-hello p, .map-tip, .island-sub, .dim, .cele-msg, .lvxp { color: var(--text-dim); }

/* 通用深色卡片/面板 */
.island, .levelcard, .card, .dailycard, .skillrow, .statcard, .ov-card, .bp-card {
  background: var(--card-grad); color: var(--ink); border: 1px solid var(--border);
  box-shadow: 0 10px 26px rgba(0,0,0,.36);
}
.island.complete { background: linear-gradient(90deg, #2a3f74, #22346b); }
.island.locked { opacity: .6; }
.levelcard.done { background: #1f3a52; }
.dailycard { background: linear-gradient(90deg, #2b3f7d, #22346b); }
.dailycard.ddone { background: linear-gradient(90deg, #1f3a52, #22346b); border-color: #2f6a52; }
.treecard { background: linear-gradient(90deg, #322c66, #241f52); border-color: #4a3f8a; }

/* 按钮 */
.btn { background: rgba(255,255,255,0.086); color: var(--ink); border: 1px solid var(--border); }
.btn:hover { background: rgba(255,255,255,0.149); }
.btn.primary, .bigbtn, .continuebtn { color: #3a2600; border: none; }

/* 状态框 / 输入 */
.ok { background: rgba(55,211,155,.16); color: #8ff0cd; }
.bad { background: rgba(255,122,122,.16); color: #ffb3b3; }
.hintbox { background: rgba(255,255,255,0.063); color: var(--ink); border: 1px solid var(--border); }
input, textarea, select, .editor, .bp-input, .tutor-keyinput {
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--border);
}
input::placeholder, textarea::placeholder { color: #8aa0d0; }

/* 浮层 */
.overlay { background: rgba(6,12,32,.66); }
.ov-card { background: var(--card-grad); color: var(--ink); }  /* 与地图卡片同底色,弹层统一到主界面语言 */
.ov-x { background: rgba(255,255,255,0.094); color: #cfe0ff; }
.ov-x:hover { background: rgba(255,255,255,0.173); }

/* 反馈面板深色适配 */
.fb-benji { background: #22346b; border-color: var(--border); color: #dbe6ff; }
.fb-q { color: var(--ink); }
.fb-face { background: rgba(255,255,255,0.063); border-color: var(--border); }
.fb-face.sel { background: #4a3a12; border-color: var(--gold); }
.fb-label { color: var(--text-dim); }
.fb-label input, .fb-label textarea { background: var(--surface-2); }

/* Benji 求助面板气泡 */
.tutor-bubble.ai { background: #22346b; color: #e6eeff; }
.tutor-bubble.me { background: #3a5299; color: #fff; }
.tutor-say { color: var(--text-dim); }
.tutor-chat { background: rgba(255,255,255,0.031); }  /* 原 #fafbfd 浅底,在深色导师面板上是刺眼白框 */

/* 关卡页 chrome */
.backbtn { background: rgba(255,255,255,0.086); color: var(--ink); border: 1px solid var(--border); }
.symbtn { background: rgba(255,255,255,0.078); color: #cfe0ff; border: 1px solid var(--border); }
.symbtn:hover { background: rgba(255,255,255,0.18); }  /* 原 :hover 浅蓝 #d5eaff + 浅字 → 悬停看不清;深色主题给亮一点的深底 */
.symbtn.tpl { background: #2e2450; color: #c9a8ff; }
.wonb { color: #7a5200; }  /* 庆祝"获得徽章"卡:浅奶油底原无文字色 → 继承浅字看不见;压回深金 */
.oz-label { color: var(--text-dim); }
.resetline { color: var(--text-dim); }
.resetline a { color: #9fc0ff; }

/* ---- Stage 2:答题选项(.opt / .promptopt)深色适配 ----
   基础 .opt 是浅色卡(#fafbfe),在星空深色里像刺眼白块。改成半透明深表面 +
   浅墨文字;对错状态保留语义色但换成深色可读的半透明底(呼应 .ok/.bad)。*/
.opt {
  background: rgba(255,255,255,0.063); color: var(--ink); border-color: var(--border);
}
.opt:hover:not(:disabled) { border-color: var(--gold); background: rgba(255,255,255,0.118); }
.opt.correct { border-color: var(--ok); background: rgba(55,211,155,.18); color: #d8ffee; }
.opt.wrong { border-color: var(--bad); background: rgba(255,122,122,.16); color: #ffd8d8; }
.opt.promptopt { background: rgba(255,255,255,0.063); }

/* 答题后的解释框(每题必现):答对 .why 蓝系 / 答错 .why.badwhy 红系,
   原为浅色底,深色下改半透明深底 + 浅色字,与选项对错色呼应。 */
.why { background: rgba(96,150,255,.13); color: #cfe0ff; border: 1px solid var(--border); }
.why.badwhy { background: rgba(255,122,122,.13); border-color: rgba(255,122,122,.42); color: #ffc9c9; }

/* ---- Stage 2:机器人编程屏(棋盘/积木指令/重复块/调色板)深色适配 ----
   保留紫/橙/琥珀语义强调色,但把浅色底换成深表面 + 浅字。棋盘地砖从刺眼薄荷
   调成安宁深绿(机器人🤖/目标🎯 仍醒目,墙 #5b4a41 仍对比)。绘图画布 .drawcv
   故意保留白色(那是作画纸面,同证书)。 */
.cell { background: #35513f; border-color: rgba(255,255,255,.06); }
.progzone { background: rgba(255,255,255,0.051); }         /* 橙色虚线边框保留,深色下更跳 */
.pchip { background: #33468a; color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.repblock { background: #2e2450; border-color: #7d5fd0; }
.repn { color: #c9a8ff; }
.nbtn { background: #3a2c66; color: #d3bcff; }
.cmd { background: #24407a; color: var(--ink); }
.cmd.rep { background: #2e2450; color: #c9a8ff; }
.cnt { color: var(--gold); }
.gitem { background: var(--card-grad); border: 1px solid var(--border); }

/* ---- Stage 2 收尾:排序区/提示词块/蓝图 等残余浅色 chrome ----
   统一深表面 + 浅字,保留橙/紫/琥珀语义强调色。 */
.oz-label { color: var(--text-dim); }
.oz { background: rgba(255,255,255,0.051); border-color: var(--border); }
.oz.seq { background: rgba(255,255,255,0.071); border-color: var(--gold); }
.oz-empty { color: var(--text-dim); }
.ochip { background: #33468a; color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.ochip.inseq { background: #4a3a12; color: #ffe0a3; }
/* 提示词搭建 */
.chip { background: rgba(255,255,255,0.051); color: var(--ink); border-color: var(--border); }
.chip.sel { background: rgba(165,94,234,.18); border-color: #a55eea; }
.chip .chipcat { background: #2e2450; color: #c9a8ff; }
.promptpreview { background: rgba(255,255,255,0.051); }
/* 蓝图 / 发射台 */
.bp-input.miss { background: rgba(255,122,122,.13); }
.bp-recap { background: rgba(96,150,255,.12); color: var(--ink); }
.aiprompt { background: rgba(165,94,234,.14); }
.aiprompt-text { color: #d3c4ee; }

/* ---- 云存档 / 登录面板(.cl-*)深色一致 ---- */
.cloudbtn.on { color: var(--gold); }
.cl-tabs { display: flex; gap: 8px; margin: 4px 0 12px; }
.cl-tab { flex: 1; padding: 8px; border-radius: 10px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.063); color: var(--text-dim); font-weight: 800; }
.cl-tab.on { background: rgba(96,150,255,.18); color: var(--ink); border-color: #6096ff; }
.cl-err { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px;
  background: rgba(255,122,122,.13); border: 1px solid rgba(255,122,122,.42); color: #ffc9c9; font-weight: 600; font-size: .9rem; }
.cl-list { display: flex; flex-direction: column; gap: 8px; }
.cl-prof { text-align: left; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.063); color: var(--ink); font-weight: 700; font-size: 1rem; }
.cl-prof:hover { border-color: var(--gold); background: rgba(255,255,255,0.118); }
.cl-avatars { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.cl-av { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.063); font-size: 1.3rem; line-height: 1; }
.cl-av.sel { border-color: var(--gold); background: #4a3a12; }

/* ---- Stage 2 低频屏收尾:徽章墙/节点阶梯/文字接龙/升级横幅/指令小课堂 ---- */
.levelup { background: rgba(165,94,234,.18); color: #d3bcff; }
/* 徽章墙:印章 & 皮肤 chip */
.stampchip { background: rgba(255,255,255,0.063); color: var(--text-dim); border-color: var(--border); }
.stampchip.cur { border-color: var(--gold); background: #4a3a12; color: #ffe0a3; }
.stampchip.got { border-color: #1dd1a1; background: rgba(55,211,155,.16); color: #8ff0cd; }
/* 挑战卡:原 #fff7e0 浅奶油底(浅色主题遗留)+ 深色主题浅字 → 挑战文字对比度仅 1.03 看不见;改金调深卡 */
.challengecard { background: rgba(242,201,76,.13); border-color: var(--gold); color: var(--ink); }
.cardtip { color: #ffd88a; }
.skinchip { background: rgba(255,255,255,0.063); color: var(--ink); border-color: var(--border); }
.skinchip.cur { border-color: var(--gold); background: #4a3a12; }
/* 指令小课堂 */
.demo-row { background: rgba(255,255,255,0.051); }
.demo-row small { color: var(--text-dim); }
.demo-cell { background: #35513f; border-color: rgba(255,255,255,.06); }
/* 天赋树节点面板:why + 深度阶梯。统一 pass 2:内部不再用大块彩底,
   改成"同一克制表面 + 一条细的语义色左条"表状态(呼应地图的克制感)。 */
.nodepanel small, .rung small { color: var(--text-dim); }
.np-why { background: rgba(255,255,255,0.039); color: var(--ink); border-left: 3px solid var(--gold); }
.rung { background: rgba(255,255,255,0.039); border-left: 3px solid transparent; }
.rung.got { background: rgba(255,255,255,0.039); border-left-color: var(--ok); }
.rung.avail { background: rgba(255,255,255,0.039); border-left-color: var(--gold); }
/* 报告页技能行:同一克制语言——细 3px 语义左条,不再 5.6px 厚条;
   修 .skillrow.todo 残留浅底(深色下白块 bug)。 */
.skillrow.done { border-left: 3px solid var(--ok); }
.skillrow.doing { border-left: 3px solid var(--gold); }
.skillrow.todo { border-left: 3px solid var(--border); background: var(--card-grad); opacity: .7; }
/* 报告页统计卡 .stat 是单类、不在深色卡组里 → 深色下残留白块(运行时扫描揪出)。统一到 --card。*/
.stat { background: var(--card-grad); border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,.28); }
.stat span { color: var(--text-dim); }
.dombar .ipbar { background: rgba(0,0,0,.34); }
/* 文字接龙(当大模型) */
.llm-sentence { background: rgba(96,150,255,.14); color: #cfe0ff; }
.llm-sentence.done { background: linear-gradient(90deg, #4a3a12, #3a2c0e); color: #ffe0a3; }
.llm-opt { border-color: var(--border); }
.llm-opt.top { border-color: var(--gold); background: #4a3a12; }
.llm-word small { color: var(--gold); }
.llm-bar { background: rgba(0,0,0,.3); }
.llm-score { color: var(--text-dim); }

/* ============================================================
   ♿ 无障碍 (a11y):键盘可见焦点环 + 尊重减弱动画
   ============================================================ */
/* 键盘导航时的高对比焦点环(鼠标点击不触发 :focus-visible,不打扰鼠标用户)。
   深色主题下用金色,醒目且不刺眼。 */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}
/* 输入类已用 border-color 表示聚焦,键盘聚焦时再叠一层环,确保可见 */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 1px;
}
/* 尊重系统「减弱动态效果」:关掉大部分动画/过渡(彩带 JS 另行判定) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  body::before { animation: none !important; }  /* 星空漂移停 */
}

/* 节点详情现在是整页(与其它页统一,用户拍板)。约束宽度并居中,内容像报告页那样落在星空底上。 */
.nodepanelpage .nodepanel { max-width: 660px; margin: 4px auto 0; }
.nodepanelpage .np-one { font-size: 1.05rem; }

/* ---- 岛内关卡路线图(列表→蜿蜒闯关路线,契合星海群岛主题)---- */
.levelmap { position: relative; max-width: 480px; margin: 10px auto 0; }
.levelmap > svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.lvlnode {
  position: absolute; transform: translate(-50%, -50%); z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: 138px; background: none; border: none; padding: 0;
}
.lvlmed {
  width: 74px; height: 74px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; font-weight: 800; color: #eaf1ff;
  border: 4px solid rgba(255,255,255,.18);
  background: radial-gradient(circle at 50% 32%, #33456e, #22346b 80%);
  box-shadow: 0 6px 16px rgba(8,12,34,.5), inset 0 0 18px rgba(0,0,0,.28); transition: transform .12s;
}
.lvlnode:hover:not(:disabled) .lvlmed { transform: translateY(-3px) scale(1.06); }
.lvlnode.done .lvlmed { border-color: var(--ok); background: radial-gradient(circle at 50% 32%, #2f7a5a, #133a2c 80%); }
.lvlnode.current .lvlmed { border-color: var(--gold); background: radial-gradient(circle at 50% 32%, #6e5320, #3a2c12 80%); box-shadow: 0 0 0 3px rgba(242,201,76,.32), 0 7px 22px rgba(242,201,76,.28); animation: lvlpulse 1.7s ease-in-out infinite; }
.lvlnode.locked { cursor: not-allowed; }
.lvlnode.locked .lvlmed { opacity: .5; }
.lvllabel { font-size: .82rem; font-weight: 800; color: var(--ink); text-align: center; line-height: 1.25; }
.lvlnode.locked .lvllabel { color: var(--text-dim); font-weight: 700; }
.lvllabel small { display: block; color: var(--text-dim); font-weight: 600; font-size: .72rem; margin-top: 1px; }
@keyframes lvlpulse {
  0%,100% { box-shadow: 0 6px 16px rgba(0,0,0,.42), 0 0 0 0 rgba(255,211,77,.55); }
  50% { box-shadow: 0 6px 16px rgba(0,0,0,.42), 0 0 0 9px rgba(255,211,77,0); }
}
@media (prefers-reduced-motion: reduce) { .lvlnode.current .lvlmed { animation: none; } }

/* ---------------- 🗺️ 图像化冒险世界地图 ---------------- */
.worldmap { position: relative; width: 100%; margin: 10px 0 8px; }
/* 🌌 全屏星海:去掉盒子边框,岛屿直接漂在全屏动态星海里(布景由 .mapscene 提供) */
.wmap2 { border: none; box-shadow: none; background: none; border-radius: 0; overflow: visible; }
.wmap2 .wm-sky { display: none; }
/* 星尘背景层(旧盒内层,现已隐藏,保留定义以防复用) */
.wm-sky {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .9;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 8%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.2px 1.2px at 78% 15%, rgba(200,220,255,.7), transparent),
    radial-gradient(1px 1px at 32% 30%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.6px 1.6px at 62% 45%, rgba(255,240,210,.75), transparent),
    radial-gradient(1px 1px at 88% 60%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.3px 1.3px at 18% 72%, rgba(200,220,255,.6), transparent),
    radial-gradient(1px 1px at 46% 85%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 92%, rgba(255,240,210,.6), transparent),
    radial-gradient(1px 1px at 8% 50%, rgba(255,255,255,.45), transparent),
    linear-gradient(rgba(126,160,220,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,160,220,.05) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 96px 96px, 96px 96px;
}
/* 每座岛脚下的主题深度光晕 */
.wm-halo {
  position: absolute; transform: translate(-50%, -46%); z-index: 0; pointer-events: none;
  width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hc) 34%, transparent) 0%, transparent 66%);
  filter: blur(2px);
}
.wm-spark { position: absolute; transform: translate(-50%, -50%); z-index: 0; color: #cfe0ff; pointer-events: none; text-shadow: 0 0 6px rgba(160,190,255,.5); }
/* 场景装饰:小辉光球 + 柔雾团(布局库 decor 层) */
.wm-orb {
  position: absolute; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a8bfe8, #46589e 68%, #2b3568);
  box-shadow: 0 0 12px rgba(120,150,230,.4);
}
.wm-wisp {
  position: absolute; transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
  height: 20px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(150,175,225,.22), transparent 70%);
  filter: blur(5px);
}
.wm-compass { position: absolute; right: 16px; top: 14px; width: 58px; height: 58px; z-index: 1; color: #8fb0e6; opacity: .55; pointer-events: none; }
.wm-route { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.wm-path { fill: none; stroke: #6f86b8; stroke-width: 2.5; stroke-dasharray: 1 9; stroke-linecap: round; opacity: .6; vector-effect: non-scaling-stroke; }
.wm-path.wm-lit { stroke: var(--gold, #f2c94c); stroke-dasharray: none; stroke-width: 4; opacity: .95; filter: drop-shadow(0 0 6px rgba(242,201,76,.6)); }
/* 岛节点(重置继承自 .island 的卡片外观) */
.island.wisland {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 152px;
  background: none; border: none; border-left: none; box-shadow: none; padding: 0;
  cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent;
}
/* 浮空岛主体(徽章+岩石):承载每岛各异的倾斜/大小;柔影不随之倾斜(留在 .wm-isle 上) */
.wm-body { position: relative; display: block; width: 100%; height: 100%; transform: rotate(var(--rot, 0deg)) scale(var(--sc, 1)); transform-origin: 50% 58%; }
.island.wisland:hover { transform: translate(-50%, -50%) scale(1.05); box-shadow: none; }
.island.wisland.locked { opacity: .62; filter: saturate(.7); cursor: not-allowed; }
.island.wisland.complete { background: none; }
/* 浮空岛:徽章 + 岩石底座 + 柔影 */
.wm-isle { position: relative; display: block; width: 106px; height: 128px; animation: wmfloat 5.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes wmfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.wm-shadow {
  position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%);
  width: 78px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle, rgba(4,8,22,.55), transparent 70%); filter: blur(3px); z-index: 0;
}
.wm-medal {
  position: relative; z-index: 2; width: 106px; height: 106px; border-radius: 50%; overflow: hidden; display: block;
  border: 4px solid rgba(255,255,255,.18);
  background: radial-gradient(circle at 50% 32%, var(--sky1), var(--sky2));
  box-shadow: 0 6px 16px rgba(8,12,34,.5), inset 0 0 22px rgba(0,0,0,.28);
  transition: transform .15s, box-shadow .2s, border-color .2s;
}
.wm-rock2 {
  position: absolute; left: 50%; top: 96px; transform: translateX(-50%);
  width: 74px; height: 34px; z-index: 1;
  filter: drop-shadow(0 3px 4px rgba(4,8,22,.5));
}
.wm-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.wm-sun { fill: rgba(255,240,205,.42); }
.wm-land { fill: var(--ic); opacity: .9; }
.wm-rock { fill: rgba(0,0,0,.34); }
.wm-hero { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); font-size: 2.7rem; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.wm-deco { position: absolute; right: 11px; top: 11px; font-size: 1.05rem; opacity: .92; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.wm-crown { position: absolute; left: 50%; top: -3px; transform: translateX(-50%); font-size: 1.35rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); z-index: 3; }
.wm-lockbadge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; background: rgba(9,13,30,.5); z-index: 3; }
.island.wisland.current .wm-medal { border-color: var(--gold, #f2c94c); box-shadow: 0 0 0 3px rgba(242,201,76,.32), 0 7px 22px rgba(242,201,76,.28); animation: wmpulse 1.9s ease-in-out infinite; }
.island.wisland.complete .wm-medal { border-color: var(--ok, #37d39b); }
.island.wisland:hover .wm-medal { transform: scale(1.03); }
.wm-label { text-align: center; line-height: 1.16; margin-top: 2px; }
.wm-label b { display: block; font-size: 1rem; font-weight: 800; color: #eaf1ff; text-shadow: 0 1px 3px rgba(4,8,22,.7); }
.wm-label small { display: block; font-size: .76rem; color: #b7c6e2; margin: 1px 0 5px; text-shadow: 0 1px 2px rgba(4,8,22,.6); }
.wm-prog { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: .74rem; font-weight: 700; color: #b7c6e2; }
.wm-pbar { width: 66px; height: 7px; background: rgba(255,255,255,.15); border-radius: 5px; overflow: hidden; }
.wm-pfill { display: block; height: 100%; background: var(--gold, #f2c94c); border-radius: 5px; transition: width .5s; }
.wm-boat { position: absolute; transform: translate(-50%, -50%); z-index: 3; font-size: 1.7rem; pointer-events: none; text-align: center; animation: wmbob 2.6s ease-in-out infinite; }
.wm-here { display: block; font-size: .62rem; font-weight: 800; color: #ffe28a; background: rgba(16,26,58,.86); border: 1px solid var(--border); border-radius: 8px; padding: 1px 7px; margin-top: -1px; white-space: nowrap; }
.wm-grad { font-size: 1.7rem; }
.wm-grad .wm-here { color: #1b2340; background: linear-gradient(180deg, #ffe28a, #f2b93d); border-color: #f2b93d; }
@keyframes wmpulse { 0%,100% { box-shadow: 0 0 0 3px rgba(242,201,76,.32), 0 7px 22px rgba(242,201,76,.28); } 50% { box-shadow: 0 0 0 8px rgba(242,201,76,0), 0 7px 22px rgba(242,201,76,.4); } }
@keyframes wmbob { 0%,100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -62%); } }
@media (prefers-reduced-motion: reduce) { .wm-boat, .island.wisland.current .wm-medal { animation: none; } }
@media (max-width: 560px) {
  main.mapfull { padding: 14px 16px 56px; }
  .map-hero-row { flex-direction: column; gap: 10px; }
  .map-hero-right { width: 100%; }
  .island.wisland { width: 132px; }
  .wm-isle { width: 94px; height: 116px; }
  .wm-medal { width: 94px; height: 94px; }
  .wm-rock2 { top: 84px; width: 66px; }
  .wm-hero { font-size: 2.4rem; }
  .wm-halo { width: 150px; height: 150px; }
}
/* ⚡ 已航行航线上流动的能量光点(流向「你在这」) */
.wm-flow {
  fill: none; stroke: #fff3c4; stroke-width: 4; stroke-dasharray: 1 22; stroke-linecap: round;
  opacity: .9; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(255,220,120,.85));
  animation: wmflow 1.5s linear infinite;
}
@keyframes wmflow { to { stroke-dashoffset: -23; } }

/* ---------------- 🌌 全屏动态星海布景(仅地图页,fixed 铺满视口) ---------------- */
.map { position: relative; }
.map > :not(.mapscene) { position: relative; z-index: 1; }
.mapscene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* 双层视差星尘:远层慢、近层快 */
.ms-stars { position: absolute; inset: -10% 0; background-repeat: repeat; will-change: background-position; }
.ms-far {
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(190,215,255,.6), transparent),
    radial-gradient(1.2px 1.2px at 45% 85%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 88% 22%, rgba(255,240,210,.55), transparent);
  background-size: 320px 320px; opacity: .32; animation: msdrift 150s linear infinite; /* 海图化:星光降为微光,像海面浮光 */
}
.ms-near {
  background-image:
    radial-gradient(2px 2px at 15% 50%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 62% 25%, #cfe0ff, transparent),
    radial-gradient(1.9px 1.9px at 82% 78%, #fff, transparent);
  background-size: 320px 320px; opacity: .4; animation: msdrift 72s linear infinite;
}
@keyframes msdrift { to { background-position: 0 320px; } }
/* 缓慢漂移的星云 */
.ms-neb { position: absolute; border-radius: 50%; filter: blur(34px); pointer-events: none; will-change: transform; }
.ms-n1 { width: 48vw; height: 48vw; left: -10vw; top: 4vh; background: radial-gradient(circle, rgba(104,88,214,.5), transparent 68%); animation: msneb1 36s ease-in-out infinite alternate; }
.ms-n2 { width: 54vw; height: 54vw; right: -14vw; top: 32vh; background: radial-gradient(circle, rgba(42,132,196,.46), transparent 68%); animation: msneb2 46s ease-in-out infinite alternate; }
.ms-n3 { width: 42vw; height: 42vw; left: 14vw; bottom: -12vh; background: radial-gradient(circle, rgba(164,66,164,.42), transparent 68%); animation: msneb1 56s ease-in-out infinite alternate; }
@keyframes msneb1 { from { transform: translate(0,0) scale(1); } to { transform: translate(4vw,-3vh) scale(1.15); } }
@keyframes msneb2 { from { transform: translate(0,0) scale(1.06); } to { transform: translate(-5vw,4vh) scale(.94); } }
/* 顶部极光带 */
.ms-aurora {
  position: absolute; left: -10%; top: 1%; width: 120%; height: 140px;
  background: linear-gradient(100deg, transparent, rgba(80,200,180,.15), rgba(120,120,240,.13), transparent);
  filter: blur(26px); animation: msaur 28s ease-in-out infinite alternate;
}
@keyframes msaur { from { transform: translateX(-3%) skewX(-6deg); opacity: .45; } to { transform: translateX(4%) skewX(4deg); opacity: .85; } }
/* 远处的带环行星(布景) */
.ms-planet {
  position: absolute; left: 3vw; bottom: 11vh; width: 128px; height: 128px; border-radius: 50%; opacity: .5;
  background: radial-gradient(circle at 34% 30%, #6a86c8, #2a3a70 68%, #171f42);
  box-shadow: 0 0 46px rgba(90,120,220,.42), inset -16px -11px 32px rgba(0,0,0,.5);
}
.ms-planet::after {
  content: ""; position: absolute; left: -32%; top: 40%; width: 164%; height: 22%;
  border: 6px solid rgba(180,200,255,.32); border-radius: 50%; transform: rotate(-18deg); box-sizing: border-box;
}
/* 偶发流星 */
.ms-shoot {
  position: absolute; width: 130px; height: 2px; opacity: 0; transform: rotate(18deg); border-radius: 2px;
  background: linear-gradient(90deg, transparent, #fff); filter: drop-shadow(0 0 6px #bcd4ff);
}
.ms-sh1 { top: 13%; left: -12%; animation: msshoot 9s ease-in 3s infinite; }
.ms-sh2 { top: 46%; left: -12%; animation: msshoot 12s ease-in 8s infinite; }
@keyframes msshoot {
  0% { opacity: 0; transform: translate(0,0) rotate(18deg); }
  2% { opacity: 1; } 12% { opacity: 1; }
  18%, 100% { opacity: 0; transform: translate(64vw,22vh) rotate(18deg); }
}
@media (max-width: 560px) { .ms-planet { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ms-stars, .ms-neb, .ms-aurora, .wm-isle, .wm-flow { animation: none; }
  .ms-shoot { display: none; }
}

/* ---------------- 🪐 知识点详情页(图形化 / 游戏感) ---------------- */
.np-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.np-orb {
  width: 90px; height: 90px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 2.8rem;
  background: radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--dc) 68%, #ffffff 14%), color-mix(in srgb, var(--dc) 55%, #10142e 45%) 76%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dc) 28%, transparent), 0 8px 26px rgba(0,0,0,.5), inset -6px -8px 16px rgba(0,0,0,.34), inset 6px 6px 14px rgba(255,255,255,.16);
}
.np-orb span { filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.np-hero-txt { min-width: 0; }
.np-hero-txt h2 { margin: 0; }
.np-sub { margin: 3px 0 9px; font-weight: 700; line-height: 1.5; color: #dbe6ff; }
.np-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.np-domchip { font-size: .82rem; font-weight: 800; color: #cfe0ff; color: color-mix(in srgb, var(--dc) 65%, #ffffff 35%); background: color-mix(in srgb, var(--dc) 20%, transparent); border-radius: 999px; padding: 3px 11px; white-space: nowrap; }
.np-depthdots { display: inline-flex; align-items: center; gap: 4px; }
.np-depthdots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.np-depthdots i.on { background: var(--dc); box-shadow: 0 0 6px var(--dc); }
.np-depthdots b { margin-left: 5px; font-size: .8rem; color: var(--text-dim, #9fb0cc); font-variant-numeric: tabular-nums; }
/* 深度台阶:连成一条成长轨道 */
.np-track { position: relative; display: flex; flex-direction: column; gap: 9px; }
.trung { display: flex; align-items: flex-start; gap: 12px; position: relative; }
.trung::before { content: ""; position: absolute; left: 18.5px; top: 40px; bottom: -9px; width: 3px; background: rgba(255,255,255,.12); }
.trung:last-child::before { display: none; }
.trung-node { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 1.15rem; background: var(--card, #22346b); border: 2.5px solid var(--border); z-index: 1; }
.trung-txt { padding-top: 6px; min-width: 0; }
.trung-txt b { display: block; }
.trung-txt small { display: block; color: var(--text-dim, #9fb0cc); font-size: .82rem; line-height: 1.45; }
.trung.got .trung-node { border-color: var(--ok, #37d39b); background: rgba(55,211,155,.20); }
.trung.avail .trung-node { border-color: var(--gold, #f2c94c); background: rgba(242,201,76,.18); box-shadow: 0 0 0 3px rgba(242,201,76,.22); animation: trungpulse 1.9s ease-in-out infinite; }
.trung.future .trung-node, .trung.far .trung-node { opacity: .5; }
.trung.future, .trung.far { opacity: .72; }
@keyframes trungpulse { 0%,100% { box-shadow: 0 0 0 3px rgba(242,201,76,.22); } 50% { box-shadow: 0 0 0 7px rgba(242,201,76,0); } }
@media (prefers-reduced-motion: reduce) { .trung.avail .trung-node { animation: none; } }
/* 🏝️ 深度阶梯 → 图形化"成长之路"(像世界地图:蜿蜒路线 + 宝藏岛徽章) */
.djourney { position: relative; max-width: 440px; margin: 6px auto 2px; }
.djr { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.djr-p { fill: none; stroke: #5a6f96; stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; opacity: .5; vector-effect: non-scaling-stroke; }
.djr-p.lit { stroke: var(--gold, #f2c94c); stroke-dasharray: none; stroke-width: 4; opacity: .95; filter: drop-shadow(0 0 4px rgba(242,201,76,.5)); }
.dstop { position: absolute; transform: translate(-50%, -50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 158px; cursor: pointer; background: none; border: none; }
.dstop .wm-medal { cursor: pointer; }
.dstop:hover .wm-medal { transform: scale(1.05); }
.dstop.avail .wm-medal { border-color: var(--gold, #f2c94c); box-shadow: 0 0 0 3px rgba(242,201,76,.32), 0 7px 22px rgba(242,201,76,.28); animation: wmpulse 1.9s ease-in-out infinite; }
.dstop.got .wm-medal { border-color: var(--ok, #37d39b); }
.dstop.myst { opacity: .8; }
.dstop.myst .wm-medal { filter: saturate(.5) brightness(.72); }
.dstop.myst .wm-label { opacity: .72; }
.dstop.avail .wm-label small { color: var(--gold, #f2c94c); }
@keyframes dstoppulse { 0%,100% { box-shadow: 0 0 0 3px rgba(242,201,76,.30), 0 5px 16px rgba(242,201,76,.3); } 50% { box-shadow: 0 0 0 8px rgba(242,201,76,0), 0 5px 16px rgba(242,201,76,.3); } }
@media (prefers-reduced-motion: reduce) { .dstop.avail .dstop-medal { animation: none; } }
/* 🗺️ 宝藏化深度台阶:神秘宝藏(未达)+ 收集完提示 */
.trung.myst .trung-node { border-style: dashed; opacity: .55; }
.trung.myst { opacity: .82; }
.trung.myst .trung-txt small { font-style: italic; }
.np-treasure-hint { margin: 10px 0 0; font-weight: 700; font-size: .9rem; color: var(--gold, #f2c94c);
  background: rgba(242,201,76,.10); border: 1px dashed rgba(242,201,76,.5); border-radius: 10px; padding: 8px 12px; line-height: 1.55; }
/* 聚焦某星系时,画布左上角的"退出到全星系"入口(比侧栏更好发现) */
.galaxy-exit {
  position: absolute; top: 52px; left: 10px; z-index: 4;
  font-size: .82rem; font-weight: 800; color: #eaf1ff; cursor: pointer;
  background: rgba(10,16,38,.72); border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 14px; backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.galaxy-exit:hover { background: rgba(20,30,66,.9); }

/* ---------------- 🎖️ AI 指挥官 ---------------- */
.cmd-prog { font-size: .9rem; color: var(--text-dim, #9fb0cc); font-weight: 700; }
.cmd-demo-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(255,255,255,.06); border: 1.5px dashed var(--border);
  border-radius: 12px; padding: 10px 14px; margin: 10px 0; font-size: .9rem; line-height: 1.45;
}
.cmd-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cmd-card {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  padding: 12px 16px; border-radius: 14px; color: inherit; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1.5px solid var(--border);
  transition: background .15s, transform .12s;
}
.cmd-card:hover { background: rgba(255,255,255,.11); transform: translateY(-1px); }
.cmd-card.locked { opacity: .55; cursor: not-allowed; }
.cmd-card.done { border-color: var(--ok, #37d39b); }
.cmd-emoji { font-size: 1.7rem; }
.cmd-info { flex: 1; min-width: 0; }
.cmd-info b { display: block; font-size: 1rem; }
.cmd-info small { color: var(--text-dim, #9fb0cc); }
.cmd-state { font-size: 1.15rem; }
.cmd-goal {
  background: rgba(255,255,255,.05); border-left: 4px solid var(--gold, #f2c94c);
  border-radius: 10px; padding: 10px 14px; margin: 10px 0; line-height: 1.55;
}
.cmd-hint { margin: 8px 0 12px; color: var(--text-dim, #9fb0cc); }
.cmd-hint summary { cursor: pointer; font-weight: 700; }
.cmd-hint p { margin: 6px 0 0 6px; }
.cmd-io textarea {
  width: 100%; box-sizing: border-box; border-radius: 12px;
  border: 1.5px solid var(--border); background: rgba(255,255,255,.05);
  color: inherit; padding: 10px 12px; font-size: 1rem; font-family: inherit; resize: vertical;
}
.cmd-io textarea:focus { outline: none; border-color: var(--gold, #f2c94c); }
.cmd-actions { display: flex; gap: 10px; margin: 10px 0; flex-wrap: wrap; align-items: center; }
.cmd-sendbtn { font-size: 1.02rem; padding: 11px 22px; }
.cmd-status { margin: 8px 0; font-weight: 700; color: var(--text-dim, #9fb0cc); }
.cmd-code { margin: 8px 0; }
.cmd-code summary { cursor: pointer; font-weight: 700; color: var(--text-dim, #9fb0cc); }
.cmd-code pre {
  background: #0d1530; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; overflow-x: auto; font-size: .85rem; line-height: 1.5; margin-top: 6px;
  font-family: Consolas, "Courier New", monospace; color: #cfe0ff;
}
.cmdpage .drawcv { margin-top: 8px; }
.cmd-verdict { border-radius: 12px; padding: 12px 14px; margin-top: 10px; font-weight: 600; line-height: 1.5; }
.cmd-verdict.fail { background: rgba(255,107,107,.1); border: 1.5px solid rgba(255,107,107,.35); }
.cmd-verdict.pass { background: rgba(55,211,155,.1); border: 1.5px solid rgba(55,211,155,.35); }
.cmd-retryline { display: block; margin-top: 6px; color: var(--text-dim, #9fb0cc); font-weight: 500; }
.cmd-intent { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

/* ---------------- 🌌 全站场景化:通用布景 + 通用航路 ---------------- */
/* .hasbg:页面内容浮在 fixed 星海布景之上(布景 = .mapscene,z:0) */
.hasbg { position: relative; }
.hasbg > :not(.mapscene) { position: relative; z-index: 1; }
/* 通用航路容器(岛屿关卡页 / 指挥官任务页):全宽,内部复用 wm-* 场景元素 */
.trailmap { position: relative; width: 100%; margin: 4px 0 0; }
.map-hero-row .island-head { margin-bottom: 0; }
.map-hero-row .island-head p { margin-bottom: 0; }
.map-hero-row > .btn { flex: 0 0 auto; }
/* mapfull 页面上的可读内容(横幅/提示)保持舒适宽度居中 */
.mapfull .cmd-demo-banner { max-width: 880px; margin-left: auto; margin-right: auto; }
/* 航路上的关卡标签在星海上要有投影,别淹没在地形里 */
.trailmap .lvllabel { text-shadow: 0 1px 3px rgba(4,8,22,.75); }
.trailmap .lvllabel small { text-shadow: 0 1px 2px rgba(4,8,22,.65); }

/* 知识点详情页:全屏场景化 —— 正文保持可读宽度,成长之路破框铺满全宽 */
.nodepanelpage .nodepanel { max-width: 940px; margin: 0 auto; }
.djourney.trailfull { max-width: none; left: 50%; transform: translateX(-50%); margin: 10px 0 4px; }
.djourney.trailfull .dstop-label { text-shadow: 0 1px 3px rgba(4,8,22,.75); }
.djourney.trailfull .dstop-label small { text-shadow: 0 1px 2px rgba(4,8,22,.65); }

/* 知识点详情页 hero 分栏:左 = 星球身份 + 💡,右 = 返回/行动按钮/前置/相关关卡 */
.np-hero-row { margin-bottom: 6px; }
.np-hero-left { flex: 1 1 auto; min-width: 0; }
.np-hero-row .np-hero { margin-bottom: 10px; }
.np-hero-left .np-why { margin: 0; max-width: 640px; }
.np-hero-right > .btn { align-self: flex-end; }
.np-actions { margin: 0; justify-content: flex-end; }
.np-side-card {
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  border-radius: 12px; padding: 9px 12px;
}
.np-side-card b { display: block; font-size: .78rem; font-weight: 800; color: var(--text-dim, #9fb0cc); margin-bottom: 7px; }
.np-side-card .toolrow { margin: 0; }
@media (max-width: 560px) {
  .np-hero-right > .btn { align-self: stretch; }
  .np-actions { justify-content: flex-start; }
}

/* ---------------- 🚀 未来感冲刺(M1 P0-2):UI 即 Demo ---------------- */
/* 玻璃拟态顶栏:深玻璃 + 底缘霓虹渐变线 */
.topbar { background: rgba(10,16,38,.58); backdrop-filter: blur(14px) saturate(1.35); border-bottom: none; }
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 4%, rgba(110,160,255,.55) 30%, rgba(190,120,255,.45) 70%, transparent 96%);
}
/* 页面进入「曲速」过渡(每次 render 重建 main 自动触发) */
#app main { animation: warpin .3s cubic-bezier(.2,.7,.3,1); }
@keyframes warpin { from { opacity: 0; transform: translateY(10px) scale(.992); } to { opacity: 1; transform: none; } }
/* 霓虹 CTA:主按钮悬浮光晕 + 掠光扫过 */
.bigbtn { position: relative; overflow: hidden; }
.bigbtn:hover { box-shadow: 0 0 18px rgba(255,170,60,.45), 0 6px 22px rgba(0,0,0,.35); }
.bigbtn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 42%; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.34), transparent);
  transform: skewX(-18deg); transition: left .5s ease;
}
.bigbtn:hover::after { left: 130%; }
/* 品牌开场(每会话一次,自动淡出) */
.splash {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(120% 100% at 50% 18%, #1a2a55, #0a1128 72%);
  animation: splashout .5s ease 1.5s forwards;
}
.splash b { font-size: 2.1rem; color: #eaf1ff; text-shadow: 0 0 26px rgba(120,170,255,.85); animation: splashpop .6s cubic-bezier(.2,.8,.3,1.2); }
.splash small { color: #9fb0cc; font-weight: 700; letter-spacing: .14em; font-size: .8rem; animation: splashpop .75s ease; }
@keyframes splashpop { from { opacity: 0; transform: translateY(14px) scale(.94); } }
@keyframes splashout { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { #app main { animation: none; } .bigbtn::after { display: none; } .splash { display: none; } }

/* 📖 家长白皮书 */
.wp-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 16px; }
.wp-row {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 14px; line-height: 1.5;
}
.wp-dom { border-left: 4px solid var(--gc, var(--border)); }
.wp-cell1 { flex: 0 0 210px; color: #eaf1ff; }
.wp-cell1 small { color: var(--text-dim, #9fb0cc); font-weight: 600; }
.wp-cell2 { flex: 0 0 150px; color: var(--gold, #f2c94c); font-weight: 700; font-size: .88rem; }
.wp-cell3, .wp-map { flex: 1 1 260px; color: var(--text-dim, #cbd6ee); font-size: .9rem; }
@media (max-width: 560px) { .wp-cell1 { flex-basis: 100%; } .wp-cell2 { flex-basis: auto; } }

/* 🎓 毕业项目步骤点 */
.proj-dots { display: flex; align-items: center; gap: 7px; margin: 4px 0 12px; }
.proj-dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1.5px solid var(--border); }
.proj-dots i.on { background: var(--ok, #37d39b); border-color: var(--ok, #37d39b); }
.proj-dots i.cur { border-color: var(--gold, #f2c94c); box-shadow: 0 0 0 3px rgba(242,201,76,.25); }
.proj-dots b { margin-left: 4px; font-size: .8rem; color: var(--text-dim, #9fb0cc); }

/* 成长之路宝藏站:可点击(手型 + 悬浮抬起 + 焦点环) */
.dstop { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dstop .dstop-medal { transition: transform .14s, box-shadow .2s; }
.dstop:hover .dstop-medal { transform: translateY(-3px) scale(1.06); }
.dstop:focus-visible { outline: none; }
.dstop:focus-visible .dstop-medal { box-shadow: 0 0 0 3px rgba(242,201,76,.6), 0 5px 16px rgba(8,12,34,.5); }

/* 课文页的 Benji 入口(此前只有写代码关有;第一课就该能求助) */
.lesson-benji { text-align: center; margin-top: 10px; }
.lesson-benji .btn { font-size: .82rem; opacity: .85; }
.lesson-benji .btn:hover { opacity: 1; }

/* 📔 我的代码本 */
.codebookpage .cb-list { max-width: 760px; margin: 16px auto 0; display: flex; flex-direction: column; gap: 14px; }
.codebookpage .cb-item { background: var(--card-grad, var(--card)); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.codebookpage .cb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.codebookpage .cb-title { font-weight: 700; font-size: .92rem; }
.codebookpage .cb-code { background: #0c1330; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: .78rem; line-height: 1.55; overflow-x: auto; max-height: 260px; white-space: pre; }
.codebookpage .cb-empty { max-width: 560px; margin: 18px auto 0; line-height: 1.8; }

/* 🌠 星海信号(时空闭环) */
.signal-cele .signal-text { background: rgba(255,255,255,0.039); border-left: 3px solid #f2c94c; border-radius: 10px; padding: 12px 14px; text-align: left; line-height: 1.8; }

/* 🧭 星球页统一右栏(与星系侧栏同语言:一块玻璃面板 + 分区标题 + 整行按钮) */
.np-rail {
  display: flex; flex-direction: column; gap: 6px; padding: 9px;
  width: clamp(272px, 24vw, 340px);
  background: rgba(10,16,38,.62); border: 1px solid var(--border); border-radius: 12px;
  backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.np-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  font-size: .82rem; font-weight: 700; color: #dbe6ff; font-family: inherit;
  background: rgba(255,255,255,.05); border: 1.5px solid transparent; border-radius: 9px;
  padding: 8px 11px; cursor: pointer;
}
.np-row .np-row-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-row:hover:not(:disabled) { background: rgba(255,255,255,.13); }
.np-row:disabled { opacity: .6; cursor: default; }
.np-row.primary { border-color: var(--gold, #f2c94c); background: rgba(242,201,76,.14); color: #ffe9a8; }
.np-row.primary:hover { background: rgba(242,201,76,.24); }
.np-xp { margin-left: auto; flex: none; font-size: .7rem; font-weight: 700; color: var(--text-dim, #9fb0cc); font-variant-numeric: tabular-nums; }
.np-row.primary .np-xp { color: var(--gold, #f2c94c); }
.np-rail-sec { margin: 6px 2px 0; font-size: .67rem; font-weight: 800; letter-spacing: .5px; color: var(--text-dim, #9fb0cc); text-transform: uppercase; }
@media (max-width: 900px) { .np-rail { width: 100%; } }

/* ❓ 使用指南 */
.helppage .help-grid { max-width: 880px; margin: 14px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.helppage .help-sec { padding: 16px 18px; }
.helppage .help-sec h2 { font-size: 1.02rem; margin: 0 0 8px; }
.helppage .help-sec p { margin: 0 0 8px; font-size: .88rem; line-height: 1.7; color: var(--text-dim, #b7c6e2); }
.helppage .help-sec p b { color: var(--ink, #eef4ff); }