.hmi{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 340px;align-items:start;max-width:1500px;margin:0 auto}
.stagecard{grid-row:span 2}
.stage{width:min(100%,calc(100vh - 210px));min-width:280px;aspect-ratio:1;margin:0 auto;border-radius:12px;overflow:hidden;border:1px solid #2a56d0;box-shadow:0 0 30px #1d5cff44}
.stage canvas{display:block}
.phbox{background:linear-gradient(90deg,#1f6bff,#1650d6);border-radius:10px;padding:16px;font:600 22px var(--fh);text-align:center;box-shadow:0 0 22px #1f6bff55}
.remain{display:flex;align-items:baseline;justify-content:center;gap:12px;margin:16px 0 10px;color:var(--mut)}.remain b{font:600 46px var(--fh);color:#4aa3ff}
.prog{height:8px;border-radius:8px;background:#14246a;overflow:hidden}.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#27d3ff,#2f8cff);transition:width .25s linear}
.sigs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sg{background:#0a1640;border:1px solid #1f3a90;border-radius:10px;padding:10px;text-align:center}
.sg b{display:block;font:600 16px var(--fh)}.sg .dots{display:flex;gap:7px;justify-content:center;margin:8px 0 4px}
.dot{width:20px;height:20px;border-radius:50%;background:#18244f}.dot.R.on{background:var(--red);box-shadow:0 0 12px var(--red)}.dot.Y.on{background:var(--amb);box-shadow:0 0 12px var(--amb)}.dot.G.on{background:var(--grn);box-shadow:0 0 12px var(--grn)}
.sg small{color:var(--mut)}
.bottom{grid-column:1/-1;display:grid;gap:16px;grid-template-columns:1.3fr 1.2fr 1fr}
.ch{width:100%;height:170px;display:block}.leg{color:var(--mut);display:flex;gap:8px;align-items:center;flex-wrap:wrap}.leg i{width:10px;height:10px;border-radius:50%;display:inline-block;margin-left:8px}
.rings{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.ring{position:relative}.ring svg{width:100%;max-width:92px}.ring circle{fill:none;stroke-width:7}.ring .bg{stroke:#17275e}.ring .fg{stroke-linecap:round;transition:stroke-dashoffset .4s}
.ring b{position:absolute;left:0;right:0;top:30%;font:600 18px var(--fh)}.ring span{color:var(--mut);font-size:13px}
.kv{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #1a2f78;color:var(--mut)}.kv:last-child{border:0}.kv b{color:var(--text)}
@media(max-width:1100px){.hmi{grid-template-columns:1fr}.stagecard{grid-row:auto}.bottom{grid-template-columns:1fr}.stage{width:100%}}