/* ============================================================
   天空魔术师开放平台 — 控制台设计系统 v2
   令牌定义见下。
   ============================================================ */

/* ---------- 1. 令牌 ---------- */
:root{
  /* 层次阶梯：自底向上递亮 */
  --void:#070B10;
  --bg:#0A0F15;
  --bg2:#0E141D;
  --surf:#121B26;
  --surf2:#1B2632;
  --surf3:#243240;

  --line:#223040;
  --line2:#324658;

  --tx:#F3F7FB;
  --tx2:#C2CFDC;
  --tx3:#8597AA;

  /* 品牌与强调 */
  --brand:#009FE8;
  --accent:#47B1EC;
  --accent2:#6FE0D4;
  --cyan:#5FD9D1;

  /* 语义状态：全站共用的单一色板 */
  --sev-offline:#5A6472;
  --sev-unverified:#F4F7FB;
  --sev-severe:#F56555;
  --sev-warning:#F0A63C;
  --sev-ready:#47B1EC;
  --sev-normal:#43D082;
  --ring-armed:#B07BE8;
  --ring-select:#F0B446;
  --benchmark:#22D3EE;

  --green:#43D082;
  --amber:#F0B446;
  --red:#F56555;
  --violet:#A99BFF;

  /* 实心操作按钮 */
  --fill:#2C73B5;
  --fill-hi:#3A88CE;
  --on-fill:#F7FBFF;

  /* 徽底 */
  --blue-dim:#15314D;
  --green-dim:#14392B;
  --amber-dim:#352810;
  --red-dim:#391F22;
  --violet-dim:#241F44;

  /* 玻璃高光 */
  --glass:rgba(200,245,255,.11);
  --glass-hi:rgba(200,245,255,.20);
  --shade:rgba(0,0,0,.50);

  --f-disp:'Archivo','PingFang SC','Noto Sans SC','Microsoft YaHei UI','Microsoft YaHei',sans-serif;
  --f-body:'PingFang SC','Noto Sans SC','IBM Plex Sans','Microsoft YaHei UI',sans-serif;
  --f-mono:'IBM Plex Mono','SF Mono',ui-monospace,Menlo,Consolas,monospace;

  --wrap:1280px;
  --gut:clamp(18px,3.6vw,48px);
  --sec:clamp(56px,7vw,96px);
  --r-s:8px; --r-m:12px; --r-l:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--tx);
  font-family:var(--f-body);font-size:16px;line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:var(--void);
  position:relative;
}
/* 座舱顶光 + 碳纤维织纹：单独一层 fixed 伪元素，避免 background-attachment:fixed 拖垮合成 */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 660px at 64% -10%, rgba(71,177,236,.24), transparent 64%),
    radial-gradient(880px 520px at 4% 8%, rgba(0,159,232,.11), transparent 62%),
    linear-gradient(180deg,var(--bg) 0%,var(--void) 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    /* 工程网格：座舱/蓝图的技术底纹 */
    linear-gradient(rgba(71,177,236,.045) 1px, transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg, rgba(71,177,236,.045) 1px, transparent 1px) 0 0/64px 64px,
    linear-gradient(rgba(71,177,236,.022) 1px, transparent 1px) 0 0/16px 16px,
    linear-gradient(90deg, rgba(71,177,236,.022) 1px, transparent 1px) 0 0/16px 16px,
    /* 碳纤维织纹 */
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.26) 0 2px, transparent 2px 4px);
  -webkit-mask-image:radial-gradient(1300px 900px at 60% 0%, #000 0%, rgba(0,0,0,.35) 62%, transparent 92%);
  mask-image:radial-gradient(1300px 900px at 60% 0%, #000 0%, rgba(0,0,0,.35) 62%, transparent 92%);
}
img,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- 2. 排版 ---------- */
h1,h2,h3,h4{margin:0;line-height:1.14;letter-spacing:-.01em;font-weight:800}
h1{font-size:clamp(32px,4.4vw,58px);letter-spacing:-.02em}
h2{font-size:clamp(25px,3vw,40px);letter-spacing:-.015em}
h3{font-size:clamp(18px,1.5vw,22px);font-weight:700}
p{margin:0}
.lead{font-size:clamp(15.5px,1.25vw,18px);line-height:1.78;color:var(--tx2)}
.dim{color:var(--tx3)}
.mono{font-family:var(--f-mono);font-size:.84em}

/* 关键数字：暖白特大粗体 */
.big{font-family:var(--f-disp);font-weight:800;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.02em}
/* 关键编号：高亮蓝 */
.id{color:var(--accent);font-family:var(--f-mono);font-weight:500}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tx3);
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--accent);box-shadow:0 0 0 3px rgba(71,177,236,.16),0 0 12px var(--accent);
}

/* ---------- 3. 布局 ---------- */
/* 【调参·基础内容轨道】.wrap 居中，--wrap 为最大外宽，--gut 为每侧内边距。
 * 当前品牌层在后加载的 redesign.css 中覆盖变量值；首页数据行的左右边界取这里的内容区，
 * 三业务 .home-paths__grid 在 redesign.css 中用同等宽度公式对齐，不使用首屏固定 56px 留白。
 */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec);position:relative}
.section--tight{padding-block:calc(var(--sec)*.55)}
.head{max-width:72ch;margin-bottom:clamp(28px,3.6vw,48px)}
.head>h2{margin-top:12px}
.head>.lead{margin-top:14px}

.cols{display:grid;gap:clamp(14px,1.6vw,20px)}
.cols--2{grid-template-columns:repeat(2,1fr)}
.cols--3{grid-template-columns:repeat(3,1fr)}
.cols--4{grid-template-columns:repeat(4,1fr)}
.cols>*{min-width:0}
@media(max-width:940px){.cols--3,.cols--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cols--2,.cols--3,.cols--4{grid-template-columns:1fr}}

/* ============================================================
   4. 三个立体基元 —— 全站只有这三种立体，不再有第四种
   ============================================================ */

/* raise 抬升：面板从底面浮起来 */
.raise{
  background:linear-gradient(180deg,var(--surf3) 0%,var(--surf2) 100%);
  border:1px solid var(--line2);
  border-radius:var(--r-m);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 var(--shade),
    0 14px 30px -18px rgba(0,0,0,.9),
    0 2px 6px -3px rgba(0,0,0,.6);
}

/* well 内凹：内容陷进面板里 */
.well{
  background:linear-gradient(180deg,#0D141C 0%,#131E29 100%);
  border:1px solid var(--line);
  border-radius:var(--r-s);
  box-shadow:
    inset 0 3px 8px -2px rgba(0,0,0,.72),
    inset 0 -1px 0 var(--glass);
}

/* shell 外壳：单体立体控制台 */
.shell{
  position:relative;
  background:linear-gradient(180deg,var(--surf3) 0%,var(--surf2) 46%,var(--surf) 100%);
  border:1px solid var(--line2);
  border-radius:var(--r-l);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 var(--shade),
    0 26px 56px -30px rgba(0,0,0,.95),
    0 3px 10px -5px rgba(0,0,0,.7);
  overflow:hidden;
}
/* 外壳顶部状态色条 */
.shell::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent) 22%,var(--accent2) 55%,transparent);
  opacity:.85;
}

/* ============================================================
   5. 模块舱 bay —— 逻辑清晰的答案：每块都自报编号、标题、回答什么
   ============================================================ */
.bay{position:relative;margin-block:clamp(18px,2.4vw,30px)}
.bay__rail{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 16px;
  background:linear-gradient(180deg,#2E3F51 0%,var(--surf3) 100%);
  border:1px solid var(--line2);border-bottom:0;
  border-radius:var(--r-m) var(--r-m) 0 0;
  box-shadow:inset 0 1px 0 var(--glass-hi);
}
.bay__id{
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  color:var(--accent);background:var(--blue-dim);
  border:1px solid rgba(71,177,236,.42);border-radius:4px;padding:3px 8px;flex:none;
}
.bay__title{font-family:var(--f-disp);font-weight:700;font-size:15px;letter-spacing:.01em;color:var(--tx)}
.bay__q{font-size:12.5px;color:var(--tx2);margin-left:auto;text-align:right;opacity:.86}
.bay__led{
  width:7px;height:7px;border-radius:50%;flex:none;background:var(--sev-ready);
  box-shadow:0 0 0 3px rgba(71,177,236,.14),0 0 10px var(--sev-ready);
}
.bay__led[data-sev="normal"]{background:var(--sev-normal);box-shadow:0 0 0 3px rgba(67,208,130,.14),0 0 10px var(--sev-normal)}
.bay__led[data-sev="warning"]{background:var(--sev-warning);box-shadow:0 0 0 3px rgba(240,166,60,.14),0 0 10px var(--sev-warning)}
.bay__led[data-sev="severe"]{background:var(--sev-severe);box-shadow:0 0 0 3px rgba(245,101,85,.14),0 0 10px var(--sev-severe)}
.bay__body{
  border:1px solid var(--line2);border-top:1px solid var(--line);
  border-radius:0 0 var(--r-m) var(--r-m);
  background:linear-gradient(180deg,var(--surf2) 0%,var(--surf) 100%);
  box-shadow:inset 0 -1px 0 var(--shade),0 18px 38px -24px rgba(0,0,0,.9);
  padding:clamp(18px,2.4vw,30px);
}
@media(max-width:620px){
  .bay__q{margin-left:0;width:100%;text-align:left;order:9}
}

/* HUD 角标 */
.ticks{position:relative}
.ticks::before,.ticks::after{
  content:"";position:absolute;width:12px;height:12px;pointer-events:none;
  border-color:rgba(71,177,236,.5);border-style:solid;
}
.ticks::before{top:8px;left:8px;border-width:1px 0 0 1px}
.ticks::after{bottom:8px;right:8px;border-width:0 1px 1px 0}

/* ---------- 6. 顶栏 ---------- */
.rail{
  position:sticky;top:0;z-index:80;
  background:linear-gradient(180deg,rgba(27,38,50,.92),rgba(10,15,21,.92));
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line2);
  box-shadow:0 1px 0 rgba(0,0,0,.6),0 10px 26px -20px rgba(0,0,0,.9),inset 0 1px 0 var(--glass);
}
.rail__in{display:flex;align-items:center;gap:22px;height:62px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand__mark{
  width:30px;height:30px;flex:none;border-radius:9px;
  background:linear-gradient(180deg,var(--surf3),var(--surf));
  border:1px solid rgba(0,159,232,.55);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 0 14px -4px rgba(0,159,232,.7);
  display:grid;place-items:center;
}
.brand__mark svg{width:19px;height:19px;display:block}
.brand__mark img{width:100%;height:100%;display:block;object-fit:contain}
.brand__txt{font-family:var(--f-disp);font-weight:800;font-size:16px;letter-spacing:.005em;line-height:1.2}
.brand__txt span{display:block;font-size:10px;font-family:var(--f-mono);font-weight:400;color:var(--tx3);letter-spacing:.13em}
.rail__nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.rail__nav a{
  padding:7px 13px;font-size:14px;color:var(--tx2);border-radius:7px;
  border:1px solid transparent;transition:color .15s,background .15s,border-color .15s;
}
.rail__nav a:hover{color:var(--tx);background:rgba(36,50,64,.6)}
.rail__nav a[aria-current="page"]{
  color:var(--tx);background:var(--blue-dim);border-color:rgba(71,177,236,.45);
  box-shadow:inset 0 1px 0 var(--glass);
}
.rail__cta{
  margin-left:12px;padding:9px 16px!important;font-size:13.5px;font-weight:700;
  color:var(--on-fill)!important;
  background:linear-gradient(180deg,var(--fill-hi),var(--fill))!important;
  border:1px solid rgba(71,177,236,.75)!important;border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px -8px rgba(44,115,181,.9);
}
.rail__cta:hover{filter:brightness(1.1)}
.rail__burger{
  display:none;margin-left:auto;padding:8px 12px;cursor:pointer;
  background:linear-gradient(180deg,var(--surf2),var(--surf));
  border:1px solid var(--line2);border-radius:8px;color:var(--tx);
  font-family:var(--f-mono);font-size:12px;
  box-shadow:inset 0 1px 0 var(--glass);
}
@media(max-width:980px){
  .rail__burger{display:block}
  .rail__nav{
    position:absolute;top:62px;left:0;right:0;flex-direction:column;align-items:stretch;gap:4px;
    background:linear-gradient(180deg,var(--surf),var(--bg2));
    border-bottom:1px solid var(--line2);padding:12px var(--gut) 18px;margin-left:0;
    box-shadow:0 20px 40px -24px rgba(0,0,0,.95);
  }
  .rail__nav[hidden]{display:none}
  .rail__nav a{padding:11px 12px}
  .rail__cta{margin:8px 0 0;text-align:center}
}

/* ---------- 7. 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 20px;font-size:14.5px;font-weight:700;font-family:var(--f-body);
  color:var(--tx);border-radius:9px;cursor:pointer;
  background:linear-gradient(180deg,var(--surf3),var(--surf2));
  border:1px solid var(--line2);
  box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 var(--shade),0 8px 18px -12px rgba(0,0,0,.9);
  transition:filter .15s,border-color .15s,transform .08s;
}
.btn:hover{border-color:var(--accent);filter:brightness(1.14)}
.btn:active{transform:translateY(1px)}
.btn--key{
  color:var(--on-fill);
  background:linear-gradient(180deg,var(--fill-hi),var(--fill));
  border-color:rgba(71,177,236,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.32),0 10px 24px -12px rgba(44,115,181,.95);
}
.btn--danger{
  color:var(--on-fill);background:linear-gradient(180deg,#DC615B,#C9514B);
  border-color:rgba(245,101,85,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 22px -12px rgba(201,81,75,.9);
}
.btn--ghost{background:transparent;box-shadow:none;border-color:var(--line)}
.btn--ghost:hover{background:var(--surf2)}
/* 小号：与商城筛选条同一口径，给清单里的行内操作用 */
.btn--sm{padding:8px 15px;font-size:13.5px;gap:7px}
.btn[disabled],.btn:disabled{
  background:var(--surf);color:#6E8194;border-color:#293848;
  box-shadow:none;cursor:not-allowed;filter:none;
}
.btn__arrow{font-family:var(--f-mono);opacity:.75}
.btns{display:flex;flex-wrap:wrap;gap:11px}

/* ---------- 8. 徽章 / 芯片 ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-mono);font-size:11.5px;padding:4px 9px;border-radius:5px;
  background:var(--surf2);border:1px solid var(--line2);color:var(--tx2);white-space:nowrap;
  box-shadow:inset 0 1px 0 var(--glass);
}
.chip--open{background:var(--green-dim);border-color:rgba(67,208,130,.45);color:var(--green)}
.chip--core{background:var(--red-dim);border-color:rgba(245,101,85,.42);color:var(--red)}
.chip--link{background:var(--blue-dim);border-color:rgba(71,177,236,.45);color:var(--accent)}
.chip--warn{background:var(--amber-dim);border-color:rgba(240,180,70,.45);color:var(--amber)}
.chip--armed{background:var(--violet-dim);border-color:rgba(169,155,255,.45);color:var(--violet)}
.chips{display:flex;flex-wrap:wrap;gap:7px}

/* 状态点：语义状态色 */
.led{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;vertical-align:0}
.led[data-sev="offline"]{background:var(--sev-offline)}
.led[data-sev="unverified"]{background:var(--sev-unverified)}
.led[data-sev="severe"]{background:var(--sev-severe);box-shadow:0 0 8px var(--sev-severe)}
.led[data-sev="warning"]{background:var(--sev-warning);box-shadow:0 0 8px var(--sev-warning)}
.led[data-sev="ready"]{background:var(--sev-ready);box-shadow:0 0 8px var(--sev-ready)}
.led[data-sev="normal"]{background:var(--sev-normal);box-shadow:0 0 8px var(--sev-normal)}

/* ---------- 9. 首屏 ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(98deg,var(--bg) 1%,rgba(10,15,21,.90) 24%,rgba(10,15,21,.38) 45%,rgba(10,15,21,0) 62%);
}
.hero__in{position:relative;z-index:2;min-height:clamp(440px,60vh,580px);padding-block:clamp(52px,6vw,84px) clamp(44px,5vw,68px)}
.hero__title{margin:16px 0 0;max-width:22ch}
.hero__title em{font-style:normal;color:var(--accent);text-shadow:0 0 34px rgba(71,177,236,.45)}
.hero__lead{margin-top:18px;max-width:50ch}
.hero__btns{margin-top:28px}

/* 首屏 HUD 读数框 */
.hud{
  position:absolute;right:var(--gut);bottom:22px;z-index:2;
  padding:12px 14px;border-radius:var(--r-s);min-width:186px;
  background:linear-gradient(180deg,rgba(27,38,50,.72),rgba(10,15,21,.72));
  border:1px solid var(--line2);backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 var(--glass),0 14px 30px -20px rgba(0,0,0,.9);
  font-family:var(--f-mono);font-size:11px;color:var(--tx3);letter-spacing:.06em;
}
.hud__t{display:flex;justify-content:space-between;gap:14px;color:var(--tx2);border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:8px}
.hud__r{display:flex;align-items:center;gap:8px;padding:3px 0}
.hud__r b{margin-left:auto;color:var(--tx2);font-weight:500}
@media(max-width:900px){.hud{display:none}}

/* ---------- 10. 指标条 ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.metrics>*{min-width:0}
.metric{padding:20px 20px 22px;border-radius:var(--r-m);position:relative}
.metric__v{font-family:var(--f-disp);font-weight:800;font-size:clamp(27px,3vw,38px);color:var(--tx);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.metric__v small{font-size:.42em;color:var(--accent);margin-left:6px;font-weight:600;letter-spacing:0}
.metric__k{margin-top:10px;font-size:12.5px;color:var(--tx3);line-height:1.55}
@media(max-width:820px){.metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.metrics{grid-template-columns:1fr}}

/* ---------- 11. 面板内容 ---------- */
.panel{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;height:100%}
.panel__tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--tx3)}
.panel h3{margin:12px 0 10px}
.panel p{color:var(--tx2);font-size:14.6px;line-height:1.74}
.panel__more{margin-top:auto;padding-top:18px;display:inline-flex;gap:8px;align-items:center;font-size:13.5px;font-weight:700;color:var(--accent)}
.panel__more:hover{text-decoration:underline;text-underline-offset:4px}

/* 三主线卡 */
.pillar__no{
  display:flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.15em;
  color:var(--tx3);padding-bottom:12px;border-bottom:1px solid var(--line);
}
.pillar h3{margin:16px 0 10px;font-size:clamp(20px,1.9vw,25px)}
.pillar ul{margin:16px 0 0;padding:0;list-style:none}
.pillar li{
  display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:start;
  padding:9px 0;border-top:1px solid var(--line);font-size:13.8px;color:var(--tx2);
}
.pillar li b{
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;
  color:var(--accent);padding-top:3px;
}

/* ---------- 12. 分层架构 ---------- */
.strata{display:flex;flex-direction:column;gap:8px}
.stratum{
  display:grid;grid-template-columns:150px 1fr;gap:clamp(14px,2vw,26px);
  padding:18px clamp(16px,2vw,24px);border-radius:var(--r-s);
  background:linear-gradient(180deg,var(--surf3),var(--surf2));
  border:1px solid var(--line2);
  box-shadow:inset 0 1px 0 var(--glass),inset 0 -1px 0 var(--shade),0 8px 20px -14px rgba(0,0,0,.85);
}
.stratum>*{min-width:0}
.stratum__k{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);padding-top:2px}
.stratum__t{font-weight:700;font-size:15.5px;color:var(--tx)}
.stratum__d{margin-top:6px;font-size:14px;color:var(--tx2)}
.stratum .chips{margin-top:12px}
.stratum--core{background:linear-gradient(180deg,#231C22,#1A141A);border-color:rgba(245,101,85,.3)}
.stratum--core .stratum__k{color:var(--red)}
.stratum--open{background:linear-gradient(180deg,#16281F,#111B18);border-color:rgba(67,208,130,.3)}
.stratum--open .stratum__k{color:var(--green)}
.stratum--yours{background:linear-gradient(180deg,#152634,#101B26);border-color:rgba(0,159,232,.42)}
.stratum--yours .stratum__k{color:var(--brand)}
/* 边界线 */
.edge{
  display:flex;align-items:center;gap:14px;padding:4px 2px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx3);
}
.edge::before,.edge::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--line2),transparent)}
@media(max-width:680px){.stratum{grid-template-columns:1fr;gap:8px}}

/* ---------- 13. 步骤 ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.steps>*{min-width:0}
.step{padding:22px 20px 24px;border-radius:var(--r-m);position:relative}
.step__no{
  display:inline-block;font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.15em;
  color:var(--accent);background:var(--blue-dim);border:1px solid rgba(71,177,236,.4);
  border-radius:4px;padding:3px 8px;
}
.step h3{margin:14px 0 9px;font-size:17.5px}
.step p{font-size:14px;color:var(--tx2)}
.step__meta{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:11.5px;color:var(--tx3)}
@media(max-width:940px){.steps,.steps:has(>:nth-child(2):last-child),
  .steps:has(>:nth-child(3):last-child),.steps:has(>:nth-child(6):last-child){grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps,.steps:has(>:nth-child(2):last-child),
  .steps:has(>:nth-child(3):last-child),.steps:has(>:nth-child(6):last-child){grid-template-columns:1fr}}

/* ---------- 14. 代码 / 表格 ---------- */
.code{border-radius:var(--r-s);overflow:hidden}
.code__bar{
  display:flex;align-items:center;gap:10px;padding:9px 15px;
  background:linear-gradient(180deg,var(--surf3),var(--surf2));
  border-bottom:1px solid var(--line);color:var(--tx3);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 var(--glass);
}
.code__bar b{margin-left:auto;font-weight:400;color:var(--tx3);text-transform:none;letter-spacing:.04em}
.code pre{
  margin:0;padding:16px 18px;overflow-x:auto;
  font-family:var(--f-mono);font-size:12.8px;line-height:1.85;color:var(--tx2);white-space:pre;
  background:linear-gradient(180deg,#0B1118,#0E151E);
}
.code .c{color:#5E7186}
.code .k{color:var(--accent2)}
.code .s{color:var(--amber)}
.code .f{color:var(--tx)}
.code .g{color:var(--green)}
.code .r{color:var(--red)}

.tblwrap{overflow-x:auto;border-radius:var(--r-s)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{
  text-align:left;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx3);font-weight:500;
  padding:11px 14px;white-space:nowrap;
  background:linear-gradient(180deg,var(--surf3),var(--surf2));
  border-bottom:1px solid var(--line2);
  box-shadow:inset 0 1px 0 var(--glass);
  position:sticky;top:0;
}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--tx2);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:rgba(36,50,64,.34)}
.tbl td:first-child{color:var(--tx);font-family:var(--f-mono);font-size:12.4px;white-space:nowrap}

/* ---------- 15. 瓦片 ---------- */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.tiles>*{min-width:0}
.tile{grid-column:span 2;padding:22px 20px 24px;border-radius:var(--r-m);display:flex;flex-direction:column}
.tile--wide{grid-column:span 3}
.tile__k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.tile h3{margin:12px 0 9px}
.tile p{font-size:14.2px;color:var(--tx2)}
.tile__stat{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:12.5px;color:var(--tx2);letter-spacing:.03em;
}
@media(max-width:1000px){.tiles{grid-template-columns:repeat(2,1fr)}.tile,.tile--wide{grid-column:span 1}}
@media(max-width:620px){.tiles{grid-template-columns:1fr}}

/* ---------- 16. 定价 ---------- */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:stretch}
.tiers>*{min-width:0}
.tier{padding:24px 20px 26px;border-radius:var(--r-m);display:flex;flex-direction:column}
.tier--mark{
  background:linear-gradient(180deg,var(--surf3) 0%,var(--surf) 100%);
  border-color:rgba(71,177,236,.5);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 0 0 1px rgba(71,177,236,.14),0 20px 44px -26px rgba(0,0,0,.95);
}
.tier__n{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--tx3)}
.tier--mark .tier__n{color:var(--accent)}
.tier h3{margin:10px 0 5px;font-size:21px}
.tier__note{font-size:12.8px;color:var(--tx3);line-height:1.6}
.tier__p{font-family:var(--f-disp);font-size:31px;font-weight:800;color:var(--tx);line-height:1.15;margin-top:14px;letter-spacing:-.02em}
.tier__p small{font-size:.38em;color:var(--tx3);font-weight:500;margin-left:4px;letter-spacing:0}
.tier ul{list-style:none;margin:18px 0 0;padding:0}
.tier li{
  padding:8px 0 8px 22px;border-top:1px solid var(--line);
  font-size:13.4px;color:var(--tx2);position:relative;line-height:1.6;
}
.tier li::before{content:"";position:absolute;left:2px;top:16px;width:9px;height:1px;background:var(--line2)}
.tier li.on{color:var(--tx2)}
.tier li.on::before{
  left:2px;top:13px;width:8px;height:8px;border-radius:50%;
  background:var(--green);box-shadow:0 0 8px rgba(67,208,130,.7);
}
.tier li.off{color:#5E7186}
.tier .btn{margin-top:22px;justify-content:center;width:100%}
.tier__sp{margin-top:auto}
@media(max-width:1100px){.tiers{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.tiers{grid-template-columns:1fr}}

/* ---------- 17. 文档页 ---------- */
.doc{display:grid;grid-template-columns:238px 1fr;gap:clamp(24px,3vw,52px);align-items:start}
.doc>*{min-width:0}
.docnav{position:sticky;top:78px;font-size:13.8px;padding:14px 12px;border-radius:var(--r-m);max-height:calc(100vh - 100px);overflow-y:auto}
.docnav strong{
  display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tx3);font-weight:500;
  padding:14px 8px 7px;margin-top:8px;border-top:1px solid var(--line);
}
.docnav strong:first-child{border-top:0;margin-top:0;padding-top:2px}
.docnav a{display:block;padding:6px 10px;color:var(--tx2);border-radius:6px;border-left:2px solid transparent}
.docnav a:hover{color:var(--tx);background:rgba(36,50,64,.5)}
.docnav a.on{color:var(--accent);background:var(--blue-dim);border-left-color:var(--accent)}
.docbody>section{padding-bottom:clamp(38px,5vw,64px);scroll-margin-top:82px}
/* 文档正文里的整幅图片带：不再套一层版心与栏距 */
.docbody>.section{padding-block:0 clamp(38px,5vw,64px)}
.docbody>.section.wrap{max-width:none;padding-inline:0}
.docbody h2{margin-bottom:14px}
.docbody h3{margin:30px 0 11px}
.docbody p{color:var(--tx2);margin-bottom:13px;max-width:76ch}
.docbody ul{margin:0 0 15px;padding-left:20px;color:var(--tx2);max-width:76ch}
.docbody li{margin-bottom:7px}
.docbody li b{color:var(--tx)}
.docbody .code,.docbody .tblwrap,.docbody .strata{margin:16px 0 20px}
@media(max-width:1000px){
  .doc{grid-template-columns:1fr}
  .docnav{position:static;max-height:none;display:flex;flex-wrap:wrap;gap:6px}
  .docnav strong{display:none}
  .docnav a{border-left:0;border:1px solid var(--line2);padding:6px 11px;background:var(--surf2)}
}

/* ---------- 18. 提示条 ---------- */
.note{
  display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;
  padding:15px 18px;border-radius:var(--r-s);margin:18px 0;
  background:linear-gradient(180deg,rgba(21,49,77,.5),rgba(18,27,38,.5));
  border:1px solid rgba(71,177,236,.3);border-left:3px solid var(--accent);
  font-size:14.2px;color:var(--tx2);line-height:1.72;
}
.note::before{content:"i";font-family:var(--f-mono);font-size:11px;font-weight:600;color:var(--accent);
  width:18px;height:18px;border-radius:50%;border:1px solid rgba(71,177,236,.5);
  display:grid;place-items:center;margin-top:3px}
.note>*{grid-column:2;min-width:0}
.note b{color:var(--tx)}
.note--core{background:linear-gradient(180deg,rgba(57,31,34,.5),rgba(26,20,22,.5));border-color:rgba(245,101,85,.32);border-left-color:var(--red)}
.note--core::before{content:"!";color:var(--red);border-color:rgba(245,101,85,.5)}
.note--warn{background:linear-gradient(180deg,rgba(53,40,16,.5),rgba(26,22,16,.5));border-color:rgba(240,180,70,.32);border-left-color:var(--amber)}
.note--warn::before{content:"!";color:var(--amber);border-color:rgba(240,180,70,.5)}

/* ---------- 19. 事实清单 ---------- */
.facts{display:flex;flex-direction:column}
.fact{
  display:grid;grid-template-columns:154px 1fr;gap:clamp(12px,2vw,26px);
  padding:16px 0;border-top:1px solid var(--line);
}
.fact:first-child{border-top:0;padding-top:0}
.fact>*{min-width:0}
.fact__k{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);padding-top:3px}
.fact__v{color:var(--tx2);font-size:14.8px}
.fact__v b{color:var(--tx);font-weight:700}
@media(max-width:640px){.fact{grid-template-columns:1fr;gap:5px}}

/* ---------- 20. 架数谱系 ---------- */
.spectrum__bars{display:flex;align-items:flex-end;gap:clamp(3px,.6vw,8px);height:186px;margin-top:18px}
.sbar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0}
.sbar i{
  display:block;width:100%;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--surf3),var(--surf));
  border:1px solid var(--line2);border-bottom:0;
  box-shadow:inset 0 1px 0 var(--glass);transition:background .16s,border-color .16s;
}
.sbar b{
  font-family:var(--f-mono);font-size:11px;font-weight:500;color:var(--tx3);
  margin-bottom:6px;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.sbar:hover i{background:linear-gradient(180deg,var(--fill-hi),var(--fill));border-color:var(--accent)}
.sbar:hover b{color:var(--accent)}
.sbar--peak i{background:linear-gradient(180deg,var(--fill),#1F5688);border-color:rgba(71,177,236,.6)}
.sbar--peak b{color:var(--accent)}
.spectrum__axis{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;color:var(--tx3);
}
@media(max-width:720px){.spectrum__bars{height:130px;gap:2px}.sbar b{display:none}}

/* ---------- 21. 流程格 ---------- */
.flowrow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.flowrow>*{min-width:0}
.flowcell{padding:20px 18px 22px;border-radius:var(--r-m)}
.flowcell__k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.flowcell h3{margin:11px 0 9px;font-size:16.5px}
.flowcell p{font-size:13.6px;color:var(--tx2)}
.flowcell--have{border-color:rgba(67,208,130,.32)}
.flowcell--have .flowcell__k{color:var(--green)}
.flowcell--new{border-color:rgba(240,180,70,.32)}
.flowcell--new .flowcell__k{color:var(--amber)}
@media(max-width:940px){.flowrow{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.flowrow{grid-template-columns:1fr}}

/* ---------- 22. 表单 ---------- */
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form__grid>*{min-width:0}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
/* 询价：先填联系信息，业务补充项按方向展开；隐藏字段不参加提交。 */
.inquiry-details{border-top:1px solid var(--line,#dfe3e7);padding-top:16px}
.inquiry-details>summary{cursor:pointer;min-height:44px;align-content:center;font-weight:500}
.inquiry-details>.form__grid{padding-top:16px}
.inquiry-fields [hidden]{display:none!important}
.field label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.field input,.field select,.field textarea{
  background:linear-gradient(180deg,#0B1118,#111A24);
  border:1px solid var(--line);border-radius:7px;color:var(--tx);
  font-family:var(--f-body);font-size:14.5px;padding:11px 13px;width:100%;
  box-shadow:inset 0 2px 6px -2px rgba(0,0,0,.65);
  transition:border-color .15s,background .15s;
}
.field input::placeholder,.field textarea::placeholder{color:#5E7186}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:#14202D}
.field textarea{resize:vertical;min-height:92px}
.form__foot{margin-top:20px;display:flex;flex-wrap:wrap;gap:15px;align-items:center}
.form__msg{font-size:13.5px;color:var(--amber);line-height:1.6;max-width:52ch}
.form__msg:empty{display:none}
/* 从商城带过来的产品：摆在表格上面，让人看得见编号确实带上了 */
.form__carry{margin-bottom:20px}
@media(max-width:660px){.form__grid{grid-template-columns:1fr}}

/* ---------- 23. 页脚 ---------- */
.foot{
  border-top:1px solid var(--line2);padding-block:48px 34px;margin-top:20px;
  background:linear-gradient(180deg,var(--bg2),var(--void));
  box-shadow:inset 0 1px 0 var(--glass);
}
.foot__grid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:30px}
.foot__grid>*{min-width:0}
.foot h4{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--tx3);font-weight:500;margin-bottom:12px}
.foot a{display:block;padding:5px 0;font-size:13.8px;color:var(--tx2)}
.foot a:hover{color:var(--accent)}
.foot__note{font-size:13.2px;color:var(--tx3);max-width:38ch;margin-top:13px;line-height:1.7}
.foot__bar{
  margin-top:38px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-family:var(--f-mono);font-size:11px;color:var(--tx3);letter-spacing:.05em;
}
@media(max-width:860px){.foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.foot__grid{grid-template-columns:1fr}}

/* ---------- 24. 进场 ---------- */
.rise{opacity:0;transform:translateY(14px);transition:opacity .62s cubic-bezier(.22,.72,.28,1),transform .62s cubic-bezier(.22,.72,.28,1)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rise{opacity:1;transform:none}
}

/* ---------- 25. 间距工具（唯一允许的工具类） ---------- */
.mt-s{margin-top:14px}
.mt-m{margin-top:22px}
.mt-l{margin-top:30px}

/* ============================================================
   26. 模拟器布局（唯一例外小节）
   只做布局与紧凑控件，颜色全部复用上面的令牌，不引入任何新色值。
   ============================================================ */
.sim-split{display:grid;grid-template-columns:324px minmax(0,1fr)}
.sim-split>*{min-width:0}
.sim-flow{padding:15px;border-right:1px solid var(--line2);display:flex;flex-direction:column;gap:10px}
.sim-stage{padding:15px;display:flex;flex-direction:column;gap:11px}
@media(max-width:1020px){
  .sim-split{grid-template-columns:1fr}
  .sim-flow{border-right:0;border-bottom:1px solid var(--line2)}
}

/* 视口 */
.sim-view{position:relative;width:100%;aspect-ratio:16/10;min-height:330px;overflow:hidden;cursor:grab;touch-action:none}
.sim-view canvas{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:var(--r-s)}
.sim-view[data-drag="1"]{cursor:grabbing}

/* 流程步 */
.sim-step{padding:12px 13px 14px;border-radius:var(--r-s)}
.sim-step[data-lock="1"]{opacity:.42}
.sim-step__h{display:flex;align-items:center;gap:9px}
.sim-step__n{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;color:var(--accent);
  background:var(--blue-dim);border:1px solid rgba(71,177,236,.4);border-radius:4px;padding:2px 7px;flex:none;
}
.sim-step__t{font-weight:700;font-size:14px;color:var(--tx)}
.sim-step__s{margin-left:auto;font-family:var(--f-mono);font-size:10.5px;color:var(--tx3);letter-spacing:.06em}
.sim-step__b{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.sim-step__b:empty{display:none}

/* 紧凑控件 */
.sim-b{padding:9px 12px;font-size:13px;width:100%;justify-content:center}
.sim-row{display:flex;gap:7px}
.sim-row>.btn{flex:1}
.sim-in{display:grid;grid-template-columns:74px minmax(0,1fr);align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;color:var(--tx3)}
.sim-in select,.sim-in input,.sim-par select{
  background:linear-gradient(180deg,#0B1118,#111A24);border:1px solid var(--line);border-radius:6px;
  color:var(--tx);font-family:var(--f-mono);font-size:12.5px;padding:7px 9px;width:100%;
  box-shadow:inset 0 2px 6px -2px rgba(0,0,0,.65);
}
.sim-in select:focus,.sim-in input:focus,.sim-par select:focus{outline:none;border-color:var(--accent)}
.sim-in input[type=file]{padding:6px;font-size:11px;color:var(--tx2);box-shadow:none}
.sim-chkbox{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;color:var(--tx3);cursor:pointer}
.sim-chkbox input{accent-color:var(--accent);width:14px;height:14px;flex:none;cursor:pointer}

/* 键值行 */
.sim-kv{display:flex;align-items:baseline;gap:10px;padding:4px 0;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:11px;color:var(--tx3);letter-spacing:.03em}
.sim-kv:first-child{border-top:0}
.sim-kv b{margin-left:auto;font-weight:500;color:var(--tx2);font-variant-numeric:tabular-nums;text-align:right}
.sim-kv[data-sev="severe"] b{color:var(--sev-severe)}
.sim-kv[data-sev="warning"] b{color:var(--sev-warning)}
.sim-kv[data-sev="normal"] b{color:var(--sev-normal)}
.sim-kv[data-sev="ready"] b{color:var(--sev-ready)}
.sim-kv .led{margin-right:2px}
.sim-list{display:flex;flex-direction:column}
.sim-msg{font-family:var(--f-mono);font-size:11px;line-height:1.62;color:var(--tx3)}
.sim-msg:empty{display:none}
.sim-msg[data-sev="severe"]{color:var(--sev-severe)}
.sim-msg[data-sev="warning"]{color:var(--sev-warning)}
.sim-msg[data-sev="normal"]{color:var(--sev-normal)}

/* 进度条 */
.sim-bar{height:7px;border-radius:4px;overflow:hidden;background:#0A1017;border:1px solid var(--line);
  box-shadow:inset 0 2px 5px -2px rgba(0,0,0,.75)}
.sim-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--fill),var(--accent))}
.sim-bar[data-sev="warning"] i{background:linear-gradient(90deg,var(--amber-dim),var(--sev-warning))}
.sim-bar[data-sev="severe"] i{background:linear-gradient(90deg,var(--red-dim),var(--sev-severe))}

/* 读数条 / 时间轴 */
.sim-read{display:flex;flex-wrap:wrap;gap:6px;padding:9px 10px}
.sim-read__i{display:flex;align-items:baseline;gap:7px;padding:3px 9px;border-radius:5px;
  background:var(--surf2);border:1px solid var(--line2);box-shadow:inset 0 1px 0 var(--glass);
  font-family:var(--f-mono);font-size:11px;color:var(--tx3);white-space:nowrap}
.sim-read__i b{font-weight:500;color:var(--tx);font-variant-numeric:tabular-nums}
.sim-read__i[data-sev="severe"] b{color:var(--sev-severe)}
.sim-read__i[data-sev="warning"] b{color:var(--sev-warning)}
.sim-read__i[data-sev="normal"] b{color:var(--sev-normal)}
.sim-read__i[data-sev="ready"] b{color:var(--sev-ready)}
.sim-read select{background:transparent;border:0;color:var(--accent);font-family:var(--f-mono);font-size:11px;padding:0;cursor:pointer}
.sim-read select:focus{outline:none}
.sim-read select option{background:var(--surf);color:var(--tx)}
.sim-tl{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 10px;
  font-family:var(--f-mono);font-size:11px;color:var(--tx3)}
.sim-tl .sim-bar{flex:1 1 150px;min-width:120px}
.sim-tl .btn{padding:6px 11px;font-size:12px}
.sim-tl .btn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}

/* 参数格 */
.sim-pars{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.sim-pars>*{min-width:0}
@media(max-width:900px){.sim-pars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sim-pars{grid-template-columns:1fr}}
.sim-par{padding:12px 14px 14px;border-radius:var(--r-s)}
.sim-par__h{display:flex;align-items:baseline;gap:10px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}
.sim-par__v{margin-left:auto;color:var(--accent);font-variant-numeric:tabular-nums;font-size:12px}
.sim-par__d{margin-top:7px;font-size:12.4px;color:var(--tx3);line-height:1.6}
.sim-par input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;margin-top:8px;background:transparent;cursor:pointer}
.sim-par input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;
  background:linear-gradient(180deg,#0A1017,#131E29);border:1px solid var(--line)}
.sim-par input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;margin-top:-6px;
  border-radius:50%;background:linear-gradient(180deg,var(--fill-hi),var(--fill));
  border:1px solid rgba(71,177,236,.85);box-shadow:0 2px 6px -2px rgba(0,0,0,.9)}
.sim-par input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:#101A24;border:1px solid var(--line)}
.sim-par input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
  background:var(--fill);border:1px solid rgba(71,177,236,.85)}
.sim-par input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 遥测表 */
.sim-tel{font-variant-numeric:tabular-nums}
.sim-tel tbody tr{cursor:pointer}
.sim-tel td{padding:8px 12px;font-size:13px}
.sim-tel tr.sim-sel td{background:rgba(240,180,70,.11);box-shadow:inset 2px 0 0 var(--ring-select)}

/* ============================================================
   26. 控制台外壳 —— 模拟器专用
   ============================================================ */
:root{
  /* 操作按钮按【功能类别】着色，不是按好看着色 */
  --cat-blue:#5CB4FB;    /* 舞步 / 编队 */
  --cat-green:#5BD18C;   /* 检查 / 就绪 */
  --cat-amber:#F0BE5E;   /* 飞行控制 */
  --cat-red:#FF6F6F;     /* 危险 / 应急 */
  --cat-cyan:#5FD9D1;    /* 工具 */
  --cat-gray:#9FB6C8;    /* 系统 */
  /* 操作按钮的深色控制台底 */
  --op-bg:linear-gradient(180deg,#1E2D3D,#15212E);
  --op-bg-h:linear-gradient(180deg,#25374B,#1A2838);
  --op-tx:#D2E0EC;
  --op-tx-pri:#E6EEF6;
  --op-off-bg:#141C26;
  --op-off-line:#26323F;
  --op-off-tx:#5A6B7A;
}

/* ---- 窗口外壳 ---- */
.gcs{
  position:relative;border:1px solid var(--line2);border-radius:var(--r-l);
  background:linear-gradient(180deg,var(--surf) 0%,var(--bg2) 100%);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 30px 64px -34px rgba(0,0,0,.95);
  overflow:hidden;
}

/* ---- 顶部态势：两行 ---- */
.gcs__hdr{background:linear-gradient(180deg,#1B2632,#131C27);border-bottom:1px solid var(--line)}
.gcs__row{display:flex;align-items:center;gap:10px;padding:8px 12px;flex-wrap:wrap}
.gcs__row + .gcs__row{border-top:1px solid rgba(34,48,64,.7)}
.gcs__brand{display:flex;align-items:center;gap:8px;flex:none;padding-right:6px}
.gcs__brand svg{width:18px;height:18px;display:block}
.gcs__brand img{width:24px;height:24px;display:block;object-fit:contain}
.gcs__brand b{font-family:var(--f-disp);font-size:13px;font-weight:800;letter-spacing:.01em}
.gcs__brand span{font-family:var(--f-mono);font-size:9.5px;color:var(--tx3);letter-spacing:.12em}

/* 状态胶囊：小圆点 + 文字（顶栏第二行右侧一排） */
.chipbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-left:auto}
.schip{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 10px;border-radius:8px;white-space:nowrap;
  background:linear-gradient(180deg,var(--surf2),var(--surf));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glass);
  font-family:var(--f-mono);font-size:11.5px;color:var(--tx2);
}
.schip i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--tx3)}
.schip[data-sev="normal"] i{background:var(--sev-normal);box-shadow:0 0 7px var(--sev-normal)}
.schip[data-sev="ready"] i{background:var(--sev-ready);box-shadow:0 0 7px var(--sev-ready)}
.schip[data-sev="warning"] i{background:var(--sev-warning);box-shadow:0 0 7px var(--sev-warning)}
.schip[data-sev="severe"] i{background:var(--sev-severe);box-shadow:0 0 7px var(--sev-severe)}
.schip[data-sev="armed"] i{background:var(--ring-armed);box-shadow:0 0 7px var(--ring-armed)}
.schip b{color:var(--tx);font-weight:600;font-variant-numeric:tabular-nums}

/* 顶栏告警横幅：占第二行左侧，与右侧胶囊互不覆盖 */
.warnbar{
  flex:1;min-width:0;padding:5px 11px;border-radius:7px;
  font-size:12.5px;color:var(--tx2);
  background:rgba(36,50,64,.5);border:1px solid var(--line);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.warnbar[data-sev="warning"]{background:var(--amber-dim);border-color:rgba(240,190,94,.4);color:var(--cat-amber)}
.warnbar[data-sev="severe"]{background:var(--red-dim);border-color:rgba(255,111,111,.42);color:var(--cat-red)}
.warnbar[data-sev="normal"]{background:var(--green-dim);border-color:rgba(91,209,140,.36);color:var(--cat-green)}

/* 2D / 3D 视图切换（顶栏第二行左端） */
.viewseg{display:inline-flex;gap:3px;padding:3px;border-radius:9px;background:var(--bg2);border:1px solid var(--line);flex:none}
.viewseg button{
  padding:4px 12px;border-radius:6px;border:1px solid transparent;cursor:pointer;
  background:transparent;color:var(--tx3);font-family:var(--f-mono);font-size:11.5px;font-weight:500;
}
.viewseg button[aria-pressed="true"]{background:var(--blue-dim);border-color:rgba(71,177,236,.45);color:var(--accent)}
.viewseg button:hover{color:var(--tx)}

/* ---- 中央：地图 + 任务流程 ---- */
/* 【调参·视图占比】操作栏按控制台实际宽度取28%，限制320–400px；
   不再按浏览器宽度强占700/860px，避免宽屏里主视图反而缩成一条。 */
.gcs__mid{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,28%,400px);min-height:520px}
.gcs__mid>*{min-width:0}
.gcs__map{position:relative;background:linear-gradient(180deg,#0B121A,#080D14);border-right:1px solid var(--line)}
.gcs__map canvas{width:100%;height:100%;display:block}
/* 地图内浮层读数（左上角） */
.mapread{
  position:absolute;left:10px;top:10px;z-index:3;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 20px);
}
.gcs__flow{display:flex;flex-direction:column;background:var(--surf);min-height:0}

/* 三段胶囊 tab */
.tabseg{display:flex;gap:3px;padding:3px;margin:9px 9px 0;border-radius:10px;background:var(--bg2);border:1px solid var(--line);flex:none}
.tabseg button{
  flex:1;padding:7px 4px;border-radius:8px;border:1px solid transparent;cursor:pointer;
  background:transparent;color:var(--tx3);font-size:12.5px;font-weight:600;
}
.tabseg button[aria-selected="true"]{
  background:linear-gradient(180deg,#1E2D3D,#15212E);border-color:rgba(71,177,236,.5);color:var(--accent);
  box-shadow:inset 0 1px 0 var(--glass);
}
.tabseg button:hover{color:var(--tx)}
/* tab 固定，内容内部滚动 */
.flowscroll{flex:1;min-height:0;overflow-y:auto;padding:9px;display:flex;flex-direction:column;gap:9px}
.flowscroll::-webkit-scrollbar{width:8px}
.flowscroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
.flowscroll::-webkit-scrollbar-track{background:transparent}

/* 操作卡片：模块化分组 */
.opcard{background:var(--surf);border:1px solid var(--line);border-radius:11px;padding:10px 11px 11px}
.opcard__h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.opcard__ic{
  width:22px;height:22px;border-radius:6px;flex:none;display:grid;place-items:center;
  background:rgba(159,182,200,.15);
}
.opcard__ic svg{width:15px;height:15px;display:block}
.opcard--blue .opcard__ic{background:rgba(92,180,251,.15)}
.opcard--green .opcard__ic{background:rgba(91,209,140,.15)}
.opcard--amber .opcard__ic{background:rgba(240,190,94,.15)}
.opcard--red .opcard__ic{background:rgba(255,111,111,.15)}
.opcard--cyan .opcard__ic{background:rgba(95,217,209,.15)}
.opcard__t{color:var(--tx);font-size:13.5px;font-weight:600}
.opcard__badge{
  margin-left:auto;color:var(--tx3);font-family:var(--f-mono);font-size:10.5px;
  background:var(--surf2);border:1px solid var(--line);border-radius:9px;padding:1px 8px;white-space:nowrap;
}
.opcard__b{display:flex;flex-direction:column;gap:7px}
.opcard--collapsed .opcard__b{display:none}
.opcard__h[role="button"]{cursor:pointer}

/* 操作按钮：深色控制台底 + 类别色描边，无底色 */
.opb{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 13px;border-radius:7px;cursor:pointer;
  background:var(--op-bg);border:1px solid rgba(159,182,200,.42);
  color:var(--op-tx);font-family:var(--f-body);font-size:13px;font-weight:500;
  transition:background .14s,border-color .14s;
}
.opb svg{width:17px;height:17px;flex:none;display:block}
.opb:hover{background:var(--op-bg-h);border-color:var(--cat-gray)}
.opb:active{padding-top:9px;padding-bottom:7px}
.opb--sm{padding:4px 10px;border-radius:6px;font-size:12px}
.opb--sm svg{width:15px;height:15px}
.opb--sm:active{padding-top:5px;padding-bottom:3px}
.opb--wide{width:100%}
.opb--blue{border-color:rgba(92,180,251,.42)}   .opb--blue:hover{border-color:var(--cat-blue)}
.opb--green{border-color:rgba(91,209,140,.42)}  .opb--green:hover{border-color:var(--cat-green)}
.opb--amber{border-color:rgba(240,190,94,.42)}  .opb--amber:hover{border-color:var(--cat-amber)}
.opb--red{border-color:rgba(255,111,111,.42)}   .opb--red:hover{border-color:var(--cat-red)}
.opb--cyan{border-color:rgba(95,217,209,.42)}   .opb--cyan:hover{border-color:var(--cat-cyan)}
/* primary：描边满色、文字更亮（仍无底色） */
.opb--pri{color:var(--op-tx-pri);font-weight:700}
.opb--pri.opb--blue{border-color:var(--cat-blue)}
.opb--pri.opb--amber{border-color:var(--cat-amber)}
.opb--pri.opb--green{border-color:var(--cat-green)}
/* solid：只给紧急返航这类极危险主操作 */
.opb--solid{
  background:linear-gradient(180deg,rgba(255,111,111,.34),rgba(255,111,111,.20));
  border-color:var(--cat-red);color:#FFF;font-weight:700;
}
.opb--solid:hover{background:rgba(255,111,111,.42)}
.opb[disabled]{background:var(--op-off-bg);border-color:var(--op-off-line);color:var(--op-off-tx);cursor:not-allowed}
.opb[disabled] svg{opacity:.45}
.opbrow{display:flex;gap:7px;flex-wrap:wrap}
.opbrow>.opb{flex:1;min-width:0}

/* 表单行：标签 + 控件（右栏模块内统一） */
.oprow{display:grid;grid-template-columns:74px 1fr;gap:9px;align-items:center}
.oprow>label{font-size:12px;color:var(--tx3)}
.oprow input,.oprow select{
  background:linear-gradient(180deg,#0D141C,#131E29);border:1px solid var(--line);border-radius:6px;
  color:var(--tx);font-family:var(--f-body);font-size:12.5px;padding:6px 9px;width:100%;
  box-shadow:inset 0 2px 5px -2px rgba(0,0,0,.6);
}
.oprow input:focus,.oprow select:focus{outline:none;border-color:var(--accent)}
/* 文件选择：原生控件在深色舱内是浅灰系统按钮，藏起来只留站内按钮 + 文件名 */
.filepick{display:flex;align-items:center;gap:9px;min-width:0}
.filepick>input[type="file"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.filepick>label{flex:none;cursor:pointer}
.filepick>input[type="file"]:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.filepick__name{
  flex:1;min-width:0;font-family:var(--f-mono);font-size:11px;color:var(--tx3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.oprow input[disabled],.oprow select[disabled]{background:var(--op-off-bg);color:var(--op-off-tx)}

/* 键值读数行 */
.opkv{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx2);padding:3px 0}
.opkv b{margin-left:auto;color:var(--tx);font-family:var(--f-mono);font-size:12px;font-variant-numeric:tabular-nums}
.opkv[data-sev="severe"] b{color:var(--sev-severe)}
.opkv[data-sev="warning"] b{color:var(--sev-warning)}
.opkv[data-sev="normal"] b{color:var(--sev-normal)}

/* 进度条 */
.opbar{height:6px;border-radius:3px;background:#101A24;border:1px solid rgba(68,90,112,.55);overflow:hidden}
.opbar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .18s}
.opbar[data-sev="severe"]>i{background:linear-gradient(90deg,#C9514B,var(--sev-severe))}

/* 传输条：倒退 / 暂停 / 前进 / 变速 */
.transport{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.transport .opb{padding:6px 10px}
.ratebtns{display:inline-flex;gap:2px;padding:2px;border-radius:7px;background:var(--bg2);border:1px solid var(--line)}
.ratebtns button{
  padding:3px 9px;border-radius:5px;border:1px solid transparent;background:transparent;cursor:pointer;
  color:var(--tx3);font-family:var(--f-mono);font-size:11px;
}
.ratebtns button[aria-pressed="true"]{background:var(--amber-dim);border-color:rgba(240,190,94,.45);color:var(--cat-amber)}

/* ---- 底部机群明细 dock ---- */
.gcs__dock{background:var(--bg2);border-top:1px solid var(--line);padding:7px 12px 8px}
.gcs__dockhdr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.gcs__dockhdr .opb{flex:none}
.docktabs{display:inline-flex;gap:2px;margin-left:auto;padding:2px;border-radius:7px;background:var(--void);border:1px solid var(--line)}
.docktabs button{padding:3px 10px;border-radius:5px;border:1px solid transparent;background:transparent;cursor:pointer;color:var(--tx3);font-size:11.5px}
.docktabs button[aria-selected="true"]{background:var(--blue-dim);border-color:rgba(71,177,236,.45);color:var(--accent)}
.dockbody{max-height:186px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--void)}
.dockbody::-webkit-scrollbar{width:8px;height:8px}
.dockbody::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}

/* 机群健康方格 */
.fgrid{display:flex;flex-wrap:wrap;gap:3px;padding:8px}
.fcell{
  width:15px;height:15px;border-radius:3px;flex:none;cursor:pointer;
  background:var(--sev-offline);border:1px solid rgba(0,0,0,.35);position:relative;
}
.fcell[data-sev="ready"]{background:var(--sev-ready)}
.fcell[data-sev="normal"]{background:var(--sev-normal)}
.fcell[data-sev="warning"]{background:var(--sev-warning)}
.fcell[data-sev="severe"]{background:var(--sev-severe)}
.fcell[data-sev="unverified"]{background:var(--sev-unverified)}
.fcell[data-armed="1"]{box-shadow:0 0 0 1.5px var(--ring-armed)}
.fcell[data-sel="1"]{box-shadow:0 0 0 2px var(--ring-select)}

@media(max-width:1100px){
  .gcs__mid{grid-template-columns:1fr;min-height:0}
  .gcs__map{border-right:0;border-bottom:1px solid var(--line);min-height:380px}
  .gcs__flow{max-height:none}
  .flowscroll{max-height:none;overflow:visible}
}
@media(max-width:640px){
  .gcs__row{padding:7px 9px}
  .chipbar{margin-left:0;width:100%}
  .warnbar{order:9;flex-basis:100%}
}

/* ============================================================
   27. GCS 外壳的网页增强层
   在基础控制台之上再推一层表现：
   渐变描边 / 背景模糊 / 内发光 / 脉冲指示灯 / HUD 角标 / 缓动微交互
   ============================================================ */

/* 渐变描边外壳：靠双层背景实现真正的一像素渐变边 */
.gcs{
  border:0;
  padding:1px;
  background:
    linear-gradient(180deg,var(--surf) 0%,var(--bg2) 100%) padding-box,
    linear-gradient(160deg,
      rgba(71,177,236,.55) 0%,
      rgba(50,70,88,.85) 26%,
      rgba(34,48,64,.9) 62%,
      rgba(111,224,212,.35) 100%) border-box;
  border:1px solid transparent;
}
.gcs::after{                       /* 顶部一道极细的电光 */
  content:"";position:absolute;left:14px;right:14px;top:0;height:1px;z-index:5;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(111,224,212,.75) 30%,rgba(71,177,236,.9) 55%,transparent);
  opacity:.8;
}

/* 顶部态势：磨砂玻璃 + 底部高光棱 */
.gcs__hdr{
  background:linear-gradient(180deg,rgba(30,45,61,.94),rgba(19,28,39,.94));
  backdrop-filter:blur(10px) saturate(130%);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 6px 18px -12px rgba(0,0,0,.9);
}

/* 状态胶囊：加内发光 + 数值等宽跳动 */
.schip{
  box-shadow:inset 0 1px 0 var(--glass),0 2px 6px -4px rgba(0,0,0,.8);
  transition:border-color .18s,box-shadow .18s;
}
.schip:hover{border-color:var(--line2)}
.schip i{position:relative}
/* 活跃指示灯：呼吸脉冲 */
.schip[data-live="1"] i::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  background:inherit;opacity:.5;animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(.7);opacity:.6}70%{transform:scale(2.1);opacity:0}100%{opacity:0}}

/* 三段 tab：选中态加内发光与底部指示条 */
.tabseg button{position:relative;transition:color .16s,background .16s}
.tabseg button[aria-selected="true"]{
  box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 0 14px -6px rgba(71,177,236,.85);
}
.tabseg button[aria-selected="true"]::after{
  content:"";position:absolute;left:22%;right:22%;bottom:3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}

/* 操作卡片：渐变描边 + 悬浮抬升 */
.opcard{
  position:relative;
  background:linear-gradient(180deg,var(--surf2) 0%,var(--surf) 100%);
  border-color:var(--line);
  box-shadow:inset 0 1px 0 var(--glass),0 10px 22px -18px rgba(0,0,0,.9);
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.opcard:hover{border-color:var(--line2);box-shadow:inset 0 1px 0 var(--glass-hi),0 14px 28px -18px rgba(0,0,0,.95)}
/* 卡片左上角一道类别色细光，标明这张卡属于哪一类操作 */
.opcard::before{
  content:"";position:absolute;left:11px;top:-1px;width:34px;height:2px;border-radius:2px;
  background:var(--cat-gray);opacity:.7;
}
.opcard--blue::before{background:var(--cat-blue)}
.opcard--green::before{background:var(--cat-green)}
.opcard--amber::before{background:var(--cat-amber)}
.opcard--red::before{background:var(--cat-red)}
.opcard--cyan::before{background:var(--cat-cyan)}
.opcard__ic{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}

/* 操作按钮：按下位移 + 主操作内发光 */
.opb{
  position:relative;
  box-shadow:inset 0 1px 0 rgba(200,245,255,.10),0 4px 10px -8px rgba(0,0,0,.9);
  transition:background .14s,border-color .14s,box-shadow .14s,transform .06s;
}
.opb:active{transform:translateY(1px)}
.opb--pri{box-shadow:inset 0 1px 0 rgba(200,245,255,.16),inset 0 0 18px -10px currentColor,0 6px 16px -10px rgba(0,0,0,.9)}
.opb--pri.opb--blue:hover{box-shadow:inset 0 1px 0 rgba(200,245,255,.2),inset 0 0 22px -8px rgba(92,180,251,.9),0 8px 20px -12px rgba(92,180,251,.5)}
.opb--pri.opb--amber:hover{box-shadow:inset 0 1px 0 rgba(200,245,255,.2),inset 0 0 22px -8px rgba(240,190,94,.9),0 8px 20px -12px rgba(240,190,94,.45)}
.opb--solid{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 22px -12px rgba(255,111,111,.7)}
.opb[disabled]{box-shadow:none;transform:none}

/* 地图视口：暗角 + 扫描线 + HUD 角标 */
.gcs__map::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(71,177,236,.030) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 45%, transparent 52%, rgba(0,0,0,.55) 100%);
}
.gcs__map::after{                  /* 四角 HUD 括号 */
  content:"";position:absolute;inset:10px;z-index:3;pointer-events:none;
  background:
    linear-gradient(var(--accent),var(--accent)) left top/14px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) left top/1px 14px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right top/14px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right top/1px 14px no-repeat,
    linear-gradient(var(--accent),var(--accent)) left bottom/14px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) left bottom/1px 14px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right bottom/14px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right bottom/1px 14px no-repeat;
  opacity:.42;
}
/* 地图内浮层读数：玻璃胶囊 */
.mapread .schip{
  background:rgba(16,24,34,.62);backdrop-filter:blur(8px) saturate(140%);
  border-color:rgba(50,70,88,.9);
}

/* 任务流程栏：与地图之间加一道立体分界 */
.gcs__flow{
  background:linear-gradient(180deg,var(--surf2) 0%,var(--surf) 46%,var(--bg2) 100%);
  box-shadow:inset 1px 0 0 var(--glass),-14px 0 30px -26px rgba(0,0,0,.95);
}

/* 进度条：加流动高光 */
.opbar{box-shadow:inset 0 2px 5px -2px rgba(0,0,0,.75)}
.opbar>i{position:relative;box-shadow:0 0 10px -2px rgba(71,177,236,.8)}
.opbar[data-run="1"]>i::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:sheen 1.3s linear infinite;
}
@keyframes sheen{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* 健康方格：加内高光，方格看起来是"亮着的灯"而不是色块 */
.fcell{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.35);
  transition:transform .12s,box-shadow .12s;
}
.fcell:hover{transform:scale(1.28);z-index:2}
.fcell[data-armed="1"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1.5px var(--ring-armed),0 0 8px -2px var(--ring-armed)}
.fcell[data-sel="1"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 2px var(--ring-select),0 0 10px -2px var(--ring-select)}
/* ★两通道正交：解锁紫环在内、选中黄环在外，各占一层不互相遮盖
   紫环画满格、黄环内缩一圈，两层互不遮盖 */
.fcell[data-armed="1"][data-sel="1"]{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
    0 0 0 1.5px var(--ring-armed),
    0 0 0 3.5px var(--ring-select),
    0 0 10px -2px var(--ring-select);
}

/* 底部 dock：与中央拉开层次 */
.gcs__dock{
  background:linear-gradient(180deg,var(--bg2),var(--void));
  box-shadow:inset 0 1px 0 var(--glass);
}
.dockbody{box-shadow:inset 0 3px 8px -4px rgba(0,0,0,.8)}

@media(prefers-reduced-motion:reduce){
  .schip[data-live="1"] i::after,.opbar[data-run="1"]>i::after{animation:none}
}

/* ============================================================
   28. 仿真控制台宽屏版
   视图优先：地图保留主要空间，任务栏单列独立滚动；遥测仍在底部。
   .bleed保留为内容组件选项；官网模拟器的展示宽度见redesign.css。
   ============================================================ */
.bleed{
  width:min(calc(100vw - 2 * var(--gut)), 2160px);
  margin-left:50%;
  translate:-50% 0;
}

/* 中央区高度锁进视口：控制台 = 顶栏 + 中央 + dock，整体一屏 */
.gcs--fit .gcs__mid{
  height:clamp(430px, calc(100vh - 285px), 820px);
  min-height:0;
}
/* dock 收矮，把高度让给中央区：一屏要装下的是操作内容，不是明细列表 */
.gcs--fit .dockbody{max-height:132px}
.gcs--fit .gcs__map{min-height:0}
.gcs--fit .gcs__flow{min-height:0}

/* 保持操作卡自然高度，不压扁字段；通过右栏滚动访问后续步骤。 */
.flowscroll > .opcard{flex:none;min-width:0}
/* 窄屏回到单列，高度不再锁死 */
@media(max-width:1100px){
  .gcs--fit .gcs__mid{height:auto}
  .bleed{width:auto;margin-left:0;translate:none}
}

/* 视图切换按钮：文字变长了，给足横向空间 */
.viewseg button{padding:4px 14px;white-space:nowrap}

/* 地图内的视图角标（左下角写当前视图口径） */
.mapmode{
  position:absolute;left:12px;bottom:12px;z-index:3;
  padding:5px 11px;border-radius:7px;
  background:rgba(16,24,34,.66);backdrop-filter:blur(8px);
  border:1px solid var(--line2);
  font-family:var(--f-mono);font-size:11px;color:var(--tx3);letter-spacing:.06em;
}
.mapmode b{color:var(--accent);font-weight:500}

/* 视图导航球：点轴端切预设视角 */
.gizmo{
  position:absolute;right:12px;top:12px;z-index:3;
  width:74px;height:74px;border-radius:50%;
  background:rgba(16,24,34,.55);backdrop-filter:blur(8px);
  border:1px solid var(--line2);
  box-shadow:inset 0 1px 0 var(--glass);
}
.gizmo canvas{width:100%;height:100%;display:block;border-radius:50%;cursor:grab}
.gizmo canvas:active{cursor:grabbing}
@media(max-width:760px){.gizmo{display:none}}

/* ============================================================
   29. 内容后台（admin/）
   只用上面已经定义好的令牌，不引入新颜色；结构沿用控制台外壳：
   .gcs 窗口 / .opcard 卡片 / .opb 按钮 / .tabseg 分段 / .schip 胶囊
   ============================================================ */
.adm-body{padding:var(--gut) var(--gut) calc(var(--gut) * 1.4)}
.adm-shell{max-width:2160px;margin:0 auto}

/* 顶栏 */
.adm-brand{display:flex;align-items:baseline;gap:9px;flex:none}
.adm-brand b{font-family:var(--f-disp);font-size:14px;font-weight:800;color:var(--tx)}
.adm-brand span{font-family:var(--f-mono);font-size:10px;color:var(--tx3);letter-spacing:.12em}
.adm-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.adm-tools .opb{flex:none}
.adm-body .tabseg{overflow-x:auto}
.adm-body .tabseg button{white-space:nowrap}
.adm-spacer{margin-left:auto}

/* 如实告知：没有后端鉴权 */
.adm-notice{
  flex:1;min-width:220px;padding:5px 11px;border-radius:7px;
  background:var(--amber-dim);border:1px solid var(--line2);
  color:var(--amber);font-size:12.5px;
}
.adm-notice b{color:var(--tx);font-weight:700}

/* 三栏工作区 */
.adm-grid{display:grid;grid-template-columns:250px minmax(0,1fr) 420px;min-height:0}
.adm-grid>*{min-width:0}
.adm-pane{display:flex;flex-direction:column;background:var(--surf);border-right:1px solid var(--line);min-height:0}
.adm-pane:last-child{border-right:0}
.adm-pane__h{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex:none;
  padding:8px 10px;border-bottom:1px solid var(--line);background:var(--surf2);
}
.adm-pane__t{font-size:12.5px;font-weight:700;color:var(--tx)}
.adm-pane__n{font-family:var(--f-mono);font-size:10.5px;color:var(--tx3)}
.adm-pane__ops{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-left:auto}
.adm-pane__ops:empty{display:none}
.adm-pane__b{flex:1;min-height:0;overflow-y:auto;padding:9px;display:flex;flex-direction:column;gap:8px}
.adm-pane__b::-webkit-scrollbar{width:8px}
.adm-pane__b::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
.adm-pane__b::-webkit-scrollbar-track{background:transparent}
.adm-single{min-height:0}
.adm-single .adm-pane{border-right:0}
@media(min-width:1100px){
  .adm-grid,.adm-single{height:clamp(460px,calc(100vh - 260px),980px)}
}
@media(max-width:1100px){
  .adm-grid{grid-template-columns:1fr}
  .adm-pane{border-right:0;border-bottom:1px solid var(--line);max-height:460px}
}

/* 列表行：页面树与区块树共用 */
.adm-row{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:7px 9px;border-radius:8px;cursor:pointer;
  background:linear-gradient(180deg,var(--surf2),var(--surf));
  border:1px solid var(--line);color:var(--tx2);
  font-family:var(--f-body);font-size:12.5px;
}
.adm-row:hover{border-color:var(--line2);color:var(--tx)}
.adm-row[aria-current="true"]{border-color:var(--accent);color:var(--tx);box-shadow:inset 0 0 16px -8px var(--accent)}
.adm-row__t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-row__k{font-family:var(--f-mono);font-size:10.5px;color:var(--tx3);flex:none}
.adm-row__ops{display:flex;gap:4px;flex:none}
.adm-line{display:flex;align-items:stretch;gap:5px}
.adm-line>.adm-row{flex:1;min-width:0}
.adm-line[data-drop="1"]>.adm-row{border-color:var(--accent2)}
.adm-drag{
  flex:none;width:16px;display:grid;place-items:center;cursor:grab;
  color:var(--tx3);font-family:var(--f-mono);font-size:11px;
}
.adm-drag:active{cursor:grabbing}
.adm-node{display:flex;flex-direction:column;gap:6px}
.adm-kids{display:flex;flex-direction:column;gap:6px;padding-left:14px;border-left:1px solid var(--line)}
.adm-empty{color:var(--tx3);font-size:12px;padding:10px 2px;font-family:var(--f-mono)}

/* 自动生成的字段表单 */
.adm-f{display:flex;flex-direction:column;gap:5px}
.adm-f__l{display:flex;align-items:baseline;gap:6px;font-size:12px;color:var(--tx2)}
.adm-f__l i{font-style:normal;color:var(--red);font-size:11px}
.adm-f__k{font-family:var(--f-mono);font-size:10px;color:var(--tx3);margin-left:auto}
.adm-in{
  background:linear-gradient(180deg,var(--bg),var(--surf));border:1px solid var(--line);border-radius:6px;
  color:var(--tx);font-family:var(--f-body);font-size:12.5px;padding:7px 9px;width:100%;
  box-shadow:inset 0 2px 5px -2px var(--shade);
}
.adm-in:focus{outline:none;border-color:var(--accent)}
.adm-in--mono{font-family:var(--f-mono);font-size:12px}
textarea.adm-in{min-height:74px;resize:vertical;line-height:1.55}
.adm-in--tall{min-height:130px}
.adm-in[aria-invalid="true"]{border-color:var(--red)}
.adm-hint{font-size:11px;color:var(--tx3);line-height:1.5}
.adm-err{font-size:11px;color:var(--red)}
.adm-bool{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx2);cursor:pointer}
.adm-bool input{width:15px;height:15px;accent-color:var(--accent);flex:none}
.adm-color{display:flex;align-items:center;gap:7px}
.adm-color .adm-in{flex:1;min-width:0}
.adm-color__p{
  width:34px;height:31px;flex:none;padding:2px;border-radius:6px;cursor:pointer;
  background:var(--surf2);border:1px solid var(--line);
}
.adm-pair{display:grid;grid-template-columns:1fr 1fr;gap:7px}
@media(max-width:520px){.adm-pair{grid-template-columns:1fr}}

/* 列表型字段：可增删排序的子项 */
.adm-items{display:flex;flex-direction:column;gap:7px}
.adm-item{
  border:1px solid var(--line);border-radius:9px;padding:8px 9px 9px;
  background:linear-gradient(180deg,var(--surf),var(--bg2));
  display:flex;flex-direction:column;gap:7px;
}
.adm-item__h{display:flex;align-items:center;gap:6px}
.adm-item__n{font-family:var(--f-mono);font-size:10.5px;color:var(--tx3);flex:1;min-width:0}
.adm-sect{display:flex;flex-direction:column;gap:11px}
.adm-sect__t{
  font-size:11px;font-family:var(--f-mono);letter-spacing:.1em;color:var(--tx3);
  border-bottom:1px solid var(--line);padding-bottom:5px;
}

/* 只读的区块类型一览 */
.adm-doc{display:flex;flex-direction:column;gap:14px;max-width:1000px}
.adm-doc p{font-size:13px;color:var(--tx2);line-height:1.75}
.adm-doc ol,.adm-doc ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.adm-doc li{font-size:13px;color:var(--tx2);line-height:1.7}
.adm-tbl{width:100%;border-collapse:collapse;font-size:12px}
.adm-tbl th,.adm-tbl td{
  text-align:left;padding:6px 9px;border-bottom:1px solid var(--line);
  color:var(--tx2);vertical-align:top;
}
.adm-tbl th{color:var(--tx3);font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.06em}
.adm-tbl td.adm-mono{font-family:var(--f-mono);color:var(--tx);white-space:nowrap}
.adm-scroll{overflow-x:auto}

/* 弹层：预览 / 发布说明 / 区块类型挑选 */
.adm-mask{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;
  background:var(--shade);backdrop-filter:blur(6px);
}
.adm-mask[hidden]{display:none}
.adm-dlg{
  width:min(1180px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;
  border-radius:var(--r-l);border:1px solid var(--line2);overflow:hidden;
  background:linear-gradient(180deg,var(--surf),var(--bg2));
  box-shadow:0 40px 90px -40px var(--shade);
}
.adm-dlg--s{width:min(620px,100%)}
.adm-dlg__h{
  display:flex;align-items:center;gap:9px;flex:none;padding:9px 11px;
  border-bottom:1px solid var(--line);background:var(--surf2);
}
.adm-dlg__t{font-size:13px;font-weight:700;color:var(--tx);flex:1;min-width:0}
.adm-dlg__b{flex:1;min-height:0;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:11px}
.adm-frame{
  flex:1;min-height:min(72vh,720px);width:100%;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);display:block;
}
.adm-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:7px}
.adm-pick{
  display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
  padding:8px 10px;border-radius:8px;cursor:pointer;
  background:linear-gradient(180deg,var(--surf2),var(--surf));border:1px solid var(--line);
}
.adm-pick:hover{border-color:var(--accent)}
.adm-pick b{color:var(--tx);font-size:12.5px;font-weight:600}
.adm-pick span{font-family:var(--f-mono);font-size:10.5px;color:var(--tx3)}

/* ============================================================
   30. 商城（列表 / 大图区 / 参数 / 问答）
   只做布局与占位，颜色全部复用上面的令牌，不引入任何新色值。
   状态色只出现在承载状态的胶囊上。
   ============================================================ */

/* 分类筛选 */
.shop-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(16px,2vw,24px)}
.shop-filter .btn{padding:8px 15px;font-size:13.5px}
.shop-filter .btn[aria-pressed="true"]{background:var(--blue-dim);border-color:rgba(71,177,236,.55);color:var(--accent)}

/* 产品卡片 */
.shop-card{display:flex;flex-direction:column;overflow:hidden}
.shop-card[hidden]{display:none}
.shop-card__fig{
  position:relative;display:block;aspect-ratio:8/5;
  background:var(--bg2);border-bottom:1px solid var(--line);
}
.shop-card__fig img{width:100%;height:100%;object-fit:cover;display:block}
.shop-card__b{flex:1;gap:0}
.shop-card__k{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.shop-card h3{margin:11px 0 6px;font-size:18.5px}
.shop-sub{font-size:13px;color:var(--tx3);line-height:1.6}
.shop-card p{margin-top:9px}

/* 图片占位：图缺了也不出裂图 */
.shop-ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--bg2);border:1px dashed var(--line2);border-radius:inherit;color:var(--tx3);
}

/* 价格与库存 */
.shop-meta{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:15px}
.shop-price{
  font-family:var(--f-disp);font-weight:800;font-size:25px;line-height:1.1;
  color:var(--tx);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.shop-price small{font-size:.4em;color:var(--tx3);font-weight:500;margin-left:5px;letter-spacing:0}
.shop-note{margin-top:8px;font-size:12.4px;color:var(--tx3);line-height:1.6}
.shop-note:empty{display:none}

/* 大图区 */
.shop-hero{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:clamp(18px,2.6vw,38px);align-items:start}
.shop-gal{position:sticky;top:96px}
.shop-hero>*{min-width:0}
@media(max-width:900px){.shop-hero{grid-template-columns:1fr}.shop-gal{position:static;top:auto}}
.shop-gal__main{
  position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-m);
  background:var(--bg2);border:1px solid var(--line2);
}
.shop-gal__main img{width:100%;height:100%;object-fit:cover;display:block}
.shop-gal__cap{margin-top:10px;font-family:var(--f-mono);font-size:11px;color:var(--tx3);letter-spacing:.05em}
.shop-gal__cap:empty{display:none}
.shop-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.shop-thumb{
  position:relative;width:96px;aspect-ratio:8/5;padding:0;overflow:hidden;cursor:pointer;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-s);
}
.shop-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.shop-thumb:hover{border-color:var(--line2)}
.shop-thumb[aria-pressed="true"]{border-color:var(--accent)}
.shop-thumb .shop-ph{border:0}

/* 大图区右栏 */
.shop-back{display:inline-block;margin-bottom:14px;font-size:13.2px;color:var(--tx3)}
.shop-back:hover{color:var(--accent)}
.shop-h1{margin:12px 0 0;font-size:clamp(26px,3vw,38px)}
.shop-hero .lead{margin-top:12px}
.shop-sum{margin-top:12px;font-size:14.6px;color:var(--tx2);line-height:1.75}
.shop-hl{list-style:none;margin:18px 0 0;padding:0}
.shop-hl li{position:relative;padding:9px 0 9px 18px;font-size:14.2px;color:var(--tx2);line-height:1.7;border-top:1px solid var(--line)}
.shop-hl li:first-child{border-top:0}
.shop-hl li::before{content:"";position:absolute;left:1px;top:18px;width:9px;height:1px;background:var(--accent)}

/* 选购框 */
.shop-buy{margin-top:22px;height:auto}
.shop-buy .field{margin-top:16px}
.shop-buy .shop-price{margin-top:16px}
.shop-vlabel{margin-top:14px;font-size:13.6px;color:var(--tx2)}
.shop-cta{margin-top:18px;justify-content:center;width:100%}
.shop-buy .note{margin-top:16px}

/* 参数区 */
.shop-specs{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
.shop-specs h3{margin:0 0 11px;font-size:17px}
.shop-specs .tbl td:first-child{width:34%;white-space:normal}

/* 问答 */
.shop-faqs{display:flex;flex-direction:column;gap:9px}
.shop-faq>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:15px 18px;font-size:14.8px;font-weight:700;color:var(--tx);
}
.shop-faq>summary::-webkit-details-marker{display:none}
.shop-faq>summary::after{content:"+";margin-left:auto;font-family:var(--f-mono);font-size:15px;color:var(--accent)}
.shop-faq[open]>summary::after{content:"-"}
.shop-faq>summary:hover{color:var(--accent)}
.shop-faq__a{padding:0 18px 16px;font-size:14.2px;color:var(--tx2);line-height:1.78}
.shop-faq__a p{margin-bottom:10px}
.shop-faq__a p:last-child{margin-bottom:0}

/* ============================================================
   31. 购物车与下单（顶栏入口 / 清单 / 合计 / 下单表单）
   仍然只做布局，颜色全部复用上面的令牌。
   件数徽标承载的是「车里有几件」这条数据，所以它才上强调色。
   ============================================================ */

/* 顶栏入口。件数为 0 也照常显示，位置固定不藏 */
.rail__cart{
  flex:none;display:flex;align-items:center;gap:8px;
  margin-left:10px;padding:7px 12px;border-radius:8px;
  color:var(--tx2);border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surf2),var(--surf));
  box-shadow:inset 0 1px 0 var(--glass);
  transition:color .15s,border-color .15s;
}
.rail__cart:hover{color:var(--tx);border-color:var(--line2)}
.rail__cart__ic{display:block;width:18px;height:18px}
.rail__cart__ic svg{width:18px;height:18px;display:block}
.rail__cart__n{
  min-width:20px;padding:0 5px;border-radius:10px;text-align:center;
  font-family:var(--f-mono);font-size:11.5px;line-height:19px;
  font-variant-numeric:tabular-nums;
  color:var(--tx3);background:#101A24;border:1px solid var(--line);
}
.rail__cart[data-n="1"] .rail__cart__n{
  color:var(--on-fill);background:var(--fill);border-color:rgba(71,177,236,.7);
  box-shadow:0 0 12px -4px rgba(71,177,236,.9);
}
@media(max-width:980px){
  .rail__cart{order:2;margin-left:auto;margin-right:10px}
  .rail__burger{order:3;margin-left:0}
}

/* 加入购物车的即时回执。绿色走既有令牌，权重靠 .btn.shop-cta 压过 .btn--key，不用 !important */
.btn.shop-cta[data-done="1"]{
  background:var(--green-dim);
  border-color:rgba(67,208,130,.45);
  color:var(--green);
}

/* 清单。宽屏是六列表格 */
.cart-tbl{min-width:660px}
.cart-tbl td:first-child{font-family:inherit;font-size:14px;white-space:normal;min-width:11em}
.cart-tbl td:nth-child(2){min-width:9em}
.cart-tbl td{vertical-align:middle}
.cart-name{color:var(--tx);font-weight:600}
a.cart-name:hover{color:var(--accent)}
.cart-tbl .mono{font-size:11px;letter-spacing:.05em;margin-top:4px}
.cart-sub{font-variant-numeric:tabular-nums;color:var(--tx);white-space:nowrap}
.cart-qty{display:flex;align-items:center;gap:6px}
.cart-qty .btn{padding:6px 12px;font-variant-numeric:tabular-nums}
.cart-qty__n{
  width:46px;padding:5px 6px;text-align:center;
  font-family:var(--f-mono);font-size:13px;font-variant-numeric:tabular-nums;
  color:var(--tx);background:#0F1822;border:1px solid var(--line2);border-radius:6px;
  box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.8);
}
.cart-qty__n:focus{outline:none;border-color:var(--accent);background:#14202D}

/* 空状态：一句话加一个出口，不留白 */
.cart-empty{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.cart-empty p{color:var(--tx2);font-size:14.6px;line-height:1.75;max-width:52ch}

/* 合计与整车操作 */
.cart-sum{margin-top:16px}
.cart-sum__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cart-sum__k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.cart-sum .shop-price{margin:0}
.cart-sum__n{margin-top:10px;font-family:var(--f-mono);font-size:12px;color:var(--tx3);letter-spacing:.04em}
.cart-ops{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.cart-ops .btn{text-decoration:none}
.cart-lost{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.cart-lost>div{flex:1;min-width:16em}

/* 放不下就放弃表格：一件商品一张 well 卡，列名从 data-label 出。
   改数量和移除是购物车仅有的两个核心操作，不能藏在横向手势后面。
   断点取 820px —— 六列实测要 675px，加上 .wrap 两侧留白，视口不到 820 就会有一列被切掉。 */
@media(max-width:820px){
  .cart-tbl{min-width:0;width:100%;border-collapse:separate;border-spacing:0}
  .cart-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cart-tbl tbody,.cart-tbl tr,.cart-tbl td{display:block;width:auto}
  .cart-tbl tr{
    margin-bottom:12px;padding:14px 15px;border-radius:var(--r-s);
    background:linear-gradient(180deg,var(--bg2),var(--surf));
    border:1px solid var(--line);
    box-shadow:inset 0 2px 6px -4px rgba(0,0,0,.85);
  }
  .cart-tbl tr:last-child{margin-bottom:0}
  .cart-tbl td{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:7px 0;border:0;min-width:0;white-space:normal;text-align:right;
  }
  .cart-tbl td::before{
    display:block;flex:none;text-align:left;
    content:attr(data-label);
    font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--tx3);
  }
  .cart-tbl td:first-child{font-size:15px;min-width:0}
  .cart-tbl td:nth-child(2){min-width:0}
  .cart-tbl .cart-cell--name{
    display:block;text-align:left;
    padding-bottom:11px;margin-bottom:4px;border-bottom:1px solid var(--line);
  }
  .cart-tbl .cart-cell--name::before{display:none}
  .cart-tbl .cart-cell--act{padding-top:11px;margin-top:4px;border-top:1px solid var(--line)}
  .cart-tbl .cart-cell--act::before{content:attr(data-label)}
  .cart-tbl .cart-qty{justify-content:flex-end}
}

/* ============================================================
   28. 浅色主题 —— 业务侧页面用（表演运营 / 产学研）
   技术侧（首页 / 开放平台 / 飞行模拟器）保持深色控制台调性；
   面向客户与院校的业务页改成明亮的产品展示风：白底、灰阶层次、
   大图开场、居中分区标题、特性网格。强调色仍是自家的品牌蓝与青蓝。
   用法：页面 JSON 里写 "theme": "light"，薄壳给 <html> 加 data-theme="light"。
   ============================================================ */
[data-theme="light"]{
  --void:#FFFFFF;
  --bg:#FFFFFF;
  --bg2:#F7F9FC;
  --surf:#FFFFFF;
  --surf2:#F4F7FB;
  --surf3:#EAF0F7;

  --line:#E4EAF2;
  --line2:#CFD9E6;

  --tx:#0E1620;
  --tx2:#44566B;
  --tx3:#5E6E80;   /* 浅底上要压深，否则小字对比度不足 4.5:1 */

  --glass:rgba(14,22,32,.05);
  --glass-hi:rgba(255,255,255,.9);
  --shade:rgba(14,22,32,.06);

  --blue-dim:#E8F3FC;
  --green-dim:#E9F7EF;
  --amber-dim:#FDF3E2;
  --red-dim:#FDECEC;
  --violet-dim:#F0EDFD;

  --op-bg:linear-gradient(180deg,#FFFFFF,#F4F7FB);
  --op-bg-h:linear-gradient(180deg,#F7FAFD,#E9EFF7);
  --op-tx:#22364B;
  --op-tx-pri:#0E1620;
  --op-off-bg:#F2F4F7;
  --op-off-line:#E1E6ED;
  --op-off-tx:#A6B2C0;
}

/* 环境层：浅色下不要座舱顶光与碳纤维织纹 */
[data-theme="light"] body{background:var(--bg)}
[data-theme="light"] body::before{
  background:radial-gradient(1100px 560px at 70% -12%, rgba(0,159,232,.07), transparent 62%);
}
[data-theme="light"] body::after{display:none}

/* 立体：浅色靠投影，不靠发光 */
[data-theme="light"] .raise{
  background:#FFFFFF;
  border-color:var(--line);
  box-shadow:0 1px 2px rgba(14,22,32,.05), 0 10px 26px -18px rgba(14,22,32,.28);
}
[data-theme="light"] .well{
  background:var(--bg2);
  border-color:var(--line);
  box-shadow:inset 0 1px 2px rgba(14,22,32,.05);
}
[data-theme="light"] .shell{
  background:#FFFFFF;
  border-color:var(--line);
  box-shadow:0 2px 4px rgba(14,22,32,.05), 0 24px 56px -32px rgba(14,22,32,.3);
}
[data-theme="light"] .shell::before{opacity:1}

/* 顶栏：浅色玻璃 */
[data-theme="light"] .rail{
  background:rgba(255,255,255,.9);
  border-bottom-color:var(--line);
  box-shadow:0 1px 0 rgba(14,22,32,.04), 0 8px 22px -20px rgba(14,22,32,.25);
}
[data-theme="light"] .rail__nav a:hover{background:var(--surf3)}
[data-theme="light"] .rail__nav a[aria-current="page"]{
  background:var(--blue-dim);border-color:rgba(0,159,232,.35);color:var(--brand);
}
[data-theme="light"] .brand__mark{
  background:#FFFFFF;border-color:rgba(0,159,232,.4);
  box-shadow:0 2px 8px -4px rgba(0,159,232,.5);
}

/* 模块舱：浅色下用浅灰导轨 + 白内腔 */
[data-theme="light"] .bay__rail{
  background:linear-gradient(180deg,#F4F7FB,#EAF0F7);
  border-color:var(--line);
  box-shadow:none;
}
[data-theme="light"] .bay__body{
  background:#FFFFFF;border-color:var(--line);
  box-shadow:0 10px 28px -22px rgba(14,22,32,.25);
}
[data-theme="light"] .bay__id{background:var(--blue-dim);border-color:rgba(0,159,232,.3);color:var(--brand)}

/* 按钮 */
[data-theme="light"] .opb{box-shadow:0 1px 2px rgba(14,22,32,.06)}
[data-theme="light"] .opb--pri{box-shadow:0 2px 10px -4px rgba(0,159,232,.45)}
[data-theme="light"] .btn{
  background:linear-gradient(180deg,#FFFFFF,#F4F7FB);
  border-color:var(--line2);color:var(--tx);
  box-shadow:0 1px 2px rgba(14,22,32,.06);
}
[data-theme="light"] .btn--key{
  background:linear-gradient(180deg,#1BA9EC,#009FE8);
  border-color:#009FE8;color:#FFFFFF;
  box-shadow:0 6px 18px -8px rgba(0,159,232,.6);
}

/* 表格与代码块 */
[data-theme="light"] .tbl th{
  background:linear-gradient(180deg,#F4F7FB,#EAF0F7);color:var(--tx3);
  border-bottom-color:var(--line2);box-shadow:none;
}
[data-theme="light"] .tbl tbody tr:hover td{background:var(--bg2)}
[data-theme="light"] .code pre{background:#F7F9FC;color:#33445A}
[data-theme="light"] .code__bar{
  background:linear-gradient(180deg,#EAF0F7,#E1E9F2);color:var(--tx3);box-shadow:none;
}
[data-theme="light"] .code .c{color:#8A97A7}
[data-theme="light"] .code .k{color:#0E7FBF}
[data-theme="light"] .code .s{color:#B26A00}
[data-theme="light"] .code .f{color:#0E1620}

/* 芯片与提示 */
[data-theme="light"] .chip{background:#FFFFFF;border-color:var(--line2);box-shadow:none}
[data-theme="light"] .note{
  background:var(--blue-dim);border-color:rgba(0,159,232,.28);color:var(--tx2);
}
[data-theme="light"] .note--core{background:var(--red-dim);border-color:rgba(201,81,75,.28)}
[data-theme="light"] .note--warn{background:var(--amber-dim);border-color:rgba(178,106,0,.26)}

/* 强调色在浅底上要压深一档才够对比 */
[data-theme="light"] .eyebrow::before{box-shadow:0 0 0 3px rgba(0,159,232,.14)}
[data-theme="light"] .panel__more,[data-theme="light"] .tile__k{color:var(--brand)}
[data-theme="light"] .metric__v small{color:var(--brand)}
[data-theme="light"] .hero__title em{color:var(--brand);text-shadow:none}

/* 页脚 */
[data-theme="light"] .foot{
  background:var(--bg2);border-top-color:var(--line);box-shadow:none;
}

/* ---- 大图开场：满宽视觉 + 叠加标题（业务页的开场） ---- */
.showcase{position:relative;overflow:hidden;border-radius:var(--r-l);isolation:isolate}
.showcase::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--line),inset 0 0 34px 14px rgba(10,15,21,.94);
}
.showcase__media{position:absolute;inset:0;z-index:0}
.showcase__media img,.showcase__media svg{width:100%;height:100%;object-fit:cover;display:block}
.showcase::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,12,20,.55) 0%,rgba(6,12,20,0) 26%,rgba(6,12,20,0) 62%,rgba(6,12,20,.75) 100%),
    linear-gradient(100deg,rgba(6,12,20,.92) 4%,rgba(6,12,20,.79) 42%,rgba(6,12,20,.26) 78%);
}
.showcase__in{position:relative;z-index:2;padding:clamp(30px,5vw,64px);min-height:clamp(420px,62vh,680px);
  display:flex;flex-direction:column;justify-content:flex-end}
.showcase__in .eyebrow{color:rgba(255,255,255,.72)}
.showcase__in .eyebrow::before{background:#FFFFFF;box-shadow:0 0 10px rgba(255,255,255,.8)}
.showcase h2{color:#FFFFFF;max-width:20ch;margin-top:14px}
.showcase p{color:rgba(255,255,255,.86);max-width:52ch;margin-top:14px;font-size:clamp(15px,1.2vw,17.5px)}
.showcase .btns{margin-top:26px}
@media(max-width:640px){
  .showcase::after{background:linear-gradient(180deg,rgba(6,12,20,.28) 0%,rgba(6,12,20,.28) 24%,rgba(6,12,20,.62) 52%,rgba(6,12,20,.88) 100%)}
  .showcase__in{min-height:clamp(340px,58vh,480px)}
}

/* ---- 居中分区标题（业务页的节奏） ---- */
.head--center{margin-inline:auto;text-align:center;max-width:62ch}
.head--center .eyebrow{justify-content:center}

/* ---- 特性网格：图标 + 标题 + 说明 ---- */
.fgrid2{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px)}
.fgrid2>*{min-width:0}
.fcard{padding:clamp(20px,2.2vw,28px);border-radius:var(--r-m);text-align:left}
.fcard__ic{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--blue-dim);border:1px solid rgba(0,159,232,.26);
}
.fcard__ic svg{width:21px;height:21px;display:block;stroke:var(--brand)}
.fcard h3{margin:0 0 10px;font-size:clamp(16.5px,1.35vw,19px)}
.fcard p{color:var(--tx2);font-size:14.5px;line-height:1.72}
.fcard__n{
  display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
  color:var(--tx3);margin-bottom:10px;
}
/* 尾行空舱：条目数不是列数的整数倍时，按条目数选列数 */
.fgrid2:has(>:nth-child(2):last-child),.steps:has(>:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.fgrid2:has(>:nth-child(3):last-child),.steps:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.fgrid2:has(>:nth-child(6):last-child),.steps:has(>:nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}
.fgrid2[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
.fgrid2[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.fgrid2,.fgrid2[data-cols="2"],.fgrid2[data-cols="3"],
  .fgrid2:has(>:nth-child(2):last-child),.fgrid2:has(>:nth-child(3):last-child),
  .fgrid2:has(>:nth-child(6):last-child){grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.fgrid2,.fgrid2[data-cols="2"],.fgrid2[data-cols="3"],
  .fgrid2:has(>:nth-child(2):last-child),.fgrid2:has(>:nth-child(3):last-child),
  .fgrid2:has(>:nth-child(6):last-child){grid-template-columns:1fr}}

/* ---- 数据条：业务页用的大数字排布 ---- */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.statrow>*{min-width:0;background:var(--surf);padding:clamp(20px,2.4vw,30px)}
.statrow .metric__v{color:var(--tx)}
@media(max-width:820px){.statrow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.statrow{grid-template-columns:1fr}}


/* 嵌在模块舱里的整段区块（featuregrid/showcase）不再叠加外层区段的内外距，
   否则同一个舱里它比兄弟块窄一圈、上下也多出一截 */
.bay .section{padding-block:0}
.bay .section.wrap,.bay .section>.wrap{padding-inline:0;max-width:none}
.bay .section+.section{padding-block-start:clamp(18px,2vw,26px)}


/* 纯图片带：不承载文字，遮罩只留一点点压边，让画面本身出来 */
.showcase--bare::after{background:linear-gradient(180deg,rgba(6,12,20,.30) 0%,rgba(6,12,20,0) 26%,rgba(6,12,20,0) 72%,rgba(6,12,20,.42) 100%)}
.showcase--bare .showcase__in{padding:0;min-height:clamp(300px,40vh,460px)}

/* 正文里的内联链接。全局 a 被重置成 color:inherit + 无下划线（顶栏、按钮、卡片都要这个），
   于是写在正文里的链接看上去和普通文字一模一样，没人知道能点。这里在正文语境把它认回来。
   只作用于 p / li / dd / 表格单元格 / 事实清单 / 提示条里的裸 a，带 class 的控件不受影响。 */
p > a:not([class]), li > a:not([class]), dd > a:not([class]),
.tbl td a:not([class]), .fact__v a:not([class]), .note a:not([class]){
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(71,177,236,.40);
  text-underline-offset:3px;
  transition:color .16s ease,text-decoration-color .16s ease;
}
p > a:not([class]):hover, li > a:not([class]):hover, dd > a:not([class]):hover,
.tbl td a:not([class]):hover, .fact__v a:not([class]):hover, .note a:not([class]):hover{
  color:var(--tx);
  text-decoration-color:var(--accent);
}

/* ============================================================
   章分隔 —— 页面的一级层次
   一页七八个模块舱、每个都是同样粗的框同样的编号徽标，读者分不出主次。
   章把同一个问题下的舱归成一组：一条贯通的细线、一个大号序号、一句话说明。
   序号在这里是有意义的，它就是阅读顺序。
   ============================================================ */
.chap{padding-block:clamp(52px,7vw,104px) clamp(20px,2.6vw,34px)}
.chap__in{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.6vw,34px);
  align-items:start;padding-top:clamp(22px,3vw,38px);
  border-top:1px solid var(--line2);position:relative;
}
/* 线的左端加一小截高亮，指明这一章从这里开始 */
.chap__in::before{
  content:"";position:absolute;left:0;top:-1px;width:clamp(48px,7vw,96px);height:2px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
}
.chap__no{
  font-family:var(--f-mono);font-size:clamp(30px,4.4vw,54px);line-height:1;
  font-weight:500;color:var(--tx3);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;padding-top:.06em;
}
.chap__txt{min-width:0}
.chap__txt h2{
  margin-top:10px;font-size:clamp(24px,3.1vw,38px);line-height:1.24;
  letter-spacing:-.01em;text-wrap:balance;
}
.chap__txt .lead{margin-top:12px;max-width:60ch;color:var(--tx2)}
@media(max-width:640px){
  .chap__in{grid-template-columns:1fr;gap:6px}
  .chap__no{font-size:26px;color:var(--accent)}
}

/* ============================================================
   会员入口与手机验证码 Demo
   ============================================================ */
.rail__auth{
  min-height:44px;flex:none;padding:0 15px;border-radius:8px;cursor:pointer;
  color:var(--tx);font:700 13px/1 var(--f-body);
  background:var(--blue-dim);border:1px solid rgba(71,177,236,.45);
  box-shadow:inset 0 1px 0 var(--glass);transition:border-color .15s,filter .15s;
}
.rail__auth:hover{border-color:var(--accent);filter:brightness(1.12)}
.rail__auth:focus-visible,.auth-dialog button:focus-visible,.auth-dialog input:focus-visible,
.auth-dialog select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:980px){
  .rail__auth{order:2;margin-left:auto;padding-inline:12px}
  .rail__burger{order:3;margin-left:0;min-height:44px}
}
@media(max-width:480px){
  .rail__in{gap:8px}
  .brand__txt{display:none}
  .rail__auth{font-size:12.5px}
}

.member-access{padding-block:clamp(64px,8vw,110px)}
.member-grid{
  display:grid;grid-template-columns:minmax(0,1.18fr) minmax(280px,.82fr);
  grid-template-rows:repeat(2,minmax(190px,1fr));gap:16px;
}
.member-card{
  min-width:0;padding:clamp(22px,2.8vw,34px);border:1px solid var(--line2);
  border-radius:var(--r-l);background:linear-gradient(145deg,var(--surf2),var(--surf));
  box-shadow:inset 0 1px 0 var(--glass),0 18px 40px -28px rgba(0,0,0,.9);
  display:flex;flex-direction:column;align-items:flex-start;
}
.member-card--featured{
  grid-row:1 / span 2;min-height:430px;
  background:
    radial-gradient(circle at 86% 14%,rgba(0,159,232,.18),transparent 34%),
    linear-gradient(145deg,var(--surf3),var(--surf));
  border-color:rgba(71,177,236,.42);
}
.member-card__label{
  display:inline-flex;padding:4px 8px;border-radius:5px;font:500 10.5px/1.4 var(--f-mono);
  letter-spacing:.13em;color:var(--accent);background:var(--blue-dim);
  border:1px solid rgba(71,177,236,.32);
}
.member-card h3{margin:18px 0 10px;font-size:clamp(20px,2.2vw,30px)}
.member-card--featured h3{font-size:clamp(28px,4vw,50px);max-width:9ch;margin-top:auto}
.member-card p{max-width:48ch;color:var(--tx2);font-size:14.5px}
.member-card--featured p{font-size:clamp(15px,1.3vw,17px)}
.member-card__meta{margin-top:18px;font:400 11.5px/1.6 var(--f-mono);color:var(--tx3)}
.member-card__foot{
  width:100%;margin-top:auto;padding-top:22px;display:flex;align-items:center;
  justify-content:space-between;gap:14px;
}
.member-card__state{font:500 11px/1.4 var(--f-mono);color:var(--tx3)}
.member-card__state::before{
  content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;
  background:var(--sev-offline);
}
.member-card__state[data-ready="1"]{color:var(--green)}
.member-card__state[data-ready="1"]::before{background:var(--green);box-shadow:0 0 9px rgba(67,208,130,.7)}
@media(max-width:820px){
  .member-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .member-card--featured{grid-row:auto;min-height:350px}
}
@media(max-width:560px){
  .member-card--featured{min-height:320px}
  .member-card__foot{align-items:flex-start;flex-direction:column}
  .member-card__foot .btn{width:100%;justify-content:center;min-height:44px}
}

.auth-dialog{
  width:min(920px,calc(100vw - 32px));max-height:min(760px,calc(100dvh - 32px));
  padding:0;border:1px solid var(--line2);border-radius:18px;color:var(--tx);
  background:var(--bg2);box-shadow:0 32px 90px rgba(0,0,0,.72);overflow:auto;
}
.auth-dialog::backdrop{background:rgba(3,7,11,.76);backdrop-filter:blur(8px)}
.auth-dialog__shell{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.35fr);min-height:590px;position:relative}
.auth-dialog__brand{
  padding:clamp(30px,4vw,48px);display:flex;flex-direction:column;justify-content:flex-end;
  background:
    linear-gradient(180deg,rgba(7,11,16,.12),rgba(7,11,16,.88)),
    url("../img/site/af-control-desk-night.jpg") center/cover;
  border-right:1px solid var(--line2);
}
.auth-dialog__brand strong{margin-top:14px;font:800 clamp(24px,3vw,36px)/1.18 var(--f-disp)}
.auth-dialog__brand p{margin-top:14px;color:var(--tx2);font-size:14px}
.auth-dialog__body{padding:clamp(30px,4.5vw,54px);align-self:center}
.auth-dialog__body h2{margin-top:12px;font-size:clamp(28px,3.8vw,42px)}
.auth-dialog__lead{margin-top:10px;color:var(--tx2);font-size:14px}
.auth-dialog__step{font:500 10.5px/1.4 var(--f-mono);letter-spacing:.16em;color:var(--accent)}
.auth-dialog__close{
  position:absolute;z-index:2;right:16px;top:16px;width:44px;height:44px;border-radius:50%;
  cursor:pointer;color:var(--tx2);font:400 26px/1 var(--f-body);
  background:rgba(10,15,21,.82);border:1px solid var(--line2);
}
.auth-dialog form{margin-top:28px}
.auth-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.auth-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.auth-field>span{font-size:13px;font-weight:700;color:var(--tx2)}
.auth-field input,.auth-field select{
  width:100%;min-height:46px;padding:10px 12px;border-radius:8px;color:var(--tx);
  font:400 14.5px/1.4 var(--f-body);background:var(--surf);border:1px solid var(--line2);
}
.auth-field input::placeholder{color:var(--tx3)}
.auth-code-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;margin-top:15px}
.auth-code-btn{
  min-width:112px;min-height:46px;padding:0 13px;border-radius:8px;cursor:pointer;
  color:var(--accent);font:700 12.5px/1 var(--f-body);background:var(--blue-dim);
  border:1px solid rgba(71,177,236,.4);
}
.auth-code-btn:disabled{cursor:wait;color:var(--tx3);border-color:var(--line)}
.auth-demo-note{
  display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:16px;padding:12px 14px;
  border-radius:8px;color:var(--tx2);font-size:12.5px;background:var(--blue-dim);
  border:1px solid rgba(71,177,236,.3);
}
.auth-demo-note b{color:var(--accent)}
.auth-demo-note code{font-family:var(--f-mono);color:var(--tx)}
.auth-check{display:flex;align-items:flex-start;gap:10px;margin-top:17px;color:var(--tx2);font-size:12.5px;cursor:pointer}
.auth-check input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--brand)}
.auth-error{min-height:22px;margin-top:10px;color:var(--amber);font-size:12.5px}
.auth-back{
  width:100%;min-height:44px;margin-bottom:8px;cursor:pointer;color:var(--tx2);
  font:700 12.5px/1 var(--f-body);background:transparent;border:0;
}
.auth-back:hover{color:var(--accent)}
.auth-submit{width:100%;min-height:46px;justify-content:center;margin-top:6px}
.auth-account{display:grid;gap:0;margin:26px 0 12px;border-top:1px solid var(--line)}
.auth-account>div{display:grid;grid-template-columns:90px 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.auth-account dt{color:var(--tx3);font:400 11.5px/1.6 var(--f-mono)}
.auth-account dd{margin:0;color:var(--tx);font-size:14px}
@media(max-width:700px){
  .auth-dialog{width:min(100vw - 20px,540px);max-height:calc(100dvh - 20px)}
  .auth-dialog__shell{display:block;min-height:0}
  .auth-dialog__brand{min-height:150px;padding:24px;justify-content:flex-end;border-right:0;border-bottom:1px solid var(--line2)}
  .auth-dialog__brand strong{font-size:24px}.auth-dialog__brand p{display:none}
  .auth-dialog__body{padding:28px 22px 30px}
}
@media(max-width:480px){
  .auth-fields{grid-template-columns:1fr}
  .auth-code-row{grid-template-columns:1fr}.auth-code-btn{width:100%}
}

.route-guard{padding-block:clamp(68px,9vw,120px)}
.route-guard__in{padding:clamp(32px,6vw,72px);max-width:820px}
.route-guard__in h1{margin-top:14px;font-size:clamp(32px,5.5vw,60px)}
.route-guard__in p{max-width:54ch;margin:16px 0 26px;color:var(--tx2)}

[data-theme="light"] .rail__auth{color:var(--brand);background:var(--blue-dim)}
[data-theme="light"] .member-card{background:linear-gradient(145deg,#FFFFFF,var(--surf));box-shadow:none}
[data-theme="light"] .auth-dialog{color:var(--tx);background:var(--bg2)}

@media(prefers-reduced-motion:reduce){
  .auth-dialog::backdrop{backdrop-filter:none}
  .rail__auth,.member-card{transition:none}
}
[data-locale-unavailable="true"] { display: none !important; }