/* feiyang的云机场 · 设计系统 v4「FEIYANG/OS」
 * 复古终端操作系统: 荧光绿(可切琥珀)单色屏 + 扫描线 + 字符矩阵交互背景(static/fx.js)。
 * 版式: 前台 = 左侧图标栏 + 顶部标题栏 + 视图区(手机 = 底部 Dock); 后台 = 侧边栏 + 标题栏(手机 = 抽屉)。
 * 组件: 模块 .mod / 读数 .rd / 行列表 .ri / 表单栅格 .fgrid / 开关 .switch / 分段 .seg / 标签页 .tabs
 *       / 未保存提示条 .savebar / 弹窗 .modal / 吐司 .toast / 命令行 .cli
 * 原则: 文字一律不折行(放不下就省略号 + title 提示), 设置项按组放进栅格, 不出现一长条横排。 */
:root {
  --bg:#020603;
  --scr:rgba(3,12,7,.9);
  --p:57,255,136;
  --ph:rgb(var(--p));
  --fg:#b9ffd2;
  --fg2:#86d9a6;
  --muted:#4f9a6c;
  --dim:#2b6a45;
  --hi:#eafff1;
  --amber:#ffb43a;
  --red:#ff5f56;
  --cyan:#5ef2ff;
  --line:rgba(var(--p),.2);
  --line2:rgba(var(--p),.42);
  --glow:0 0 6px rgba(var(--p),.55), 0 0 18px rgba(var(--p),.2);
  --glow-sm:0 0 4px rgba(var(--p),.45);
  --bloom:0 0 0 1px rgba(0,0,0,.6), 0 0 34px -14px rgba(var(--p),.5);
  --ease:cubic-bezier(.16,1,.3,1);
  --mono:"Cascadia Mono","JetBrains Mono","SF Mono","Fira Code",Menlo,Consolas,"Liberation Mono","PingFang SC","Microsoft YaHei",monospace;
  --rail:84px;
  --side:236px;
  --bar:56px;
  --line-strong:var(--line2); --panel:var(--scr); --accent:var(--ph); --ok:var(--ph); --warn:var(--amber); --err:var(--red);
  color-scheme:dark;
}
html[data-phosphor="amber"] {
  --p:255,180,58;
  --fg:#ffe2b0; --fg2:#e7b56c; --muted:#a5773a; --dim:#6d4c22; --hi:#fff4de; --amber:#7dffb0;
}

/* ================================================================ 基础 */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; background:var(--bg); scroll-behavior:smooth; }
body {
  margin:0; min-height:100vh; min-height:100dvh; color:var(--fg); background:var(--bg);
  font:14px/1.7 var(--mono); overflow-x:hidden; -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent; caret-color:var(--ph); text-shadow:0 0 3px rgba(var(--p),.25);
}
@view-transition { navigation:auto; }
::view-transition-old(root) { animation:vtOut .18s ease-in both; }
::view-transition-new(root) { animation:vtIn .32s var(--ease) both; }
a { color:var(--hi); text-decoration:none; }
a:hover { color:var(--ph); }
::selection { background:var(--ph); color:#000; text-shadow:none; }
img, svg, canvas { max-width:100%; }
h1, h2, h3, h4, p { margin:0; }
h1, h2, h3, h4 { color:var(--hi); font-weight:700; line-height:1.3; text-shadow:var(--glow); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(var(--p),.3); border:2px solid #010402; }
::-webkit-scrollbar-thumb:hover { background:rgba(var(--p),.55); }
.muted { color:var(--muted); }
.small { font-size:12.5px; }
.mono { font-variant-numeric:tabular-nums; }
.hi { color:var(--hi); text-shadow:var(--glow); }
.amber { color:var(--amber); }
.red { color:var(--red); }
.nowrap { white-space:nowrap; }
.ell { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.center { text-align:center; }
.cursor { display:inline-block; width:.55em; height:1em; margin-left:.12em; vertical-align:-.14em; background:var(--ph); box-shadow:var(--glow); animation:blink 1.05s steps(1) infinite; }
.kick { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
kbd { display:inline-block; padding:0 5px; border:1px solid var(--line2); border-bottom-width:2px; font:600 11px var(--mono); color:var(--hi); }

/* ================================================================ CRT 层 */
.fx-bg { position:fixed; inset:0; z-index:-3; pointer-events:none; background:radial-gradient(120% 90% at 55% 30%, #06160c 0%, #030a05 55%, #010301 100%); }
html[data-phosphor="amber"] .fx-bg { background:radial-gradient(120% 90% at 55% 30%, #1a1006 0%, #0b0703 55%, #030201 100%); }
.fx-field { position:fixed; inset:0; z-index:-2; pointer-events:none; }
.fx-glow { position:fixed; left:0; top:0; z-index:-2; width:620px; height:620px; margin:-310px 0 0 -310px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(var(--p),.09), rgba(var(--p),.03) 40%, transparent 70%); will-change:transform; transform:translate3d(-999px,-999px,0); }
.crt { position:fixed; inset:0; z-index:200; pointer-events:none; }
.crt::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(180deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px); mix-blend-mode:multiply; }
.crt::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent, rgba(var(--p),.05) 50%, transparent) 0 -100vh / 100% 50vh no-repeat,
             radial-gradient(130% 100% at 50% 50%, transparent 62%, rgba(0,0,0,.55) 100%);
  animation:scanBar 10s linear infinite; }
.js .crt { animation:flicker 8s infinite steps(1); }

/* ================================================================ 外壳 */
.shell { display:grid; grid-template-columns:var(--rail) minmax(0,1fr); min-height:100vh; min-height:100dvh; }
.is-admin .shell { grid-template-columns:var(--side) minmax(0,1fr); }
.main { min-width:0; display:flex; flex-direction:column; }
.view { flex:1; min-width:0; padding:22px 28px 40px; }
.view.flush { padding:0; }

/* 前台左侧图标栏 */
.rail { position:sticky; top:0; height:100vh; height:100dvh; z-index:40; display:flex; flex-direction:column; border-right:1px solid var(--line2); background:rgba(1,6,3,.92); }
.rail-logo { display:grid; place-items:center; height:var(--bar); border-bottom:1px solid var(--line); }
.rail-logo img { width:34px; height:34px; filter:drop-shadow(0 0 8px rgba(var(--p),.6)); }
.rail nav { display:flex; flex-direction:column; padding:10px 8px; gap:4px; flex:1; }
.rail a, .rail button {
  position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 2px 8px; color:var(--muted);
  font:500 11px var(--mono); letter-spacing:.04em; border:1px solid transparent; background:none; cursor:pointer; text-shadow:none; white-space:nowrap;
  transition:color .15s, background .15s, border-color .15s;
}
.rail svg { width:22px; height:22px; }
.rail a:hover, .rail button:hover { color:var(--hi); border-color:var(--line); background:rgba(var(--p),.06); }
.rail a.on { color:#000; background:var(--ph); box-shadow:var(--glow); }
.rail a.on::after { content:""; position:absolute; right:-9px; top:50%; width:4px; height:20px; margin-top:-10px; background:var(--ph); box-shadow:var(--glow); }
.rail-foot { padding:8px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }

/* 后台侧边栏 */
.side { position:sticky; top:0; height:100vh; height:100dvh; z-index:60; display:flex; flex-direction:column; min-width:0; border-right:1px solid var(--line2); background:rgba(1,6,3,.96); }
.side-brand { display:flex; align-items:center; gap:10px; height:var(--bar); padding:0 16px; border-bottom:1px solid var(--line); color:var(--hi); font-weight:700; white-space:nowrap; overflow:hidden; }
.side-brand img { width:28px; height:28px; flex:0 0 28px; }
.side-brand span { overflow:hidden; text-overflow:ellipsis; }
.side-brand small { color:var(--amber); font-weight:600; font-size:10.5px; letter-spacing:.14em; }
.side nav { flex:1; overflow:auto; padding:12px 10px; }
.side .grp { margin:16px 8px 6px; font-size:10.5px; letter-spacing:.2em; color:var(--dim); text-transform:uppercase; }
.side .grp:first-child { margin-top:2px; }
.side nav a { display:flex; align-items:center; gap:12px; padding:9px 12px; color:var(--fg2); white-space:nowrap; border-left:2px solid transparent; }
.side nav a svg { width:18px; height:18px; flex:0 0 18px; color:var(--muted); }
.side nav a:hover { background:rgba(var(--p),.07); color:var(--hi); }
.side nav a.on { background:rgba(var(--p),.12); color:var(--hi); border-left-color:var(--ph); text-shadow:var(--glow); }
.side nav a.on svg { color:var(--ph); }
.side-foot { padding:10px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.side-foot a, .side-foot button { display:flex; align-items:center; justify-content:center; height:34px; border:1px solid var(--line); color:var(--fg2); font:500 12px var(--mono); background:none; cursor:pointer; white-space:nowrap; text-shadow:none; }
.side-foot a:hover, .side-foot button:hover { border-color:var(--ph); color:var(--hi); }
.side-scrim { display:none; }

/* 顶部标题栏 */
.bar { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px; height:var(--bar); padding:0 28px; min-width:0;
  border-bottom:1px solid var(--line2); background:rgba(1,6,3,.9); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.bar-title { display:flex; align-items:baseline; gap:12px; min-width:0; }
.bar-title h1 { font-size:15px; white-space:nowrap; }
.bar-title .crumb { color:var(--muted); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.bar-right { margin-left:auto; display:flex; align-items:center; gap:10px; white-space:nowrap; }
.bar .chip-live { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--fg2); }
.bar .clock { font-size:12.5px; color:var(--muted); min-width:5.5em; text-align:right; }
.bar-menu { display:none; height:34px; padding:0 10px; border:1px solid var(--line2); background:none; color:var(--hi); font:600 12px var(--mono); cursor:pointer; text-shadow:none; }
.bar-brand { display:none; align-items:center; gap:8px; color:var(--hi); font-weight:700; white-space:nowrap; min-width:0; overflow:hidden; }
.bar-brand img { width:26px; height:26px; flex:0 0 26px; }
.bar-brand span { overflow:hidden; text-overflow:ellipsis; }
.dock { display:none; }

/* ================================================================ 按钮 */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 16px; white-space:nowrap; cursor:pointer;
  font:700 13.5px var(--mono); color:#000; background:var(--ph); border:1px solid var(--ph); text-shadow:none;
  box-shadow:0 0 16px -4px rgba(var(--p),.7); transition:background .15s, box-shadow .2s, transform .1s, color .15s; }
.btn:hover { color:#000; background:var(--hi); box-shadow:0 0 26px -2px rgba(var(--p),.9); }
.btn:active { transform:translateY(1px); }
.btn:focus-visible { outline:2px dashed var(--amber); outline-offset:2px; }
.btn.ghost { color:var(--hi); background:transparent; border-color:var(--line2); box-shadow:none; text-shadow:var(--glow-sm); }
.btn.ghost:hover { color:#000; background:var(--ph); border-color:var(--ph); text-shadow:none; }
.btn.line { color:var(--fg2); background:transparent; border-color:var(--line); box-shadow:none; font-weight:500; }
.btn.line:hover { color:var(--hi); border-color:var(--ph); background:rgba(var(--p),.08); }
.btn.danger { color:#000; background:var(--red); border-color:var(--red); box-shadow:0 0 16px -4px rgba(255,95,86,.7); }
.btn.danger.ghost { color:var(--red); background:transparent; border-color:rgba(255,95,86,.55); box-shadow:none; }
.btn.danger.ghost:hover { color:#000; background:var(--red); }
.btn.sm { height:30px; padding:0 11px; font-size:12.5px; }
.btn.lg { height:48px; padding:0 24px; font-size:15px; }
.btn.block { width:100%; }
.btn[disabled] { opacity:.45; cursor:default; transform:none; }
.btn.ok { background:var(--amber); border-color:var(--amber); }
.icon-btn { display:inline-grid; place-items:center; width:30px; height:30px; padding:0; border:1px solid var(--line); background:none; color:var(--fg2); cursor:pointer; flex:0 0 auto; }
.icon-btn:hover { border-color:var(--ph); color:var(--hi); background:rgba(var(--p),.08); }
.icon-btn svg { width:16px; height:16px; }

/* ================================================================ 模块 */
.mod { position:relative; min-width:0; display:flex; flex-direction:column; background:var(--scr); border:1px solid var(--line2); box-shadow:var(--bloom); }
.mod::before, .mod::after { content:""; position:absolute; width:10px; height:10px; pointer-events:none; border:2px solid var(--ph); }
.mod::before { left:-2px; top:-2px; border-right:0; border-bottom:0; }
.mod::after { right:-2px; bottom:-2px; border-left:0; border-top:0; }
.mod-h { display:flex; align-items:center; gap:10px; min-height:44px; padding:0 16px; border-bottom:1px dashed var(--line); min-width:0; }
.mod-h .id { flex:0 0 auto; font-size:11px; color:#000; background:var(--ph); padding:0 6px; text-shadow:none; font-weight:700; }
.mod-h h2, .mod-h h3 { font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:0 1 auto; }
.mod-h .sub { color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1 1 0; }
.mod-h .acts { margin-left:auto; display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.mod-b { padding:16px 18px; min-width:0; flex:1; }
.mod-b.tight { padding:4px 0; }
.mod-f { display:flex; align-items:center; gap:10px; padding:12px 18px; border-top:1px dashed var(--line); flex-wrap:wrap; }
.mod.warn { border-color:rgba(255,180,58,.55); }
.mod.warn::before, .mod.warn::after { border-color:var(--amber); }
.mod.danger { border-color:rgba(255,95,86,.55); }
.mod.danger::before, .mod.danger::after { border-color:var(--red); }
.fine .mod:hover { box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 40px -12px rgba(var(--p),.65); }
.note { color:var(--muted); font-size:12.5px; line-height:1.75; }
.note b { color:var(--fg2); }
.note + .note { margin-top:6px; }
.mt { margin-top:18px; }

/* 栅格 */
.g { display:grid; gap:18px; min-width:0; }
.g2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-8-4 { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.stack { display:flex; flex-direction:column; gap:18px; min-width:0; }

/* 读数 */
.rds { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.rd { background:#020a05; padding:12px 14px; min-width:0; }
.rd .k { font-size:10.5px; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rd .v { font-size:22px; font-weight:800; color:var(--hi); text-shadow:var(--glow); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.35; }
.rd .v small { font-size:12px; font-weight:500; color:var(--muted); text-shadow:none; margin-left:4px; }
.rd .d { font-size:12px; color:var(--fg2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 键值清单 */
.kvl { display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px; font-size:13px; margin:0; }
.kvl dt { color:var(--muted); white-space:nowrap; }
.kvl dd { margin:0; color:var(--hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }

/* 行列表(代替宽表格) */
.rows { display:flex; flex-direction:column; }
.ri { display:grid; align-items:center; gap:4px 14px; padding:11px 16px; border-bottom:1px dashed var(--line); min-width:0; color:inherit; }
.ri:last-child { border-bottom:0; }
a.ri:hover { background:rgba(var(--p),.07); color:inherit; }
.ri > * { min-width:0; }
.ri .t { display:block; color:var(--hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ri .s { display:block; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ri .n { white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; }
.ri.hl { background:rgba(255,180,58,.06); box-shadow:inset 2px 0 0 var(--amber); }
.rows-head { display:grid; gap:4px 14px; padding:7px 16px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); white-space:nowrap; }
.rows-head > * { overflow:hidden; text-overflow:ellipsis; }
.empty { padding:26px 16px; text-align:center; color:var(--muted); }
.avatar { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; background:rgba(var(--p),.12); border:1px solid var(--line2); color:var(--hi); font-weight:800; text-transform:uppercase; }
.avatar.lg { width:60px; height:60px; flex-basis:60px; font-size:24px; }

/* 状态标签 / 指示灯 */
.tag { display:inline-flex; align-items:center; gap:6px; padding:0 7px; height:20px; font-size:11.5px; white-space:nowrap; border:1px solid var(--line2); color:var(--fg2); line-height:1; flex:0 0 auto; }
.tag::before { content:""; width:6px; height:6px; background:currentColor; }
.tag.active, .tag.ok { color:var(--ph); border-color:rgba(var(--p),.5); text-shadow:var(--glow-sm); }
.tag.pending, .tag.mid, .tag.expired, .tag.unverified, .tag.overquota { color:var(--amber); border-color:rgba(255,180,58,.5); }
.tag.disabled, .tag.rejected, .tag.bad { color:var(--red); border-color:rgba(255,95,86,.5); }
.tag.plain::before { display:none; }
.led { display:inline-block; width:8px; height:8px; flex:0 0 8px; background:var(--ph); box-shadow:var(--glow); animation:blink 1.6s steps(1) infinite; }
.led.off, .led.disabled, .led.rejected, .led.warn { background:var(--amber); box-shadow:0 0 8px rgba(255,180,58,.7); animation:none; }
.led.bad { background:var(--red); animation:none; }

/* 分段计量条 */
.meter { position:relative; height:10px; background:repeating-linear-gradient(90deg, rgba(var(--p),.13) 0 5px, transparent 5px 7px); }
.meter > i { position:absolute; left:0; top:0; bottom:0; max-width:100%; background:repeating-linear-gradient(90deg, var(--ph) 0 5px, transparent 5px 7px); box-shadow:0 0 8px rgba(var(--p),.5); }
.meter.warn > i { background:repeating-linear-gradient(90deg, var(--amber) 0 5px, transparent 5px 7px); }
.meter.bad > i { background:repeating-linear-gradient(90deg, var(--red) 0 5px, transparent 5px 7px); }
.meter.lg { height:16px; }
.mline { display:flex; justify-content:space-between; gap:10px; font-size:11.5px; color:var(--muted); margin-top:4px; white-space:nowrap; }
.mline span { overflow:hidden; text-overflow:ellipsis; }

/* ================================================================ 表单 */
.fgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px 16px; min-width:0; }
.fgrid.c2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.fgrid.c3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.f { display:flex; flex-direction:column; gap:6px; min-width:0; margin:0; }
.f.wide { grid-column:1 / -1; }
.f > span:first-child { font-size:12px; color:var(--fg2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.f .hint { font-size:11.5px; color:var(--muted); line-height:1.55; }
input, select, textarea { width:100%; min-width:0; height:38px; padding:0 11px; border-radius:0; color:var(--hi); background:rgba(0,0,0,.55);
  border:1px solid var(--line2); font:13.5px var(--mono); text-shadow:var(--glow-sm); transition:border-color .15s, box-shadow .2s, background .15s; }
textarea { height:auto; min-height:84px; padding:9px 11px; line-height:1.6; resize:vertical; }
select { appearance:none; -webkit-appearance:none; padding-right:30px; cursor:pointer; white-space:nowrap; text-overflow:ellipsis;
  background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%2339ff88'/%3E%3C/svg%3E") right 11px center / 9px no-repeat; }
select option { background:#020803; color:var(--fg); }
input::placeholder, textarea::placeholder { color:var(--dim); text-shadow:none; }
input:hover, select:hover, textarea:hover { border-color:rgba(var(--p),.6); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--ph); background:rgba(0,0,0,.8); box-shadow:0 0 0 1px var(--ph), 0 0 20px -6px rgba(var(--p),.8); }
input[disabled] { opacity:.5; }
.in-unit { display:flex; min-width:0; }
.in-unit input { flex:1; }
.in-unit > span { display:grid; place-items:center; padding:0 10px; border:1px solid var(--line2); border-left:0; color:var(--muted); font-size:12px; white-space:nowrap; background:rgba(var(--p),.05); }
/* 开关(仍是 checkbox, 提交内容不变) */
.switch { position:relative; display:flex; align-items:flex-start; gap:12px; min-width:0; cursor:pointer; padding:8px 0; margin:0; }
.switch input { position:absolute; opacity:0; width:1px; height:1px; }
.switch .sw { position:relative; flex:0 0 40px; width:40px; height:20px; margin-top:1px; border:1px solid var(--line2); background:rgba(0,0,0,.5); transition:background .2s, border-color .2s; }
.switch .sw::after { content:""; position:absolute; left:3px; top:3px; width:12px; height:12px; background:var(--muted); transition:transform .25s var(--ease), background .2s; }
.switch input:checked + .sw { border-color:var(--ph); background:rgba(var(--p),.18); }
.switch input:checked + .sw::after { transform:translateX(20px); background:var(--ph); box-shadow:var(--glow); }
.switch input:focus-visible + .sw { outline:2px dashed var(--amber); outline-offset:2px; }
.switch .st { min-width:0; }
.switch .st b { display:block; color:var(--hi); font-weight:600; font-size:13px; }
.switch .st i { display:block; font-style:normal; color:var(--muted); font-size:12px; line-height:1.55; }
.sws { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:4px 22px; }
/* 分段选择 */
.seg { display:inline-flex; border:1px solid var(--line2); min-width:0; max-width:100%; overflow-x:auto; scrollbar-width:none; flex:0 0 auto; }
.seg::-webkit-scrollbar { display:none; }
.seg > a, .seg > button { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px; font:600 12.5px var(--mono); color:var(--fg2); background:none; border:0; cursor:pointer; white-space:nowrap; text-shadow:none; }
.seg > * + * { border-left:1px solid var(--line2) !important; }
.seg > .on { background:var(--ph); color:#000; }
.seg > a:hover, .seg > button:hover { color:var(--hi); }
.seg > .on:hover { color:#000; }
.seg em { font-style:normal; font-size:10.5px; color:var(--amber); }
.seg .on em { color:#000; }
.search { position:relative; min-width:0; }
.search svg { position:absolute; left:11px; top:50%; width:16px; height:16px; margin-top:-8px; color:var(--muted); pointer-events:none; }
.search input { padding-left:34px; }
/* 未保存提示条 */
.savebar { position:sticky; bottom:14px; z-index:25; display:flex; align-items:center; gap:12px; margin-top:18px; padding:10px 14px;
  border:1px solid var(--ph); background:rgba(1,8,4,.96); box-shadow:0 0 30px -6px rgba(var(--p),.7);
  transform:translateY(20px); opacity:0; visibility:hidden; pointer-events:none; transition:transform .3s var(--ease), opacity .2s, visibility .2s; }
.savebar .msg { display:flex; align-items:center; gap:8px; color:var(--hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.savebar .acts { margin-left:auto; display:flex; gap:8px; flex:0 0 auto; }
.dirty > .savebar, .savebar.show { transform:none; opacity:1; visibility:visible; pointer-events:auto; }
.savebar .cnt { color:#000; background:var(--ph); padding:0 6px; font-weight:800; text-shadow:none; }
.no-js .savebar { position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto; }

/* ================================================================ 标签页 */
.tabs { display:flex; border-bottom:1px solid var(--line2); overflow-x:auto; scrollbar-width:none; min-width:0; }
.tabs::-webkit-scrollbar { display:none; }
.tabs button, .tabs a { position:relative; display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px; flex:0 0 auto; white-space:nowrap;
  font:600 13px var(--mono); color:var(--muted); background:none; border:0; cursor:pointer; text-shadow:none; }
.tabs button:hover, .tabs a:hover { color:var(--hi); }
.tabs .on { color:var(--hi); text-shadow:var(--glow); }
.tabs .on::after { content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; background:var(--ph); box-shadow:var(--glow); }
.tabs .cnt { font-size:11px; color:#000; background:rgba(var(--p),.7); padding:0 5px; text-shadow:none; }
.js .pane { display:none; padding-top:20px; min-width:0; }
.js .pane.on { display:block; animation:paneIn .35s var(--ease); }
.pane { padding-top:20px; }

/* ================================================================ 吐司 / 弹窗 */
.toasts { position:fixed; right:18px; top:calc(var(--bar) + 12px); z-index:150; display:flex; flex-direction:column; gap:10px; width:min(380px, calc(100% - 36px)); pointer-events:none; }
.toast { pointer-events:auto; display:flex; align-items:flex-start; gap:10px; padding:12px 14px; background:rgba(1,8,4,.97); border:1px solid var(--ph);
  box-shadow:0 0 30px -8px rgba(var(--p),.7); color:var(--hi); font-size:13px; animation:toastIn .45s var(--ease) both; }
.toast .k { flex:0 0 auto; font-weight:800; color:#000; background:var(--ph); padding:0 6px; text-shadow:none; }
.toast.error { border-color:var(--red); box-shadow:0 0 30px -8px rgba(255,95,86,.6); }
.toast.error .k { background:var(--red); }
.toast .x { margin-left:auto; background:none; border:0; color:var(--muted); cursor:pointer; font:13px var(--mono); flex:0 0 auto; }
.toast.out { animation:toastOut .3s ease-in forwards; }
.modal { position:fixed; inset:0; z-index:160; display:grid; place-items:center; padding:18px; background:rgba(0,0,0,.72); opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s; }
.modal.on { opacity:1; visibility:visible; }
.modal-box { width:min(460px,100%); background:#020a05; border:1px solid var(--ph); box-shadow:0 0 60px -10px rgba(var(--p),.7); transform:scale(.96); transition:transform .25s var(--ease); }
.modal.on .modal-box { transform:none; }
.modal-box .body { padding:18px; color:var(--fg); }
.modal-box .foot { display:flex; justify-content:flex-end; gap:10px; padding:12px 18px; border-top:1px dashed var(--line); }
.modal.danger .modal-box { border-color:var(--red); box-shadow:0 0 60px -10px rgba(255,95,86,.6); }

/* ================================================================ 命令行(按 : 打开) */
.cli { position:fixed; left:50%; top:16vh; z-index:170; width:min(640px, calc(100% - 24px)); transform:translate(-50%,-10px); opacity:0; visibility:hidden;
  transition:opacity .18s, transform .22s var(--ease), visibility .18s; background:#010603; border:1px solid var(--ph); box-shadow:0 0 0 100vmax rgba(0,0,0,.55), 0 0 50px -6px rgba(var(--p),.6); }
.cli-open .cli { opacity:1; visibility:visible; transform:translate(-50%,0); }
.cli-in { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px dashed var(--line); }
.cli-in input { border:0; background:none; box-shadow:none !important; height:32px; padding:0; font-size:15px; }
.cli-out { max-height:46vh; overflow:auto; padding:8px 0; font-size:13px; }
.cli-out .l { padding:3px 16px; white-space:pre-wrap; word-break:break-all; }
.cli-out .l b { color:var(--hi); }
.cli-out .dim { color:var(--muted); }
.cli-out .ok { color:var(--ph); }
.cli-out .err { color:var(--red); }
.cli-out .sug { display:flex; gap:12px; cursor:pointer; white-space:nowrap; }
.cli-out .sug b { min-width:9em; }
.cli-out .sug:hover, .cli-out .sug.on { background:var(--ph); color:#000; text-shadow:none; }
.cli-out .sug:hover b, .cli-out .sug.on b { color:#000; }
.prompt { color:var(--ph); white-space:nowrap; }
.prompt b { color:var(--amber); font-weight:600; }

/* ================================================================ 前台首页: 平铺工作区(点击放大) */
.ws { display:grid; gap:14px; padding:18px; height:calc(100vh - var(--bar)); height:calc(100dvh - var(--bar)); min-height:660px;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(0,1.3fr) minmax(0,1fr);
  grid-template-areas:"hero globe globe" "lines plans start"; }
.tile { position:relative; min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; background:var(--scr); border:1px solid var(--line2); box-shadow:var(--bloom); }
.tile::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s; z-index:0;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(var(--p),.08), transparent 60%); }
.fine .tile:hover::before { opacity:1; }
.fine .tile.zz:hover { border-color:var(--ph); }
.tile-h { position:relative; z-index:3; display:flex; align-items:center; gap:10px; height:38px; padding:0 8px 0 14px; border-bottom:1px dashed var(--line); flex:0 0 auto; min-width:0; }
.tile-h .no { font-size:11px; font-weight:700; color:#000; background:var(--ph); padding:0 6px; text-shadow:none; flex:0 0 auto; }
.tile-h .tt { font-size:12.5px; color:var(--hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.06em; }
.tile-h .meta { margin-left:auto; color:var(--muted); font-size:11.5px; white-space:nowrap; }
.tile-b { position:relative; z-index:1; flex:1; min-height:0; padding:16px; overflow:hidden; display:flex; flex-direction:column; }
.tile .full { display:none; }
.ws.zoomed { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); grid-template-areas:"z"; }
.ws.zoomed .tile { display:none; }
.ws.zoomed .tile.on { display:flex; grid-area:z; }
.ws.zoomed .tile.on .sum { display:none; }
.ws.zoomed .tile.on .full { display:block; }
.ws.zoomed .tile.on .tile-b { overflow:auto; padding:22px 26px; display:block; }
.ws .zz .tile-b { cursor:zoom-in; }
.ws.zoomed .zz .tile-b { cursor:auto; }
.ws .tile .z-close { display:none; }
.ws.zoomed .tile.on .z-open { display:none; }
.ws.zoomed .tile.on .z-close { display:inline-grid; }
.t-hero { grid-area:hero; }
.t-globe { grid-area:globe; }
.t-lines { grid-area:lines; }
.t-plans { grid-area:plans; }
.t-topo { grid-area:start; }
/* hero */
.t-hero .tile-b { justify-content:space-between; gap:12px; }
.boot { margin:0; font-size:11.5px; line-height:1.6; color:var(--fg2); white-space:pre; overflow:hidden; }
.boot .ln { display:flex; gap:.6em; }
.boot .ln > span:not(.dd) { flex:0 0 auto; }
.boot .ln > span:nth-child(2) { flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; }
.boot .dd { flex:1 1 0; min-width:1em; overflow:hidden; color:var(--dim); }
.boot .okk { color:var(--ph); font-weight:700; }
.boot .wrn { color:var(--amber); font-weight:700; }
.js .boot .ln { opacity:0; }
.js .boot .ln.on { opacity:1; }
.hero-title { font-size:clamp(26px,2.7vw,50px); line-height:1.05; font-weight:800; color:var(--hi); word-break:break-all;
  text-shadow:0 0 8px rgba(var(--p),.75), 0 0 30px rgba(var(--p),.35), 2px 0 0 rgba(255,60,90,.3), -2px 0 0 rgba(60,200,255,.3); }
.hero-title .cursor { width:.4em; height:.78em; }
.hero-sub { color:var(--amber); margin-top:8px; font-size:clamp(13px,1.1vw,16px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hero-lead { color:var(--fg2); margin-top:10px; font-size:13px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hero-cta { display:flex; gap:10px; }
.hero-cta .btn { flex:1 1 0; min-width:0; }
.hero-meta { display:flex; gap:16px; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; }
.hero-meta a { color:var(--fg2); }
.hero-meta a:hover { color:var(--ph); }
/* 地球 */
.t-globe .tile-b { padding:0; }
.t-globe canvas.globe { position:absolute; inset:0; width:100%; height:100%; touch-action:pan-y; cursor:grab; }
.t-globe canvas.globe:active { cursor:grabbing; }
.hud-r { position:absolute; z-index:3; display:flex; flex-direction:column; gap:2px; pointer-events:none; }
.hud-r.tl { left:16px; top:14px; }
.hud-r.tr { right:16px; top:14px; text-align:right; }
.hud-r.bl { left:16px; bottom:14px; }
.hud-r.br { right:16px; bottom:14px; align-items:flex-end; }
.hud-r .k { font-size:10.5px; letter-spacing:.18em; color:var(--muted); }
.hud-r .v { font-size:clamp(20px,2vw,30px); font-weight:800; color:var(--hi); text-shadow:var(--glow); line-height:1.1; }
.hud-r .l { display:flex; gap:8px; align-items:center; font-size:12px; color:var(--fg2); white-space:nowrap; }
/* 线路 */
.lns { display:flex; flex-direction:column; min-height:0; }
.ln-i { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:4px 10px; padding:6px 0; border-bottom:1px dashed var(--line); }
.ln-i:last-child { border-bottom:0; }
.ln-i .nm { color:var(--hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ln-i .v { font-size:12px; color:var(--fg2); white-space:nowrap; }
.ln-i .meter { grid-column:2 / 4; height:5px; }
.ln-i .meter::after { content:""; position:absolute; top:-3px; bottom:-3px; left:0; right:0; pointer-events:none; border-right:1px solid rgba(var(--p),.3);
  background:linear-gradient(90deg, rgba(var(--p),.3) 1px, transparent 1px) 0 0 / 25% 100%; }
.ln-ax { border-bottom:0; padding-top:2px; grid-template-columns:auto minmax(0,1fr) auto; }
.ln-ax .ax { position:relative; height:14px; font-size:10.5px; color:var(--muted); }
.ln-ax .ax span { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; }
.ln-ax .ax span:first-child { transform:none; }
.ln-ax .ax span:last-child { transform:translateX(-100%); }
.ln-ax .axu { font-size:10.5px; color:var(--dim); white-space:nowrap; }
/* 套餐 */
.pk { display:flex; flex-direction:column; min-height:0; flex:1; }
.pk-tabs { display:flex; border:1px solid var(--line2); flex:0 0 auto; }
.pk-tabs button { flex:1; min-width:0; height:30px; font:600 12px var(--mono); background:none; border:0; color:var(--fg2); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 6px; text-shadow:none; }
.pk-tabs button + button { border-left:1px solid var(--line2); }
.pk-tabs button.on { background:var(--ph); color:#000; }
.pk-card { display:none; flex-direction:column; flex:1; min-height:0; padding-top:12px; }
.pk-card.on { display:flex; animation:paneIn .3s var(--ease); }
.pk-price { display:flex; align-items:baseline; gap:4px; }
.pk-price .n { font-size:clamp(28px,2.5vw,40px); font-weight:800; color:var(--hi); text-shadow:var(--glow); line-height:1; }
.pk-price .u { color:var(--muted); font-size:12px; }
.pk-note { color:var(--muted); font-size:12px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chk { list-style:none; margin:10px 0 0; padding:0; font-size:12.5px; color:var(--fg2); min-height:0; overflow:hidden; }
.chk li { position:relative; padding-left:1.6em; margin:3px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chk li::before { content:"✓"; position:absolute; left:0; color:var(--ph); text-shadow:var(--glow); }
.pk-card .btn { margin-top:auto; flex:0 0 auto; }
/* 放大视图 */
.zfull h2 { font-size:22px; margin-bottom:6px; }
.zfull .lead { color:var(--fg2); margin-bottom:20px; max-width:760px; }
.mapwrap { position:relative; aspect-ratio:360 / 140; width:100%; }
.map-dots { position:absolute; inset:0; background:radial-gradient(circle, rgba(var(--p),.55) 1px, transparent 1.4px) 0 0 / 6px 6px;
  -webkit-mask:var(--map-bg) center / 100% 100% no-repeat; mask:var(--map-bg) center / 100% 100% no-repeat; }
.map-scan { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.map-scan::after { content:""; position:absolute; top:0; bottom:0; width:2px; left:0; background:var(--ph); box-shadow:0 0 18px 6px rgba(var(--p),.3); animation:sweepX 6s linear infinite; }
.map-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.map-arc { fill:none; stroke:rgba(var(--p),.3); stroke-width:1; stroke-dasharray:3 4; }
.map-flow { fill:none; stroke:var(--hi); stroke-width:2; stroke-dasharray:2 16; animation:arcFlow 3.4s linear infinite; }
.map-flow.off { stroke:var(--amber); }
.map-mark { position:absolute; transform:translate(-50%,-50%); z-index:2; }
.map-mark .dot { position:absolute; left:-5px; top:-5px; width:10px; height:10px; background:var(--ph); box-shadow:var(--glow); }
.map-mark .ring { position:absolute; left:-12px; top:-12px; width:24px; height:24px; border:1px solid var(--ph); animation:lockOn 2.4s steps(6) infinite; }
.map-mark.hub .dot { background:var(--amber); }
.map-mark.hub .ring { border-color:var(--amber); }
.map-mark.off .dot { background:var(--amber); }
.map-mark .label { position:absolute; left:16px; top:-14px; white-space:nowrap; font-size:12px; line-height:1.4; padding:2px 7px; background:#010501; border:1px solid var(--line2); color:var(--hi); transform:translateY(var(--dy,0)); }
.map-mark .label.side-left { left:auto; right:16px; text-align:right; }
.map-mark .label i { display:block; font-style:normal; color:var(--muted); font-size:11px; }
.nodegrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; margin-top:18px; }
.nodecard { border:1px solid var(--line2); padding:14px; background:rgba(0,0,0,.35); min-width:0; }
.nodecard .h { display:flex; align-items:center; gap:8px; color:var(--hi); font-weight:700; min-width:0; }
.nodecard .h span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nodecard .h .tag { margin-left:auto; }
.nodecard .kvl { margin-top:10px; font-size:12.5px; }
.planfull { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.planfull .pc { border:1px solid var(--line2); padding:16px; display:flex; flex-direction:column; background:rgba(0,0,0,.35); min-width:0; }
.planfull .pc.hot { border-color:var(--amber); box-shadow:0 0 30px -10px rgba(255,180,58,.5); }
.planfull .pc .btn { margin-top:14px; }
.feats3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:18px; }
.feat { border:1px dashed var(--line2); padding:14px; min-width:0; }
.feat b { display:block; color:var(--hi); margin-bottom:6px; }
.feat p { color:var(--fg2); font-size:12.5px; }
.clients { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.clients span { padding:4px 10px; border:1px solid var(--line2); color:var(--cyan); font-size:12.5px; white-space:nowrap; }
.launch { display:none; }
.lrow { grid-template-columns:auto minmax(0,1.1fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.3fr) auto; }
.lrow .c-m { display:none; }
.sheet-src { display:none; }

/* ================================================================ 价格页: 配置器 */
.cfg { display:grid; grid-template-columns:340px minmax(0,1fr); gap:18px; align-items:start; }
.cfg-list { display:flex; flex-direction:column; gap:12px; position:sticky; top:calc(var(--bar) + 18px); }
.cfg-opt { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:2px 12px; padding:14px 16px; cursor:pointer;
  border:1px solid var(--line2); background:var(--scr); text-align:left; color:var(--fg); font:inherit; transition:border-color .15s, background .15s; }
.cfg-opt:hover { border-color:var(--ph); }
.cfg-opt .radio { grid-row:1 / 3; width:16px; height:16px; border:1px solid var(--line2); display:grid; place-items:center; }
.cfg-opt.on { border-color:var(--ph); background:rgba(var(--p),.09); box-shadow:0 0 30px -10px rgba(var(--p),.6); }
.cfg-opt.on .radio::after { content:""; width:8px; height:8px; background:var(--ph); box-shadow:var(--glow); }
.cfg-opt .nm { color:var(--hi); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cfg-opt .nt { grid-column:2; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cfg-opt .pr { grid-row:1 / 3; grid-column:3; text-align:right; white-space:nowrap; }
.cfg-opt .pr b { font-size:20px; color:var(--hi); }
.cfg-opt .pr small { display:block; color:var(--muted); font-size:11px; }
.cfg-opt .badge { position:absolute; top:-9px; right:12px; font-size:10.5px; padding:0 6px; background:var(--amber); color:#000; text-shadow:none; font-weight:700; }
.cfg-panel { display:none; }
.cfg-panel.on { display:block; animation:paneIn .3s var(--ease); }
.no-js .cfg-panel { display:block; margin-bottom:18px; }
.cfg-top { display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.cfg-top .price { display:flex; align-items:baseline; gap:6px; }
.cfg-top .price .n { font-size:clamp(44px,5vw,72px); font-weight:800; line-height:1; color:var(--hi); text-shadow:var(--glow); }
.cfg-top .price .cur { font-size:20px; color:var(--fg2); }
.cfg-top .price .u { color:var(--muted); }
.cfg-top .alt { color:var(--amber); font-size:13px; margin-top:6px; }
.cfg-top .go { margin-left:auto; }
.flip { animation:numFlip .4s steps(4) both; }
.spec { margin-top:22px; border:1px solid var(--line); }
.spec-r { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:center; padding:11px 14px; border-bottom:1px dashed var(--line); }
.spec-r:last-child { border-bottom:0; }
.spec-r.h { font-size:10.5px; letter-spacing:.16em; color:var(--muted); padding:7px 14px; border-bottom-style:solid; }
.spec-r .nm { color:var(--hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spec-r .v { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spec-r .v.hi2 { color:var(--ph); font-weight:700; text-shadow:var(--glow); }
.spec-r.no .nm, .spec-r.no .v { color:var(--dim); }
.cmp-wrap { overflow-x:auto; }
.cmp { width:100%; border-collapse:collapse; font-size:13px; }
.cmp th, .cmp td { padding:10px 14px; text-align:left; border-bottom:1px dashed var(--line); white-space:nowrap; }
.cmp thead th { font-size:12px; color:var(--hi); border-bottom:1px solid var(--line2); }
.cmp thead th small { display:block; color:var(--muted); font-weight:400; font-size:11px; }
.cmp tbody th { color:var(--fg2); font-weight:500; }
.cmp td.hi2 { color:var(--ph); font-weight:700; }
.cmp td.no { color:var(--dim); }
.cmp .hot { background:rgba(255,180,58,.06); }
.faq details { border-bottom:1px dashed var(--line); }
.faq details:last-child { border-bottom:0; }
.faq summary { list-style:none; display:flex; gap:12px; padding:13px 18px; cursor:pointer; color:var(--hi); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::before { content:"+"; color:var(--amber); width:1em; flex:0 0 1em; }
.faq details[open] summary::before { content:"−"; }
.faq summary:hover { background:rgba(var(--p),.06); }
.faq .ans { padding:0 18px 14px calc(18px + 1em + 12px); color:var(--fg2); font-size:13px; }
.steps3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.steps3 > div { padding:16px 18px; min-width:0; }
.steps3 > div + div { border-left:1px dashed var(--line); }
.steps3 .n { color:var(--amber); font-size:11px; letter-spacing:.14em; }
.steps3 b { display:block; color:var(--hi); margin:4px 0 6px; }
.steps3 p { color:var(--fg2); font-size:12.5px; }
.mbuy { display:none; }

/* ================================================================ 登录 / 注册 / 验证: 全高分屏 */
.auth { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr); height:calc(100vh - var(--bar)); height:calc(100dvh - var(--bar)); min-height:620px; }
.auth-art { position:relative; overflow:hidden; border-right:1px solid var(--line2); }
.auth-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:42% 40%; }
html[data-phosphor="amber"] .auth-art img { filter:hue-rotate(-95deg) saturate(1.15); }
.auth-art::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(1,6,3,.25), rgba(1,6,3,.05) 40%, rgba(1,6,3,.94) 100%), repeating-linear-gradient(180deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px); }
.auth-copy { position:absolute; left:40px; right:40px; bottom:38px; z-index:1; }
.auth-copy .kick { color:var(--amber); }
.auth-copy h2 { font-size:clamp(28px,3vw,46px); margin:10px 0 10px; line-height:1.15; }
.auth-copy p { color:var(--fg2); max-width:520px; }
.auth-copy ul { list-style:none; padding:0; margin:18px 0 0; display:flex; gap:10px; flex-wrap:wrap; }
.auth-copy li { padding:4px 10px; border:1px solid var(--line2); background:rgba(0,0,0,.55); font-size:12.5px; white-space:nowrap; }
.auth-side { display:flex; flex-direction:column; justify-content:center; padding:40px clamp(28px,4vw,64px); min-width:0; overflow:auto; }
.auth-side > .kick { color:var(--amber); }
.auth-side h1 { font-size:clamp(26px,2.4vw,34px); margin:10px 0 6px; }
.auth-side .lead { color:var(--muted); margin-bottom:22px; }
.auth-foot { margin-top:26px; padding-top:16px; border-top:1px dashed var(--line); color:var(--muted); font-size:12.5px; display:flex; gap:16px; flex-wrap:wrap; }
.auth-foot a { color:var(--fg2); }
.auth-foot a:hover { color:var(--ph); }
/* 逐行提示式输入 */
.ask { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:0 12px; padding:14px 0; border-bottom:1px solid var(--line2); transition:border-color .2s, box-shadow .2s; }
.ask:focus-within { border-bottom-color:var(--ph); box-shadow:0 1px 0 var(--ph); }
.ask > .q { color:var(--ph); white-space:nowrap; font-size:13px; }
.ask input { border:0; background:none; box-shadow:none !important; height:30px; padding:0; font-size:16px; }
.ask .aux { display:flex; gap:6px; align-items:center; }
.ask img { height:36px; border:1px solid var(--line2); background:#fff; cursor:pointer; }
.js .ask.later { display:none; }
.js .ask.later.show { display:grid; animation:askIn .35s var(--ease); }
.eye { font:600 11.5px var(--mono); color:var(--muted); background:none; border:1px solid var(--line); height:24px; padding:0 7px; cursor:pointer; white-space:nowrap; text-shadow:none; }
.eye:hover { color:#000; background:var(--ph); border-color:var(--ph); }
.caps { display:none; font-size:10.5px; color:#000; background:var(--amber); padding:0 5px; white-space:nowrap; text-shadow:none; }
.caps.on { display:inline-block; }
.auth-actions { display:flex; align-items:center; gap:14px; margin-top:24px; flex-wrap:wrap; }
.auth-actions .btn { min-width:160px; }
.remember { display:flex; align-items:center; gap:10px; margin-top:6px; }
.wz-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:18px; }
.wz-steps span { padding-top:8px; border-top:3px solid rgba(var(--p),.2); font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wz-steps span.on { border-top-color:var(--ph); color:var(--hi); }
.wz-steps span.done { border-top-color:rgba(var(--p),.6); color:var(--fg2); }
.js .wz-page { display:none; }
.js .wz-page.on { display:block; animation:paneIn .3s var(--ease); }
.pw-meter { display:flex; align-items:center; gap:10px; margin-top:10px; font-size:12px; color:var(--muted); }
.pw-meter .meter { flex:1; height:8px; }
.match { font-size:12px; min-height:1.5em; margin-top:8px; }
.match.ok { color:var(--ph); }
.match.bad { color:var(--red); }
.otp { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; max-width:440px; }
.otp input { height:64px; padding:0; text-align:center; font-size:28px; font-weight:800; }
.otp input.fill { border-color:var(--ph); background:rgba(var(--p),.08); }
.no-js .otp { display:none; }
.js .otp-raw { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }

/* ================================================================ 用户面板 */
.uc { display:grid; grid-template-columns:300px minmax(0,1fr); gap:18px; align-items:start; }
.uc-card { position:sticky; top:calc(var(--bar) + 18px); }
.uc-card .who { display:flex; align-items:center; gap:14px; min-width:0; }
.uc-card .who > div { min-width:0; }
.uc-card .who .nm { font-size:18px; color:var(--hi); font-weight:800; text-shadow:var(--glow); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ring { position:relative; width:150px; height:150px; margin:20px auto 6px; }
.ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.ring .trk { fill:none; stroke:rgba(var(--p),.14); stroke-width:10; stroke-dasharray:4 3; }
.ring .val { fill:none; stroke:var(--ph); stroke-width:10; filter:drop-shadow(0 0 4px rgba(var(--p),.8)); transition:stroke-dashoffset 1.4s var(--ease); }
.ring .c { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.ring .c b { font-size:28px; color:var(--hi); text-shadow:var(--glow); line-height:1.1; }
.ring .c span { font-size:11px; color:var(--muted); letter-spacing:.12em; }
.uc-quick { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.uc-quick .btn { min-width:0; }
.clientpick { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.cp { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 14px; border:1px solid var(--line2); background:rgba(0,0,0,.35); cursor:pointer; color:var(--fg); font:inherit; text-align:left; min-width:0; text-shadow:none; }
.cp b { color:var(--hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.cp i { font-style:normal; font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.cp:hover { border-color:var(--ph); }
.cp.on { border-color:var(--ph); background:rgba(var(--p),.1); box-shadow:inset 3px 0 0 var(--ph); }
.subout { margin-top:20px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:start; }
.subline { display:flex; min-width:0; }
.subline input { flex:1; font-size:12.5px; }
.substeps { margin:16px 0 0; padding:0; list-style:none; counter-reset:s; }
.substeps li { counter-increment:s; position:relative; padding:5px 0 5px 2.2em; color:var(--fg2); font-size:13px; }
.substeps li::before { content:counter(s); position:absolute; left:0; top:7px; width:1.5em; height:1.5em; display:grid; place-items:center; font-size:11px; color:#000; background:var(--ph); text-shadow:none; }
.qrbox { background:#fff; padding:8px; border:1px solid var(--ph); box-shadow:0 0 30px -6px rgba(var(--p),.7); }
.qrbox img { display:block; width:150px; height:150px; }
.lgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.lcard { border:1px solid var(--line2); padding:14px; background:rgba(0,0,0,.35); min-width:0; }
.lcard .h { display:flex; align-items:center; gap:8px; margin-bottom:12px; min-width:0; }
.lcard .h b { color:var(--hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.lcard .h .tag { margin-left:auto; }
.tuts { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.tut { display:flex; flex-direction:column; gap:6px; padding:16px; border:1px solid var(--line2); background:rgba(0,0,0,.35); color:var(--fg); min-width:0; }
.tut:hover { border-color:var(--ph); color:var(--fg); background:rgba(var(--p),.07); }
.tut svg { width:28px; height:28px; color:var(--ph); }
.tut b { color:var(--hi); }
.tut i { font-style:normal; color:var(--muted); font-size:12px; }
.tut .go { color:var(--ph); font-size:12.5px; margin-top:auto; }
canvas.chart { width:100%; display:block; }
.legend { color:var(--muted); font-size:12px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.legend i { width:9px; height:9px; display:inline-block; }

/* ================================================================ 后台 */
.page-h { display:flex; align-items:flex-end; gap:16px; margin-bottom:20px; min-width:0; flex-wrap:wrap; }
.page-h .t { min-width:0; flex:1 1 320px; }
.page-h .kick { color:var(--amber); }
.page-h h2 { font-size:24px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:12px; }
.page-h p { color:var(--muted); font-size:12.5px; margin-top:6px; max-width:760px; }
.page-h .acts { display:flex; gap:10px; flex-wrap:wrap; }
.kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line2); margin-bottom:18px; }
.kpis .rd { padding:16px 18px; }
.kpis .rd .v { font-size:28px; }
.toolbar { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; min-width:0; }
.toolbar .search { flex:1 1 260px; max-width:420px; }
.ulist .ri, .ulist .rows-head { grid-template-columns:34px minmax(0,1.5fr) 74px minmax(0,.7fr) minmax(0,1.3fr) minmax(0,1fr) 44px 18px; }
.ulist .use .meter { height:6px; margin-top:4px; }
.ulist .go { color:var(--muted); }
a.ri:hover .go { color:var(--ph); }
.live-rows .ri, .live-rows .rows-head { grid-template-columns:minmax(0,1.3fr) 64px minmax(0,.9fr) minmax(0,.9fr) minmax(0,.8fr) minmax(0,1.2fr) 44px minmax(0,1.1fr); }
.nstat .ri { grid-template-columns:auto minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr); }
.reg .ri { grid-template-columns:auto minmax(0,1fr) auto auto; }
.nodes-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(440px,1fr)); gap:18px; }
.ncard .mod-b { display:flex; flex-direction:column; gap:16px; }
.ncard .res { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.ncard .res .k { font-size:10.5px; letter-spacing:.14em; color:var(--muted); white-space:nowrap; }
.ncard .res .v { font-size:13px; color:var(--hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ncard .res .meter { height:6px; margin-top:4px; }
.ncard .sec { border-top:1px dashed var(--line); padding-top:14px; }
.ncard .sec > .kick { display:block; margin-bottom:10px; }
.keyline { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); min-width:0; }
.keyline code { flex:1; min-width:0; color:var(--fg2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font:12px var(--mono); }
.inline-act { display:flex; align-items:flex-end; gap:8px; min-width:0; }
.inline-act .f { flex:1; }
.mlist { display:flex; flex-direction:column; }
.mitem { display:grid; grid-template-columns:150px auto minmax(0,1fr); align-items:center; gap:12px; padding:9px 16px; border-bottom:1px dashed var(--line); font-size:12.5px; }
.mitem:last-child { border-bottom:0; }
.mitem .ts { color:var(--muted); white-space:nowrap; }
.mitem .m { color:var(--fg2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:default; }
.mitem.open .m { white-space:normal; word-break:break-all; }
.md { display:grid; grid-template-columns:260px minmax(0,1fr); gap:18px; align-items:start; }
.md-list { display:flex; flex-direction:column; gap:8px; position:sticky; top:calc(var(--bar) + 18px); }
.md-item { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border:1px solid var(--line2); background:var(--scr); cursor:pointer; text-align:left; color:var(--fg); font:inherit; min-width:0; text-shadow:none; }
.md-item b { color:var(--hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:8px; }
.md-item i { font-style:normal; font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.md-item:hover { border-color:var(--ph); }
.md-item.on { border-color:var(--ph); background:rgba(var(--p),.1); box-shadow:inset 3px 0 0 var(--ph); }
.md-item.add { border-style:dashed; }
.md-item.add b { color:var(--ph); }
.js .md-panel { display:none; }
.js .md-panel.on { display:flex; animation:paneIn .3s var(--ease); }
.fsec + .fsec { margin-top:20px; padding-top:18px; border-top:1px dashed var(--line); }
.fsec > .kick { display:block; margin-bottom:12px; color:var(--amber); }
.code { margin:0; padding:12px 14px; background:rgba(0,0,0,.5); border:1px solid var(--line); font:12px/1.8 var(--mono); color:var(--fg2); overflow-x:auto; white-space:pre; }
.code b { color:var(--hi); font-weight:600; }
.pager { display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px dashed var(--line); font-size:12.5px; color:var(--muted); flex-wrap:wrap; }
.subnav { display:flex; flex-direction:column; gap:2px; position:sticky; top:calc(var(--bar) + 18px); }
.subnav a { padding:9px 12px; color:var(--fg2); border-left:2px solid var(--line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.subnav a:hover { color:var(--hi); border-left-color:var(--ph); }
.subnav a.on { color:var(--hi); border-left-color:var(--ph); background:rgba(var(--p),.08); }
.settings { display:grid; grid-template-columns:200px minmax(0,1fr); gap:22px; align-items:start; }
.charts { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
.chart-card, .metric-card { background:rgba(0,0,0,.45); border:1px solid var(--line); padding:10px 12px 6px; min-width:0; }
.chart-card:hover, .metric-card:hover { border-color:var(--line2); }
.chart-title { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:12.5px; white-space:nowrap; overflow:hidden; min-width:0; }
.chart-title b { color:var(--hi); }
.chart-title .now { margin-left:auto; color:var(--hi); overflow:hidden; text-overflow:ellipsis; min-width:0; }
.metrics { display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:14px; }
.metric-head { display:flex; align-items:center; gap:8px; font-size:13px; white-space:nowrap; overflow:hidden; min-width:0; }
.metric-head b { color:var(--hi); }
.metric-head .stale { margin-left:auto; color:var(--muted); font-size:12px; }
.metric-body { display:flex; align-items:center; gap:14px; margin:6px 0 2px; min-width:0; }
.metric-gaugewrap { text-align:center; flex:0 0 auto; }
.metric-gaugewrap .cap { color:var(--muted); font-size:11px; }
.metric-lines { color:var(--muted); font-size:12px; line-height:1.85; flex:1; min-width:0; white-space:nowrap; overflow:hidden; }
.metric-lines b { color:var(--hi); font-weight:600; }
canvas.gauge { display:block; }

/* 关联到外部输入框的表单(节点卡片): 保存条固定在视口底部 */
.savebar.fixed { position:fixed; left:calc(var(--side) + 28px); right:28px; bottom:14px; margin:0; z-index:40; }
.savebar.fixed.second { bottom:76px; }
.no-js [data-next], .no-js [data-prev], .no-js .wz-steps { display:none; }
.page-h > .avatar { align-self:center; }
.ri > form { margin:0; }

/* ================================================================ 入场动画 */
.js .reveal { opacity:0; }
.js .reveal.in { opacity:1; animation:modOn .6s cubic-bezier(.2,.9,.25,1) both; animation-delay:var(--d,0ms); }
.js .seq > * { opacity:0; }
.js .in .seq > *, .js .seq.in > * { animation:lineIn .3s steps(3,end) forwards; animation-delay:calc(var(--i,0) * 50ms + 250ms); }
.js .ws .tile { animation:tileIn .7s cubic-bezier(.2,.9,.25,1) both; animation-delay:calc(var(--t,0) * 90ms); }
.js .ws.zoomed .tile.on { animation:zoomIn .45s var(--ease) both; }

/* ================================================================ 关键帧 */
@keyframes blink { 50% { opacity:0; } }
@keyframes flicker { 0%, 100% { background:transparent; } 41% { background:rgba(0,0,0,.05); } 42% { background:transparent; } 77% { background:rgba(255,255,255,.012); } 78% { background:transparent; } }
@keyframes scanBar { 0% { background-position:0 -50vh, 0 0; } 100% { background-position:0 150vh, 0 0; } }
@keyframes vtOut { to { opacity:0; } }
@keyframes vtIn { from { opacity:0; transform:translateY(6px); } }
@keyframes modOn { 0% { opacity:0; transform:scale(1,.01); filter:brightness(3.5); } 45% { opacity:1; transform:scale(1.01,.04); } 75% { transform:scale(1,1.01); filter:brightness(1.3); } 100% { opacity:1; transform:none; filter:none; } }
@keyframes tileIn { 0% { opacity:0; transform:translateY(14px) scale(.985); filter:brightness(2.5); } 60% { opacity:1; filter:brightness(1.2); } 100% { opacity:1; transform:none; filter:none; } }
@keyframes zoomIn { from { opacity:.3; transform:scale(.96); filter:brightness(2); } to { opacity:1; transform:none; filter:none; } }
@keyframes lineIn { 0% { opacity:0; } 34% { opacity:1; } 67% { opacity:.35; } 100% { opacity:1; } }
@keyframes paneIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes askIn { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:none; } }
@keyframes toastIn { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:none; } }
@keyframes toastOut { to { opacity:0; transform:translateX(30px); } }
@keyframes arcFlow { to { stroke-dashoffset:-180; } }
@keyframes lockOn { 0% { transform:scale(1.8); opacity:0; } 30% { opacity:1; } 60%, 100% { transform:scale(1); opacity:.9; } }
@keyframes sweepX { from { left:-2%; } to { left:102%; } }
@keyframes numFlip { 0% { opacity:0; } 25% { opacity:1; } 50% { opacity:.2; } 100% { opacity:1; } }

/* ================================================================ 中等宽度 */
@media (max-width:1280px) {
  .nodes-cards { grid-template-columns:1fr; }
  .live-rows .ri .c-ip, .live-rows .rows-head .c-ip { display:none; }
  .live-rows .ri, .live-rows .rows-head { grid-template-columns:minmax(0,1.3fr) 64px minmax(0,.9fr) minmax(0,.9fr) minmax(0,.8fr) minmax(0,1.2fr) 44px; }
}
@media (max-width:1100px) {
  .ws { height:auto; min-height:0; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto;
    grid-template-areas:"hero hero" "globe globe" "lines plans" "start start"; }
  .t-hero { min-height:400px; }
  .t-globe { min-height:440px; }
  .t-lines, .t-plans { min-height:330px; }
  .t-topo { min-height:420px; }
  .ws.zoomed .tile.on { min-height:calc(100dvh - var(--bar) - 36px); }
  .cfg, .uc, .md, .settings { grid-template-columns:minmax(0,1fr); }
  .cfg-list, .uc-card, .md-list, .subnav { position:static; }
  .md-list, .subnav { flex-direction:row; overflow-x:auto; scrollbar-width:none; }
  .md-item { flex:0 0 210px; }
  .subnav a { flex:0 0 auto; border-left:0; border-bottom:2px solid var(--line); }
  .subnav a.on { border-bottom-color:var(--ph); }
  .g2, .g3, .g-8-4 { grid-template-columns:minmax(0,1fr); }
  .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .auth { grid-template-columns:minmax(0,1fr) minmax(380px,1fr); }
  .feats3, .steps3 { grid-template-columns:minmax(0,1fr); }
  .steps3 > div + div { border-left:0; border-top:1px dashed var(--line); }
  .ulist .c-tier, .ulist .c-on { display:none; }
  .ulist .ri, .ulist .rows-head { grid-template-columns:34px minmax(0,1.5fr) 74px minmax(0,1.3fr) minmax(0,1fr) 18px; }
}
@media (max-width:1000px) {
  .is-admin .shell { grid-template-columns:minmax(0,1fr); }
  .side { position:fixed; left:0; top:0; bottom:0; width:min(280px,84vw); transform:translateX(-102%); transition:transform .3s var(--ease); }
  .side-open .side { transform:none; box-shadow:0 0 60px rgba(0,0,0,.9); }
  .side-scrim { display:block; position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.6); opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s; }
  .side-open .side-scrim { opacity:1; visibility:visible; }
  .is-admin .bar-menu { display:inline-flex; align-items:center; }
  .savebar.fixed { left:12px; right:12px; }
  .live-rows .c-tier, .live-rows .c-up { display:none; }
  .live-rows .ri, .live-rows .rows-head { grid-template-columns:minmax(0,1.3fr) 64px minmax(0,.9fr) minmax(0,.8fr) minmax(0,1.2fr) 44px; }
}

/* ================================================================ 手机: 单独一套交互 */
@media (max-width:760px) {
  :root { --bar:52px; }
  body { font-size:14px; }
  .is-site .shell { grid-template-columns:minmax(0,1fr); padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  .rail { display:none; }
  .is-site .bar-brand { display:inline-flex; }
  .bar { padding:0 14px; gap:10px; }
  .bar-title .crumb, .bar .clock, .bar .chip-live, .bar .hide-m { display:none; }
  .is-site .bar-title { display:none; }
  .view { padding:14px 12px 30px; }
  .dock { display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:45;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom)); background:rgba(1,6,3,.97); border-top:1px solid var(--line2); }
  .dock a { display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 0; color:var(--muted); font-size:10.5px; text-shadow:none; white-space:nowrap; }
  .dock svg { width:22px; height:22px; }
  .dock a.on { color:var(--hi); }
  .dock a.on svg { color:var(--ph); filter:drop-shadow(0 0 6px rgba(var(--p),.8)); }
  .dock a.mid { position:relative; top:-12px; }
  .dock a.mid svg { width:44px; height:44px; padding:10px; background:var(--ph); color:#000; box-shadow:var(--glow); }
  .dock a.mid.on svg { color:#000; }
  /* 首页 = 启动器 + 全屏 sheet */
  .ws { display:none; }
  .launch { display:block; }
  .lh { position:relative; overflow:hidden; padding:16px; border:1px solid var(--line2); background:var(--scr); }
  .lh .globe-m { position:relative; height:240px; margin:-6px -16px 4px; }
  .lh .globe-m canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:pan-y; }
  .lh .hero-title { font-size:clamp(28px,9vw,40px); }
  .lh .hero-lead { -webkit-line-clamp:4; }
  .lh .hero-cta { margin-top:16px; }
  .apps { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
  .app { position:relative; display:flex; flex-direction:column; gap:4px; padding:14px; min-height:120px; border:1px solid var(--line2); background:var(--scr); color:var(--fg); text-align:left; font:inherit; cursor:pointer; min-width:0; text-shadow:none; }
  .app svg { width:24px; height:24px; color:var(--ph); margin-bottom:4px; }
  .app b { color:var(--hi); font-size:14.5px; }
  .app i { font-style:normal; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .app .v { margin-top:auto; font-size:20px; font-weight:800; color:var(--hi); text-shadow:var(--glow); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .app:active { background:rgba(var(--p),.12); }
  .sheet { position:fixed; inset:0; z-index:120; display:flex; flex-direction:column; background:#010603; transform:translateY(100%); transition:transform .38s var(--ease), visibility .38s; visibility:hidden; }
  .sheet.on { transform:none; visibility:visible; }
  .sheet-h { display:flex; align-items:center; gap:10px; height:54px; padding:0 14px; border-bottom:1px solid var(--line2); flex:0 0 auto; }
  .sheet-h b { color:var(--hi); }
  .sheet-h .icon-btn { margin-left:auto; width:36px; height:36px; }
  .sheet-b { flex:1; overflow:auto; padding:16px 14px calc(30px + env(safe-area-inset-bottom)); }
  .sheet-open body { overflow:hidden; }
  .nodegrid, .planfull { grid-template-columns:minmax(0,1fr); }
  .lrow { grid-template-columns:auto minmax(0,1fr) auto; }
  .lrow .c-on, .lrow .c-td, .lrow .c-pu { display:none; }
  .lrow .c-m { display:block; grid-column:2 / -1; }
  .map-mark .label { display:none; }
  .map-dots { background-size:4px 4px; background-image:radial-gradient(circle, rgba(var(--p),.6) .7px, transparent 1px); }
  /* 价格页: 横滑选择 + 底部购买条 */
  .cfg-list { flex-direction:row; overflow-x:auto; scrollbar-width:none; margin:0 -12px; padding:12px 12px 4px; gap:8px; }
  .cfg-list::-webkit-scrollbar { display:none; }
  .cfg-opt { flex:0 0 74%; }
  .cfg-top .go { display:none; }
  .mbuy { display:flex; align-items:center; gap:12px; position:fixed; left:0; right:0; bottom:calc(64px + env(safe-area-inset-bottom)); z-index:44; padding:10px 14px; background:rgba(1,8,4,.97); border-top:1px solid var(--ph); }
  .mbuy .p { min-width:0; }
  .mbuy .p b { font-size:20px; color:var(--hi); }
  .mbuy .p small { display:block; color:var(--muted); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mbuy .btn { margin-left:auto; }
  .has-mbuy .view { padding-bottom:96px; }
  .spec-r { grid-template-columns:minmax(0,1fr) auto; }
  .spec-r .v.sp { display:none; }
  /* 登录类: 顶部图 + 表单卡片 */
  .auth { grid-template-columns:minmax(0,1fr); height:auto; min-height:calc(100dvh - var(--bar) - 64px); }
  .auth-art { height:210px; border-right:0; border-bottom:1px solid var(--line2); }
  .auth-copy { left:16px; right:16px; bottom:22px; }
  .auth-copy h2 { font-size:24px; margin:6px 0 0; }
  .auth-copy p, .auth-copy ul { display:none; }
  .auth-side { justify-content:flex-start; padding:22px 16px 30px; margin-top:-12px; background:#010603; border-top:1px solid var(--ph); position:relative; }
  .auth-side h1 { font-size:24px; }
  .otp { gap:6px; }
  .otp input { height:54px; font-size:24px; }
  /* 用户面板 */
  .uc-card .ring { width:120px; height:120px; }
  .subout { grid-template-columns:minmax(0,1fr); }
  .subout .qrbox { justify-self:center; }
  .clientpick { grid-template-columns:1fr 1fr; }
  /* 后台 */
  .page-h h2 { font-size:20px; }
  .kpis .rd { padding:12px 14px; }
  .kpis .rd .v { font-size:22px; }
  .fgrid, .fgrid.c3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fgrid.c2 { grid-template-columns:minmax(0,1fr); }
  .fgrid .f.full-m { grid-column:1 / -1; }
  .sws { grid-template-columns:minmax(0,1fr); }
  .nodes-cards { grid-template-columns:minmax(0,1fr); }
  .mitem { grid-template-columns:auto minmax(0,1fr); }
  .mitem .ts { grid-column:1 / -1; }
  .charts, .metrics { grid-template-columns:minmax(0,1fr); }
  .ulist .rows-head { display:none; }
  .ulist .ri { grid-template-columns:34px minmax(0,1fr) auto; }
  .ulist .ri .use { grid-column:2 / 4; }
  .ulist .ri .c-exp, .ulist .ri .go { display:none; }
  .live-rows .rows-head { display:none; }
  .live-rows .ri { grid-template-columns:minmax(0,1fr) auto; }
  .live-rows .ri > :not(.c-user):not(.c-down) { display:none; }
  .nstat .ri { grid-template-columns:auto minmax(0,1fr) auto; }
  .nstat .ri .c-res, .nstat .ri .c-quota { grid-column:2 / 4; }
  .savebar { bottom:10px; }
  .savebar .msg .long { display:none; }
  input, select, textarea, .ask input { font-size:16px; }
  .toasts { top:auto; bottom:calc(76px + env(safe-area-inset-bottom)); right:12px; width:calc(100% - 24px); }
  .is-admin .toasts { bottom:16px; }
}
@media (max-width:420px) {
  .fgrid, .fgrid.c3 { grid-template-columns:minmax(0,1fr); }
  .ncard .res { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ================================================================ 减少动态 */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0s !important; }
  .js .reveal, .js .seq > *, .js .boot .ln, .js .ws .tile { opacity:1 !important; animation:none !important; transform:none !important; }
  .js .crt, .cursor, .led { animation:none !important; }
}

/* ================================================================ CRT 显示器模型(登录页, templates/_crt.html + static/crt.js)
 * 类名用 mon- 前缀(.crt 已被全屏扫描线层占用)。模型尺寸 = N × --u, 机身宽高 = --bw × --bh 个单位(640~960 × 540~720),
 * 三个变量都由 crt.js 按可视区计算: 动画结束(.zoom)时无缩放、正面朝前、机身撑满整个舞台,
 * 屏幕里的内容是原生像素(清晰, 鼠标可以直接点输入框 / 按钮)。 */
.mon-stage { --u:1px; --bw:640; --bh:540; position:relative; isolation:isolate; height:calc(100vh - var(--bar)); height:calc(100dvh - var(--bar)); min-height:600px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; perspective:calc(2400 * var(--u)); perspective-origin:50% 40%; }
.mon-floor { position:absolute; left:0; right:0; bottom:0; height:34%; pointer-events:none; z-index:-1;
  background:radial-gradient(50% 80% at 50% 0%, rgba(var(--p),.12), transparent 70%), linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.65));
  border-top:1px solid rgba(var(--p),.1); transition:opacity 1s; }
.mon-floor { display:none; }
.mon { position:relative; transform-style:preserve-3d; }
.mon-rig { position:relative; transform-style:preserve-3d; transform-origin:50% 42%; }
.js .mon-rig { transform:none; }                         /* 不做转入 / 推近动画: 一打开显示器正面就铺满舞台 */
.js .mon.instant .mon-rig { transition:none !important; }
.js .mon.live .mon-rig { will-change:auto; }
.mon-body { position:relative; width:calc(var(--bw) * var(--u)); height:calc(var(--bh) * var(--u)); transform-style:preserve-3d; }
/* 机壳正面: 塑料颗粒 + 倒角高光 */
.mon-front { position:absolute; inset:0; display:flex; flex-direction:column; padding:calc(34 * var(--u)) calc(36 * var(--u)) 0;
  border-radius:calc(32 * var(--u)) calc(32 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u));
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"),
    linear-gradient(168deg, #3e443f 0%, #2a2f2b 30%, #1a1e1b 62%, #121513 100%);
  box-shadow:
    inset 0 calc(2 * var(--u)) 0 rgba(255,255,255,.17), inset 0 calc(5 * var(--u)) calc(8 * var(--u)) rgba(255,255,255,.04),
    inset 0 calc(-5 * var(--u)) 0 rgba(0,0,0,.55), inset calc(3 * var(--u)) 0 calc(5 * var(--u)) rgba(255,255,255,.05),
    inset calc(-3 * var(--u)) 0 calc(5 * var(--u)) rgba(0,0,0,.45), 0 0 0 calc(1 * var(--u)) #050605; }
.mon-front::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(70% 50% at 50% 40%, rgba(var(--p),.10), transparent 70%); }
.mon-screw { position:absolute; width:calc(9 * var(--u)); height:calc(9 * var(--u)); border-radius:50%; pointer-events:none;
  background:linear-gradient(45deg, transparent 42%, #0b0d0b 42%, #0b0d0b 58%, transparent 58%), radial-gradient(circle at 35% 30%, #6b736c, #262a27 70%);
  box-shadow:0 calc(1 * var(--u)) calc(1 * var(--u)) rgba(0,0,0,.8); }
.mon-screw.tl { left:calc(13 * var(--u)); top:calc(13 * var(--u)); }
.mon-screw.tr { right:calc(13 * var(--u)); top:calc(13 * var(--u)); transform:rotate(35deg); }
.mon-screw.bl { left:calc(13 * var(--u)); bottom:calc(13 * var(--u)); transform:rotate(-20deg); }
.mon-screw.br { right:calc(13 * var(--u)); bottom:calc(13 * var(--u)); transform:rotate(70deg); }
/* 侧面 / 顶面 / 底面(向后收窄), 带散热格栅 */
.cf { position:absolute; display:block; pointer-events:none; }
.cf.l, .cf.r { top:0; width:calc(320 * var(--u)); height:100%; }
.cf.l { left:0; transform-origin:left center; transform:rotateY(90deg); clip-path:polygon(0 0,100% 16%,100% 82%,0 100%);
  background:repeating-linear-gradient(90deg, transparent 0 calc(200 * var(--u)), rgba(0,0,0,.55) calc(200 * var(--u)) calc(203 * var(--u)), transparent calc(203 * var(--u)) calc(209 * var(--u))),
    linear-gradient(90deg,#2a2f2b,#141714); }
.cf.r { right:0; transform-origin:right center; transform:rotateY(-90deg); clip-path:polygon(0 16%,100% 0,100% 100%,0 82%);
  background:repeating-linear-gradient(270deg, transparent 0 calc(200 * var(--u)), rgba(0,0,0,.55) calc(200 * var(--u)) calc(203 * var(--u)), transparent calc(203 * var(--u)) calc(209 * var(--u))),
    linear-gradient(270deg,#1c201d,#0a0c0a); }
.cf.t, .cf.b { left:0; width:100%; height:calc(320 * var(--u)); }
.cf.t { top:0; transform-origin:center top; transform:rotateX(-90deg); clip-path:polygon(0 0,100% 0,84% 100%,16% 100%);
  background:repeating-linear-gradient(90deg, transparent 0 calc(10 * var(--u)), rgba(0,0,0,.5) calc(10 * var(--u)) calc(13 * var(--u))) center 40% / 60% 30% no-repeat,
    linear-gradient(180deg,#323834,#141714); }
.cf.b { bottom:0; transform-origin:center bottom; transform:rotateX(90deg); background:#090b09; clip-path:polygon(16% 0,84% 0,100% 100%,0 100%); }
/* 阶梯式内凹边框 + 凸面玻璃 */
.mon-bezel { position:relative; flex:1 1 auto; min-height:0; padding:calc(18 * var(--u)); border-radius:calc(26 * var(--u));
  background:linear-gradient(180deg,#0a0c0a,#171b17);
  box-shadow:0 calc(-1 * var(--u)) 0 rgba(0,0,0,.6), 0 calc(2 * var(--u)) 0 rgba(255,255,255,.09),
    inset 0 calc(12 * var(--u)) calc(20 * var(--u)) rgba(0,0,0,.95), inset 0 0 0 calc(3 * var(--u)) #0a0c0a, inset 0 0 0 calc(4 * var(--u)) rgba(255,255,255,.035); }
.mon-glass { position:relative; height:100%; overflow:hidden; border-radius:calc(48 * var(--u)) / calc(36 * var(--u));
  background:radial-gradient(120% 100% at 50% 50%, #0b2615 0%, #04130a 60%, #010603 100%);
  box-shadow:0 0 0 calc(3 * var(--u)) #040504, inset 0 0 calc(80 * var(--u)) rgba(0,0,0,.9), inset 0 0 0 calc(2 * var(--u)) rgba(0,0,0,.85), 0 0 calc(50 * var(--u)) calc(-6 * var(--u)) rgba(var(--p),.45);
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='22'%3E%3Cpath d='M1 1v17l4-4 3 7 3-1-3-7h6z' fill='%2339ff88' stroke='%23001a08' stroke-width='1.2'/%3E%3C/svg%3E") 1 1, default; }
html[data-phosphor="amber"] .mon-glass { background:radial-gradient(120% 100% at 50% 50%, #2a1a06 0%, #140c03 60%, #060301 100%);
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='22'%3E%3Cpath d='M1 1v17l4-4 3 7 3-1-3-7h6z' fill='%23ffb43a' stroke='%231a0e00' stroke-width='1.2'/%3E%3C/svg%3E") 1 1, default; }
.mon-glass input, .mon-glass textarea { cursor:text; }
.mon-glass a, .mon-glass button, .mon-glass label.switch, .mon-glass img { cursor:pointer; }
.mon-content { position:absolute; inset:0; z-index:1; overflow:auto; scrollbar-width:none; container-type:inline-size;
  padding:calc(22px + 1.4vh) calc(26px + 2.4vw) calc(18px + 1vh); font-size:clamp(14px, calc(10px + .3vw), 16px); text-shadow:0 0 5px rgba(var(--p),.6); }
.mon-content::-webkit-scrollbar { display:none; }
.js .mon .mon-content { opacity:0; visibility:hidden; transition:opacity .25s, visibility 0s .25s; }
.js .mon.on:not(.off) .mon-content { opacity:1; visibility:visible; transition:opacity .25s, visibility 0s; }  /* 立即可见, 跳过开机时才能马上把焦点给输入框 */
.mon-scan, .mon-glare, .mon-pow { position:absolute; inset:0; z-index:2; pointer-events:none; }
.mon-scan { background:repeating-linear-gradient(180deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }
.mon-scan::after { content:""; position:absolute; left:0; right:0; height:22%; top:-22%; background:linear-gradient(180deg, transparent, rgba(var(--p),.07), transparent); animation:monRoll 6s linear infinite; }
.mon-glare { border-radius:inherit;
  background:
    radial-gradient(48% 34% at calc(26% - var(--gx,0px)) calc(14% - var(--gy,0px)), rgba(255,255,255,.11), transparent 64%),
    linear-gradient(172deg, rgba(255,255,255,.06) 0%, transparent 9%),
    radial-gradient(135% 115% at 50% 50%, transparent 60%, rgba(0,0,0,.72) 100%); }
.mon.noscan .mon-scan { opacity:0; }
.mon-scan { transition:opacity .3s; }
.mon.degauss .mon-content { animation:monDeg .9s cubic-bezier(.2,.7,.3,1); }
.mon-glass::after { content:""; position:absolute; inset:-30%; z-index:3; pointer-events:none; opacity:0; mix-blend-mode:screen;
  background:conic-gradient(from 0deg, rgba(255,0,120,.35), rgba(0,200,255,.35), rgba(120,255,0,.35), rgba(255,180,0,.35), rgba(255,0,120,.35)); }
.mon.degauss .mon-glass::after { animation:monDegRing .9s ease-out; }
.mon-pow { opacity:0; background:radial-gradient(closest-side, #f4fff8 0%, rgba(var(--p),.95) 45%, rgba(var(--p),0) 100%); }
.mon.pow .mon-pow { animation:monPowOn .95s cubic-bezier(.2,.8,.2,1) forwards; }
.mon.off .mon-pow { animation:monPowOff .55s ease-in forwards; }
/* 下巴: 铭牌 / 喇叭网 / 旋钮 / 电源 */
.mon-chin { position:relative; flex:0 0 calc(100 * var(--u)); display:flex; align-items:center; gap:calc(22 * var(--u)); padding:0 calc(8 * var(--u)); }
.mon-badge { position:relative; display:flex; flex-direction:column; justify-content:center; padding:calc(5 * var(--u)) calc(12 * var(--u)); border-radius:calc(3 * var(--u));
  background:linear-gradient(180deg,#a7b0a8,#5f6760); box-shadow:inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.5), 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.7); text-shadow:none; }
.mon-badge b { font:900 calc(15 * var(--u)) var(--mono); letter-spacing:.24em; color:#151816; text-shadow:0 calc(1 * var(--u)) 0 rgba(255,255,255,.35); line-height:1.25; }
.mon-badge span { font:700 calc(8 * var(--u)) var(--mono); letter-spacing:.2em; color:#2c312d; white-space:nowrap; line-height:1.4; }
.mon-badge i { position:absolute; right:calc(-26 * var(--u)); top:calc(6 * var(--u)); bottom:calc(6 * var(--u)); width:calc(18 * var(--u));
  background:linear-gradient(90deg, var(--ph) 0 33%, #ffb43a 33% 66%, #ff5f56 66%); clip-path:polygon(30% 0,100% 0,70% 100%,0 100%); opacity:.85; }
.mon-grille { flex:1; height:calc(42 * var(--u)); margin-left:calc(14 * var(--u)); border-radius:calc(4 * var(--u));
  background:radial-gradient(circle, #040504 0 calc(1.6 * var(--u)), transparent calc(2 * var(--u))) 0 0 / calc(7 * var(--u)) calc(7 * var(--u)); box-shadow:inset 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.6); opacity:.9; }
.mon-panel { display:flex; align-items:center; gap:calc(14 * var(--u)); padding:calc(6 * var(--u)) calc(10 * var(--u)); border-radius:calc(6 * var(--u));
  background:linear-gradient(180deg,#141714,#1e221f); box-shadow:inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.8), 0 calc(1 * var(--u)) 0 rgba(255,255,255,.07); }
.mon-knob { display:flex; flex-direction:column; align-items:center; gap:calc(3 * var(--u)); cursor:ns-resize; touch-action:none; outline:0; user-select:none; -webkit-user-select:none; }
.mon-knob:hover i, .mon-knob.drag i { box-shadow:0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.8), inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.12), 0 0 0 calc(2 * var(--u)) rgba(var(--p),.35); }
.mon-knob:focus-visible i { outline:2px dashed var(--amber); outline-offset:3px; }
.mon-knob:hover em, .mon-knob.drag em { color:#9aa39b; }
.mon-knob i { position:relative; width:calc(28 * var(--u)); height:calc(28 * var(--u)); border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #59605a 0 28%, #232724 52%, transparent 54%), repeating-conic-gradient(#2c312d 0 7deg, #121512 7deg 14deg);
  box-shadow:0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.8), inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.12); }
.mon-knob i::after { content:""; position:absolute; left:50%; top:calc(4 * var(--u)); width:calc(2 * var(--u)); height:calc(8 * var(--u)); margin-left:calc(-1 * var(--u));
  background:#aab3ab; transform-origin:50% calc(10 * var(--u)); transform:rotate(var(--k,0deg)); }
.mon-knob em, .mon-mini em, .mon-power em { font:600 calc(7 * var(--u)) var(--mono); letter-spacing:.18em; color:#5f6760; font-style:normal; text-shadow:none; white-space:nowrap; line-height:1.3; }
.mon-mini { display:grid; grid-template-columns:repeat(3,auto); gap:calc(4 * var(--u)) calc(6 * var(--u)); justify-items:center; }
.mon-mini button { position:relative; width:calc(17 * var(--u)); height:calc(11 * var(--u)); padding:0; border:0; border-radius:calc(2 * var(--u)); cursor:pointer;
  background:linear-gradient(180deg,#3a403b,#191c19); box-shadow:0 calc(2 * var(--u)) 0 #050605, inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.14); transition:transform .08s, box-shadow .08s; }
.mon-mini button::after { content:""; position:absolute; left:50%; top:calc(3 * var(--u)); width:calc(5 * var(--u)); height:calc(2 * var(--u)); margin-left:calc(-2.5 * var(--u)); background:#4b524c; border-radius:1px; transition:background .15s, box-shadow .15s; }
.mon-mini button:hover { background:linear-gradient(180deg,#4a514b,#222622); }
.mon-mini button:active { transform:translateY(calc(1.5 * var(--u))); box-shadow:0 calc(.5 * var(--u)) 0 #050605; }
.mon-mini button:focus-visible { outline:2px dashed var(--amber); outline-offset:2px; }
.mon-mini button[aria-pressed="true"]::after { background:var(--ph); box-shadow:0 0 calc(4 * var(--u)) var(--ph); }
html[data-phosphor="amber"] .mon-mini [data-phosphor-toggle]::after { background:#ffb43a; box-shadow:0 0 calc(4 * var(--u)) #ffb43a; }
.mon-mini em { grid-column:1 / -1; }
.mon-power { display:grid; grid-template-columns:auto auto; align-items:center; gap:calc(3 * var(--u)) calc(8 * var(--u)); }
.mon-power em { grid-column:1 / -1; text-align:center; }
.mon-btn { position:relative; width:calc(38 * var(--u)); height:calc(26 * var(--u)); padding:0; border:0; border-radius:calc(5 * var(--u)); cursor:pointer;
  background:linear-gradient(180deg,#3a403b 0 48%,#1a1d1a 52% 100%); box-shadow:0 calc(3 * var(--u)) 0 #050605, inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.18); transition:transform .08s, box-shadow .08s; }
.mon-btn i { position:absolute; left:50%; top:50%; width:calc(10 * var(--u)); height:calc(10 * var(--u)); margin:calc(-5 * var(--u)) 0 0 calc(-5 * var(--u));
  border:calc(1.5 * var(--u)) solid #7e877f; border-top-color:transparent; border-radius:50%; }
.mon-btn i::after { content:""; position:absolute; left:50%; top:calc(-4 * var(--u)); width:calc(1.5 * var(--u)); height:calc(6 * var(--u)); margin-left:calc(-.75 * var(--u)); background:#7e877f; }
.mon-btn:hover i { border-color:#b9c2ba; border-top-color:transparent; }
.mon-btn:hover i::after { background:#b9c2ba; }
.mon-btn:active { transform:translateY(calc(2 * var(--u))); box-shadow:0 calc(1 * var(--u)) 0 #050605; }
.mon-btn:focus-visible { outline:2px dashed var(--amber); outline-offset:3px; }
.mon-led { width:calc(8 * var(--u)); height:calc(8 * var(--u)); border-radius:50%; background:#2a120b; box-shadow:inset 0 0 calc(2 * var(--u)) #000; transition:background .2s, box-shadow .2s; }
.mon.pow .mon-led, .mon.on .mon-led { background:var(--ph); box-shadow:0 0 calc(8 * var(--u)) var(--ph), 0 0 calc(2 * var(--u)) #fff; }
.mon.off .mon-led { background:#8a2e12; box-shadow:0 0 calc(6 * var(--u)) rgba(255,90,40,.7); }
/* 底座(俯仰 / 旋转支架), 在机身后下方 */
.mon-base { position:absolute; left:50%; top:calc((var(--bh) - 20) * var(--u)); width:0; height:0; transform-style:preserve-3d; }
.mon-base .neck { position:absolute; left:calc(-120 * var(--u)); top:0; width:calc(240 * var(--u)); height:calc(64 * var(--u)); transform:translateZ(calc(-170 * var(--u)));
  background:linear-gradient(180deg,#171a17,#0b0d0b); clip-path:polygon(18% 0,82% 0,100% 100%,0 100%); }
.mon-base .disc { position:absolute; left:calc(-200 * var(--u)); top:calc(52 * var(--u)); width:calc(400 * var(--u)); height:calc(30 * var(--u)); transform:translateZ(calc(-110 * var(--u)));
  border-radius:50% 50% calc(10 * var(--u)) calc(10 * var(--u)) / 100% 100% calc(10 * var(--u)) calc(10 * var(--u));
  background:linear-gradient(180deg,#2e332f,#0d0f0d); box-shadow:0 calc(16 * var(--u)) calc(30 * var(--u)) calc(-6 * var(--u)) rgba(0,0,0,.9), inset 0 calc(2 * var(--u)) 0 rgba(255,255,255,.1); }
/* 屏幕里的内容: 开机日志 → 登录提示(左) + 系统面板(右, 屏幕够宽时) */
.mon-grid { display:grid; grid-template-columns:minmax(0,1fr); column-gap:clamp(28px,5cqw,80px); align-content:center; min-height:100%; }
.mon-head { grid-column:1 / -1; display:flex; justify-content:space-between; gap:12px; font-size:11.5px; letter-spacing:.14em; color:var(--muted); padding-bottom:8px; border-bottom:1px dashed rgba(var(--p),.25); margin-bottom:16px; white-space:nowrap; align-self:start; }
.mon-boot .bl { font-size:13px; color:var(--fg2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mon-boot .bl b { color:var(--ph); font-weight:700; }
.js .mon-boot .bl { visibility:hidden; }
.js .mon-boot .bl.v { visibility:visible; }
.js .mon.ready .mon-boot { display:none; }
.js .mon:not(.ready) .mon-login { display:none; }
.mon-login { min-width:0; max-width:580px; animation:paneIn .35s var(--ease); }
.mon-login h1 { font-size:clamp(26px, 2.1vw, 38px); margin:2px 0 2px; color:var(--hi); text-shadow:var(--glow); }
.mon-login .lead { color:var(--muted); font-size:13px; margin:0 0 6px; }
.mon-login .ask { padding:10px 0; }
.mon-login .remember { margin-top:8px; }
.mon-login .auth-actions { display:flex; align-items:center; flex-wrap:wrap; margin-top:16px; gap:14px; }
.mon-login .auth-actions .btn { min-width:170px; height:44px; }
.mon-login .alt { margin-top:16px; font-size:12.5px; color:var(--muted); display:flex; gap:8px 18px; flex-wrap:wrap; }
.mon-login .alt a { color:var(--fg2); }
.mon-login .alt a:hover { color:var(--ph); }
.mon-login .flash { margin:6px 0; padding:6px 10px; font-size:12.5px; }
.mon-login .lead a { color:var(--fg2); }
.mon-login .wz-steps { margin:4px 0 10px; }
.mon-login .note { font-size:12px; }
.mon-login .mod { background:rgba(0,0,0,.25); }
.mon-login .otp { margin-top:8px; }
.mon-login .otp input { height:56px; }
.mon-login .auth-foot { margin-top:16px; padding-top:12px; }
.mon-side { display:none; min-width:0; flex-direction:column; gap:10px; padding-left:clamp(20px,3cqw,44px); border-left:1px dashed rgba(var(--p),.28); align-self:center; }
.mon-map-h { display:flex; justify-content:space-between; gap:12px; font-size:11px; letter-spacing:.14em; color:var(--muted); white-space:nowrap; }
.mon-map-h span:last-child { color:var(--ph); }
.mon-map { position:relative; aspect-ratio:360 / 140; border:1px solid rgba(var(--p),.28); background:rgba(0,0,0,.25);
  box-shadow:inset 0 0 30px rgba(0,0,0,.6), 0 0 18px -8px rgba(var(--p),.5); }
.mon-map::before, .mon-map::after { content:""; position:absolute; width:10px; height:10px; border:1px solid var(--ph); pointer-events:none; }
.mon-map::before { left:-3px; top:-3px; border-right:0; border-bottom:0; }
.mon-map::after { right:-3px; bottom:-3px; border-left:0; border-top:0; }
.mon-map canvas { position:absolute; inset:0; width:100%; height:100%; }
.mon-nodes { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 18px; font-size:12px; }
.mon-nodes li { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; white-space:nowrap; min-width:0; }
.mon-nodes i { width:7px; height:7px; background:var(--amber); }
.mon-nodes li.on i { background:var(--ph); box-shadow:0 0 6px var(--ph); animation:blink 1.6s steps(1) infinite; }
.mon-nodes b { color:var(--fg2); font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.mon-nodes em { font-style:normal; font-size:10.5px; letter-spacing:.08em; color:var(--amber); }
.mon-nodes li.on em { color:var(--muted); }
.mon-hint { font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mon-hint kbd { font-size:10px; }
@container (min-width:840px) {
  .js .mon.ready .mon-grid { grid-template-columns:minmax(0,560px) minmax(0,1fr); }
  .js .mon.ready .mon-side { display:flex; grid-column:2; grid-row:2; }
  .mon-login { grid-column:1; grid-row:2; }
}
@keyframes monPowOn { 0% { opacity:1; transform:scale(.004,.004); } 16% { opacity:1; transform:scale(1.08,.006); } 30% { opacity:1; transform:scale(1,.006); } 55% { opacity:.95; transform:scale(1,1); } 100% { opacity:0; transform:scale(1,1); } }
@keyframes monPowOff { 0% { opacity:0; transform:scale(1,1); } 12% { opacity:.9; transform:scale(1,1); } 50% { opacity:1; transform:scale(1,.006); } 85% { opacity:1; transform:scale(.004,.004); } 100% { opacity:0; transform:scale(0,0); } }
@keyframes monRoll { to { top:100%; } }
@keyframes monDeg { 0% { transform:none; filter:none; } 8% { transform:skewX(6deg) scale(1.04,.97); filter:hue-rotate(80deg) saturate(2.6) brightness(1.5); }
  20% { transform:skewX(-4.5deg) scale(.98,1.03); filter:hue-rotate(-60deg) saturate(2.2); } 34% { transform:skewX(3deg); filter:hue-rotate(40deg) saturate(1.8); }
  50% { transform:skewX(-1.6deg); filter:hue-rotate(-20deg) saturate(1.4); } 68% { transform:skewX(.8deg); filter:hue-rotate(8deg); } 100% { transform:none; filter:none; } }
@keyframes monDegRing { 0% { opacity:.9; transform:rotate(0) scale(.6); } 100% { opacity:0; transform:rotate(200deg) scale(1.5); } }
@media (max-width:760px) {
  .mon-stage { --u:.8px; height:auto; min-height:calc(100dvh - var(--bar) - 64px); perspective:none; align-items:flex-start; padding:12px 8px 20px; }
  .mon, .mon-body { width:100%; }
  .mon-body { height:auto; }
  .js .mon-rig, .js .mon.in .mon-rig, .js .mon.zoom .mon-rig { transform:none; }
  .js .mon:not(.in) .mon-rig { opacity:0; }
  .mon-front { position:relative; padding:14px 12px 0; border-radius:18px 18px 14px 14px; }
  .cf, .mon-base, .mon-grille, .mon-screw.bl, .mon-screw.br { display:none; }
  .mon-bezel { padding:8px; border-radius:16px; }
  .mon-glass { height:auto; min-height:450px; border-radius:26px / 20px; cursor:auto; }
  html[data-phosphor="amber"] .mon-glass { cursor:auto; }
  .mon-content { position:relative; inset:auto; padding:18px 16px 20px; }
  .mon-chin { flex-basis:76px; justify-content:space-between; gap:8px; padding:0 2px; }
  .mon-badge i { display:none; }
  .mon-panel { gap:calc(10 * var(--u)); padding:calc(5 * var(--u)) calc(8 * var(--u)); }
  .mon-login .ask input { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) {
  .js .mon .mon-content { opacity:1 !important; visibility:visible !important; }
  .js .mon-boot .bl { visibility:visible !important; }
}

/* ================================================================ 首页「网络拓扑」(templates/_topo.html) — 冷战指挥中心风格 */
.t-topo .tile-b { padding:8px 10px 8px; }
.topo-box { display:flex; flex-direction:column; flex:1; min-height:0; }
.topo-svg { flex:1; min-height:0; width:100%; height:100%; font-family:var(--mono); }
.tp-grid { fill:none; stroke:rgba(var(--p),.08); stroke-width:1; }
.tp-box { fill:#031008; stroke:rgba(var(--p),.75); stroke-width:1.3; }
.tp-scr { fill:#062a14; stroke:rgba(var(--p),.45); stroke-width:1; }
.tp-win { fill:#020a05; stroke:rgba(var(--p),.45); stroke-width:1; }
.tp-plate { fill:rgba(var(--p),.14); stroke:rgba(var(--p),.5); stroke-width:.8; }
.tp-cup { fill:#020a05; stroke:rgba(var(--p),.6); stroke-width:1.2; }
.tp-jn { fill:#062a14; }
.tp-line { fill:none; stroke:rgba(var(--p),.55); stroke-width:1.4; stroke-dasharray:4 3; animation:tpDash 1.1s linear infinite; }
.tp-line.off { stroke:rgba(255,180,58,.6); animation:none; }
.tp-bus { stroke:rgba(var(--p),.35); stroke-width:1.2; stroke-dasharray:2 3; }
.tp-lbl { fill:var(--fg2); font-size:9px; letter-spacing:.08em; }
.tp-t { fill:var(--hi); font-size:12px; font-weight:700; }
.tp-s { fill:var(--muted); font-size:7.5px; letter-spacing:.06em; }
.tp-s.tp-hi { fill:var(--fg2); }
.tp-dim { fill:var(--dim); }
.tp-amber { fill:var(--amber); }
.tp-name { fill:var(--hi); font-size:10.5px; font-weight:700; }
.tp-cur { fill:var(--ph); animation:tpBlink var(--d,1s) steps(1) infinite; }
.tp-led { fill:var(--ph); animation:tpBlink var(--d,.8s) steps(1) infinite; }
.tp-led.a { fill:var(--amber); }
.tp-sw { fill:#0a1a10; stroke:rgba(var(--p),.5); stroke-width:.8; }
.tp-sw.on { fill:rgba(var(--p),.55); }
.tp-vent { stroke:rgba(var(--p),.3); stroke-width:1; }
.tp-rail { fill:rgba(var(--p),.18); }
.lamp { fill:var(--ph); animation:tpBlink var(--d,1s) steps(1) infinite; animation-delay:var(--o,0s); }
.lamp.a { fill:var(--amber); }
.reel { transform-box:fill-box; transform-origin:center; animation:tpSpin 2.8s linear infinite; }
.reel.r2 { animation-duration:4.1s; animation-direction:reverse; }
.tp-reel { fill:#020a05; stroke:rgba(var(--p),.8); stroke-width:1.2; }
.tp-hub { fill:rgba(var(--p),.35); }
.tp-spoke { fill:none; stroke:rgba(var(--p),.8); stroke-width:1.4; }
.tp-pk rect { fill:var(--hi); filter:drop-shadow(0 0 3px rgba(var(--p),.9)); }
.tp-pk rect.back { fill:var(--amber); filter:drop-shadow(0 0 3px rgba(255,180,58,.8)); }
.tp-dish { transform-box:fill-box; transform-origin:50% 100%; animation:tpRock 5s ease-in-out infinite; }
.tp-wave { fill:none; stroke:var(--ph); stroke-width:1.2; opacity:0; transform-box:fill-box; transform-origin:50% 100%; animation:tpWave 2.4s ease-out infinite; }
.tp-wave.w2 { animation-delay:1.2s; }
.tp-rack.off .tp-box { stroke:var(--amber); }
.tp-rack.off .lamp { fill:var(--amber); animation:none; opacity:.5; }
.topo-tick { flex:0 0 auto; overflow:hidden; white-space:nowrap; border-top:1px dashed var(--line); margin-top:4px; padding-top:4px; font-size:11px; color:var(--fg2);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.topo-tick span { display:inline-block; padding-left:100%; animation:tpTick 34s linear infinite; }
.topo-more { display:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:16px; }
.ws.zoomed .tile.on .topo-more, .sheet .topo-more { display:grid; }
.ws.zoomed .tile.on .topo-box { min-height:100%; }
.ws.zoomed .tile.on .topo-svg { flex:none; height:min(62vh, 640px); }
.sheet .topo-svg { flex:none; height:auto; aspect-ratio:520 / 360; }
@keyframes tpBlink { 50% { opacity:.15; } }
@keyframes tpSpin { to { transform:rotate(360deg); } }
@keyframes tpDash { to { stroke-dashoffset:-14; } }
@keyframes tpRock { 0%, 100% { transform:rotate(-14deg); } 50% { transform:rotate(14deg); } }
@keyframes tpWave { 0% { opacity:.9; transform:scale(.6); } 100% { opacity:0; transform:scale(1.7); } }
@keyframes tpTick { to { transform:translateX(-100%); } }
@media (max-width:1100px) { .topo-more { grid-template-columns:minmax(0,1fr); } }
@media (max-width:760px) { .topo-more { grid-template-columns:minmax(0,1fr); } }