:root {
    --bg: #080c14;
    --bg-2: #0b1019;
    --panel: #101722;
    --panel-2: #141c28;
    --line: rgba(148, 163, 184, .12);
    --line-strong: rgba(148, 163, 184, .19);
    --cyan: #28c7f4;
    --cyan-soft: rgba(40, 199, 244, .12);
    --amber: #f6a623;
    --green: #20d68b;
    --red: #ff5364;
    --purple: #a78bfa;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
    margin: 0;
    background:
        radial-gradient(circle at 75% 5%, rgba(34, 211, 238, .045), transparent 28%),
        radial-gradient(circle at 30% 70%, rgba(59, 130, 246, .035), transparent 32%),
        var(--bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #e5edf7;
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell {
    min-height: 100vh;
    display: flex;
}

.app-sidebar {
    width: 232px;
    flex: 0 0 232px;
    min-height: 100vh;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 18px 14px;
    background: rgba(8, 12, 20, .96);
    border-right: 1px solid var(--line);
    z-index: 20;
}

.brand-block { display: flex; align-items: center; gap: 11px; padding: 2px 7px 17px; }
.brand-mark {
    width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center;
    color: #08111a; background: var(--cyan);
    box-shadow: 0 0 24px rgba(40,199,244,.18);
}
.brand-title { color: #f7fbff; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.brand-title span { color: var(--cyan); }
.brand-subtitle { color: #526173; font-size: 8px; font-weight: 800; letter-spacing: .24em; margin-top: 2px; }

.device-mini-card, .sidebar-footer-card {
    background: linear-gradient(145deg, rgba(18,27,40,.95), rgba(11,17,27,.95));
    border: 1px solid var(--line);
    border-radius: 12px;
}
.device-mini-card { padding: 11px 12px; }
.device-mini-top, .device-mini-bottom { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #8c9aae; }
.device-mini-top { color: #b9c5d4; }
.device-mini-bottom { margin-top: 8px; color: #667487; justify-content: space-between; }
.device-id { margin-left: auto; color: #526173; font-family: ui-monospace, monospace; }
.status-dot, .live-dot { display: inline-block; border-radius: 999px; background: #ef4444; }
.status-dot { width: 7px; height: 7px; }
.live-dot { width: 6px; height: 6px; background: var(--green); box-shadow: 0 0 10px rgba(32,214,139,.65); }

.side-nav { margin-top: 20px; }
.side-nav-label { padding: 0 10px 7px; color: #455267; font-size: 9px; font-weight: 800; letter-spacing: .17em; }
.side-nav-item {
    width: 100%; border: 0; background: transparent; color: #8290a3;
    display: flex; align-items: center; gap: 11px; padding: 10px 11px; margin-bottom: 4px;
    border-radius: 10px; text-align: left; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: .18s ease;
}
.side-nav-item i { width: 16px; text-align: center; font-size: 13px; }
.side-nav-item:hover { color: #edf5ff; background: rgba(148,163,184,.06); }
.side-nav-item.side-nav-disabled { cursor: default; color: #566276; }
.side-nav-item.side-nav-disabled:hover { background: transparent; color: #566276; }
.nav-badge { margin-left: auto; color: #566276; font-family: ui-monospace, monospace; }

.sidebar-spacer { flex: 1; }
.sidebar-footer-card { display: flex; align-items: center; gap: 9px; padding: 10px; margin-bottom: 8px; }
.sidebar-footer-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(40,199,244,.08); color: var(--cyan); }
.side-logout {
    display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 10px;
    color: #69768a; font-size: 12px; text-decoration: none; transition: .18s ease;
}
.side-logout:hover { color: #ff7b89; background: rgba(255,83,100,.06); }

.app-main { min-width: 0; flex: 1; padding: 0 25px 30px; }
.topbar {
    min-height: 78px; display: flex; align-items: center; justify-content: space-between;
    gap: 18px; border-bottom: 1px solid var(--line); margin-bottom: 22px;
}
.topbar-kicker { color: #647387; font-size: 9px; font-weight: 800; letter-spacing: .16em; display: flex; align-items: center; gap: 7px; }
.topbar-title { margin: 3px 0 0; color: #f6f9fd; font-size: 22px; font-weight: 750; letter-spacing: -.025em; }
.topbar-title span { color: #6e7d90; font-size: 14px; font-family: ui-monospace, monospace; font-weight: 500; }
.topbar-right { display: flex; gap: 8px; }
.topbar-chip { border: 1px solid var(--line); background: rgba(16,23,34,.72); border-radius: 9px; padding: 8px 10px; color: #758397; font-size: 10px; display: flex; align-items: center; gap: 7px; }
.topbar-chip i { color: #4e6074; }

#view_dashboard { max-width: 1480px; margin: 0 auto; }

.hmi-grid { display: grid; grid-template-columns: minmax(0, 1fr) 355px; gap: 15px; align-items: start; }
.hmi-left, .hmi-right { min-width: 0; }
.hmi-left { display: flex; flex-direction: column; gap: 15px; }
.hmi-right { display: flex; flex-direction: column; gap: 15px; }

.hmi-panel {
    background: linear-gradient(145deg, rgba(16,23,34,.97), rgba(11,17,26,.97));
    border: 1px solid var(--line); border-radius: 13px;
    box-shadow: 0 12px 40px rgba(0,0,0,.16);
}
.hmi-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; border-bottom: 1px solid rgba(148,163,184,.08); }
.hmi-panel-title { display: flex; align-items: center; gap: 8px; color: #b6c2d1; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.hmi-panel-title i { color: #60748b; }
.hmi-panel-sub { color: #4f5e70; font-size: 9px; }

.process-banner { padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(40,199,244,.12); background: linear-gradient(90deg, rgba(40,199,244,.06), rgba(16,23,34,.4)); }
.process-banner-left { display: flex; align-items: center; gap: 11px; }
.process-status-icon { width: 35px; height: 35px; border-radius: 10px; display: grid; place-items: center; color: var(--amber); background: rgba(246,166,35,.08); border: 1px solid rgba(246,166,35,.15); }
.process-kicker { color: #5e6d80; font-size: 8px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.process-name { margin-top: 2px; color: #f0f5fb; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.process-state { color: var(--amber); font-size: 10px; font-weight: 800; letter-spacing: .1em; }

.diagram-wrap { padding: 12px; }
.process-diagram {
    position: relative; min-height: 365px; overflow: hidden; border-radius: 10px;
    border: 1px solid rgba(75,92,113,.18);
    background-color: #090e16;
    background-image:
        linear-gradient(rgba(55,72,91,.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(55,72,91,.075) 1px, transparent 1px);
    background-size: 25px 25px;
}
.process-diagram:after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 45%, transparent 20%, rgba(3,7,12,.45) 100%); }
.diagram-title { position: absolute; top: 14px; left: 16px; z-index: 3; color: #435267; font-size: 8px; font-weight: 800; letter-spacing: .18em; }
.diagram-node { position: absolute; z-index: 3; background: rgba(11,17,26,.96); border: 1px solid rgba(112,132,154,.22); border-radius: 9px; padding: 9px 11px; min-width: 128px; box-shadow: 0 10px 28px rgba(0,0,0,.3); }
.diagram-node .node-label { color: #68778b; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.diagram-node .node-temp { margin-top: 3px; color: var(--cyan); font: 700 20px/1 ui-monospace, monospace; text-shadow: 0 0 14px rgba(40,199,244,.16); }
.diagram-node .node-unit { color: #526174; font: 9px ui-monospace, monospace; }
.node-condenser { top: 55px; left: 7%; }
.node-column { top: 137px; left: 36%; min-width: 190px; text-align: center; padding: 12px 15px; border-color: rgba(40,199,244,.28); }
.node-column:before { content: ''; display: block; height: 88px; margin: 7px auto 8px; width: 66px; border: 1px solid rgba(40,199,244,.35); border-radius: 8px 8px 15px 15px; background: repeating-linear-gradient(180deg, transparent 0 11px, rgba(40,199,244,.14) 12px 13px); box-shadow: inset 0 0 22px rgba(40,199,244,.035); }
.node-column .node-temp { color: #b9f0ff; }
.node-buffer { top: 286px; left: 42%; }
.node-tank { top: 286px; right: 7%; }
.node-water-in { top: 170px; left: 2.5%; min-width: 112px; border-color: rgba(40,199,244,.18); }
.node-water-out { top: 170px; right: 2.5%; min-width: 112px; border-color: rgba(40,199,244,.18); }

.pipe { position: absolute; z-index: 1; height: 2px; background: linear-gradient(90deg, rgba(40,199,244,.15), rgba(40,199,244,.75), rgba(40,199,244,.15)); box-shadow: 0 0 10px rgba(40,199,244,.15); }
.pipe-v { width: 2px; background: linear-gradient(180deg, rgba(40,199,244,.15), rgba(40,199,244,.75), rgba(40,199,244,.15)); }
.pipe-water-in { top: 204px; left: 15%; width: 21%; }
.pipe-water-out { top: 204px; right: 15%; width: 21%; }
.pipe-up { top: 100px; left: 22%; width: 14%; transform: rotate(-19deg); transform-origin: right center; }
.pipe-down { top: 255px; left: 49%; height: 42px; }
.pipe-tank { top: 309px; left: 55%; width: 17%; }
.flow-dot { position: absolute; z-index: 2; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px rgba(40,199,244,.75); animation: flow 2.4s linear infinite; }
.flow-1 { top: 202px; left: 22%; }
.flow-2 { top: 202px; right: 22%; animation-delay: 1.1s; }
.flow-3 { top: 269px; left: 49%; animation-delay: .5s; }
@keyframes flow { from { transform: translateX(-18px); opacity: .2; } 50% { opacity: 1; } to { transform: translateX(18px); opacity: .2; } }

.diagram-legend { position: absolute; z-index: 4; bottom: 12px; left: 14px; display: flex; gap: 13px; color: #536276; font-size: 8px; }
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-dot { width: 6px; height: 6px; border-radius: 50%; background: #526174; }
.legend-dot.cyan { background: var(--cyan); box-shadow: 0 0 8px rgba(40,199,244,.5); }
.legend-dot.amber { background: var(--amber); }

.temp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; }
.temp-card { position: relative; min-height: 88px; padding: 11px 12px; border-radius: 9px; background: rgba(10,16,25,.78); border: 1px solid rgba(148,163,184,.1); overflow: hidden; }
.temp-card:after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 42%; background: var(--accent, var(--cyan)); box-shadow: 0 0 12px var(--accent, var(--cyan)); opacity: .75; }
.temp-label { color: #69788b; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.temp-value { margin-top: 8px; color: #e7f4ff; font: 700 23px/1 ui-monospace, monospace; letter-spacing: -.05em; }
.temp-value small { color: #56667a; font-size: 9px; margin-left: 2px; letter-spacing: 0; }
.temp-note { margin-top: 5px; color: #3f4d60; font-size: 8px; }

.control-panel { padding: 0; overflow: hidden; }
.control-body { padding: 12px; }
.control-section { padding: 12px 0; border-bottom: 1px solid rgba(148,163,184,.08); }
.control-section:first-child { padding-top: 0; }
.control-section:last-child { border-bottom: 0; padding-bottom: 0; }
.control-section-title { color: #758499; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; }
.control-section-title strong { color: #d5dfeb; font: 700 11px ui-monospace, monospace; }

.main-power {
    width: 100%; min-height: 60px; border-radius: 10px; border: 1px solid rgba(32,214,139,.25);
    background: linear-gradient(90deg, rgba(32,214,139,.13), rgba(32,214,139,.045));
    color: #dffdf0; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px;
    cursor: pointer; transition: .2s ease;
}
.main-power:hover { border-color: rgba(32,214,139,.45); transform: translateY(-1px); }
.main-power-copy { display: flex; align-items: center; gap: 10px; }
.power-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(32,214,139,.12); color: var(--green); }
.power-kicker { color: #6f8295; font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }
.power-text { margin-top: 2px; font-size: 12px; font-weight: 800; letter-spacing: .03em; }
.power-state { color: var(--green); font: 800 9px ui-monospace, monospace; }

.mode-switch { position: relative; display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #080d15; }
.mode-switch .mode-indicator { position: absolute; inset: 3px auto 3px 3px; width: calc(50% - 4px); border-radius: 6px; background: rgba(40,199,244,.15); border: 1px solid rgba(40,199,244,.24); transition: transform .25s ease; }
.mode-switch button { position: relative; z-index: 1; flex: 1; border: 0; background: transparent; padding: 7px; color: #5d6d80; font-size: 9px; font-weight: 800; cursor: pointer; }

.range-row { margin-top: 10px; }
.range-head { display: flex; justify-content: space-between; color: #647286; font-size: 8px; }
.range-head strong { color: var(--amber); font: 800 10px ui-monospace, monospace; }
input[type="range"] { width: 100%; margin: 8px 0 0; accent-color: var(--amber); }

.switch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.hmi-switch {
    border: 1px solid rgba(148,163,184,.12); background: rgba(9,14,22,.8); color: #8290a2;
    border-radius: 9px; padding: 10px 8px; min-height: 64px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; cursor: pointer; transition: .18s ease;
}
.hmi-switch:hover { border-color: rgba(40,199,244,.24); background: rgba(40,199,244,.04); color: #dce8f4; }
.switch-icon { color: #56667a; font-size: 12px; }
.switch-name { font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.switch-ind { width: 5px; height: 5px; border-radius: 50%; background: #394556; box-shadow: none; }

.extra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.extra-btn { min-height: 58px; border: 1px solid rgba(148,163,184,.12); border-radius: 9px; background: rgba(9,14,22,.8); color: #77869a; cursor: pointer; transition: .18s ease; }
.extra-btn:hover { border-color: rgba(40,199,244,.22); color: #dce8f4; }
.extra-btn i { display: block; margin-bottom: 6px; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.stat-box { border: 1px solid rgba(148,163,184,.09); background: rgba(9,14,22,.72); border-radius: 9px; padding: 10px; }
.stat-label { color: #4e5d70; font-size: 7px; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; }
.stat-value { color: #dce8f4; margin-top: 5px; font: 700 15px ui-monospace, monospace; }
.stat-value.amber { color: var(--amber); }

.chart-panel { overflow: hidden; }
.chart-inner { padding: 8px 12px 12px; height: 245px; }

/* Zachowanie istniejących klas używanych przez JS / starsze widoki. */
.card { background-color: #111827; border: 1px solid #1f2937; }
.pulse-online { animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { opacity: 1; }

@media (max-width: 1200px) {
    .app-sidebar { width: 200px; flex-basis: 200px; }
    .app-main { padding-left: 18px; padding-right: 18px; }
    .hmi-grid { grid-template-columns: minmax(0, 1fr) 315px; }
}

@media (max-width: 900px) {
    .app-shell { display: block; }
    .app-sidebar { width: 100%; height: auto; min-height: 0; position: relative; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
    .brand-block { padding-bottom: 10px; }
    .device-mini-card, .sidebar-footer-card, .side-logout { display: none; }
    .side-nav { margin-top: 4px; display: flex; gap: 4px; overflow-x: auto; }
    .side-nav-label, .side-nav-disabled { display: none; }
    .side-nav-item { width: auto; flex: 0 0 auto; margin: 0; padding: 9px 11px; }
    .app-main { padding: 0 12px 22px; }
    .topbar { min-height: 68px; }
    .topbar-right .topbar-chip:last-child { display: none; }
    .hmi-grid { grid-template-columns: 1fr; }
    .hmi-right { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
    .topbar-title { font-size: 18px; }
    .topbar-right { display: none; }
    .temp-grid { grid-template-columns: 1fr 1fr; }
    .hmi-right { display: flex; }
    .process-diagram { min-height: 420px; transform: none; }
    .node-condenser { left: 3%; }
    .node-column { left: 30%; }
    .node-buffer { left: 6%; top: 310px; }
    .node-tank { right: 3%; top: 310px; }
    .node-water-in { left: 2%; top: 190px; }
    .node-water-out { right: 2%; top: 190px; }
    .pipe-water-in { left: 22%; width: 8%; }
    .pipe-water-out { right: 22%; width: 8%; }
    .pipe-up { left: 25%; width: 5%; }
    .pipe-tank { left: 53%; width: 8%; }
}
.side-nav-item.active {
    color: #eaf9ff;
    background: linear-gradient(90deg, rgba(40,199,244,.15), rgba(40,199,244,.035));
    border: 1px solid rgba(40,199,244,.13);
    box-shadow: inset 2px 0 0 var(--cyan), 0 8px 20px rgba(0,0,0,.08);
}
.side-nav-item.active i { color: var(--cyan); }

/* ================================================================
   HMI V2 — desktop-first, high-visibility process visualization
   ================================================================ */
.hmi-dashboard-v2 { --hmi-cyan:#31c7ff; --hmi-cyan-dim:#0e7490; --hmi-amber:#ffad2f; --hmi-green:#35e38a; --hmi-red:#ff4d5d; }
.hmi-grid-v2 { display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:18px; align-items:start; }
.hmi-main-v2,.hmi-right-v2 { min-width:0; }
.hmi-right-v2 { position:sticky; top:18px; }
.process-banner-v2 { min-height:88px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.hero-status-right { display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:flex-end; }
.hero-mode { border:1px solid #3b4658; background:#171e29; color:#d6deea; border-radius:10px; padding:9px 13px; font-size:13px; font-weight:800; letter-spacing:.06em; }
.diagram-head-status { color:var(--hmi-cyan); font-weight:900; letter-spacing:.12em; font-size:13px; display:flex; align-items:center; gap:7px; }
.live-dot { width:9px;height:9px;border-radius:50%;background:var(--hmi-green);box-shadow:0 0 14px rgba(53,227,138,.8); }
.equipment-diagram-wrap { padding:12px; min-height:720px; }
.equipment-diagram { width:100%; height:auto; min-height:700px; display:block; border-radius:14px; }
.equipment-diagram text { font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.process-pipe { fill:none; stroke-width:10; stroke-linecap:round; stroke-linejoin:round; }
.water-pipe { stroke:var(--hmi-cyan); filter:url(#glowCyan); }
.olm-pipe { stroke:#49d4ff; }
.lm-pipe { stroke:var(--hmi-amber); }
.flow-particle { filter:url(#glowCyan); opacity:.95; }
.water-flow { fill:#b9efff; animation:flowRight 2.1s linear infinite; }
.lm-flow { fill:#ffd18a; filter:url(#glowAmber); animation:flowDown 2s linear infinite; }
.olm-flow { fill:#b9efff; animation:flowRight 1.8s linear infinite; }
@keyframes flowRight { from{transform:translateX(-35px);opacity:0} 15%{opacity:1} 85%{opacity:1} to{transform:translateX(35px);opacity:0} }
@keyframes flowDown { from{transform:translateY(-35px);opacity:0} 15%{opacity:1} 85%{opacity:1} to{transform:translateY(35px);opacity:0} }
.tank-body { fill:url(#steelGrad); stroke:#8fa3b8; stroke-width:5; }
.tank-top { fill:#1a2431; stroke:#a6b7c9; stroke-width:5; }
.tank-bottom { fill:#111925; stroke:#66798f; stroke-width:3; }
.buffer-body { fill:#1b2633; stroke:#aab9c8; stroke-width:5; }
.buffer-inner { fill:#0f1722; stroke:#4f6479; stroke-width:2; }
.column-body { fill:url(#steelGrad); stroke:#aebdcb; stroke-width:5; }
.column-tray { stroke:#657a90; stroke-width:4; opacity:.8; }
.head-shell { fill:#18222e; stroke:#b4c1ce; stroke-width:5; }
.head-cap { fill:#1b2633; stroke:#c0cbd5; stroke-width:5; }
.head-inner { fill:#0b111a; stroke:#64778a; stroke-width:3; }
.head-title,.equipment-title { fill:#f4f7fb; font-size:22px; font-weight:950; letter-spacing:.12em; }
.head-temp,.equipment-temp { fill:var(--hmi-cyan); font-size:30px; font-weight:950; }
.head-note,.equipment-note { fill:#9cafc2; font-size:14px; font-weight:800; letter-spacing:.1em; }
.vertical-title { font-size:18px; }
.vertical-note { font-size:13px; }
.cooling-coil { fill:none; stroke:var(--hmi-cyan); stroke-width:7; opacity:.85; }
.spiral-coil { fill:none; stroke:var(--hmi-cyan); stroke-width:8; filter:url(#glowCyan); }
.water-label rect { fill:#0e1a25; stroke:#277a99; stroke-width:2; }
.water-label text { fill:#dcefff; font-size:15px; font-weight:900; text-anchor:middle; letter-spacing:.07em; }
.water-label text + text { fill:var(--hmi-cyan); font-size:23px; }
.pipe-label { fill:#a9eaff; font-size:14px; font-weight:950; letter-spacing:.09em; }
.vessel-body { fill:#111b27; stroke:#a6b7c6; stroke-width:4; }
.vessel-grille { stroke:#d2dce5; stroke-width:3; opacity:.7; }
.vessel-label { fill:#f1f5f9; font-size:17px; font-weight:950; letter-spacing:.12em; }
.valve-symbol circle { fill:#101722; stroke:#7d91a6; stroke-width:4; }
.valve-symbol path { stroke:#d7e2ed; stroke-width:4; }
.temp-callout rect { fill:#121b27; stroke:#33485e; stroke-width:3; }
.temp-callout text { fill:#91a7bb; font-size:14px; font-weight:850; letter-spacing:.06em; }
.temp-callout text + text { fill:var(--hmi-cyan); font-size:29px; font-weight:950; }
.diagram-legend-svg text { fill:#b9c6d3; font-size:14px; font-weight:750; }
.legend-cyan { fill:var(--hmi-cyan); filter:url(#glowCyan); }.legend-amber{fill:var(--hmi-amber)}.legend-green{fill:var(--hmi-green)}
.heater path { fill:none; stroke:#596b7f; stroke-width:7; stroke-linecap:round; }.heater text { fill:#8193a7; font-size:14px; font-weight:950; text-anchor:middle; }
.heater.active path { stroke:var(--hmi-amber); filter:url(#glowAmber); }.heater.active text { fill:#ffd18a; }
.hidden-head { display:none; }
.aabratek-active #headUfo { display:none; }.aabratek-active #headAabratek { display:block; }
.temp-grid-v2 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.temp-grid-v2 .temp-card { min-height:116px; border-width:2px; }
.temp-grid-v2 .temp-value { font-size:32px; }
.main-power-v2 { min-height:76px; font-size:17px; }
.switch-grid-v2 { grid-template-columns:repeat(3,1fr); }
.extra-grid-v2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.extra-button { min-height:70px; border:1px solid #334155; border-radius:12px; background:#121a25; color:#dce5ee; display:flex; align-items:center; justify-content:center; gap:9px; flex-direction:column; font-weight:900; letter-spacing:.07em; cursor:pointer; }
.extra-button i { font-size:22px; color:#8ea4ba; }.extra-button.active { border-color:#20b981; background:#0d2a22; color:#fff; box-shadow:0 0 18px rgba(32,185,129,.16); }.extra-button.active i{color:#35e38a}
.hmi-switch { min-height:76px; }
.hmi-switch .switch-name { font-size:13px; font-weight:950; }.switch-ind { width:11px;height:11px;border-radius:50%;background:#536274; display:inline-block; }.hmi-switch.active .switch-ind{background:var(--hmi-green);box-shadow:0 0 12px rgba(53,227,138,.75)}
@media (min-width:1500px) { .hmi-grid-v2 { grid-template-columns:minmax(0,1fr) 430px; gap:22px; } .hmi-panel-title{font-size:16px}.hmi-panel-sub{font-size:12px}.equipment-diagram-wrap{min-height:800px}.equipment-diagram{min-height:780px}.hmi-switch .switch-name{font-size:14px}.temp-grid-v2 .temp-value{font-size:36px} }
@media (max-width:1200px) { .hmi-grid-v2{grid-template-columns:1fr}.hmi-right-v2{position:static}.equipment-diagram-wrap{min-height:auto}.equipment-diagram{min-height:0}.temp-grid-v2{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px) { .process-banner-v2{align-items:flex-start}.hero-status-right{justify-content:flex-start}.equipment-diagram-wrap{padding:4px}.temp-grid-v2{grid-template-columns:1fr 1fr}.equipment-diagram{min-width:650px}.equipment-diagram-wrap{overflow-x:auto}.switch-grid-v2{grid-template-columns:1fr 1fr}.switch-grid-v2 .hmi-switch:last-child{grid-column:1/-1} }

/* ================================================================
   HMI V3 — destylator: desktop + mobile composition
   ================================================================ */
.hmi-dashboard-v3 { --h3-cyan:#31c7ff; --h3-amber:#ffad2f; --h3-green:#35e38a; --h3-red:#ff4d5d; --h3-purple:#a78bfa; }
.hmi-grid-v3 { display:grid; grid-template-columns:minmax(0,1fr) 410px; gap:18px; align-items:start; }
.hmi-main-v3,.hmi-right-v3{min-width:0}.hmi-right-v3{position:sticky;top:18px}
.process-banner-v3{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 18px}
.equipment-panel-v3{overflow:hidden}.hmi-panel-head-v3{padding:16px 18px}.equipment-diagram-wrap-v3{padding:10px 12px 14px;background:rgba(3,7,12,.35)}
.equipment-diagram-v3{display:block;width:100%;height:auto;min-height:760px;border-radius:16px;background:#070c13}
.equipment-diagram-v3 text{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.v3-pipe{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:10}.water-pipe-v3{stroke:var(--h3-cyan);filter:url(#glowBlueV3)}.lm-pipe-v3{stroke:var(--h3-amber);filter:url(#glowAmberV3)}.olm-pipe-v3{stroke:var(--h3-purple);filter:url(#glowBlueV3)}
.v3-flow{stroke:none}.water-flow-v3{fill:#d2f7ff;filter:url(#glowBlueV3);animation:flowHorizontalV3 2.1s linear infinite}.lm-flow-v3{fill:#ffe0a5;filter:url(#glowAmberV3);animation:flowHorizontalV3 1.8s linear infinite}.olm-flow-v3{fill:#eadfff;filter:url(#glowBlueV3);animation:flowHorizontalV3 1.7s linear infinite}
@keyframes flowHorizontalV3{0%{transform:translateX(-32px);opacity:.15}20%{opacity:1}80%{opacity:1}100%{transform:translateX(32px);opacity:.15}}
.v3-temp-box rect{fill:rgba(10,19,29,.96);stroke:#2c6684;stroke-width:3}.v3-temp-box text{fill:#dff5ff;font-size:15px;font-weight:900;letter-spacing:.08em;text-anchor:middle}.v3-temp-box text+tspan{}.water-temp-box text:last-child{fill:var(--h3-cyan);font-size:28px}.column-temp-box text{text-anchor:start}.column-temp-box text:first-of-type{font-size:14px}.column-temp-box text:last-of-type{fill:var(--h3-amber);font-size:30px}.condenser-temp-box text{text-anchor:start}.condenser-temp-box text:first-of-type{font-size:14px}.condenser-temp-box text:last-of-type{fill:var(--h3-cyan);font-size:30px}
.head-title-v3,.column-title-v3,.tank-title-v3{fill:#f4f8fc;font-size:25px;font-weight:950;letter-spacing:.08em}.head-temp-v3,.tank-temp-v3,.buffer-temp-v3{fill:var(--h3-cyan);font-size:31px;font-weight:950}.head-note-v3{fill:#a9b9c7;font-size:14px;font-weight:850;letter-spacing:.12em}.head-coil-v3{fill:none;stroke:var(--h3-cyan);stroke-width:8;filter:url(#glowBlueV3);stroke-linecap:round}.column-trays-v3 path{stroke:#71869b;stroke-width:4;opacity:.9}.buffer-title-v3{fill:#f1f6fa;font-size:17px;font-weight:950;letter-spacing:.08em}.vessel-title-v3{fill:#f1f6fa;font-size:16px;font-weight:950;letter-spacing:.07em}.vessel-state-v3{fill:var(--h3-green);font-size:14px;font-weight:950;letter-spacing:.08em}.pipe-label-v3{fill:#d8c9ff;font-size:16px;font-weight:950;letter-spacing:.12em}.v3-valve circle{fill:#0b121b;stroke:#a9b7c5;stroke-width:5}.v3-valve path{stroke:#dce6ef;stroke-width:4}.v3-valve.active circle{stroke:var(--h3-green);filter:url(#glowBlueV3)}.tank-heater-labels text{fill:#8799aa;font-size:15px;font-weight:950;text-anchor:middle}.heater-coils-v3 path{fill:none;stroke:#5b6e80;stroke-width:8;stroke-linecap:round}.heater-coils-v3 path.active{stroke:var(--h3-amber);filter:url(#glowAmberV3)}.tank-v3.hot .heater-coils-v3 path.active{animation:heaterPulseV3 1.1s ease-in-out infinite}.tank-v3.hot .tank-title-v3{fill:#fff2d5}.tank-v3.hot .tank-temp-v3{fill:#ffbd4d}
@keyframes heaterPulseV3{0%,100%{opacity:.65}50%{opacity:1}}
.tank-v3.hot #tankLiquidV3{fill:url(#hotLiquidV3)}.liquid-wave-v3{animation:liquidWaveV3 3s ease-in-out infinite}.head-aabratek-v3{display:none}.aabratek-active #headUfo{display:none}.aabratek-active #headAabratek{display:block}
.diagram-legend-v3 text{fill:#a9b7c6;font-size:13px;font-weight:750}.temp-grid-v3{grid-template-columns:repeat(3,minmax(0,1fr));padding:12px}.temp-grid-v3 .temp-card{min-height:112px}.temp-grid-v3 .temp-value{font-size:32px}
@keyframes liquidWaveV3{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}

@media (min-width:1450px){.hmi-grid-v3{grid-template-columns:minmax(0,1fr) 430px;gap:22px}.equipment-diagram-v3{min-height:850px}.hmi-panel-title{font-size:13px}.hmi-panel-sub{font-size:10px}}
@media (max-width:1200px){.hmi-grid-v3{grid-template-columns:1fr}.hmi-right-v3{position:static}.equipment-diagram-v3{min-height:0}.temp-grid-v3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){
  .app-main{padding:0 8px 18px}.topbar{min-height:56px;margin-bottom:8px}.topbar-title{font-size:17px}.topbar-kicker{font-size:8px}.topbar-right{display:none}
  .hmi-grid-v3{display:flex;flex-direction:column;gap:10px}.hmi-main-v3{display:contents}.hmi-right-v3{display:contents}
  .process-banner-v3{order:0;min-height:64px;padding:10px 12px}.process-status-icon{width:32px;height:32px}.process-kicker{font-size:7px}.process-name{font-size:12px}.hero-status-right{gap:7px}.hero-mode{padding:7px 9px;font-size:9px}.process-state{font-size:8px}
  .equipment-panel-v3{order:1}.equipment-panel-v3 .hmi-panel-head-v3{padding:11px 12px}.equipment-panel-v3 .hmi-panel-title{font-size:11px}.equipment-panel-v3 .hmi-panel-sub{display:none}.equipment-diagram-wrap-v3{padding:3px;background:#070c13}.equipment-diagram-v3{width:100%;min-height:0;height:auto;border-radius:12px}
  .control-panel-v3{order:2}.telemetry-panel-v3{order:3}.chart-panel{order:4}
  .hmi-right-v3 .hmi-panel{width:100%}.main-power-v2{min-height:62px;font-size:15px}.control-section{padding:12px}.switch-grid-v2{grid-template-columns:1fr 1fr}.switch-grid-v2 .hmi-switch:last-child{grid-column:1/-1}.temp-grid-v3{grid-template-columns:1fr 1fr}.temp-grid-v3 .temp-card{min-height:96px}.temp-grid-v3 .temp-value{font-size:25px}
  /* Na telefonie schemat jest głównym elementem. Nie ma poziomego przewijania. */
  .equipment-diagram-v3 .head-title-v3{font-size:22px}.equipment-diagram-v3 .head-temp-v3{font-size:28px}.equipment-diagram-v3 .head-note-v3{font-size:12px}.equipment-diagram-v3 .tank-title-v3{font-size:22px}.equipment-diagram-v3 .tank-temp-v3{font-size:28px}.equipment-diagram-v3 .column-title-v3{font-size:22px}.equipment-diagram-v3 .v3-temp-box text{font-size:13px}.equipment-diagram-v3 .v3-temp-box text:last-child{font-size:25px}.equipment-diagram-v3 .vessel-title-v3{font-size:13px}.equipment-diagram-v3 .vessel-state-v3{font-size:12px}
}

/* ================================================================
   HMI V4 — wizualny kierunek zaakceptowanego projektu
   ================================================================ */
.hmi-dashboard-v4{--v4-bg:#050a11;--v4-panel:#0a111b;--v4-line:rgba(121,151,177,.18);--v4-cyan:#28c7f4;--v4-amber:#ff9f1f;--v4-green:#22db8a;--v4-red:#f0224d;--v4-purple:#a75cff;color:#e9f1f8}
.hmi-grid-v4{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:14px;max-width:1540px;margin:0 auto}.hmi-center-v4,.hmi-right-v4{min-width:0}.hmi-right-v4{display:flex;flex-direction:column;gap:12px}.hmi-panel-v4{background:linear-gradient(145deg,#0b131e,#070d15);border:1px solid var(--v4-line);border-radius:13px;box-shadow:0 18px 50px rgba(0,0,0,.24);overflow:hidden}.destylator-head-v4{height:72px;padding:15px 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(120,150,180,.12)}.destylator-title-v4{font-size:17px;font-weight:900;letter-spacing:.12em}.destylator-title-v4 i{color:#6f8195;margin-right:7px}.destylator-sub-v4{font-size:9px;color:#4e6175;letter-spacing:.07em;margin-top:4px}.live-badge-v4{font-size:11px;font-weight:900;color:var(--v4-green);letter-spacing:.14em}.live-badge-v4 span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--v4-green);box-shadow:0 0 14px var(--v4-green);margin-right:5px}.equipment-stage-v4{padding:8px;background:#050a11}.equipment-diagram-v4{width:100%;display:block;background:#050a11;border-radius:11px}.equipment-diagram-v4 text{font-family:Inter,system-ui,sans-serif}.pipe-v4{fill:none;stroke:var(--v4-cyan);stroke-width:12;stroke-linecap:round;stroke-linejoin:round;filter:url(#cyanGlowV4)}.inner-flow-v4{fill:none;stroke:#c6f5ff;stroke-width:3;stroke-dasharray:2 20;stroke-linecap:round;animation:flowV4 1.25s linear infinite}.lm-v4{stroke:var(--v4-green);filter:url(#cyanGlowV4)}.inner-flow-amber-v4{fill:none;stroke:#ffe0a0;stroke-width:3;stroke-dasharray:2 18;animation:flowV4 1.3s linear infinite}.olm-pipe-v4{stroke:var(--v4-purple);filter:url(#purpleGlowV4)}.inner-flow-purple-v4{fill:none;stroke:#f0dfff;stroke-width:3;stroke-dasharray:2 18;animation:flowV4 1.15s linear infinite}.pipe-label-v4{font-size:15px;font-weight:950;letter-spacing:.12em}.pipe-label-v4.purple{fill:#d6b6ff}.pipe-label-v4.green{fill:#65f0ae}@keyframes flowV4{to{stroke-dashoffset:-44}}
.temp-box-v4 rect{fill:rgba(8,18,28,.94);stroke:#2b6c8d;stroke-width:3}.temp-box-v4 text{fill:#e7f6fd;font-size:14px;font-weight:900;letter-spacing:.08em}.temp-box-v4 text:last-child{fill:var(--v4-cyan);font-size:27px}.water-box-v4 text{text-anchor:middle}.condenser-box-v4 text,.shelf-box-v4 text{text-anchor:start}.condenser-box-v4 text:last-child,.shelf-box-v4 text:last-child{font-size:29px}.condenser-box-v4 text:last-child{fill:var(--v4-cyan)}.shelf-box-v4 text:last-child{fill:var(--v4-amber)}
.head-name-v4,.column-name-v4,.tank-name-v4{fill:#f5f9fc;font-weight:950;letter-spacing:.09em}.head-name-v4{font-size:24px}.head-temp-v4{fill:var(--v4-cyan);font-size:29px;font-weight:950}.coil-v4{fill:none;stroke:var(--v4-cyan);stroke-width:8;stroke-linecap:round;filter:url(#cyanGlowV4);animation:coilPulseV4 2s ease-in-out infinite}.hidden-head-v4{display:none}.aabratek-active #headUfo{display:none}.aabratek-active #headAabratek{display:block}@keyframes coilPulseV4{50%{opacity:.72;filter:url(#cyanGlowV4)}}
.column-name-v4{font-size:26px}.trays-v4 path{stroke:#71879a;stroke-width:4;opacity:.92}.valve-v4 circle{fill:#081019;stroke:#aab9c7;stroke-width:5}.valve-v4 path{stroke:#e0e8ee;stroke-width:4}.valve-v4.active circle{stroke:var(--v4-green);filter:url(#cyanGlowV4)}.receiver-title-v4{fill:#f4f8fb;font-size:14px;font-weight:950;letter-spacing:.08em}.receiver-state-v4{fill:var(--v4-green);font-size:15px;font-weight:950;letter-spacing:.08em}.buffer-name-v4{fill:#f4f8fb;font-size:16px;font-weight:950;letter-spacing:.08em}.buffer-temp-v4{fill:var(--v4-cyan);font-size:28px;font-weight:950}.tank-name-v4{font-size:25px}.tank-temp-v4{fill:var(--v4-amber);font-size:31px;font-weight:950}.tank-wave-v4{animation:tankWaveV4 3s ease-in-out infinite}.heater-coils-v4 path{fill:none;stroke:#4e6275;stroke-width:9;stroke-linecap:round}.heater-coils-v4 path.active{stroke:var(--v4-amber);filter:url(#amberGlowV4);animation:heaterV4 1.1s ease-in-out infinite}.heater-label-v4{fill:#9aabb9;font-size:14px;font-weight:900}@keyframes heaterV4{50%{opacity:.55}}@keyframes tankWaveV4{50%{transform:translateX(12px)}}.tank-assembly-v4.hot #tankLiquidV4{fill:url(#hotLiquidV4)}.tank-assembly-v4.hot .tank-temp-v4{fill:#ffbd4c}
.stage-legend-v4{font-size:13px}.stage-legend-v4 text{fill:#a9b7c4;font-weight:700}.bottom-hmi-v4{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.8fr);gap:12px;margin-top:12px}.panel-title-v4{padding:13px 15px 9px;color:#b7c4d2;font-size:11px;font-weight:900;letter-spacing:.12em}.panel-title-v4 i{color:#5f7b91;margin-right:6px}.telemetry-grid-v4{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;padding:0 10px 10px}.telemetry-card-v4{min-height:92px;padding:11px 10px;background:linear-gradient(145deg,#0d1722,#09111a);border:1px solid rgba(117,146,171,.13);border-radius:10px;position:relative}.telemetry-card-v4>span{display:block;color:#718195;font-size:10px;font-weight:900;letter-spacing:.08em}.telemetry-card-v4 strong span{display:inline;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:0}.telemetry-card-v4 strong{display:block;margin-top:8px;font-size:31px;line-height:1.05;font-family:ui-monospace,monospace}.telemetry-card-v4.amber strong{color:var(--v4-amber)}.telemetry-card-v4.cyan strong{color:var(--v4-cyan)}.telemetry-card-v4 small{display:block;color:#5d7082;font-size:8px;margin-top:3px}.telemetry-card-v4 i{display:block;height:2px;margin-top:9px;background:currentColor;opacity:.45;box-shadow:0 0 9px currentColor}.quick-grid-v4{display:grid;grid-template-columns:repeat(4,1fr);padding:0 10px 10px;gap:7px}.quick-grid-v4>div{min-height:92px;border:1px solid rgba(117,146,171,.13);border-radius:10px;background:#09111a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.quick-grid-v4 i{font-size:18px;color:#62dfff}.quick-grid-v4 b{font-size:10px;letter-spacing:.08em}.quick-grid-v4 span{font-size:9px;font-weight:900;color:var(--v4-green)}.chart-panel-v4{margin-top:12px}.chart-panel-v4 .chart-inner{height:260px;padding:8px 14px 14px}
.controls-v4{padding-bottom:8px}.controls-head-v4{height:57px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(120,150,180,.12);font-weight:900;letter-spacing:.11em}.controls-head-v4 i{color:#6d8296;margin-right:7px}.controls-head-v4 strong{color:var(--v4-green);font-size:11px}.main-power-v4{margin:10px 10px 8px;width:calc(100% - 20px);height:68px;border:0;border-radius:13px;background:linear-gradient(100deg,#f01847,#e3164b);color:white;font-weight:950;font-size:17px;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 10px 28px rgba(239,24,71,.18);cursor:pointer}.power-icon-v4{width:28px;height:28px;border-radius:7px;background:#19d78b;display:grid;place-items:center;color:#05251a}.mode-row-v4{display:flex;justify-content:space-between;padding:7px 13px 5px;color:#65768a;font-size:9px;font-weight:900;letter-spacing:.12em}.mode-row-v4 b{color:#aab6c2}.mode-switch-v4{margin:0 10px 8px;height:36px;display:grid;grid-template-columns:1fr 1fr;position:relative;background:#070e16;border:1px solid rgba(110,140,165,.12);border-radius:8px;overflow:hidden}.mode-indicator-v4{position:absolute;top:0;bottom:0;left:50%;width:50%;background:rgba(37,169,224,.12);border:1px solid rgba(40,199,244,.24);transition:.2s}.mode-switch-v4 button{position:relative;z-index:2;border:0;background:none;color:#657487;font-size:10px;font-weight:900;cursor:pointer}.mode-switch-v4 button:first-of-type{color:#566576}.control-block-v4{border-top:1px solid rgba(120,150,180,.08);padding:11px 10px}.block-head-v4{display:flex;justify-content:space-between;color:#7e8fa2;font-size:9px;font-weight:900;letter-spacing:.11em;margin-bottom:9px}.block-head-v4 i{color:var(--v4-amber);margin-right:5px}.block-head-v4 b{color:#d0d8e0}.gauge-row-v4{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.heater-gauge-v4{height:137px;border:1px solid rgba(110,140,165,.12);border-radius:10px;background:#09111a;position:relative;text-align:center;padding-top:10px;overflow:hidden}.gauge-value-v4{font-family:ui-monospace,monospace;font-size:18px;color:#cbd5df}.gauge-value-v4 small{font-size:10px;color:#68788a}.gauge-arc-v4{width:76px;height:44px;border:6px solid #334250;border-bottom:0;border-radius:80px 80px 0 0;margin:11px auto 0;position:relative}.heater-gauge-v4.active .gauge-arc-v4{border-color:var(--v4-amber);box-shadow:0 -3px 16px rgba(255,159,31,.25)}.heater-gauge-v4 button{position:absolute;bottom:8px;width:26px;height:26px;border-radius:50%;border:1px solid #2b3947;background:#101a25;color:#dce5ee;cursor:pointer}.heater-gauge-v4 button:first-of-type{left:10px}.heater-gauge-v4 button:last-of-type{right:10px}.hidden-range-v4{display:none}.range-hidden-label-v4{display:none}.range-modern-v4{margin-top:2px}.range-modern-label-v4{display:flex;justify-content:space-between;color:#718397;font-size:9px;margin-bottom:5px}.range-modern-label-v4 b{color:var(--v4-amber)}.range-modern-v4 input{width:100%;accent-color:var(--v4-amber)}.valve-grid-v4{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.valve-grid-v4 button,.valve-grid-v4>div{min-height:92px;border:1px solid rgba(110,140,165,.12);border-radius:10px;background:#09111a;color:#b6c2cf;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}.valve-grid-v4 i{font-size:18px;color:#547086}.valve-grid-v4 b{font-size:10px;letter-spacing:.08em}.dot-v4{width:8px;height:8px;border-radius:50%;background:#566575;display:block}.active .dot-v4,.valve-grid-v4 button.active .dot-v4{background:var(--v4-green);box-shadow:0 0 12px var(--v4-green)}.extra-grid-v4{display:grid;grid-template-columns:1fr 1fr;gap:7px}.extra-grid-v4 button{height:62px;border:1px solid rgba(48,120,225,.5);border-radius:10px;background:#102858;color:#eef5ff;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:900;cursor:pointer}.extra-grid-v4 button i{color:#dce9ff}.extra-grid-v4 em{font-style:normal}.system-v4{padding-bottom:8px}.system-grid-v4{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 10px 10px}.system-grid-v4>div{min-height:65px;border:1px solid rgba(110,140,165,.12);border-radius:9px;background:#09111a;padding:10px;display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto;column-gap:6px}.system-grid-v4 i{grid-row:1/3;align-self:center;color:#26d78d}.system-grid-v4 span{color:#6d7f91;font-size:8px;font-weight:800}.system-grid-v4 b{color:#c6d0da;font-size:10px}.system-grid-v4>div:nth-child(1) i{color:#26c8f4}.system-grid-v4>div:nth-child(3) i{color:#5aa7ff}.system-grid-v4>div:nth-child(4) i{color:#ffad2f}

@media (min-width:1450px){.hmi-grid-v4{grid-template-columns:minmax(0,1fr) 405px}.equipment-stage-v4{padding:8px 10px}.equipment-diagram-v4{min-height:720px}.telemetry-card-v4 strong{font-size:34px}}
@media (max-width:1180px){.hmi-grid-v4{grid-template-columns:1fr}.hmi-right-v4{display:grid;grid-template-columns:1fr 1fr}.controls-v4{grid-row:span 2}.bottom-hmi-v4{grid-template-columns:1fr}.telemetry-grid-v4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.app-main{padding:0 7px 18px}.topbar{min-height:54px;margin-bottom:7px}.topbar-right{display:none}.topbar-title{font-size:16px}.hmi-grid-v4{display:flex;flex-direction:column;gap:9px}.hmi-center-v4{display:contents}.hmi-right-v4{display:contents}.destylator-panel-v4{order:1}.equipment-stage-v4{padding:3px}.destylator-head-v4{height:54px;padding:9px 11px}.destylator-title-v4{font-size:13px}.destylator-sub-v4{display:none}.live-badge-v4{font-size:9px}.equipment-diagram-v4{width:100%;height:auto}.bottom-hmi-v4{order:2;display:flex;flex-direction:column;gap:9px;margin-top:9px}.telemetry-v4{order:1}.quick-v4{order:2}.chart-panel-v4{order:3;margin-top:9px}.hmi-right-v4{order:4}.controls-v4{order:1}.system-v4{order:2}.telemetry-grid-v4{grid-template-columns:1fr 1fr}.telemetry-card-v4{min-height:82px}.telemetry-card-v4 strong{font-size:28px}.quick-grid-v4{grid-template-columns:1fr 1fr}.quick-grid-v4>div{min-height:74px}.hmi-right-v4 .controls-v4{width:100%}.gauge-row-v4{gap:5px}.heater-gauge-v4{height:125px}.chart-panel-v4 .chart-inner{height:210px}.destylator-panel-v4{overflow:hidden}.system-grid-v4{grid-template-columns:1fr 1fr}}

.topbar-v4{min-height:76px;margin-bottom:10px;border-bottom:1px solid rgba(120,150,180,.12);gap:14px}.topbar-v4-center{display:flex;align-items:center;gap:14px;margin-left:auto}.topbar-v4-center>span:first-child{font-size:10px;color:var(--v4-green);font-weight:900;letter-spacing:.08em}.topbar-process{height:38px;padding:0 12px;border:1px solid rgba(120,150,180,.14);border-radius:9px;background:#09111a;display:flex;align-items:center;gap:8px;color:#ffad2f;font-size:10px;font-weight:900}.topbar-process i{font-size:17px}.topbar-v4-mode{height:38px;min-width:120px;padding:0 12px;border:1px solid rgba(120,150,180,.14);border-radius:9px;background:#09111a;display:flex;align-items:center;gap:8px}.topbar-v4-mode i{color:#31c7ff}.topbar-v4-mode span{font-size:7px;color:#68788a;display:block}.topbar-v4-mode strong{font-size:10px;color:#d8e3ec}.topbar-v4-clock{height:38px;padding:0 12px;border:1px solid rgba(120,150,180,.14);border-radius:9px;background:#09111a;display:flex;align-items:center;gap:8px;color:#dce5ed;font-family:ui-monospace,monospace;font-size:12px}.topbar-v4-clock i{color:#71879b}.heater-gauge-v4{--gauge:0%}.heater-gauge-v4 .gauge-arc-v4{background:conic-gradient(from 270deg,var(--v4-amber) 0 var(--gauge),#334250 var(--gauge) 50%,transparent 50%);border:0;width:82px;height:82px;border-radius:50%;margin:8px auto 0;position:relative}.heater-gauge-v4 .gauge-arc-v4:after{content:'';position:absolute;inset:8px;border-radius:50%;background:#09111a;border:1px solid #243443}.heater-gauge-v4.active .gauge-arc-v4{box-shadow:0 0 18px rgba(255,159,31,.18)}
@media(max-width:900px){.topbar-v4-center{display:none}.topbar-v4-mode{margin-left:auto}.topbar-v4-clock{display:none}}

/* ================================================================
   HMI V5 — realistyczniejszy destylator + właściwy mobile
   ================================================================ */
html,body{max-width:100%;overflow-x:hidden}
.brand-block-logo{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:0 2px 14px}
.brand-logo-img{display:block;width:185px;max-width:100%;height:auto;filter:drop-shadow(0 0 12px rgba(40,199,244,.08))}
.brand-subtitle-logo{margin-left:8px;margin-top:-2px}

.equipment-diagram-v5{aspect-ratio:4/3;max-height:780px;margin:0 auto}
.equipment-diagram-v5 text{font-family:Inter,ui-sans-serif,system-ui,sans-serif}
.pipe-shell-v5{fill:none;stroke:#131d27;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;filter:url(#shadowV5)}
.pipe-core-v5{fill:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.water-core-v5{stroke:#26c9f7;filter:url(#cyanGlowV5)}
.lm-core-v5{stroke:#22db8a;filter:url(#greenGlowV5)}
.olm-core-v5{stroke:#a75cff;filter:url(#purpleGlowV5)}
.pipe-flow-v5{fill:none;stroke:#e8fbff;stroke-width:2.7;stroke-dasharray:3 18;stroke-linecap:round;stroke-linejoin:round;animation:pipeFlowV5 1.15s linear infinite;opacity:.18}
.water-flow-v5{stroke:#e9fbff}.lm-flow-v5{stroke:#d7ffe9}.olm-flow-v5{stroke:#f2e5ff}
.equipment-diagram-v5.water-active .water-flow-v5,.equipment-diagram-v5.lm-active .lm-flow-v5,.equipment-diagram-v5.olm-active .olm-flow-v5{opacity:1}
.equipment-diagram-v5:not(.water-active) .water-core-v5{opacity:.48;filter:none}.equipment-diagram-v5:not(.lm-active) .lm-core-v5{opacity:.32;filter:none}.equipment-diagram-v5:not(.olm-active) .olm-core-v5{opacity:.32;filter:none}
@keyframes pipeFlowV5{to{stroke-dashoffset:-42}}
.temp-box-v5 rect{fill:rgba(5,14,23,.94);stroke:#1f607f;stroke-width:2.5}.temp-box-v5 text{fill:#dbeaf4;font-size:14px;font-weight:900;letter-spacing:.07em}.temp-box-v5 text:last-of-type{fill:#28c7f4;font-size:27px;font-weight:950}.temp-box-v5.water-box-v5 text{text-anchor:middle}.temp-small-v5{fill:#8296a7!important;font-size:11px!important}.hidden-sync-v5{display:none}
.coil-v5{fill:none;stroke:#26cdfa;stroke-width:8;stroke-linecap:round;filter:url(#cyanGlowV5);animation:coilPulseV5 2s ease-in-out infinite}.head-name-v5{fill:#f7fafc;font-size:22px;font-weight:950;letter-spacing:.08em}.tray-detail-v5 path{stroke:#8aa0b1;stroke-width:3}.tray-detail-v5 circle{fill:#c2d0da;opacity:.55}.pipe-label-v5{font-size:15px;font-weight:950;letter-spacing:.13em}.lm-label-v5{fill:#5ff0ae}.olm-label-v5{fill:#d5b4ff}
.real-valve-v5 circle{fill:#071019;stroke:#aab9c7;stroke-width:5}.real-valve-v5 path{stroke:#dfe7ed;stroke-width:4;stroke-linecap:round}.real-valve-v5 rect{fill:#526574;stroke:#b8c6d0;stroke-width:2}.real-valve-v5.active circle{stroke:#2be092;filter:url(#greenGlowV5)}.olm-line-v5 .real-valve-v5.active circle{stroke:#b060ff;filter:url(#purpleGlowV5)}
.receiver-title-v5{fill:#f0f5f8;font-size:13px;font-weight:950;letter-spacing:.08em}.receiver-state-v5{fill:#27e393;font-size:14px;font-weight:950}.purple-state-v5{fill:#bd70ff}.buffer-name-v5{fill:#f0f6fa;font-size:15px;font-weight:950;letter-spacing:.1em}.buffer-temp-v5{fill:#28c7f4;font-size:26px;font-weight:950}.tank-name-v5{fill:#f8fbfd;font-size:23px;font-weight:950;letter-spacing:.08em}.tank-temp-v5{fill:#ff9f1f;font-size:29px;font-weight:950}.heater-label-v5{fill:#8397a8;font-size:13px;font-weight:900}.stage-legend-v5 text{fill:#9aabba;font-size:12px;font-weight:750}.tank-real-v5.hot #tankLiquidV4{fill:url(#hotLiquidV5)}.tank-real-v5.hot .tank-temp-v5{fill:#ffb13d;filter:url(#amberGlowV5)}
@keyframes coilPulseV5{50%{opacity:.7}}

@media(max-width:700px){
  .app-shell,.app-main,#view_dashboard,.hmi-dashboard-v4,.hmi-grid-v4,.hmi-center-v4,.destylator-panel-v4,.equipment-stage-v4,.bottom-hmi-v4,.hmi-right-v4{width:100%;max-width:100%;min-width:0}
  .app-sidebar{width:100%;max-width:100%;overflow:hidden;padding:9px 10px 8px}
  .brand-block-logo{align-items:center;padding:0 0 7px}.brand-logo-img{width:205px;max-height:82px;object-fit:contain}.brand-subtitle-logo{display:none}
  .side-nav{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;padding-bottom:2px;scrollbar-width:none}.side-nav::-webkit-scrollbar{display:none}.side-nav-item{white-space:nowrap;padding:9px 10px;font-size:11px}
  .app-main{padding:0 5px 18px!important;overflow:hidden}
  .topbar-v4{min-height:50px!important;height:50px;margin:0 0 5px;padding:0 7px;overflow:hidden}.topbar-v4 .topbar-kicker{display:none}.topbar-v4 .topbar-title{font-size:17px;margin:0}.topbar-v4-mode,.topbar-v4-clock,.topbar-v4-center{display:none!important}
  .destylator-head-v4{height:48px!important;padding:8px 10px!important}.destylator-title-v4{font-size:13px!important}.live-badge-v4{font-size:8px!important}
  .equipment-stage-v4{padding:0!important;overflow:hidden;background:#040910}.equipment-diagram-v5{width:100%;max-width:100%;height:auto;max-height:none;aspect-ratio:auto;display:block}
  .hmi-panel-v4{border-radius:10px}.bottom-hmi-v4{margin-top:7px!important}.telemetry-grid-v4{padding:0 7px 7px;gap:5px}.quick-grid-v4{padding:0 7px 7px;gap:5px}
  .controls-v4,.system-v4{width:100%;max-width:100%}.gauge-row-v4,.valve-grid-v4,.extra-grid-v4{max-width:100%}
}
@media(max-width:430px){
  .brand-logo-img{width:180px;max-height:70px}.side-nav-item{font-size:10px;padding:8px 9px}.side-nav-item i{font-size:12px}
  .destylator-head-v4{height:44px!important}.destylator-title-v4{font-size:12px!important}.equipment-stage-v4{margin:0}
  .telemetry-card-v4{min-height:78px!important;padding:8px}.telemetry-card-v4 strong{font-size:26px!important}.telemetry-card-v4>span{font-size:9px}.quick-grid-v4>div{min-height:68px!important}
}
.real-valve-v5[data-valve="OLM"].active circle{stroke:#b060ff;filter:url(#purpleGlowV5)}

/* ================================================================
   HMI V6 — finalny rysunek destylatora, bardziej 3D i lepszy mobile
   ================================================================ */
.equipment-diagram-v6{display:block;width:100%;height:auto;max-width:100%;margin:0 auto;background:#03080e;border-radius:10px}
.equipment-diagram-v6 text{font-family:Inter,ui-sans-serif,system-ui,sans-serif}
.v6-pipe-shell{fill:none;stroke:#101923;stroke-width:18;stroke-linecap:round;stroke-linejoin:round;filter:url(#v6Shadow)}
.v6-pipe-core{fill:none;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.water-core-v6{stroke:#26c9f7;filter:url(#v6GlowC)}.lm-core-v6{stroke:#22db8a;filter:url(#v6GlowG)}.olm-core-v6{stroke:#a75cff;filter:url(#v6GlowP)}
.v6-pipe-flow{fill:none;stroke:#f6fdff;stroke-width:2.5;stroke-dasharray:3 16;stroke-linecap:round;stroke-linejoin:round;animation:v6Flow 1.1s linear infinite;opacity:.13}
.equipment-diagram-v6.water-active .water-flow-v6,.equipment-diagram-v6.lm-active .lm-flow-v6,.equipment-diagram-v6.olm-active .olm-flow-v6{opacity:1}
.equipment-diagram-v6:not(.water-active) .water-core-v6{opacity:.42;filter:none}.equipment-diagram-v6:not(.lm-active) .lm-core-v6{opacity:.3;filter:none}.equipment-diagram-v6:not(.olm-active) .olm-core-v6{opacity:.3;filter:none}
@keyframes v6Flow{to{stroke-dashoffset:-38}}
.v6-tempbox rect{fill:rgba(4,12,20,.94);stroke:#1d6381;stroke-width:2.3}.v6-tempbox text{fill:#e8f2f8;font-size:13px;font-weight:900;letter-spacing:.07em}.v6-tempbox text:nth-of-type(2){fill:#2ccdf8;font-size:25px;font-weight:950;letter-spacing:.02em}.v6-waterbox text{text-anchor:middle}.v6-hidden{display:none}
.v6-headname{fill:#f7fbfd;font-size:20px;font-weight:950;letter-spacing:.07em}.v6-coil,.v6-aabratek-coil{fill:none;stroke:#2bd5ff;stroke-width:7;stroke-linecap:round;filter:url(#v6GlowC);animation:v6Coil 2s ease-in-out infinite}.v6-aabratek-coil{stroke-width:6}.v6-head-hidden{display:none}.aabratek-active #headUfo{display:none!important}.aabratek-active #headAabratek{display:inline!important}.equipment-diagram-v6:not(.aabratek-active) #headUfo{display:inline}.equipment-diagram-v6:not(.aabratek-active) #headAabratek{display:none}
@keyframes v6Coil{50%{opacity:.68}}
.v6-column-clamps rect{fill:url(#v6Steel)}.v6-trays path{stroke:#90a5b5;stroke-width:3}.v6-pipelabel{font-size:14px;font-weight:950;letter-spacing:.12em}.lm-label-v6{fill:#58efa9}.olm-label-v6{fill:#d1adff}
.v6-valve circle{fill:#071018;stroke:#b0bdc8;stroke-width:4}.v6-valve path{stroke:#e2ebf1;stroke-width:4;stroke-linecap:round}.v6-valve rect{fill:#5b6f7e;stroke:#bec9d0;stroke-width:2}.v6-valve[data-valve="LM"].active circle{stroke:#27e393;filter:url(#v6GlowG)}.v6-valve[data-valve="OLM"].active circle{stroke:#b36cff;filter:url(#v6GlowP)}
.v6-receiver-title{fill:#f4f8fb;font-size:12px;font-weight:950;letter-spacing:.07em}.v6-receiver-state{fill:#28e495;font-size:13px;font-weight:950}.olm-state-v6{fill:#c46fff}.v6-buffer-name{fill:#eff6fa;font-size:14px;font-weight:950;letter-spacing:.09em}.v6-buffer-temp{fill:#2ccdf8;font-size:24px;font-weight:950}.v6-tank-name{fill:#fff;font-size:21px;font-weight:950;letter-spacing:.08em}.v6-tank-temp{fill:#ff9f1f;font-size:28px;font-weight:950}.v6-heater-label{fill:#8296a8;font-size:12px;font-weight:900}.v6-legend text{fill:#95a7b6;font-size:11px;font-weight:750}.v6-tank.hot #tankLiquidV4{fill:url(#v6Hot)}.v6-tank.hot .v6-tank-temp{fill:#ffb442;filter:url(#v6GlowA)}.v6-hot-bubbles circle{fill:#ffb447;opacity:0}.v6-tank.hot .v6-hot-bubbles circle{opacity:.7;animation:v6Bubble 1.8s ease-in-out infinite}.v6-tank.hot .v6-hot-bubbles circle:nth-child(2){animation-delay:.4s}.v6-tank.hot .v6-hot-bubbles circle:nth-child(3){animation-delay:.8s}.v6-tank.hot .v6-hot-bubbles circle:nth-child(4){animation-delay:1.2s}@keyframes v6Bubble{50%{transform:translateY(-12px);opacity:.18}}

/* Kompaktowe etykiety — nie zasłaniają WODA OUT / OLM */
.head-temp-v6{pointer-events:none}.shelf-temp-v6{pointer-events:none}

/* Na desktopie centralny rysunek ma pierwszeństwo wizualne */
@media(min-width:1181px){.equipment-stage-v4{padding:7px 9px 9px}.equipment-diagram-v6{max-height:760px;object-fit:contain}}

/* Mobile: schemat mieści się w całości w szerokości ekranu, bez poziomego scrolla */
@media(max-width:700px){
  .app-shell,.app-main,#view_dashboard,.hmi-dashboard-v4,.hmi-grid-v4,.hmi-center-v4,.destylator-panel-v4,.equipment-stage-v4,.bottom-hmi-v4,.hmi-right-v4{box-sizing:border-box;width:100%!important;max-width:100%!important;min-width:0!important}
  .app-main{overflow-x:hidden!important;padding-left:4px!important;padding-right:4px!important}
  .destylator-panel-v4{overflow:hidden!important}
  .equipment-stage-v4{overflow:hidden!important;padding:0!important}
  .equipment-diagram-v4,.equipment-diagram-v5,.equipment-diagram-v6{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;max-height:none!important;margin:0!important;transform:none!important}
  .destylator-head-v4{padding-left:9px!important;padding-right:9px!important}
  .brand-logo-img{width:188px!important;max-width:72vw!important;height:auto!important}
}
@media(max-width:430px){
  .equipment-diagram-v6{width:100%!important}
  .destylator-title-v4{letter-spacing:.08em!important}
  .v6-tempbox text{font-size:12px}.v6-tempbox text:nth-of-type(2){font-size:23px}
}

/* ======================================================================
   HMI V7 — fotorealistyczny DESTYLATOR na bazie zaakceptowanej grafiki
   SVG nie rysuje już aparatury. Jest wyłącznie warstwą LIVE/animacji.
   ====================================================================== */
.equipment-stage-v7{
  padding:8px 10px 10px!important;
  background:radial-gradient(circle at 50% 42%,rgba(17,49,68,.16),transparent 58%),#03080e!important;
  overflow:hidden!important;
}
.photo-equipment-v7{
  position:relative;
  width:100%;
  max-width:100%;
  aspect-ratio:4/3;
  margin:0 auto;
  overflow:hidden;
  border-radius:10px;
  background:#03080e;
  isolation:isolate;
  container-type:inline-size;
}
.photo-apparatus-v7{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
  transition:opacity .22s ease,filter .25s ease;
}
.photo-equipment-v7.head-switching .photo-apparatus-v7{opacity:.58;filter:blur(2px)}
.photo-process-layer-v7{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none;overflow:visible}
.photo-flow-base-v7,.photo-flow-v7,.photo-inactive-mask-v7{fill:none;stroke-linecap:round;stroke-linejoin:round}
.photo-flow-base-v7{stroke-width:8;opacity:.34}
.photo-flow-base-v7.water{stroke:#21c9f8;filter:url(#photoGlowC)}
.photo-flow-base-v7.lm{stroke:#23df8c;filter:url(#photoGlowG)}
.photo-flow-base-v7.olm{stroke:#af62ff;filter:url(#photoGlowP)}
.photo-flow-v7{stroke-width:4;stroke-dasharray:7 13;animation:photoFlowV7 .72s linear infinite;opacity:.08}
.photo-flow-v7.water{stroke:#d8f9ff;filter:url(#photoGlowC)}
.photo-flow-v7.lm{stroke:#d9ffeb;filter:url(#photoGlowG)}
.photo-flow-v7.olm{stroke:#f2e3ff;filter:url(#photoGlowP)}
.photo-inactive-mask-v7{stroke:#03080e;stroke-width:13;opacity:.72;transition:opacity .2s ease}
.photo-equipment-v7.water-active .photo-flow-v7.water{opacity:1}.photo-equipment-v7.water-active .photo-flow-base-v7.water{opacity:.72}
.photo-equipment-v7.lm-active .photo-flow-v7.lm{opacity:1}.photo-equipment-v7.lm-active .lm-mask{opacity:.08}
.photo-equipment-v7.olm-active .photo-flow-v7.olm{opacity:1}.photo-equipment-v7.olm-active .olm-mask{opacity:.08}
.photo-equipment-v7:not(.lm-active) .photo-flow-base-v7.lm,.photo-equipment-v7:not(.olm-active) .photo-flow-base-v7.olm{opacity:.08;filter:none}
@keyframes photoFlowV7{to{stroke-dashoffset:-42}}
.photo-pipe-shell-v9{fill:none;stroke:#14212b;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 2px rgba(0,0,0,.85))}
.photo-pipe-shell-v9.lm-shell{stroke:#173128}.photo-pipe-shell-v9.olm-shell{stroke:#2a1d39}
.photo-water-v7 .head-coil{filter:url(#photoGlowC)}
.photo-equipment-v7.water-active .photo-water-v7 .head-coil{stroke-dasharray:5 9;animation-duration:.55s}

/* V9: czyszczenie WYŁĄCZNIE warstwą strony. Nie generujemy nowego obrazka. */
.photo-mask-v9{position:absolute;z-index:3;pointer-events:none}
/* stary LM na grafice bazowej: od zaworu do króćca zbiornika */
.mask-old-lm-v9{left:16.5%;top:55.2%;width:13.8%;height:10.0%;background:linear-gradient(180deg,rgba(3,8,13,.99),rgba(3,8,13,.99));border-radius:1.2cqw}
/* sam króciec na pokrywie zbiornika zasłaniamy metalicznym fragmentem */
.mask-old-lm-port-v9{left:26.0%;top:63.0%;width:5.5%;height:5.2%;background:linear-gradient(165deg,#26343d 0%,#a4b0b8 23%,#34444e 47%,#0d151b 76%,#576670 100%);border-radius:48%;box-shadow:inset 0 1px rgba(255,255,255,.22)}
/* wskaźnik poziomu na płaszczu */
.mask-level-gauge-v9{left:56.4%;top:67.1%;width:5.7%;height:22.0%;background:linear-gradient(90deg,#1b242a 0%,#727b80 20%,#2c3337 49%,#161c20 78%,#4b5459 100%);border-radius:.5cqw;opacity:.98}
/* zewnętrzna pętla rur poziomu */
.mask-level-pipes-v9{left:63.6%;top:66.0%;width:12.2%;height:22.8%;background:#03080e;border-radius:1.4cqw}
.mask-level-text-v9{left:57.5%;top:64.0%;width:20%;height:5.0%;background:#03080e;border-radius:1cqw}


.photo-valve-v7 circle{fill:#081018;stroke:#aebbc6;stroke-width:3}.photo-valve-v7 path{stroke:#e5edf3;stroke-width:3}.photo-valve-v7 rect{fill:#617584;stroke:#c7d0d7;stroke-width:1.5}
.photo-valve-v7[data-valve="LM"].active circle{stroke:#22e18b;filter:url(#photoGlowG)}
.photo-valve-v7[data-valve="OLM"].active circle{stroke:#b765ff;filter:url(#photoGlowP)}

.photo-card-v7,.photo-state-card-v7,.photo-receiver-v7,.photo-heater-chip-v7,.photo-head-type-v7{
  position:absolute;z-index:8;box-sizing:border-box;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  text-shadow:0 1px 4px rgba(0,0,0,.75);
}
.photo-card-v7{
  min-width:0;
  padding:1.15cqw 1.35cqw;
  border:1px solid rgba(43,194,243,.52);
  border-radius:1.15cqw;
  background:linear-gradient(145deg,rgba(4,14,23,.93),rgba(3,9,15,.86));
  box-shadow:0 10px 26px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.035),0 0 18px rgba(28,157,202,.07);
  backdrop-filter:blur(2px);
}
.photo-card-v7>span{display:block;color:#dbe7ef;font-size:1.45cqw;font-weight:850;letter-spacing:.075em;line-height:1.1;white-space:nowrap}
.photo-card-v7 strong{display:flex;align-items:baseline;gap:.35cqw;color:#30ccf8;font-size:3.35cqw;font-weight:950;line-height:1.1;margin-top:.7cqw;letter-spacing:.005em;white-space:nowrap}
.photo-card-v7 strong em{font-size:1.75cqw;font-style:normal;color:inherit}.photo-card-v7.amber strong{color:#ff9f1f}.photo-card-v7.amber{border-color:rgba(255,159,31,.28)}
.photo-water-in-v7{left:8.6%;top:6.2%;width:13.7%;text-align:center}.photo-water-out-v7{left:78.3%;top:6.2%;width:13.7%;text-align:center}
.photo-head-temp-v7{left:51.2%;top:6.7%;width:17.4%}.photo-shelf-temp-v7{left:19.7%;top:31.7%;width:15.6%}
.photo-buffer-temp-v7{left:48.7%;top:51.3%;width:13.1%}.photo-tank-temp-v7{left:32.2%;top:69.6%;width:18.8%;text-align:center}

.photo-head-type-v7{
  left:33.5%;top:15.5%;width:18.6%;text-align:center;color:#f4f8fb;
  font-size:2.05cqw;font-weight:950;letter-spacing:.055em;white-space:nowrap;
  filter:drop-shadow(0 2px 5px #000);
}
.photo-equipment-v7.aabratek-active .photo-head-type-v7{color:#8fefff}
.photo-state-card-v7{
  padding:.95cqw 1.15cqw;border-radius:1cqw;background:rgba(3,11,18,.9);border:1px solid rgba(105,135,156,.28);box-shadow:0 9px 24px rgba(0,0,0,.32)
}
.photo-state-card-v7 span{display:block;color:#dbe7ee;font-weight:900;font-size:1.55cqw;letter-spacing:.07em}
.photo-state-card-v7 strong{display:block;color:#29e28f;font-size:1.6cqw;font-weight:950;margin-top:.45cqw;white-space:nowrap}.photo-state-card-v7.purple strong{color:#c56cff}
.photo-lm-state-v7{left:4.8%;top:45.1%;width:11.8%;text-align:center}.photo-olm-state-v7{left:59.5%;top:22.2%;width:10.6%;text-align:center}
.photo-receiver-v7{color:#e8eef3;font-size:1.25cqw;font-weight:900;letter-spacing:.065em;background:rgba(3,9,15,.72);border:1px solid rgba(99,124,143,.18);border-radius:.7cqw;padding:.55cqw .8cqw;white-space:nowrap}
.photo-receiver-lm-v7{left:3.7%;top:88.3%}.photo-receiver-olm-v7{left:80.2%;top:28.2%}

.photo-heater-v7 path{fill:none;stroke:#5c6671;stroke-width:8;stroke-linecap:round;opacity:.28;transition:stroke .2s,opacity .2s,filter .2s}
.photo-heater-v7 path.active{stroke:#ff9f1f;opacity:1;filter:url(#photoGlowA)}
.photo-tank-heat-v7{position:absolute;z-index:3;left:21.7%;top:62.8%;width:49.6%;height:30.4%;pointer-events:none;border-radius:48%;opacity:0;transition:opacity .25s;background:radial-gradient(ellipse at 50% 70%,rgba(255,112,18,.42),rgba(255,128,20,.13) 38%,transparent 70%);filter:blur(9px);mix-blend-mode:screen}
.photo-tank-heat-v7.hot{opacity:1;animation:photoHeatV7 2.2s ease-in-out infinite}@keyframes photoHeatV7{50%{opacity:.72}}
.photo-heater-chip-v7{top:83.5%;width:7.4%;padding:.4cqw .55cqw;text-align:center;border-radius:.7cqw;background:rgba(5,10,15,.78);border:1px solid rgba(129,147,161,.18)}
.photo-heater-chip-v7 span{display:block;color:#eaf0f4;font-size:1.3cqw;font-weight:900}.photo-heater-chip-v7 b{display:block;color:#8a98a5;font-size:1.35cqw;margin-top:.2cqw}.photo-heater-chip-v7.active{border-color:rgba(255,159,31,.48);box-shadow:0 0 18px rgba(255,126,17,.13)}.photo-heater-chip-v7.active b{color:#ff9f1f}
.photo-g1-v7{left:28.2%}.photo-g2-v7{left:38.3%}.photo-g3-v7{left:48.4%}

/* Desktop: dokładnie ten sam „hero” efekt co w zaakceptowanej makiecie. */
@media(min-width:1181px){
  .equipment-stage-v7{padding:7px 9px 9px!important}
  .photo-equipment-v7{max-height:760px}
}

/* Telefon: obraz destylatora jest główną częścią ekranu i ZAWSZE mieści się w szerokości. */
@media(max-width:700px){
  .equipment-stage-v7{padding:0!important;overflow:hidden!important}
  .photo-equipment-v7{width:100%!important;max-width:100%!important;min-width:0!important;aspect-ratio:4/3!important;border-radius:8px}
  .photo-apparatus-v7,.photo-process-layer-v7{width:100%!important;height:100%!important;max-width:100%!important}
  .photo-card-v7{padding:1.05cqw 1.15cqw;border-radius:1.1cqw}
  .photo-card-v7>span{font-size:1.85cqw}.photo-card-v7 strong{font-size:3.15cqw}.photo-card-v7 strong em{font-size:1.8cqw}
  .photo-head-type-v7{font-size:2.3cqw}
  .photo-state-card-v7 span{font-size:1.8cqw}.photo-state-card-v7 strong{font-size:1.9cqw}
  .photo-receiver-v7{font-size:1.55cqw}
  .photo-heater-chip-v7 span,.photo-heater-chip-v7 b{font-size:1.55cqw}
  /* dolne sterowanie zostaje pod destylatorem — nie próbujemy upychać go obok */
  .hmi-grid-v4{display:flex!important;flex-direction:column!important}
  .destylator-panel-v4{order:1!important}.bottom-hmi-v4{order:2!important}.controls-v4{order:3!important}.system-v4{order:4!important}
}
@media(max-width:430px){
  .photo-card-v7{border-width:1px}
  .photo-receiver-v7{display:none} /* na bardzo wąskim ekranie nie dublujemy nazw naczyń */
  .photo-water-in-v7,.photo-water-out-v7{top:5.6%}
  .photo-head-temp-v7{left:51.4%;top:6.5%;width:17.2%}
  .photo-shelf-temp-v7{left:18.9%;width:16.6%}
  .photo-lm-state-v7{left:4.2%;width:12.8%}
}


/* ======================================================================
   V10 — poprawki na podstawie nagrania 15.08:
   1) zero animacji przy zamkniętych przepływach,
   2) LM wyłącznie głowica -> elektrozawór -> odbiór LM,
   3) całkowite ukrycie płynowskazu/rurociągu poziomu zaszytego w grafice.
   ====================================================================== */

/* Ruch jest DOMYŚLNIE wyłączony. Sama klasa .photo-flow-v7 nie animuje niczego. */
.photo-flow-v7{
  opacity:0 !important;
  animation:none !important;
  stroke-dashoffset:0;
}
.photo-flow-base-v7{opacity:0 !important;}

/* Dopiero stan MQTT włącza ruch konkretnego medium. */
.photo-equipment-v7.water-active .photo-flow-base-v7.water{opacity:.62 !important;}
.photo-equipment-v7.water-active .photo-flow-v7.water{
  opacity:1 !important;
  animation:photoFlowV10 .72s linear infinite !important;
}
.photo-equipment-v7.lm-active .photo-flow-base-v7.lm{opacity:.48 !important;}
.photo-equipment-v7.lm-active .photo-flow-v7.lm{
  opacity:1 !important;
  animation:photoFlowV10 .72s linear infinite !important;
}
.photo-equipment-v7.olm-active .photo-flow-base-v7.olm{opacity:.52 !important;}
.photo-equipment-v7.olm-active .photo-flow-v7.olm{
  opacity:1 !important;
  animation:photoFlowV10 .72s linear infinite !important;
}
@keyframes photoFlowV10{to{stroke-dashoffset:-40}}

/* Spirala w głowicy też rusza się WYŁĄCZNIE przy aktywnej wodzie. */
.photo-water-v7 .head-coil{animation:none !important;opacity:0 !important;}
.photo-equipment-v7.water-active .photo-water-v7 .head-coil.photo-flow-base-v7{opacity:.72 !important;}
.photo-equipment-v7.water-active .photo-water-v7 .head-coil.photo-flow-v7{
  opacity:1 !important;
  animation:photoFlowV10 .54s linear infinite !important;
}

/* Fizyczna rura LM/OLM może pozostać widoczna, ale bez "biegnących" punktów. */
.photo-pipe-shell-v9{opacity:.92;}

/* Stare maski V9 były w praktyce pomijane przez błędny zapis CSS. Wyłączamy je
   i zastępujemy precyzyjnymi maskami V10. */
.mask-old-lm-v9,.mask-old-lm-port-v9,.mask-level-gauge-v9,
.mask-level-pipes-v9,.mask-level-text-v9{display:none !important;}

.photo-mask-v10{position:absolute;z-index:5;pointer-events:none;}

/* Błędna rura LM z lewego zaworu do króćca zbiornika — część w powietrzu. */
.mask-lm-air-v10{
  left:19.0%;top:56.2%;width:10.7%;height:5.8%;
  background:#03080e;
  border-radius:1.2cqw;
  box-shadow:0 0 12px 8px #03080e;
}
/* Końcówka błędnego LM dochodząca do pokrywy zbiornika. */
.mask-lm-drop-v10{
  left:26.2%;top:60.1%;width:5.0%;height:7.8%;
  background:linear-gradient(155deg,#2b3439 0%,#8e999f 22%,#39444a 42%,#11181c 68%,#566168 100%);
  border-radius:42% 42% 32% 32%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 7px rgba(0,0,0,.4);
}

/* Płynowskaz na płaszczu zbiornika — zastępujemy fragmentem stalowej powierzchni. */
.mask-level-gauge-v10{
  left:56.0%;top:67.0%;width:6.8%;height:22.4%;
  background:
    radial-gradient(ellipse at 28% 40%,rgba(255,134,39,.12),transparent 44%),
    linear-gradient(90deg,#252a2d 0%,#5f6262 19%,#343638 42%,#191d20 70%,#4b5052 100%);
  border-radius:.55cqw;
  box-shadow:inset 0 0 20px rgba(0,0,0,.42);
}
/* Trzy króćce po prawej stronie zbiornika. */
.mask-level-ports-v10{
  left:61.8%;top:67.1%;width:5.5%;height:21.0%;
  background:linear-gradient(90deg,#24292c,#55595a 34%,#24282a 68%,#0c1114);
  border-radius:.6cqw;
  box-shadow:inset 0 0 12px rgba(0,0,0,.45);
}
/* Zewnętrzna pętla rur — znajduje się już poza zbiornikiem, więc tłem jest scena. */
.mask-level-loop-v10{
  left:66.1%;top:66.0%;width:12.3%;height:23.6%;
  background:#03080e;
  border-radius:1.1cqw;
  box-shadow:0 0 10px 7px #03080e;
}
/* Obydwa napisy 78%. */
.mask-level-label-a-v10{
  left:55.8%;top:64.4%;width:8.0%;height:4.3%;
  background:#03080e;border-radius:.8cqw;box-shadow:0 0 7px 5px #03080e;
}
.mask-level-label-b-v10{
  left:72.0%;top:69.0%;width:7.5%;height:5.0%;
  background:#03080e;border-radius:.8cqw;box-shadow:0 0 7px 5px #03080e;
}

/* Warstwa procesowa zawsze ponad maskami. */
.photo-process-layer-v7{z-index:6 !important;}
.photo-card-v7,.photo-state-card-v7,.photo-receiver-v7,.photo-heater-chip-v7,.photo-head-type-v7{z-index:8 !important;}

/* ======================================================================
   HMI V11 — czyste assety aparatury + dynamiczne warianty + nowe sterowanie
   ====================================================================== */
.equipment-stage-v11{padding:7px 9px 9px!important;overflow:hidden;background:#03080e}
.photo-equipment-v11{
  position:relative;width:100%;max-width:100%;aspect-ratio:4/3;margin:0 auto;overflow:hidden;
  border-radius:10px;background:#03080e;isolation:isolate;container-type:inline-size;
}
.photo-apparatus-v11{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none;transition:opacity .18s ease,filter .18s ease}
.photo-equipment-v11.variant-switching .photo-apparatus-v11{opacity:.58;filter:blur(1.5px)}
.photo-process-layer-v11{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none;overflow:visible}
.flow-layout-v11{display:none}.photo-equipment-v11.head-nixon .flow-nixon-v11{display:block}.photo-equipment-v11.head-aabratek .flow-aabratek-v11{display:block}
.flow-v11{fill:none;stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:7 13;opacity:0;animation:none}
.flow-v11.water-v11{stroke:#e4fbff;filter:url(#v11GlowC)}.flow-v11.lm-v11{stroke:#d8ffea;filter:url(#v11GlowG)}.flow-v11.olm-v11{stroke:#f4e5ff;filter:url(#v11GlowP)}
.photo-equipment-v11.water-active .flow-v11.water-v11{opacity:1;animation:v11Flow .72s linear infinite}
.photo-equipment-v11.water-active .flow-v11.coil-v11{animation-duration:.46s}
.photo-equipment-v11.lm-active .flow-v11.lm-v11{opacity:1;animation:v11Flow .72s linear infinite}
.photo-equipment-v11.olm-active .flow-v11.olm-v11{opacity:1;animation:v11Flow .72s linear infinite}
@keyframes v11Flow{to{stroke-dashoffset:-40}}

.photo-card-v11,.photo-state-card-v11{position:absolute;z-index:8;box-sizing:border-box;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;text-shadow:0 1px 4px rgba(0,0,0,.78)}
.photo-card-v11{padding:.85cqw 1cqw;border:1px solid rgba(43,194,243,.42);border-radius:1.05cqw;background:linear-gradient(145deg,rgba(4,14,23,.68),rgba(3,9,15,.58));box-shadow:0 10px 24px rgba(0,0,0,.28);backdrop-filter:blur(2.5px)}
.photo-card-v11>span{display:block;color:#dbe7ef;font-size:1.45cqw;font-weight:900;letter-spacing:.075em;line-height:1.05;white-space:nowrap}
.photo-card-v11 strong{display:flex;align-items:baseline;gap:.35cqw;color:#30ccf8;font-size:3.35cqw;font-weight:950;line-height:1.02;margin-top:.55cqw;white-space:nowrap}.photo-card-v11 strong em{font-size:1.7cqw;font-style:normal;color:inherit}.photo-card-v11.amber strong{color:#ff9f1f}.photo-card-v11.amber{border-color:rgba(255,159,31,.3)}
.photo-water-in-v11{left:8.2%;top:6.5%;width:12.6%;text-align:center}.photo-water-out-v11{right:8.2%;top:6.5%;width:12.6%;text-align:center}
.photo-head-temp-v11{left:54.2%;top:2.7%;width:12.8%}
.photo-shelf-temp-v11{left:33.1%;top:40.8%;width:11.8%}
.photo-buffer-temp-v11{left:56.0%;top:54.5%;width:10.5%}
.photo-tank-temp-v11{left:38.6%;top:72.4%;width:10.9%;text-align:center;padding:.58cqw .72cqw}
.photo-equipment-v11.head-aabratek .photo-head-temp-v11{left:54.2%;top:2.7%;width:12.8%}
.photo-equipment-v11.head-aabratek .photo-shelf-temp-v11{left:33.1%;top:40.8%;width:11.8%}
.photo-equipment-v11.head-aabratek .photo-buffer-temp-v11{left:56.0%;top:54.5%;width:10.5%}
.photo-equipment-v11.head-aabratek .photo-tank-temp-v11{top:72.4%;left:38.6%;width:10.9%;padding:.58cqw .72cqw}
.photo-state-card-v11{padding:.8cqw 1cqw;border-radius:.9cqw;background:rgba(3,11,18,.9);border:1px solid rgba(105,135,156,.28);box-shadow:0 9px 24px rgba(0,0,0,.32);text-align:center}
.photo-state-card-v11 span{display:block;color:#dbe7ee;font-weight:900;font-size:1.35cqw;letter-spacing:.07em}.photo-state-card-v11 strong{display:block;color:#29e28f;font-size:1.55cqw;font-weight:950;margin-top:.35cqw;white-space:nowrap}.photo-state-card-v11.purple strong{color:#c56cff}
.photo-lm-state-v11{left:10.2%;top:49.1%;width:10.8%}
.photo-olm-state-v11{left:61%;top:24%;width:10.5%}
.photo-equipment-v11.head-aabratek .photo-lm-state-v11{left:14.2%;top:49.1%;width:10.8%}
.photo-equipment-v11.head-aabratek .photo-olm-state-v11{left:66%;top:27%}
.photo-tank-heat-v11{position:absolute;z-index:3;left:28%;top:66%;width:39%;height:25%;pointer-events:none;border-radius:48%;opacity:0;transition:opacity .2s;background:radial-gradient(ellipse at 50% 70%,rgba(255,112,18,.42),rgba(255,128,20,.12) 38%,transparent 70%);filter:blur(10px);mix-blend-mode:screen}.photo-tank-heat-v11.hot{opacity:1;animation:v11Heat 2s ease-in-out infinite}@keyframes v11Heat{50%{opacity:.68}}
.photo-equipment-v11.no-buffer .photo-buffer-temp-v11{display:none!important}
#telemetry_bufor.buffer-hidden{display:none!important}

/* półokrągłe wskaźniki grzałek */
.gauge-row-v11{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.heater-gauge-v11{--gauge-deg:0deg;min-height:178px;border:1px solid rgba(110,140,165,.14);border-radius:11px;background:#09111a;color:#cbd5df;position:relative;text-align:center;padding:9px 8px 8px;overflow:hidden}
button.heater-gauge-v11{cursor:pointer;font:inherit}.heater-name-v11{display:block;font-weight:950;font-size:12px;letter-spacing:.08em;color:#dce5ed;margin-bottom:5px}
.gauge-semi-v11{display:block;position:relative;width:92px;height:50px;margin:5px auto 9px;overflow:hidden}
.gauge-semi-v11:before{content:"";position:absolute;left:0;top:0;width:92px;height:92px;border-radius:50%;background:conic-gradient(from 270deg,var(--v4-amber) 0 var(--gauge-deg),#344451 var(--gauge-deg) 180deg,transparent 180deg 360deg)}
.gauge-semi-v11:after{content:"";position:absolute;left:9px;top:9px;width:74px;height:74px;border-radius:50%;background:#09111a;border:1px solid #243443}
.gauge-value-v11{position:absolute;z-index:2;left:0;right:0;top:19px;font-family:ui-monospace,monospace;font-size:19px;font-weight:900;color:#e2e9ef}.gauge-value-v11 small{font-size:10px;color:#788a9b}
.heater-gauge-v11.active{border-color:rgba(255,159,31,.35);box-shadow:0 0 18px rgba(255,159,31,.08)}
.g1-fast-slider-v11{width:100%;height:22px;margin:0;accent-color:var(--v4-amber);cursor:ew-resize}.g1-fast-slider-v11::-webkit-slider-thumb{cursor:grab}.g1-fast-slider-v11:active::-webkit-slider-thumb{cursor:grabbing}
.gauge-step-v11{display:grid;grid-template-columns:30px 1fr 30px;gap:5px;align-items:center;margin-top:3px}.gauge-step-v11 button{height:28px;border:1px solid #2c3d4d;border-radius:50%;background:#101a25;color:#e3ebf2;font-weight:900;cursor:pointer}.gauge-step-v11 span{font-size:10px;color:#7f91a2;font-family:ui-monospace,monospace}
.heater-toggle-label-v11{display:block;font-size:8px;letter-spacing:.1em;color:#65788a;margin-top:15px}.heater-toggle-v11.active .heater-toggle-label-v11{color:#ffad2f}
.valve-grid-v4{grid-template-columns:repeat(2,1fr)!important}
.extra-grid-v4 button.active{border-color:rgba(53,227,138,.62)!important;background:#0d2a22!important;box-shadow:0 0 18px rgba(53,227,138,.13)!important}.extra-grid-v4 button.active i{color:#35e38a!important}.extra-grid-v4 button.active .dot-v4{background:#35e38a;box-shadow:0 0 12px #35e38a}

@media(min-width:1181px){.photo-equipment-v11{max-height:760px}}
@media(max-width:700px){
  .equipment-stage-v11{padding:0!important}.photo-equipment-v11{width:100%!important;max-width:100%!important;aspect-ratio:4/3!important;border-radius:8px}.photo-apparatus-v11,.photo-process-layer-v11{width:100%!important;height:100%!important}
  .photo-card-v11{padding:.82cqw .92cqw}.photo-card-v11>span{font-size:1.85cqw}.photo-card-v11 strong{font-size:3.35cqw}.photo-card-v11 strong em{font-size:1.9cqw}.photo-state-card-v11 span{font-size:1.7cqw}.photo-state-card-v11 strong{font-size:1.8cqw}
  .gauge-row-v11{gap:5px}.heater-gauge-v11{min-height:165px;padding-left:5px;padding-right:5px}.gauge-semi-v11{width:78px;height:44px}.gauge-semi-v11:before{width:78px;height:78px}.gauge-semi-v11:after{left:8px;top:8px;width:62px;height:62px}.gauge-value-v11{top:16px;font-size:16px}
}
@media(max-width:430px){.photo-head-temp-v11{left:53.8%;top:3.2%;width:14.4%}.photo-shelf-temp-v11{left:32.6%;top:41.4%;width:13.2%}.photo-buffer-temp-v11{left:55.8%;top:55.0%;width:11.1%}.photo-tank-temp-v11{left:38.2%;top:72.8%;width:11.8%;padding:.56cqw .64cqw}.photo-lm-state-v11{left:8.1%;top:49.6%;width:11.2%}.photo-state-card-v11{padding:.65cqw .8cqw}.photo-equipment-v11.head-aabratek .photo-head-temp-v11{left:53.8%;top:3.2%;width:14.4%}.photo-equipment-v11.head-aabratek .photo-shelf-temp-v11{left:32.6%;top:41.4%;width:13.2%}.photo-equipment-v11.head-aabratek .photo-buffer-temp-v11{left:55.8%;top:55.0%;width:11.1%}.photo-equipment-v11.head-aabratek .photo-tank-temp-v11{left:38.2%;top:72.8%;width:11.8%;padding:.56cqw .64cqw}.photo-equipment-v11.head-aabratek .photo-lm-state-v11{left:11.6%;top:49.6%;width:11.2%}.heater-gauge-v11{min-height:158px}.heater-name-v11{font-size:10px}}

/* HMI integrated assets v12.1 */


/* ===== HMI V13 — przepływy odwzorowane z dostarczonych plików referencyjnych ===== */
.photo-process-layer-v13{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none;overflow:visible}
.photo-process-layer-v13 .flow-layout-v13{display:none}
.photo-equipment-v11.head-nixon.buffer-on .flow-ufo-buffer-v13{display:block}
.photo-equipment-v11.head-nixon.no-buffer .flow-ufo-nobuffer-v13{display:block}
.photo-equipment-v11.head-aabratek.buffer-on .flow-aabratek-buffer-v13{display:block}
.photo-equipment-v11.head-aabratek.no-buffer .flow-aabratek-nobuffer-v13{display:block}

.photo-process-layer-v13 .flow-v13{
  fill:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:16 24;stroke-dashoffset:0;opacity:0;animation:none;
  vector-effect:non-scaling-stroke;
}
.photo-process-layer-v13 .water-v13{stroke:#49e7ff;filter:url(#v13GlowC)}
.photo-process-layer-v13 .lm-v13{stroke:#62ff72;filter:url(#v13GlowG)}
.photo-process-layer-v13 .olm-v13{stroke:#ef55ff;filter:url(#v13GlowP)}

/* Ruch istnieje WYŁĄCZNIE, gdy odpowiadający stan MQTT jest aktywny. */
.photo-equipment-v11.water-active .photo-process-layer-v13 .water-v13{opacity:.98;animation:v13WaterFlow .72s linear infinite}
.photo-equipment-v11.lm-active .photo-process-layer-v13 .lm-v13{opacity:.98;animation:v13ProductFlow .76s linear infinite}
.photo-equipment-v11.olm-active .photo-process-layer-v13 .olm-v13{opacity:.98;animation:v13ProductFlow .76s linear infinite}
@keyframes v13WaterFlow{to{stroke-dashoffset:-80}}
@keyframes v13ProductFlow{to{stroke-dashoffset:-80}}

/* Starsze trasy z poprzednich rewizji nie mogą się pojawiać równolegle. */
.photo-process-layer-v13 .flow-layout-v11{display:none!important}

@media(max-width:700px){
  .photo-process-layer-v13 .flow-v13{stroke-width:6;stroke-dasharray:13 20}
}

/* ===== HMI V13.5 — pozycja kontrolki LM wg wskazania na zrzucie =====
   10. PÓŁKA pozostaje dokładnie w pozycji z V13.3. */
.photo-lm-state-v11,
.photo-equipment-v11.head-aabratek .photo-lm-state-v11{
  left:27.0% !important;
  top:18.5% !important;
  width:12.0% !important;
}

@media(max-width:430px){
  .photo-lm-state-v11,
  .photo-equipment-v11.head-aabratek .photo-lm-state-v11{
    left:26.5% !important;
    top:18.8% !important;
    width:13.0% !important;
  }
}

/* ===== HMI V13.6 — tylko pozycja OLM; reszta V13.5 bez zmian ===== */
.photo-olm-state-v11,
.photo-equipment-v11.head-aabratek .photo-olm-state-v11{
  left:64.5% !important;
  top:20.8% !important;
}

/* ===== HMI V13.7 — desktop: wszystkie 6 temperatur w jednym rzędzie =====
   Telefon pozostaje bez zmian. */
@media(min-width:1181px){
  .telemetry-grid-v4{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }
  .telemetry-card-v4{
    min-width:0;
  }
}

/* ===== HMI V13.8 — desktop: mniejsze wartości temperatur =====
   Tylko desktop; układ i telefon bez zmian. */
@media(min-width:1181px){
  .telemetry-card-v4 strong{
    font-size:25px !important;
  }
}

/* ===== HMI V13.9 — przycisk START / STOP procesu ===== */
.main-power-v4{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  height:68px;
  border:1px solid rgba(118,142,164,.22);
  border-radius:13px;
  background:linear-gradient(145deg,#0c151f 0%,#080f17 55%,#071019 100%);
  color:#f5f9fc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 26px rgba(0,0,0,.28);
  transition:transform .12s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.main-power-v4::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.55;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.025) 48%,transparent 100%);
}
.main-power-v4::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:0;
  height:2px;
  border-radius:999px;
  opacity:.85;
  pointer-events:none;
}
.main-power-v4 .power-icon-v4{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:9px;
  border:1px solid transparent;
  transition:transform .15s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.main-power-v4 #text_main_power{
  letter-spacing:.025em;
  text-shadow:0 1px 5px rgba(0,0,0,.6);
}

/* STOP — proces aktualnie pracuje */
.main-power-v4:has(#icon_main_power.fa-stop){
  border-color:rgba(255,60,78,.62);
  background:linear-gradient(145deg,rgba(39,10,16,.96),#0b1119 58%,#081019 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 0 1px rgba(255,44,66,.08),0 0 24px rgba(255,35,62,.18),0 12px 30px rgba(0,0,0,.32);
}
.main-power-v4:has(#icon_main_power.fa-stop)::after{
  background:linear-gradient(90deg,transparent,#ff334f 18%,#ff5267 50%,#ff334f 82%,transparent);
  box-shadow:0 0 12px rgba(255,48,75,.7);
}
.main-power-v4:has(#icon_main_power.fa-stop) .power-icon-v4{
  border-radius:8px;
  color:#fff4f6;
  background:linear-gradient(145deg,#ff3a53,#c91835);
  border-color:rgba(255,108,126,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 16px rgba(255,41,68,.42);
}
.main-power-v4:has(#icon_main_power.fa-stop):hover{
  border-color:rgba(255,82,101,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 0 0 1px rgba(255,52,76,.11),0 0 31px rgba(255,35,62,.26),0 13px 32px rgba(0,0,0,.34);
}

/* START — proces zatrzymany */
.main-power-v4:has(#icon_main_power.fa-play){
  border-color:rgba(38,221,165,.48);
  background:linear-gradient(145deg,rgba(5,31,29,.96),#0a141b 58%,#071019 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 0 1px rgba(35,220,168,.06),0 0 25px rgba(28,225,177,.14),0 12px 30px rgba(0,0,0,.32);
}
.main-power-v4:has(#icon_main_power.fa-play)::after{
  background:linear-gradient(90deg,transparent,#28ddb0 18%,#32d9ef 50%,#28ddb0 82%,transparent);
  box-shadow:0 0 12px rgba(42,220,199,.62);
}
.main-power-v4:has(#icon_main_power.fa-play) .power-icon-v4{
  border-radius:11px;
  color:#03231e;
  background:linear-gradient(145deg,#24e0a1,#31d9df);
  border-color:rgba(116,255,220,.68);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 17px rgba(40,225,184,.36);
}
.main-power-v4:has(#icon_main_power.fa-play):hover{
  border-color:rgba(72,235,190,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 0 0 1px rgba(51,225,185,.09),0 0 32px rgba(35,225,185,.22),0 13px 32px rgba(0,0,0,.34);
}

.main-power-v4:hover .power-icon-v4{transform:scale(1.045)}
.main-power-v4:active{
  transform:translateY(2px) scale(.992);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.38),0 5px 13px rgba(0,0,0,.26)!important;
}
.main-power-v4:active .power-icon-v4{transform:scale(.96)}
.main-power-v4:focus-visible{
  outline:2px solid rgba(102,223,255,.72);
  outline-offset:2px;
}

/* ===== HMI V13.10 — AUTOMAT / MANUAL w stylu przycisku START/STOP ===== */
.mode-row-v4{
  padding:9px 13px 6px;
  align-items:center;
}
.mode-row-v4>span{
  color:#66798b;
  font-size:8px;
  letter-spacing:.14em;
}
.mode-row-v4 b{
  padding:3px 8px;
  border:1px solid rgba(115,143,166,.16);
  border-radius:999px;
  background:rgba(8,15,23,.72);
  color:#dbe6ee;
  font-size:9px;
  line-height:1.15;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.mode-switch-v4{
  height:46px;
  margin:0 10px 10px;
  padding:4px;
  display:grid;
  grid-template-columns:1fr 1fr;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(115,143,166,.2);
  border-radius:12px;
  background:linear-gradient(145deg,#0b141e,#070e16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 8px 20px rgba(0,0,0,.18);
}
.mode-switch-v4::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:0;
  height:1px;
  opacity:.55;
  background:linear-gradient(90deg,transparent,rgba(99,214,255,.45),transparent);
}
.mode-indicator-v4{
  top:4px;
  bottom:4px;
  left:4px;
  width:calc(50% - 6px);
  border-radius:9px;
  border:1px solid rgba(42,218,190,.48);
  background:linear-gradient(145deg,rgba(16,62,57,.86),rgba(7,31,34,.84));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 0 18px rgba(32,220,190,.16);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.mode-switch-v4:has(#tab_manual.text-white) .mode-indicator-v4{
  border-color:rgba(255,169,47,.48);
  background:linear-gradient(145deg,rgba(63,42,15,.86),rgba(30,23,10,.86));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 18px rgba(255,159,31,.14);
}
.mode-switch-v4 button{
  position:relative;
  z-index:2;
  width:100%!important;
  height:100%;
  padding:0 10px!important;
  border:0;
  border-radius:8px;
  background:transparent!important;
  color:#617486!important;
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.08em;
  cursor:pointer;
  transition:color .18s ease,transform .11s ease,text-shadow .18s ease;
}
.mode-switch-v4 #tab_auto.text-white{
  color:#6ff0d1!important;
  text-shadow:0 0 12px rgba(52,226,191,.38);
}
.mode-switch-v4 #tab_manual.text-white{
  color:#ffbd5c!important;
  text-shadow:0 0 12px rgba(255,166,45,.32);
}
.mode-switch-v4 button:hover{
  color:#dbe7ef!important;
}
.mode-switch-v4 button:active{
  transform:translateY(1px) scale(.985);
}
.mode-switch-v4 button:focus-visible{
  outline:1px solid rgba(99,220,255,.78);
  outline-offset:-2px;
}

/* Kolor małej etykiety bieżącego trybu nad przełącznikiem. */
.mode-row-v4:has(+ .mode-switch-v4 #tab_auto.text-white) b{
  color:#65e9cc;
  border-color:rgba(45,218,183,.22);
  box-shadow:0 0 12px rgba(45,218,183,.07);
}
.mode-row-v4:has(+ .mode-switch-v4 #tab_manual.text-white) b{
  color:#ffb64a;
  border-color:rgba(255,169,47,.2);
  box-shadow:0 0 12px rgba(255,159,31,.06);
}

@media(max-width:700px){
  .mode-switch-v4{height:44px;margin-bottom:9px}
}

/* ===== HMI V13.11 — ŚWIATŁO / MIXER dopasowane do START/STOP i trybu pracy ===== */
.extra-grid-v4{
  gap:8px;
}
.extra-grid-v4 button{
  position:relative;
  height:66px;
  padding:0 13px;
  display:grid;
  grid-template-columns:36px 1fr 12px;
  align-items:center;
  gap:10px;
  overflow:hidden;
  border:1px solid rgba(111,140,164,.20)!important;
  border-radius:12px;
  background:linear-gradient(145deg,#0b141e,#070e16)!important;
  color:#dbe6ee!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 8px 20px rgba(0,0,0,.18)!important;
  font-weight:950;
  letter-spacing:.07em;
  cursor:pointer;
  transition:transform .12s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.extra-grid-v4 button::after{
  content:"";
  position:absolute;
  left:15%;
  right:15%;
  bottom:0;
  height:1px;
  opacity:.38;
  background:linear-gradient(90deg,transparent,rgba(93,198,240,.48),transparent);
  transition:opacity .18s ease,background .18s ease;
}
.extra-grid-v4 button i{
  width:34px;
  height:34px;
  margin:0!important;
  display:grid;
  place-items:center;
  border:1px solid rgba(113,143,167,.20);
  border-radius:9px;
  background:linear-gradient(145deg,#101c28,#0a121b);
  color:#71879a!important;
  font-size:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  transition:transform .12s ease,color .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.extra-grid-v4 button span{
  justify-self:start;
  font-size:10px;
  font-weight:950;
  letter-spacing:.10em;
  color:#dbe6ee;
  text-shadow:0 1px 3px rgba(0,0,0,.65);
}
.extra-grid-v4 button .dot-v4{
  justify-self:end;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#435464!important;
  box-shadow:0 0 0 3px rgba(67,84,100,.10)!important;
  transition:background .18s ease,box-shadow .18s ease;
}
.extra-grid-v4 button:hover{
  transform:translateY(-1px);
  border-color:rgba(121,172,203,.34)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 24px rgba(0,0,0,.23),0 0 16px rgba(53,183,225,.05)!important;
}
.extra-grid-v4 button:active{
  transform:translateY(1px) scale(.988);
  box-shadow:inset 0 2px 9px rgba(0,0,0,.35),0 4px 11px rgba(0,0,0,.22)!important;
}
.extra-grid-v4 button:active i{transform:scale(.95)}
.extra-grid-v4 button:focus-visible{
  outline:2px solid rgba(99,220,255,.65);
  outline-offset:2px;
}

/* ŚWIATŁO — ciepły bursztynowy stan aktywny. */
#btn_light.active{
  border-color:rgba(255,177,54,.52)!important;
  background:linear-gradient(145deg,#17140e,#0d1013)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 20px rgba(255,159,31,.13),0 8px 22px rgba(0,0,0,.20)!important;
}
#btn_light.active::after{
  opacity:.9;
  background:linear-gradient(90deg,transparent,rgba(255,177,59,.82),transparent);
}
#btn_light.active i{
  color:#ffd477!important;
  border-color:rgba(255,177,54,.58)!important;
  background:linear-gradient(145deg,rgba(83,55,15,.92),rgba(35,28,13,.95))!important;
  box-shadow:0 0 16px rgba(255,170,43,.19),inset 0 1px 0 rgba(255,255,255,.05)!important;
  text-shadow:0 0 10px rgba(255,196,82,.55);
}
#btn_light.active span{color:#ffe4ad}
#btn_light.active .dot-v4{
  background:#ffb13d!important;
  box-shadow:0 0 11px rgba(255,177,61,.95),0 0 0 3px rgba(255,177,61,.12)!important;
}

/* MIXER — zielono-cyjanowy stan aktywny. */
#btn_mixer.active{
  border-color:rgba(52,220,191,.48)!important;
  background:linear-gradient(145deg,#0c1819,#081215)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 20px rgba(42,216,190,.12),0 8px 22px rgba(0,0,0,.20)!important;
}
#btn_mixer.active::after{
  opacity:.9;
  background:linear-gradient(90deg,transparent,rgba(74,232,205,.78),transparent);
}
#btn_mixer.active i{
  color:#74f2d7!important;
  border-color:rgba(52,220,191,.54)!important;
  background:linear-gradient(145deg,rgba(15,67,61,.92),rgba(7,31,34,.95))!important;
  box-shadow:0 0 16px rgba(45,218,187,.18),inset 0 1px 0 rgba(255,255,255,.05)!important;
  text-shadow:0 0 10px rgba(83,238,210,.5);
}
#btn_mixer.active span{color:#c7fff2}
#btn_mixer.active .dot-v4{
  background:#35e3bd!important;
  box-shadow:0 0 11px rgba(53,227,189,.92),0 0 0 3px rgba(53,227,189,.11)!important;
}

@media(max-width:700px){
  .extra-grid-v4 button{height:62px;padding:0 11px;grid-template-columns:33px 1fr 11px;gap:8px}
  .extra-grid-v4 button i{width:31px;height:31px;font-size:14px}
}

/* ===== HMI V13.12 — pełnoekranowa historia temperatur ===== */
.chart-panel-fullscreen-ready-v14{position:relative}
.chart-titlebar-v14{display:flex;align-items:center;justify-content:space-between;min-height:42px}
.chart-fullscreen-trigger-v14{
  width:100%;border:0;background:transparent;text-align:left;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  transition:color .18s ease,background .18s ease;
}
.chart-fullscreen-trigger-v14:hover{color:#e7f7ff;background:rgba(40,199,244,.035)}
.chart-fullscreen-trigger-v14:active{transform:translateY(1px)}
.chart-expand-hint-v14{
  display:inline-flex;align-items:center;gap:6px;color:#62879d;font-size:8px;
  font-weight:900;letter-spacing:.1em;white-space:nowrap;
}
.chart-expand-hint-v14 i{color:#28c7f4;margin:0}
.chart-fullscreen-close-v14{
  display:none;flex:0 0 auto;align-items:center;gap:8px;margin-right:14px;
  height:36px;padding:0 13px;border-radius:9px;border:1px solid rgba(40,199,244,.28);
  background:linear-gradient(145deg,rgba(8,20,31,.96),rgba(5,13,22,.96));
  color:#dcebf3;font-size:9px;font-weight:950;letter-spacing:.08em;cursor:pointer;
  box-shadow:0 0 18px rgba(40,199,244,.06);transition:.18s ease;
}
.chart-fullscreen-close-v14 i{color:#28c7f4}
.chart-fullscreen-close-v14:hover{border-color:rgba(40,199,244,.58);box-shadow:0 0 22px rgba(40,199,244,.13)}
.chart-fullscreen-close-v14:active{transform:translateY(1px) scale(.99)}

body.chart-fullscreen-open-v14{overflow:hidden!important}
.chart-panel-v4.chart-fullscreen-active-v14{
  position:fixed!important;inset:0!important;z-index:10000!important;margin:0!important;
  width:100vw!important;height:100vh!important;max-width:none!important;border-radius:0!important;
  background:radial-gradient(circle at 50% 0,rgba(25,77,102,.12),transparent 38%),#050a11!important;
  border:0!important;box-shadow:none!important;display:flex!important;flex-direction:column!important;
}
.chart-panel-v4.chart-fullscreen-active-v14 .chart-titlebar-v14{
  flex:0 0 62px;min-height:62px;border-bottom:1px solid rgba(120,150,180,.15);
  background:rgba(7,14,23,.94);backdrop-filter:blur(8px)
}
.chart-panel-v4.chart-fullscreen-active-v14 .chart-fullscreen-trigger-v14{width:auto;flex:1;height:100%;padding:0 20px}
.chart-panel-v4.chart-fullscreen-active-v14 .chart-fullscreen-trigger-v14>span:first-child{font-size:13px;color:#dce8f2}
.chart-panel-v4.chart-fullscreen-active-v14 .chart-expand-hint-v14{display:none}
.chart-panel-v4.chart-fullscreen-active-v14 .chart-fullscreen-close-v14{display:inline-flex}
.chart-panel-v4.chart-fullscreen-active-v14 .chart-inner{
  flex:1 1 auto!important;height:auto!important;min-height:0!important;padding:18px 24px 24px!important;
}
.chart-panel-v4.chart-fullscreen-active-v14 .chart-inner canvas{width:100%!important;height:100%!important}

@media(max-width:700px){
  .chart-expand-hint-v14{font-size:0;gap:0}.chart-expand-hint-v14 i{font-size:12px}
  .chart-panel-v4.chart-fullscreen-active-v14 .chart-titlebar-v14{flex-basis:54px;min-height:54px}
  .chart-panel-v4.chart-fullscreen-active-v14 .chart-fullscreen-trigger-v14{padding:0 12px}
  .chart-panel-v4.chart-fullscreen-active-v14 .chart-fullscreen-close-v14{margin-right:8px;padding:0 10px}
  .chart-panel-v4.chart-fullscreen-active-v14 .chart-fullscreen-close-v14 span{display:none}
  .chart-panel-v4.chart-fullscreen-active-v14 .chart-inner{padding:10px 8px 12px!important}
}

/* ===== HMI V13.13 — stałe menu boczne i górna belka na desktopie ===== */
@media (min-width:901px){
  /* Menu pozostaje cały czas widoczne podczas przewijania dashboardu. */
  .app-sidebar{
    position:fixed!important;
    left:0;
    top:0;
    bottom:0;
    height:100vh;
    min-height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
    z-index:30;
  }

  /* Po position:fixed sidebar nie zajmuje miejsca w layoucie — rezerwujemy je tutaj. */
  .app-main{
    margin-left:232px;
    width:calc(100% - 232px);
  }

  /* Górna belka przewija się do krawędzi ekranu i następnie zostaje na miejscu. */
  .topbar,
  .topbar-v4{
    position:sticky;
    top:0;
    z-index:25;
    background:rgba(8,12,20,.94);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 8px 24px rgba(0,0,0,.16);
  }
}

/* W pośredniej szerokości desktopowej (do 1200 px) sidebar ma 200 px. */
@media (min-width:901px) and (max-width:1200px){
  .app-main{
    margin-left:200px;
    width:calc(100% - 200px);
  }
}

/* ===== HMI V13.14 — górna belka naprawdę stała na desktopie ===== */
@media (min-width:1201px){
  .app-main{
    padding-top:88px!important;
  }

  .topbar,
  .topbar-v4{
    position:fixed!important;
    top:0!important;
    left:257px!important;   /* 232px sidebar + 25px odstępu */
    right:25px!important;
    z-index:40!important;
    margin:0!important;
    background:rgba(8,12,20,.96)!important;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 8px 24px rgba(0,0,0,.18);
  }
}

@media (min-width:901px) and (max-width:1200px){
  .app-main{
    padding-top:88px!important;
  }

  .topbar,
  .topbar-v4{
    position:fixed!important;
    top:0!important;
    left:218px!important;   /* 200px sidebar + 18px odstępu */
    right:18px!important;
    z-index:40!important;
    margin:0!important;
    background:rgba(8,12,20,.96)!important;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 8px 24px rgba(0,0,0,.18);
  }
}

/* ===== HMI V13.15 — PARAMETRY ===== */
.parameters-view-v15{--p15-cyan:#32d5ff;--p15-green:#31e4b0;--p15-amber:#ffad36;--p15-red:#ff5364;--p15-purple:#bb78ff;color:#e9f2f8}
.parameters-shell-v15{max-width:1480px;margin:0 auto 28px}
.parameters-hero-v15{min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;margin-bottom:14px;border:1px solid rgba(106,145,175,.18);border-radius:14px;background:linear-gradient(135deg,rgba(11,22,33,.96),rgba(7,13,21,.96));box-shadow:0 18px 45px rgba(0,0,0,.16)}
.parameters-kicker-v15{display:flex;align-items:center;gap:8px;color:#6f8ba1;font-size:9px;font-weight:900;letter-spacing:.15em}.parameters-kicker-v15 i{color:var(--p15-cyan)}
.parameters-hero-v15 h2{margin:5px 0 3px;font-size:25px;line-height:1;color:#f7fbff;font-weight:950;letter-spacing:-.02em}.parameters-hero-v15 p{margin:0;color:#607387;font-size:11px}
.parameters-live-v15{display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;border:1px solid rgba(49,228,176,.18);border-radius:9px;background:rgba(8,23,22,.72);color:#60efc5;font-size:9px;font-weight:950;letter-spacing:.12em}.parameters-live-v15 span{width:7px;height:7px;border-radius:50%;background:var(--p15-green);box-shadow:0 0 12px var(--p15-green)}
.parameters-grid-v15{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;align-items:start}.param-panel-v15{grid-column:span 4;min-width:0;padding:14px;border:1px solid rgba(108,143,170,.16);border-radius:13px;background:linear-gradient(145deg,rgba(11,20,30,.97),rgba(7,13,21,.97));box-shadow:0 14px 34px rgba(0,0,0,.15)}.param-panel-wide-v15{grid-column:span 7}.param-process-panel-v15{grid-column:span 5}.param-end-panel-v15{grid-column:span 8}.param-system-panel-v15{grid-column:span 4}
.param-panel-head-v15{display:flex;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid rgba(110,145,172,.10)}.param-panel-head-v15>div:last-child{display:flex;flex-direction:column;gap:2px}.param-panel-head-v15 span{color:#60758a;font-size:8px;font-weight:950;letter-spacing:.14em}.param-panel-head-v15 strong{color:#e6eef5;font-size:13px;font-weight:900}.param-panel-icon-v15{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;border:1px solid rgba(72,207,245,.24);background:rgba(25,155,190,.08);color:var(--p15-cyan)}.param-panel-icon-v15.amber{color:var(--p15-amber);border-color:rgba(255,173,54,.22);background:rgba(255,173,54,.07)}.param-panel-icon-v15.green{color:var(--p15-green);border-color:rgba(49,228,176,.22);background:rgba(49,228,176,.07)}.param-panel-icon-v15.red{color:#ff7784;border-color:rgba(255,83,100,.22);background:rgba(255,83,100,.07)}.param-panel-icon-v15.purple{color:#c56cff;border-color:rgba(197,108,255,.24);background:rgba(197,108,255,.08)}
.apparatus-config-grid-v15{display:grid;grid-template-columns:1fr 1fr;gap:10px}.config-choice-v15{padding:13px;border:1px solid rgba(113,147,172,.12);border-radius:11px;background:#09121b}.config-choice-copy-v15>span{display:block;color:#556c81;font-size:8px;font-weight:950;letter-spacing:.14em}.config-choice-copy-v15 strong{display:block;margin-top:3px;color:#dce6ee;font-size:12px}.config-choice-copy-v15 small{display:block;margin-top:4px;min-height:28px;color:#53677b;font-size:9px;line-height:1.45}
.dual-toggle-v15{display:block;margin-top:11px;cursor:pointer}.dual-toggle-v15 input{position:absolute;opacity:0;pointer-events:none}.dual-toggle-track-v15{position:relative;height:47px;padding:3px;display:grid;grid-template-columns:1fr 1fr;align-items:center;border:1px solid rgba(104,139,165,.18);border-radius:10px;background:#050b12;overflow:hidden}.dual-toggle-option-v15{position:relative;z-index:2;height:39px;display:flex;align-items:center;justify-content:center;gap:6px;color:#60768a;font-size:9px;font-weight:950;letter-spacing:.04em;transition:.2s}.dual-toggle-slider-v15{position:absolute;z-index:1;left:3px;top:3px;bottom:3px;width:calc(50% - 3px);border:1px solid rgba(49,207,248,.35);border-radius:8px;background:linear-gradient(145deg,rgba(18,65,83,.75),rgba(7,29,42,.9));box-shadow:0 0 18px rgba(44,205,246,.08);transition:transform .24s ease,border-color .24s,box-shadow .24s}.dual-toggle-v15 input:not(:checked)~.dual-toggle-track-v15 .off{color:#dff6ff}.dual-toggle-v15 input:checked~.dual-toggle-track-v15 .on{color:#dffdf5}.dual-toggle-v15 input:checked~.dual-toggle-track-v15 .dual-toggle-slider-v15{transform:translateX(100%);border-color:rgba(48,224,176,.38);background:linear-gradient(145deg,rgba(15,74,65,.78),rgba(6,34,34,.92));box-shadow:0 0 18px rgba(48,224,176,.10)}
.process-mode-grid-v15{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.process-mode-v15{min-height:95px;padding:10px 7px;border:1px solid rgba(105,139,165,.14);border-radius:10px;background:#08111a;color:#667b8f;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:.18s}.process-mode-v15 i{font-size:18px}.process-mode-v15 span{font-size:9px;font-weight:950;letter-spacing:.05em}.process-mode-v15 small{color:#495d70;font-size:7px}.process-mode-v15:hover{border-color:rgba(49,201,244,.28);transform:translateY(-1px)}.process-mode-v15.active{color:#dff7ff;border-color:rgba(49,209,249,.42);background:linear-gradient(145deg,rgba(10,38,51,.96),rgba(6,21,31,.96));box-shadow:0 0 20px rgba(44,201,244,.08),inset 0 1px 0 rgba(255,255,255,.025)}.process-mode-v15.active i{color:var(--p15-cyan);text-shadow:0 0 10px rgba(49,213,255,.45)}.process-mode-v15.active small{color:#7190a5}.process-mode-v15:active{transform:translateY(1px) scale(.99)}
.mash-thermostat-v15{display:grid;grid-template-columns:72px 1fr;gap:13px;align-items:center;margin-top:11px;padding:13px;border:1px solid rgba(255,173,54,.28);border-radius:12px;background:radial-gradient(circle at 12% 50%,rgba(255,159,31,.11),transparent 35%),#09121a;box-shadow:0 0 24px rgba(255,159,31,.05);transition:.2s}.mash-thermostat-v15.is-hidden{display:none}.thermostat-icon-v15{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,175,55,.38);background:linear-gradient(145deg,rgba(76,46,10,.85),rgba(28,20,10,.92));color:#ffb43f;font-size:26px;box-shadow:inset 0 0 0 7px rgba(255,173,54,.04),0 0 18px rgba(255,159,31,.08)}.thermostat-main-v15>span{color:#806a48;font-size:8px;font-weight:950;letter-spacing:.13em}.thermostat-value-v15{display:flex;align-items:baseline;gap:4px;margin:3px 0 5px}.thermostat-value-v15 input{width:92px;border:0;background:transparent;color:#ffad36;font:950 31px/1 ui-monospace,monospace;outline:none;padding:0}.thermostat-value-v15 b{color:#ffbd5d;font-size:13px}.thermostat-main-v15 input[type=range]{width:100%;margin:1px 0;accent-color:#ffad36}.thermostat-scale-v15{display:flex;justify-content:space-between;color:#506274;font-size:7px}.thermostat-scale-v15 span:nth-child(2){color:#765f3f;font-weight:900;letter-spacing:.08em}
.param-fields-v15{display:grid;grid-template-columns:1fr 1fr;gap:9px}.param-field-v15{display:block}.param-field-v15>span,.probe-field-v15>span{display:block;margin-bottom:5px;color:#708296;font-size:8px;font-weight:850;letter-spacing:.035em}.param-field-v15>div,.probe-field-v15>div{height:39px;display:flex;align-items:center;border:1px solid rgba(109,141,166,.14);border-radius:8px;background:#071019;overflow:hidden;transition:.15s}.param-field-v15>div:focus-within,.probe-field-v15>div:focus-within{border-color:rgba(49,204,244,.38);box-shadow:0 0 0 2px rgba(49,204,244,.05)}.param-field-v15 input,.probe-field-v15 input{min-width:0;width:100%;height:100%;padding:0 9px;border:0;outline:none;background:transparent;color:#dce8f0;font:800 14px ui-monospace,monospace}.param-field-v15 em,.probe-field-v15 em{padding-right:9px;color:#536a7e;font-size:8px;font-style:normal;font-weight:850}
.settings-switch-list-v15{display:flex;flex-direction:column;gap:8px}.settings-switch-v15{min-height:54px;padding:9px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(107,141,166,.12);border-radius:9px;background:#08111a;cursor:pointer}.settings-switch-v15>span{display:grid;grid-template-columns:26px 1fr;grid-template-rows:auto auto;align-items:center}.settings-switch-v15>span>i{grid-row:1/3;color:#657d91}.settings-switch-v15 b{color:#d4dfe8;font-size:9px}.settings-switch-v15 small{color:#53677a;font-size:7px}.settings-switch-v15 input{position:absolute;opacity:0}.switch-pill-v15{position:relative;flex:0 0 37px;width:37px;height:20px;border-radius:20px;background:#1b2935;border:1px solid #304150;transition:.2s}.switch-pill-v15:after{content:"";position:absolute;width:14px;height:14px;left:2px;top:2px;border-radius:50%;background:#718293;transition:.2s}.settings-switch-v15 input:checked~.switch-pill-v15{background:rgba(25,113,91,.55);border-color:rgba(49,228,176,.45);box-shadow:0 0 13px rgba(49,228,176,.08)}.settings-switch-v15 input:checked~.switch-pill-v15:after{transform:translateX(17px);background:#58f0c2;box-shadow:0 0 9px rgba(49,228,176,.55)}
.probe-grid-v15{display:grid;grid-template-columns:1fr 1fr;gap:9px}.probe-field-v15{display:block;padding:9px;border:1px solid rgba(104,140,165,.10);border-radius:9px;background:#08111a}.probe-field-v15>span{color:#6a8094;font-weight:950;letter-spacing:.07em}
.end-condition-group-v15{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:10px}.end-condition-group-v15+.end-condition-group-v15{padding-top:11px;border-top:1px solid rgba(105,139,165,.10)}.condition-label-v15{grid-column:1/-1;display:flex;align-items:center;gap:7px;color:#607589;font-size:8px;font-weight:900;letter-spacing:.08em}.condition-label-v15 span{min-width:31px;padding:4px 6px;border-radius:5px;text-align:center;font-size:7px}.condition-label-v15.and span{color:#6ff0cb;background:rgba(49,228,176,.09);border:1px solid rgba(49,228,176,.18)}.condition-label-v15.or span{color:#ffb45c;background:rgba(255,173,54,.09);border:1px solid rgba(255,173,54,.18)}
.system-danger-v15{display:flex;flex-direction:column;gap:13px}.system-danger-copy-v15{display:grid;grid-template-columns:39px 1fr;gap:10px;align-items:center;padding:11px;border:1px solid rgba(255,83,100,.12);border-radius:10px;background:rgba(39,10,17,.28)}.system-danger-copy-v15>i{width:39px;height:39px;display:grid;place-items:center;border-radius:9px;background:rgba(255,83,100,.08);color:#ff6574}.system-danger-copy-v15 strong{display:block;color:#f1dce0;font-size:10px}.system-danger-copy-v15 span{display:block;margin-top:3px;color:#775b63;font-size:8px;line-height:1.45}.restart-button-v15{height:45px;border:1px solid rgba(255,83,100,.38);border-radius:9px;background:linear-gradient(145deg,#241017,#150b10);color:#ff8691;font-size:9px;font-weight:950;letter-spacing:.07em;cursor:pointer;box-shadow:0 0 18px rgba(255,83,100,.04);transition:.18s}.restart-button-v15 i{margin-right:6px}.restart-button-v15:hover{border-color:rgba(255,83,100,.65);color:#ffdce0;box-shadow:0 0 22px rgba(255,83,100,.10)}.restart-button-v15:active{transform:translateY(1px) scale(.99)}
.restart-modal-v15{position:fixed;z-index:120;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(1,5,9,.76);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.restart-modal-v15.open{display:flex}.restart-dialog-v15{width:min(430px,100%);padding:24px;border:1px solid rgba(255,83,100,.28);border-radius:15px;background:linear-gradient(145deg,#111923,#080e15);text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.62),0 0 35px rgba(255,83,100,.07)}.restart-warning-icon-v15{width:58px;height:58px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:rgba(255,83,100,.08);border:1px solid rgba(255,83,100,.24);color:#ff6574;font-size:22px;box-shadow:0 0 20px rgba(255,83,100,.07)}.restart-dialog-kicker-v15{color:#8c5d67;font-size:8px;font-weight:950;letter-spacing:.13em}.restart-dialog-v15 h3{margin:6px 0 7px;color:#fff1f3;font-size:20px}.restart-dialog-v15 p{margin:0 auto;max-width:340px;color:#778899;font-size:10px;line-height:1.6}.restart-dialog-actions-v15{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:19px}.restart-dialog-actions-v15 button{height:42px;border-radius:9px;font-size:9px;font-weight:950;letter-spacing:.06em;cursor:pointer}.restart-cancel-v15{border:1px solid rgba(110,143,168,.18);background:#0a121b;color:#8495a5}.restart-confirm-v15{border:1px solid rgba(255,83,100,.42);background:linear-gradient(145deg,#33131b,#200c12);color:#ff939d;box-shadow:0 0 18px rgba(255,83,100,.06)}.restart-dialog-actions-v15 button:active{transform:translateY(1px) scale(.99)}

@media(max-width:1180px){.param-panel-v15,.param-panel-wide-v15,.param-process-panel-v15,.param-end-panel-v15,.param-system-panel-v15{grid-column:span 6}}
@media(max-width:700px){.parameters-shell-v15{margin:0 0 18px}.parameters-hero-v15{min-height:auto;padding:13px;margin-bottom:8px}.parameters-hero-v15 h2{font-size:20px}.parameters-hero-v15 p,.parameters-live-v15{display:none}.parameters-grid-v15{display:flex;flex-direction:column;gap:8px}.param-panel-v15{width:100%;padding:11px}.apparatus-config-grid-v15{grid-template-columns:1fr}.process-mode-grid-v15{grid-template-columns:1fr 1fr 1fr}.process-mode-v15{min-height:82px}.process-mode-v15 small{display:none}.mash-thermostat-v15{grid-template-columns:55px 1fr;padding:10px}.thermostat-icon-v15{width:50px;height:50px;font-size:21px}.thermostat-value-v15 input{font-size:27px}.param-fields-v15,.probe-grid-v15{grid-template-columns:1fr 1fr}.end-condition-group-v15{grid-template-columns:1fr 1fr}.restart-dialog-actions-v15{grid-template-columns:1fr}}

/* ===== HMI V13.16 — czytelniejsza typografia zakładki Parametry ===== */
/* Tylko wielkości tekstów; bez zmiany układu, wymiarów pól i logiki. */
.parameters-view-v15 .param-panel-head-v15 span{font-size:10px}
.parameters-view-v15 .param-panel-head-v15 strong{font-size:15px}

.parameters-view-v15 .config-choice-copy-v15>span{font-size:10px}
.parameters-view-v15 .config-choice-copy-v15 strong{font-size:14px}
.parameters-view-v15 .config-choice-copy-v15 small{font-size:10px}
.parameters-view-v15 .dual-toggle-option-v15{font-size:11px}

.parameters-view-v15 .process-mode-v15 span{font-size:11px}
.parameters-view-v15 .process-mode-v15 small{font-size:9px}
.parameters-view-v15 .thermostat-main-v15>span{font-size:10px}
.parameters-view-v15 .thermostat-scale-v15{font-size:9px}

.parameters-view-v15 .param-field-v15>span,
.parameters-view-v15 .probe-field-v15>span{
  font-size:10px;
  line-height:1.25;
  margin-bottom:6px;
}
.parameters-view-v15 .param-field-v15 em,
.parameters-view-v15 .probe-field-v15 em{font-size:9px}

.parameters-view-v15 .settings-switch-v15 b{font-size:11px}
.parameters-view-v15 .settings-switch-v15 small{font-size:9px}
.parameters-view-v15 .condition-label-v15{font-size:10px}
.parameters-view-v15 .condition-label-v15 span{font-size:9px}

.parameters-view-v15 .system-danger-copy-v15 strong{font-size:12px}
.parameters-view-v15 .system-danger-copy-v15 span{font-size:10px}
.parameters-view-v15 .restart-button-v15{font-size:11px}
.parameters-view-v15 .restart-dialog-kicker-v15{font-size:10px}
.parameters-view-v15 .restart-dialog-v15 p{font-size:12px}
.parameters-view-v15 .restart-dialog-actions-v15 button{font-size:11px}

@media(max-width:700px){
  .parameters-view-v15 .param-field-v15>span,
  .parameters-view-v15 .probe-field-v15>span{font-size:10px}
  .parameters-view-v15 .settings-switch-v15 b{font-size:10px}
  .parameters-view-v15 .settings-switch-v15 small{font-size:8px}
}

/* ===== HMI V13.17 — Parametry: PODSTAWOWE / ZAAWANSOWANE ===== */
.parameters-tabs-v17{
  display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 13px;
  padding:5px;border:1px solid rgba(100,139,167,.16);border-radius:13px;
  background:rgba(5,11,18,.88);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)
}
.parameters-tab-v17{
  position:relative;min-height:62px;padding:10px 44px 10px 13px;border:1px solid transparent;border-radius:10px;
  display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;text-align:left;
  background:transparent;color:#60758a;cursor:pointer;transition:.18s ease
}
.parameters-tab-v17>i{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:#0b1621;border:1px solid rgba(102,140,167,.14);color:#668096}
.parameters-tab-v17 span{display:flex;flex-direction:column;gap:2px}.parameters-tab-v17 b{font-size:12px;letter-spacing:.07em}.parameters-tab-v17 small{font-size:9px;color:#536779}
.parameters-tab-v17 em{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-style:normal;color:#7c633d;opacity:.8}
.parameters-tab-v17:hover{border-color:rgba(51,204,246,.18);background:rgba(22,52,68,.16)}
.parameters-tab-v17.active{border-color:rgba(52,209,249,.34);background:linear-gradient(145deg,rgba(12,43,57,.88),rgba(7,24,34,.9));box-shadow:0 0 20px rgba(44,201,244,.07),inset 0 1px 0 rgba(255,255,255,.025);color:#e6f8ff}
.parameters-tab-v17.active>i{color:#4bdfff;border-color:rgba(64,217,255,.30);background:rgba(14,63,79,.58);box-shadow:0 0 15px rgba(50,213,255,.08)}
.parameters-tab-v17.advanced.active{border-color:rgba(255,174,54,.35);background:linear-gradient(145deg,rgba(60,39,11,.80),rgba(26,20,11,.9));box-shadow:0 0 20px rgba(255,173,54,.06),inset 0 1px 0 rgba(255,255,255,.025)}
.parameters-tab-v17.advanced.active>i{color:#ffc66c;border-color:rgba(255,180,65,.32);background:rgba(76,47,12,.52)}
.parameters-tab-v17.advanced.active em{color:#ffb64c}.parameters-tab-v17:active{transform:translateY(1px) scale(.998)}

.param-tab-content-v17{display:none}.param-tab-content-v17.active{display:grid}
.param-work-panel-v17{grid-column:span 5}.param-advanced-small-v17{grid-column:span 4}.param-buffer-protection-v17{grid-column:span 7}.param-cooling-alarm-v17{grid-column:span 5}.param-factory-panel-v17{grid-column:span 12}

.working-heaters-v17{margin-top:12px;padding-top:11px;border-top:1px solid rgba(103,139,165,.10)}
.working-heaters-title-v17{display:flex;align-items:center;gap:9px;margin-bottom:8px;color:#6e8497}.working-heaters-title-v17>i{color:#ffad36}.working-heaters-title-v17 span{display:flex;flex-direction:column;gap:2px}.working-heaters-title-v17 b{color:#dce7ef;font-size:11px}.working-heaters-title-v17 small{color:#536779;font-size:9px;line-height:1.4}
.working-heaters-grid-v17{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.working-heater-toggle-v17{min-height:62px;padding:9px 10px;display:grid;grid-template-columns:36px 1fr 38px;gap:9px;align-items:center;border:1px solid rgba(106,141,166,.13);border-radius:9px;background:#08111a;cursor:pointer;transition:.16s}
.working-heater-toggle-v17:hover{border-color:rgba(255,173,54,.24);background:#0a141d}.working-heater-toggle-v17>input{position:absolute;opacity:0}
.heater-symbol-v17{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:#ffb54d;font:950 12px ui-monospace,monospace;border:1px solid rgba(255,173,54,.20);background:rgba(255,173,54,.06)}
.working-heater-toggle-v17>span:nth-child(2){display:flex;flex-direction:column;gap:2px}.working-heater-toggle-v17 b{color:#d9e4ec;font-size:10px}.working-heater-toggle-v17 small{color:#506579;font-size:8px}
.working-heater-toggle-v17 input:checked~.switch-pill-v15{background:rgba(118,74,17,.58);border-color:rgba(255,177,60,.48);box-shadow:0 0 13px rgba(255,173,54,.08)}.working-heater-toggle-v17 input:checked~.switch-pill-v15:after{transform:translateX(17px);background:#ffb33e;box-shadow:0 0 9px rgba(255,173,54,.55)}

.advanced-inline-warning-v17{grid-column:1/-1;display:grid;grid-template-columns:42px 1fr;gap:11px;align-items:center;padding:12px 14px;border:1px solid rgba(255,173,54,.22);border-radius:11px;background:linear-gradient(90deg,rgba(74,47,10,.24),rgba(27,20,10,.34));color:#866f4f}
.advanced-inline-warning-v17>i{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;color:#ffb64a;background:rgba(255,173,54,.08);border:1px solid rgba(255,173,54,.18)}
.advanced-inline-warning-v17 strong{display:block;color:#f2d9af;font-size:12px}.advanced-inline-warning-v17 span{display:block;margin-top:3px;font-size:10px;line-height:1.5;color:#89765b}
.advanced-param-stack-v17{display:flex;flex-direction:column;gap:10px}

.buffer-delta-layout-v17{display:grid;grid-template-columns:minmax(210px,.7fr) minmax(0,1.3fr);gap:11px;align-items:stretch}.delta-field-v17{align-self:center}
.parameter-explanation-v17{min-height:82px;padding:11px 12px;display:grid;grid-template-columns:30px 1fr;gap:9px;align-items:center;border:1px solid rgba(49,228,176,.14);border-radius:9px;background:rgba(8,34,29,.32)}.parameter-explanation-v17>i{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#53eac0;background:rgba(49,228,176,.08)}.parameter-explanation-v17 p{margin:0;color:#789487;font-size:10px;line-height:1.55}
.cooling-alarm-layout-v17{display:grid;grid-template-columns:58px 1fr;gap:11px;align-items:center}.cooling-alarm-icon-v17{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#66dcff;border:1px solid rgba(72,205,245,.25);background:radial-gradient(circle,rgba(40,199,244,.14),rgba(9,20,29,.5));font-size:20px;box-shadow:0 0 18px rgba(40,199,244,.06)}

.factory-danger-v17{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:13px;align-items:center}.factory-danger-copy-v17{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;padding:11px;border:1px solid rgba(255,83,100,.12);border-radius:10px;background:rgba(39,10,17,.28)}.factory-danger-copy-v17>i{width:42px;height:42px;display:grid;place-items:center;border-radius:9px;background:rgba(255,83,100,.08);color:#ff6574}.factory-danger-copy-v17 strong{display:block;color:#f1dce0;font-size:12px}.factory-danger-copy-v17 span{display:block;margin-top:3px;color:#86636b;font-size:10px;line-height:1.45}
.factory-reset-button-v17{height:46px;padding:0 16px;border:1px solid rgba(255,83,100,.40);border-radius:9px;background:linear-gradient(145deg,#281018,#160a0f);color:#ff8e98;font-size:10px;font-weight:950;letter-spacing:.055em;cursor:pointer;transition:.18s;white-space:nowrap}.factory-reset-button-v17 i{margin-right:7px}.factory-reset-button-v17:hover{border-color:rgba(255,83,100,.68);color:#ffe1e4;box-shadow:0 0 24px rgba(255,83,100,.09)}.factory-reset-button-v17:active{transform:translateY(1px) scale(.99)}

.advanced-warning-dialog-v17{border-color:rgba(255,173,54,.30);box-shadow:0 30px 90px rgba(0,0,0,.62),0 0 35px rgba(255,173,54,.06)}.advanced-warning-icon-v17{color:#ffb64a;background:rgba(255,173,54,.08);border-color:rgba(255,173,54,.25)}.advanced-warning-dialog-v17 .restart-dialog-kicker-v15{color:#917247}.advanced-warning-dialog-v17 h3{color:#fff4e2}.advanced-confirm-v17{border:1px solid rgba(255,173,54,.38);background:linear-gradient(145deg,#33230f,#1d160c);color:#ffc56c;box-shadow:0 0 18px rgba(255,173,54,.05)}
.factory-reset-dialog-v17{border-color:rgba(255,83,100,.36)}.factory-confirm-v17{border:1px solid rgba(255,83,100,.48);background:linear-gradient(145deg,#3a111b,#220b12);color:#ff9ca5;box-shadow:0 0 18px rgba(255,83,100,.07)}

@media(max-width:1180px){
  .param-work-panel-v17,.param-advanced-small-v17,.param-buffer-protection-v17,.param-cooling-alarm-v17,.param-factory-panel-v17{grid-column:span 6}
  .param-factory-panel-v17{grid-column:1/-1}
  .factory-danger-v17{grid-template-columns:1fr}
}
@media(max-width:700px){
  .parameters-tabs-v17{grid-template-columns:1fr 1fr;gap:5px;padding:4px}.parameters-tab-v17{min-height:54px;padding:8px;grid-template-columns:28px 1fr;gap:7px}.parameters-tab-v17>i{width:28px;height:28px}.parameters-tab-v17 b{font-size:9px}.parameters-tab-v17 small,.parameters-tab-v17 em{display:none}
  .param-tab-content-v17.active{display:flex}.working-heaters-grid-v17{grid-template-columns:1fr}.buffer-delta-layout-v17{grid-template-columns:1fr}.cooling-alarm-layout-v17{grid-template-columns:48px 1fr}.cooling-alarm-icon-v17{width:48px;height:48px}
  .advanced-inline-warning-v17{grid-template-columns:35px 1fr;padding:10px}.advanced-inline-warning-v17>i{width:35px;height:35px}.advanced-inline-warning-v17 strong{font-size:11px}.advanced-inline-warning-v17 span{font-size:9px}
  .factory-danger-v17{grid-template-columns:1fr}.factory-reset-button-v17{width:100%;white-space:normal}.working-heaters-title-v17 small{font-size:8px}
}

/* ===== HMI V13.18 — HISTORIA: zsynchronizowana oś czasu procesu ===== */
.history-view-v18{--h18-bg:#071019;--h18-panel:#0b151f;--h18-line:rgba(113,145,170,.16);--h18-text:#dce8f0;--h18-muted:#718598;--h18-cyan:#37d8f5;--h18-green:#3de0aa;--h18-amber:#ffad36;--h18-red:#ff6372}
.history-shell-v18{max-width:1480px;margin:0 auto;padding:6px 0 32px;display:grid;gap:14px}
.history-hero-v18{min-height:100px;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid var(--h18-line);border-radius:15px;background:linear-gradient(135deg,rgba(12,24,36,.97),rgba(6,13,21,.97));box-shadow:0 18px 45px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.025)}
.history-kicker-v18{display:flex;align-items:center;gap:8px;color:#5d7a90;font-size:9px;font-weight:950;letter-spacing:.17em}.history-kicker-v18 i{color:var(--h18-cyan)}
.history-hero-v18 h2{margin:6px 0 2px;font-size:25px;line-height:1.1;color:#f1f7fb;letter-spacing:-.025em}.history-hero-v18 p{margin:0;color:#718495;font-size:12px}
.history-hero-status-v18{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.history-db-live-v18,.history-logging-v18{min-height:38px;padding:0 12px;border:1px solid rgba(105,138,165,.16);border-radius:10px;background:#08121c;display:flex;align-items:center;gap:7px;font-size:9px;font-weight:900;letter-spacing:.08em;color:#8395a6}
.history-db-live-v18>span,.history-logging-v18>span{width:7px;height:7px;border-radius:50%;background:#35dfa8;box-shadow:0 0 12px rgba(53,223,168,.65)}
.history-logging-v18 b{color:#a7b5c1}.history-logging-v18 em{font-style:normal;color:#718397}.history-logging-v18.is-on{border-color:rgba(61,224,170,.25)}.history-logging-v18.is-on em{color:#65e4bd}.history-logging-v18.is-off{border-color:rgba(255,99,114,.28)}.history-logging-v18.is-off>span{background:#ff6372;box-shadow:0 0 12px rgba(255,99,114,.6)}.history-logging-v18.is-off em{color:#ff8994}
.history-toolbar-v18{min-height:58px;padding:9px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--h18-line);border-radius:13px;background:linear-gradient(145deg,#0b151f,#08111a)}
.history-range-group-v18{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.history-range-group-v18>span{margin:0 6px 0 2px;color:#617487;font-size:9px;font-weight:950;letter-spacing:.14em}
.hist-range-btn,.history-tool-btn-v18,.history-refresh-v18{height:34px;border:1px solid rgba(111,145,171,.17);border-radius:8px;background:#09131e;color:#8193a4;font-size:10px;font-weight:900;letter-spacing:.04em;cursor:pointer;transition:.16s ease}.hist-range-btn{min-width:42px;padding:0 10px}.hist-range-btn:hover,.history-tool-btn-v18:hover{color:#dbeaf2;border-color:rgba(55,216,245,.30)}.hist-range-btn.active{color:#dffaff;border-color:rgba(55,216,245,.48);background:linear-gradient(145deg,rgba(20,78,91,.52),rgba(7,30,43,.7));box-shadow:0 0 18px rgba(55,216,245,.08)}
.history-tool-btn-v18{padding:0 11px}.history-tool-btn-v18 i{margin-right:5px;color:#55dff7}.history-refresh-v18{padding:0 13px;color:#9eefff;border-color:rgba(55,216,245,.28);display:flex;align-items:center;gap:7px}.history-refresh-v18:hover{border-color:rgba(55,216,245,.55);box-shadow:0 0 18px rgba(55,216,245,.10)}
.history-custom-range-v18{padding:14px;display:grid;grid-template-columns:1fr 1fr 190px;gap:10px;align-items:end;border:1px solid var(--h18-line);border-radius:13px;background:#09131d}.history-custom-range-v18.hidden{display:none}.history-custom-range-v18 label>span{display:block;margin-bottom:6px;color:#718598;font-size:9px;font-weight:900;letter-spacing:.08em}.history-custom-range-v18 input{width:100%;height:39px;padding:0 11px;border-radius:8px;border:1px solid rgba(112,144,169,.19);background:#06101a;color:#dce8ef;outline:none}.history-custom-range-v18 input:focus{border-color:rgba(55,216,245,.48);box-shadow:0 0 0 3px rgba(55,216,245,.06)}.history-custom-range-v18 button{height:39px;border:1px solid rgba(55,216,245,.34);border-radius:8px;background:linear-gradient(145deg,#0d3541,#09222f);color:#c8f8ff;font-size:9px;font-weight:950;letter-spacing:.06em;cursor:pointer}
.history-series-panel-v18,.history-chart-panel-v18{border:1px solid var(--h18-line);border-radius:14px;background:linear-gradient(145deg,rgba(11,21,31,.98),rgba(7,15,23,.98));box-shadow:0 16px 42px rgba(0,0,0,.12)}
.history-series-head-v18{min-height:55px;padding:10px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(111,145,171,.10)}.history-series-head-v18>div span{display:block;color:#65798b;font-size:8px;font-weight:950;letter-spacing:.14em}.history-series-head-v18>div strong{display:block;margin-top:3px;color:#d7e3eb;font-size:12px}.history-series-head-v18 small{color:#5e7487;font-size:9px}.history-series-head-v18 small i{color:#42d7f0;margin-right:4px}
.history-series-groups-v18{padding:12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.history-series-group-v18{min-width:0;padding:10px;border:1px solid rgba(110,142,167,.12);border-radius:10px;background:#08121b}.history-series-title-v18{display:flex;align-items:center;gap:6px;margin-bottom:9px;color:#8295a6;font-size:8px;font-weight:950;letter-spacing:.08em}.history-series-title-v18>span{white-space:nowrap}.history-series-title-v18 em{margin-left:auto;font-style:normal;color:#536a7c;font-size:7px}.history-series-title-v18.hot i{color:#ff6b72}.history-series-title-v18.cool i{color:#42e8ff}.history-series-title-v18.heater i{color:#ffad36}.history-series-title-v18.valve i{color:#55e698}
.history-chip-grid-v18{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.history-series-chip-v18{height:34px;position:relative;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid rgba(111,145,171,.12);border-radius:8px;background:#07101a;color:#627688;font-size:8px;font-weight:950;letter-spacing:.04em;cursor:pointer;user-select:none;transition:.15s ease;overflow:hidden}.history-series-chip-v18 input{position:absolute;opacity:0;pointer-events:none}.history-series-chip-v18>i{width:7px;height:7px;border-radius:50%;background:#344552;box-shadow:none}.history-series-chip-v18:has(input:checked){color:#d9e8ef;border-color:color-mix(in srgb,var(--series) 45%,transparent);background:color-mix(in srgb,var(--series) 7%,#07101a);box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--series) 35%,transparent)}.history-series-chip-v18:has(input:checked)>i{background:var(--series);box-shadow:0 0 9px var(--series)}.history-series-chip-v18:hover{border-color:color-mix(in srgb,var(--series) 38%,rgba(111,145,171,.12));color:#e5f0f5}
.history-chart-panel-v18{overflow:hidden}.history-chart-head-v18{min-height:58px;padding:10px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(111,145,171,.1)}.history-chart-head-v18>div:first-child span{display:block;color:#627789;font-size:8px;font-weight:950;letter-spacing:.14em}.history-chart-head-v18>div:first-child strong{display:block;margin-top:3px;color:#d9e6ed;font-size:12px}.history-chart-info-v18{display:flex;align-items:center;gap:8px}.history-chart-info-v18 span,.history-chart-info-v18 b{height:29px;padding:0 9px;border:1px solid rgba(108,140,166,.13);border-radius:7px;background:#07111a;display:flex;align-items:center;color:#687d8f;font-size:8px;font-weight:900;letter-spacing:.05em}.history-chart-info-v18 b{color:#9bc8d8;font-family:ui-monospace,monospace}
.history-track-v18{padding:10px 12px 4px}.history-track-v18+.history-track-v18{border-top:1px solid rgba(110,142,167,.09);padding-top:9px}.history-track-title-v18{height:29px;display:flex;align-items:center;justify-content:space-between;gap:10px}.history-track-title-v18>span{color:#8195a6;font-size:9px;font-weight:950;letter-spacing:.10em}.history-track-title-v18>span i{width:17px;color:#58dff5}.history-track-title-v18>div{display:flex;gap:6px}.history-track-title-v18 em{font-style:normal;font-size:7px;font-weight:950;letter-spacing:.07em;border-radius:999px;padding:4px 7px;border:1px solid rgba(115,145,169,.13);color:#61778a}.history-track-title-v18 em.hot{color:#b98288;border-color:rgba(255,107,114,.18)}.history-track-title-v18 em.cool{color:#6b9dac;border-color:rgba(66,232,255,.16)}.history-track-title-v18 em.control{color:#9a866d;border-color:rgba(255,173,54,.15)}
.history-canvas-wrap-v18{position:relative;width:100%;border-radius:9px;background:linear-gradient(180deg,#071019,#060d15);border:1px solid rgba(105,138,163,.10);overflow:hidden}.temperature-track-v18 .history-canvas-wrap-v18{height:380px}.control-track-v18 .history-canvas-wrap-v18{height:205px}.history-canvas-wrap-v18 canvas{cursor:grab;touch-action:none}.history-canvas-wrap-v18 canvas.is-dragging{cursor:grabbing}
.history-navigator-v18{min-height:61px;padding:10px 13px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid rgba(110,142,167,.1);background:#071019}.history-nav-copy-v18{display:flex;align-items:center;gap:7px;color:#5d7487;font-size:8px;font-weight:800}.history-nav-copy-v18 i{color:#37d8f5}.history-nav-controls-v18{display:flex;align-items:center;gap:5px;min-width:min(720px,65%)}.history-nav-controls-v18 button{height:31px;min-width:32px;padding:0 8px;border:1px solid rgba(107,140,165,.16);border-radius:7px;background:#09141e;color:#7890a2;font-size:9px;font-weight:950;cursor:pointer}.history-nav-controls-v18 button:hover{color:#d7e9f2;border-color:rgba(55,216,245,.3)}.history-nav-controls-v18 input[type=range]{flex:1;min-width:120px;height:18px;margin:0 6px;accent-color:#37d8f5}.history-nav-controls-v18 input[type=range]:disabled{opacity:.32}.history-nav-controls-v18 .history-show-all-v18{min-width:62px;color:#9ddfeb;border-color:rgba(55,216,245,.20)}

@media(max-width:1180px){.history-series-groups-v18{grid-template-columns:1fr 1fr}.history-nav-copy-v18{display:none}.history-nav-controls-v18{min-width:100%}.temperature-track-v18 .history-canvas-wrap-v18{height:350px}}
@media(max-width:700px){.history-shell-v18{padding-top:0;gap:8px}.history-hero-v18{padding:14px;min-height:0;align-items:flex-start}.history-hero-v18 h2{font-size:19px}.history-hero-v18 p{font-size:10px}.history-hero-status-v18{display:none}.history-toolbar-v18{padding:8px;align-items:flex-start}.history-range-group-v18>span{width:100%;margin-bottom:2px}.history-refresh-v18{flex:0 0 38px;width:38px;padding:0;justify-content:center}.history-refresh-v18 span{display:none}.history-custom-range-v18{grid-template-columns:1fr}.history-series-head-v18 small{display:none}.history-series-groups-v18{grid-template-columns:1fr;padding:8px}.history-series-group-v18{padding:8px}.history-series-chip-v18{height:36px;font-size:8px}.history-chart-head-v18{padding:8px 10px;align-items:flex-start}.history-chart-info-v18{flex-direction:column;align-items:flex-end;gap:3px}.history-chart-info-v18 span,.history-chart-info-v18 b{height:23px;font-size:7px}.history-track-v18{padding:7px 6px 3px}.history-track-title-v18>div{display:none}.temperature-track-v18 .history-canvas-wrap-v18{height:330px}.control-track-v18 .history-canvas-wrap-v18{height:190px}.history-navigator-v18{padding:8px}.history-nav-controls-v18{gap:3px}.history-nav-controls-v18 button{min-width:29px;height:30px;padding:0 6px}.history-nav-controls-v18 input[type=range]{margin:0 2px}.history-nav-controls-v18 .history-show-all-v18{display:none}}

/* ===== HMI V13.21.6 — konto / kontekst / wylogowanie dostępne na telefonie =====
   W starszym mobile CSS te elementy były celowo ukryte razem z kartą urządzenia.
   Teraz chowamy tylko kartę telemetryczną urządzenia, a akcje użytkownika pozostają dostępne. */
@media (max-width: 900px) {
  .app-sidebar .sidebar-spacer {
    display: none !important;
  }

  .app-sidebar .sidebar-footer-card {
    display: flex !important;
    width: 100% !important;
    min-height: 44px;
    margin: 8px 0 0 !important;
    padding: 8px 10px !important;
  }

  .app-sidebar .side-logout {
    display: flex !important;
    width: 100%;
    min-height: 42px;
    margin-top: 5px;
    justify-content: center;
    border: 1px solid rgba(255, 83, 100, .10);
    background: rgba(255, 83, 100, .025);
  }
}

@media (max-width: 430px) {
  .app-sidebar .sidebar-footer-card {
    min-height: 42px;
    padding: 7px 9px !important;
  }

  .app-sidebar .sidebar-footer-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }

  .app-sidebar .side-logout {
    min-height: 40px;
    padding: 8px 10px;
  }
}

/* ===== HMI V13.21.7 — mobilne akcje konta na samym końcu strony =====
   Konto / zmiana kontekstu / wylogowanie są rzadko używane, więc na telefonie
   nie zajmują miejsca nad HMI. app.js przenosi te same elementy pod .app-shell. */
.mobile-account-actions {
  display: none;
}

@media (max-width: 900px) {
  /* Nadpisanie V13.21.6: w górnym mobilnym sidebarze nie pokazujemy tych akcji. */
  .app-sidebar .sidebar-footer-card,
  .app-sidebar .side-logout {
    display: none !important;
  }

  .mobile-account-actions {
    display: block;
    width: calc(100% - 20px);
    max-width: 760px;
    margin: 18px auto 26px;
    padding: 10px;
    border: 1px solid rgba(112, 145, 170, .13);
    border-radius: 13px;
    background: rgba(7, 14, 23, .72);
  }

  .mobile-account-actions[hidden] {
    display: none !important;
  }

  .mobile-account-actions-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 3px 8px;
    color: #63788b;
  }

  .mobile-account-actions-head > span {
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .12em;
  }

  .mobile-account-actions-head > span i {
    margin-right: 5px;
    color: #28c7f4;
  }

  .mobile-account-actions-head > small {
    color: #495d70;
    font-size: 8px;
  }

  .mobile-account-actions-body {
    display: grid;
    gap: 7px;
  }

  .mobile-account-actions .sidebar-footer-card {
    display: flex !important;
    width: 100% !important;
    min-height: 44px;
    margin: 0 !important;
    padding: 8px 10px !important;
  }

  .mobile-account-actions .side-logout {
    display: flex !important;
    width: 100%;
    min-height: 42px;
    margin: 0;
    justify-content: center;
    border: 1px solid rgba(255, 83, 100, .10);
    background: rgba(255, 83, 100, .025);
  }
}

@media (max-width: 430px) {
  .mobile-account-actions {
    width: calc(100% - 12px);
    margin-top: 12px;
    margin-bottom: 18px;
    padding: 8px;
  }

  .mobile-account-actions-head > small {
    display: none;
  }

  .mobile-account-actions .sidebar-footer-card {
    min-height: 42px;
    padding: 7px 9px !important;
  }

  .mobile-account-actions .sidebar-footer-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }

  .mobile-account-actions .side-logout {
    min-height: 40px;
    padding: 8px 10px;
  }
}

/* ===== HMI V13.22 — mobilna instalacja panelu na ekranie głównym ===== */
.mobile-install-panel-v22{display:none!important}

@media(max-width:900px){
  .mobile-install-panel-v22{
    display:block!important;
    grid-column:1/-1!important;
    border-color:rgba(40,199,244,.18)!important;
    background:linear-gradient(145deg,rgba(9,25,35,.96),rgba(7,15,24,.98))!important;
  }
  .mobile-install-body-v22{display:grid;gap:12px}
  .mobile-install-copy-v22{display:grid;grid-template-columns:42px 1fr;gap:11px;align-items:start}
  .mobile-install-copy-v22>i{
    width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
    color:#42dafa;background:rgba(40,199,244,.08);border:1px solid rgba(40,199,244,.14)
  }
  .mobile-install-copy-v22 strong{display:block;color:#e9f8ff;font-size:12px;margin:1px 0 4px}
  .mobile-install-copy-v22 span{display:block;color:#71879a;font-size:10px;line-height:1.45}
  .mobile-install-copy-v22 small{display:block;color:#4f7086;font-size:9px;line-height:1.4;margin-top:6px}
  .mobile-install-button-v22{
    width:100%;min-height:45px;border-radius:11px;border:1px solid rgba(45,212,191,.30);
    background:linear-gradient(135deg,rgba(25,179,201,.20),rgba(29,211,146,.15));
    color:#bffdf0;font-size:10px;font-weight:950;letter-spacing:.055em;cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);transition:.16s ease
  }
  .mobile-install-button-v22:active{transform:translateY(1px)}
  .mobile-install-button-v22:disabled{opacity:.48;cursor:default;transform:none}
}

.pwa-install-modal-v22{position:fixed;inset:0;z-index:12050;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(1,6,11,.76);backdrop-filter:blur(8px)}
.pwa-install-modal-v22.open{display:flex}
.pwa-install-dialog-v22{width:min(430px,100%);border:1px solid rgba(80,132,160,.25);border-radius:16px;background:#09131e;box-shadow:0 24px 70px rgba(0,0,0,.48);padding:18px}
.pwa-install-dialog-v22 h3{margin:0 0 7px;color:#eef9ff;font-size:16px}
.pwa-install-dialog-v22 p{margin:0;color:#8193a4;font-size:12px;line-height:1.55}
.pwa-install-dialog-v22 ol{margin:14px 0;padding-left:21px;color:#b7c5d1;font-size:12px;line-height:1.75}
.pwa-install-dialog-v22 b{color:#5ee5ff}
.pwa-install-dialog-v22 button{width:100%;min-height:42px;border:1px solid rgba(40,199,244,.22);border-radius:10px;background:rgba(40,199,244,.08);color:#a9efff;font-weight:900;font-size:11px;cursor:pointer}


/* ===== HMI V13.23 — aktywni użytkownicy (admin) ===== */
.admin-presence-nav{
  margin-top:4px;
  color:#7f9bab;
  border:1px solid rgba(45,212,191,.08);
  background:rgba(45,212,191,.025);
}
.admin-presence-nav:hover{
  color:#dffef5;
  border-color:rgba(45,212,191,.18);
  background:rgba(45,212,191,.055);
}
.admin-presence-nav>i{color:#2dd4bf!important}
.presence-nav-count{
  margin-left:auto;
  min-width:24px;
  height:20px;
  padding:0 7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(45,212,191,.20);
  background:rgba(45,212,191,.09);
  color:#74f3d4;
  font-size:9px;
  font-weight:950;
  font-family:ui-monospace,monospace;
}
.presence-nav-count.is-empty{
  color:#687a88;
  border-color:rgba(104,122,136,.16);
  background:rgba(104,122,136,.04);
}
.presence-role-badge{
  display:inline-flex;
  align-items:center;
  min-height:21px;
  padding:0 7px;
  border-radius:999px;
  border:1px solid rgba(86,145,173,.16);
  background:rgba(56,115,143,.07);
  color:#8bb7ca;
  font-size:8px;
  font-weight:950;
  letter-spacing:.07em;
}
.presence-last-seen{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#7aa99a;
  font-family:ui-monospace,monospace;
}
.presence-last-seen>i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#2dd4a3;
  box-shadow:0 0 10px rgba(45,212,163,.62);
}
.presence-refresh-button{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:9px;
  border:1px solid rgba(55,216,245,.14);
  background:rgba(55,216,245,.045);
  color:#7299aa;
  cursor:pointer;
  transition:.15s ease;
}
.presence-refresh-button:hover{
  color:#8cecff;
  border-color:rgba(55,216,245,.26);
  background:rgba(55,216,245,.08);
}
.presence-refresh-button.is-loading i{animation:presenceSpin .8s linear infinite}
@keyframes presenceSpin{to{transform:rotate(360deg)}}

/* Przycisk administracyjny ma być w desktopowym sidebarze i nie zajmować miejsca na telefonie. */
@media(max-width:900px){
  .admin-presence-nav{display:none!important}
}


/* ===== HMI V13.23.1 — presence także na mobile + telefon / komputer ===== */
.presence-client-badge{
  display:inline-flex;align-items:center;gap:6px;min-height:22px;padding:0 8px;border-radius:999px;
  border:1px solid rgba(87,128,158,.17);background:rgba(87,128,158,.055);color:#89a4b7;
  font-size:8px;font-weight:950;letter-spacing:.055em;white-space:nowrap
}
.presence-client-badge i{font-size:10px}.presence-client-badge.mobile{color:#79e6ca;border-color:rgba(45,212,191,.20);background:rgba(45,212,191,.07)}
.presence-client-badge.desktop{color:#8ecbff;border-color:rgba(74,157,229,.20);background:rgba(74,157,229,.07)}
.presence-mobile-list{display:none}

@media(max-width:900px){
  /* Przycisk Aktywni jest przenoszony przez app.js do dolnej sekcji Konto i obsługa. */
  .mobile-account-actions .admin-presence-nav{
    display:flex!important;width:100%!important;min-height:44px;margin:0!important;padding:8px 10px!important;
    align-items:center;gap:11px;border:1px solid rgba(45,212,191,.12);border-radius:10px;
    background:rgba(45,212,191,.035);color:#8ca7b7
  }
  .mobile-account-actions .admin-presence-nav>i{width:20px;text-align:center;color:#2dd4bf!important}
  .mobile-account-actions .admin-presence-nav .presence-nav-count{margin-left:auto}

  .presence-desktop-table{display:none!important}
  .presence-mobile-list{display:grid;gap:8px;padding:12px;max-height:62vh;overflow-y:auto}
  .presence-mobile-card{padding:12px;border:1px solid rgba(102,139,164,.14);border-radius:12px;background:linear-gradient(145deg,#0a141f,#071019)}
  .presence-mobile-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid rgba(107,139,164,.10)}
  .presence-mobile-card-head>div{display:flex;align-items:center;gap:7px;min-width:0}
  .presence-mobile-card-head strong{overflow:hidden;text-overflow:ellipsis;color:#e5eef4;font-size:12px;font-family:ui-monospace,monospace}
  .presence-mobile-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}
  .presence-mobile-card-grid>div{min-width:0;padding:8px;border:1px solid rgba(103,137,163,.09);border-radius:9px;background:#07111a}
  .presence-mobile-card-grid span{display:block;color:#566e81;font-size:7px;font-weight:950;letter-spacing:.10em}
  .presence-mobile-card-grid b{display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;color:#aebfca;font-size:10px;font-weight:850;font-family:ui-monospace,monospace}
  .presence-mobile-card-grid .presence-mobile-last{grid-column:1/-1}
  .presence-mobile-card-grid .presence-last-seen{display:flex!important;flex-direction:row;align-items:center;gap:6px;color:#7ed6bc}
  .presence-mobile-empty{padding:28px 12px;text-align:center;color:#53697b;font-size:11px}
}

/* ======================================================================
   HMI V13.24.0 — stan procesu + alarmy EQUINOX
   ====================================================================== */
.process-status-panel-v24{min-width:0}
.process-status-card-v24{
  min-height:92px;margin:0 10px 10px;padding:12px 13px;display:grid;
  grid-template-columns:13px minmax(0,1fr) auto;align-items:center;gap:11px;
  border:1px solid rgba(111,145,171,.14);border-radius:10px;background:#09111a;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease
}
.process-status-dot-v24{width:10px;height:10px;border-radius:50%;background:#5c6c7c;box-shadow:0 0 0 4px rgba(92,108,124,.08)}
.process-status-copy-v24{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:6px}
.process-status-copy-v24 strong{color:#d6e1e9;font-size:14px;line-height:1.25;font-weight:950;letter-spacing:.055em;text-wrap:balance}
.process-status-copy-v24 small{color:#71879a;font-size:10px;line-height:1.35;font-weight:800;letter-spacing:.025em}
.process-status-card-v24>em{align-self:start;font-style:normal;color:#4e6274;font-size:8px;font-weight:950;letter-spacing:.10em;white-space:nowrap}
.process-status-card-v24[data-level="ready"]{border-color:rgba(47,220,145,.18);background:linear-gradient(145deg,rgba(17,55,45,.35),#09111a 62%)}
.process-status-card-v24[data-level="ready"] .process-status-dot-v24{background:#2cdd91;box-shadow:0 0 14px rgba(44,221,145,.55)}
.process-status-card-v24[data-level="active"]{border-color:rgba(50,199,240,.19);background:linear-gradient(145deg,rgba(14,46,63,.45),#09111a 65%)}
.process-status-card-v24[data-level="active"] .process-status-dot-v24{background:#39d8f4;box-shadow:0 0 14px rgba(57,216,244,.52);animation:processPulseV24 1.4s ease-in-out infinite}
.process-status-card-v24[data-level="stabilizing"]{border-color:rgba(255,176,46,.22);background:linear-gradient(145deg,rgba(61,42,12,.43),#09111a 68%)}
.process-status-card-v24[data-level="stabilizing"] .process-status-dot-v24{background:#ffb02e;box-shadow:0 0 14px rgba(255,176,46,.48);animation:processPulseV24 1.05s ease-in-out infinite}
.process-status-card-v24[data-level="finished"]{border-color:rgba(126,148,168,.18)}
.process-status-card-v24[data-level="finished"] .process-status-dot-v24{background:#8da3b6;box-shadow:0 0 10px rgba(141,163,182,.28)}
.process-status-card-v24[data-level="warning"]{border-color:rgba(255,176,46,.28);background:linear-gradient(145deg,rgba(71,44,8,.5),#09111a 65%)}
.process-status-card-v24[data-level="warning"] .process-status-dot-v24{background:#ffb02e;box-shadow:0 0 14px rgba(255,176,46,.55)}
.process-status-card-v24[data-level="danger"]{border-color:rgba(255,92,109,.34);background:linear-gradient(145deg,rgba(74,16,28,.56),#09111a 66%)}
.process-status-card-v24[data-level="danger"] .process-status-dot-v24{background:#ff5c6d;box-shadow:0 0 16px rgba(255,92,109,.62)}
.process-status-card-v24[data-level="critical"]{border-color:rgba(255,49,74,.55);background:linear-gradient(145deg,rgba(100,8,24,.72),#10080c 72%);box-shadow:0 0 22px rgba(255,35,63,.12)}
.process-status-card-v24[data-level="critical"] .process-status-dot-v24{background:#ff2747;box-shadow:0 0 20px rgba(255,39,71,.8);animation:processCriticalPulseV24 .62s ease-in-out infinite}
.process-status-card-v24[data-level="critical"] strong,.process-status-card-v24[data-level="danger"] strong{color:#ffd7dc}
@keyframes processPulseV24{50%{opacity:.42;transform:scale(.82)}}
@keyframes processCriticalPulseV24{50%{opacity:.32;transform:scale(.72)}}

/* Szybki status przeniesiony z dolnego panelu nad STATUS SYSTEMU. */
.quick-side-v24 .quick-grid-v4{grid-template-columns:repeat(4,minmax(0,1fr))}
.quick-side-v24 .quick-grid-v4>div{min-width:0}
.quick-side-v24 .quick-grid-v4 b,.quick-side-v24 .quick-grid-v4 span{text-align:center;overflow-wrap:anywhere}

/* Badge w nagłówku sekcji STEROWANIE synchronizowany z tym samym stanem procesu. */
.controls-head-v4 strong.process-badge-v24{font-size:10px;line-height:1.15;text-align:right;max-width:54%;white-space:normal}
.controls-head-v4 strong.process-badge-ready{color:#32dc91}
.controls-head-v4 strong.process-badge-active{color:#45d8f5}
.controls-head-v4 strong.process-badge-stabilizing,.controls-head-v4 strong.process-badge-warning{color:#ffb02e}
.controls-head-v4 strong.process-badge-finished,.controls-head-v4 strong.process-badge-idle{color:#91a6b8}
.controls-head-v4 strong.process-badge-danger,.controls-head-v4 strong.process-badge-critical{color:#ff6678}
.system-grid-v4 b.system-alert-v24{color:#ff6678!important}

/* Globalny modal alarmowy — nie zamyka się przez tło ani ESC; potwierdzenie wyłącznie OK. */
.process-alert-modal-v24{position:fixed;inset:0;z-index:220;display:none;align-items:center;justify-content:center;padding:18px}
.process-alert-modal-v24[aria-hidden="false"]{display:flex}
.process-alert-backdrop-v24{position:absolute;inset:0;background:rgba(1,5,9,.84);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.process-alert-box-v24{position:relative;width:min(620px,100%);overflow:hidden;border:1px solid rgba(105,137,162,.24);border-radius:18px;background:linear-gradient(145deg,#101a25,#080e16);box-shadow:0 30px 100px rgba(0,0,0,.72);padding:26px 28px 24px}
.process-alert-accent-v24{position:absolute;left:0;right:0;top:0;height:4px;background:#47d9f4}
.process-alert-head-v24{display:flex;align-items:center;gap:15px;padding-top:5px}
.process-alert-icon-v24{width:54px;height:54px;flex:0 0 54px;border-radius:14px;display:grid;place-items:center;background:rgba(71,217,244,.10);border:1px solid rgba(71,217,244,.22);color:#58dff6;font-size:24px}
.process-alert-head-v24 span{display:block;color:#61788b;font-size:9px;font-weight:950;letter-spacing:.18em;margin-bottom:4px}
.process-alert-head-v24 h2{margin:0;color:#f0f5f8;font-size:23px;line-height:1.12;font-weight:950;letter-spacing:.035em}
.process-alert-message-v24{margin:20px 0 0;color:#b9c8d3;font-size:14px;line-height:1.65;font-weight:650}
.process-alert-details-v24{margin-top:14px;padding:12px 14px;border-radius:10px;border:1px solid rgba(104,139,166,.16);background:#071019;color:#d8e4eb;font-size:11px;line-height:1.55;font-weight:900;letter-spacing:.045em;white-space:pre-line}
.process-alert-audio-hint-v24{margin-top:12px;color:#8b7680;font-size:10px;line-height:1.45}
.process-alert-ack-v24{width:100%;height:52px;margin-top:22px;border:1px solid rgba(80,211,164,.28);border-radius:12px;background:linear-gradient(100deg,#20c98c,#35d9aa);color:#031812;font-size:13px;font-weight:950;letter-spacing:.075em;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;box-shadow:0 10px 30px rgba(32,201,140,.12)}
.process-alert-ack-v24:hover{filter:brightness(1.06)}
.process-alert-ack-v24:active{transform:translateY(1px)}
.process-alert-modal-v24[data-severity="warning"] .process-alert-accent-v24{background:#ffad32}
.process-alert-modal-v24[data-severity="warning"] .process-alert-icon-v24{color:#ffb13d;background:rgba(255,173,50,.10);border-color:rgba(255,173,50,.26)}
.process-alert-modal-v24[data-severity="warning"] .process-alert-ack-v24{border-color:rgba(255,177,61,.28);background:linear-gradient(100deg,#e89a27,#ffc04e);color:#241300}
.process-alert-modal-v24[data-severity="critical"] .process-alert-box-v24{border-color:rgba(255,47,74,.52);background:linear-gradient(145deg,#260a11,#0d090d);box-shadow:0 30px 100px rgba(0,0,0,.78),0 0 55px rgba(255,35,63,.17);animation:alarmBoxPulseV24 .75s ease-in-out infinite alternate}
.process-alert-modal-v24[data-severity="critical"] .process-alert-accent-v24{height:6px;background:#ff2747;box-shadow:0 0 20px rgba(255,39,71,.72)}
.process-alert-modal-v24[data-severity="critical"] .process-alert-icon-v24{color:#ff405b;background:rgba(255,39,71,.12);border-color:rgba(255,39,71,.42);box-shadow:0 0 28px rgba(255,39,71,.12)}
.process-alert-modal-v24[data-severity="critical"] .process-alert-head-v24 span{color:#b76170}
.process-alert-modal-v24[data-severity="critical"] .process-alert-head-v24 h2{color:#ffe4e8}
.process-alert-modal-v24[data-severity="critical"] .process-alert-ack-v24{border-color:rgba(255,71,93,.46);background:linear-gradient(100deg,#e7193b,#ff4e68);color:#fff}
@keyframes alarmBoxPulseV24{to{box-shadow:0 30px 100px rgba(0,0,0,.78),0 0 70px rgba(255,35,63,.29)}}

/* Informacja o niestabilnym buforze — automatycznie znika po 30 s. */
.process-info-toast-v24{position:fixed;z-index:205;left:50%;top:78px;transform:translate(-50%,-18px);width:min(560px,calc(100% - 24px));min-height:52px;padding:12px 15px;border:1px solid rgba(255,176,46,.32);border-radius:12px;background:rgba(36,27,11,.96);box-shadow:0 18px 50px rgba(0,0,0,.46);color:#e9d4aa;display:flex;align-items:center;gap:10px;font-size:11px;font-weight:800;line-height:1.45;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}
.process-info-toast-v24 i{color:#ffb02e;font-size:17px}
.process-info-toast-v24.is-visible{opacity:1;transform:translate(-50%,0)}

@media(max-width:700px){
  /* Na telefonie: grafika -> STAN PROCESU -> TEMPERATURY. */
  .bottom-hmi-v4 .process-status-panel-v24{order:0!important}
  .bottom-hmi-v4 .telemetry-v4{order:1!important}
  .process-status-card-v24{min-height:82px;margin:0 7px 7px;padding:10px 11px;grid-template-columns:11px minmax(0,1fr) auto;gap:9px}
  .process-status-copy-v24 strong{font-size:13px}.process-status-copy-v24 small{font-size:9px}
  .process-status-card-v24>em{font-size:7px}

  /* Po przeniesieniu SZYBKIEGO STATUSU: sterowanie -> szybki status -> status systemu. */
  .quick-side-v24{order:4!important}
  .system-v4{order:5!important}
  .quick-side-v24 .quick-grid-v4{grid-template-columns:1fr 1fr}

  .process-alert-modal-v24{padding:10px}
  .process-alert-box-v24{padding:20px 17px 17px;border-radius:14px}
  .process-alert-head-v24{gap:11px}.process-alert-icon-v24{width:46px;height:46px;flex-basis:46px;font-size:20px;border-radius:12px}
  .process-alert-head-v24 h2{font-size:19px}.process-alert-head-v24 span{font-size:8px}
  .process-alert-message-v24{font-size:13px;margin-top:16px;line-height:1.55}
  .process-alert-details-v24{font-size:10px;padding:10px 11px}
  .process-alert-ack-v24{height:50px;margin-top:17px;font-size:12px}
  .process-info-toast-v24{top:64px;font-size:10px}
}

/* ===== HMI V13.25 — HISTORIA PROCESU / STATUSY / SYNCHRONICZNY ZOOM ===== */
.history-view-v25{--h25-panel:#0a141e;--h25-line:rgba(113,145,170,.18);--h25-soft:rgba(255,255,255,.035);--h25-muted:#718598;--h25-text:#e6eef4}
.history-toolbar-v25{gap:9px;flex-wrap:wrap}.history-process-range-v25{border-right:1px solid rgba(110,140,165,.12);padding-right:9px}.history-process-range-v25 .hist-range-btn{font-weight:900}.hist-range-btn:disabled{opacity:.38;cursor:not-allowed;filter:saturate(.4)}

.history-summary-v25,.history-process-track-panel-v25,.history-analysis-grid-v25>*,.history-settings-panel-v25{border:1px solid var(--h25-line);border-radius:14px;background:linear-gradient(145deg,rgba(12,23,34,.96),rgba(7,14,22,.96));box-shadow:0 12px 34px rgba(0,0,0,.14)}
.history-summary-v25{overflow:hidden}.history-summary-head-v25{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid rgba(112,145,170,.12);background:rgba(255,255,255,.015)}.history-summary-head-v25>div:first-child span,.history-section-head-v25 span{display:block;color:#597084;font-size:8px;font-weight:950;letter-spacing:.17em}.history-summary-head-v25>div:first-child strong,.history-section-head-v25 strong{display:block;color:#dfeaf1;font-size:13px;margin-top:2px}.history-summary-state-v25{height:27px;padding:0 9px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:950;letter-spacing:.13em;border:1px solid rgba(120,150,175,.18);color:#8ea2b4;background:rgba(120,150,175,.07)}.history-summary-state-v25.is-running{color:#54e6ae;border-color:rgba(84,230,174,.28);background:rgba(84,230,174,.08)}.history-summary-state-v25.is-complete{color:#9bb0c1}.history-summary-state-v25.is-range{color:#5fdcf3;border-color:rgba(95,220,243,.22);background:rgba(95,220,243,.06)}
.history-summary-grid-v25{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0}.history-summary-grid-v25>div{min-height:64px;padding:11px 12px;border-right:1px solid rgba(112,145,170,.09);display:flex;flex-direction:column;justify-content:center;min-width:0}.history-summary-grid-v25>div:last-child{border-right:0}.history-summary-grid-v25 span{color:#597084;font-size:7px;font-weight:950;letter-spacing:.14em}.history-summary-grid-v25 strong{margin-top:4px;color:#d8e4eb;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-summary-fw-v25{grid-column:span 1}

.history-process-track-panel-v25{padding:0 0 10px;overflow:hidden}.history-section-head-v25{min-height:50px;padding:10px 13px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(112,145,170,.11);gap:16px}.history-section-head-v25 small{color:#5f7486;font-size:9px;line-height:1.35;text-align:right}.history-process-track-v25{position:relative;height:72px;margin:11px 13px 7px;border:1px solid rgba(105,139,165,.14);border-radius:10px;background:linear-gradient(180deg,#071019,#09131d);overflow:hidden}.history-process-axis-v25{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.03) 1px,transparent 1px);background-size:10% 100%}.history-process-segment-v25{position:absolute;top:8px;bottom:8px;border:0;border-left:2px solid var(--status-color);background:linear-gradient(180deg,color-mix(in srgb,var(--status-color) 18%,transparent),color-mix(in srgb,var(--status-color) 8%,transparent));cursor:zoom-in;color:#dbe7ee;overflow:hidden;padding:0 7px;text-align:left;transition:filter .12s ease,background .12s ease}.history-process-segment-v25:hover{filter:brightness(1.25);z-index:2}.history-process-segment-v25 span{display:block;font-size:8px;font-weight:950;letter-spacing:.045em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-process-segment-v25 em{display:block;margin-top:4px;color:#7f94a5;font-size:7px;font-style:normal;font-weight:800;white-space:nowrap}.history-process-segment-v25.alarm,.history-process-segment-v25.alarm-critical{background:linear-gradient(180deg,rgba(244,63,94,.25),rgba(127,29,29,.15));box-shadow:inset 0 0 22px rgba(244,63,94,.06)}.history-process-segment-v25.alarm-critical{animation:historyAlarmTrackPulseV25 .9s ease-in-out infinite alternate}@keyframes historyAlarmTrackPulseV25{to{background-color:rgba(239,68,68,.18)}}.history-process-legend-v25{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 14px}.history-process-legend-v25 span{display:flex;align-items:center;gap:5px;color:#718598;font-size:7px;font-weight:900}.history-process-legend-v25 i{width:7px;height:7px;border-radius:2px;background:var(--legend)}
.history-empty-v25{width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;padding:10px;color:#607487;font-size:9px;text-align:center;line-height:1.45}

.history-series-chip-muted-v25{opacity:.72}.history-chart-panel-v25{overflow:visible}.history-zoom-help-v25{margin:9px 10px 0;padding:8px 10px;border:1px dashed rgba(65,200,232,.18);border-radius:8px;background:rgba(39,198,232,.035);display:flex;align-items:center;gap:8px;color:#6f8a9d;font-size:8px}.history-zoom-help-v25 i{color:#37d8f5}.history-zoom-help-v25 b{color:#9bcad5;letter-spacing:.08em}.history-selectable-chart-v25{position:relative;cursor:crosshair;touch-action:pan-y;user-select:none}.history-selection-v25{display:none;position:absolute;z-index:8;pointer-events:none;border-left:1px solid rgba(77,218,244,.9);border-right:1px solid rgba(77,218,244,.9);background:linear-gradient(90deg,rgba(55,216,245,.08),rgba(55,216,245,.18),rgba(55,216,245,.08));box-shadow:inset 0 0 0 1px rgba(55,216,245,.08)}.history-selectable-chart-v25 canvas{cursor:crosshair}.history-navigator-v25 .history-nav-controls-v18{flex-wrap:wrap}.history-nav-controls-v18 button:disabled{opacity:.35;cursor:not-allowed}

.history-analysis-grid-v25{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:14px}.history-events-panel-v25{overflow:hidden}.history-events-list-v25{max-height:430px;overflow:auto;scrollbar-width:thin;scrollbar-color:#243746 transparent}.history-event-row-v25{width:100%;min-height:48px;display:grid;grid-template-columns:72px 28px minmax(0,1fr);align-items:center;gap:7px;padding:7px 12px;border:0;border-bottom:1px solid rgba(107,139,163,.08);background:transparent;color:#cfdce5;text-align:left;cursor:zoom-in;transition:background .12s ease}.history-event-row-v25:hover{background:rgba(255,255,255,.025)}.history-event-row-v25 time{color:#687e90;font-size:8px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.history-event-row-v25>i{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:var(--event-color);background:color-mix(in srgb,var(--event-color) 9%,transparent);border:1px solid color-mix(in srgb,var(--event-color) 20%,transparent);font-size:10px}.history-event-row-v25 strong{display:block;color:#cbd8e1;font-size:9px;letter-spacing:.025em}.history-event-row-v25 span{display:block;color:#647a8b;font-size:8px;margin-top:2px}.history-event-row-v25.alarm,.history-event-row-v25.alarm-critical{background:linear-gradient(90deg,rgba(244,63,94,.045),transparent 38%)}

.history-settings-panel-v25{overflow:hidden}.history-settings-panel-v25 summary{min-height:50px;padding:10px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;border-bottom:1px solid rgba(112,145,170,.11);list-style:none}.history-settings-panel-v25 summary::-webkit-details-marker{display:none}.history-settings-panel-v25 summary span{color:#d8e4eb;font-size:10px;font-weight:900}.history-settings-panel-v25 summary span i{color:#38c7e8;margin-right:7px}.history-settings-panel-v25 summary small{color:#5f7486;font-size:8px}.history-settings-grid-v25{display:grid;grid-template-columns:1fr 1fr}.history-settings-grid-v25>div:not(.history-empty-v25){min-height:49px;padding:9px 11px;border-right:1px solid rgba(112,145,170,.07);border-bottom:1px solid rgba(112,145,170,.07);display:flex;flex-direction:column;justify-content:center}.history-settings-grid-v25 span{color:#627789;font-size:7px;font-weight:900;letter-spacing:.06em}.history-settings-grid-v25 strong{margin-top:3px;color:#cbd8e1;font-size:10px}

@media(max-width:1050px){.history-summary-grid-v25{grid-template-columns:repeat(4,minmax(0,1fr))}.history-summary-grid-v25>div{border-bottom:1px solid rgba(112,145,170,.07)}.history-analysis-grid-v25{grid-template-columns:1fr}}
@media(max-width:700px){.history-toolbar-v25{display:flex}.history-process-range-v25{width:100%;border-right:0;border-bottom:1px solid rgba(110,140,165,.10);padding:0 0 7px}.history-process-range-v25 .hist-range-btn{flex:1}.history-summary-head-v25{padding:9px 10px}.history-summary-grid-v25{grid-template-columns:1fr 1fr}.history-summary-grid-v25>div{min-height:56px;padding:9px 10px}.history-summary-fw-v25{grid-column:span 2}.history-section-head-v25{padding:9px 10px;align-items:flex-start}.history-section-head-v25 small{display:none}.history-process-track-v25{height:64px;margin:8px 8px 6px}.history-process-segment-v25{top:6px;bottom:6px;padding:0 5px}.history-process-segment-v25 span{font-size:7px}.history-process-segment-v25 em{font-size:6px}.history-process-legend-v25{padding:0 9px;gap:7px}.history-zoom-help-v25{margin:7px 7px 0;font-size:7px}.history-analysis-grid-v25{gap:8px}.history-events-list-v25{max-height:340px}.history-event-row-v25{grid-template-columns:60px 25px minmax(0,1fr);padding:7px 9px}.history-settings-grid-v25{grid-template-columns:1fr}.history-settings-grid-v25>div:not(.history-empty-v25){border-right:0}.history-nav-copy-v18{display:none}.history-navigator-v25{justify-content:center}.history-navigator-v25 .history-nav-controls-v18{width:100%;justify-content:center}.history-navigator-v25 .history-nav-controls-v18 .history-show-all-v18{display:flex!important;padding:0 7px;font-size:7px}.temperature-track-v18 .history-canvas-wrap-v18{height:360px}.control-track-v18 .history-canvas-wrap-v18{height:220px}}

/* ===== HMI V13.25.1 — CZYTELNOŚĆ HISTORII + TRYB PRZESUWANIA ===== */
/* V13.25 celowo było bardzo zwarte. Na rzeczywistych monitorach 1080p/1440p tekst 7–9 px
   okazał się zbyt mały, dlatego w Historii podnosimy minimalne rozmiary bez ruszania dashboardu. */
.history-view-v25 .history-kicker-v18{font-size:11px}
.history-view-v25 .history-hero-v18 h2{font-size:28px}
.history-view-v25 .history-hero-v18 p{font-size:14px;line-height:1.45}
.history-view-v25 .history-db-live-v18,.history-view-v25 .history-logging-v18{min-height:42px;font-size:11px}

.history-view-v25 .history-range-group-v18>span{font-size:10px}
.history-view-v25 .hist-range-btn,.history-view-v25 .history-tool-btn-v18,.history-view-v25 .history-refresh-v18{height:39px;font-size:11px}
.history-view-v25 .history-custom-range-v18 label>span{font-size:10px}
.history-view-v25 .history-custom-range-v18 button{font-size:10px}

.history-summary-head-v25>div:first-child span,.history-section-head-v25 span{font-size:10px}
.history-summary-head-v25>div:first-child strong,.history-section-head-v25 strong{font-size:15px}
.history-summary-state-v25{height:31px;font-size:10px}
.history-summary-grid-v25>div{min-height:72px}
.history-summary-grid-v25 span{font-size:9px}
.history-summary-grid-v25 strong{font-size:13px}

.history-section-head-v25 small{font-size:10px}
.history-process-track-v25{height:82px}
.history-process-segment-v25{top:9px;bottom:9px;padding:0 9px}
.history-process-segment-v25 span{font-size:10px;line-height:1.25}
.history-process-segment-v25 em{font-size:9px;margin-top:5px}
.history-process-legend-v25 span{font-size:9px}
.history-empty-v25{font-size:11px}

.history-view-v25 .history-series-head-v18>div span{font-size:10px}
.history-view-v25 .history-series-head-v18>div strong{font-size:14px}
.history-view-v25 .history-series-head-v18 small{font-size:10px}
.history-view-v25 .history-series-title-v18{font-size:10px}
.history-view-v25 .history-series-title-v18 em{font-size:9px}
.history-view-v25 .history-series-chip-v18{height:39px;font-size:10px}

.history-view-v25 .history-chart-head-v18>div:first-child span{font-size:10px}
.history-view-v25 .history-chart-head-v18>div:first-child strong{font-size:14px}
.history-view-v25 .history-chart-info-v18 span,.history-view-v25 .history-chart-info-v18 b{height:32px;font-size:10px}
.history-view-v25 .history-track-title-v18>span{font-size:11px}
.history-view-v25 .history-track-title-v18 em{font-size:9px}

.history-zoom-help-v25.history-interaction-bar-v251{display:grid;grid-template-columns:auto minmax(260px,1fr) auto;align-items:center;gap:12px;padding:10px 12px;font-size:10px}
.history-interaction-bar-v251>small{color:#5d7487;font-size:9px;white-space:nowrap}
.history-interaction-modes-v251{display:flex;align-items:center;gap:6px}
.history-interaction-modes-v251 button{height:34px;padding:0 11px;border:1px solid rgba(105,140,165,.20);border-radius:8px;background:#08131e;color:#7890a2;font-size:10px;font-weight:950;letter-spacing:.035em;cursor:pointer;white-space:nowrap}
.history-interaction-modes-v251 button i{margin-right:5px}
.history-interaction-modes-v251 button:hover{color:#d9edf5;border-color:rgba(55,216,245,.34)}
.history-interaction-modes-v251 button.active{color:#dffaff;border-color:rgba(55,216,245,.52);background:linear-gradient(145deg,rgba(20,78,91,.55),rgba(7,30,43,.76));box-shadow:0 0 16px rgba(55,216,245,.08)}
.history-view-v25[data-history-mode="zoom"] .history-selectable-chart-v25 canvas{cursor:crosshair}
.history-view-v25[data-history-mode="pan"] .history-selectable-chart-v25 canvas{cursor:grab}
.history-view-v25[data-history-mode="pan"] .history-selectable-chart-v25 canvas.is-dragging{cursor:grabbing}

.history-view-v25 .history-nav-copy-v18{font-size:10px}
.history-nav-controls-v251{justify-content:flex-end;min-width:0!important}
.history-nav-controls-v251 button{height:38px!important;min-width:42px!important;padding:0 11px!important;font-size:10px!important;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.history-nav-controls-v251 .history-pan-step-v251{min-width:108px!important;color:#9bc8d8;border-color:rgba(55,216,245,.22)}
.history-nav-controls-v251 .history-show-all-v18{min-width:92px!important}

.history-event-row-v25{min-height:58px;grid-template-columns:82px 34px minmax(0,1fr);gap:9px;padding:9px 13px}
.history-event-row-v25 time{font-size:10px}
.history-event-row-v25>i{width:29px;height:29px;font-size:12px}
.history-event-row-v25 strong{font-size:11px}
.history-event-row-v25 span{font-size:10px;margin-top:3px}
.history-settings-panel-v25 summary span{font-size:12px}
.history-settings-panel-v25 summary small{font-size:10px}
.history-settings-grid-v25>div:not(.history-empty-v25){min-height:58px;padding:10px 12px}
.history-settings-grid-v25 span{font-size:9px}
.history-settings-grid-v25 strong{font-size:12px}

@media(max-width:900px){
  .history-zoom-help-v25.history-interaction-bar-v251{grid-template-columns:1fr;gap:8px}
  .history-interaction-bar-v251>small{white-space:normal}
  .history-interaction-modes-v251{width:100%}
  .history-interaction-modes-v251 button{flex:1}
  .history-nav-controls-v251{width:100%;justify-content:center}
}

@media(max-width:700px){
  .history-view-v25 .history-kicker-v18{font-size:9px}
  .history-view-v25 .history-hero-v18 h2{font-size:22px}
  .history-view-v25 .history-hero-v18 p{font-size:12px}
  .history-view-v25 .history-range-group-v18>span{font-size:9px}
  .history-view-v25 .hist-range-btn,.history-view-v25 .history-tool-btn-v18{font-size:10px}
  .history-summary-head-v25>div:first-child span,.history-section-head-v25 span{font-size:9px}
  .history-summary-head-v25>div:first-child strong,.history-section-head-v25 strong{font-size:13px}
  .history-summary-grid-v25 span{font-size:8px}
  .history-summary-grid-v25 strong{font-size:12px}
  .history-process-track-v25{height:72px}
  .history-process-segment-v25 span{font-size:9px}
  .history-process-segment-v25 em{font-size:8px}
  .history-process-legend-v25 span{font-size:8px}
  .history-view-v25 .history-series-title-v18{font-size:9px}
  .history-view-v25 .history-series-chip-v18{font-size:10px}
  .history-zoom-help-v25.history-interaction-bar-v251{font-size:10px}
  .history-interaction-bar-v251>small{font-size:9px}
  .history-nav-controls-v251 button{height:38px!important;font-size:9px!important;padding:0 8px!important}
  .history-nav-controls-v251 .history-pan-step-v251{min-width:92px!important}
  .history-nav-short-v251{display:none}
  .history-event-row-v25{grid-template-columns:68px 30px minmax(0,1fr);padding:8px 9px}
  .history-event-row-v25 time{font-size:9px}
  .history-event-row-v25 strong{font-size:10px}
  .history-event-row-v25 span{font-size:9px}
  .history-settings-grid-v25 span{font-size:9px}
  .history-settings-grid-v25 strong{font-size:12px}
}


/* ===== HMI V13.25.2 — PRZEWIJANIE OKNA CZASU + MOBILE SCROLL GUTTER ===== */
/* Na ekranach dotykowych pionowy ruch palca ma przewijać stronę. Ruch poziomy nadal
   pozostaje dostępny dla ZOOM/PRZESUŃ obsługiwanego przez JS. */
@media (pointer:coarse), (max-width:900px){
  .history-view-v25 .history-canvas-wrap-v18 canvas{touch-action:pan-y!important}
  .history-view-v25 .history-track-v18{padding-left:14px;padding-right:14px}
}

@media (max-width:700px){
  /* Wąskie, ale wyraźne rynny po bokach wykresu dają miejsce na pewne przewijanie strony. */
  .history-view-v25 .history-track-v18{padding-left:16px;padding-right:16px}
  .history-view-v25 .history-canvas-wrap-v18{border-radius:8px}
}

.history-nav-controls-v251 button:disabled{opacity:.34;cursor:not-allowed;filter:saturate(.45)}

/* ================================================================
   V13.26.0 — HISTORIA ALARMÓW / POTWIERDZENIA
   ================================================================ */
.alarm-nav-badge-v26 {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    font-size: 10px;
    font-weight: 900;
    color: #64748b;
    background: rgba(100,116,139,.08);
    border: 1px solid rgba(100,116,139,.14);
}
.alarm-nav-badge-v26.has-unacked {
    color: #fecaca;
    background: rgba(239,68,68,.16);
    border-color: rgba(239,68,68,.34);
    box-shadow: 0 0 18px rgba(239,68,68,.12);
}
.alarm-view-v26 { padding-bottom: 28px; }
.alarm-hero-v26 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 24px 26px;
    border: 1px solid rgba(71,101,122,.2);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(9,20,31,.94), rgba(6,13,22,.98));
}
.alarm-kicker-v26 {
    color: #6ea2c4;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .19em;
    margin-bottom: 7px;
}
.alarm-kicker-v26 i { color: #fb7185; margin-right: 7px; }
.alarm-hero-v26 h2 { margin: 0; color: #f7fbff; font-size: 25px; font-weight: 850; letter-spacing: -.02em; }
.alarm-hero-v26 p { max-width: 900px; margin: 7px 0 0; color: #6f8498; font-size: 13px; line-height: 1.55; }
.alarm-refresh-v26 {
    flex: 0 0 auto;
    border: 1px solid rgba(40,199,244,.28);
    border-radius: 11px;
    background: rgba(40,199,244,.06);
    color: #b8efff;
    padding: 11px 15px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .03em;
}
.alarm-refresh-v26:hover { background: rgba(40,199,244,.11); }

.alarm-summary-v26 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
    margin-top: 14px;
}
.alarm-summary-card-v26 {
    border: 1px solid rgba(71,101,122,.17);
    border-radius: 13px;
    background: rgba(7,15,24,.76);
    padding: 13px 15px;
}
.alarm-summary-card-v26 span { display: block; color: #5d7288; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.alarm-summary-card-v26 strong { display: block; margin-top: 5px; color: #dbe8f3; font-size: 22px; font-weight: 900; }
.alarm-summary-card-v26.is-new strong { color: #fb7185; }
.alarm-summary-card-v26.is-alarm strong { color: #f59e0b; }
.alarm-summary-card-v26.is-info strong { color: #38bdf8; }

.alarm-toolbar-v26 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    padding: 11px 12px;
    border: 1px solid rgba(71,101,122,.17);
    border-radius: 13px;
    background: rgba(7,15,24,.66);
}
.alarm-filter-group-v26 { display: flex; flex-wrap: wrap; gap: 7px; }
.alarm-filter-group-v26 button {
    border: 1px solid rgba(100,116,139,.18);
    border-radius: 9px;
    background: rgba(100,116,139,.04);
    color: #7d8ea0;
    padding: 8px 11px;
    font-size: 10px;
    font-weight: 900;
}
.alarm-filter-group-v26 button.active {
    border-color: rgba(40,199,244,.36);
    background: rgba(40,199,244,.1);
    color: #c8f3ff;
}
.alarm-retention-note-v26 { color: #51667a; font-size: 10px; white-space: nowrap; }
.alarm-retention-note-v26 i { margin-right: 6px; color: #38bdf8; }

.alarm-list-panel-v26 {
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid rgba(71,101,122,.2);
    border-radius: 16px;
    background: rgba(6,13,22,.92);
}
.alarm-list-head-v26 {
    min-height: 60px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(71,101,122,.16);
}
.alarm-list-head-v26 span { display:block; color:#5b7390; font-size:9px; font-weight:900; letter-spacing:.16em; }
.alarm-list-head-v26 strong { display:block; margin-top:3px; color:#dce9f4; font-size:14px; }
.alarm-list-head-v26 em { color:#60758a; font-style:normal; font-size:11px; }
.alarm-list-v26 { display:flex; flex-direction:column; }
.alarm-row-v26 {
    --alarm-accent: #64748b;
    display: grid;
    grid-template-columns: 46px minmax(0,1fr) auto;
    gap: 13px;
    align-items: center;
    min-height: 82px;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(71,101,122,.11);
    background: linear-gradient(90deg, color-mix(in srgb, var(--alarm-accent) 4%, transparent), transparent 28%);
    transition: opacity .18s ease, background .18s ease, filter .18s ease;
}
.alarm-row-v26:last-child { border-bottom: 0; }
.alarm-row-v26.alarm.severity-critical { --alarm-accent:#ef4444; }
.alarm-row-v26.alarm.severity-major { --alarm-accent:#fb7185; }
.alarm-row-v26.alarm.severity-warning { --alarm-accent:#f59e0b; }
.alarm-row-v26.info { --alarm-accent:#38bdf8; }
.alarm-row-v26.is-unacknowledged { border-left: 3px solid var(--alarm-accent); }
.alarm-row-v26.is-acknowledged {
    border-left: 3px solid rgba(100,116,139,.18);
    background: rgba(100,116,139,.018);
    opacity: .56;
    filter: saturate(.35);
}
.alarm-icon-v26 {
    width: 42px;
    height: 42px;
    display:grid;
    place-items:center;
    border-radius: 12px;
    color: var(--alarm-accent);
    background: color-mix(in srgb, var(--alarm-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--alarm-accent) 25%, transparent);
    font-size: 17px;
}
.alarm-row-title-v26 { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.alarm-row-title-v26 strong { color:#eef6fc; font-size:13px; font-weight:900; letter-spacing:.01em; }
.alarm-kind-v26 {
    display:inline-flex;
    align-items:center;
    gap:4px;
    border-radius:999px;
    padding:3px 7px;
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
}
.alarm-kind-v26.alarm { color:#fecaca; border:1px solid rgba(239,68,68,.22); background:rgba(239,68,68,.08); }
.alarm-kind-v26.info { color:#bae6fd; border:1px solid rgba(56,189,248,.22); background:rgba(56,189,248,.08); }
.alarm-row-body-v26 p { margin:5px 0 0; color:#708598; font-size:11px; line-height:1.45; }
.alarm-row-meta-v26 { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:7px; color:#506477; font-size:9px; }
.alarm-row-meta-v26 time { color:#7a8fa2; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.alarm-unacked-meta-v26 { color:#fb7185; font-weight:900; letter-spacing:.05em; }
.alarm-unacked-meta-v26 i { font-size:6px; vertical-align:middle; }
.alarm-ack-meta-v26 { color:#738191; }
.alarm-row-action-v26 { min-width:116px; display:flex; justify-content:flex-end; }
.alarm-ack-btn-v26 {
    border:1px solid rgba(52,211,153,.28);
    border-radius:9px;
    background:rgba(52,211,153,.07);
    color:#a7f3d0;
    padding:9px 11px;
    font-size:9px;
    font-weight:900;
}
.alarm-ack-btn-v26:hover { background:rgba(52,211,153,.13); }
.alarm-ack-btn-v26:disabled { opacity:.4; cursor:wait; }
.alarm-ack-done-v26 { color:#667586; font-size:9px; font-weight:900; letter-spacing:.05em; }
.alarm-empty-v26 { padding:36px 18px; text-align:center; color:#607488; font-size:12px; }
.alarm-empty-v26 i { margin-right:7px; color:#38bdf8; }
.alarm-empty-v26.is-error { color:#fda4af; }
.alarm-empty-v26.is-error i { color:#fb7185; }

@media (max-width: 900px) {
    .alarm-hero-v26 { padding:18px; align-items:flex-start; }
    .alarm-summary-v26 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .alarm-toolbar-v26 { align-items:flex-start; flex-direction:column; }
    .alarm-retention-note-v26 { white-space:normal; }
    .alarm-row-v26 { grid-template-columns:40px minmax(0,1fr); padding:12px; }
    .alarm-row-action-v26 { grid-column:2; min-width:0; justify-content:flex-start; }
}

@media (max-width: 620px) {
    .alarm-hero-v26 { flex-direction:column; }
    .alarm-refresh-v26 { width:100%; }
    .alarm-summary-card-v26 strong { font-size:19px; }
    .alarm-filter-group-v26 { width:100%; display:grid; grid-template-columns:1fr 1fr; }
    .alarm-filter-group-v26 button { width:100%; }
    .alarm-row-v26 { grid-template-columns:36px minmax(0,1fr); gap:10px; }
    .alarm-icon-v26 { width:34px; height:34px; border-radius:10px; font-size:14px; }
    .alarm-row-title-v26 strong { font-size:12px; }
    .alarm-row-body-v26 p { font-size:10px; }
}


/* V13.26.0 final — statusy informacyjne nie podlegają potwierdzeniu. */
.alarm-row-v26.is-information {
    border-left: 3px solid rgba(56,189,248,.34);
    background: linear-gradient(90deg, rgba(56,189,248,.035), transparent 28%);
}
.alarm-info-only-v26 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #668399;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    white-space: nowrap;
}
.alarm-info-only-v26 i { color: #38bdf8; }
.alarm-toolbar-meta-v26 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
}
.alarm-mode-pill-v26 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 8px;
    color: #7792a7;
    background: rgba(56,189,248,.045);
    border: 1px solid rgba(56,189,248,.14);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .05em;
}
.alarm-mode-pill-v26 i { color:#38bdf8; }
.alarm-mode-pill-v26 b { color:#b8e8f7; }

@media (max-width: 900px) {
    .alarm-toolbar-meta-v26 { justify-content:flex-start; }
    .alarm-row-v26.is-information .alarm-row-action-v26 { display:none; }
}

/* V13.26.1 — Historia: godziny zdarzeń tak czytelne jak opis zdarzenia. */
.history-event-row-v25 time {
    color: #8ba1b3;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
    .history-event-row-v25 time { font-size: 10px; font-weight: 700; }
}

/* ======================================================================
   HMI v13.26.2 — jawne zatwierdzanie parametrów sterownika
   ====================================================================== */
.settings-pending-bar-v262{
  position:sticky;
  bottom:12px;
  z-index:36;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:14px 0 2px;
  padding:12px 14px;
  border:1px solid rgba(245,158,11,.34);
  border-radius:12px;
  background:rgba(8,16,25,.96);
  box-shadow:0 14px 34px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.02) inset;
  backdrop-filter:blur(12px);
  opacity:.58;
  transition:opacity .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.settings-pending-bar-v262.active{
  opacity:1;
  border-color:rgba(245,158,11,.62);
  box-shadow:0 16px 38px rgba(0,0,0,.42),0 0 22px rgba(245,158,11,.07);
}
.settings-pending-bar-v262.awaiting{border-color:rgba(34,211,238,.48)}
.settings-pending-copy-v262{display:flex;align-items:center;gap:11px;min-width:0}
.settings-pending-copy-v262>i{font-size:18px;color:#f59e0b;width:24px;text-align:center}
.settings-pending-bar-v262.awaiting .settings-pending-copy-v262>i{color:#22d3ee}
.settings-pending-copy-v262 strong{display:block;color:#e7eef4;font-size:13px;line-height:1.25}
.settings-pending-copy-v262 span{display:block;margin-top:3px;color:#7890a3;font-size:11px;line-height:1.35}
.settings-pending-actions-v262{display:flex;gap:8px;flex:0 0 auto}
.settings-pending-actions-v262 button{
  min-height:38px;
  padding:0 14px;
  border-radius:9px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.035em;
  transition:background .15s ease,border-color .15s ease,opacity .15s ease;
}
.settings-pending-cancel-v262{border:1px solid rgba(148,163,184,.2);background:rgba(148,163,184,.06);color:#9caab7}
.settings-pending-send-v262{border:1px solid rgba(34,211,238,.42);background:rgba(8,145,178,.16);color:#a5f3fc}
.settings-pending-send-v262:not(:disabled):hover{background:rgba(8,145,178,.26);border-color:rgba(34,211,238,.68)}
.settings-pending-actions-v262 button:disabled{opacity:.38;cursor:not-allowed}

.param-field-v15.has-setting-pending-v262,
.probe-field-v15.has-setting-pending-v262,
.config-choice-v15.has-setting-pending-v262,
.working-heater-toggle-v17.has-setting-pending-v262,
.settings-switch-v15.has-setting-pending-v262,
.mash-thermostat-v15.has-setting-pending-v262,
.param-process-panel-v15.has-setting-pending-v262{
  outline:1px solid rgba(245,158,11,.42);
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(245,158,11,.045);
}
input.setting-pending-v262{border-color:rgba(245,158,11,.68)!important;box-shadow:0 0 0 2px rgba(245,158,11,.09)!important}
.param-derived-v262 input[readonly]{opacity:.72;cursor:default;background:rgba(148,163,184,.045)!important}
.param-derived-v262>small,.delta-field-v17>small{display:block;margin-top:6px;color:#60788b;font-size:10px;line-height:1.35}

@media(max-width:700px){
  .settings-pending-bar-v262{bottom:8px;align-items:stretch;flex-direction:column;padding:11px}
  .settings-pending-actions-v262{width:100%}
  .settings-pending-actions-v262 button{flex:1;min-width:0;padding-left:8px;padding-right:8px}
}

/* ========================================================================== */
/* HARMONOGRAM V1 — jednorazowy zdalny start (firmware 7.3.8+)               */
/* ========================================================================== */
.schedule-view-v1{padding:22px 24px 36px;max-width:1500px;margin:0 auto;width:100%}
.schedule-page-head-v1{display:flex;justify-content:space-between;gap:22px;align-items:flex-start;margin-bottom:20px}
.schedule-page-head-v1>div:first-child{min-width:0}
.schedule-eyebrow-v1{font-size:10px;font-weight:900;letter-spacing:.16em;color:#36d5ee;margin-bottom:7px}.schedule-eyebrow-v1 i{margin-right:7px}
.schedule-page-head-v1 h2{font-size:26px;line-height:1.05;font-weight:900;color:#f4f8fb;margin:0 0 8px}.schedule-page-head-v1 p{margin:0;max-width:760px;color:#71879a;font-size:12px;line-height:1.6}
.schedule-status-card-v1{width:min(390px,38vw);min-width:300px;padding:13px 15px;border-radius:13px;border:1px solid rgba(89,115,137,.24);background:linear-gradient(145deg,rgba(12,23,34,.92),rgba(6,13,21,.94));display:grid;grid-template-columns:auto 1fr;column-gap:11px;row-gap:2px;align-items:center}
.schedule-status-pill-v1{grid-row:1/3;border:1px solid rgba(34,211,238,.35);background:rgba(8,145,178,.12);color:#9aefff;border-radius:7px;padding:7px 9px;font-size:9px;font-weight:900;letter-spacing:.1em;white-space:nowrap}.schedule-status-card-v1 strong{font-size:12px;color:#dce8f1}.schedule-status-card-v1 small{font-size:10px;color:#71879a;line-height:1.35}
.schedule-status-card-v1[data-state=armed]{border-color:rgba(16,185,129,.28)}.schedule-status-card-v1[data-state=armed] .schedule-status-pill-v1,.schedule-status-card-v1[data-state=started] .schedule-status-pill-v1{border-color:rgba(16,185,129,.42);background:rgba(16,185,129,.13);color:#8ef0c8}
.schedule-status-card-v1[data-state=disabled] .schedule-status-pill-v1,.schedule-status-card-v1[data-state=idle] .schedule-status-pill-v1{border-color:rgba(148,163,184,.26);background:rgba(148,163,184,.08);color:#aab9c7}
.schedule-status-card-v1[data-state=blocked] .schedule-status-pill-v1,.schedule-status-card-v1[data-state=expired] .schedule-status-pill-v1,.schedule-status-card-v1[data-state=error] .schedule-status-pill-v1{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.11);color:#ffd183}
.schedule-layout-v1{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}.schedule-panel-v1,.schedule-summary-v1,.schedule-note-v1,.schedule-firmware-hint-v1{border:1px solid rgba(78,103,124,.2);background:linear-gradient(150deg,rgba(10,20,30,.95),rgba(5,11,18,.96));border-radius:15px}
.schedule-panel-v1{overflow:hidden}.schedule-panel-head-v1{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:17px 19px;border-bottom:1px solid rgba(78,103,124,.17)}.schedule-panel-head-v1>div>span,.schedule-section-label-v1,.schedule-mash-head-v1 span{display:block;color:#547085;font-size:9px;letter-spacing:.14em;font-weight:900}.schedule-panel-head-v1>div>strong,.schedule-mash-head-v1 strong{display:block;color:#d7e3ec;font-size:13px;margin-top:3px}
.schedule-enable-v1{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none}.schedule-enable-v1 input{position:absolute;opacity:0;pointer-events:none}.schedule-enable-track-v1{width:38px;height:20px;border-radius:999px;background:#1d2a35;border:1px solid #344859;padding:2px;transition:.2s}.schedule-enable-track-v1 span{display:block;width:14px;height:14px;border-radius:50%;background:#718393;transition:.2s}.schedule-enable-v1 input:checked+.schedule-enable-track-v1{background:rgba(16,185,129,.18);border-color:rgba(52,211,153,.5)}.schedule-enable-v1 input:checked+.schedule-enable-track-v1 span{transform:translateX(18px);background:#34d399;box-shadow:0 0 11px rgba(52,211,153,.45)}.schedule-enable-v1 b{font-size:9px;letter-spacing:.1em;color:#9fb1bf}
.schedule-datetime-v1{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px 19px 8px}.schedule-datetime-v1 label>span{display:block;font-size:10px;color:#71879a;margin:0 0 6px}.schedule-datetime-v1 input{width:100%;height:42px;border-radius:9px;border:1px solid rgba(83,109,130,.28);background:#071019;color:#d8e6ef;padding:0 12px;font-size:13px;outline:none;color-scheme:dark}.schedule-datetime-v1 input:focus{border-color:rgba(34,211,238,.55);box-shadow:0 0 0 2px rgba(34,211,238,.07)}
.schedule-section-label-v1{padding:13px 19px 8px}.schedule-mode-grid-v1{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:0 19px 18px}.schedule-mode-v1{position:relative;display:grid;grid-template-columns:34px 1fr 16px;gap:9px;align-items:center;text-align:left;min-height:70px;border:1px solid rgba(77,103,123,.22);background:rgba(8,17,26,.78);border-radius:11px;padding:11px;color:#71879a;transition:.18s}.schedule-mode-v1>i:first-child{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:rgba(85,112,132,.08);font-size:13px}.schedule-mode-v1 strong{display:block;color:#b8c7d2;font-size:11px;line-height:1.25}.schedule-mode-v1 small{display:block;color:#566d7f;font-size:9px;margin-top:4px;line-height:1.3}.schedule-mode-check-v1{opacity:0;font-size:12px;color:#22d3ee}.schedule-mode-v1:hover{border-color:rgba(34,211,238,.3);background:rgba(9,23,34,.9)}.schedule-mode-v1.active{border-color:rgba(34,211,238,.55);background:rgba(8,145,178,.09);box-shadow:inset 0 0 0 1px rgba(34,211,238,.06)}.schedule-mode-v1.active>i:first-child{color:#70e8f8;background:rgba(34,211,238,.11)}.schedule-mode-v1.active strong{color:#e0f7fb}.schedule-mode-v1.active .schedule-mode-check-v1{opacity:1}
.schedule-mash-v1{margin:0 19px 18px;border:1px solid rgba(245,158,11,.18);border-radius:12px;background:rgba(245,158,11,.025);overflow:hidden}.schedule-mash-v1[hidden]{display:none!important}.schedule-mash-head-v1{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border-bottom:1px solid rgba(245,158,11,.12)}.schedule-mash-head-v1>i{color:#f59e0b;font-size:18px;opacity:.8}
.schedule-heaters-v1{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;padding:12px}.schedule-heater-v1{min-height:58px;border:1px solid rgba(93,111,128,.2);background:rgba(4,11,17,.45);border-radius:9px;padding:10px}.schedule-heater-g1-v1{display:flex;gap:15px;align-items:center}.schedule-check-v1{display:flex;align-items:center;gap:8px;cursor:pointer}.schedule-check-v1 input{position:absolute;opacity:0}.schedule-check-v1>span{width:18px;height:18px;border:1px solid #3b4f5f;background:#0a141d;border-radius:5px;position:relative}.schedule-check-v1 input:checked+span{border-color:#22d3ee;background:rgba(34,211,238,.16)}.schedule-check-v1 input:checked+span:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#75ecfa;font-size:11px;font-weight:900}.schedule-check-v1 b{font-size:12px;color:#ccd9e2}.schedule-check-v1 small{margin-left:auto;font-size:9px;color:#627789}.schedule-g1-power-v1{flex:1;min-width:130px}.schedule-g1-power-v1>label{display:block;font-size:9px;color:#657d8f;margin-bottom:5px}.schedule-g1-power-v1>div{display:grid;grid-template-columns:1fr 43px 13px;gap:6px;align-items:center}.schedule-g1-power-v1 input[type=range],.schedule-temp-control-v1 input[type=range]{width:100%;accent-color:#22d3ee}.schedule-g1-power-v1 input[type=number],.schedule-temp-control-v1 input[type=number]{width:100%;height:28px;border-radius:6px;border:1px solid rgba(78,105,126,.3);background:#071019;color:#e0edf4;text-align:center;font-size:11px}.schedule-g1-power-v1 span{font-size:9px;color:#73889a}.schedule-g1-power-v1 input:disabled{opacity:.3}
.schedule-temp-v1{display:grid;grid-template-columns:1fr minmax(250px,42%);gap:18px;align-items:center;padding:0 12px 13px}.schedule-temp-v1>div:first-child>span{display:block;color:#b9cad5;font-size:11px;font-weight:700}.schedule-temp-v1>div:first-child>small{display:block;color:#61798b;font-size:9px;line-height:1.45;margin-top:3px}.schedule-temp-control-v1{display:grid;grid-template-columns:1fr 72px;gap:10px;align-items:center}.schedule-temp-control-v1>div{display:grid;grid-template-columns:1fr 22px;align-items:center}.schedule-temp-control-v1 input[type=number]{height:34px}.schedule-temp-control-v1 span{font-size:11px;color:#91a8b8;text-align:right}
.schedule-actions-v1{display:flex;justify-content:flex-end;gap:9px;padding:15px 19px;border-top:1px solid rgba(78,103,124,.17);background:rgba(2,8,13,.18)}.schedule-actions-v1 button{height:38px;border-radius:8px;padding:0 15px;font-size:9px;font-weight:900;letter-spacing:.08em;display:inline-flex;align-items:center;gap:8px;transition:.18s}.schedule-delete-v1{border:1px solid rgba(248,113,113,.26);background:rgba(127,29,29,.07);color:#fda4af}.schedule-delete-v1:not(:disabled):hover{background:rgba(127,29,29,.16);border-color:rgba(248,113,113,.45)}.schedule-save-v1{border:1px solid rgba(34,211,238,.42);background:linear-gradient(145deg,rgba(8,145,178,.3),rgba(14,116,144,.22));color:#bcf6ff;min-width:190px;justify-content:center}.schedule-save-v1:not(:disabled):hover{border-color:rgba(103,232,249,.68);background:rgba(8,145,178,.36)}.schedule-actions-v1 button:disabled{opacity:.35;cursor:not-allowed}
.schedule-side-v1{display:grid;gap:11px}.schedule-summary-v1{overflow:hidden}.schedule-summary-head-v1{padding:12px 14px;border-bottom:1px solid rgba(78,103,124,.16);font-size:9px;font-weight:900;letter-spacing:.12em;color:#60798b}.schedule-summary-head-v1 i{color:#22d3ee;margin-right:7px}.schedule-summary-body-v1{padding:15px 14px;min-height:79px}.schedule-summary-body-v1 strong{display:block;color:#d6e5ee;font-size:12px}.schedule-summary-body-v1 span{display:block;color:#6d8394;font-size:10px;margin-top:5px;line-height:1.45}.schedule-sync-v1{display:flex;justify-content:space-between;gap:10px;padding:9px 14px;border-top:1px solid rgba(78,103,124,.13);font-size:9px;color:#526a7c}.schedule-sync-v1 b{color:#8298a8;font-weight:700}
.schedule-note-v1,.schedule-firmware-hint-v1{display:flex;gap:11px;padding:13px 14px}.schedule-note-v1>i,.schedule-firmware-hint-v1>i{width:26px;height:26px;flex:0 0 26px;border-radius:7px;background:rgba(34,211,238,.08);color:#48dced;display:grid;place-items:center;font-size:11px}.schedule-note-v1 strong{display:block;color:#adbfcb;font-size:10px}.schedule-note-v1 p{margin:4px 0 0;color:#62798a;font-size:9px;line-height:1.55}.schedule-note-warn-v1>i{background:rgba(245,158,11,.08);color:#f6b94c}.schedule-firmware-hint-v1{border-color:rgba(245,158,11,.25);color:#c9a66a;font-size:10px;line-height:1.5}.schedule-firmware-hint-v1[hidden]{display:none!important}
@media(max-width:1050px){.schedule-layout-v1{grid-template-columns:1fr}.schedule-side-v1{grid-template-columns:repeat(2,1fr)}.schedule-summary-v1{grid-row:span 2}.schedule-status-card-v1{width:360px}.schedule-mode-grid-v1{grid-template-columns:1fr}.schedule-mode-v1{min-height:58px}}
@media(max-width:700px){.schedule-view-v1{padding:14px 10px 28px}.schedule-page-head-v1{display:grid;gap:12px}.schedule-status-card-v1{width:100%;min-width:0}.schedule-page-head-v1 h2{font-size:22px}.schedule-datetime-v1{grid-template-columns:1fr;padding:14px 12px 6px}.schedule-mode-grid-v1{padding:0 12px 14px}.schedule-section-label-v1{padding-left:12px}.schedule-panel-head-v1{padding:14px 12px}.schedule-panel-head-v1>div>strong{font-size:11px}.schedule-mash-v1{margin:0 12px 14px}.schedule-heaters-v1{grid-template-columns:1fr 1fr}.schedule-heater-g1-v1{grid-column:1/-1}.schedule-temp-v1{grid-template-columns:1fr;gap:9px}.schedule-actions-v1{padding:12px;display:grid;grid-template-columns:1fr 2fr}.schedule-actions-v1 button{padding:0 8px;min-width:0}.schedule-side-v1{grid-template-columns:1fr}.schedule-summary-v1{grid-row:auto}}

/* ===== FW STATUS + NAV FIX V1 ===== */
.topbar-title-device-v1{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.topbar-title-device-v1 .topbar-product-name-v1{color:#f6f9fd;font-size:inherit;font-family:inherit;font-weight:inherit;letter-spacing:inherit}
.topbar-title-device-v1 .topbar-device-id-v1{color:#6e7d90;font-size:14px;font-family:ui-monospace,monospace;font-weight:500}
.firmware-version-badge-v1{display:inline-flex!important;align-items:center;height:20px;padding:0 7px;border:1px solid rgba(34,211,238,.16);border-radius:999px;background:rgba(34,211,238,.055);color:#718da0!important;font:800 9px/1 ui-monospace,monospace!important;letter-spacing:.04em!important;vertical-align:middle}
.firmware-version-badge-v1[hidden]{display:none!important}
.firmware-update-notice-v1{min-height:30px;margin:-3px 0 9px;padding:6px 10px;border:1px solid rgba(245,158,11,.16);border-radius:8px;background:rgba(245,158,11,.055);color:#b99150;display:flex;align-items:center;gap:8px;font-size:10px;line-height:1.35}
.firmware-update-notice-v1 i{color:#d9a23c;font-size:10px}
.firmware-update-notice-v1[hidden]{display:none!important}
@media(max-width:900px){
  .topbar-title-device-v1{gap:5px}
  .topbar-title-device-v1 .topbar-device-id-v1{font-size:11px}
  .firmware-version-badge-v1{height:18px;padding:0 5px;font-size:8px!important}
  .firmware-update-notice-v1{margin:-1px 0 6px;padding:5px 8px;font-size:9px}
}



/* ==========================================================================
   V7.4.0 — nagłówek urządzenia: FW widoczne również na telefonie + abonament
   ========================================================================== */
.topbar-device-block-v2{min-width:0}
.topbar-title-device-v2{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.topbar-title-device-v2 .topbar-product-name-v2{color:#f6f9fd;font-size:inherit;font-family:inherit;font-weight:inherit;letter-spacing:inherit;white-space:nowrap}
.topbar-device-meta-v2{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.topbar-device-id-v2{color:#6e7d90!important;font:500 14px/1 ui-monospace,monospace!important}
.firmware-version-badge-v2,.subscription-expiry-badge-v1{display:inline-flex!important;align-items:center;min-height:20px;padding:0 7px;border-radius:999px;white-space:nowrap;font:800 9px/1 ui-monospace,monospace!important;letter-spacing:.04em!important}
.firmware-version-badge-v2{border:1px solid rgba(34,211,238,.18);background:rgba(34,211,238,.06);color:#7693a5!important}
.subscription-expiry-badge-v1{border:1px solid rgba(94,234,212,.16);background:rgba(94,234,212,.05);color:#7fa99f!important}
.subscription-expiry-badge-v1.is-expired{border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.08);color:#d6a550!important}
.firmware-version-badge-v2[hidden],.subscription-expiry-badge-v1[hidden]{display:none!important}

.subscription-expired-modal-v1{position:fixed;inset:0;z-index:99990;display:flex;align-items:center;justify-content:center;padding:18px}
.subscription-expired-modal-v1[hidden]{display:none!important}
.subscription-expired-backdrop-v1{position:absolute;inset:0;background:rgba(1,5,10,.78);backdrop-filter:blur(5px)}
.subscription-expired-box-v1{position:relative;width:min(440px,100%);border:1px solid rgba(245,158,11,.30);border-radius:16px;background:linear-gradient(155deg,#0b151f,#060c13);box-shadow:0 24px 70px rgba(0,0,0,.55);padding:22px}
.subscription-expired-icon-v1{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:rgba(245,158,11,.10);color:#f1b94e;font-size:18px;margin-bottom:14px}
.subscription-expired-box-v1 h2{margin:0;color:#f2f6f8;font-size:20px;font-weight:850}
.subscription-expired-box-v1 p{margin:9px 0 18px;color:#8da2b1;font-size:13px;line-height:1.55}
.subscription-expired-box-v1 strong{color:#e2b45d}
.subscription-expired-ok-v1{width:100%;height:42px;border:1px solid rgba(34,211,238,.28);border-radius:9px;background:rgba(34,211,238,.10);color:#d7f8fb;font-size:11px;font-weight:900;letter-spacing:.08em;cursor:pointer}
.subscription-expired-ok-v1:hover{background:rgba(34,211,238,.15)}

@media(max-width:700px){
  .topbar-v4{height:auto!important;min-height:58px!important;overflow:visible!important;padding-top:6px!important;padding-bottom:6px!important}
  .topbar-device-block-v2{width:100%;min-width:0}
  .topbar-title-device-v2{margin:0!important;display:block!important;line-height:1.08}
  .topbar-title-device-v2 .topbar-product-name-v2{display:block;font-size:16px!important}
  .topbar-device-meta-v2{display:flex!important;margin-top:5px;gap:5px}
  .topbar-device-id-v2{font-size:10px!important}
  .firmware-version-badge-v2,.subscription-expiry-badge-v1{min-height:17px;padding:0 5px;font-size:8px!important}
  .subscription-expired-box-v1{padding:18px}
  .subscription-expired-box-v1 h2{font-size:18px}
  .subscription-expired-box-v1 p{font-size:12px}
}


/* ==========================================================================
   V7.4.0 UI R2 — FW/ID czytelniejsze + wersja widoczna na telefonie
   ========================================================================== */

/* Desktop: ID i wersja odrobinę większe, ale nadal drugorzędne względem nazwy. */
.topbar-device-id-v2{
  font-size:16px!important;
  line-height:1!important;
}
.firmware-version-badge-v2{
  min-height:22px;
  padding:0 8px;
  font-size:10px!important;
}
.subscription-expiry-badge-v1{
  min-height:22px;
  padding:0 8px;
  font-size:9.5px!important;
}

/* Komunikat o dostępnej wersji ma być łatwy do zauważenia, lecz bez alarmowego charakteru. */
.firmware-update-notice-v1{
  min-height:34px;
  padding:7px 12px;
  font-size:11px;
  line-height:1.4;
}
.firmware-update-notice-v1 i{
  font-size:11px;
}

/* Badge FW nie znika: przed odebraniem danych pokazuje FW —. */
.firmware-version-badge-v2[hidden]{
  display:inline-flex!important;
}

@media(max-width:700px){
  .topbar-device-meta-v2{
    align-items:center;
    gap:7px;
  }
  .topbar-device-id-v2{
    font-size:13px!important;
  }
  .firmware-version-badge-v2{
    min-height:20px;
    padding:0 7px;
    font-size:10px!important;
  }
  .subscription-expiry-badge-v1{
    min-height:20px;
    padding:0 7px;
    font-size:9px!important;
  }
  .firmware-update-notice-v1{
    margin:4px 0 8px;
    min-height:34px;
    padding:7px 10px;
    font-size:10px;
    line-height:1.45;
  }
}

/* ===== HMI V7.4.0 TEST — kafelek Obsługa ekranu ===== */
.param-screen-panel-v274 .screen-settings-fields-v274{margin-bottom:10px}
.param-screen-panel-v274 .screen-off-field-v274{grid-column:1/-1}
.param-screen-panel-v274 .param-field-v15>small{display:block;margin-top:5px;color:#536a7e;font-size:9px;line-height:1.35}
.param-screen-panel-v274 .screen-touch-switch-v274{margin-top:4px}
@media(max-width:700px){
  .param-screen-panel-v274 .screen-settings-fields-v274{grid-template-columns:1fr 1fr}
  .param-screen-panel-v274 .screen-off-field-v274{grid-column:1/-1}
}


/* ===== HMI V7.4.0 TEST — kalibracja touch uruchamiana z HMI ===== */
.screen-calibration-action-v274{
  margin-top:10px;
  padding:10px;
  border:1px solid rgba(167,139,250,.14);
  border-radius:10px;
  background:rgba(9,16,25,.55);
}
.screen-calibration-button-v274{
  width:100%;
  min-height:40px;
  border:1px solid rgba(167,139,250,.34);
  border-radius:9px;
  background:linear-gradient(145deg,rgba(79,70,229,.20),rgba(88,28,135,.12));
  color:#d9d1ff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.05em;
  cursor:pointer;
}
.screen-calibration-button-v274 i{margin-right:7px}
.screen-calibration-button-v274:hover:not(:disabled){
  border-color:rgba(167,139,250,.62);
  background:linear-gradient(145deg,rgba(79,70,229,.29),rgba(88,28,135,.18));
}
.screen-calibration-button-v274:disabled{opacity:.35;cursor:not-allowed}
.screen-calibration-action-v274>small{
  display:block;
  margin-top:7px;
  color:#607489;
  font-size:9px;
  line-height:1.4;
}