/* ===========================================================
   Cyanstar:银河系
   设计体系：Dark Theme · Glassmorphism · Holographic
            · Sci-Fi HUD · Data-Dense · Grid · Multi-panel
   =========================================================== */

:root{
  --bg-0:#04051a;
  --bg-1:#0a0b26;
  --bg-2:#120f35;
  --ink:#0b0e28;

  --cyan:#45e6ff;
  --violet:#b06cff;
  --pink:#ff5f80;
  --amber:#ffd166;
  --paper:#eef3ff;
  --text:#dbe3ff;
  --muted:#8b95c8;
  --dim:#5d668f;

  --ok:#4dff9f;
  --warn:#ffd166;
  --err:#ff5f80;
  --idle:#5a6392;
  --busy:#45e6ff;

  --line:rgba(69,230,255,.28);
  --line-soft:rgba(69,230,255,.12);
  --glass-1:rgba(18,24,64,.62);
  --glass-2:rgba(8,11,34,.50);

  --font:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;

  --ease-out:cubic-bezier(.16,.84,.32,1);
  --r:14px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; overflow:hidden;
  background:
    radial-gradient(1200px 800px at 78% 6%, rgba(176,108,255,.18), transparent 60%),
    radial-gradient(900px 700px at 10% 94%, rgba(69,230,255,.13), transparent 62%),
    linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 45%, var(--bg-2) 100%);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  user-select:none;
}
button{ font-family:inherit; color:inherit; }
.mono{ font-family:var(--mono); }

#app{ position:fixed; inset:0; overflow:hidden; }

/* ================= 背景层 ================= */
#bg-stars{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.holo-grid{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(69,230,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(69,230,255,.055) 1px, transparent 1px);
  background-size:46px 46px, 46px 46px;
  -webkit-mask-image:radial-gradient(125% 105% at 50% 50%, #000 32%, transparent 88%);
  mask-image:radial-gradient(125% 105% at 50% 50%, #000 32%, transparent 88%);
  animation:grid-drift 46s linear infinite;
}
@keyframes grid-drift{ to{ background-position:46px 46px, 46px 46px; } }
.vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%, transparent 42%, rgba(2,3,12,.72) 100%);
}

/* ================= 玻璃拟态 / 全息 ================= */
.glass{
  position:relative;
  background:
    linear-gradient(160deg, var(--glass-1), var(--glass-2)) padding-box,
    linear-gradient(135deg, rgba(69,230,255,.55), rgba(176,108,255,.32) 42%, rgba(255,95,128,.22)) border-box;
  border:1px solid transparent;
  border-radius:var(--r);
  -webkit-backdrop-filter:blur(14px) saturate(1.35);
  backdrop-filter:blur(14px) saturate(1.35);
  box-shadow:0 18px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
/* 全息反光 + 扫描线 */
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:
    linear-gradient(115deg, rgba(69,230,255,.10) 0%, transparent 32%, rgba(176,108,255,.10) 62%, transparent 100%),
    repeating-linear-gradient(0deg, rgba(69,230,255,.045) 0 1px, transparent 1px 5px);
  mix-blend-mode:screen;
}
/* 角标 */
.glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:
    linear-gradient(var(--cyan),var(--cyan)) 7px 7px/12px 1px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 7px 7px/1px 12px no-repeat,
    linear-gradient(var(--violet),var(--violet)) calc(100% - 7px) calc(100% - 7px)/12px 1px no-repeat,
    linear-gradient(var(--violet),var(--violet)) calc(100% - 7px) calc(100% - 7px)/1px 12px no-repeat;
  opacity:.8;
}

/* ================= 状态指示器 ================= */
.dot{
  width:8px; height:8px; border-radius:50%; flex:none; display:inline-block;
  background:var(--idle);
}
.dot.ok{ background:var(--ok); box-shadow:0 0 9px var(--ok); animation:pulse-dot 2.4s ease-in-out infinite; }
.dot.warn{ background:var(--warn); box-shadow:0 0 9px var(--warn); animation:pulse-dot 1.6s ease-in-out infinite; }
.dot.err{ background:var(--err); box-shadow:0 0 9px var(--err); animation:pulse-dot .9s ease-in-out infinite; }
.dot.busy{ background:var(--busy); box-shadow:0 0 9px var(--busy); animation:pulse-dot 1.1s ease-in-out infinite; }
.dot.idle{ background:var(--idle); }
@keyframes pulse-dot{ 50%{ opacity:.35; transform:scale(.82); } }

.status-pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px; border-radius:999px;
  background:rgba(8,12,36,.5); border:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--cyan);
  white-space:nowrap;
}

/* ================= 场景容器 ================= */
.scene{
  position:absolute; inset:0; z-index:2;
  opacity:0; visibility:hidden; transform:scale(1.02); filter:blur(6px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), filter .5s var(--ease-out);
}
.scene.is-active{ opacity:1; visibility:visible; transform:none; filter:none; }

/* ===========================================================
   场景一 · 启动序列
   =========================================================== */
#scene-intro{ z-index:5; }
.intro-inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(10px,2.4vh,28px);
}
.boot-card{ width:min(600px,86vw); padding:14px 16px 16px; }
.boot-head{ display:flex; align-items:center; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--line-soft); }
.boot-glyph{ font-size:22px; color:var(--cyan); text-shadow:0 0 16px var(--cyan); }
.boot-meta{ flex:1; min-width:0; }
.boot-title{ font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.2em; color:var(--paper); }
.boot-sub{ margin-top:4px; font-size:11px; letter-spacing:.06em; color:var(--muted); }

/* 卡通进度条 */
.progress-block{ margin-top:14px; }
.progress-head{
  display:flex; align-items:center; gap:9px; margin-bottom:9px;
  font-size:12px; letter-spacing:.14em; color:var(--cyan);
}
.progress-head .led{
  width:9px; height:9px; border-radius:50%; background:var(--pink);
  box-shadow:0 0 10px var(--pink); animation:pulse-dot 1s steps(2,end) infinite;
}
.progress-pct{ margin-left:auto; font-family:var(--mono); font-size:17px; color:var(--paper); }
.progress-track{
  position:relative; height:28px; border-radius:16px;
  background:linear-gradient(180deg,#080c26,#141838);
  border:4px solid var(--ink);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.06), inset 0 -6px 12px rgba(0,0,0,.55),
             0 0 0 2px rgba(69,230,255,.3), 0 8px 24px rgba(0,0,0,.5);
}
.progress-fill{
  position:absolute; left:0; top:0; bottom:0; width:0%; border-radius:12px 6px 6px 12px;
  background:linear-gradient(90deg,#2f6bff, var(--cyan) 55%, var(--violet));
  box-shadow:0 0 18px rgba(69,230,255,.6);
  transition:width .28s var(--ease-out); overflow:hidden;
}
.progress-stripes{
  position:absolute; inset:0; opacity:.35;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.55) 0 10px, transparent 10px 22px);
  animation:stripes .7s linear infinite;
}
.progress-shine{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.45), transparent 55%); }
.progress-ticks{
  position:absolute; inset:0; pointer-events:none; border-radius:12px;
  background-image:repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(4,5,26,.5) calc(10% - 2px) 10%);
}
.progress-rocket{
  position:absolute; top:50%; left:0; transform:translate(-100%,-50%) translateX(6px);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); transition:left .28s var(--ease-out); z-index:3;
}
.rocket-flame{ animation:flame-flicker .16s infinite alternate; transform-origin:right center; }
.progress-status{ margin-top:8px; font-family:var(--mono); font-size:11px; color:var(--muted); min-height:15px; }
@keyframes stripes{ to{ background-position:44px 0; } }
@keyframes flame-flicker{ from{ transform:scaleX(.55); opacity:.75; } to{ transform:scaleX(1.1); opacity:1; } }

/* 子系统状态网格（数据密集） */
.boot-grid{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 16px;
}
.boot-item{ display:flex; align-items:center; gap:8px; font-size:11.5px; }
.boot-item .bi-k{ color:var(--muted); }
.boot-item .bi-v{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--dim); letter-spacing:.08em; }
.boot-item.done .bi-v{ color:var(--ok); }

/* 飞船 */
.ship-stage{ position:relative; width:min(560px,80vw); height:min(380px,42vh); }
.ship-wrap{
  position:absolute; left:50%; top:50%; width:200px; height:300px;
  transform:translate(-50%,-50%) scale(.6); will-change:transform,filter;
}
.ship-wrap .ship{ position:absolute; inset:0; display:block; }
.ship-wrap #flame{ position:absolute; left:0; top:0; width:200px; height:440px; pointer-events:none; }
.blink-a{ animation:blink 1.1s steps(2,end) infinite; }
.blink-b{ animation:blink 1.1s steps(2,end) infinite .55s; }
@keyframes blink{ 50%{ opacity:.2; } }
.intro-foot{ font-size:12.5px; color:var(--muted); letter-spacing:.1em; transition:opacity .4s; }
.intro-foot.is-hidden{ opacity:0; }
.kbd{
  display:inline-block; padding:2px 9px; margin-right:4px; border-radius:8px;
  border:1px solid var(--line); color:var(--cyan); font-size:11.5px;
  box-shadow:inset 0 0 12px rgba(69,230,255,.15);
}

/* ===========================================================
   场景二 · 主驾驶舱（网格化多面板控制台）
   =========================================================== */
.console{
  position:absolute; inset:0; padding:clamp(10px,1.4vw,16px);
  display:grid; gap:clamp(8px,1vw,12px);
  grid-template-columns:minmax(178px,15vw) minmax(0,1fr) minmax(178px,15vw);
  grid-template-rows:auto minmax(0,1fr) auto;
}
.hud-top{
  grid-column:1/-1; grid-row:1;
  display:flex; align-items:center; gap:16px; padding:10px 16px;
}
.hud-brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.hud-glyph{ font-size:22px; color:var(--cyan); text-shadow:0 0 18px var(--cyan); }
.hud-title{ font-size:clamp(17px,2vw,26px); font-weight:800; letter-spacing:.05em; color:var(--paper); text-shadow:0 0 22px rgba(69,230,255,.4); }
.hud-sub{ margin-top:3px; font-family:var(--mono); font-size:9.5px; letter-spacing:.26em; color:var(--muted); }
.hud-metrics{ display:flex; gap:14px; margin-left:auto; overflow:hidden; }
.metric{ min-width:66px; }
.metric .m-k{ font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:var(--dim); }
.metric .m-v{ margin-top:2px; font-family:var(--mono); font-size:13px; color:var(--cyan); }
.metric .m-v.warn{ color:var(--warn); }
.hud-right{ display:flex; gap:8px; align-items:center; }

.console-col{
  display:flex; flex-direction:column; gap:clamp(7px,.9vw,10px);
  min-height:0; overflow:hidden;
}
.console-col.left{ grid-column:1; grid-row:2; }
.console-col.right{ grid-column:3; grid-row:2; }
.console-col::-webkit-scrollbar{ width:4px; }
.console-col::-webkit-scrollbar-thumb{ background:rgba(69,230,255,.3); border-radius:4px; }

.card{ flex:0 0 auto; padding:10px 12px 12px; }
.card.grow{ flex:1 1 auto; min-height:96px; display:flex; flex-direction:column; }
.card-head{
  display:flex; align-items:center; gap:8px;
  padding-bottom:8px; margin-bottom:9px; border-bottom:1px solid var(--line-soft);
}
.card-title{ font-size:11.5px; font-weight:800; letter-spacing:.12em; color:var(--paper); }
.card-tag{
  margin-left:auto; font-family:var(--mono); font-size:9px; letter-spacing:.18em;
  color:var(--cyan); padding:2px 6px; border-radius:5px;
  background:rgba(69,230,255,.10); border:1px solid var(--line-soft);
}

/* 状态列表 */
.status-list{ display:flex; flex-direction:column; gap:6px; }
.status-row{ display:flex; align-items:center; gap:8px; font-size:11.5px; }
.status-row .sr-k{ color:var(--muted); }
.status-row .sr-v{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--text); letter-spacing:.06em; }

/* 能量条 */
.bar-list{ display:flex; flex-direction:column; gap:8px; }
.bar-item .bar-top{ display:flex; justify-content:space-between; font-size:11px; margin-bottom:4px; color:var(--text); }
.bar-item .bar-top b{ font-family:var(--mono); color:var(--cyan); font-weight:600; }
.bar-track{ height:6px; border-radius:5px; background:rgba(69,230,255,.12); overflow:hidden; }
.bar-fill{
  height:100%; width:0; border-radius:5px;
  background:linear-gradient(90deg,#2f6bff,var(--cyan));
  box-shadow:0 0 10px rgba(69,230,255,.55);
  transition:width .8s var(--ease-out);
}

/* 火花线 */
.spark{ width:100%; height:44px; display:block; }

/* 迷你数据网格 */
.mini-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.mini-cell{
  padding:6px 8px; border-radius:8px;
  background:rgba(69,230,255,.05); border:1px solid var(--line-soft);
}
.mini-cell .mc-k{ font-family:var(--mono); font-size:8.5px; letter-spacing:.16em; color:var(--dim); }
.mini-cell .mc-v{ margin-top:2px; font-family:var(--mono); font-size:12px; color:var(--paper); }

/* 分区索引 */
.zone-list{ display:flex; flex-direction:column; gap:6px; }
.zone-item{
  display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:9px; cursor:pointer;
  background:rgba(69,230,255,.04); border:1px solid var(--line-soft);
  transition:background .18s, border-color .18s, transform .18s var(--ease-out);
}
.zone-item:hover{ background:rgba(69,230,255,.14); border-color:var(--line); transform:translateX(3px); }
.zone-item .zi-greek{
  width:22px; height:22px; border-radius:7px; display:grid; place-items:center;
  font-size:12px; font-weight:800; color:var(--paper);
  background:linear-gradient(150deg, rgba(69,230,255,.25), rgba(176,108,255,.25));
}
.zone-item .zi-name{ font-size:12px; color:var(--text); }
.zone-item .zi-ly{ margin-left:auto; font-family:var(--mono); font-size:9.5px; color:var(--dim); }

/* 日志 */
.log{ flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:4px; }
.log-line{
  font-family:var(--mono); font-size:10px; line-height:1.5; color:var(--muted);
  animation:log-in .4s var(--ease-out);
}
.log-line b{ color:var(--cyan); font-weight:600; }
.log-line.hi b{ color:var(--warn); }
@keyframes log-in{ from{ opacity:0; transform:translateY(-4px); } }

/* 视口 */
.viewport-wrap{ grid-column:2; grid-row:2; min-width:0; min-height:0; }
.viewport{
  position:relative; width:100%; height:100%; overflow:hidden; border-radius:16px; padding:0;
  background:radial-gradient(120% 100% at 50% 40%, #0b0f30 0%, #04051a 72%);
  box-shadow:inset 0 0 80px rgba(0,0,0,.75);
}
#galaxy{ position:absolute; inset:0; width:100%; height:100%; display:block; cursor:crosshair; }
.vp-hud{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.vp-corner{ position:absolute; width:26px; height:26px; opacity:.9; }
.vp-corner.tl{ left:10px; top:10px; border-left:2px solid var(--cyan); border-top:2px solid var(--cyan); }
.vp-corner.tr{ right:10px; top:10px; border-right:2px solid var(--cyan); border-top:2px solid var(--cyan); }
.vp-corner.bl{ left:10px; bottom:10px; border-left:2px solid var(--cyan); border-bottom:2px solid var(--cyan); }
.vp-corner.br{ right:10px; bottom:10px; border-right:2px solid var(--cyan); border-bottom:2px solid var(--cyan); }
.vp-cross{
  position:absolute; left:50%; top:50%; width:34px; height:34px; transform:translate(-50%,-50%);
  background:
    linear-gradient(var(--cyan),var(--cyan)) center/1px 34px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) center/34px 1px no-repeat;
  opacity:.28;
}
.vp-sweep{
  position:absolute; left:50%; top:50%; width:120%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg, rgba(69,230,255,.22), transparent 28%, transparent 100%);
  opacity:.16; animation:sweep 9s linear infinite; border-radius:50%;
}
@keyframes sweep{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
.vp-edge{ position:absolute; left:0; right:0; height:8px; opacity:.5; }
.vp-edge.top{ top:0; background:repeating-linear-gradient(90deg, var(--cyan) 0 1px, transparent 1px 14px); }
.vp-edge.bottom{ bottom:0; background:repeating-linear-gradient(90deg, var(--cyan) 0 1px, transparent 1px 14px); }
.vp-readout{
  position:absolute; z-index:3; padding:4px 9px; border-radius:7px;
  background:rgba(4,6,26,.62); border:1px solid var(--line-soft);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--cyan);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.vp-readout.tl{ left:44px; top:14px; }
.vp-readout.tr{ right:44px; top:14px; }
.vp-readout.bl{ left:44px; bottom:14px; }
.vp-readout.br{ right:44px; bottom:14px; color:var(--muted); }
.window-hint{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:3;
  padding:6px 15px; border-radius:999px;
  background:rgba(4,6,26,.6); border:1px solid var(--line);
  font-size:11.5px; letter-spacing:.08em; color:var(--cyan); pointer-events:none;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:pulse-soft 2.6s ease-in-out infinite;
}
@keyframes pulse-soft{ 50%{ opacity:.5; } }

/* 底部仪表台 */
.dash{
  grid-column:1/-1; grid-row:3;
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:9px 16px;
}
.dash-group{ display:flex; align-items:center; gap:14px; }
.dash-group.mid{ flex:1; justify-content:center; gap:20px; }
.gauge{ width:88px; height:52px; }
.gauge-arc{ animation:gauge 5s ease-in-out infinite alternate; }
.gauge-needle{ transform-origin:60px 62px; animation:needle 4.2s ease-in-out infinite alternate; }
@keyframes gauge{ to{ stroke-dashoffset:14; } }
@keyframes needle{ from{ transform:rotate(-16deg); } to{ transform:rotate(22deg); } }
.db-readout{ line-height:1.15; }
.db-readout b{ display:block; font-family:var(--mono); font-size:18px; color:var(--cyan); }
.db-readout span{ font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--dim); }
.throttle{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.throttle-rail{
  position:relative; width:min(180px,18vw); height:14px; border-radius:9px;
  background:#080c26; border:3px solid var(--ink); box-shadow:inset 0 2px 6px rgba(0,0,0,.7);
}
.throttle-handle{
  position:absolute; left:0; top:-5px; width:32px; height:24px; border-radius:8px;
  background:linear-gradient(180deg,var(--amber),#ff8a3d); border:3px solid var(--ink);
  box-shadow:0 3px 0 rgba(0,0,0,.35); transition:left .5s var(--ease-out);
}
.throttle-label{ font-family:var(--mono); font-size:9px; letter-spacing:.24em; color:var(--dim); }
.led-strip{ display:flex; gap:5px; }
.led-strip i{ width:8px; height:8px; border-radius:2px; background:#1b2150; border:1px solid rgba(69,230,255,.22); }
.led-strip i.on{ background:var(--cyan); box-shadow:0 0 9px var(--cyan); }
.led-strip i.hot{ background:var(--pink); box-shadow:0 0 9px var(--pink); }
.db-scr{
  min-width:96px; padding:6px 10px; border-radius:9px;
  background:#070a24; border:1px solid var(--line-soft); box-shadow:inset 0 0 16px rgba(69,230,255,.08);
}
.db-scr-title{ font-family:var(--mono); font-size:8.5px; letter-spacing:.2em; color:var(--dim); }
.db-scr-val{ margin-top:2px; font-size:12px; color:var(--paper); }

/* ===========================================================
   场景三 · 星球 + 双侧多面板
   =========================================================== */
#scene-planet{ z-index:3; }
#planet-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#planet-fallback{
  position:absolute; left:50%; top:50%; width:min(520px,62vw); aspect-ratio:1; display:none;
  transform:translate(-50%,-50%); border-radius:50%;
  background-size:200% 100%; background-repeat:repeat-x;
  box-shadow:inset -34px -22px 70px rgba(0,0,0,.78), 0 0 90px rgba(69,230,255,.28);
  animation:spin-tex 26s linear infinite;
}
@keyframes spin-tex{ to{ background-position:200% 0; } }

.planet-top{
  position:absolute; left:0; right:0; top:0; z-index:4;
  display:flex; align-items:center; gap:12px;
  padding:clamp(10px,1.6vw,18px) clamp(12px,2.4vw,26px);
}
.btn-back{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; cursor:pointer;
  background:rgba(8,12,36,.5); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  font-size:12.5px; letter-spacing:.08em; transition:transform .2s var(--ease-out), background .2s, box-shadow .2s;
}
.btn-back:hover{ transform:translateX(-4px); background:rgba(69,230,255,.16); box-shadow:0 0 22px rgba(69,230,255,.28); }
.btn-back-arrow{ color:var(--cyan); }
.zone-badge{ display:flex; align-items:center; gap:11px; padding:7px 14px 7px 9px; }
.zone-greek{
  display:grid; place-items:center; width:36px; height:36px; border-radius:11px;
  font-size:17px; font-weight:800;
  background:linear-gradient(150deg, rgba(69,230,255,.22), rgba(176,108,255,.22));
  border:1px solid var(--line); box-shadow:0 0 22px rgba(69,230,255,.22);
}
.zone-name{ font-size:15px; letter-spacing:.14em; font-weight:700; color:var(--paper); }
.status-strip{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.planet-grid{
  position:absolute; left:0; right:0; top:clamp(64px,9vh,88px); bottom:clamp(52px,7vh,68px);
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(10px,3vw,48px); padding:0 clamp(12px,2.4vw,30px);
  pointer-events:none; z-index:3;
}
.planet-grid .console-col{ width:min(396px,33vw); max-height:100%; }
.panel{
  pointer-events:auto; width:100%; padding:14px 16px 16px;
  flex:0 1 auto; min-height:0; max-height:100%; overflow:auto; opacity:0;
}
/* 次级面板（系统/遥测）：视觉层级低于主内容面板 */
#sysLeft,#sysRight{ padding:11px 13px 13px; }
#sysLeft .p-title,#sysRight .p-title{ font-size:12.5px; font-weight:700; color:var(--cyan); }
#sysLeft .p-head,#sysRight .p-head{ padding-bottom:7px; margin-bottom:9px; }
#sysLeft .p-lead,#sysRight .p-lead{ font-size:11.5px; line-height:1.6; }
.panel.is-in{ animation:panel-in .7s var(--ease-out) forwards; }
.panel::-webkit-scrollbar{ width:5px; }
.panel::-webkit-scrollbar-thumb{ background:rgba(69,230,255,.3); border-radius:5px; }
@keyframes panel-in{ from{ opacity:0; transform:translateY(24px) scale(.97); } to{ opacity:1; transform:none; } }

/* 面板内容排版（视觉层级） */
.p-head{ display:flex; align-items:baseline; gap:10px; padding-bottom:9px; margin-bottom:11px; border-bottom:1px solid var(--line-soft); }
.p-title{ font-size:14px; font-weight:800; letter-spacing:.1em; color:var(--paper); }
.p-sub{ margin-left:auto; font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:var(--cyan); }
.p p{ margin:0 0 11px; font-size:13px; line-height:1.75; color:var(--text); }
.p-lead{ font-size:13.5px; line-height:1.8; color:#e6ebff; }
.kv{ display:flex; flex-direction:column; gap:7px; margin:0 0 12px; }
.kv-row{ display:flex; align-items:center; gap:9px; font-size:12.5px; }
.kv-k{ min-width:70px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--dim); }
.kv-v{ color:var(--text); }
.kv-row::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); flex:none; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.tag{
  padding:3px 9px; border-radius:999px; font-size:11px;
  border:1px solid rgba(176,108,255,.38); color:#dcd2ff; background:rgba(176,108,255,.10);
}
.post{ padding:10px 0; border-bottom:1px dashed rgba(69,230,255,.14); }
.post:last-child{ border-bottom:0; }
.post-t{ display:flex; align-items:center; gap:9px; }
.post-title{ font-size:13px; color:#e9eeff; }
.post-date{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--dim); }
.post-meta{ margin-top:4px; font-size:11px; color:var(--muted); }
.post-tag{ color:var(--violet); }
.msg{ padding:9px 11px; border-radius:10px; margin-bottom:8px; background:rgba(69,230,255,.06); border:1px solid var(--line-soft); }
.msg-name{ font-family:var(--mono); font-size:11.5px; color:var(--cyan); }
.msg-time{ float:right; font-size:10px; color:var(--dim); }
.msg-body{ margin-top:4px; font-size:12.5px; line-height:1.6; color:#e2e8ff; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:9px; }
.field input,.field textarea{
  width:100%; padding:8px 11px; border-radius:9px; resize:none;
  background:rgba(5,8,26,.6); border:1px solid var(--line-soft);
  color:var(--paper); font-family:inherit; font-size:12.5px; outline:none; user-select:text;
}
.field input:focus,.field textarea:focus{ border-color:var(--cyan); box-shadow:0 0 0 3px rgba(69,230,255,.12); }
.btn-send{
  width:100%; padding:9px; border-radius:9px; cursor:pointer; font-size:12.5px; letter-spacing:.1em;
  background:linear-gradient(90deg, rgba(69,230,255,.2), rgba(176,108,255,.2)); border:1px solid var(--line);
  transition:.2s;
}
.btn-send:hover{ background:rgba(69,230,255,.3); box-shadow:0 0 22px rgba(69,230,255,.28); }
.egg-lock{ text-align:center; padding:12px 0; }
.egg-btn{
  padding:10px 20px; border-radius:999px; cursor:pointer; font-size:12.5px; letter-spacing:.12em;
  background:linear-gradient(150deg,#2f6bff,#b06cff); border:0; color:#fff;
  box-shadow:0 10px 26px rgba(176,108,255,.32);
}
.egg-secret{
  display:none; margin-top:12px; padding:12px; border-radius:10px;
  background:rgba(255,209,102,.08); border:1px dashed rgba(255,209,102,.45);
  font-size:12.5px; line-height:1.8; color:#ffe9b8;
}
.egg-secret.is-open{ display:block; animation:panel-in .5s var(--ease-out); }

/* 底部状态条 */
.status-bar{
  position:absolute; left:50%; bottom:clamp(10px,1.6vh,18px); transform:translateX(-50%); z-index:4;
  display:flex; align-items:center; gap:10px; padding:7px 14px; white-space:nowrap;
  max-width:94vw; overflow:hidden;
}
.status-bar .sb-item{ display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--muted); }
.status-bar .sb-sep{ width:1px; height:12px; background:var(--line-soft); }

/* ===========================================================
   跃迁 / 白屏 / 彩蛋
   =========================================================== */
#warp{ position:absolute; inset:0; z-index:20; width:100%; height:100%; pointer-events:none; opacity:0; }
#warp.is-on{ opacity:1; }
#flash{ position:absolute; inset:0; z-index:22; pointer-events:none; background:#fff; opacity:0; }
#ufo{
  position:absolute; z-index:19; width:120px; height:64px; pointer-events:none; opacity:0; top:22%; left:-160px;
  background:
    radial-gradient(closest-side, #cfe6ff 0 40%, #7fa8e8 62%, transparent 70%) center 22% / 70px 26px no-repeat,
    linear-gradient(180deg,#5f6db8,#39427e);
  border-radius:50% 50% 42% 42%;
  box-shadow:0 0 34px rgba(69,230,255,.55), inset 0 -6px 14px rgba(0,0,0,.4);
}
#ufo.is-fly{ animation:ufo-fly 5.2s linear; }
@keyframes ufo-fly{
  0%{ opacity:0; left:-160px; transform:translateY(0) rotate(-8deg); }
  10%{ opacity:1; }
  50%{ transform:translateY(-26px) rotate(6deg); }
  90%{ opacity:1; }
  100%{ opacity:0; left:110%; transform:translateY(14px) rotate(-4deg); }
}

/* ===========================================================
   响应式
   =========================================================== */
@media (max-width:1180px){
  .console{ grid-template-columns:minmax(150px,17vw) minmax(0,1fr) minmax(150px,17vw); }
  .hud-metrics{ display:none; }
}
@media (max-width:900px){
  .console{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; }
  .console-col.left,.console-col.right{ display:none; }
  .viewport-wrap{ grid-column:1; grid-row:2; }
  .planet-grid{ flex-direction:column; align-items:stretch; justify-content:flex-end; }
  .planet-grid .console-col{ width:100%; }
  .panel{ max-height:21vh; }
  #sysLeft,#sysRight{ max-height:16vh; }
  .status-strip{ display:none; }
}
@media (max-width:600px){
  .boot-grid{ grid-template-columns:1fr; }
  .hud-sub{ display:none; }
  .zone-name{ display:none; }
  .status-bar{ font-size:9px; gap:7px; }
}

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