/* Interaktivní ukázka webového HMI (simulovaná data) */
.hmi-sec{padding:40px 0 72px}
.hmi-note{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink-2); margin:0 0 16px}
.hmi-note b{color:var(--ink)}
.hmi{--h-bg:#0b0f14; --h-panel:#121821; --h-panel2:#18202b; --h-line:#243040; --h-ink:#e6edf3; --h-dim:#8b98a8; --h-acc:#14b8a6;
  --h-ok:#22c55e; --h-warn:#f59e0b; --h-err:#ef4444; --h-blue:#3b82f6;
  background:var(--h-bg); color:var(--h-ink); border-radius:10px; border:1px solid #1f2a36; overflow:hidden;
  box-shadow:0 30px 70px rgba(10,15,20,.35); font-size:14px; line-height:1.4; position:relative}
.hmi *{box-sizing:border-box}
.hmi button{font:inherit; color:inherit; cursor:pointer}
.h-top{display:flex; align-items:center; gap:6px; padding:8px 12px; border-bottom:1px solid var(--h-line); background:#0e141b; flex-wrap:wrap}
.h-brand{display:flex; align-items:center; gap:8px; font-weight:700; margin-right:8px; white-space:nowrap}
.h-brand img{display:block; height:28px; width:auto}
.h-tabs{display:flex; gap:2px; flex-wrap:wrap}
.h-tabs button{background:none; border:0; padding:7px 11px; border-radius:6px; color:var(--h-dim); font-weight:600}
.h-tabs button:hover{color:var(--h-ink)}
.h-tabs button.on{background:var(--h-panel2); color:var(--h-ink); box-shadow:inset 0 -2px 0 var(--h-acc)}
.h-sp{flex:1}
.h-badge{font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; border:1px solid; white-space:nowrap}
.h-badge.ok{color:var(--h-ok); border-color:rgba(34,197,94,.5); background:rgba(34,197,94,.08)}
.h-badge.err{color:var(--h-err); border-color:rgba(239,68,68,.6); background:rgba(239,68,68,.1)}
.h-badge.sim{color:var(--h-warn); border-color:rgba(245,158,11,.55); background:rgba(245,158,11,.08)}
.h-clock{font-variant-numeric:tabular-nums; color:var(--h-dim); font-size:13px; margin-left:6px}
.h-body{padding:12px; min-height:560px}
.h-grid{display:grid; gap:12px}
.h-g2{grid-template-columns:1.25fr 1fr}
.h-g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.h-g2,.h-g3{grid-template-columns:1fr}}
.h-card{background:var(--h-panel); border:1px solid var(--h-line); border-radius:8px; overflow:hidden}
.h-card > h4{margin:0; padding:9px 12px; font-size:14px; border-bottom:1px solid var(--h-line); display:flex; align-items:center; gap:8px}
.h-card > h4 .h-sp{flex:1}
.h-in{padding:12px}
.h-btn{background:var(--h-panel2); border:1px solid var(--h-line); border-radius:6px; padding:8px 14px; font-weight:700}
.h-btn:hover:not(:disabled){border-color:#3a4a5d}
.h-btn:disabled{opacity:.4; cursor:not-allowed}
.h-btn.start{background:#1f7a3a; border-color:#25913f}
.h-btn.stop{background:#c0392b; border-color:#d9483a}
.h-btn.acc{background:var(--h-acc); border-color:var(--h-acc); color:#04201d}
.h-btn.sm{padding:3px 9px; font-size:12px; font-weight:600}
.h-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.h-state{margin-left:auto; padding:6px 12px; border:1px solid rgba(34,197,94,.55); border-radius:6px; color:#7ee2a0; font-weight:700; background:rgba(34,197,94,.08)}
.h-state.idle{border-color:var(--h-line); color:var(--h-dim); background:none}
.h-prog{height:18px; background:var(--h-panel2); border-radius:5px; margin:12px 0; position:relative; overflow:hidden; border:1px solid var(--h-line)}
.h-prog i{position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,#0d9488,#3b82f6); width:0}
.h-prog span{position:absolute; inset:0; display:grid; place-items:center; font-size:12px; font-weight:700}
.h-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
@media (max-width:620px){.h-kpis{grid-template-columns:1fr 1fr}}
.h-kpi{background:var(--h-panel2); border-radius:6px; padding:7px 10px}
.h-kpi small{display:block; color:var(--h-dim); font-size:11.5px}
.h-kpi b{font-size:18px; font-variant-numeric:tabular-nums}
.h-kpi b.ok{color:var(--h-ok)}
.h-kpi em{font-style:normal; color:var(--h-dim); font-size:12px; margin-left:3px}
.h-list{width:100%; border-collapse:collapse}
.h-list td,.h-list th{padding:6px 4px; border-bottom:1px solid var(--h-line); text-align:left; font-variant-numeric:tabular-nums}
.h-list th{color:var(--h-dim); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:600}
.h-list td.num{text-align:right; font-weight:700; font-size:15px}
.h-list tr.click{cursor:pointer}
.h-list tr.click:hover td{background:rgba(255,255,255,.03)}
.h-tile{display:inline-grid; justify-items:center; gap:2px; width:104px; padding:10px 6px; background:var(--h-panel2); border:1px solid var(--h-line); border-radius:8px; position:relative}
.h-tile:hover{border-color:#3a4a5d}
.h-tile .tag{position:absolute; top:5px; left:6px; font-size:10px; font-weight:800; padding:0 4px; border-radius:3px; background:#2563eb}
.h-tile .tag.man{background:var(--h-warn); color:#201400}
.h-tile small{color:var(--h-dim); font-size:11.5px}
.h-tile.fault{border-color:var(--h-err); box-shadow:0 0 0 1px var(--h-err) inset}
.h-tile svg{width:46px; height:34px}
.h-chart{width:100%; height:260px; display:block}
.h-chart.tall{height:340px}
.h-legend{display:flex; gap:12px; flex-wrap:wrap; font-size:12.5px; margin-top:6px}
.h-legend label{display:flex; align-items:center; gap:5px; cursor:pointer}
.h-legend i{width:12px; height:3px; display:inline-block; border-radius:2px}
.h-modal{position:absolute; inset:0; background:rgba(0,0,0,.55); display:none; place-items:center; z-index:5; padding:12px}
.h-modal.open{display:grid}
.h-dlg{background:var(--h-panel); border:1px solid var(--h-line); border-radius:10px; width:min(560px,100%); max-height:100%; overflow:auto}
.h-dlg h4{margin:0; padding:10px 12px; border-bottom:1px solid var(--h-line); display:flex}
.h-dlg h4 .h-sp{flex:1}
.h-bits{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.h-bits li{display:flex; align-items:center; gap:8px; color:var(--h-dim)}
.h-bits li::before{content:""; width:9px; height:9px; border-radius:50%; background:#2b3644}
.h-bits li.on{color:var(--h-ink)}
.h-bits li.on::before{background:var(--h-ok)}
.h-bits li.bad::before{background:var(--h-err)}
.h-alarm td:first-child{width:8px; padding:0}
.h-alarm .lv{width:6px; height:26px; border-radius:2px; background:var(--h-err)}
.h-alarm .lv.w{background:var(--h-warn)}
.h-alarm tr.ack td{color:var(--h-dim)}
.h-chain{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-weight:700}
.h-node{padding:10px 14px; border:1px solid var(--h-line); border-radius:8px; background:var(--h-panel2); text-align:center; min-width:110px}
.h-node small{display:block; color:var(--h-dim); font-weight:500; font-size:11.5px}
.h-link{flex:1; min-width:30px; height:2px; background:var(--h-ok); position:relative}
.h-link.bad{background:var(--h-err)}
.h-bar{height:10px; background:var(--h-panel2); border-radius:5px; overflow:hidden; border:1px solid var(--h-line)}
.h-bar i{display:block; height:100%; background:var(--h-acc)}
.h-toast{position:absolute; right:12px; bottom:12px; background:#0f2f2b; border:1px solid var(--h-acc); color:#b6f3ea; padding:8px 12px; border-radius:6px; font-size:13px; opacity:0; transition:opacity .3s; pointer-events:none; z-index:6}
.h-toast.show{opacity:1}
.h-range{width:100%}
.h-muted{color:var(--h-dim); font-size:12.5px}
.hmi select{background:var(--h-panel2); color:var(--h-ink); border:1px solid var(--h-line); border-radius:6px; padding:4px 8px; font:inherit; font-size:13px}
.hmi input[type=checkbox]{accent-color:var(--h-acc); width:auto}
.hmi-feat{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:24px}
.hmi-feat > div{background:var(--panel); padding:22px}
.hmi-feat h3{font-size:18px; margin-bottom:6px}
.hmi-feat p{margin:0; color:var(--ink-2); font-size:15px}
@media (max-width:980px){.hmi-feat{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.hmi-feat{grid-template-columns:1fr}}
/* schéma technologie */
.h-svg{width:100%; height:auto; display:block; max-height:330px}
.h-svg .tank{fill:#0e141b; stroke:#3a4a5d; stroke-width:2}
.h-svg .jacket{fill:none; stroke:#2b3a4c; stroke-width:2; stroke-dasharray:3 3}
.h-svg .liq{fill:#2563eb; opacity:.45}
.h-svg .liq.t2{fill:#0d9488}
.h-svg .pipe{fill:none; stroke:#2b3644; stroke-width:6; stroke-linecap:round; stroke-linejoin:round}
.h-svg .flow{fill:none; stroke:#38bdf8; stroke-width:2; stroke-dasharray:6 8; opacity:0}
.h-svg .flow.on{opacity:1; animation:hflow .8s linear infinite}
@keyframes hflow{to{stroke-dashoffset:-14}}
.h-svg text{fill:#e6edf3; font:600 11px Archivo, system-ui, sans-serif}
.h-svg text.dim, .h-svg tspan.dim{fill:#8b98a8; font-weight:500}
.h-svg text.big{font-size:16px; font-weight:700}
.h-svg text.sym{fill:#0b0f14; font-weight:800; pointer-events:none}
.h-svg tspan.man{fill:#f59e0b}
.h-svg .dev{cursor:pointer; outline:none}
.h-svg .dev .b{fill:#c7d1db; stroke:#0b0f14; stroke-width:1.5; transition:fill .2s}
.h-svg .dev.on .b{fill:#22c55e}
.h-svg .dev.fault .b{fill:#ef4444}
.h-svg .dev .hl{fill:transparent; stroke:transparent; stroke-width:1.5}
.h-svg .dev.lock .hl{stroke:#f59e0b; stroke-dasharray:3 3}
.h-svg .dev:hover .hl, .h-svg .dev:focus-visible .hl{stroke:#14b8a6; stroke-dasharray:none; fill:rgba(20,184,166,.06)}
.h-svg .coil{fill:none; stroke:#8b98a8; stroke-width:3; stroke-linejoin:round}
.h-svg .coil.on{stroke:#f97316}
.h-svg .imp{transform-box:fill-box; transform-origin:center}
.h-svg .imp.on{animation:hmix .5s linear infinite}
@keyframes hmix{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
.h-steps{display:flex; gap:4px; flex-wrap:wrap; margin:12px 0}
.h-steps span{flex:1; min-width:64px; text-align:center; font-size:12px; padding:5px 4px; border-radius:5px; background:var(--h-panel2); color:var(--h-dim); border:1px solid var(--h-line)}
.h-steps span.done{color:#7ee2a0; border-color:rgba(34,197,94,.4)}
.h-steps span.cur{background:rgba(20,184,166,.15); color:var(--h-ink); border-color:var(--h-acc)}
@media (prefers-reduced-motion: reduce){.h-svg .flow.on, .h-svg .imp.on{animation:none}}
.h-foot{display:flex; align-items:center; gap:8px; padding:6px 12px; border-top:1px solid var(--h-line); background:#0e141b; color:var(--h-dim); font-size:12px; flex-wrap:wrap}
.h-by{display:flex; align-items:center; gap:8px}
.h-by .logo{height:22px; background:#e6edf3; margin:0}
/* trendy: kanály, podzáložky, graf s kurzorem */
.h-trend{display:grid; grid-template-columns:230px 1fr; gap:12px; align-items:start}
@media (max-width:860px){.h-trend{grid-template-columns:1fr}}
.h-side h4 + .h-in{padding-top:8px}
.h-chans{display:grid; gap:6px; font-size:13px}
.h-chans label{display:flex; align-items:center; gap:7px; cursor:pointer}
.h-sw{display:inline-block; width:12px; height:12px; border-radius:3px; flex:none; margin-right:2px; vertical-align:-1px}
.h-sub{display:flex; gap:2px; flex-wrap:wrap}
.h-sub button{background:none; border:0; padding:5px 10px; border-radius:6px; color:var(--h-dim); font-weight:600; font-size:13px}
.h-sub button.on{background:var(--h-panel2); color:var(--h-ink); box-shadow:inset 0 -2px 0 var(--h-acc)}
.h-card > h4{flex-wrap:wrap}
.hmi input[type=datetime-local]{background:var(--h-panel2); color:var(--h-ink); border:1px solid var(--h-line); border-radius:6px; padding:3px 6px; font:inherit; font-size:12.5px; color-scheme:dark}
.h-plot{position:relative}
.h-plot canvas{touch-action:pan-y; cursor:crosshair}
.h-tip{position:absolute; display:none; pointer-events:none; background:rgba(14,20,27,.95); border:1px solid var(--h-line); border-radius:6px; padding:6px 9px; font-size:12px; line-height:1.5; white-space:nowrap; z-index:3; box-shadow:0 8px 20px rgba(0,0,0,.35)}
.h-tip i{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px}
.h-tip-x{color:var(--h-dim); margin-bottom:2px}
.h-stats .h-list td, .h-stats .h-list th{font-size:12.5px; white-space:nowrap}
.h-cmp{display:grid; gap:4px}
.hmi select, .hmi input[type=datetime-local]{width:auto; max-width:100%; margin:0}
#tCtl{justify-content:flex-end}
#tCtl label{display:inline-flex; align-items:center; gap:5px; margin:0; font-size:12.5px; font-weight:500}
@media (max-width:860px){.h-chans{grid-template-columns:1fr 1fr} #tCtl{justify-content:flex-start}}