/* ============================================================================
   绕星 · app.css —— 全应用唯一一套尺度与色名（改这里就等于改全作）
   色名：void 深空底 / hull 舱体 / line 发丝 / ice 冷白 / dim 灰紫
        mint 极光青（慢速·主色）/ violet 极光紫（中速）/ coral 极光珊瑚（高速）
   尺度：字号 10 / 12 / 16 / 22 / 34 ｜ 间距 4 / 7 / 12 / 18 ｜ 切角 9px
   ========================================================================== */
:root{
  --void:#0d0a14; --hull:#161022; --line:#33284a; --ice:#e6e0f5; --dim:#8b83a6;
  --mint:#7df0c0; --violet:#9b7bff; --coral:#ff6f7d; --warn:#ffb454;
  --f0:10px; --f1:12px; --f2:16px; --f3:22px; --f4:34px;
  --s1:4px; --s2:7px; --s3:12px; --s4:18px;
  --chamfer:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--void);color:var(--ice);
  font:var(--f1)/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#sky{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#ui{position:fixed;inset:0;pointer-events:none}
#ui>*{pointer-events:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---- 切角面板：外紧内缩 1px，做出发丝描边 ---- */
.pane{background:var(--line);clip-path:var(--chamfer);padding:1px;pointer-events:none}
.pane>.in{background:rgba(22,16,34,.94);clip-path:var(--chamfer);padding:var(--s2) var(--s3);pointer-events:auto}
.pane.flat>.in{background:rgba(13,10,20,.86)}

/* ---- 顶部仪表条 ---- */
#top{position:absolute;left:var(--s2);right:var(--s2);top:calc(var(--s2) + env(safe-area-inset-top));z-index:4}
#top>.in{display:flex;align-items:center;gap:var(--s3);min-height:52px}
#idline{flex:1;min-width:0}
#idline b{display:block;font-size:var(--f2);letter-spacing:.16em;font-weight:600}
#idline span{display:block;color:var(--dim);font-size:var(--f0);letter-spacing:.1em;margin-top:2px;
  text-transform:uppercase;font-variant-numeric:tabular-nums}
#tools{display:flex;gap:var(--s1);flex-wrap:wrap;justify-content:flex-end}
.tbtn{border:1px solid var(--line);padding:6px 9px;font-size:var(--f0);letter-spacing:.12em;
  color:var(--dim);background:rgba(51,40,74,.25);min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
.tbtn:active{background:var(--violet);color:#120c1c;border-color:var(--violet)}
.tbtn.on{color:var(--mint);border-color:var(--mint)}

/* ---- 遥测 / 读数 ---- */
#tele{position:absolute;left:var(--s2);top:calc(72px + env(safe-area-inset-top));width:196px;z-index:3}
.trow{display:flex;align-items:baseline;gap:var(--s2);font-size:var(--f0);letter-spacing:.08em}
.trow i{font-style:normal;color:var(--dim);flex:0 0 74px}
.trow b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ice);word-break:break-all}
.trow b.hot{color:var(--coral)}
.trow b.good{color:var(--mint)}
#read{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(58px + env(safe-area-inset-bottom));z-index:3;white-space:nowrap}
#read>.in{font-family:var(--mono);font-size:var(--f0);letter-spacing:.06em;font-variant-numeric:tabular-nums}
#read .sep{color:var(--line);margin:0 var(--s2)}
#foot{position:absolute;left:0;right:0;bottom:calc(var(--s2) + env(safe-area-inset-bottom));text-align:center;
  color:var(--dim);font-size:var(--f0);letter-spacing:.14em;text-transform:uppercase;z-index:2}

/* ---- 覆盖层 ---- */
.mask{position:fixed;inset:0;background:rgba(9,7,14,.78);display:flex;align-items:flex-end;
  justify-content:center;z-index:9;padding:var(--s3);overflow:auto}
.mask[hidden]{display:none}
.sheet{width:100%;max-width:520px;background:var(--line);clip-path:var(--chamfer);padding:1px;
  margin:auto 0 0;animation:rise .22s ease-out}
.sheet>.in{background:var(--hull);clip-path:var(--chamfer);padding:var(--s4) var(--s4) var(--s3)}
@keyframes rise{from{transform:translateY(14px);opacity:.4}to{transform:none;opacity:1}}
.sheet h2{margin:0 0 var(--s1);font-size:var(--f3);letter-spacing:.14em;font-weight:600}
.sheet h2 .tag{font-size:var(--f0);letter-spacing:.16em;color:var(--dim);margin-left:var(--s2);vertical-align:middle}
.sheet p.lead{margin:0 0 var(--s3);color:var(--dim);font-size:var(--f1);letter-spacing:.04em}
.sheet h3{margin:var(--s3) 0 var(--s1);font-size:var(--f0);letter-spacing:.2em;color:var(--violet);
  text-transform:uppercase;font-weight:600}
.sheet h3:first-child{margin-top:0}
.rows{margin:0 0 var(--s2);padding:0;list-style:none;border-top:1px solid var(--line)}
.rows li{display:flex;gap:var(--s2);border-bottom:1px solid var(--line);padding:var(--s1) 0;font-size:var(--f0);
  letter-spacing:.04em}
.rows li i{font-style:normal;color:var(--dim);flex:0 0 112px}
.rows li b{font-weight:600;word-break:break-all;font-variant-numeric:tabular-nums}
.rows li b.warn{color:var(--warn)}
.rows li b.bad{color:var(--coral)}
.rows li b.ok{color:var(--mint)}
.note{color:var(--dim);font-size:var(--f0);letter-spacing:.04em;margin:var(--s2) 0 0;line-height:1.7}

/* ---- 按钮 ---- */
.btn{display:block;width:100%;text-align:left;border:1px solid var(--line);border-left:3px solid var(--line);
  padding:11px var(--s3);margin:0 0 var(--s2);font-size:var(--f1);letter-spacing:.08em;
  background:rgba(51,40,74,.22);position:relative;color:var(--ice)}
.btn:active{background:rgba(155,123,255,.28)}
.btn em{display:block;font-style:normal;font-size:var(--f0);color:var(--dim);letter-spacing:.06em;margin-top:3px}
.btn.pri{border-color:var(--mint);border-left-color:var(--mint);background:rgba(125,240,192,.14)}
.btn.pri:active{background:var(--mint);color:#0b1a15}
.btn.alt{border-left-color:var(--violet)}
/* 提示那一句：就是一行普通的按钮样式，没有前缀、没有角标、没有专属颜色 ——
   规格 D 只允许它在"卡住那一刻"的上下文里以一句话出现（原来那枚橙色「广告」角标已删掉） */
.btn.plain{border-left-color:var(--dim);color:var(--dim);background:rgba(51,40,74,.14)}
.btn.plain:active{background:rgba(139,131,166,.26)}
.btn.danger{border-color:var(--coral);border-left-color:var(--coral);background:rgba(255,111,125,.14)}
.btn.danger:active{background:rgba(255,111,125,.32)}
.chk label{flex:1}
.btn.mini{padding:7px var(--s3);font-size:var(--f0);display:inline-block;width:auto;margin-right:var(--s1)}
.btn.row2{display:flex;gap:var(--s2);align-items:center}
.btn.row2 span{flex:1}
.btn[disabled],.btn.dim{opacity:.42}
.chk{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s2) 0;border-bottom:1px solid var(--line);
  font-size:var(--f1);letter-spacing:.03em}
.chk input{appearance:none;flex:0 0 20px;height:20px;margin:1px 0 0;border:1px solid var(--line);
  background:rgba(13,10,20,.7);position:relative}
.chk input:checked{border-color:var(--mint);background:var(--mint)}
.chk input:checked:after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border-right:2px solid #0b1a15;border-bottom:2px solid #0b1a15;transform:rotate(40deg)}
.chk b{display:block;font-weight:600}
.chk i{font-style:normal;display:block;color:var(--dim);font-size:var(--f0);margin-top:2px;line-height:1.6}
.chk.warn{color:var(--warn)}

/* ---- 进度条 / 站点行 ---- */
.bar{height:4px;background:rgba(51,40,74,.6);margin:var(--s3) 0 var(--s2);overflow:hidden}
.bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mint),var(--violet),var(--coral));
  transition:width .2s linear}
.st{display:flex;align-items:center;gap:var(--s2);width:100%;text-align:left;border:1px solid transparent;
  border-left:3px solid var(--line);padding:6px var(--s2);font-size:var(--f0);letter-spacing:.05em;
  background:rgba(51,40,74,.16);margin:0 0 3px}
.st:active{background:rgba(155,123,255,.25)}
.st.ok{border-left-color:var(--mint)}
.st.cur{border-left-color:var(--violet);color:var(--mint)}
.st b{flex:0 0 34px;font-variant-numeric:tabular-nums}
.st span{flex:1;color:var(--dim)}
.st em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--dim)}
/* 站行 + 右侧的「档」：一行两件东西，站本身要能点，档案也要能点 */
.strow{display:flex;gap:3px;align-items:stretch}
.strow>.st{flex:1;min-width:0;margin:0 0 3px}
.strow>.stdoc{flex:0 0 30px;margin:0 0 3px;border:1px solid var(--line);color:var(--dim);
  font-size:var(--f0);letter-spacing:.1em;background:rgba(51,40,74,.16)}
.strow>.stdoc:active{background:var(--violet);color:#120c1c;border-color:var(--violet)}
.scroll{max-height:44vh;overflow:auto;-webkit-overflow-scrolling:touch;margin:0 0 var(--s2);
  padding-right:2px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
textarea{width:100%;height:120px;background:rgba(13,10,20,.8);color:var(--dim);border:1px solid var(--line);
  font-family:var(--mono);font-size:var(--f0);padding:var(--s2);resize:vertical;letter-spacing:0}

/* 信息层不吃手势：toast / 遥测 / 读数 / 页脚都只是"看"的，只有顶部仪表条与覆盖层面板接受点击（否则一条提示条就能挡掉一次操作） */
#toast, #tele, #read, #foot { pointer-events: none; }

/* ---- 提示条 ---- */
#toast{position:fixed;left:50%;transform:translateX(-50%);top:calc(76px + env(safe-area-inset-top));
  z-index:20;max-width:88%;background:var(--line);clip-path:var(--chamfer);padding:1px;
  animation:rise .18s ease-out}
#toast[hidden]{display:none}
#toast>b{display:block;background:var(--mint);color:#0b1a15;clip-path:var(--chamfer);
  padding:var(--s2) var(--s3);font-size:var(--f1);font-weight:600;letter-spacing:.06em}
#toast.bad>b{background:var(--coral);color:#1b0910}
#toast.quiet>b{background:var(--hull);color:var(--ice);border:1px solid var(--line)}

/* ---- 启动校准 ---- */
#boot{position:fixed;inset:0;background:var(--void);z-index:30;display:flex;align-items:center;
  justify-content:center;text-align:center;transition:opacity .3s ease}
#boot[hidden]{display:none}
#boot.gone{opacity:0}
.bootbox{padding:0 var(--s4);width:100%;max-width:340px}
.bootbox h1{margin:var(--s3) 0 0;font-size:var(--f3);letter-spacing:.34em;font-weight:600}
#bootMsg{color:var(--dim);font-size:var(--f0);letter-spacing:.16em;margin:var(--s1) 0 0;min-height:1.6em;
  text-transform:uppercase}
.bootfoot{color:var(--line);font-size:var(--f0);letter-spacing:.18em;margin:var(--s3) 0 0;
  text-transform:uppercase}
/* 校准失败：留在屏幕上报出来，别把遮罩一藏了事（白屏最难查） */
#bootErr{margin:var(--s3) 0 0;padding:var(--s2) var(--s3);border-left:3px solid var(--coral);
  background:rgba(255,111,125,.1);color:var(--ice);font-size:var(--f0);line-height:1.7;
  letter-spacing:.04em;text-align:left}
#bootErr[hidden]{display:none}
/* 首屏那一行同意：只是页脚上方的一行，不遮挡、不拦路（不再有独立同意页） */
#consent{position:absolute;left:var(--s2);right:var(--s2);
  bottom:calc(30px + env(safe-area-inset-bottom));z-index:3;pointer-events:none}
#consent[hidden]{display:none}
#consent>.in{display:flex;align-items:center;gap:var(--s2);box-shadow:none}
#consent input{appearance:none;flex:0 0 18px;height:18px;margin:0;border:1px solid var(--line);
  background:rgba(13,10,20,.7);position:relative}
#consent input:checked{border-color:var(--mint);background:var(--mint)}
#consent input:checked:after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border-right:2px solid #0b1a15;border-bottom:2px solid #0b1a15;transform:rotate(40deg)}
#consent label{font-size:var(--f0);letter-spacing:.08em;color:var(--dim);cursor:pointer}
@media (min-width:560px){#tele{width:220px}}