/* SRU-1 Claus – HMI DCS (styl high-performance, ciemny pulpit operatorski) */
:root {
  --bg: #16191d; --panel: #1f2328; --panel2: #262b31; --edge: #353c44; --text: #d9dee4; --muted: #8b949e; --dim: #5d6670;
  --accent: #58a6ff; --run: #3fb950; --stop: #6e7681; --trip: #f85149; --maint: #a371f7; --warn: #d29922;
  --p1: #ff4d4f; --p2: #ff9f1a; --p3: #f2d43d;
  --ag: #b7a14a; --air: #6fa8c9; --fuel: #c98b5a; --water: #5b8fd6; --steam: #9fb8d8; --gas: #9aa5b1; --sulf: #e6c229;
  --svgbg: #1b1f24; --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --radius: 8px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
button, input, select { font: inherit; color: inherit; }
b { font-weight: 600; }

/* ---------- górny pasek ---------- */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 8px 14px; background: #111418; border-bottom: 1px solid var(--edge); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand small { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; background: var(--sulf); color: #222; font-weight: 800; }
.clockbox { display: flex; flex-direction: column; font-family: var(--mono); }
#clock { font-size: 20px; letter-spacing: .5px; }
.clockbox small { color: var(--muted); font-family: system-ui; font-size: 11px; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simctl { display: flex; gap: 6px; align-items: center; }
.alsum { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.alcnt { min-width: 38px; height: 32px; border: 0; border-radius: 6px; font-weight: 700; cursor: pointer; color: #111; }
.alcnt.p1 { background: var(--p1); } .alcnt.p2 { background: var(--p2); } .alcnt.p3 { background: var(--p3); }
.alcnt.zero { background: var(--panel2); color: var(--dim); }
.alcnt.blink { animation: blink 1s steps(2) infinite; }
.btn { background: var(--panel2); border: 1px solid var(--edge); border-radius: 6px; padding: 6px 12px; cursor: pointer; white-space: nowrap; min-height: 32px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.btn:hover { border-color: var(--accent); }
.btn:disabled { opacity: .4; cursor: not-allowed; border-color: var(--edge); }
.btn.sm { padding: 3px 9px; min-height: 28px; font-size: 13px; }
.btn.icon { padding: 4px 9px; }
.btn.pri { background: #1f4f7a; border-color: #2f6ea5; }
.btn.go { background: #1d4a2a; border-color: #2e7d45; }
.btn.stop { background: #4a2a1d; border-color: #7d4a2e; }
.btn.danger { background: #6b1c1c; border-color: #a33; }
.btn.on { background: var(--accent); color: #0b1220; border-color: var(--accent); font-weight: 600; }
select, input[type=number], input[type=text] { background: #0f1215; border: 1px solid var(--edge); border-radius: 6px; padding: 5px 8px; min-height: 32px; }
input[type=number] { width: 90px; font-family: var(--mono); }
input[type=range] { width: 100%; accent-color: var(--accent); }

.albanner { position: sticky; top: 49px; z-index: 29; display: flex; align-items: center; gap: 10px; padding: 6px 14px; background: #20252b; border-bottom: 1px solid var(--edge); font-size: 13px; min-height: 38px; }
.albanner span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.albanner.p1 { background: #5c1414; } .albanner.p2 { background: #5c3a0c; } .albanner.p3 { background: #4d4410; }
.albanner.flash { animation: flashbg 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
@keyframes flashbg { 50% { filter: brightness(1.6); } }

.tabs { display: flex; gap: 2px; overflow-x: auto; background: #111418; border-bottom: 1px solid var(--edge); padding: 0 8px; scrollbar-width: thin; }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; cursor: pointer; color: var(--muted); white-space: nowrap; }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--p1); color: #fff; font-size: 11px; text-align: center; }
.badge:empty { display: none; }

main { padding: 12px; max-width: 1800px; margin: 0 auto; }
.scr { display: none; } .scr.on { display: block; }
.panel, .card { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); }
.panel { padding: 12px; }
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; }
.cards.loops { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.grid2 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; align-items: start; }
.card { padding: 12px; }
.card h3 { margin: 0 0 8px; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card h3 small { color: var(--muted); font-weight: 400; font-size: 12px; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.rowbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------- KPI ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin-bottom: 10px; }
.kpi { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); padding: 7px 10px; }
.kpi small { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi b { font-family: var(--mono); font-size: 18px; }
.kpi i { font-style: normal; color: var(--muted); font-size: 11px; margin-left: 3px; }
.kpi.bad b { color: var(--p2); } .kpi.good b { color: var(--run); }

/* ---------- SVG schemat ---------- */
.svgwrap { position: relative; background: var(--svgbg); border: 1px solid var(--edge); border-radius: var(--radius); }
.svgscroll { overflow: auto; -webkit-overflow-scrolling: touch; max-height: calc(100vh - 230px); }
.svgscroll svg { display: block; width: 100%; height: auto; }
.zoomctl { position: absolute; right: 8px; top: 8px; z-index: 2; display: flex; gap: 4px; }
svg text { fill: var(--text); font-family: system-ui, sans-serif; }
.ln { fill: none; stroke-width: 3; stroke-linejoin: round; }
.ln.ag { stroke: var(--ag); } .ln.air { stroke: var(--air); } .ln.fuel { stroke: var(--fuel); } .ln.water { stroke: var(--water); }
.ln.steam { stroke: var(--steam); stroke-dasharray: 8 4; } .ln.gas { stroke: var(--gas); stroke-width: 5; } .ln.sulf { stroke: var(--sulf); stroke-dasharray: 6 4; stroke-width: 2.5; }
.ln.flare { stroke: #c96f6f; }
.ln.flow { animation: dash 1.2s linear infinite; stroke-dasharray: 10 6; }
.ln.gas.flow { stroke-dasharray: 14 8; }
@keyframes dash { to { stroke-dashoffset: -32; } }
.vsl { fill: #2a3038; stroke: #8b949e; stroke-width: 2; }
.vsl.hot { fill: #3a2a24; }
.lvl { fill: var(--water); opacity: .75; } .lvl.sul { fill: var(--sulf); opacity: .8; } .lvl.liq { fill: #7d8f5b; }
.lbl { font-size: 13px; font-weight: 600; fill: #c9d1d9; }
.sub { font-size: 11px; fill: var(--muted); }
.val { font-family: var(--mono); font-size: 13px; fill: #fff; }
.eq { cursor: pointer; }
.eq:hover .pbody, .eq:hover .vbody, .eq:hover rect.tbx, .eq:hover .vsl { stroke: var(--accent); }
.pbody { fill: #2a3038; stroke: #9aa5b1; stroke-width: 2; }
.parrow { fill: #9aa5b1; }
.st-RUN .pbody, .st-START .pbody { fill: #1e5c30; stroke: var(--run); }
.st-RUN .parrow, .st-START .parrow { fill: #b6f0c4; }
.st-START .pbody { animation: blink .6s steps(2) infinite; }
.st-TRIP .pbody { fill: #6b1c1c; stroke: var(--trip); }
.st-TRIP.unack .pbody { animation: blink 1s steps(2) infinite; }
.st-MAINT .pbody { fill: #3b2b5c; stroke: var(--maint); }
.vbody { fill: #2a3038; stroke: #9aa5b1; stroke-width: 1.5; }
.vopen .vbody { fill: #1e5c30; stroke: var(--run); }
.vpart .vbody { fill: #4b5a2a; stroke: #9bc15a; }
.vstuck .vbody { stroke: var(--p2); stroke-width: 2.5; }
.sdv .vbody { fill: #5c1c1c; stroke: var(--trip); }
.sdv.vopen .vbody { fill: #1e5c30; stroke: var(--run); }
rect.tbx { fill: #0f1215; stroke: #56606b; stroke-width: 1; }
.tname { font-size: 11px; fill: var(--muted); }
.tmode { font-size: 10px; fill: var(--accent); font-weight: 700; }
.tmode.MAN { fill: var(--warn); }
.alm1 rect.tbx { stroke: var(--p1); stroke-width: 2.5; } .alm2 rect.tbx { stroke: var(--p2); stroke-width: 2.5; } .alm3 rect.tbx { stroke: var(--p3); stroke-width: 2; }
.almU rect.tbx { animation: blink 1s steps(2) infinite; }
.flame { fill: url(#gFlame); opacity: .95; animation: flick .25s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: left center; }
.pilotflame { fill: #5ab0ff; opacity: .9; }
@keyframes flick { from { transform: scaleX(.93) scaleY(.96); } to { transform: scaleX(1.05) scaleY(1.03); } }
.stack-smoke { fill: #9aa5b1; opacity: .25; }
.bmsbox rect { fill: #0f1215; stroke: #56606b; }

/* ---------- maszyny ---------- */
.mgrp .mrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mcard { background: var(--panel2); border: 1px solid var(--edge); border-radius: 7px; padding: 10px; min-width: 0; }
.mcard.RUN, .mcard.START { border-color: #2e7d45; } .mcard.TRIP { border-color: var(--trip); } .mcard.MAINT { border-color: var(--maint); }
.mhead { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.stbadge { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: var(--stop); color: #fff; }
.stbadge.RUN { background: var(--run); color: #062; } .stbadge.START { background: #2e7d45; } .stbadge.TRIP { background: var(--trip); } .stbadge.MAINT { background: var(--maint); }
.btnrow { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.btnrow .btn { flex: 1 1 auto; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; font-size: 13px; }
.kv span:nth-child(odd) { color: var(--muted); }
.kv span:nth-child(even) { font-family: var(--mono); text-align: right; }
.kv .warn { color: var(--p2); } .kv .bad { color: var(--p1); }
.hvrow { display: flex; gap: 6px; margin: 6px 0; }
.hv { flex: 1; border-radius: 6px; padding: 5px 4px; border: 1px solid var(--edge); background: #2d1f1f; cursor: pointer; font-size: 12px; text-align: center; }
.hv.open { background: #1d4a2a; border-color: #2e7d45; }
.spdrow { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; margin: 6px 0; }
.bar { height: 8px; background: #0f1215; border-radius: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); }
.faultline { font-size: 12px; color: var(--p2); min-height: 16px; }
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---------- zbiorniki ---------- */
.tank { display: grid; grid-template-columns: 90px 1fr; gap: 12px; }
.tgauge { position: relative; height: 200px; background: #0f1215; border: 2px solid #56606b; border-radius: 10px 10px 6px 6px; overflow: hidden; }
.tgauge .fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--water); opacity: .8; transition: height .3s; }
.tgauge .fill.sul { background: var(--sulf); } .tgauge .fill.liq { background: #7d8f5b; }
.tgauge .mark { position: absolute; left: 0; right: 0; border-top: 1px dashed; font-size: 10px; text-align: right; padding-right: 3px; line-height: 12px; }
.tgauge .mark.h { border-color: var(--p2); color: var(--p2); } .tgauge .mark.l { border-color: var(--p3); color: var(--p3); }
.tgauge .sp { position: absolute; left: -2px; width: 12px; height: 0; border-top: 3px solid var(--accent); }
.tgauge .pct { position: absolute; inset: auto 0 6px 0; text-align: center; font-family: var(--mono); font-weight: 700; text-shadow: 0 1px 3px #000; }

/* ---------- regulatory ---------- */
.loop { cursor: pointer; }
.loop:hover { border-color: var(--accent); }
.loop .lhead { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.loop .lhead small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mode { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: #1f4f7a; color: #cfe6ff; }
.mode.MAN { background: #5c4a14; color: #ffe29a; } .mode.CAS { background: #1d4a4a; color: #aef; } .mode.LOCK { background: #5c1c1c; color: #fbb; }
.hbars { display: grid; grid-template-columns: 30px 1fr 74px; gap: 4px 6px; align-items: center; font-size: 12px; margin-top: 6px; }
.hbar { position: relative; height: 10px; background: #0f1215; border-radius: 3px; }
.hbar i { position: absolute; left: 0; top: 0; bottom: 0; background: #9aa5b1; border-radius: 3px; }
.hbar i.op { background: var(--warn); }
.hbar b { position: absolute; top: -3px; bottom: -3px; width: 3px; background: var(--accent); }
.hbars span:nth-child(3n) { font-family: var(--mono); text-align: right; }
.loop.al1 { border-color: var(--p1); } .loop.al2 { border-color: var(--p2); } .loop.al3 { border-color: var(--p3); }

/* ---------- BMS ---------- */
.steps { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 3px; }
.steps li { padding: 5px 8px; border-radius: 5px; background: var(--panel2); color: var(--muted); font-size: 13px; display: flex; justify-content: space-between; gap: 8px; }
.steps li.done { color: #9fd7ae; }
.steps li.cur { background: #1f4f7a; color: #fff; font-weight: 600; }
.steps li.trip { background: #6b1c1c; color: #fff; font-weight: 700; animation: flashbg 1s steps(2) infinite; }
.perm { list-style: none; padding: 0; margin: 0; font-size: 13px; display: grid; gap: 3px; }
.perm li { display: flex; gap: 8px; align-items: flex-start; }
.perm li::before { content: "●"; color: var(--run); }
.perm li.no::before { color: var(--trip); }
.perm li.no { color: #f0b4b4; }
.perm.causes li::before { color: var(--dim); }
.perm.causes li.on::before { color: var(--trip); } .perm.causes li.on { color: #fff; font-weight: 600; }
.firstout { margin: 8px 0; padding: 8px; border-radius: 6px; background: #3a1414; border: 1px solid var(--trip); font-size: 13px; }
.firstout:empty { display: none; }
.bmsvals { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin: 8px 0; }
.bmsvals div { background: var(--panel2); border-radius: 6px; padding: 5px 8px; cursor: pointer; }
.bmsvals small { display: block; color: var(--muted); font-size: 11px; }
.bmsvals b { font-family: var(--mono); }
.subh { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.timerbar { height: 6px; background: #0f1215; border-radius: 3px; margin-top: 4px; overflow: hidden; } .timerbar i { display: block; height: 100%; background: var(--accent); }

/* ---------- trendy ---------- */
.trendbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.trendbox { position: relative; height: min(60vh, 520px); background: var(--svgbg); border-radius: 6px; }
#trendCv { width: 100%; height: 100%; display: block; touch-action: pan-y; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.legend .li { display: flex; align-items: center; gap: 6px; background: var(--panel2); border-radius: 6px; padding: 4px 8px; font-size: 12px; cursor: pointer; }
.legend .li i { width: 12px; height: 12px; border-radius: 2px; }
.legend .li.off { opacity: .4; }
.legend .li b { font-family: var(--mono); }
.legend .li button { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 2px; }

/* ---------- alarmy / dziennik ---------- */
.allist, .jrlist { display: grid; gap: 4px; }
.alrow { display: grid; grid-template-columns: 76px 28px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px; background: var(--panel2); border-left: 5px solid var(--dim); font-size: 13px; }
.alrow.p1 { border-left-color: var(--p1); } .alrow.p2 { border-left-color: var(--p2); } .alrow.p3 { border-left-color: var(--p3); }
.alrow.unack.act { animation: flashbg 1.2s steps(2) infinite; }
.alrow.rtn { opacity: .6; font-style: italic; }
.alrow .pr { font-weight: 800; text-align: center; border-radius: 4px; color: #111; }
.alrow.p1 .pr { background: var(--p1); } .alrow.p2 .pr { background: var(--p2); } .alrow.p3 .pr { background: var(--p3); }
.jrrow { display: grid; grid-template-columns: 76px 64px 1fr; gap: 8px; padding: 4px 8px; font-size: 13px; border-bottom: 1px solid #262b31; }
.jrrow .ty { font-size: 11px; font-weight: 700; color: var(--muted); }
.jrrow.ALARM .ty, .jrrow.TRIP .ty, .jrrow.SIS .ty { color: var(--p2); }
.jrrow.OPER .ty { color: var(--accent); } .jrrow.INSTR .ty { color: var(--maint); } .jrrow.RTN .ty { color: var(--run); }
.empty { padding: 20px; text-align: center; color: var(--muted); }

/* ---------- procedury ---------- */
.proc ol { padding-left: 22px; margin: 0; display: grid; gap: 6px; font-size: 13px; }
.proc label { display: flex; gap: 8px; cursor: pointer; } .proc input { margin-top: 3px; }
.proc label:has(input:checked) span { text-decoration: line-through; color: var(--muted); }
.scenlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 13px; }
.scenlist p { margin: 2px 0 6px; color: var(--muted); }
.legendlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 13px; }
.lg { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; border: 2px solid; }
.lg.run { background: #1e5c30; border-color: var(--run); } .lg.stop { background: #2a3038; border-color: #9aa5b1; } .lg.trip { background: #6b1c1c; border-color: var(--trip); } .lg.maint { background: #3b2b5c; border-color: var(--maint); }

/* ---------- instruktor ---------- */
.inst label.row { display: grid; grid-template-columns: 1fr 1fr 64px; gap: 8px; align-items: center; font-size: 13px; margin: 6px 0; }
.inst .line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.inst .line select { flex: 1 1 140px; min-width: 0; }
.snaplist { display: grid; gap: 4px; margin-top: 6px; font-size: 13px; }
.snaplist div { display: flex; gap: 6px; align-items: center; background: var(--panel2); border-radius: 6px; padding: 5px 8px; }
.snaplist div span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 12px; background: #3a2a14; border: 1px solid var(--p2); border-radius: 12px; padding: 2px 8px; cursor: pointer; }

/* ---------- faceplate ---------- */
.fp { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: flex-end; }
.fp[hidden] { display: none; }
.fp-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.fp-panel { position: relative; width: 440px; max-width: 100%; height: 100%; background: var(--panel); border-left: 1px solid var(--edge); display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(0, 0, 0, .5); }
.fp-panel header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--edge); }
.fp-panel header b { font-size: 18px; display: block; }
.fp-panel header small { color: var(--muted); }
.fp-body { padding: 12px 14px 30px; overflow-y: auto; flex: 1; }
.fpvals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.fpvals div { background: var(--panel2); border-radius: 6px; padding: 6px 8px; }
.fpvals small { display: block; color: var(--muted); font-size: 11px; }
.fpvals b { font-family: var(--mono); font-size: 18px; }
.fpvals .u { font-size: 11px; color: var(--muted); }
.vbars { display: flex; gap: 14px; height: 170px; margin: 8px 0 12px; justify-content: center; }
.vbar { width: 42px; position: relative; background: #0f1215; border: 1px solid var(--edge); border-radius: 4px; }
.vbar i { position: absolute; left: 0; right: 0; bottom: 0; background: #9aa5b1; }
.vbar i.op { background: var(--warn); }
.vbar .spm { position: absolute; left: -6px; right: -6px; height: 0; border-top: 3px solid var(--accent); }
.vbar .alm { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--p2); }
.vbar em { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 11px; font-style: normal; color: var(--muted); }
.fprow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.fprow label { min-width: 34px; color: var(--muted); font-size: 12px; }
.fprow input[type=number] { flex: 1 1 70px; }
.fpcv { width: 100%; height: 150px; background: var(--svgbg); border-radius: 6px; display: block; margin-top: 8px; }
details summary { cursor: pointer; color: var(--muted); margin: 10px 0 4px; }
.locknote { background: #3a1414; border: 1px solid var(--trip); padding: 6px 8px; border-radius: 6px; font-size: 12px; margin-bottom: 8px; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(120px); background: #2d333b; border: 1px solid var(--edge); padding: 10px 16px; border-radius: 8px; z-index: 60; transition: transform .25s; max-width: 92vw; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.err { border-color: var(--trip); background: #3a1a1a; }

/* ---------- RWD ---------- */
@media (max-width: 1100px) {
  .grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .topbar { padding: 6px 10px; gap: 6px 10px; }
  .brand small { display: none; }
  #clock { font-size: 17px; }
  .clockbox small { max-width: 140px; }
  .alsum { margin-left: 0; width: 100%; }
  #btnAckAll { margin-left: auto; }
  .albanner { top: 0; position: relative; }
  main { padding: 8px; }
  .cards, .cards.loops { grid-template-columns: 1fr; }
  .mgrp .mrow { grid-template-columns: 1fr; }
  .svgscroll { max-height: none; }
  .fp { align-items: flex-end; }
  .fp-panel { width: 100%; height: 88vh; border-radius: 14px 14px 0 0; border-left: 0; border-top: 1px solid var(--edge); }
  .alrow { grid-template-columns: 64px 24px 1fr; }
  .alrow > :last-child { grid-column: 1 / -1; justify-self: end; }
  .jrrow { grid-template-columns: 64px 1fr; }
  .jrrow .msg { grid-column: 1 / -1; }
  .tank { grid-template-columns: 70px 1fr; }
  .tgauge { height: 170px; }
  .kpi b { font-size: 16px; }
  .inst label.row { grid-template-columns: 1fr 64px; }
  .inst label.row span:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .ln.flow, .flame, .blink { animation: none !important; } }

/* --- poprawki układu --- */
#machGrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 1fr)); }
.spdrow .seg { flex-wrap: nowrap; }
.kv span:nth-child(even) { white-space: nowrap; }
.toast { opacity: 0; pointer-events: none; }
.toast.show { opacity: 1; pointer-events: auto; }
@media (max-width: 760px) {
  .kpis { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .kpi { padding: 5px 7px; }
  .kpi b { font-size: 14px; }
  .kpi small { font-size: 10px; }
}
/* --- modal instrukcji --- */
.gd { justify-content: center; align-items: center; }
.gd-panel { position: relative; width: min(760px, 94vw); max-height: 88vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--edge); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.gd-panel header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--edge); font-size: 16px; }
.gd-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 0 10px; border-bottom: 1px solid var(--edge); }
.gd-tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 12px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.gd-tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.gd-body { overflow-y: auto; padding: 12px 16px 20px; }
.gd-steps { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 14px; }
.gd-steps label { display: flex; gap: 10px; cursor: pointer; }
.gd-steps input { margin-top: 4px; flex: none; }
.gd-steps label:has(input:checked) span { color: var(--muted); text-decoration: line-through; }
@media (max-width: 760px) { .gd { align-items: flex-end; } .gd-panel { width: 100%; max-height: 90vh; border-radius: 14px 14px 0 0; } #btnGuide { order: -1; } }
.gd-panel header, .gd-tabs { flex: none; }
.gd-steps label { align-items: flex-start; }
.gd-steps li::marker { color: var(--accent); font-weight: 700; }
.gd-steps[hidden] { display: none; }
/* --- PGH: media --- */
.ln.hc { stroke: #c9964a; } .ln.h2 { stroke: #6fcf97; } .ln.prod { stroke: #e0c070; } .ln.cw { stroke: var(--water); }
.lvl.hc { fill: #b07f34; opacity: .8; } .lvl.prod { fill: #e0c070; opacity: .8; }
.tgauge .fill.hc { background: #b07f34; } .tgauge .fill.prod { background: #e0c070; }
#scr-overview .flame { transform-origin: center bottom; }
/* --- zawory ręczne i sieci --- */
.hvs .vbody { fill: #2a3038; stroke: #c9d1d9; stroke-width: 1.5; }
.hvs.vopen .vbody { fill: #1e5c30; stroke: var(--run); } .hvs.vpart .vbody { fill: #4b5a2a; stroke: #9bc15a; }
.hvs.hvbad .vbody { stroke: var(--p2); stroke-width: 2.5; }
.hvt { font-size: 10px; }
.hvlist { display: grid; gap: 8px; }
.mvrow { background: var(--panel2); border: 1px solid var(--edge); border-radius: 7px; padding: 8px 10px; }
.mvrow.bad { border-color: var(--p2); }
.hvhead { display: flex; align-items: center; gap: 8px; }
.hvhead .hvstate { margin-left: auto; font-family: var(--mono); }
.hvtype { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: #1f4f7a; color: #cfe6ff; }
.hvtype.t-byp { background: #5c4a14; color: #ffe29a; } .hvtype.t-drn { background: #3b2b5c; color: #e2d0ff; } .hvtype.t-lo { background: #5c1c1c; color: #fbb; }
.hvctl { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.hvctl input[type=range] { flex: 1; }
.cards.nets { grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); }
.netp { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin-bottom: 8px; }
.netp > div { background: var(--panel2); border-radius: 6px; padding: 5px 8px; cursor: pointer; }
.netp small { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.netp b { font-family: var(--mono); font-size: 17px; }
.netp > div:first-child b { color: #fff; font-size: 20px; }
.netsvg { overflow-x: auto; background: var(--svgbg); border-radius: 6px; }
.netsvg svg { display: block; min-width: 520px; width: 100%; height: auto; }
.net.al1 { border-color: var(--p1); } .net.al2 { border-color: var(--p2); } .net.al3 { border-color: var(--p3); }
.ln.flare { stroke: #c96f6f; } .ln.air { stroke: #9fb8d8; }
.hvctl input[type=range] { min-width: 60px; flex: 1 1 60px; }