/* ===========================================================
 *  电力小镇 · 横版漫游  样式
 *  卡通扁平化 / 明快配色
 * =========================================================== */

:root{
  --sky-1:#8fd3ff;
  --sky-2:#cdf0ff;
  --sky-3:#eafcff;

  --grass-1:#84d95f;
  --grass-2:#5cb84a;
  --grass-front:#4fae42;
  --path-1:#f2e6c4;
  --path-2:#e2d2a6;

  --ink:#1d2b3a;
  --ink-soft:#5a6b7c;
  --card:#ffffff;

  /* CEEC 品牌蓝：界面主色统一由此驱动 */
  --ceec:#12509c;
  --ceec-l:#2f6fb5;
  --ceec-d:#0c3e7d;
  --ceec-pale:#eaf2fb;

  --feet-bottom:112px;   /* 角色脚底距屏幕底部 */
  --build-bottom:166px;  /* 建筑基座距屏幕底部 */
  --ground-h:210px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  height:100%;
  overflow:hidden;
  background:#8fd3ff;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  color:var(--ink);
}

.stage{
  position:fixed;
  inset:0;
  overflow:hidden;
  background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 52%,var(--sky-3) 100%);
  user-select:none;
  -webkit-user-select:none;
}

.layer{
  position:absolute;
  top:0; left:0;
  height:100%;
  width:100%;
  will-change:transform;
  pointer-events:none;
}

/* ---------------- 远景山脉 ---------------- */
/* 昼夜调光：静态层的颜色都写死在 SVG 里，逐个改不现实，
   统一由 daynight.js 计算的 --filt-* 变量用 CSS filter 压暗 */
.layer-far{ z-index:1; filter:var(--filt-far,none); }
.layer-far .far-inner{
  position:absolute; bottom:var(--ground-h); left:0;
  height:230px;
}

/* ---------------- 中景丘陵 ---------------- */
.layer-mid{ z-index:2; filter:var(--filt-mid,none); }
.layer-mid .mid-inner{
  position:absolute; bottom:calc(var(--ground-h) - 26px); left:0;
  height:170px;
}

/* ---------------- 主世界 ---------------- */
.layer-world{ z-index:5; }
/* world 层不整体调光：
   地面靠颜色变量（再套 filter 会叠两遍导致夜里发黑），
   建筑与装饰套一份，主角套一份更浅的 */
.layer-world .ground{ will-change:auto; }
.layer-world #buildings,
.layer-world .decor{ filter:var(--filt-world,none); }
.world-inner{ position:absolute; inset:0; }

.ground{ position:absolute; left:0; bottom:0; width:100%; height:var(--ground-h); }
.ground-grass{
  position:absolute; left:0; bottom:0; width:100%; height:200px;
  background:linear-gradient(180deg,var(--grass-1) 0%,var(--grass-2) 100%);
}
.ground-path{
  position:absolute; left:0; bottom:92px; width:100%; height:74px;
  background:linear-gradient(180deg,var(--path-1) 0%,var(--path-2) 100%);
  border-top:4px solid var(--path-edge-1,#fff8e2);
  border-bottom:4px solid var(--path-edge-2,#cbb887);
}
.ground-path::after{
  content:""; position:absolute; left:0; right:0; top:34px; height:5px;
  background:repeating-linear-gradient(90deg,#fff4d2 0 26px,transparent 26px 56px);
  opacity:.9;
}
.ground-front{
  position:absolute; left:0; bottom:0; width:100%; height:44px;
  /* 末端也必须走变量：写死颜色会让路基在深夜仍是一片鲜绿，与上方的暗草皮断开 */
  background:linear-gradient(180deg,var(--grass-front) 0%,var(--grass-front-b,#41a038) 100%);
  box-shadow:0 -3px 0 rgba(255,255,255,.18) inset;
}

/* ---------------- 建筑 ---------------- */
#buildings{ position:absolute; inset:0; }
.building{
  position:absolute;
  bottom:var(--build-bottom);
  height:0;
}
.b-art{
  position:absolute; left:0; bottom:0; width:100%; height:100%;
  filter:drop-shadow(0 8px 10px rgba(31,64,92,.13));
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.b-art svg{ display:block; width:100%; height:auto; }

.b-plate{
  position:absolute; left:50%; bottom:calc(100% + 20px);
  transform:translateX(-50%);
  display:flex; align-items:center; gap:6px;
  padding:7px 16px 8px;
  background:#fff;
  border:3.5px solid var(--bc,#2f6fb5);
  border-radius:14px;
  box-shadow:0 4px 0 rgba(31,64,92,.16);
  font-size:17px; font-weight:800; letter-spacing:.5px;
  white-space:nowrap;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
}
.b-plate::before{
  content:""; position:absolute; left:50%; bottom:-20px; transform:translateX(-50%);
  width:7px; height:20px; background:var(--bc,#2f6fb5); border-radius:0 0 4px 4px;
  opacity:.85;
}
.b-plate .dot{
  width:9px; height:9px; border-radius:50%; background:var(--bc,#2f6fb5);
}
/* 整条学习路径走完的建筑 */
.building.done .b-plate::after{
  content:"已掌握"; margin-left:2px; padding:2px 8px; border-radius:20px;
  background:#2f9e63; color:#fff; font-size:10.5px; font-weight:800; letter-spacing:0;
}
.building.done .b-plate .dot{ background:#2f9e63; }
.building.active .b-plate{
  transform:translateX(-50%) scale(1.12);
  box-shadow:0 6px 0 rgba(31,64,92,.16), 0 0 0 8px rgba(255,255,255,.55);
}
.building.active .b-art{ transform:translateY(-6px); }

/* ---------------- 装饰 ---------------- */
.decor{ position:absolute; inset:0; }
.decor-item{ position:absolute; bottom:var(--build-bottom); }

/* ---------------- 角色 ---------------- */
.hero{
  position:absolute;
  bottom:var(--feet-bottom);
  left:0;
  width:82px; height:124px;
  z-index:60;
  will-change:transform;
  filter:var(--filt-hero,none);
}
.hero-shadow{
  position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
  width:62px; height:16px; border-radius:50%;
  background:rgba(40,80,40,.22);
  filter:blur(1px);
}
.hero-body{ position:absolute; inset:0; transform-origin:50% 100%; }
.hero-body.walking{ animation:heroBob .42s ease-in-out infinite; }
@keyframes heroBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3.5px) } }

/* ---------------- 前景 ---------------- */
.layer-front{ z-index:70; filter:var(--filt-front,none); }
.front-inner{ position:absolute; bottom:0; left:0; height:70px; }

/* ---------------- HUD ---------------- */
.hud{ position:fixed; z-index:200; pointer-events:none; }
.hud-top{
  top:0; left:0; right:0;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:16px 22px;
  gap:14px;
}
.brand{
  display:flex; align-items:center; gap:11px;
  background:rgba(255,255,255,.9);
  border:3px solid #fff;
  border-radius:16px;
  padding:8px 16px 8px 8px;
  box-shadow:0 5px 14px rgba(24,60,92,.16);
  backdrop-filter:blur(4px);
}
.brand-mark{
  background:var(--ceec); color:#fff;
  font-family:"Arial Black",Arial,sans-serif; font-weight:900; font-size:14px;
  letter-spacing:.5px;
  padding:8px 9px; border-radius:10px;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-text strong{ font-size:17px; letter-spacing:1px; }
.brand-text span{ font-size:11px; color:var(--ink-soft); letter-spacing:.4px; }

.hint-keys{
  display:flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.88);
  border-radius:14px; padding:9px 15px;
  font-size:13px; font-weight:700; color:var(--ink-soft);
  box-shadow:0 4px 12px rgba(24,60,92,.13);
}
.key{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:24px; padding:0 6px;
  background:#fff; border:2.5px solid #b9cddd; border-bottom-width:4px;
  border-radius:7px; font-size:13px; color:var(--ink);
}
.key-wide{ min-width:60px; font-size:11px; letter-spacing:.5px; }
.dot-sep{ opacity:.4; }

/* 进入提示气泡 */
.enter-tip{
  position:fixed; z-index:210;
  left:50%; bottom:34px; transform:translate(-50%,26px);
  display:flex; align-items:center; gap:12px;
  padding:12px 20px;
  background:#fff; border-radius:16px;
  border:3.5px solid var(--tc,#2f6fb5);
  box-shadow:0 10px 24px rgba(24,60,92,.22);
  opacity:0; visibility:hidden;
  transition:opacity .2s, transform .28s cubic-bezier(.34,1.56,.64,1), visibility .2s;
}
.enter-tip.show{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.enter-tip::after{
  content:""; position:absolute; left:50%; bottom:-11px; transform:translateX(-50%) rotate(45deg);
  width:16px; height:16px; background:#fff;
  border-right:3.5px solid var(--tc,#2f6fb5); border-bottom:3.5px solid var(--tc,#2f6fb5);
}
.tip-name{ font-size:16px; font-weight:800; color:var(--tc,#2f6fb5); }
.tip-prog{
  font-size:11.5px; font-weight:800; color:#2f9e63;
  background:#e9f7f0; padding:4px 10px; border-radius:20px; white-space:nowrap;
}
.tip-prog:empty{ display:none; }
.tip-key{
  font-size:12px; font-weight:800; color:#fff; background:var(--tc,#2f6fb5);
  padding:5px 11px; border-radius:8px; letter-spacing:.5px;
  animation:tipPulse 1.2s ease-in-out infinite;
}
@keyframes tipPulse{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-2px) } }

/* 小地图 */
.minimap{
  position:fixed; z-index:200; left:50%; transform:translateX(-50%);
  top:20px; width:min(460px,38vw);
}
.mm-track{
  position:relative; height:9px; border-radius:6px;
  background:rgba(255,255,255,.6);
  box-shadow:0 2px 8px rgba(24,60,92,.14), 0 0 0 3px rgba(255,255,255,.45);
}
.mm-fill{
  position:absolute; left:0; top:0; bottom:0; width:0;
  border-radius:6px; background:linear-gradient(90deg,#5fa8e8,var(--ceec));
}
.mm-dots{ position:absolute; inset:0; }
.mm-dot{
  position:absolute; top:50%; width:13px; height:13px; margin:-6.5px 0 0 -6.5px;
  border-radius:50%; background:#fff; border:2.5px solid var(--dc,#2f6fb5);
  transition:transform .2s;
}
.mm-dot.on{ transform:scale(1.45); background:var(--dc,#2f6fb5); }
.mm-dot.done{ background:#2f9e63; border-color:#2f9e63; }
.mm-dot.done.on{ transform:scale(1.45); background:#2f9e63; }
.mm-me{
  position:absolute; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px;
  border-radius:50%; background:#ffc93c; border:3px solid #fff;
  box-shadow:0 2px 6px rgba(24,60,92,.3);
}
.mm-legend{
  margin:9px auto 0; width:fit-content; max-width:100%;
  padding:4px 14px; border-radius:20px;
  background:rgba(255,255,255,.85);
  box-shadow:0 2px 8px rgba(24,60,92,.1);
  font-size:12px; font-weight:700; color:#2c4a63;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 触屏方向键 */
.touch-pad{
  position:fixed; z-index:200; right:20px; bottom:24px;
  display:none; gap:10px;
}
.tp-btn{
  width:62px; height:56px; border:none; border-radius:14px;
  background:rgba(255,255,255,.92); color:var(--ink);
  font-size:20px; font-weight:800;
  box-shadow:0 4px 0 rgba(24,60,92,.18);
}
.tp-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(24,60,92,.18); }
.tp-enter{ width:74px; font-size:15px; background:#ffc93c; }
@media (pointer:coarse){ .touch-pad{ display:flex; } .hint-keys{ display:none; } }

/* ---------------- 开始卡片 ---------------- */
.start-card{
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:center; justify-content:center;
  background:rgba(143,211,255,.55);
  backdrop-filter:blur(6px);
  transition:opacity .35s, visibility .35s;
}
.start-card.hide{ opacity:0; visibility:hidden; }
.sc-inner{
  width:min(430px,88vw);
  background:#fff; border-radius:26px;
  padding:34px 32px 30px;
  text-align:center;
  box-shadow:0 22px 50px rgba(20,55,90,.28);
  border:5px solid #fff;
  animation:pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop{ from{ transform:scale(.9); opacity:0 } to{ transform:scale(1); opacity:1 } }
.sc-badge{
  display:inline-block; background:var(--ceec); color:#fff;
  font-family:"Arial Black",Arial,sans-serif; font-weight:900;
  letter-spacing:1.5px; font-size:15px;
  padding:8px 16px; border-radius:11px; margin-bottom:16px;
}
.sc-inner h1{ font-size:27px; letter-spacing:2px; margin-bottom:12px; }
.sc-inner p{ font-size:14px; line-height:1.9; color:var(--ink-soft); margin-bottom:22px; }
.sc-inner p b{ color:var(--ceec); }
.sc-progress{
  margin:-6px 0 18px; padding:9px 14px; border-radius:12px;
  background:#eef6ff; border:1.5px dashed #b9d3f0;
  font-size:12.5px; font-weight:700; color:#2a5f96; line-height:1.7;
}
.sc-progress:empty{ display:none; }
.sc-btn{
  width:100%; border:none; cursor:pointer;
  background:var(--ceec-l); color:#fff;
  font-size:17px; font-weight:800; letter-spacing:2px;
  padding:14px 0; border-radius:15px;
  box-shadow:0 5px 0 var(--ceec-d);
  transition:transform .12s, box-shadow .12s;
}
.sc-btn:active{ transform:translateY(4px); box-shadow:0 1px 0 var(--ceec-d); }

/* ---------------- 子页面弹层 ---------------- */
.modal{ position:fixed; inset:0; z-index:500; visibility:hidden; }
.modal.open{ visibility:visible; }
.modal-mask{
  position:absolute; inset:0;
  background:rgba(16,42,66,.5);
  backdrop-filter:blur(3px);
  opacity:0; transition:opacity .28s;
}
.modal.open .modal-mask{ opacity:1; }
.modal-panel{
  position:absolute; inset:5vh 6vw;
  background:#f4f8fd;
  border-radius:24px;
  box-shadow:0 30px 70px rgba(10,30,55,.4);
  overflow:hidden;
  transform:translateY(28px) scale(.97); opacity:0;
  transition:transform .32s cubic-bezier(.34,1.4,.64,1), opacity .28s;
  display:flex; flex-direction:column;
}
.modal.open .modal-panel{ transform:none; opacity:1; }
.modal-close{
  position:absolute; top:16px; right:18px; z-index:5;
  width:40px; height:40px; border:none; cursor:pointer;
  border-radius:50%; background:rgba(255,255,255,.9); color:var(--ink);
  font-size:26px; line-height:1;
  box-shadow:0 3px 10px rgba(10,30,55,.2);
  transition:transform .15s, background .15s;
}
.modal-close:hover{ background:#fff; transform:rotate(90deg); }
.modal-scroll{ flex:1; overflow-y:auto; overscroll-behavior:contain; }

/* ---- 子页面内容 ---- */
.sp-hero{
  padding:34px 42px 28px;
  color:#fff;
  background:var(--pc,#2f6fb5);
  position:relative; overflow:hidden;
}
.sp-hero::after{
  content:""; position:absolute; right:-60px; top:-70px;
  width:260px; height:260px; border-radius:50%;
  background:rgba(255,255,255,.12);
}
.sp-hero-top{ display:flex; align-items:center; gap:18px; position:relative; z-index:1; }
.sp-icon{
  width:76px; height:76px; flex:none;
  background:#fff; border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(0,0,0,.15);
}
.sp-icon svg{ width:52px; height:52px; }
.sp-title h2{ font-size:29px; letter-spacing:1.5px; line-height:1.2; }
.sp-title .en{
  font-size:12.5px; letter-spacing:1.4px; opacity:.85;
  text-transform:uppercase; margin-top:5px;
}
.sp-tagline{
  position:relative; z-index:1; margin-top:16px;
  font-size:15px; line-height:1.75; opacity:.96; max-width:760px;
}

.sp-body{ padding:26px 42px 46px; display:flex; flex-direction:column; gap:26px; }

/* ---------- 快速定位导航条（吸顶） ---------- */
.sp-nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:8px;
  margin:-6px -12px 4px; padding:10px 12px;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-radius:14px;
  overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap;
  scrollbar-width:none;
  box-shadow:0 4px 14px rgba(24,60,92,.07);
}
.sp-nav::-webkit-scrollbar{ display:none; }
.nav-lead{
  flex:0 0 auto; font-size:11.5px; font-weight:800; letter-spacing:.5px;
  color:var(--pc,#2f6fb5); padding-right:4px;
  border-right:2px solid #e6eef7; margin-right:4px; padding-left:4px;
}
.nav-chip{
  flex:0 0 auto; cursor:pointer;
  border:1.5px solid #e2ebf5; background:#f6f9fd;
  color:#4a5c6f; font-family:inherit; font-size:12.5px; font-weight:700;
  padding:6px 13px; border-radius:20px; white-space:nowrap;
  transition:background .16s, color .16s, border-color .16s, transform .16s;
}
.nav-chip:hover{
  background:var(--pc,#2f6fb5); border-color:var(--pc,#2f6fb5); color:#fff;
  transform:translateY(-1px);
}
.nav-chip:active{ transform:translateY(0); }
.nav-chip.on{
  background:var(--pc,#2f6fb5); border-color:var(--pc,#2f6fb5); color:#fff;
  box-shadow:0 3px 10px rgba(24,60,92,.18);
}

.sp-metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.metric{
  background:#fff; border-radius:16px; padding:16px 18px;
  border-left:6px solid var(--pc,#2f6fb5);
  box-shadow:0 4px 14px rgba(24,60,92,.07);
}
.metric .m-label{
  font-size:12.5px; color:var(--ink-soft); font-weight:700; line-height:1.4;
}
/* 与交互测算联动的指标 */
.metric.live{
  position:relative;
  background:linear-gradient(180deg,#ffffff,#f5fafd);
  box-shadow:0 4px 14px rgba(24,60,92,.09);
}
/* 徽标绝对定位，避免把指标名挤成两行 */
.metric.live .m-label{ padding-right:44px; }
/* 指标名最长 5 个汉字以内，保证任何列宽下都不换行 */
.metric .m-live{
  position:absolute; top:13px; right:13px;
  font-size:10px; font-weight:800; letter-spacing:.3px;
  padding:2px 6px; border-radius:20px;
  background:var(--pc,#2f6fb5); color:#fff;
}
/* 数字不折行；单位放不下时整体落到第二行，避免被 overflow 静默裁切 */
.metric .m-value{
  margin-top:8px;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 5px;
  font-size:26px; font-weight:800; color:var(--pc,#2f6fb5); line-height:1.15;
}
.metric .m-value .mv{ white-space:nowrap; }
.metric .m-value small{ font-size:13px; font-weight:700; opacity:.75; white-space:nowrap; }
.metric .m-empty{
  margin-top:10px; padding-top:9px; border-top:1.5px dashed #e6eef7;
  font-size:11.5px; line-height:1.6; color:#93a5b8;
}

.sp-sec h3{
  font-size:18px; letter-spacing:1px; margin-bottom:4px;
  display:flex; align-items:center; gap:10px;
}
.sp-sec h3::before{
  content:""; width:6px; height:20px; border-radius:4px; background:var(--pc,#2f6fb5);
}
.sp-sec .sec-hint{ font-size:12.5px; color:#93a5b8; margin:0 0 14px 16px; }

/* ---------- 交互测算面板 ---------- */
.calc{
  background:linear-gradient(180deg,#f7fafd,#eef4fb);
  border:2px solid #dbe6f3; border-radius:18px; padding:20px 22px;
}
.calc-head h4{ font-size:16px; font-weight:800; color:var(--ink); letter-spacing:.5px; }
.calc-head p{
  margin-top:7px; font-size:12.5px; line-height:1.8; color:#6d8098;
  max-width:820px;
}
.calc-head p b{ color:var(--pc,#2f6fb5); }

.calc-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:18px; margin-top:16px;
}
.calc-in{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:10px 16px; align-content:start;
}
.cf{ display:block; }
.cf .cf-l{ font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.cf .cf-v{
  float:right; display:flex; align-items:baseline;
  font-size:12.5px; font-weight:800; color:var(--pc,#2f6fb5);
}
.cf .cf-v i{ font-style:normal; font-weight:600; font-size:11px; opacity:.7; margin-left:3px; }
/* 读数即输入框：静止时看起来就是个数字，点一下进入编辑 */
.cf .cf-n{
  width:5ch; min-width:3.2ch; padding:0 3px; margin:0;
  font:inherit; font-weight:800; color:inherit;
  background:transparent; border:1px solid transparent; border-radius:5px;
  text-align:right; cursor:text;
  transition:background .15s, border-color .15s, box-shadow .15s;
}
.cf .cf-n::-webkit-outer-spin-button,
.cf .cf-n::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.cf .cf-n:hover{ border-color:#c9dcee; background:#fff; }
.cf .cf-n:focus{
  outline:none; background:#fff;
  border-color:var(--pc,#2f6fb5);
  box-shadow:0 0 0 3px rgba(47,111,181,.13);
}
/* 输入越界被自动夹紧时的瞬时提示 */
.cf .cf-n.bump{ animation:numBump .5s ease; }
@keyframes numBump{
  0%,100%{ box-shadow:0 0 0 3px rgba(47,111,181,.13); }
  30%   { box-shadow:0 0 0 4px rgba(224,124,84,.45); }
}
.cf input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:5px; margin:8px 0 0; border-radius:4px;
  background:#d5e2f0; outline:none; cursor:pointer;
}
.cf input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:17px; height:17px; border-radius:50%;
  background:var(--pc,#2f6fb5); border:3px solid #fff;
  box-shadow:0 2px 6px rgba(24,60,92,.28); cursor:pointer;
}
.cf input[type=range]::-moz-range-thumb{
  width:17px; height:17px; border-radius:50%;
  background:var(--pc,#2f6fb5); border:3px solid #fff;
  box-shadow:0 2px 6px rgba(24,60,92,.28); cursor:pointer;
}

.calc-out{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(135px,1fr)); gap:10px;
  align-content:start;
}
.co{
  background:#fff; border-radius:13px; padding:11px 13px;
  border:2px solid #e6eef7;
}
.co.good{ border-color:#b7e3c6; background:#f4fcf7; }
.co.bad{ border-color:#f3cfc9; background:#fdf6f5; }
.co .co-l{ font-size:11.5px; font-weight:700; color:var(--ink-soft); line-height:1.4; }
.co .co-v{
  margin-top:6px; font-size:20px; font-weight:800;
  color:var(--pc,#2f6fb5); line-height:1.05; word-break:break-all;
}
.co.good .co-v{ color:#2f9e63; }
.co.bad .co-v{ color:#d4644f; }
/* 单位单独一行，避免 "tCO₂/MWh" 这类长单位被裁切 */
.co .co-v small{
  display:block; margin-top:3px;
  font-size:10.5px; font-weight:700; opacity:.72; letter-spacing:.2px;
}

.calc-fx{
  margin-top:16px; padding:14px 16px; border-radius:13px;
  background:#fff; border:2px solid #e6eef7;
}
.calc-fx .fx-main{
  font-family:"SFMono-Regular",Consolas,Menlo,monospace;
  font-size:13px; line-height:1.9; color:#34506c; word-break:break-word;
}
.calc-fx .fx-main b{ color:var(--pc,#2f6fb5); font-size:14.5px; }
.calc-fx .fx-n{
  margin-top:7px; padding-top:7px; border-top:1.5px dashed #e6eef7;
  font-family:"SFMono-Regular",Consolas,Menlo,monospace;
  font-size:12px; line-height:1.8; color:#6d8098; word-break:break-word;
}
.calc-fx .fx-n b{ color:var(--pc,#2f6fb5); }

.calc-caveat{
  margin-top:12px; font-size:11.5px; line-height:1.85; color:#8b9cb0;
  background:#fff; border-radius:12px; padding:12px 15px;
  border-left:5px solid #cfdceb; text-align:justify;
}

/* ---------- 多场景计算器：标签切换 ---------- */
.calc-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.ctab{
  font:inherit; font-size:13px; font-weight:800; letter-spacing:.3px; cursor:pointer;
  padding:8px 16px; border-radius:20px;
  border:2px solid #dbe6f3; background:#fff; color:#7a8ca1;
  transition:color .16s, border-color .16s, background .16s, box-shadow .16s;
}
.ctab:hover{ color:var(--pc,#2f6fb5); border-color:#bcd3ea; }
.ctab.on{
  color:#fff; background:var(--pc,#2f6fb5); border-color:var(--pc,#2f6fb5);
  box-shadow:0 3px 10px rgba(24,60,92,.18);
}
/* 多场景时每个场景自带小标题，单场景不显示（避免与 calc-head 重复） */
.calc-sub{ margin-top:16px; }
.calc-sub h5{ font-size:14.5px; font-weight:800; color:var(--ink); letter-spacing:.4px; }
.calc-sub p{ margin-top:6px; font-size:12.5px; line-height:1.8; color:#6d8098; max-width:820px; }
.calc-sub p b{ color:var(--pc,#2f6fb5); }

/* ---------- 曲线图（价格预测仿真） ---------- */
.calc-chart{
  margin-top:16px; padding:14px 16px 10px; border-radius:13px;
  background:#fff; border:2px solid #e6eef7;
}
.fc-svg{ display:block; width:100%; height:auto; }
.fc-legend{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px;
  margin-top:8px; padding-top:9px; border-top:1.5px dashed #e6eef7;
  font-size:11.5px; font-weight:700; color:#6d8098;
}
.fc-legend span{ display:inline-flex; align-items:center; gap:6px; }
.fc-legend i{
  display:inline-block; width:22px; height:0;
  border-top-width:3px; border-top-style:solid;
}
.fc-legend .lg-da{ border-color:#e0902f; }
.fc-legend .lg-fc{ border-color:#2f6fb5; border-top-style:dashed; }
.fc-legend .lg-rt{ border-color:#2fb6a0; border-top-width:2px; }
.fc-legend .lg-note{ margin-left:auto; font-weight:600; color:#9aabbe; }

@media (max-width:820px){
  .calc-grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .fc-legend .lg-note{ margin-left:0; width:100%; }
}

/* 同行卡片等高（stretch），卡内用 flex 列布局 + kc-k 自动吸底填充余量，
   这样既保持外观整齐，又不会在长内容卡片里留下突兀的白板 */
.card-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(252px,1fr));
  gap:14px; align-items:stretch;
}
.k-card{
  display:flex; flex-direction:column;
  min-height:158px;
  background:#fff; border-radius:16px; padding:16px 17px;
  border:2px solid #e6eef7;
  box-shadow:0 3px 10px rgba(24,60,92,.05);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.k-card:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(24,60,92,.11); border-color:var(--pc,#2f6fb5); }
.k-card .kc-title{ font-size:14.5px; font-weight:800; line-height:1.5; color:var(--ink); }
.k-card .kc-body{
  margin-top:10px; font-size:13px; color:#4a5c6f; line-height:1.8;
  border-top:1.5px dashed #e6eef7; padding-top:10px;
  text-align:justify;
}
.k-card .kc-body.empty{ font-size:12.5px; color:#9fb0c2; text-align:left; }

/* 卡片：公式块 */
.k-card .kc-f{
  margin-top:10px; padding:9px 12px; border-radius:10px;
  background:#f4f8fd; border-left:4px solid var(--pc,#2f6fb5);
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  font-size:12.5px; line-height:1.85; color:#34506c;
  word-break:break-word;
}
/* 卡片：要点列表 */
.k-card .kc-ul{
  margin:10px 0 0; padding:0 0 0 2px; list-style:none;
}
.k-card .kc-ul li{
  position:relative; padding-left:15px; margin-top:6px;
  font-size:12.5px; line-height:1.75; color:#4a5c6f; text-align:justify;
}
.k-card .kc-ul li::before{
  content:""; position:absolute; left:0; top:8px;
  width:6px; height:6px; border-radius:50%; background:var(--pc,#2f6fb5); opacity:.55;
}
/* 卡片：关键提示 */
/* 弹性占位：吸收行内多余高度，把「要点」提示条顶到卡片底部 */
.k-card .kc-sp{ flex:1 1 auto; min-height:0; }
.k-card .kc-k{
  margin-top:10px; padding:9px 12px; border-radius:10px;
  background:#fff8e8; border:1.5px dashed #f0c96a;
  font-size:12.5px; line-height:1.75; color:#7a5a1c; text-align:justify;
}
.k-card .kc-k span{
  display:inline-block; margin-right:6px; padding:1px 7px; border-radius:6px;
  background:#f5c451; color:#5a3f00; font-size:11px; font-weight:800; letter-spacing:.5px;
}

/* ---------- 建议学习路径 ---------- */
.rm-head{ display:flex; align-items:center; gap:13px; flex-wrap:wrap; margin:0 0 14px; }
.rm-bar{
  flex:1 1 140px; min-width:120px; height:10px; border-radius:6px;
  background:#eef3f9; overflow:hidden;
}
.rm-fill{
  height:100%; border-radius:6px;
  background:linear-gradient(90deg,#63c79c,#2f9e63);
  transition:width .38s cubic-bezier(.34,1.3,.64,1);
}
.rm-num{ font-size:12.5px; font-weight:800; color:#2f9e63; white-space:nowrap; }
.rm-num b{ font-size:17px; }
.rm-reset{
  -webkit-appearance:none; appearance:none; font:inherit; cursor:pointer;
  font-size:11.5px; font-weight:800; white-space:nowrap;
  padding:5px 12px; border-radius:20px; border:2px solid #e6eef7;
  background:#f7fafd; color:#8b9db0;
  transition:color .16s, border-color .16s, background .16s;
}
.rm-reset:hover{ background:#fff4e2; border-color:#f0c96a; color:#a5761a; }
.rm-warn{
  margin-top:13px; padding:9px 13px; border-radius:11px;
  background:#fff8e8; border:1.5px dashed #f0c96a;
  font-size:12px; line-height:1.7; color:#8a6414;
}

.steps{ display:flex; flex-direction:column; gap:10px; }
.step{
  -webkit-appearance:none; appearance:none; font:inherit; text-align:left;
  display:flex; align-items:center; gap:14px; width:100%; cursor:pointer;
  background:#fff; border-radius:14px; padding:13px 18px;
  border:2px solid #e6eef7;
  transition:border-color .18s, background .18s, box-shadow .18s, transform .12s;
}
.step:disabled{ cursor:default; }
.step .s-n{
  width:28px; height:28px; flex:none; border-radius:50%;
  background:var(--pc,#2f6fb5); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800;
}
.step .s-t{ font-size:14.5px; font-weight:700; line-height:1.5; }
.step .s-state{
  margin-left:auto; flex:none;
  font-size:11.5px; font-weight:800; color:#9fb0c2;
  background:#f1f6fc; padding:4px 10px; border-radius:20px;
}
.step .s-state i{ font-style:normal; }
.step .s-state .s-b{ display:none; }

/* 当前应学的一条 */
.step.now{
  border-color:var(--pc,#2f6fb5);
  background:linear-gradient(180deg,#ffffff,#f4f9ff);
  box-shadow:0 4px 14px rgba(24,60,92,.10);
}
.step.now .s-state{ background:var(--pc,#2f6fb5); color:#fff; }
.step.now:hover{ transform:translateY(-1px); box-shadow:0 7px 18px rgba(24,60,92,.15); }
.step.now:active{ transform:translateY(0); }

/* 已掌握 */
.step.done{ background:#f4fbf6; border-color:#cdebd8; }
.step.done .s-n{ background:#2f9e63; }
.step.done .s-t{ color:#2c7d52; }
.step.done .s-state{ background:#e2f4ea; color:#2f9e63; }
/* 末条可撤销 */
.step.done.undo{ cursor:pointer; }
.step.done.undo:hover{ border-color:#f0c96a; background:#fffaf0; }
.step.done.undo:hover .s-state{ background:#fdf1d8; color:#a5761a; }
.step.done.undo:hover .s-a{ display:none; }
.step.done.undo:hover .s-b{ display:inline; }

/* 未完成（灰态，不可点选，前序未完成时保持此状态） */
.step.lock{ background:#f7f9fc; border-color:#edf2f8; }
.step.lock .s-n{ background:#e5ebf3; color:#a4b3c3; }
.step.lock .s-t{ color:#a9b8c8; }
.step.lock .s-state{ background:#eef3f9; color:#b0bfcf; }

@keyframes stepPop{ 0%{transform:scale(1)} 42%{transform:scale(1.018)} 100%{transform:scale(1)} }
.step.pop{ animation:stepPop .34s ease; }

.qa{ display:flex; flex-direction:column; gap:11px; }
.qa-item{
  background:#fff; border-radius:14px; border:2px solid #e6eef7; overflow:hidden;
}
.qa-q{
  padding:14px 18px; font-size:14.5px; font-weight:700;
  display:flex; align-items:center; gap:11px; cursor:pointer;
}
.qa-q .q-badge{
  width:24px; height:24px; flex:none; border-radius:7px;
  background:var(--pc,#2f6fb5); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;
}
.qa-q .q-arrow{ margin-left:auto; font-size:12px; color:#9fb0c2; transition:transform .2s; }
.qa-item.open .q-arrow{ transform:rotate(180deg); }
.qa-a{
  display:none; padding:0 18px 15px 53px;
  font-size:13.5px; line-height:1.8; color:#4a5c6f;
  border-top:1.5px dashed #eef4fa; padding-top:12px;
}
.qa-item.open .qa-a{ display:block; }

.sp-related{ display:flex; flex-wrap:wrap; gap:11px; }
.rel-btn{
  border:none; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  background:#fff; border:2px solid #e6eef7; border-radius:14px;
  padding:10px 16px 10px 11px;
  font-size:13.5px; font-weight:700; color:var(--ink);
  transition:transform .15s, border-color .15s;
}
.rel-btn:hover{ transform:translateY(-2px); border-color:var(--rc,#2f6fb5); }
.rel-btn .rb-dot{ width:11px; height:11px; border-radius:50%; background:var(--rc,#2f6fb5); }

.sp-footer-note{
  font-size:12.5px; color:#7d8fa3; line-height:1.9;
  background:#eef4fb; border-radius:14px; padding:16px 20px;
  border-left:5px solid var(--ceec-l);
}
.sp-footer-note b{ color:#41566b; }
.sp-footer-note code{
  display:inline-block;
  background:#fff; border:1px solid #d7e3f0; border-radius:5px;
  padding:1px 7px; margin:0 1px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px; color:var(--ceec);
}

/* 子页面底部备案号 */
.sp-beian{
  margin-top:18px; text-align:center;
  font-size:12px; color:#9aa9ba;
}
.sp-beian a{ color:#7d8fa3; text-decoration:none; }
.sp-beian a:hover{ color:var(--ceec); text-decoration:underline; }

/* 站点固定页脚备案号（主页常驻） */
.site-beian{
  position:fixed; z-index:150; left:50%; transform:translateX(-50%);
  bottom:8px;
  font-size:12px; line-height:1; color:#2c4a63;
  background:rgba(255,255,255,.78); backdrop-filter:blur(4px);
  padding:6px 12px; border-radius:20px;
  box-shadow:0 2px 8px rgba(24,60,92,.12);
}
.site-beian a{ color:inherit; text-decoration:none; }
.site-beian a:hover{ color:var(--ceec); text-decoration:underline; }
@media (pointer:coarse){ .site-beian{ bottom:6px; font-size:11px; } }

@media (max-width:820px){
  .modal-panel{ inset:0; border-radius:0; }
  .sp-hero{ padding:26px 20px 22px; }
  .sp-body{ padding:20px 20px 40px; }
  .hud-top{ padding:12px 14px; }
  .brand-text span{ display:none; }
}

/* ---------------- 场内动画 ---------------- */
@keyframes spin{ to{ transform:rotate(360deg) } }
.anim-blade{ animation:spin 4.6s linear infinite; }
.anim-blade-slow{ animation-duration:6.4s; }
@keyframes steamUp{
  0%{ transform:translateY(0) scale(.85); opacity:0 }
  25%{ opacity:.95 }
  100%{ transform:translateY(-48px) scale(1.25); opacity:0 }
}
.anim-steam{ animation:steamUp 4.2s ease-in-out infinite; transform-origin:120px 95px; }
.anim-steam-slow{ animation:steamUp 5.4s ease-in-out infinite .8s; transform-origin:228px 30px; }
@keyframes sunPulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.07) } }
.anim-sun{ animation:sunPulse 3.4s ease-in-out infinite; transform-origin:316px 42px; }
@keyframes plugMove{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
.anim-plug{ animation:plugMove 2.4s ease-in-out infinite; }
@keyframes flexMove{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }
.anim-flex{ animation:flexMove 2s ease-in-out infinite; }
@keyframes dashMove{ to{ stroke-dashoffset:-60 } }
.anim-dash{ animation:dashMove 2.6s linear infinite; }
@keyframes pulseRing{
  0%{ transform:scale(.9); opacity:.5 }
  100%{ transform:scale(1.25); opacity:0 }
}
.anim-pulse{ animation:pulseRing 2.4s ease-out infinite; transform-origin:180px 118px; }
@keyframes flowMove{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }
.anim-flow{ animation:flowMove 1.8s ease-in-out infinite; }
@keyframes tradeMove{ 0%,100%{ opacity:.45 } 50%{ opacity:1 } }
.anim-trade{ animation:tradeMove 2.2s ease-in-out infinite; }
@keyframes carbonMove{ 0%{ transform:translateX(0); opacity:.4 } 50%{ opacity:1 } 100%{ transform:translateX(8px); opacity:.4 } }
.anim-carbon{ animation:carbonMove 2.2s ease-in-out infinite; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; animation-iteration-count:1 !important; }
}

/* ===========================================================
 *  昼夜循环 · 星空 / 日月 / 路灯 / 主角探照灯
 * =========================================================== */

/* ---------------- 星空 ---------------- */
.stars{ position:absolute; inset:0; opacity:var(--star-op,0); transition:opacity .6s linear; }
.stars i{
  position:absolute; display:block; border-radius:50%;
  background:#fff; box-shadow:0 0 4px rgba(255,255,255,.85);
  animation:twinkle 3.4s ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{ opacity:.25; transform:scale(.85) } 50%{ opacity:1; transform:scale(1.15) } }

/* ---------------- 日月 ---------------- */
.celestial{
  position:absolute; left:50%; top:20%;
  width:96px; height:96px; margin:-48px 0 0 -48px;
  transition:left .4s linear, top .4s linear, opacity .5s linear;
  pointer-events:none;
}
.cb-core{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 38% 36%, #fff 0%, var(--cel-core,#ffe9a3) 46%, var(--cel-core,#ffd45e) 100%);
  box-shadow:0 0 0 14px var(--cel-glow,rgba(255,214,120,.55)), 0 0 60px 26px var(--cel-glow,rgba(255,214,120,.35));
  transition:background .6s linear, box-shadow .6s linear;
}
.celestial.moon{ width:62px; height:62px; margin:-31px 0 0 -31px; }
.celestial.moon .cb-core::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 62% 30%, rgba(150,170,205,.42) 0 9px, transparent 10px),
    radial-gradient(circle at 40% 64%, rgba(150,170,205,.36) 0 7px, transparent 8px),
    radial-gradient(circle at 70% 70%, rgba(150,170,205,.3) 0 5px, transparent 6px);
}

/* ---------------- 时段指示 ---------------- */
.day-chip{
  position:fixed; z-index:200; left:22px; bottom:22px;
  padding:7px 14px; border-radius:20px;
  background:rgba(255,255,255,.9);
  box-shadow:0 4px 12px rgba(24,60,92,.14);
  font-size:12px; font-weight:800; letter-spacing:.6px; color:#2c4a63;
  white-space:nowrap; user-select:none;
}
.day-chip.night{
  background:rgba(16,26,52,.82); color:#9fe8ff;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
@media (max-width:820px){
  .day-chip{ left:14px; bottom:14px; font-size:11.5px; padding:6px 11px; }
}
@media (pointer:coarse){ .day-chip{ bottom:96px; } }

/* ---------------- 夜间路灯 ---------------- */
/* 光晕 SVG 已自带径向渐变，这里只按夜色调透明度 */
.decor .lamp-halo{ opacity:var(--bulb,0); transition:opacity .6s linear; }

/* ---------------- 头盔探照灯（Shift 开关） ---------------- */
.hero-beam{
  position:absolute;
  /* 锥顶对齐 SVG 里的灯芯 (69.2, 20.2)。
     换算：x = 69.2 × (82/90) = 63.1；锥顶落在光束高度的 51% 处，
     故 top = 20.2 × (124/136) − 130 × 0.51 = −47.9
     改灯位必须同步改这两行，否则光锥会从别的地方射出来 */
  left:63.1px; top:-47.9px;
  width:520px; height:130px;
  clip-path:polygon(0 46%, 100% 2%, 100% 100%, 0 56%);
  background:linear-gradient(90deg,
    rgba(255,247,214,.92) 0%,
    rgba(255,238,168,.46) 26%,
    rgba(255,232,142,.16) 58%,
    rgba(255,232,142,0) 100%);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease;
  transform-origin:0 50%;
}
.hero-beam.on{
  opacity:1;
  animation:beamFlicker 4.2s ease-in-out infinite;
}
@keyframes beamFlicker{
  0%,100%{ opacity:.96 }
  43%{ opacity:.86 }
  47%{ opacity:1 }
  72%{ opacity:.9 }
}
.hero.lamp-on #pLampCore{
  opacity:1;
  filter:drop-shadow(0 0 6px rgba(255,240,190,.95));
}
/* 常暗时给灯体一点金属反光，避免关灯状态下像个黑块 */
#pLamp{ transition:transform .2s ease; }
.hero.lamp-on #pLamp{ transform:translate(0,-.6px); }

/* 触屏灯光按钮 */
.tp-lamp{ background:rgba(255,255,255,.92); font-size:19px; }
.tp-lamp.on{ background:#ffd45e; box-shadow:0 4px 0 rgba(24,60,92,.18), 0 0 0 3px rgba(255,212,94,.45); }

/* 建筑描绘：关于本站的天线脉冲 */
@keyframes pulseRingAbout{
  0%{ transform:scale(.7); opacity:.65 }
  100%{ transform:scale(1.5); opacity:0 }
}
.anim-pulse-about{ animation:pulseRingAbout 2.6s ease-out infinite; transform-origin:180px 30px; }

/* ===========================================================
 *  关于本站 · 赛博朋克版式（与七个知识板块完全不同的皮肤）
 *  通过 .modal.cyber 整体换肤，不污染常规板块的任何样式
 * =========================================================== */
.modal.cyber .modal-panel{
  background:#070b16;
  box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(34,211,238,.18);
}
.modal.cyber .modal-close{
  background:rgba(20,32,56,.9); color:#7fe6ff;
  box-shadow:0 0 0 1px rgba(34,211,238,.35);
}
.modal.cyber .modal-close:hover{ background:#0e2233; color:#fff; }
.modal.cyber .modal-scroll{
  color:#c8d5e6;
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}

.cy{ position:relative; --cy-c:#22d3ee; --cy-m:#f472b6; --cy-p:#a78bfa; --cy-dim:#7d8ea6; }
/* 网格底纹 + 扫描线：两层叠加，纯装饰 */
.cy::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(rgba(34,211,238,.045) 1px, transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg, rgba(34,211,238,.045) 1px, transparent 1px) 0 0/34px 100%;
}
.cy::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  opacity:.5;
}
.cy > *{ position:relative; z-index:1; }

/* ---------------- Hero ---------------- */
.cy-hero{
  position:relative; overflow:hidden;
  padding:44px 46px 34px;
  background:
    radial-gradient(120% 140% at 88% -20%, rgba(167,139,250,.28) 0%, transparent 55%),
    radial-gradient(90% 120% at 4% 110%, rgba(34,211,238,.20) 0%, transparent 58%),
    linear-gradient(180deg,#0a1122 0%,#070b16 100%);
  border-bottom:1px solid rgba(34,211,238,.22);
}
.cy-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--cy-c), var(--cy-m), transparent);
  opacity:.75;
}
.cy-code{
  display:inline-block;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px; font-weight:700; letter-spacing:2px;
  color:var(--cy-c);
  padding:5px 12px; border-radius:4px;
  border:1px solid rgba(34,211,238,.35);
  background:rgba(34,211,238,.07);
}
/* 标题用双层错位做 glitch；data-text 与内容一致时叠影才对齐 */
.cy-title{
  position:relative; margin:16px 0 6px;
  font-size:44px; font-weight:900; letter-spacing:5px; color:#eaf6ff;
  text-shadow:0 0 22px rgba(34,211,238,.35);
}
.cy-title::before,
.cy-title::after{
  content:attr(data-text); position:absolute; left:0; top:0; width:100%;
  overflow:hidden; pointer-events:none;
}
.cy-title::before{ color:var(--cy-m); transform:translate(-2px,1px); opacity:.55; animation:glitchA 5.5s steps(1) infinite; }
.cy-title::after { color:var(--cy-c); transform:translate(2px,-1px); opacity:.5;  animation:glitchB 6.7s steps(1) infinite; }
@keyframes glitchA{ 0%,92%,100%{ clip-path:inset(0 0 100% 0) } 93%{ clip-path:inset(12% 0 62% 0) } 96%{ clip-path:inset(48% 0 22% 0) } }
@keyframes glitchB{ 0%,90%,100%{ clip-path:inset(0 0 100% 0) } 91%{ clip-path:inset(60% 0 12% 0) } 95%{ clip-path:inset(24% 0 56% 0) } }

.cy-sub{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px; letter-spacing:2.6px; color:var(--cy-dim);
  text-transform:uppercase;
}
.cy-lead{
  margin-top:18px; max-width:820px;
  font-size:14.5px; line-height:1.95; color:#a9bcd2;
}
/* 启动日志（模拟终端） */
.cy-boot{
  margin-top:20px; padding:14px 18px; border-radius:8px;
  background:rgba(8,14,28,.72);
  border:1px solid rgba(34,211,238,.18);
  border-left:3px solid var(--cy-c);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px; line-height:2; color:#8fa6bf;
}
.cy-boot b{ color:var(--cy-c); font-weight:700; }
.cy-boot b.warn{ color:var(--cy-m); }
.cy-boot .cur{
  display:inline-block; width:8px; height:14px; margin-left:3px;
  background:var(--cy-c); vertical-align:-2px;
  animation:caret 1.05s step-end infinite;
}
@keyframes caret{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* ---------------- 统计条 ---------------- */
.cy-stats{
  margin-top:22px; display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
}
.cys{
  padding:13px 14px; border-radius:8px;
  background:linear-gradient(180deg, rgba(34,211,238,.07), rgba(34,211,238,.02));
  border:1px solid rgba(34,211,238,.2);
}
.cys b{
  display:block; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:27px; font-weight:800; line-height:1.1; color:var(--cy-c);
  text-shadow:0 0 16px rgba(34,211,238,.4);
}
.cys span{ display:block; margin-top:5px; font-size:11.5px; color:var(--cy-dim); letter-spacing:.4px; }

/* ---------------- 双栏主体 ---------------- */
.cy-wrap{
  display:grid; grid-template-columns:196px minmax(0,1fr); gap:26px;
  padding:30px 46px 46px;
}
.cy-index{
  position:sticky; top:0; align-self:start;
  display:flex; flex-direction:column; gap:2px;
  padding:4px 0 0;
}
.cyi-lead{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10.5px; letter-spacing:2.4px; color:#4d6076;
  padding:0 0 10px 2px;
}
.cyi{
  -webkit-appearance:none; appearance:none; text-align:left; cursor:pointer;
  background:none; border:none; border-left:2px solid rgba(34,211,238,.16);
  padding:8px 10px; margin:0;
  font:inherit; font-size:12.5px; font-weight:700; color:#6c819a;
  letter-spacing:.3px;
  transition:color .16s, border-color .16s, background .16s;
}
.cyi:hover{ color:#bfeaf7; border-left-color:rgba(34,211,238,.5); }
.cyi.on{
  color:#eaf6ff; border-left-color:var(--cy-c);
  background:linear-gradient(90deg, rgba(34,211,238,.14), transparent);
}
.cyi i{
  font-style:normal; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--cy-c); margin-right:7px; opacity:.85;
}

.cy-main{ display:flex; flex-direction:column; gap:34px; min-width:0; }
.cy-sec{ min-width:0; scroll-margin-top:14px; }
.cy-h{ display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.cy-h .cy-n{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px; font-weight:800; color:var(--cy-m); letter-spacing:1px;
}
.cy-h h3{
  font-size:19px; font-weight:800; letter-spacing:1.4px; color:#e6f2ff;
}
.cy-h::after{
  content:""; flex:1 1 auto; height:1px; margin-bottom:5px;
  background:linear-gradient(90deg, rgba(34,211,238,.42), transparent);
}
.cy-desc{ font-size:13px; line-height:1.9; color:#8fa4bb; margin:-4px 0 14px; }

/* ---------- 卡片（霓虹描边 + 角标） ---------- */
.cy-cards{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); }
.cyc{
  position:relative;
  padding:18px 18px 16px; border-radius:8px;
  background:linear-gradient(180deg, rgba(17,26,46,.9), rgba(11,17,32,.9));
  border:1px solid rgba(34,211,238,.16);
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
.cyc:hover{
  transform:translateY(-3px);
  border-color:rgba(34,211,238,.5);
  box-shadow:0 12px 26px rgba(0,0,0,.45);
}
/* 四角括号纯装饰 */
.cyc::before, .cyc::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none;
  border-color:var(--cy-c); border-style:solid; opacity:.6;
}
.cyc::before{ left:-1px; top:-1px; border-width:2px 0 0 2px; }
.cyc::after{ right:-1px; bottom:-1px; border-width:0 2px 2px 0; }
.cyc-t{ font-size:14.5px; font-weight:800; color:#dff0fb; letter-spacing:.4px; }
.cyc-b{ margin-top:10px; font-size:12.8px; line-height:1.9; color:#91a5bd; text-align:justify; }
.cyc-k{
  margin-top:12px; padding-top:10px; border-top:1px dashed rgba(34,211,238,.2);
  font-size:12px; line-height:1.75; color:var(--cy-c);
}
.cyc-k::before{
  content:"› "; color:var(--cy-m); font-weight:900;
}

/* 步骤条 */
.cy-steps{ display:flex; flex-direction:column; gap:12px; }
.cy-step{
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px;
  padding:15px 17px; border-radius:8px;
  background:rgba(12,19,35,.72);
  border:1px solid rgba(34,211,238,.14);
  border-left:3px solid var(--cy-p);
}
.cy-step .cy-sn{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:20px; font-weight:800; color:var(--cy-p); opacity:.8;
  line-height:1.2;
}
.cy-step h5{ font-size:14px; font-weight:800; color:#dff0fb; letter-spacing:.4px; }
.cy-step p{ margin-top:7px; font-size:12.8px; line-height:1.9; color:#8fa4bb; text-align:justify; }

/* ---------- 维护者档案（封存态） ---------- */
.cy-author{
  display:grid; grid-template-columns:104px minmax(0,1fr); gap:20px;
  padding:22px; border-radius:10px;
  background:
    repeating-linear-gradient(-45deg, rgba(244,114,182,.04) 0 12px, transparent 12px 24px),
    linear-gradient(180deg, rgba(20,12,26,.9), rgba(10,14,26,.9));
  border:1px solid rgba(244,114,182,.32);
}
.cy-av{
  width:104px; height:104px; border-radius:8px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:44px; font-weight:800; color:var(--cy-m);
  background:rgba(244,114,182,.08);
  border:1px dashed rgba(244,114,182,.5);
}
.cy-auth-state{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px; letter-spacing:1.4px; color:var(--cy-dim); margin-bottom:10px;
}
.cy-auth-state b{ color:var(--cy-m); }
.cy-auth-body p{ font-size:13px; line-height:1.95; color:#9aadc3; margin-top:8px; }
.cy-auth-slot{
  margin-top:14px; display:grid; gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.cy-auth-slot .sl{
  display:flex; align-items:center; gap:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11.5px;
}
.cy-auth-slot .sl > span{ color:#4f6478; letter-spacing:1px; flex:none; width:56px; }
/* 涂黑条：文本仍在 DOM 里（便于将来解封），视觉上被盖住 */
.cy-redact{
  flex:1 1 auto; min-width:0;
  color:transparent; user-select:none; -webkit-user-select:none;
  border-radius:3px; padding:3px 8px; overflow:hidden; white-space:nowrap;
  background:
    repeating-linear-gradient(-45deg, #131c2e 0 6px, #0d1524 6px 12px);
  box-shadow:inset 0 0 0 1px rgba(244,114,182,.22);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.cy-author.open{ border-color:rgba(34,211,238,.45); }
.cy-author.open .cy-av{ color:var(--cy-c); border-color:rgba(34,211,238,.5); background:rgba(34,211,238,.08); }

/* ---------- 版本记录 ---------- */
.cy-log{ display:flex; flex-direction:column; gap:0; }
.cy-log-row{
  display:grid; grid-template-columns:76px minmax(0,1fr); align-items:start;
  gap:0 12px; padding:11px 0;
  border-left:1px solid rgba(34,211,238,.2); margin-left:38px; padding-left:22px;
  position:relative;
}
.cy-log-row::before{
  content:""; position:absolute; left:-5px; top:17px;
  width:9px; height:9px; border-radius:50%;
  background:#0a1122; border:2px solid var(--cy-c);
}
.cy-log-row:first-child::before{ background:var(--cy-c); box-shadow:0 0 10px rgba(34,211,238,.8); }
.cy-log-v{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px; font-weight:800; color:var(--cy-c); letter-spacing:.6px;
}
.cy-log-d{ font-size:12.8px; line-height:1.85; color:#8fa4bb; }
.cy-log-row:last-child{ border-left-color:transparent; }

/* ---------- 免责 ---------- */
.cy-legal{
  padding:18px 20px; border-radius:8px;
  background:rgba(12,19,35,.8);
  border:1px solid rgba(34,211,238,.14);
  border-left:3px solid var(--cy-m);
  font-size:12.8px; line-height:2; color:#8fa4bb; text-align:justify;
}
.cy-foot{
  margin-top:8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px; letter-spacing:1.6px; color:#3f5266; text-align:center;
}
.cy-foot i{ font-style:normal; color:var(--cy-c); }
.cy-beian{
  margin-top:10px; text-align:center;
  font-size:12px; letter-spacing:.5px; color:#6f8499;
}
.cy-beian a{ color:#8fa4bb; text-decoration:none; }
.cy-beian a:hover{ color:var(--cy-c); text-decoration:underline; }

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .cy-wrap{ grid-template-columns:1fr; gap:18px; padding:24px 20px 40px; }
  .cy-index{
    position:sticky; top:0; flex-direction:row; gap:4px;
    overflow-x:auto; padding:10px 2px;
    background:rgba(7,11,22,.94);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(34,211,238,.18);
    scrollbar-width:none;
  }
  .cy-index::-webkit-scrollbar{ display:none; }
  .cyi-lead{ display:none; }
  .cyi{
    border-left:none; border-bottom:2px solid rgba(34,211,238,.16);
    white-space:nowrap; padding:7px 12px;
  }
  .cyi.on{ border-bottom-color:var(--cy-c); background:rgba(34,211,238,.1); }
  .cy-hero{ padding:32px 20px 26px; }
  .cy-title{ font-size:32px; letter-spacing:3px; }
  .cy-author{ grid-template-columns:1fr; }
  .cy-av{ width:78px; height:78px; font-size:34px; }
}
@media (prefers-reduced-motion:reduce){
  .cy-title::before, .cy-title::after, .cy-boot .cur, .stars i{ animation:none !important; }
}