:root {
  --bg: #0b1017;
  --panel: #121a24;
  --panel-2: #172231;
  --line: #243244;
  --text: #e6edf5;
  --muted: #8a9bb0;
  --green: #22c55e;
  --green-glow: rgba(34, 197, 94, .55);
  --red: #ef4444;
  --red-glow: rgba(239, 68, 68, .5);
  --amber: #f59e0b;
  --blue: #38bdf8;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif; }
body { padding: 16px; min-height: 100vh; }
.wrap { max-width: 1400px; margin: 0 auto; display: grid; gap: 16px; }
[hidden] { display: none !important; }

/* Felső sáv és fülek */
.topbar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 10px 20px; }
.brand h1 { margin: 0; font-size: 20px; letter-spacing: .02em; }
.brand .sub { color: var(--muted); font-size: 12px; margin-top: 2px; white-space: nowrap; }
/* Üzemmód: LIVE = csak hardveres vezérlés; DEBUG = webes vezérlés is, villogó jelzéssel */
.uzemmod-jel { margin-left: 8px; padding: 1px 7px; border-radius: 6px; font: 700 10.5px var(--mono); letter-spacing: .06em; }
.uzemmod-jel.live { color: #bbf7d0; background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.5); }
.uzemmod-jel.debug { color: #1a0a00; background: #f97316; animation: debugVillog 1s steps(2, start) infinite; }
/* Az adatpartíció módja: csak olvasható (normál) / írható (fejlesztés – figyelmeztető) */
.iras-jel { margin-left: 6px; padding: 1px 7px; border-radius: 6px; font: 700 10.5px var(--mono); letter-spacing: .06em; }
.iras-jel.olvashato { color: #bbf7d0; background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.5); }
.iras-jel.irhato { color: #1a0a00; background: #fbbf24; border: 1px solid #f59e0b; }
.debug-sav { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; padding: 9px 16px; border-radius: 12px;
  background: #ea580c; color: #fff; font-size: 13.5px; position: sticky; top: 0; z-index: 25;
  animation: debugHatter 1s steps(2, start) infinite; }   /* csak a háttér villog: a szöveg olvasható marad */
@keyframes debugHatter { 0% { background: #ea580c; } 50% { background: #7c2d12; } 100% { background: #ea580c; } }
.debug-sav b { font-size: 15px; letter-spacing: .12em; }
.debug-figy { flex-basis: 100%; font-size: 12.5px; font-weight: 600; }
/* csak DEBUG üzemmódban látszó figyelmeztetések (LIVE-ban rejtve) */
body.live .debug-csak, body:not(.live):not(.debug) .debug-csak { display: none; }
.fok-figy { color: #fdba74; font-size: 11.5px; white-space: nowrap; cursor: help; }
@keyframes debugVillog { 0% { opacity: 1; } 50% { opacity: .35; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .debug-sav, .uzemmod-jel.debug { animation-duration: 2.4s; } }
/* LIVE: a webes vezérlők csak mutatnak (a szerver is elutasítja) */
body.live #devices .dev, body.live #fokapcsolo button, body.live #speed button, body.live #timeForm,
body.live #bar, body.live .g-kapcsolo, body.live .g-nyil-gomb, body.live .g-fokapcsolo,
body.live [data-kijelzo="ora"], body.live .g-ora-panel { cursor: not-allowed; }
body.live #fokapcsolo, body.live #speed, body.live #timeForm { opacity: .5; }
.conn { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted); margin-right: 6px; vertical-align: middle; }
.conn.ok { background: var(--green); box-shadow: 0 0 8px var(--green-glow); }
.conn.err { background: var(--red); }
.tabs { display: flex; gap: 6px; margin-left: auto; background: var(--bg); padding: 4px; border-radius: 10px;
  border: 1px solid var(--line); }
.tabs button { display: flex; align-items: center; gap: 8px; background: transparent; color: var(--muted); border: 0;
  padding: 9px 16px; border-radius: 7px; font: 600 14px system-ui, sans-serif; cursor: pointer; }
.tabs button:hover { color: var(--text); }
.tabs button.on { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.tabs svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
.tabs .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.miniclock { font: 600 20px var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); padding: 0 6px; }

/* Kijelzők: idősáv fejléc */
.simhead { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; }
.clock { font-family: var(--mono); font-size: 44px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; text-align: center; margin-bottom: 10px; }
.bar { position: relative; height: 22px; border-radius: 6px; background: var(--panel-2);
  border: 1px solid var(--line); overflow: hidden; cursor: pointer; }
.zone { position: absolute; top: 0; bottom: 0; }
.zone.solar { background: rgba(245, 158, 11, .28); }
.zone.peak { background: rgba(56, 189, 248, .22); }
.zone.ev { top: auto; height: 4px; background: rgba(34, 197, 94, .7); }
.cursor { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text);
  box-shadow: 0 0 6px rgba(255,255,255,.7); }
.ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted);
  font-family: var(--mono); margin-top: 4px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin-top: 6px; justify-content: center; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.controls { display: grid; gap: 8px; justify-items: end; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { background: var(--panel-2); color: var(--muted); border: 0; padding: 7px 11px;
  font: 600 13px var(--mono); cursor: pointer; border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--blue); color: #04121c; }
.settime { display: flex; gap: 6px; }
input, select { background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 8px; font: 14px var(--mono); color-scheme: dark; }
input:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
.btn { background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 14px; font: 600 13px system-ui, sans-serif; cursor: pointer; }
.btn:hover { border-color: var(--blue); }
.btn.primary { background: var(--blue); color: #04121c; border-color: var(--blue); }
.btn:disabled { opacity: .45; cursor: default; border-color: var(--line); }

/* Fő rács */
.dash { display: grid; grid-template-columns: 300px 1fr 300px; gap: 16px; align-items: start; }

/* Kijelzők oldal: az aktuális mód logikai működése (lenyitható, a napló fölött) */
.logika { margin-top: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.logika summary { cursor: pointer; padding: 12px 16px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  list-style: none; user-select: none; }
.logika summary::-webkit-details-marker { display: none; }
.logika summary::before { content: "▸"; color: var(--blue); transition: transform .2s; display: inline-block; }
.logika[open] summary::before { transform: rotate(90deg); }
.logika summary:hover .logika-cim { color: var(--text); }
.logika-cim { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.logika summary b { color: var(--text); font-size: 14px; }
.logika-tipp { margin-left: auto; color: var(--muted); font-size: 12px; }
.logika[open] .logika-tipp { display: none; }
.logika-tartalom { padding: 0 20px 16px 20px; display: grid; gap: 10px; font-size: 13.5px; line-height: 1.5; color: #c9d4e1; }
.logika-tartalom p { margin: 0; }
.logika-tartalom ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.logika-megj { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12.5px; }
.logika-most { border-top: 1px solid var(--line); padding-top: 10px; }
.logika-most h3 { margin: 0 0 6px; font-size: 13px; color: var(--text); }
.logika-most h3 span { color: var(--muted); font-weight: 400; }
.logika-most ol { font: 12.5px var(--mono); color: #8fb8e0; gap: 3px; }
section { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
section h2, .h2 { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; }

/* Fogyasztó gombok */
.devices { display: grid; gap: 10px; }
.dev { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; width: 100%;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px;
  color: var(--text); cursor: pointer; text-align: left; font: inherit; transition: border-color .15s, background .15s; }
.dev:hover:not(:disabled) { border-color: #3a4d66; }
.dev:disabled { cursor: not-allowed; }
.nyomhato-jel { width: 10px; height: 10px; border-radius: 50%; background: #26343a; }
.dev.nyomhato .nyomhato-jel { background: #fff; box-shadow: 0 0 8px #ffffff99; }
.dev.on { border-color: var(--green); background: rgba(34, 197, 94, .08); }
.dev .name { font-weight: 600; font-size: 15px; }
.dev .note { font-size: 12px; color: var(--muted); margin-top: 2px; }
.dev .state { font: 600 12px var(--mono); padding: 4px 8px; border-radius: 6px; background: var(--bg); color: var(--muted); }
.dev.on .state { color: var(--green); }
.dev.idle .state { color: var(--amber); }
.dev.off { opacity: .45; }
.dev.off .state { color: var(--red); }
.dev svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.dev.on svg { color: var(--green); }
.kline { margin-top: 12px; font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; }
.kline b { font-family: var(--mono); color: var(--text); font-size: 16px; }

/* Kijelzők */
.meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.meter { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.meter.big { grid-column: 1 / -1; }
.meter .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.meter .value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 600; margin: 4px 0 10px; }
.meter.big .value { font-size: 52px; }
.meter .value small { font-size: .45em; color: var(--muted); margin-left: 4px; }
.meter .value.warn { color: var(--amber); }
.meter .value.bad { color: var(--red); }
.gauge { position: relative; height: 10px; border-radius: 5px; background: var(--bg); overflow: hidden; }
.gauge .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blue); border-radius: 5px; transition: width .3s; }
.gauge .needle { position: absolute; top: -2px; bottom: -2px; width: 3px; margin-left: -1px; background: var(--text); border-radius: 2px; transition: left .3s; }
.scale { display: flex; justify-content: space-between; font: 11px var(--mono); color: var(--muted); margin-top: 4px; }
.steps { display: grid; gap: 3px; }
.steps div { height: 18px; border-radius: 3px; background: var(--bg); font: 10px var(--mono); color: var(--muted);
  display: grid; place-items: center; }
.steps div.on { background: var(--blue); color: #04121c; font-weight: 700; }
.steps div.mid { outline: 1px dashed var(--line); outline-offset: -1px; }
.sub2 { font: 12px var(--mono); color: var(--muted); margin-top: 6px; }
.solar { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line); font-size: 14px; }
.solar .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); flex: none; }
.solar.prod { border-color: var(--green); } .solar.prod .dot { background: var(--green); box-shadow: 0 0 10px var(--green-glow); }
.solar.off { border-color: var(--red); } .solar.off .dot { background: var(--red); box-shadow: 0 0 10px var(--red-glow); }

/* LED panel */
.leds { display: grid; gap: 6px; }
.led { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); font-size: 14px; }
.led .l { width: 14px; height: 14px; border-radius: 50%; flex: none; transition: background .2s, box-shadow .2s; }
.led .l.zold { background: var(--green); box-shadow: 0 0 10px var(--green-glow), inset 0 -2px 3px rgba(0,0,0,.3); }
.led .l.piros { background: var(--red); box-shadow: 0 0 10px var(--red-glow), inset 0 -2px 3px rgba(0,0,0,.3); }
.led .t { font: 11px var(--mono); color: var(--muted); margin-left: auto; }

/* Grafika */
.stage { position: relative; min-height: 560px; border-radius: 14px; border: 1px solid var(--line); overflow: hidden;
  background: var(--panel) center / contain no-repeat; }
.stage.empty { display: grid; place-items: center; border-style: dashed; border-width: 2px;
  background-image: repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,.015) 14px 28px); }
.placeholder { text-align: center; color: var(--muted); max-width: 440px; padding: 24px; }
.placeholder svg { width: 56px; height: 56px; stroke: currentColor; fill: none; stroke-width: 1.4; opacity: .7; }
.placeholder h3 { color: var(--text); margin: 12px 0 6px; font-size: 18px; }
.placeholder code { font-family: var(--mono); background: var(--panel-2); padding: 2px 6px; border-radius: 4px; color: var(--text); }
.hud { position: absolute; top: 14px; right: 14px; display: grid; gap: 4px; min-width: 200px;
  background: rgba(11, 16, 23, .82); backdrop-filter: blur(4px); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; font: 13px var(--mono); }
.hud .row { display: flex; justify-content: space-between; gap: 16px; }
.hud .row span:first-child { color: var(--muted); }
.hud .big { font-size: 26px; font-weight: 600; text-align: center; margin-bottom: 4px; }

/* Grafika: háttérkép + ráillesztett elemek. A koordináták a kép %-ában vannak (img/hatter.json),
   a méretek a kép szélességéhez (cqw) igazodnak, így bármekkora kijelzőn a helyükön maradnak. */
.grafika-wrap { position: relative; display: grid; place-items: center; }
.kep { position: relative; width: 100%; aspect-ratio: var(--arany, 1.3329); container-type: inline-size;
  user-select: none; -webkit-user-select: none;   /* dupla kattintás ne jelöljön ki szöveget */
  background: #0b1017 center / 100% 100% no-repeat; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); }
.kep-reteg { position: absolute; inset: 0; }
.fs-btn { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; opacity: .85; }
.fs-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.grafika-wrap:fullscreen { background: #000; width: 100vw; height: 100vh; }
.grafika-wrap:fullscreen .kep { width: min(100vw, calc(100vh * var(--arany, 1.3329))); border: 0; border-radius: 0; }
.grafika-wrap:fullscreen .fs-btn { opacity: 0; transition: opacity .2s; }
.grafika-wrap:fullscreen:hover .fs-btn { opacity: .8; }

/* LED: a nyomtatott LED fölé; kikapcsolva a címke alapszínével elsötétít, bekapcsolva ragyog */
.g-led { position: absolute; width: var(--led, .9cqw); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; }
.g-led.ki { background: rgba(1, 39, 62, .82); box-shadow: inset 0 0 .15cqw rgba(0,0,0,.6); }
.g-led.be.piros { box-shadow: 0 0 .6cqw .15cqw rgba(239, 68, 68, .75); background: rgba(255, 120, 100, .25); }
.g-led.be.zold  { box-shadow: 0 0 .6cqw .15cqw rgba(150, 214, 40, .75); background: rgba(200, 255, 120, .2); }
.g-led.be.sarga { box-shadow: 0 0 .6cqw .15cqw rgba(253, 234, 8, .75); background: rgba(255, 250, 170, .25); }

/* Számkijelző: eltakarja a nyomtatott "1234"-et, pontmátrix hatású zöld számokkal */
.g-kijelzo { position: absolute; display: flex; align-items: center; justify-content: flex-end;
  padding: 0 .35cqw; background: #181715; border-radius: .2cqw; overflow: hidden;
  font: 700 1.45cqw/1 var(--mono); letter-spacing: .02em; font-variant-numeric: tabular-nums;
  color: #8bdc3c; text-shadow: 0 0 .35cqw rgba(139, 220, 60, .55); white-space: nowrap; }
.g-kijelzo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, transparent 38%, rgba(24, 23, 21, .55) 40%) 0 0 / .16cqw .16cqw; }
.g-kijelzo.kozep { justify-content: center; }
/* olyan kijelző, aminek a háttérképen nincs mezője (pl. a 100% az óra alatt): saját sötétkék keret */
.g-kijelzo.keret { overflow: visible; box-shadow: 0 0 0 .45cqw #012740; border-radius: .25cqw; }
.g-kijelzo .t { display: inline-block; transform: scaleY(1.3); }
.g-kijelzo.ido { font-size: 1.3cqw; letter-spacing: -.03em; padding: 0 .15cqw; cursor: pointer; overflow: visible; }
.g-kijelzo.ido:hover { box-shadow: 0 0 0 .18cqw rgba(56, 189, 248, .85), 0 0 .8cqw rgba(56, 189, 248, .45); }
.grafika-fal-status { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.grafika-fal-status.figyelmeztetes { color: #fbbf24; }
.g-kijelzo.g-masolat { display: block; padding: 0; background: #000; text-shadow: none; }
.g-kijelzo.g-masolat::after { display: none; }
.g-masolat img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.g-masolat img[hidden] { display: none; }
.g-masolat.ismeretlen { outline: .08cqw dashed #6b7280; }
.g-masolat.kapcsolat-hiba { outline: .1cqw dashed #f59e0b; }
.g-led.ismeretlen, .g-nyil.ismeretlen { outline: .06cqw dashed #9ca3af; }

/* Szimulációs óra panel a grafikán (px méretű, hogy kis képen is kezelhető legyen) */
.g-ora-panel { position: absolute; z-index: 5; width: 250px; display: grid; gap: 10px; padding: 12px 14px 12px;
  background: rgba(11, 16, 23, .95); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45); font-size: 13px; user-select: text; -webkit-user-select: text; cursor: default; }
.g-ora-panel .fej { display: flex; justify-content: space-between; align-items: center; }
.g-ora-panel .x { background: none; border: 0; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.g-ora-panel .x:hover { color: var(--text); }
.g-ora-panel .sor { display: flex; gap: 6px; }
.g-ora-panel .sor > * { flex: 1; }
.g-ora-panel input[type=time] { font-size: 16px; }
.g-ora-panel .seg { display: flex; }
.g-ora-panel .seg button { flex: 1; }
.g-ora-panel .tipp { color: var(--muted); font-size: 11px; text-align: center; }
.g-kijelzo .vesszo { display: inline-block; width: .3em; text-align: center; margin: 0 -.05em; }
.g-kijelzo.hiba { color: #ff6b5b; text-shadow: 0 0 .35cqw rgba(255, 107, 91, .6); }

/* Fehér gombfény: kikapcsolva a háttér nyomtatott fehér pöttyét is elfedi. */
.g-gomb { position: absolute; width: var(--gomb, 1.7cqw); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; }
.g-gomb::before { content: ""; position: absolute; inset: 22%; border-radius: 50%;
  background: #26343a; box-shadow: inset 0 0 .12cqw rgba(0,0,0,.8); }
.g-gomb.be::before { background: #fff;
  box-shadow: 0 0 0 .12cqw #fff, 0 0 .7cqw .2cqw rgba(255,255,255,.8); }

/* Kattintható kapcsoló: a teljes címke (LED-ektől a nyomógombig) */
.g-kapcsolo { position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer;
  border-radius: 99px; transition: box-shadow .15s, background .15s; -webkit-tap-highlight-color: transparent; }
.g-kapcsolo:hover:not(:disabled) { box-shadow: 0 0 0 .18cqw rgba(56, 189, 248, .85), 0 0 .8cqw rgba(56, 189, 248, .45); }
.g-kapcsolo:disabled { cursor: not-allowed; }
.g-kapcsolo:focus-visible { outline: .18cqw solid var(--blue); outline-offset: .1cqw; }
.g-kapcsolo.nyomva { animation: nyomas .35s ease-out; }
@keyframes nyomas { 0% { background: rgba(255, 255, 255, .28); } 100% { background: transparent; } }

/* Csapolás nyilak */
.g-nyil { position: absolute; width: .95cqw; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  pointer-events: none; transition: background .25s, box-shadow .25s; }
.g-nyil.ki { background: rgba(1, 39, 62, .7); }
.g-nyil.be { background: #fff; box-shadow: 0 0 .6cqw .2cqw rgba(255, 255, 255, .9); }
/* a nyíl fölötti kattintható gomb: kézi fokozatállítás (a falon fizikai gomb lesz) */
/* A fel és a le nyíl közel van egymáshoz: a „fel” gomb területe felfelé, a „le” gombé lefelé nyúlik, ne fedjék egymást */
.g-nyil-gomb { position: absolute; width: 2.2cqw; height: 1.6cqw; padding: 0; border: 0;
  border-radius: .6cqw; background: transparent; cursor: pointer; transition: box-shadow .15s, background .15s;
  -webkit-tap-highlight-color: transparent; }
.g-nyil-gomb[data-irany="fel"] { transform: translate(-50%, -78%); }
.g-nyil-gomb[data-irany="le"] { transform: translate(-50%, -22%); }
.g-nyil-gomb:hover:not(:disabled) { box-shadow: 0 0 0 .18cqw rgba(56, 189, 248, .85), 0 0 .8cqw rgba(56, 189, 248, .45); }
.g-nyil-gomb:focus-visible { outline: .18cqw solid var(--blue); outline-offset: .1cqw; }
.g-nyil-gomb:disabled { cursor: not-allowed; }
.g-nyil-gomb.nyomva { animation: nyomas .35s ease-out; }

/* Akkumulátor ikon */
.g-akku { position: absolute; display: flex; align-items: center; background: #012740; }
.g-akku .test { flex: 1; height: 78%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7%;
  padding: 5% 6%; border: .14cqw solid #e6edf5; border-radius: .15cqw; }
.g-akku .fej { width: 5%; height: 36%; background: #e6edf5; border-radius: 0 .1cqw .1cqw 0; }
.g-akku .cella { border-radius: .06cqw; background: rgba(255,255,255,.12); transition: background .3s; }
.g-akku .cella.tele { background: #e6edf5; }
.g-akku.betarol .cella.tele { background: var(--green); box-shadow: 0 0 .3cqw var(--green-glow); }
.g-akku.kitarol .cella.tele { background: var(--red); box-shadow: 0 0 .3cqw var(--red-glow); }
.g-akku.betarol .cella.kovetkezo { animation: villog 1s steps(2, jump-none) infinite; background: var(--green); }

.g-kijelzo.ures .t { color: #3a4a32; text-shadow: none; }

/* Főkapcsoló a grafikán: kattintásra lép 1 → 2 → 3 → 4 */
.g-fokapcsolo { position: absolute; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: .5cqw; }
.g-fokapcsolo:hover { box-shadow: 0 0 0 .2cqw rgba(56, 189, 248, .8); }
.g-fokapcsolo .allas { position: absolute; top: -.6cqw; right: -.6cqw; min-width: 1.5cqw; height: 1.5cqw; padding: 0 .3cqw;
  border-radius: .75cqw; background: #012740; border: .12cqw solid #fab800; color: #fab800;
  font: 800 1cqw/1.3cqw system-ui, sans-serif; display: grid; place-items: center; }
/* a főkapcsoló alatt egy sorban: állapotfelirat + Kikapcsolás gomb */
.g-fok-sor { position: absolute; transform: translateX(-50%); display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; white-space: nowrap; }      /* a felirat középen a főkapcsoló alatt, a gomb mellette jobbra */
.g-fok-sor .g-fok-nev { grid-column: 2; }
.g-fok-nev { background: #012740; color: #fab800; font: 700 .85cqw system-ui, sans-serif; padding: .2cqw .5cqw; border-radius: .4cqw; }
.g-fokapcsolo svg { position: absolute; inset: 18%; width: 64%; height: 64%; transition: transform .3s; }
/* Külön Kikapcsolás gomb a főkapcsoló alatt (STANDBY, megerősítéssel) */

@keyframes villog { 50% { opacity: .25; } }

/* Nap és hold ikon: az aktív ragyog, az inaktív az égbolt színével elhalványul */
.g-ikon { position: absolute; border-radius: 50%; pointer-events: none; }
.g-ikon.halvany { background: radial-gradient(circle, rgba(208, 218, 230, .82) 0 62%, rgba(208, 218, 230, 0) 72%); }
.g-ikon.nap.aktiv { background: radial-gradient(circle, rgba(255, 214, 64, 0) 0 38%, rgba(255, 214, 64, .38) 50%, rgba(255, 214, 64, 0) 72%); }
.g-ikon.hold.aktiv { background: radial-gradient(circle, rgba(120, 160, 255, 0) 0 40%, rgba(120, 160, 255, .32) 52%, rgba(120, 160, 255, 0) 72%); }
@keyframes nap-fenyes { 50% { transform: scale(1.12); } }

/* Villogó kettőspont az órákon */
.kettospont { animation: kettospont 1s steps(1, end) infinite; }
@keyframes kettospont { 50% { opacity: 0; } }

/* A Kijelzők oldal helyi tesztje; a Grafika kizárólag a falra küldött képet / parancsot követi. */
.lampateszt #view-kijelzok .led .l, .lampateszt #view-kijelzok .meter .value,
.lampateszt #view-kijelzok .clock {
  animation: lampaVillog .5s steps(1, end) infinite !important; }
@keyframes lampaVillog { 0% { opacity: 1; } 50% { opacity: .08; } }
.lampateszt .led .l { background: #fff !important; box-shadow: 0 0 10px rgba(255,255,255,.8) !important; }
.lampateszt .meter .value { color: #fff !important; }

/* Főkapcsoló a Kijelzők oldalon */
.fokapcsolo-ctl { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
#fokapcsolo button { font-family: system-ui, sans-serif; }
#fokapcsolo button.on { background: #fab800; color: #1a1400; }
.led .l.ki { background: #2a2f3a; }
#fokapcsolo button.fok-standby.on { background: #f97316; color: #1a0a00; }   /* STARTED / STANDBY */

/* Hátoldal */
.hatoldal { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 12px; }
.hatoldal-fej { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hatoldal-fej span { color: var(--muted); font: 12px var(--mono); margin-left: 10px; }
.hatoldal img { width: 100%; height: auto; display: block; border-radius: 8px; background: #fff; }
.hatoldal-gombok { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kapcs-cimke { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); cursor: pointer; margin-right: 6px; }

/* Hátoldal: hálózati kapcsolatok a kép fölött (SVG, a kép képpontjaiban) */
.hatoldal-vaszon { position: relative; }
.ho-rajz { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ho-rajz.rejtett { display: none; }
.ho-vonal { fill: none; stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; stroke: #7b8796; stroke-dasharray: 14 10;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.7)); transition: stroke .3s; }
.ho-vonal.ok { stroke: var(--green); stroke-dasharray: none; }
.ho-vonal.ingadozo { stroke: var(--amber); stroke-dasharray: none; }
.ho-vonal.hiba { stroke: var(--red); stroke-dasharray: none; stroke-width: 7; animation: villog 1.2s steps(2, jump-none) infinite; }
.ho-eszkoz { cursor: pointer; }
.ho-eszkoz rect { fill: rgba(11, 21, 34, .88); stroke: #7b8796; stroke-width: 2.5; }
.ho-eszkoz.switch rect, .ho-eszkoz.router rect, .ho-eszkoz.pc rect { fill: rgba(19, 37, 58, .94); }
.ho-eszkoz.ok rect { stroke: var(--green); }
.ho-eszkoz.ingadozo rect { stroke: var(--amber); }
.ho-eszkoz.hiba rect { stroke: var(--red); }
.ho-eszkoz text { fill: #e6edf5; font: 700 19px system-ui, sans-serif; dominant-baseline: middle; pointer-events: none; }
.ho-eszkoz text.ip { fill: #8fb8e0; font: 15px var(--mono); }
.ho-eszkoz circle { fill: #5b6b80; }
.ho-eszkoz.ok circle { fill: var(--green); }
.ho-eszkoz.ingadozo circle { fill: var(--amber); }
.ho-eszkoz.hiba circle { fill: var(--red); animation: villog 1.2s steps(2, jump-none) infinite; }
.ho-rajz.szerkeszt .ho-eszkoz { cursor: grab; }
.ho-rajz.szerkeszt .ho-eszkoz rect { stroke-dasharray: 8 5; }
.ho-rajz.szerkeszt .ho-eszkoz.huzva { cursor: grabbing; }
.ho-rajz.szerkeszt .ho-eszkoz.huzva rect { stroke: var(--blue); stroke-width: 4; }

/* Hálózat */
.halozat-gombok { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.halozat-cim { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.halozat-cim b { font-size: 16px; }
.halozat-osszeg { font-size: 14px; color: var(--text); }
.halozat-osszeg b.ok { color: var(--green); } .halozat-osszeg b.hiba { color: var(--red); }
.halozat-ido { font: 12px var(--mono); color: var(--muted); }
/* Internet státusz sáv (Hálózat oldal) */
.internet-sav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line); font-size: 14px; }
.internet-sav .led { width: 12px; height: 12px; border-radius: 50%; background: #5b6b80; flex: none; }
.internet-sav .reszlet { color: var(--muted); font: 12px var(--mono); margin-left: auto; }
.internet-sav.ok { border-color: rgba(34,197,94,.6); } .internet-sav.ok .led { background: var(--green); box-shadow: 0 0 8px var(--green-glow); }
.internet-sav.ok #internetAllapot { color: #86efac; }
.internet-sav.figyel { border-color: rgba(245,158,11,.6); } .internet-sav.figyel .led { background: var(--amber); }
.internet-sav.figyel #internetAllapot { color: #fcd34d; }
.internet-sav.hiba { border-color: rgba(239,68,68,.6); } .internet-sav.hiba .led { background: var(--red); animation: villog 1.2s steps(2, jump-none) infinite; }
.internet-sav.hiba #internetAllapot { color: #fca5a5; }
.hz-eszkoz.internet .hz-csik { fill: #a78bfa; }

.halozat-jelmagyarazat { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); align-items: center; }
.halozat-jelmagyarazat .hj { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.hj.ok, .halozat-reszlet .tortenet i.ok { background: var(--green); }
.hj.ingadozo { background: var(--amber); }
.hj.hiba, .halozat-reszlet .tortenet i.hiba { background: var(--red); }
.hj.nincs { background: #5b6b80; }
.halozat-tipp { margin-left: auto; }
.halozat-keret { overflow: auto; max-height: calc(100vh - 250px); border-radius: 10px; background: var(--bg);
  border: 1px solid var(--line); touch-action: pan-x pan-y; }
.halozat-keret.nagyitva { cursor: grab; }
.halozat-keret.huz { cursor: grabbing; user-select: none; }
#halozatRajz { display: block; width: 100%; height: auto; font-family: system-ui, "Segoe UI", sans-serif; }

/* Az ábra elemei */
.hz-panelfej { fill: var(--panel-2); stroke: var(--line); }
.hz-panelcim { fill: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-anchor: middle; }
.hz-elvalaszto { stroke: #3a4a5e; stroke-width: 2; stroke-dasharray: 1 6; stroke-linecap: round; }
.hz-vonal { fill: none; stroke: #4a5b70; stroke-width: 2; }
.hz-vonal.kabel { stroke: #3b82b6; stroke-width: 3; }
.hz-cimke { fill: var(--muted); font-size: 10px; }
.hz-csonk { fill: none; stroke: #4a5b70; stroke-width: 2; transition: stroke .3s; }
.hz-csonk.ok { stroke: var(--green); } .hz-csonk.ingadozo { stroke: var(--amber); }
.hz-csonk.hiba { stroke: var(--red); stroke-dasharray: 4 3; }
.hz-vonal.kabel.hiba { stroke: var(--red); stroke-dasharray: 6 4; }
.hz-eszkoz { cursor: default; }
.hz-eszkoz[data-ip]:not([data-ip=""]) { cursor: pointer; }
.hz-eszkoz:focus { outline: none; }
.hz-doboz { fill: var(--panel-2); stroke: #3a4a5e; stroke-width: 1.5; transition: stroke .3s, fill .3s; }
.hz-eszkoz:hover .hz-doboz, .hz-eszkoz:focus-visible .hz-doboz { fill: #1d2b3d; }
.hz-eszkoz.kivalasztva .hz-doboz { stroke-width: 3; }
.hz-csik { fill: #5b6b80; }
.hz-eszkoz.kapcsolo .hz-csik { fill: #7dbb72; }
.hz-eszkoz.kijelzo .hz-csik { fill: #f0a35e; }
.hz-eszkoz.router .hz-csik, .hz-eszkoz.pc .hz-csik { fill: #3b82b6; }
.hz-eszkoz.switch .hz-doboz { fill: #13253a; stroke-dasharray: 4 3; }
.hz-eszkoz.switch.menedzselt .hz-doboz { stroke-dasharray: none; }       /* IP-címes, pingelhető switch */
.hz-eszkoz.switch.menedzselt .hz-csik { fill: #3b82b6; }
.hz-eszkoz.switch.menedzselt .hz-nev { font-size: 12px; }               /* hosszú név (SW1-TL-SG108E-8port) ne érjen a LED-be */
.hz-nev { fill: var(--text); font-size: 13px; font-weight: 700; }
.hz-szerep { fill: #b6c3d3; font-size: 11.5px; }
.hz-ip { fill: #8fb8e0; font: 11.5px var(--mono); }
.hz-szerep.hz-health { fill: #fcd34d; font-weight: 600; }
.hz-allapot { fill: var(--muted); font-size: 10.5px; text-anchor: end; }
.hz-led { fill: #5b6b80; transition: fill .3s; }
.hz-eszkoz.ok .hz-doboz { stroke: var(--green); }
.hz-eszkoz.ok .hz-led { fill: var(--green); filter: drop-shadow(0 0 4px rgba(34,197,94,.8)); }
.hz-eszkoz.ok .hz-allapot { fill: #86efac; }
.hz-eszkoz.ingadozo .hz-doboz { stroke: var(--amber); }
.hz-eszkoz.ingadozo .hz-led { fill: var(--amber); }
.hz-eszkoz.ingadozo .hz-allapot { fill: #fcd34d; }
.hz-eszkoz.hiba .hz-doboz { stroke: var(--red); }
.hz-eszkoz.hiba .hz-led { fill: var(--red); animation: villog 1.2s steps(2, jump-none) infinite; }
.hz-eszkoz.hiba .hz-allapot { fill: #fca5a5; }

/* Részletek panel */
.halozat-reszlet { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; display: grid; gap: 10px; }
.halozat-reszlet .fej { display: flex; justify-content: space-between; align-items: center; }
.halozat-reszlet .x { background: none; border: 0; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; }
.halozat-reszlet .racs { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; font-size: 13px; }
.halozat-reszlet .racs span { color: var(--muted); }
.halozat-reszlet .racs b.ok { color: var(--green); } .halozat-reszlet .racs b.hiba { color: var(--red); } .halozat-reszlet .racs b.ingadozo { color: var(--amber); }
.halozat-reszlet .mono { font-family: var(--mono); }
.halozat-reszlet .tortenet { display: flex; gap: 3px; align-items: center; }
.halozat-reszlet .tortenet i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.halozat-reszlet .halvany { color: var(--muted); font-size: 12px; }

/* Router részletek (Health, erőforrások, portok, DHCP) */
.router-reszlet { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.router-reszlet h4 { margin: 8px 0 0; font-size: 13px; color: var(--text); }
.router-reszlet .ok { color: var(--green); }
.rtabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rtabla th { text-align: left; color: var(--muted); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rtabla td { padding: 4px 8px; border-bottom: 1px solid rgba(36, 50, 68, .6); vertical-align: middle; }
.rtabla td.szam { text-align: right; font-family: var(--mono); white-space: nowrap; }
.rtabla td.mono { font-family: var(--mono); white-space: nowrap; }
.rtabla tr.letiltva td { opacity: .5; }
.rtabla .pont { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; background: #5b6b80; }
.rtabla .pont.ok { background: var(--green); } .rtabla .pont.hiba { background: var(--red); }
.minisav { display: inline-block; width: 80px; height: 6px; border-radius: 3px; background: var(--bg); vertical-align: middle; margin-left: 8px; overflow: hidden; }
.minisav i { display: block; height: 100%; background: var(--green); }
.minisav.magas i { background: var(--amber); }
.router-reszlet b.figyel { color: var(--amber); }
.router-reszlet td.hiba { color: var(--red); }
.rtabla th.szam, .rtabla td.szam { text-align: center; }
.rtabla.dhcptabla th, .rtabla.dhcptabla td { text-align: center; }   /* DHCP-bérletek: minden oszlop középen */   /* router- és switch-porttábla: számok a fejléc alatt középen */
.router-reszlet .gombok { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn.veszely { border-color: rgba(239,68,68,.6); color: #fca5a5; }
.btn.veszely:hover:not(:disabled) { background: rgba(239,68,68,.15); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* TP-Link switch portjai a kártyán: zöld 1 Gbit/s, világoszöld 100, sárga 10, szürke nincs kapcsolat */
.hz-port { stroke: rgba(0,0,0,.35); stroke-width: 1; transition: fill .3s; }
.hz-port.nincs { fill: transparent; stroke: #3a4a5e; stroke-dasharray: 2 2; }
.hz-port.le { fill: #3a4a5e; }
.hz-port.tiltva { fill: #2a1a1f; stroke: var(--red); }
.hz-port.g10 { fill: var(--amber); }
.hz-port.g100 { fill: #86efac; }
.hz-port.g1000 { fill: var(--green); }

@media (max-width: 720px) { .rtabla { font-size: 11.5px; } .rtabla th:nth-child(6), .rtabla td:nth-child(6) { display: none; } }

/* Bejelentkezés a Beállításokhoz */
.belepes { max-width: 380px; margin: 24px auto; display: grid; gap: 14px; padding: 28px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.belepes h2 { margin: 0; font-size: 18px; color: var(--text); text-transform: none; letter-spacing: 0; }
.belepes p { margin: -6px 0 4px; color: var(--muted); font-size: 13px; }
.belepes label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.belepes input { font: 15px system-ui, sans-serif; padding: 10px 12px; }
.belepes .btn { padding: 11px; font-size: 15px; }
/* Bejelentkezés ablakban (bármely oldalon, ha egy művelethez belépés kell) */
.belepes-dlg { border: 0; padding: 0; background: transparent; color: var(--text); max-width: calc(100vw - 32px);
  overflow: visible; }
.belepes-dlg .belepes { box-sizing: border-box; }
.belepes-dlg::backdrop { background: rgba(5, 9, 14, .72); backdrop-filter: blur(3px); }
.belepes-dlg .belepes { margin: 0; width: 360px; max-width: 100%; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.belepes-dlg-gombok { display: flex; gap: 10px; justify-content: flex-end; }
.belepes-dlg-gombok .btn { padding: 10px 14px; font-size: 14px; }
.belepes-ikon svg { width: 34px; height: 34px; stroke: var(--blue); fill: none; stroke-width: 1.8; stroke-linecap: round; }

/* Beállítások alfülei (Paraméterek / Kapcsoló ESP-k) */
.alful { display: flex; gap: 6px; flex-wrap: wrap; }
.alful button { background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 16px; font: 600 13px system-ui, sans-serif; cursor: pointer; display: grid; gap: 2px; text-align: left; }
.alful button:hover { color: var(--text); border-color: var(--blue); }
.alful button.on { color: var(--text); border-color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); }
.alful.kicsi button { padding: 7px 12px; font-size: 12.5px; }
.alful.kicsi .halvany { font-weight: 400; font-size: 11.5px; color: var(--muted); }

/* Kapcsoló ESP-k IO táblázata */
.io-lap { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px; }
.io-fej { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.io-fej .halvany, .io-lap .halvany { color: var(--muted); font-size: 12.5px; }
.io-kapcsolat { margin-left: auto; color: var(--muted); font-size: 12px; }
.io-gorgeto { overflow-x: auto; }
.io-tabla { min-width: 980px; }
.io-tabla td { padding: 3px 6px; }
.io-tabla td.kozep { text-align: center; }
.io-tabla input, .io-tabla select { font: 13px system-ui, sans-serif; padding: 5px 7px; width: 100%; background: var(--bg);
  color: var(--text); border: 1px solid var(--line); border-radius: 6px; color-scheme: dark; }
.io-tabla input[type=checkbox] { width: auto; }
.io-tabla .io-szam { font-weight: 700; color: var(--text); }
.io-tabla .io-gpio { width: 64px; font-family: var(--mono); }
.io-tabla .io-gpio.hianyzik { border-color: var(--amber); }   /* használt IO GPIO nélkül: nem kommunikál */
.io-tabla .io-funkcio-sajat { border-style: dashed; }
.io-tabla .io-irany { width: 110px; }
.io-tabla .io-funkciok { display: grid; gap: 4px; }
.io-tabla .io-funkcio { min-width: 280px; }
.io-tabla .io-mod { width: 120px; }
.io-tabla .io-megj { min-width: 170px; }
.io-tabla input.rossz { border-color: var(--red); background: rgba(239,68,68,.1); }
.io-tabla tr.ures td:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(7)) { opacity: .45; }
.io-tabla .io-allapot { white-space: nowrap; font-size: 12.5px; min-width: 120px; }
.io-tabla .pont { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: #5b6b80; }
.io-tabla .pont.ok { background: var(--green); box-shadow: 0 0 5px rgba(34,197,94,.8); }

/* IO terv (Beállítások): a 4 kapcsoló ESP be-/kimenetei, a Hálózat ábra színeivel */
.iot-keret { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; padding: 8px; }
.iot-rajz { display: block; width: 100%; height: auto; }
.iot-fejdoboz { fill: var(--panel-2); stroke: var(--line); }
.iot-nev { fill: var(--text); font: 700 15px system-ui, sans-serif; }
.iot-al { fill: var(--muted); font: 12px var(--mono); }
.iot-led { fill: #5b6b80; }
.iot-led.ok { fill: var(--green); filter: drop-shadow(0 0 4px rgba(34,197,94,.8)); }
.iot-led.hiba { fill: var(--red); }
.iot-lapka { fill: #13253a; stroke: #3b82b6; stroke-width: 2; }
.iot-lapkanev { fill: var(--muted); font: 700 12px var(--mono); text-anchor: middle; letter-spacing: .1em; }
.iot-szam { fill: var(--text); font: 700 12px var(--mono); text-anchor: middle; }
.iot-szam.ures { fill: #4a5a6e; font-weight: 400; }
.iot-gpio { fill: #fbbf24; font: 700 13px var(--mono); }   /* a GPIO-szám: ezzel kommunikál a board */
.iot-lab { stroke: #4a5a6e; stroke-width: 2; }
.iot-vonal { stroke-width: 2.5; }
.iot-vonal.ok { stroke: var(--green); }
.iot-vonal.ki { stroke: #7b8796; }
.iot-vonal.nincs { stroke: #7b8796; stroke-dasharray: 5 4; }
.iot-nyilhegy.ok { fill: var(--green); } .iot-nyilhegy.ki, .iot-nyilhegy.nincs { fill: #7b8796; }
.iot-cimke { fill: var(--panel-2); stroke: #7b8796; stroke-width: 1.5; }
.iot-cimke.ok { stroke: var(--green); fill: rgba(34,197,94,.12); }
.iot-cimke.nincs { stroke-dasharray: 4 3; }
.iot-cimkeszoveg { fill: var(--text); font: 12px system-ui, sans-serif; pointer-events: none; }
.iot-io { cursor: pointer; }
.iot-io:hover .iot-cimke, .iot-io:focus-visible .iot-cimke { stroke: var(--blue); }
.iot-io:focus { outline: none; }
.iot-io.kivalasztva .iot-cimke { stroke: var(--blue); stroke-width: 2.5; }
.iot-inv { fill: var(--amber); font: 700 9px var(--mono); }
.iot-inv.bal { text-anchor: end; }
.iot-szagg { display: inline-block; width: 18px; height: 0; border-top: 2px dashed #7b8796; margin-right: 6px; vertical-align: middle; }
.iot-inv-jel { color: var(--amber); font: 700 10px var(--mono); }
/* a board által jelentett lábszint (TCP) a lapka szélén */
.iot-szint { stroke: #8fb8e0; stroke-width: 1.2; }
.iot-szint.egy { fill: #38bdf8; filter: drop-shadow(0 0 3px rgba(56,189,248,.8)); }
.iot-szint.nulla { fill: #0b1522; }
.iot-szint.nincs { fill: none; stroke-dasharray: 2 2; stroke: #5b6b80; }
.iot-szint-jel { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.2px solid #8fb8e0; margin: 0 4px 0 6px; vertical-align: -1px; }
.iot-szint-jel.egy { background: #38bdf8; } .iot-szint-jel.nulla { background: #0b1522; }
#iotFrissitve { font-size: 12px; }

/* ESP firmwares */
.fw-racs { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .fw-racs { grid-template-columns: 1fr; } }
.fw-cim { margin: 0; font-size: 14px; color: var(--text); }
.fw-cim .halvany { font-weight: 400; margin-left: 8px; }
.fw-tabla td { vertical-align: middle; }
.fw-tabla select, .fw-urlap select { font: 13px system-ui, sans-serif; padding: 5px 7px; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; color-scheme: dark; }
.fw-feltolt { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fw-tabla .fw-aktiv { width: 100%; max-width: 380px; }
.fw-tabla .fw-info { margin-top: 3px; font-size: 12px; }
.fw-feltolt input[type=file] { font-size: 12px; color: var(--muted); max-width: 220px; }
.fw-urlap { display: grid; gap: 12px; }
.fw-urlap > label { display: grid; gap: 5px; font-size: 13px; color: var(--muted); }
.fw-urlap #fwPort { width: 100%; }
.fw-tipus { display: flex; gap: 18px; font-size: 14px; }
.fw-tipus label, .fw-urlap > label.fw-pipa { display: inline-flex; gap: 7px; align-items: center; cursor: pointer; color: var(--text); font-size: 13.5px; }
.fw-ip { display: inline-flex; align-items: center; gap: 2px; font: 16px var(--mono); color: var(--text); }
.fw-ip select { font: 16px var(--mono); padding: 4px 6px; }
.fw-sav { height: 10px; border-radius: 5px; background: var(--bg); overflow: hidden; border: 1px solid var(--line); }
.fw-sav i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .4s; }
.fw-sav.ok i { background: var(--green); } .fw-sav.hiba i { background: var(--red); } .fw-sav.figyelem i { background: var(--amber); }
.fw-naplo { margin: 0; max-height: 300px; overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font: 12px/1.5 var(--mono); color: #b6c3d3; white-space: pre-wrap; word-break: break-word; }

/* Beállítások */
.settings-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 20px;
  position: sticky; top: calc(var(--hibasav-h, 0px) + 8px); z-index: 5; }   /* a ragadós hibasáv alatt */
.settings-head .title { flex: 1; min-width: 200px; }
.settings-head .title b { font-size: 16px; }
.settings-head .title div { color: var(--muted); font-size: 13px; margin-top: 2px; }
.settings-head .title code { font-family: var(--mono); color: var(--text); }
.msg { font-size: 13px; padding: 7px 12px; border-radius: 8px; }
.msg.ok { background: rgba(34,197,94,.12); color: #bbf7d0; border: 1px solid rgba(34,197,94,.5); }
.msg.err { background: rgba(239,68,68,.12); color: #fecaca; border: 1px solid rgba(239,68,68,.5); }
.msg.warn { background: rgba(245,158,11,.12); color: #fde68a; border: 1px solid rgba(245,158,11,.5); }
.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 16px; align-items: start; }
.set-csoport { padding: 0; }
.set-csoport summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none;
  border-radius: 14px; user-select: none; }
.set-csoport summary::-webkit-details-marker { display: none; }
.set-csoport summary::before { content: "▸"; color: var(--muted); font-size: 12px; transition: transform .15s; }
.set-csoport details[open] summary::before { transform: rotate(90deg); }
.set-csoport summary:hover { background: rgba(255,255,255,.03); }
.set-csoport summary:focus-visible { outline: 2px solid var(--accent, #38bdf8); outline-offset: -2px; }
.set-csoport summary h2 { margin: 0; flex: 1; }
.set-csoport .set-db { font-size: 12px; color: var(--muted); }
.set-csoport .set-valt { font-size: 12px; color: var(--amber); }
.set-csoport details[open] { padding: 0 16px 8px; }
.set-csoport details[open] summary { margin: 0 -16px; }
.field { display: grid; grid-template-columns: 1fr 190px; gap: 4px 14px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--line); }
.field:first-of-type { border-top: 0; }
.field .lbl { font-size: 14px; }
.field .lbl .key { display: block; font: 11px var(--mono); color: var(--muted); margin-top: 2px; }
.field .inp { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.field .inp input[type=number], .field .inp input[type=text] { width: 100%; text-align: right; }
.field .inp input[type=text] { text-align: left; }
.field .inp input[type=time] { width: 120px; }
.field .unit { font: 12px var(--mono); color: var(--muted); min-width: 24px; }
.field .hint { grid-column: 1 / -1; font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.field .err { grid-column: 1 / -1; font-size: 12px; color: #fca5a5; }
.field.dirty .lbl::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); margin-right: 7px; vertical-align: 2px; }
.field.bad input { border-color: var(--red); }
.badge { font: 600 10px system-ui, sans-serif; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 4px; background: rgba(245,158,11,.15); color: var(--amber); }
.badge.env { background: rgba(56,189,248,.15); color: var(--blue); }
.switch { position: relative; width: 44px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: background .15s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--muted); transition: transform .15s, background .15s; }
.switch input:checked + span { background: rgba(34,197,94,.25); border-color: var(--green); }
.switch input:checked + span::after { transform: translateX(20px); background: var(--green); }
.switch input:focus-visible + span { outline: 2px solid var(--blue); }

/* Naplósáv */
.logs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; overflow: hidden; }
.logpane { display: flex; flex-direction: column; min-width: 0; }
.logpane + .logpane { border-left: 1px solid var(--line); }
.loghead { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.loghead h2 { margin: 0; flex: 1; }
.logs { align-items: start; }
summary.loghead { cursor: pointer; list-style: none; user-select: none; }
summary.loghead::-webkit-details-marker { display: none; }
summary.loghead::before { content: "▸"; color: var(--muted); font-size: 12px; transition: transform .15s; }
.logpane[open] > summary.loghead::before { transform: rotate(90deg); }
.logpane:not([open]) > summary.loghead { border-bottom: 0; }
.logpane:not([open]) > summary.loghead button { display: none; }   /* zárva csak a cím és a darabszám */
.btn.veszely { border-color: rgba(239,68,68,.55); color: #fecaca; }
.btn.veszely:hover { background: rgba(239,68,68,.15); }
.loghead .count { font: 12px var(--mono); color: var(--muted); }
.loghead button { background: var(--bg); color: var(--muted); border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 9px; font-size: 12px; cursor: pointer; }
.loghead button:hover { color: var(--text); border-color: var(--blue); }
.loghead button.on { color: var(--amber); border-color: var(--amber); }
.logbody { height: 260px; overflow: auto; padding: 6px 0; font: 12.5px/1.45 var(--mono); resize: vertical; }
.logline { display: grid; grid-template-columns: 64px 46px 1fr; gap: 8px; padding: 1px 14px; }
.logline:hover { background: rgba(255,255,255,.03); }
.logline .rt { color: #5b6b80; }
.logline .st { color: var(--blue); }
.logline .msg { white-space: pre-wrap; word-break: break-word; padding: 0; border: 0; font-size: inherit; }
.logline.warn .msg { color: var(--amber); }
.logline.error .msg { color: var(--red); }
.logline.debug .msg { color: #b6c3d3; }
/* IO kommunikáció (kapcsoló ESP-k): saját napló teljes szélességben a két napló alatt */
.logpane.io-naplo { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
.io-naplo .logline { grid-template-columns: 96px 46px 1fr; }
.io-osztott { display: grid; grid-template-columns: 3fr 2fr; }           /* balra események, jobbra lekérdezések */
.io-resz { display: flex; flex-direction: column; min-width: 0; }
.io-resz + .io-resz { border-left: 1px solid var(--line); }
.io-resz-fej { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; background: var(--panel-2); }
.io-resz-fej .halvany { flex: 1; font-size: 12px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.io-resz-fej .count { font: 12px var(--mono); color: var(--muted); }
.io-resz-fej button { background: var(--bg); color: var(--muted); border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 9px; font-size: 12px; cursor: pointer; }
.io-resz-fej button:hover { color: var(--text); border-color: var(--blue); }
.io-resz-fej button.on { color: var(--amber); border-color: var(--amber); }
.io-naplo .logbody { height: 340px; }
@media (max-width: 900px) { .io-osztott { grid-template-columns: 1fr; } .io-resz + .io-resz { border-left: 0; border-top: 1px solid var(--line); } }
.logline.tx .msg { color: #7dd3fc; }        /* küldött (>) */
.logline.rx .msg { color: #bbf7d0; }        /* kapott (<) és a vezérlés döntése (↳) */
.logline.get .msg { color: #6b7a8f; }       /* rendszeres lekérdezés és válasza */
.logline.err .msg { color: var(--red); }
.io-naplo input[type=search] { width: 260px; max-width: 40vw; padding: 3px 8px; font-size: 12px; }
.logpane:not([open]) > summary.loghead input { display: none; }
.logempty { color: var(--muted); padding: 10px 14px; font-size: 13px; }

.error { background: rgba(239,68,68,.12); border: 1px solid var(--red); color: #fecaca;
  border-radius: 10px; padding: 10px 14px; font-size: 14px; }

/* Hibasáv: minden oldalon a fejléc alatt, ha valamelyik eszközzel nincs kapcsolat vagy kommunikációs hiba van */
.hibasav { background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.55); border-radius: 12px; padding: 8px 14px;
  display: grid; gap: 8px; position: sticky; top: 6px; z-index: 20; backdrop-filter: blur(6px); }
.hibasav.figyel { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.55); }
.hibasav.nyitott { position: static; }    /* kinyitva ne takarja a lapot: a helyén marad, görgethető */
.hibasav-fej { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.hibasav-ikon { width: 20px; height: 20px; fill: none; stroke: var(--red); stroke-width: 2; stroke-linejoin: round; flex: none;
  animation: villog 1.6s steps(2, jump-none) infinite; }
.hibasav.figyel .hibasav-ikon { stroke: var(--amber); animation: none; }
.hibasav-fej b { color: #fecaca; }
.hibasav.figyel .hibasav-fej b { color: #fde68a; }
.hibasav-osszeg { color: var(--text); flex: 1 1 260px; min-width: 0; }
.hibasav-ido { color: var(--muted); font: 12px var(--mono); }
.hibasav .btn { padding: 5px 12px; font-size: 12.5px; }
.hibasav-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 42vh; overflow: auto; font-size: 13px; }
.hibasav-lista li { display: grid; grid-template-columns: 12px minmax(140px, max-content) 1fr; gap: 4px 10px; align-items: baseline;
  padding: 4px 6px; border-radius: 6px; }
.hibasav-lista li.eszkoz { cursor: pointer; }
.hibasav-lista li.eszkoz:hover, .hibasav-lista li.eszkoz:focus-visible { background: rgba(255,255,255,.06); outline: none; }
.hibasav-lista i { width: 9px; height: 9px; border-radius: 50%; background: var(--red); display: block; align-self: center; }
.hibasav-lista li.figyel i { background: var(--amber); }
.hibasav-lista .nev { font-weight: 600; color: var(--text); }
.hibasav-lista .ip { font: 12px var(--mono); color: #8fb8e0; margin-left: 6px; font-weight: 400; }
.hibasav-lista .ok { color: #fecaca; }
.hibasav-lista li.figyel .ok { color: #fde68a; }
@media (prefers-reduced-motion: reduce) { .hibasav-ikon { animation: none; } }

/* Keskeny képernyőn az öt fül csak ikonnal (az aktívnál felirattal) fér el */
@media (max-width: 600px) {
  .tabs .txt { display: none; }
  .tabs button.on .txt { display: inline; }
  .tabs button { flex: 1 1 auto; padding: 9px 8px; }
}

@media (max-width: 1100px) {
  .dash { grid-template-columns: 1fr 1fr; }
  .dash .center { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 720px) {
  body { padding: 12px; }
  .topbar { padding: 12px; gap: 12px; }
  .tabs { margin-left: 0; width: 100%; }
  .tabs button { flex: 1; justify-content: center; padding: 9px 6px; }
  .tabs .txt { font-size: 13px; }
  .miniclock { display: none; }
  .simhead { grid-template-columns: 1fr; gap: 14px; }
  .controls { justify-items: center; }
  .dash { grid-template-columns: 1fr; }
  .meter.big .value { font-size: 40px; }
  .groups { grid-template-columns: 1fr; }
  .field { grid-template-columns: 1fr; }
  .field .inp { justify-content: flex-start; }
  .logs { grid-template-columns: 1fr; }
  .logpane + .logpane { border-left: 0; border-top: 1px solid var(--line); }
  .logline { grid-template-columns: 58px 1fr; }
  .logline .st { display: none; }
  .stage { min-height: 380px; }
}

/* Demó üzemmód (DEMO_MOD): fizikai fal nélkül – a hardverhez tartozó oldalak és gombok rejtve */
.demo-sav { display: flex; flex-wrap: wrap; gap: .35rem .8rem; align-items: baseline; margin: 0 0 12px;
  padding: 8px 14px; border-radius: 10px; background: #0b3b5c; color: #e6edf5; border: 1px solid #1f6f9e; }
.demo-sav[hidden] { display: none; }
.demo-sav b { color: #fab800; letter-spacing: .08em; }
body.demo #tabs button[data-view="hatoldal"], body.demo #tabs button[data-view="halozat"],
body.demo #setAlful button:not([data-al="mukodes"]), body.demo #setIrasmod, body.demo #setUjraindit,
body.demo #debugSav, body.demo .fok-figy, body.demo #irasJel { display: none !important; }
body.demo .uzemmod-jel { background: #0b3b5c; color: #fab800; border-color: #1f6f9e; animation: none; }