/* 地月系统 — 深空控制台 */
:root{
  --bg:#05070e;
  --ink:#e9edf6;
  --dim:#8d96ad;
  --faint:#5b6480;
  --line:rgba(150,172,220,.15);
  --glass:rgba(10,14,25,.78);
  --accent:#7cc4ff;
  --warm:#ffd08a;
  --pad:18px;
  --r:13px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);overflow:hidden;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#stage.drag{cursor:grabbing}
#stage.hot{cursor:pointer}

#boot{position:fixed;inset:0;z-index:50;display:grid;place-content:center;justify-items:center;gap:20px;background:var(--bg);transition:opacity .55s}
#boot.gone{opacity:0;pointer-events:none}
.b-ring{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(124,196,255,.16);border-top-color:var(--accent);animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#bootMsg{color:var(--faint);font-size:12.5px;letter-spacing:.22em}

#hud{position:fixed;inset:0;z-index:5;pointer-events:none;display:grid;
  grid-template-columns:268px 1fr 252px;grid-template-rows:auto 1fr auto;
  grid-template-areas:"top top top" "left . right" "bot bot bot";
  padding:var(--pad);gap:var(--pad)}
#hud>*{pointer-events:auto}
/* 天体转到画面顶部时是亮的，顶栏文字要压得住 */
#hud::before,#hud::after{content:'';position:fixed;left:0;right:0;height:104px;pointer-events:none}
#hud::before{top:0;background:linear-gradient(180deg,rgba(5,7,14,.72),rgba(5,7,14,0))}
#hud::after{bottom:0;height:86px;background:linear-gradient(0deg,rgba(5,7,14,.62),rgba(5,7,14,0))}

/* 顶栏 */
.top{grid-area:top;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:10px}
.bmark{position:relative;width:30px;height:22px;flex:none}
.bmark i{position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#8fd0ff,#2f6fae 58%,#0c2340);
  box-shadow:0 0 12px rgba(80,160,255,.4)}
.bmark b{position:absolute;right:0;top:9px;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 34% 32%,#e8eaef,#8f949f 60%,#4a4d55)}
.btxt{display:flex;flex-direction:column;line-height:1.16}
.btxt b{font-size:14.5px;letter-spacing:.14em;font-weight:600}
.btxt i{font-style:normal;font-size:9px;letter-spacing:.32em;color:var(--faint)}
.jump{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.jb{height:31px;padding:0 13px;border:1px solid var(--line);border-radius:999px;
  background:var(--glass);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);
  color:var(--ink);font-size:12px;letter-spacing:.05em;cursor:pointer;font-family:inherit;
  transition:border-color .2s,background .2s,color .2s}
.jb:hover{border-color:rgba(124,196,255,.5);background:rgba(18,26,44,.85)}
.jb.on{color:#04121e;background:linear-gradient(180deg,#a8dcff,#7cc4ff);font-weight:600;border-color:transparent}

/* 面板 */
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--glass);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  display:flex;flex-direction:column;overflow:hidden;max-height:100%;
  box-shadow:0 16px 46px rgba(0,0,0,.45);animation:rise .45s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.pl{grid-area:left}
.pr{grid-area:right;animation-delay:.08s}
.ph{display:flex;align-items:center;justify-content:space-between;padding:11px 13px 9px;border-bottom:1px solid var(--line);flex:none}
.ph h2{font-size:12.5px;font-weight:600;letter-spacing:.16em}
.fold{width:21px;height:21px;border:none;background:none;color:var(--faint);cursor:pointer;font-size:14px;border-radius:6px}
.fold:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.panel.folded .pb{display:none}
.pb{padding:13px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(140,160,210,.26) transparent}
.pb::-webkit-scrollbar{width:5px}
.pb::-webkit-scrollbar-thumb{background:rgba(140,160,210,.26);border-radius:3px}

.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;font-size:11.5px}
.facts dt{color:var(--faint);letter-spacing:.05em;white-space:nowrap}
.facts dd{text-align:right;font-variant-numeric:tabular-nums}
.rel{margin-top:13px;padding-top:12px;border-top:1px solid var(--line);font-size:11.5px;line-height:1.75;color:var(--dim)}
.rel b{color:var(--ink);font-weight:500}
.rel p+p{margin-top:8px}

/* 缩放 / 图层 / 时间 */
.zoomrow{display:flex;align-items:center;gap:8px;font-size:11px}
.zoomrow label{color:var(--faint);letter-spacing:.1em;flex:none}
.zoomrow span{color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:52px;text-align:right}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:16px;background:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent) var(--fill,0%),rgba(255,255,255,.1) var(--fill,0%))}
input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:rgba(255,255,255,.1)}
input[type=range]::-moz-range-progress{height:3px;border-radius:2px;background:var(--accent)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:#e2f2ff;margin-top:-4.5px;box-shadow:0 0 0 1px rgba(124,196,255,.7),0 0 10px rgba(124,196,255,.45)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:#e2f2ff;
  box-shadow:0 0 0 1px rgba(124,196,255,.7),0 0 10px rgba(124,196,255,.45)}

.layers{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:7px}
.lay{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--dim);cursor:pointer;user-select:none}
.lay input{appearance:none;-webkit-appearance:none;width:26px;height:15px;border-radius:999px;flex:none;
  background:rgba(255,255,255,.1);position:relative;cursor:pointer;transition:background .2s;margin:0}
.lay input::after{content:"";position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;
  background:#8d96ad;transition:transform .2s,background .2s}
.lay input:checked{background:rgba(124,196,255,.35)}
.lay input:checked::after{transform:translateX(11px);background:#e2f2ff}
.lay:hover{color:var(--ink)}

.timebox{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.trow{display:flex;align-items:center;gap:8px}
.tbtn{width:28px;height:28px;flex:none;border:1px solid var(--line);border-radius:8px;background:none;
  color:var(--ink);cursor:pointer;font-size:11px;line-height:1}
.tbtn:hover{border-color:rgba(124,196,255,.5)}
.trow span{font-size:10.5px;color:var(--faint);white-space:nowrap;min-width:56px;text-align:right}
.phase{display:flex;align-items:center;gap:11px;margin-top:12px}
#phaseCv{width:56px;height:56px;flex:none}
.pinfo{display:flex;flex-direction:column;gap:2px;min-width:0}
.pinfo b{font-size:13px;font-weight:600}
.pinfo i{font-style:normal;font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}

/* 比例尺 / 提示 */
.scalebar{grid-area:bot;justify-self:start;align-self:end;display:flex;align-items:center;gap:8px;
  font-size:10.5px;color:var(--dim);letter-spacing:.06em;text-shadow:0 2px 8px #000}
.scalebar span{display:block;width:76px;height:5px;border:1px solid rgba(180,200,235,.5);border-top:none}
.tip{grid-area:bot;justify-self:center;align-self:end;font-size:11px;color:var(--faint);
  letter-spacing:.09em;pointer-events:none;transition:opacity .6s;text-shadow:0 2px 8px #000;white-space:nowrap}
.tip b{color:var(--dim);font-weight:500}
.tip.hide{opacity:0}

/* 工信部要求备案号在页面展示并链接到官网 */
.beian{grid-area:bot;justify-self:end;align-self:end;font-size:10px;letter-spacing:.04em;
  color:var(--faint);text-shadow:0 2px 8px #000}
.beian a{color:inherit;text-decoration:none;transition:color .2s}
.beian a:hover{color:var(--dim)}

/* 信息卡 */
.card{position:fixed;z-index:9;width:258px;border:1px solid rgba(124,196,255,.3);border-radius:12px;
  background:rgba(8,12,22,.93);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:13px 14px 14px;box-shadow:0 20px 56px rgba(0,0,0,.6);animation:pop .26s cubic-bezier(.2,.9,.3,1)}
@keyframes pop{from{opacity:0;transform:translateY(7px) scale(.97)}}
.cx{position:absolute;top:6px;right:7px;width:22px;height:22px;border:none;background:none;color:var(--faint);
  font-size:17px;line-height:1;cursor:pointer;border-radius:6px}
.cx:hover{color:var(--ink);background:rgba(255,255,255,.07)}
.ctype{font-size:9.5px;letter-spacing:.22em;color:var(--accent)}
.card h3{font-size:17px;font-weight:600;letter-spacing:.04em;margin:5px 0 2px}
.cen{font-size:10.5px;color:var(--faint);letter-spacing:.08em}
.cmeta{margin-top:9px;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.card p{margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.08);
  font-size:11.5px;line-height:1.72;color:var(--dim)}

/* 说明 */
.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;
  background:rgba(3,5,11,.74);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);animation:fade .22s}
@keyframes fade{from{opacity:0}}
.mcard{position:relative;max-width:520px;max-height:82vh;overflow-y:auto;padding:26px 28px;
  border:1px solid var(--line);border-radius:15px;background:rgba(9,13,24,.95);box-shadow:0 28px 76px rgba(0,0,0,.6)}
.mcard h3{font-size:11.5px;letter-spacing:.24em;color:var(--accent);margin:20px 0 8px;font-weight:600}
.mcard h3:first-of-type{margin-top:0}
.mcard p,.mcard li{font-size:13px;line-height:1.85;color:var(--dim)}
.mcard ul{padding-left:17px;display:flex;flex-direction:column;gap:4px}
.mcard b{color:var(--ink);font-weight:500}

@media (max-width:1040px){ #hud{grid-template-columns:238px 1fr 224px;--pad:13px} }
@media (max-width:820px){
  :root{--pad:11px}
  #hud{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"top" "." "bot";gap:9px}
  .panel{position:fixed;left:11px;right:11px;bottom:56px;max-height:min(52vh,420px);z-index:9;display:none}
  .panel.open{display:flex}
  /* 图层多了之后，窄屏两列排，省得抽屉拉得太长 */
  .layers{display:grid;grid-template-columns:1fr 1fr;gap:9px 10px}
  .facts{font-size:12px}
  .timebox .trow span{min-width:48px}
  .jump{gap:5px}
  .jb{height:29px;padding:0 10px;font-size:11.5px}
  .btxt i{display:none}
  /* .tip 本来是 grid item，top 不起作用，窄屏改成固定定位挪到顶部 */
  .tip{position:fixed;left:0;right:0;top:54px;justify-self:auto;align-self:auto;
    text-align:center;font-size:10px;letter-spacing:.06em}
  .card{width:calc(100vw - 30px);max-width:280px}
  .mtabs{position:fixed;left:11px;right:11px;bottom:11px;z-index:10;display:flex;gap:5px;padding:5px;
    border:1px solid var(--line);border-radius:999px;background:var(--glass);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .mtabs button{flex:1;height:32px;border:none;border-radius:999px;background:none;color:var(--dim);
    font-size:12px;font-family:inherit;letter-spacing:.06em;cursor:pointer}
  .mtabs button.on{color:#04121e;background:linear-gradient(180deg,#a8dcff,#7cc4ff);font-weight:600}
  .scalebar{margin-bottom:52px}
  .beian{margin-bottom:52px;font-size:9.5px}
}
@media (min-width:821px){ .mtabs{display:none} }
@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.08s!important} }