/* ─── HMI Panel ─── */
.hmi-panel { font-family: 'Share Tech Mono', monospace; overflow: hidden; }

.hmi-header {
    background: rgba(255,69,0,.07);
    border-bottom: 1px solid rgba(255,69,0,.18);
    padding: 10px 16px;
    display: flex; align-items: center; justify-content: space-between;
}
.hmi-title { color: var(--orange); font-size: .65rem; letter-spacing: .22em; text-transform: uppercase; }
.hmi-status-row { display: flex; align-items: center; gap: 8px; }
.hmi-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot-green { background: #00e87a; animation: hmiBlink 1.8s infinite; }
.dot-amber { background: #ffaa00; animation: hmiBlink 2.5s .4s infinite; }
.dot-red   { background: var(--orange); animation: hmiBlink 3s 1s infinite; }
.hmi-dot-label { font-size: .6rem; letter-spacing: .12em; color: var(--text-faint); }
.hmi-tick { font-size: .6rem; color: var(--orange); letter-spacing: .1em; }
@keyframes hmiBlink { 0%,100%{opacity:1} 50%{opacity:.2} }

.hmi-body { display: grid; grid-template-columns: 1fr 1fr; }

.hmi-arm-panel {
    background: #020e28;
    border-right: 1px solid rgba(255,69,0,.1);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 14px 10px 10px;
}
.hmi-arm-label { font-size: .58rem; letter-spacing: .2em; color: var(--text-faint); margin-bottom: 8px; text-transform: uppercase; }
.arm-svg { width: 155px; height: 155px; }
.arm-label-small { font-size: .58rem; letter-spacing: .14em; color: var(--orange); margin-top: 6px; text-transform: uppercase; }

.seg-1 { transform-origin: 85px 120px; animation: rock1 3s ease-in-out infinite alternate; }
.seg-2 { transform-origin: 85px 88px;  animation: rock2 2.2s ease-in-out infinite alternate; }
.seg-3 { transform-origin: 85px 65px;  animation: rock3 1.8s ease-in-out infinite alternate; }
.seg-grip { transform-origin: 85px 48px; animation: rock3 1.8s ease-in-out infinite alternate; }
@keyframes rock1 { from{transform:rotate(-12deg)} to{transform:rotate(12deg)} }
@keyframes rock2 { from{transform:rotate(8deg)} to{transform:rotate(-14deg)} }
@keyframes rock3 { from{transform:rotate(-6deg)} to{transform:rotate(10deg)} }

.hmi-metrics { display: flex; flex-direction: column; padding: 12px 14px; gap: 8px; }

.hmi-metric { background: rgba(2,14,40,.7); border: 1px solid rgba(255,69,0,.1); padding: 8px 11px; }
.hmi-metric-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.hmi-metric-name { font-size: .6rem; letter-spacing: .16em; color: var(--text-faint); text-transform: uppercase; }
.hmi-metric-val { font-size: .85rem; font-weight: 700; color: var(--text); }
.hmi-metric-val span { font-size: .55rem; color: var(--text-faint); margin-left: 1px; }
.hmi-bar-track { height: 2px; background: rgba(255,255,255,.05); position: relative; overflow: hidden; }
.hmi-bar-fill { height: 100%; background: var(--orange); position: absolute; left: 0; top: 0; }

.bar-anim-1 { animation: bp1 3s ease-in-out infinite alternate; }
.bar-anim-2 { animation: bp2 2.4s ease-in-out infinite alternate; }
.bar-anim-3 { animation: bp3 4s ease-in-out infinite alternate; }
.bar-anim-4 { animation: bp4 3.5s ease-in-out infinite alternate; }
@keyframes bp1 { from{width:78%} to{width:86%} }
@keyframes bp2 { from{width:92%} to{width:97%} }
@keyframes bp3 { from{width:62%} to{width:71%} }
@keyframes bp4 { from{width:88%} to{width:94%} }

.hmi-plc-status {
    background: rgba(255,69,0,.04);
    border: 1px solid rgba(255,69,0,.1);
    padding: 8px 11px;
    display: flex; flex-direction: column; gap: 4px;
}
.hmi-plc-label { font-size: .58rem; letter-spacing: .2em; color: var(--text-faint); text-transform: uppercase; margin-bottom: 2px; }
.hmi-plc-row { display: flex; justify-content: space-between; font-size: .6rem; letter-spacing: .08em; color: var(--text-dim); }

.hmi-footer-bar {
    border-top: 1px solid rgba(255,69,0,.1);
    background: rgba(2,14,40,.5);
    padding: 8px 16px;
    display: flex; align-items: center; justify-content: space-between;
}
.hmi-footer-bar > span:first-child { font-size: .58rem; letter-spacing: .14em; color: var(--text-faint); }
.hmi-online {
    font-size: .6rem; letter-spacing: .14em; color: #00e87a;
    display: flex; align-items: center; gap: 5px;
}
.hmi-online::before { content:''; width:5px; height:5px; border-radius:50%; background:#00e87a; animation: hmiBlink 1.8s infinite; }