/* FUI command-center HUD (static/hud.js). DOM/SVG only, pointer-events:none, transform/opacity motion. Toggle #tHud (xau.tog.hud). */
.hud{position:fixed;top:28px;left:0;right:0;bottom:0;z-index:2;pointer-events:none;overflow:hidden;contain:layout paint;--hc:#22d3ee;--hm:#e879f9;--hg:#fbbf24}
.hud[hidden]{display:none}
.hud svg{display:block;overflow:visible}
.hud-lines{position:absolute;left:0;top:0;width:100%;height:100%}
.hud-lines path{fill:none;vector-effect:none}
.hud-lines .base{stroke:var(--hc);stroke-opacity:.28;stroke-width:1}
.hud-lines .flow{stroke:var(--hc);stroke-opacity:.55;stroke-width:1.5;stroke-dasharray:4 14}
.hud-lines .corner{stroke:var(--hc);stroke-opacity:.6;stroke-width:1.5}
.hud-lines .pls{stroke-width:2.5;stroke-linecap:round;stroke-dasharray:30 100000;opacity:0}
.hud-lines circle{fill:var(--hm);opacity:.75}
/* panel: placed by hud.js via transform (x/y/scale), so left/top stay 0 */
.hp{position:absolute;left:0;top:0;transform-origin:0 0;box-sizing:border-box;width:150px;padding:8px 9px 10px;color:var(--hc);font:10px var(--mono);overflow:hidden;will-change:transform;
  background:
    linear-gradient(rgba(34,211,238,.045) 1px,transparent 1px) 0 0/8px 8px,
    linear-gradient(90deg,rgba(34,211,238,.045) 1px,transparent 1px) 0 0/8px 8px,
    linear-gradient(180deg,rgba(34,211,238,.09),rgba(8,14,30,.62));
  clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.hpi{position:relative;z-index:2}
/* animated frame: double chamfered line, chromatic twin edges, travelling segments, breathing brackets */
.hp svg.frame{position:absolute;left:0;top:0;z-index:3;pointer-events:none}
.frame path{fill:none}
.frame .fout{stroke:var(--hc);stroke-opacity:.45;stroke-width:1.2}
.frame .fin{stroke:var(--hc);stroke-opacity:.18;stroke-width:1}
.frame .chr{stroke-width:1;stroke-opacity:.2;mix-blend-mode:screen}
.frame .run{stroke-width:1.6;stroke-linecap:round;stroke-opacity:.95}
.frame .run.g{stroke-width:5;stroke-opacity:.2}
.frame .brk{stroke:#d6faff;stroke-width:1.6;stroke-linecap:square}
/* scan sweep + holographic shimmer + event flash */
.hp .sweep{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;background:linear-gradient(180deg,transparent 38%,rgba(34,211,238,.14) 47%,rgba(190,250,255,.3) 50%,rgba(34,211,238,.14) 53%,transparent 62%);transform:translateY(-110%)}
.hp .shine{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;opacity:0;background:linear-gradient(105deg,transparent 40%,rgba(232,121,249,.1) 47%,rgba(255,255,255,.16) 50%,rgba(34,211,238,.1) 53%,transparent 60%);transform:translateX(-140%)}
.hp .flash{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;opacity:0}
.glt{position:relative;display:inline-block;font:700 10px var(--mono);letter-spacing:1.6px;color:var(--text)}
.glt::before,.glt::after{content:attr(data-t);position:absolute;left:0;top:0;opacity:0;mix-blend-mode:screen}
.glt::before{color:var(--hm);animation:hg1 5.5s steps(1,end) infinite}
.glt::after{color:var(--hc);animation:hg2 5.5s steps(1,end) infinite}
@keyframes hg1{0%,88%,100%{opacity:0;transform:none}89%{opacity:.9;transform:translateX(-2px)}91%{opacity:.6;transform:translateX(2px)}92%{opacity:0}}
@keyframes hg2{0%,88%,100%{opacity:0;transform:none}89%{opacity:.9;transform:translateX(2px)}91%{opacity:.6;transform:translateX(-2px)}92%{opacity:0}}
.hp .ttl{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px;color:var(--muted);padding-left:6px}
.hp .st{display:inline-flex;align-items:center;gap:5px;font-size:9px;letter-spacing:1px;color:var(--hm)}
.hp .st b{font-weight:400}
.hp svg.dial{width:134px;height:134px;margin:0 auto}
.hp svg.radar{width:58px;height:58px;flex:none}
/* LEDs with soft bloom */
.led{display:inline-block;position:relative;flex:none;width:6px;height:6px;border-radius:50%;background:var(--lc);box-shadow:0 0 4px var(--lc),0 0 10px var(--lc);--lc:#64748b;margin-right:5px}
.led::after{content:"";position:absolute;left:-4px;top:-4px;right:-4px;bottom:-4px;border-radius:50%;background:var(--lc);opacity:0;transform:scale(.5)}
.led.ok{--lc:#22c55e}.led.warn{--lc:#f59e0b}.led.bad{--lc:#ef4444}.led.idle{--lc:#64748b;box-shadow:0 0 3px var(--lc)}
.led.ok::after,.led.warn::after,.led.bad::after{animation:hled 2.4s ease-out infinite}
.led.bad::after{animation-duration:1s}
@keyframes hled{0%{opacity:.55;transform:scale(.5)}100%{opacity:0;transform:scale(1.6)}}
.hrows{margin-top:3px}
.hrow{display:flex;justify-content:space-between;align-items:center;gap:8px;line-height:15px;border-top:1px solid rgba(34,211,238,.14)}
.hrow .k{display:inline-flex;align-items:center;color:var(--muted);letter-spacing:1px;font-size:9px}
.hrow .k b{font-weight:400}
.hrow .k .led{margin-right:4px;width:5px;height:5px}
.hrow .v{color:var(--text);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.hrow .v.on{color:var(--hg)}
/* sparkline */
.spark{position:relative;height:30px;margin-top:2px}
.spark svg{width:100%;height:30px}
.spark em{position:absolute;left:0;right:0;top:8px;text-align:center;font-style:normal;color:var(--muted)}
.spark .spdot{filter:drop-shadow(0 0 3px #22d3ee)}
/* uPnL bar */
.ubar{position:relative;height:8px;margin:3px 0 2px;background:rgba(8,14,30,.7);border:1px solid rgba(34,211,238,.28)}
.ubar .uc{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:rgba(214,250,255,.7)}
.ubar .uf{position:absolute;top:0;bottom:0;width:50%;transform:scaleX(0)}
.ubar .uf.pos{left:50%;transform-origin:0 50%;background:linear-gradient(90deg,rgba(34,197,94,.25),#22c55e);box-shadow:0 0 8px rgba(34,197,94,.7)}
.ubar .uf.neg{right:50%;transform-origin:100% 50%;background:linear-gradient(270deg,rgba(239,68,68,.25),#ef4444);box-shadow:0 0 8px rgba(239,68,68,.7)}
/* radar strip */
.rdr{display:flex;align-items:center;gap:8px;margin-top:5px;padding-top:5px;border-top:1px solid rgba(34,211,238,.14)}
.rtx{display:flex;flex-direction:column;gap:2px;font-size:9px;letter-spacing:1px;color:var(--muted)}
.rtx b{font-weight:700;color:var(--hc)}
.rtx span{color:var(--text)}
.hud .dtxt{font-family:Consolas,"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;text-anchor:middle}
/* compact (<=640px): one small dial + ticker strip, no panels, no connectors */
.hud.compact .hud-lines,.hud.compact .hp-l,.hud.compact .hp-r{display:none}
.hp-c{display:flex;align-items:center;gap:6px;width:auto;height:68px;padding:0 10px 0 0;border:0;border-radius:34px;background:rgba(8,14,30,.4);clip-path:none}
.hp-c svg.dial{width:68px;height:68px;margin:0;flex:none}
.cstrip{display:flex;flex-direction:column;gap:1px;font:11px/13px var(--mono);color:var(--text);white-space:nowrap}
.cstrip b{color:var(--hc);font-weight:700;font-variant-numeric:tabular-nums}
.cstrip span{font-variant-numeric:tabular-nums}
.hud:not(.compact) .hp-c{display:none}
@media (max-width:640px){#zoom #tCine{display:none}}
@media (prefers-reduced-motion:reduce){.glt::before,.glt::after,.led::after{animation:none}.hp{will-change:auto}.hp .sweep,.hp .shine{display:none}}