/* GROK ENGINE Cyber Deck — Phase 156 军工级 HUD (深冷底 × 高对比锐利) */
:root{
  --bg:#04060b; --panel:#0a0f18; --line:#182433; --dim:#5b6b7d;
  --txt:#c9d6e3; --cyan:#00e5ff; --gold:#ffd166; --red:#ff2b4e;
  --grn:#00ff9d; --blue:#38bdf8; --amber:#eab308;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg); color:var(--txt);
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",
    "IBM Plex Mono","JetBrains Mono",ui-monospace,monospace;
  font-size:12px; overflow-x:hidden;
}
/* ---- 全局后期: CRT 扫描线 + 暗角 (CSS 合成, 零 GPU 后管依赖) ---- */
body::before{
  content:""; position:fixed; inset:0; z-index:90; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,0,0,.42) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
body::after{
  content:""; position:fixed; left:0; right:0; height:90px; z-index:91;
  pointer-events:none; opacity:.05;
  background:linear-gradient(180deg, transparent, rgba(0,229,255,.7), transparent);
  animation:sweep 9s linear infinite;
}
@keyframes sweep{0%{top:-12%}100%{top:108%}}
/* ---- 毛刺 (JS 定时短促触发) ---- */
body.glitch .wrap{animation:gl .18s steps(2) both}
@keyframes gl{
  0%{transform:translate(0);filter:none}
  25%{transform:translate(-3px,1px) skewX(-.6deg);filter:hue-rotate(24deg) saturate(1.6)}
  50%{transform:translate(2px,-2px) skewX(.5deg);filter:contrast(1.4)}
  75%{transform:translate(-1px,2px);filter:hue-rotate(-18deg)}
  100%{transform:translate(0);filter:none}
}
.wrap{max-width:1720px;margin:0 auto;padding:6px 8px;display:flex;flex-direction:column;gap:6px}
/* ---- 面板: 角括号 + 刻度尺 + 微标签 ---- */
.panel>.corn{position:absolute;inset:0;pointer-events:none}

.panel{position:relative;background:linear-gradient(180deg,#0a0f18,#080d15);
  border:1px solid var(--line);padding:6px 8px 8px}
.panel::before,.panel::after,
.panel .corn::before,.panel .corn::after{
  content:"";position:absolute;width:9px;height:9px;pointer-events:none}
.panel::before{top:-1px;left:-1px;border-top:2px solid var(--cyan);border-left:2px solid var(--cyan)}
.panel::after{top:-1px;right:-1px;border-top:2px solid var(--cyan);border-right:2px solid var(--cyan)}
.panel .corn::before{bottom:-1px;left:-1px;border-bottom:2px solid var(--cyan);border-left:2px solid var(--cyan)}
.panel .corn::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan)}
.ruler{height:5px;margin:3px 0 4px;background:
  repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 9px),
  repeating-linear-gradient(90deg, #2c3d52 0 1px, transparent 1px 45px)}
h2{font-size:10px;letter-spacing:2px;color:#8fa3b8;font-weight:600}
h2 .tag{font-size:9px;padding:1px 5px;margin-right:6px;letter-spacing:1px}
.tag.a{background:#062031;color:var(--cyan);border:1px solid #0c3a54}
.tag.b{background:#06231a;color:var(--grn);border:1px solid #0c4a36}
.tag.c{background:#2a0d16;color:#ff5c7c;border:1px solid #561426}
.tag.s{background:#251c08;color:var(--gold);border:1px solid #4d3c10}
.mini{font-size:8px;color:var(--dim);letter-spacing:1px}
.statline{font-size:10px;color:#7b8ea3;margin-top:4px}
.statline .big{color:var(--cyan);font-size:12px;font-weight:700}
/* ---- 顶栏 ---- */
.topbar{display:grid;grid-template-columns:11fr 9fr;gap:6px}
.topbar .mrow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:4px}
.telemetry .mrow{grid-template-columns:repeat(3,1fr)}
.metric .label{font-size:8px;color:var(--dim);letter-spacing:1.5px}
.metric .value{font-size:19px;font-weight:700;letter-spacing:.5px;
  text-shadow:1px 0 rgba(255,43,78,.35), -1px 0 rgba(0,229,255,.35)}
.metric .value.pos{color:var(--grn)} .metric .value.neg{color:var(--red)}
.metric .value.green{color:var(--grn)} .metric .value.blue{color:var(--blue)}
.metric .sub{font-size:9px;color:var(--dim);margin-top:1px}
.unit{font-size:10px;color:var(--dim)}
.simchip{font-size:8px;color:var(--gold);border:1px solid #4d3c10;padding:0 4px;margin-left:6px}
.zone{font-size:9px;letter-spacing:2px;color:#6f8296;border-bottom:1px solid var(--line);padding-bottom:2px}
/* ---- 非对称主网格 ---- */
.grid{display:grid;grid-template-columns:5fr 4fr 3fr;gap:6px}
.grid2{display:grid;grid-template-columns:7fr 5fr;gap:6px;margin-top:6px}
.microrow{display:flex;flex-direction:column;gap:6px}
.bot3d{width:100%;height:170px;display:block;position:relative}
.scope{position:relative}
.scope::before,.scope::after{content:"";position:absolute;left:50%;top:50%;pointer-events:none;opacity:.5}
.scope::before{width:26px;height:1px;background:var(--cyan);transform:translate(-50%,-50%)}
.scope::after{width:1px;height:26px;background:var(--cyan);transform:translate(-50%,-50%)}
canvas{display:block}
#cv-a,#cv-wave,#cv-s{width:100%;height:84px}
#pipeline{position:fixed;inset:0;z-index:0;pointer-events:none}
.wrap{position:relative;z-index:1}
.heat{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:4px}
.heat .cell{border:1px solid var(--line);padding:3px 6px;background:#081019}
.heat .hn{font-size:8px;color:var(--dim);letter-spacing:1px}
.heat .hv{font-size:16px;font-weight:700;color:var(--cyan)}
.heat .f-ofi .hv{color:var(--grn)} .heat .f-pump .hv{color:var(--gold)}
.c-flex{display:flex;gap:8px;align-items:center}
.c-flex .bot3d{flex:1}
#gauge{width:200px;height:130px}
.hearts{display:flex;gap:6px;margin-top:4px}
.hlamp{font-size:9px;color:var(--grn);border:1px solid #0c3a2a;padding:2px 6px;letter-spacing:1px}
.hlamp.off{color:var(--red);border-color:#561426}
.hlamp .lamp{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--grn);margin-right:4px;box-shadow:0 0 5px var(--grn)}
.hlamp.off .lamp{background:var(--red);box-shadow:0 0 5px var(--red)}
.trow,.ln{font-size:11px;white-space:nowrap}
.trow{display:flex;gap:10px;padding:1px 4px;border-left:2px solid #123}
.trow .ts,.ln .ts{color:var(--dim);margin-right:4px}
.trow .buy{color:var(--grn)} .trow .sell{color:#ff5c7c}
.trow .exec{color:var(--grn)} .trow .exp{color:var(--gold)} .trow .rej{color:var(--red)}
.trow.flash{background:rgba(0,255,157,.08)}
.omsqueue{height:118px;overflow:hidden;margin-top:4px}
#term{height:132px;overflow-y:auto;background:#050810;border:1px solid var(--line);padding:4px 6px;margin-top:4px}
.ln.ok{color:#3f566e}.ln.bad{color:var(--red)}
#pause{background:#0c1520;border:1px solid var(--line);color:#7b8ea3;font-size:9px;padding:2px 8px;letter-spacing:1px;cursor:pointer}
#pause:hover{color:var(--cyan);border-color:#0c3a54}
.termbar{display:flex;justify-content:space-between;align-items:center}
/* ---- 热力网 ---- */
#posmatrix{margin-top:4px;min-height:24px}
.pmtitle{font-size:9px;color:#7b8ea3;letter-spacing:1.5px}
/* ---- 微距面板 ---- */
.micro{background:#080d15;border:1px solid var(--line);padding:5px 7px;position:relative}
.micro h3{font-size:8px;color:var(--dim);letter-spacing:1.5px;font-weight:600;margin-bottom:3px}
.micro canvas{width:100%;height:74px}
#hexdump{color:#3d5a75;white-space:pre;overflow:hidden;height:74px}
#hexdump b{color:var(--cyan);font-weight:400}
/* 心跳 4 象限雷达 + 弧线 */
.seal{position:absolute;right:10px;bottom:56px;border:2px double rgba(0,255,157,.5);
  color:rgba(0,255,157,.75);font-size:9px;padding:5px 9px;transform:rotate(-14deg);
  letter-spacing:2px;pointer-events:none;border-radius:50%}
@media (max-width:1100px){.grid,.grid2,.topbar{grid-template-columns:1fr}}

/* ---- 157: GPU 图层合成隔离 (防频闪核心) ---- */
.bot3d,#pipeline,#codex,#glitch-ov,body::before,body::after{
  will-change:transform;transform:translateZ(0);backface-visibility:hidden}
#codex{position:fixed;inset:0;z-index:5;pointer-events:none}
#glitch-ov{position:fixed;inset:0;z-index:95;pointer-events:none;opacity:0;
  mix-blend-mode:screen;
  background:repeating-linear-gradient(0deg,rgba(0,229,255,.05) 0 2px,
    transparent 2px 5px)}
body.glitch #glitch-ov{opacity:1;animation:glJit .18s steps(3) both}
@keyframes glJit{
  0%{clip-path:inset(0);transform:translate(0)}
  33%{clip-path:inset(12% 0 63% 0);transform:translate(-6px,2px)}
  66%{clip-path:inset(58% 0 8% 0);transform:translate(5px,-3px)}
  100%{clip-path:inset(0);transform:translate(0)}}
/* ---- 157: 实盘四指标置顶条 ---- */
.livebar{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.livebar .metric{border-left:1px solid var(--line);padding-left:10px}
.livebar .metric:first-child{border-left:none;padding-left:0}
.livebar .label{font-size:9px;letter-spacing:2px;color:var(--dim)}
.livebar .value{font-size:22px;font-weight:700;
  text-shadow:1px 0 rgba(255,43,78,.3),-1px 0 rgba(0,229,255,.3)}
/* ---- 157: 中文标签紧凑咬合 ---- */
h2,h1.zone,.metric .label,.statline{letter-spacing:1px}
h2 .tag+.mini{margin-left:8px}