:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-2: #f0f2f5;
  --ink: #16181d;
  --ink-dim: #61656e;
  --line: #d9dde3;
  --accent: #b34a17;
  --accent-soft: #fdf0e8;
  --ok: #1f7a4d;
  --warn: #9a6b00;
  --warn-soft: #fdf5e0;
  --err: #b3261e;
  --err-soft: #fdecea;
  --chg: #6a3fb5;
  --chg-soft: #f1ecfb;
  --off: #3d5f94;
  --off-soft: #e6edf8;
  --link: #1f5fbf;
  --radius: 10px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14161a;
    --panel: #1c1f25;
    --panel-2: #23272e;
    --ink: #e7e9ec;
    --ink-dim: #99a0ab;
    --line: #333841;
    --accent: #f0955c;
    --accent-soft: #33231a;
    --ok: #62c48d;
    --warn: #e2b455;
    --warn-soft: #332b17;
    --err: #f08a80;
    --err-soft: #3a2220;
    --chg: #b79cf0;
    --chg-soft: #282141;
    --off: #93b3e6;
    --off-soft: #1f2a3d;
    --link: #8cb8ff;
  }
}
:root[data-theme="dark"] {
  --bg: #14161a;
  --panel: #1c1f25;
  --panel-2: #23272e;
  --ink: #e7e9ec;
  --ink-dim: #99a0ab;
  --line: #333841;
  --accent: #f0955c;
  --accent-soft: #33231a;
  --ok: #62c48d;
  --warn: #e2b455;
  --warn-soft: #332b17;
  --err: #f08a80;
  --err-soft: #3a2220;
  --chg: #b79cf0;
  --chg-soft: #282141;
  --off: #93b3e6;
  --off-soft: #1f2a3d;
  --link: #8cb8ff;
}

* { box-sizing: border-box; }
/* Linkek: a bongeszo alap kekje sotet temaban alig latszik (a felhasznalo
   jelzese, 2026-10-02) - latogatott es nem latogatott egyforma. */
a, a:visited { color: var(--link); }
a:hover { text-decoration-thickness: 2px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px 64px; }

/* ---- fejlec ---- */
header.top {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.top-in {
  max-width: 1100px; margin: 0 auto; padding: 10px 16px;
  display: flex; gap: 10px; align-items: center; flex-wrap: nowrap;
}
.brand {
  font-weight: 650; letter-spacing: -0.01em; margin-right: auto;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brand span { color: var(--accent); }

button, .btn {
  font: inherit; font-size: 14px;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 12px; cursor: pointer;
}
button:hover, .btn:hover { background: var(--panel-2); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { filter: brightness(1.08); }
button.danger { color: var(--err); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.icon { padding: 4px 8px; line-height: 1; }

/* ---- dokumentum fulek ---- */
.docbar[hidden] { display: none; }
.docbar { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 0 0; }
.doctab {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 6px 5px 14px; font-size: 14px; cursor: pointer;
  max-width: 340px;
}
.doctab.active { border-color: var(--accent); background: var(--accent-soft); }
.doctab .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doctab .dot { color: var(--chg); font-weight: 700; }
.doctab .x { border: 0; background: none; color: var(--ink-dim); padding: 0 6px; }

/* ---- nezet fulek ---- */
/* A [hidden]-t a display:flex kulonben felulirja (archivum nezetben a
   dump-fulek nem tunnenek el). */
nav.tabs[hidden] { display: none; }
/* Lap-on beluli fulsor (Extrak): allo telefonon is EGY sor - a gombok
   osztoznak a szelessegen, a felirat torhet ket sorba. */
.subtabs { display: flex; gap: 6px; }
.subtabs button { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; }

/* Ot ful, allo telefonon is EGY sorban (2026-09-25, a felhasznalo kerese):
   a gombok osztoznak a szelessegen, a feliratok nem tornek, es egy halvany
   valaszto vonal tagolja oket (kulonben tul suru). */
nav.tabs { display: flex; gap: 0; margin: 16px 0 0; border-bottom: 1px solid var(--line); }
nav.tabs button {
  flex: 1 1 auto; min-width: 0; white-space: nowrap;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; padding: 9px 6px; font-size: 14px; color: var(--ink-dim);
}
nav.tabs button + button { border-left: 1px solid var(--line); }
nav.tabs button.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }

/* ---- kartyak ---- */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin: 16px 0;
}
.card > h2, .megjfej > h2 {
  margin: 0 0 12px; font-size: 15px; font-weight: 650;
  letter-spacing: .02em; text-transform: uppercase; color: var(--ink-dim);
}
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.stat { background: var(--panel-2); border-radius: 8px; padding: 10px 12px; }
.stat b { display: block; font-size: 22px; font-weight: 650; line-height: 1.2; }
.stat small { color: var(--ink-dim); font-size: 12px; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; align-items: center; }
.kv dt { color: var(--ink-dim); font-size: 14px; }
.kv dd { margin: 0; }

.badge {
  display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: var(--panel-2); color: var(--ink-dim);
}
.badge.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.err { background: var(--err-soft); color: var(--err); }
.badge.chg { background: var(--chg-soft); color: var(--chg); }

/* ---- urlapelemek ---- */
input, select, textarea {
  font: inherit; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
input.mono { font-family: var(--mono); }
input.changed, td.changed input { border-color: var(--chg); background: var(--chg-soft); }
input.invalid { border-color: var(--err); background: var(--err-soft); }
.title-input { font-size: 19px; font-weight: 600; width: 100%; padding: 9px 11px; }

/* ---- beallitas tablazat ----
   Soronkent: felirat | ertek (+ mertekegyseg kozvetlenul a mezo utan) |
   gyari | eredeti. Telefonon a felirat kulon sorba kerul, alatta a harom
   ertek-oszlop - igy az oszlopok minden sorban egymas alatt maradnak. */
.srow {
  display: grid; grid-template-columns: minmax(0, 1fr) 8rem 3.4rem 4.4rem;
  grid-template-areas: "lb val gy er";
  gap: 4px 12px; align-items: center; padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.srow:last-of-type { border-bottom: 0; }
.srow.head { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-dim); font-weight: 600; padding-top: 0; }
.srow .lb { grid-area: lb; font-size: 14px; cursor: pointer; }
.srow.head .lb { cursor: default; }
.srow .lb .mn { color: var(--ink-dim); font-family: var(--mono); font-size: 13px; margin-right: 6px; }
.srow .val { grid-area: val; display: flex; align-items: center; gap: 6px; }
.srow .val input { width: calc(3ch + 22px); text-align: right; font-family: var(--mono); }
.srow .val input.m6 { width: calc(6ch + 22px); }
.srow .val .u { font-size: 13px; color: var(--ink-dim); white-space: nowrap; }
.srow .gy, .srow .er { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); text-align: right; }
.srow .gy { grid-area: gy; }
.srow .er { grid-area: er; }
.srow .er.chg { color: var(--chg); font-weight: 700; }
.srow.head .gy, .srow.head .er { font-family: inherit; font-size: 12px; }

/* ---- lakaskod racs ---- */
.flatgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.flat {
  display: flex; align-items: center; gap: 6px;
  background: var(--panel-2); border-radius: 7px; padding: 3px 4px 3px 7px;
}
.flat .no { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); width: 2.1rem; }
.flat input { width: 100%; padding: 4px 6px; font-family: var(--mono); text-align: center; letter-spacing: .06em; }
/* A [hidden] attributumot a display:flex kulonben felulirja - enelkul a
   lakaskod-szures nem rejtene el semmit. */
.flat[hidden] { display: none; }
.flat.off input { color: var(--ink-dim); }
/* Tiltott lakas (FF FF): sajat szin, hogy kulonvaljon az ervenyes kodoktol
   es a hibas (piros) mezotol is. */
.flat.tilt { background: var(--off-soft); }
.flat.tilt .no, .flat.tilt input { color: var(--off); }
.flat.tilt input { border-color: color-mix(in srgb, var(--off) 35%, var(--line)); }
.swatch { display: inline-block; font-family: var(--mono); font-size: 12px; padding: 0 5px; border-radius: 4px; }
.swatch.tilt { background: var(--off-soft); color: var(--off); }
.flat.zero { outline: 1px dashed var(--line); }

/* ---- tablazat ---- */
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-dim); font-weight: 600; }
td.num, th.num { text-align: right; font-family: var(--mono); }
tr.flagged { background: var(--warn-soft); }
tr.dim td { opacity: .55; }
tbody tr:hover { background: var(--panel-2); }
td input { padding: 3px 6px; }
td input.n3 { width: calc(3ch + 18px); text-align: right; }
td input.id10 { width: calc(10ch + 18px); }
th .info { margin-left: 3px; }
/* A sor gombjai ujjal is eltalalhatok: egymas mellett, nagyobbak, koztuk hely. */
.rowacts { display: flex; gap: 10px; white-space: nowrap; }
.rowacts button { min-width: 40px; min-height: 36px; font-size: 16px; line-height: 1; padding: 6px 10px; }
.jelek { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
/* a proxi-sorok jelveny-tartoja mindig ott van (a jelzeseket helyben
   frissitjuk) - jelveny nelkul ne vigyen helyet */
.jelek:empty { display: none; }
@media (max-width: 560px) {
  #proxybody td, .tablewrap thead th { padding-left: 4px; padding-right: 4px; }
}
.missing { margin: 0 0 12px; font-size: 14px; }
.missing .lst { font-family: var(--mono); }
.tablewrap { overflow-x: auto; }

/* ---- hex ---- */
/* Hex ful: soronkent egy div, a bajtok sima szovegkent (span csak a jelolt
   bajton) - lasd app.js viewHex. Sajat gorgetesu doboz, hogy a fejlec es a
   cim-oszlop ragadhasson; vizszintesen gorgetheto (referenciaval szeles). */
.hexwrap { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; white-space: pre;
  position: relative; overflow: auto; max-height: 65vh; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.hexwrap .r { display: flex; width: max-content; cursor: pointer; }
.hexwrap .r > span { padding: 0 6px; }
.hexwrap .r .a { position: sticky; left: 0; background: var(--panel); color: var(--ink-dim); }
.hexwrap .r .f, .hexwrap .r .t { border-left: 1px solid var(--line); }
.hexwrap .r .t { color: var(--ink-dim); }
.hexwrap .r.h { position: sticky; top: 0; z-index: 2; background: var(--panel-2); color: var(--ink-dim); cursor: default; }
.hexwrap .r.h .a { background: var(--panel-2); }
.hexwrap .d { color: var(--chg); font-weight: 700; }
.hexwrap .ff { color: var(--ink-dim); opacity: .5; }
.hexwrap .x { background: var(--warn-soft); box-shadow: inset 0 -2px var(--warn); }
.hexwrap .u { color: var(--ink-dim); opacity: .45; }
.hexwrap .s { outline: 2px solid var(--accent); outline-offset: 0; border-radius: 2px; }
.hexchk { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; white-space: nowrap; }
/* kb. 4 karakter latszik; tobb is beirhato (pl. 0x0010) */
.hexugras { width: calc(4ch + 20px); padding-left: 6px; padding-right: 6px; }
.hexsav { gap: 6px 8px; margin-bottom: 8px; }
.hexlep { display: inline-flex; gap: 6px; align-items: center; }
.hexcimke { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.hexsav .ikon svg { width: 16px; height: 16px; display: block; }
.hexsav button .ikon { display: inline-flex; vertical-align: -3px; margin-right: 6px; }
.hexsav button.hexmasol .ikon { margin: 0; }
.hexsav button.hexmasol { padding: 4px 6px; }
/* a referencia neve maga a gomb - hosszu nevnel levag */
.hexrefnev { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; }
.hexrefnev > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hexsav button.nyil { padding: 6px 10px; line-height: 1; }
.hexsav .kgomb { font-size: 13px; padding: 3px 10px; }
.hexinfo { margin: 0 0 8px; padding: 8px 10px; background: var(--panel-2); border-radius: 8px; font-size: 14px; min-height: 3.4em; }
/* szerkesztes modban a ket szam maga a mezo - a sav magassaga ne ugraljon */
.hexinfo.szerk { min-height: 4.4em; }
.hexinfo .hi-fo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.hexinfo .hexin { width: calc(2ch + 18px); padding: 3px 6px; text-align: center; }
.hexinfo .hexin.dec { width: calc(3ch + 18px); }
.hexinfo .hi-gomb { display: inline-flex; gap: 8px; margin-left: 6px; }
.hexinfo .hi-gomb button { padding: 3px 10px; }
.hexjel { margin: 8px 0 0; }
.hexjel .jel-d { color: var(--chg); font-weight: 700; }
.hexjel .jel-x { background: var(--warn-soft); box-shadow: inset 0 -2px var(--warn); padding: 0 2px; }
/* fekvo telefon: alacsony kepernyon a szerkeszto toltse ki a kepet */
@media (max-height: 520px) { .hexwrap { max-height: calc(100vh - 110px); } }
.diffh { margin: 14px 0 4px; font-size: 15px; }
.diffnyers { margin-top: 10px; font-size: 13px; }
.diffnyers pre { margin: 6px 0 0; white-space: pre-wrap; font-size: 12px; }

/* Megjegyzesek (2026-10-07): rovid sor + a "Reszletek" kapcsoloval egyszerre
   nyilo magyarazat; ahova lehet menni, ott a sor gomb (jobbra nyil). */
.megjfej { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.megjfej h2 { margin: 0; }
.megj { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0; padding: 5px 6px; }
.megj > .badge { flex: 0 0 auto; min-width: 5.2em; text-align: center; margin-top: 2px; }
.megj-t { flex: 1 1 auto; min-width: 0; }
.megj-rovid, .megj-r { display: block; }
.megj-r { color: var(--ink-dim); font-size: 13.5px; margin-top: 3px; }
.megjcard:not(.reszlet) .megj-r { display: none; }
button.megj { width: 100%; text-align: left; background: none; border: 0; border-radius: 8px;
  font-size: inherit; color: inherit; }
button.megj:hover { background: var(--panel-2); }
.megj-nyil { flex: 0 0 auto; color: var(--ink-dim); font-size: 20px; line-height: 1; align-self: center; }
/* a Megjegyzesekbol ide ugorva egy pillanatra kiemelt beallitas-sor */
.srow.villan { animation: villan 1.6s ease-out; }
@keyframes villan { from { background: var(--accent-soft); } to { background: transparent; } }
.flatszuro { display: inline-flex; align-items: center; gap: 4px; }
.flatszuro .icon { padding: 0 4px; border: 0; background: none; color: inherit; }

/* ---- archivum ---- */
.loc { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin: 12px 0; }
.loc-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.loc-head strong { font-size: 16px; }
/* Postaskod kereso: forrasonkent egy sor, jobbra a Megnyitas gomb. */
.postas-src { list-style: none; margin: 4px 0 0; padding: 0; }
.postas-src li { display: flex; gap: 8px; align-items: center; justify-content: space-between;
  padding: 6px 0; border-top: 1px solid var(--line); }
.postas-src li > div { min-width: 0; overflow-wrap: anywhere; }
.postas-src li button { flex: none; }

td.nowrap { white-space: nowrap; }
.loc .acts { white-space: nowrap; }

/* Telefonon a mentes-tabla sorai kartyakka esnek szet: a vizszintes
   gorgetesben a gombok kicsusznanak a kepbol. */
@media (max-width: 700px) {
  table.dumps, table.dumps tbody, table.dumps tr, table.dumps td { display: block; width: auto; }
  table.dumps thead { display: none; }
  table.dumps tr {
    border: 1px solid var(--line); border-radius: 8px;
    padding: 8px 10px; margin-bottom: 8px;
  }
  table.dumps td { border: 0; padding: 2px 0; text-align: left; }
  table.dumps td[data-l]::before {
    content: attr(data-l) ": "; color: var(--ink-dim); font-size: 12px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  table.dumps td:empty { display: none; }
  table.dumps td.acts { margin-top: 6px; }
}

pre.log {
  background: var(--panel-2); border-radius: 8px; padding: 10px 12px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.5;
  max-height: 260px; overflow: auto; white-space: pre-wrap; margin: 12px 0 0;
}
progress { width: 100%; max-width: 320px; height: 10px; }

/* ---- sugo: (i) gomb + felugro buborek ugyanazon a lapon ---- */
button.info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; margin-left: 5px; vertical-align: middle; top: -1px;
  border-radius: 50%; border: 1px solid var(--ink-dim); background: none;
  color: var(--ink-dim); font: italic 700 11px/1 Georgia, serif; text-transform: none;
  position: relative;
}
/* nagyobb erintesi felulet, mint amekkora latszik */
button.info::after { content: ""; position: absolute; inset: -10px; }
button.info:hover, button.info.open { color: var(--accent); border-color: var(--accent); background: none; }
button.badge {
  font: inherit; font-size: 12px; line-height: 1.5; border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
}
button.badge:hover { filter: brightness(.96); }
/* bekapcsolt jelveny-szuro (Proxik ful): vastag keret + kiemelt hatter */
button.badge.on {
  box-shadow: inset 0 0 0 2px currentColor;
  background: color-mix(in srgb, currentColor 22%, transparent);
  font-weight: 600;
}
.pop {
  position: absolute; z-index: 70; max-width: min(360px, calc(100vw - 16px));
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  padding: 10px 12px; font-size: 14px; line-height: 1.45; white-space: pre-line;
}
.pop[hidden] { display: none; }
.pop strong { display: block; margin-bottom: 4px; }

/* ---- kerdezo ablak ---- */
.modal-back {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal {
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; width: 100%; max-width: 420px;
  max-height: 90vh; overflow: auto;
}
.modal h3 { margin: 0 0 14px; font-size: 17px; }
.mfield { display: block; margin-bottom: 12px; }
.mfield > span { display: block; font-size: 13px; color: var(--ink-dim); margin-bottom: 4px; }
.mfield > input, .mfield > textarea { width: 100%; }
.mfield > textarea { min-height: 120px; resize: vertical; }
.mfield .msor { display: flex; gap: 6px; }
.mfield .msor > input { flex: 1 1 auto; min-width: 0; }
.mfield .mikon { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; }
.mfield .mjel:empty { display: none; }
.mfield .mjel { margin-top: 4px; }
.mfield .mjavas { margin-top: 6px; }
/* cimke balra, ikon-gomb jobbra (Uj cim: Fotok + kamera) */
.mfield .mfej { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.mfield .mfej > span { font-size: 13px; color: var(--ink-dim); }
.mfield .mfej .mikon { min-height: 36px; }
.mfield .kepracs:empty { display: none; }
.mfield .kepracs { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); margin-top: 0; }
.modal .mhiba { margin: -6px 0 10px; color: var(--err); }
.modal .mhiba:empty { display: none; }
/* Cimke es mezo EGY sorban (a cim reszletei, a nevsor sorrendje -
   2026-10-06): a cimke-oszlop a leghosszabb cimkehez igazodik. */
.msorfield {
  display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px;
  align-items: center; margin-bottom: 10px;
}
.msorfield > span:first-child { font-size: 13px; color: var(--ink-dim); }
.msorfield > input, .msorfield > select { width: 100%; min-width: 0; }

/* Cimkek: kapcsolhato csipek */
.cimkek { display: flex; flex-wrap: wrap; gap: 6px; }
.cimke {
  padding: 3px 10px; border-radius: 999px; font-size: 13px; line-height: 1.4;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-dim);
}
.cimke.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.cimke.uj { border-style: dashed; }
span.cimke { padding: 1px 8px; font-size: 12px; }
.chk { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 8px 0; }
.chk input { margin-top: 4px; }
.modal.wide { max-width: 560px; }
/* A kerdezo ablak gombjai allo telefonon is EGY sorban (pl. Megse /
   Letrehozas / Dump mentese ide - 2026-10-02, a felhasznalo kerese). */
.modal .mgombok { flex-wrap: nowrap; gap: 6px; margin-bottom: 0; }
.modal .mgombok button { white-space: nowrap; padding: 6px 9px; }
@media (max-width: 420px) {
  .modal-back { padding: 10px; }
  .modal { padding: 14px; }
}
.modal ul.issues { margin: 0 0 12px; padding-left: 20px; font-size: 14px; }
/* Valaszto gomb a modalisban (pl. melyik cim maradjon osszevonasnal). */
.modal button.valaszt { text-align: left; margin-bottom: 8px; padding: 10px 12px; }
.modal button.valaszt .hint { margin-top: 2px; }
.modal ul.issues li { margin: 4px 0; }
details.preview summary { cursor: pointer; font-size: 13px; color: var(--ink-dim); }
.bugrep { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.bugrep.kesz { opacity: .6; }

/* ---- dropzone / ures allapot ---- */
.drop {
  border: 2px dashed var(--line); border-radius: var(--radius);
  padding: 44px 20px; text-align: center; color: var(--ink-dim); margin: 24px 0;
}
.drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.drop h2 { margin: 0 0 6px; color: var(--ink); font-size: 18px; }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.spacer { flex: 1; }
.hint { color: var(--ink-dim); font-size: 13px; }
.inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Sajat sor a lakasszamnak: keskeny kepernyon a sugo alatta tordel, nem
   csusztatja el az input-ot a cimkehez kepest. */
.field { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0 4px; }
.field > label { font-size: 14px; color: var(--ink-dim); }
/* Cim + Sebesseg egy sorban, 360 px-es allo telefonon is (merve: 294 px fer) */
.field.egysor { flex-wrap: nowrap; gap: 6px; }
.field.egysor > select { flex: 0 1 auto; min-width: 0; padding-left: 6px; padding-right: 4px; }
.field.egysor > label.masodik { margin-left: 8px; }
/* EEPROM lap: alacsonyabb mod-kapcsolo, alatta a ket nagy fo gomb */
button.kicsi { padding-top: 4px; padding-bottom: 4px; }
.chfo { display: flex; gap: 8px; margin: 12px 0; }
.chfo > button {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 10px; font-size: 17px; font-weight: 600;
}
.chfo > button > span { display: inline-flex; }
.chfo > button:not(:disabled):hover { background: var(--panel-2); }
.chfo-olvas {
  background: color-mix(in srgb, var(--ok) 14%, var(--panel)); color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
}
.chfo-ir {
  background: color-mix(in srgb, var(--err) 10%, var(--panel)); color: var(--err);
  border-color: color-mix(in srgb, var(--err) 40%, var(--line));
}
.field > .hint { flex: 1 1 100%; margin: 0; }
@media (min-width: 720px) { .field > .hint { flex: 0 1 auto; } }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 10px; font-size: 13px; color: var(--ink-dim); }
.legend span.badge { margin-right: 6px; }
.legend b { font-family: var(--mono); font-weight: 700; color: var(--warn); }
.err-box { background: var(--err-soft); color: var(--err); border-radius: 8px; padding: 10px 12px; margin: 12px 0; font-size: 14px; }
/* A hibadoboz parja: sikeres lepes visszajelzese (Fiok es felho lap). */
.ok-box { background: color-mix(in srgb, var(--ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--line));
  border-radius: 8px; padding: 10px 12px; margin: 12px 0 8px; font-size: 14px; }
.ok-box strong { display: block; color: var(--ok); margin-bottom: 4px; }

/* Nem tunik el magatol (ld. app.js toast): koppintasra megy el, ezert
   hosszabb szoveget is el kell birnia - tobb sorban, telefon-szelessegben. */
#toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 18px;
  font-size: 14px; line-height: 1.35; text-align: center; white-space: pre-line;
  max-width: min(92vw, 520px);
  opacity: 0; pointer-events: none; transition: .18s; z-index: 50;
}
#toast.show { opacity: 1; transform: translateX(-50%); }

@media (max-width: 560px) {
  .srow { grid-template-columns: minmax(0, 1fr) 3.2rem 4rem; grid-template-areas: "lb lb lb" "val gy er"; }
  .srow.head { grid-template-areas: "val gy er"; }
  .srow.head .lb { display: none; }
  .flatgrid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* ================================================================== */
/* 2026-09-21: uj felepites - fejlec-muveletek, also fulsor, also lap  */
/* ================================================================== */

/* A fejlecben csak a ket fo muvelet (Megnyitas / Mentes) + felho + menu. */
.act {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid transparent; border-radius: 999px; padding: 7px 12px;
}
.act:hover { background: var(--accent-soft); border-color: var(--accent); }
.act svg { width: 16px; height: 16px; flex: none; }
.act:disabled { opacity: .5; }
.iconbtn {
  border: 0; background: none; color: var(--ink);
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  display: inline-grid; place-items: center;
}
.iconbtn:hover { background: var(--panel-2); }
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn.sync-ok { color: var(--ok); }
.iconbtn.sync-off { color: var(--ink-dim); }

/* Also fulsor: a negy hely. A .wrap alul helyet hagy neki. */
.wrap { padding-bottom: 64px; }
/* 2026-10-01: alacsonyabb (a felhasznalo kerese - a kepernyo nagy reszet
   takarta). A gesztus-savnak (safe-area) csak a fele jar: a kis fogantyu
   alatt a felirat is olvashato marad, egesz sav ures hely viszont nem kell. */
nav.bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--panel); border-top: 1px solid var(--line);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) / 2);
}
nav.bottom button {
  border: 0; background: none; border-radius: 0;
  color: var(--ink-dim); font-size: 11px; line-height: 1.2; padding: 3px 0 3px;
  display: grid; justify-items: center; gap: 1px;
}
nav.bottom button:hover { background: none; }
nav.bottom button svg { width: 19px; height: 19px; }
nav.bottom button .pill { padding: 1px 16px; border-radius: 999px; line-height: 0; }
nav.bottom button.on { color: var(--accent); font-weight: 600; }
nav.bottom button.on .pill { background: var(--accent-soft); }

/* A nyitott dump fejlece: EGY doboz (2026-10-01) - fajlnev + valtozas,
   alatta ket csoport: Cim + Nevsor, Lakasok szama + Mentes a cimhez. A
   csoportok egyben maradnak, es csak egymas kozott tornek sort. */
.dochead[hidden] { display: none; }
.dochead { padding: 10px 0 0; }
.dochead .cimbox {
  /* minmax(0, 1fr): enelkul a racs oszlopa a legszelesebb sor tartalmahoz
     nyulik, es keskeny telefonon a Cim gomb a felette levo X-szel egyutt
     kilog a dobozbol (2026-10-07, a felhasznalo jelzese) */
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.dochead .fname { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dochead .fname b {
  flex: 1; min-width: 0;
  font-family: var(--mono); font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dochead .fname .badge { flex: none; }
.dochead .fname button.icon { flex: none; padding: 2px 8px; }
.dochead .cimsor { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.dochead .csop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.dochead .csop.cim { flex-wrap: nowrap; }
.dochead .csop.cim { flex: 1 1 15rem; }
.dochead .csop label { color: var(--ink-dim); font-size: 13px; flex: none; }
.dochead .csop select { flex: 1 1 16rem; min-width: 0; max-width: 22rem; }
.dochead .csop button { flex: none; }
/* Mentés a címhez + Névsor: jobbra igazitva - allo telefonon a masodik sor,
   a Névsor a Cím gomb ala esik */
.dochead .csop.cimgomb { flex: 1 1 auto; justify-content: flex-end; flex-wrap: nowrap; }
.dochead .cimbox .hint { font-size: 12.5px; }
/* ikon + felirat egy gombban (a fejlec "Cím" gombja) */
.ikongomb { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ikongomb > span { display: inline-flex; }

/* Also lap (sheet): a Megnyitas / Mentes ket forrasa egy helyen. */
#sheet:empty { display: none; }
.sheet-back {
  position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.35);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  background: var(--panel); width: 100%; max-width: 560px;
  border-radius: 16px 16px 0 0; padding: 10px 16px 20px;
  display: grid; gap: 12px; max-height: 92vh; overflow-y: auto;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.sheet .grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line); justify-self: center; }
.sheet h2 { margin: 0; font-size: 18px; }
.sheet h3 {
  margin: 4px 0 0; font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-dim); font-weight: 600;
}
.sheet .block { width: 100%; justify-content: center; }
.sheet ol, .sheet ul { margin: 0; padding-left: 20px; }
.sheet li { margin-bottom: 4px; }
button.block { display: block; width: 100%; }

/* Felugro menu a fejlec ... gombjahoz. */
.menu {
  position: fixed; z-index: 45; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18); min-width: 230px; display: grid;
}
.menu button {
  border: 0; background: none; text-align: left; border-radius: 8px;
  padding: 10px 12px; display: flex; justify-content: space-between; gap: 12px;
}
.menu .k { color: var(--ink-dim); font-size: 12px; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
/* be/ki kapcsolo a menuben (Kijelzo ebren, GPS) */
.menu button { align-items: center; }
.menukapcs {
  flex: none; position: relative; width: 32px; height: 18px; border-radius: 9px;
  background: var(--line); transition: background .15s;
}
.menukapcs::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--panel); box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: left .15s;
}
.menukapcs.be { background: var(--accent); }
.menukapcs.be::after { left: 16px; }
/* Biztonsagi mentes / visszaallitas ablak */
.mentes-ablak { max-width: 460px; }
.mentes-mi { margin: 0 0 8px; font-size: 14px; }

/* Cimek: tablazat (2026-10-07) -> egy cim reszletei, a kiolvasasok
   idovonalon. A sorra koppintva nyilik a cim; a "Nevek" oszlop gombja
   egybol a nevsorba visz. */
.cimszuro { margin-bottom: 10px; }
.cimtabla { width: 100%; border-collapse: collapse; }
.cimtabla th, .cimtabla td { padding: 8px 6px; border-top: 1px solid var(--line); vertical-align: middle; }
.cimtabla thead th { border-top: 0; text-align: left; font-weight: 400; white-space: nowrap; }
.cimtabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cimtabla thead th.c-lakas, .cimtabla thead th.c-kiolv, .cimtabla thead th.c-nevek,
.cimtabla thead th.c-letrehozva { text-align: right; }
.thgomb {
  background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px;
  color: var(--ink-dim); cursor: pointer;
}
.cimtabla th.rend .thgomb, #proxytabla th.rend .thgomb { color: var(--ink); font-weight: 600; }
.cimrow-item { cursor: pointer; }
.cimrow-item td.c-cim { width: 100%; min-width: 0; }
.cimrow-fo {
  display: block; width: 100%; padding: 0; cursor: pointer; background: none;
  border: 0; border-radius: 0; text-align: left; overflow-wrap: anywhere;
}
.cimrow-item .cimkek { margin-top: 4px; gap: 4px; }
.cimrow-nv { font-size: 13px; padding: 4px 10px; min-width: 2.6em; }
.cimtabla .selcol { display: none; padding-right: 0; }
.cimtabla.sel-mod .selcol { display: table-cell; }
.selbox { font-size: 17px; line-height: 1; color: var(--ink-dim); }
/* Kijelolo mod a Cimek listan: a sor kijelol (nem megnyit), a Nevsor gomb
   ilyenkor nem latszik - a muveletsav a lista felett all. */
.selbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.cimrow-item.sel-mod .cimrow-nv { display: none; }
.cimrow-item.kijelolt td { background: var(--accent-soft); }
.cimrow-item.kijelolt .selbox { color: var(--accent); }
.cimrow-item .tag { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
/* allo telefonon a letrehozas datuma elmarad, a tobbi elfer */
@media (max-width: 520px) {
  .cimtabla .c-letrehozva { display: none; }
  .cimtabla th, .cimtabla td { padding: 8px 4px; }
}
.tl { display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding-bottom: 14px; position: relative; }
.tl::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--line); }
.tl:last-child::before { display: none; }
.tl .bullet { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent); background: var(--panel); margin-top: 3px; }
.tl .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tl .acts button { font-size: 13px; padding: 4px 10px; }

/* Valtozasok / diff */
.difflist { display: grid; grid-template-columns: 1fr auto auto auto; gap: 4px 10px; align-items: center; font-size: 14px; }
.difflist .o { color: var(--ink-dim); text-decoration: line-through; font-family: var(--mono); }
.difflist .n { color: var(--chg); font-weight: 600; font-family: var(--mono); }

/* Telefonon a fejlec egy sorban marad: a marka rovidul, a gombok szukebbek. */
@media (max-width: 460px) {
  .top-in { gap: 6px; padding: 8px 12px; flex-wrap: nowrap; }
  .brand { font-size: 15px; }
  .brand span { display: none; }
  .act { padding: 7px 9px; font-size: 12.5px; gap: 4px; }
  .iconbtn { width: 32px; height: 32px; }
}

/* Az EEPROM-lapon a felismert tipus: ez a kepernyo legfontosabb adata. */
.found {
  display: grid; gap: 4px; margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
}
.found b { font-size: 16px; }
.found.becsult {
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
}
.found.ures { background: var(--panel-2); border-color: var(--line); }
/* A CH341A muvelet kimenetele: a sikertelen eset piros, hogy ne kelljen a
   naplot olvasni ahhoz, hogy latszodjon, sikerult-e az iras. */
/* Futas kozbeni allapot: ugyanaz a doboz, halvanyabb kerettel. */
.found.allapot b { font-size: 15px; }
.found.rossz {
  background: var(--err-soft);
  border-color: color-mix(in srgb, var(--err) 45%, transparent);
}

/* ---- Nevsor (a cim alatt): lakasszam + nev soronkent ----------------- */
/* Telefonra: a szam keskeny fix oszlop, a nev nyulik, a jelvenyek es a
   torles a vegen. Egy soron belul marad, hogy 253 sor is atlathato legyen. */
/* Egy lakas KET sorban: fent lakas - nev - ajto (allo telefonon is egy
   sorban ferjen ki), alatta a megjegyzes es a jelvenyek, majd
   valasztovonal. A mezok szelessege a tartalomra van szabva: a lakasszam
   haromjegyu, az ajto pl. "II/5". */
.nvlist { display: grid; }
.nvrow { display: grid; gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); }
.nvrow:first-child { border-top: 0; }
.nvfo { display: flex; gap: 8px; align-items: center; min-width: 0; }
.nvalso { display: flex; gap: 8px; align-items: center; min-width: 0; }
/* `min-width: 0` MINDEGYIKEN: a flex-elem alap-minimuma a tartalom szelessege,
   egy input-e pedig a bongeszo 20 karakteres alapmerete - enelkul a mezo NEM
   zsugorodik a megadott szelessegre, barmit is mondunk a flex-basisben. */
.nvfo input.nvsz { flex: 0 0 3.4rem; width: 3.4rem; min-width: 0; text-align: right; }
.nvfo input.nvnev { flex: 1 1 auto; min-width: 0; }
.nvfo input.nvajto { flex: 0 0 4rem; width: 4rem; min-width: 0; }
.nvalso input.nvmegj { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.nvjel { display: flex; gap: 4px; flex: 0 0 auto; }
/* kod / proxi jelveny: koppintasra a Kodok, ill. a Proxik fulre visz */
.nvjel .badge { white-space: nowrap; }
.nvjel .nvkod { font-variant-numeric: tabular-nums; }
.nvdel, .nvuj {
  flex: 0 0 auto; padding: 4px 10px; font-size: 18px; line-height: 1;
  color: var(--ink-dim);
}
.nvuj { font-size: 14px; padding: 6px 6px; }
/* a Sorrend felirat kozvetlenul a legordulo elott (allo telefonon a ket
   oszlopos racsban tul messze kerult tole) */
.nvrendsor { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.nvrendsor > span { font-size: 13px; color: var(--ink-dim); flex: none; }
.nvrendsor > select { flex: 0 1 auto; min-width: 0; }
/* allo telefonon a fogo es a ket gomb mellett is maradjon hely a nevnek */
@media (max-width: 480px) {
  .nvfo { gap: 5px; }
  .nvfo input.nvsz { flex-basis: 2.6rem; width: 2.6rem; }
  .nvfo input.nvajto { flex-basis: 3.2rem; width: 3.2rem; }
  .nvdel { padding: 4px 7px; }
  .nvuj { padding: 6px 5px; }
  .nvlist.kezi .nvfogo { padding: 4px 2px; }
}
/* "Mozgatás kézzel": a fogo erintesre se gorgessen (touch-action) */
.nvfogo {
  flex: 0 0 auto; padding: 4px 6px; font-size: 18px; line-height: 1;
  color: var(--ink-dim); cursor: grab; touch-action: none;
}
.nvrow.huzott { background: var(--accent-soft); border-radius: 8px; }
.nvrow.huzott .nvfogo { cursor: grabbing; }

/* A nyomtatasi also lap valasztoi (nevtabla, hasab, betu, iv) */
.mmgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
.mmgrid select, .mmgrid input { width: 100%; }
.kapcs { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.qrprev {
  display: flex; justify-content: center; margin: 0 0 10px;
  padding: 10px; border-radius: 10px; background: #fff;
}
.qrprev svg { width: 120px; height: 120px; display: block; }

/* Nyomtatas: kifer-e minden sor a lapra (a tobbi LEVAGODNA) */
.ferbox {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; font-size: 14px;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
}
.ferbox.nem {
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
}
.ferbox span { flex: 1 1 auto; min-width: 0; }

/* Proxi olvaso: felvitel / ellenorzes a Proxik fulon (2026-10-01) */
.px-munka .toolbar { flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.px-eredmeny { border-radius: 8px; padding: 8px 12px; margin: 8px 0; font-size: 14px; }
.px-eredmeny.ok { background: var(--accent-soft); }
.px-eredmeny.warn { background: var(--warn-soft); }
.px-eredmeny.err { background: var(--err-soft); }
.px-eredmeny .cim { font-weight: 600; }
.px-eredmeny.err .cim { color: var(--err); }
.px-eredmeny.warn .cim { color: var(--warn); }
.px-eredmeny .reszlet { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); }
.px-eredmeny.nagy .cim { font-size: 20px; }
.px-utolso.ok { color: var(--ok); }
.px-utolso.warn { color: var(--warn); }
.px-utolso.err { color: var(--err); }
.px-olvasomezo { display: flex; gap: 6px; margin-top: 10px; }
.px-olvasomezo { align-items: center; }
/* 10 hexa jegy fer bele - nem kell szelesebb; mellette az RDM gomb. */
.px-olvasomezo input { flex: 0 1 15ch; width: 15ch; min-width: 0; font-family: var(--mono); }
.px-olvasomezo button.rdm { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.px-olvasomezo .rdm-ikon { display: inline-flex; line-height: 0; }
.px-olvasomezo .rdm-ikon svg { width: 18px; height: 18px; }
.px-olvasomezo button.rdm.fut { border-color: var(--ok); color: var(--ok); }
.px-olvasomezo button.rdm.fut .rdm-ikon { animation: rdmlueg 1.2s ease-in-out infinite; }
@keyframes rdmlueg { 50% { opacity: .35; } }
.px-olvasomezo input:focus { outline: 2px solid var(--accent); }
@keyframes villan { 0%, 40% { background: var(--accent); } 100% { background: var(--accent-soft); } }
#proxybody tr.villan td { animation: villan 1.6s ease-out; }
/* a nevsorbol a kodra ugorva */
.flat.villan input { animation: villan 1.6s ease-out; }
/* Futo munkamenetnel a kartya a fejlec ala ragad, igy a tablazatban ugralva
   is latszik (a felhasznalo kerese, 2026-10-01). */
.px-munka.fut {
  position: sticky; top: var(--fejlec, 52px); z-index: 15;
  max-height: 62vh; overflow: auto;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.px-lakasbox { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-top: 8px; }
.px-lakasbox .fej { display: flex; align-items: center; gap: 8px; }
.px-lakasbox .szam { flex: 1; display: flex; align-items: baseline; gap: 2px; justify-content: center; }
.px-lakasbox .szam input {
  width: 3.2ch; font-size: 30px; font-weight: 650; text-align: right;
  padding: 0 2px; border: 0; border-bottom: 2px solid var(--line); border-radius: 0; background: none;
}
.px-lakasbox .szam span { font-size: 17px; color: var(--ink-dim); }
.px-lakasbox .proxik { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 4px; }
.px-chip {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; cursor: pointer;
}
.px-chip b { color: var(--ink); font-weight: 600; }
.px-chip.friss { border-color: var(--accent); background: var(--accent-soft); }
.px-lakasbox .lab { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13.5px; }
.px-figy { color: var(--warn); }
#proxybody tr.px-lakasban td { background: var(--accent-soft); }
#proxybody tr.px-friss td { background: var(--accent-soft); }
#proxybody tr.px-friss td:first-child { box-shadow: inset 5px 0 0 var(--accent); font-weight: 700; color: var(--accent); }
.px-hely { height: 45vh; }
/* Proxik: kijeloles es az elrejtheto Batch / Nyomat oszlop (2026-10-01) */
#proxytabla.rejt-hely:not(.sel-mod) .hely, #proxytabla.rejt-id .id,
#proxytabla.rejt-sz .sz, #proxytabla.rejt-ny .ny { display: none; }
#proxytabla tr.px-oszlopsor th { text-transform: none; letter-spacing: 0; font-weight: 400; padding-bottom: 2px; }
.px-oszlopok { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* A kis kapcsolo-gombok (oszlopok, Hex: ASCII / Szerkesztes, Megjegyzesek:
   Reszletek) - egyforma kinezettel. */
.px-oszlopok .badge, .kgomb.badge, .megjfej .badge { cursor: pointer; border: 1px solid var(--line); background: none; color: var(--ink-dim); }
.px-oszlopok .badge.on, .kgomb.badge.on, .megjfej .badge.on { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); }
#proxybody tr.kijelolt td { background: var(--chg-soft); }
.pxsel { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.px-munka.fut h2 { font-size: 18px; }
.px-munka.fut .toolbar { margin-top: 4px; }
/* Proxi olvaso: allo telefonon (360 px) se torjon ossze-vissza (2026-10-01) */
.px-fej { display: flex; gap: 6px; align-items: center; }
.px-modok { flex: 1; display: flex; min-width: 0; }
.px-modok button { flex: 1; min-width: 0; padding: 6px 4px; white-space: nowrap; border-radius: 0; }
.px-modok button:first-child { border-radius: 8px 0 0 8px; }
.px-modok button:last-child { border-radius: 0 8px 8px 0; border-left: 0; }
.px-fej button.icon { flex: none; white-space: nowrap; }
.px-lakasbox .fej button { flex: none; white-space: nowrap; }
.px-lakasbox .szam { min-width: 0; }
.px-chip { white-space: nowrap; }
.px-utolsosor { display: flex; gap: 8px; align-items: center; margin-top: 6px; min-width: 0; }
.px-utolso { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.px-utolsosor button { flex: none; }
.px-valasz { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.px-valasz button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-eredmeny .reszlet { display: flex; flex-wrap: wrap; column-gap: 10px; }
.px-eredmeny .reszlet span { white-space: nowrap; }
.px-olvasomezo input { font-size: 15px; }

/* Csatlakozasi hiba utan: rovid USB-segitseg (app.js usbSegitseg). */
.usbsegit { margin: 8px 0 0; font-size: 14px; }
.usbsegit ol { margin: 4px 0 0; padding-left: 22px; }
.usbsegit li { margin: 2px 0; }
.usbsegit code { font-family: var(--mono); }

/* Kepek a cimhez (2026-10-02): belyegracs + nagy kep az also lapon */
.kepracs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; }
.kepbelyeg {
  position: relative; padding: 0; aspect-ratio: 1; overflow: hidden;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2);
  display: flex; align-items: center; justify-content: center;
}
.kepbelyeg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kepfelirat {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px;
  font-size: 11px; line-height: 1.3; color: #fff; background: rgba(0, 0, 0, .55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
}
.kepnagy { min-height: 120px; display: flex; justify-content: center; background: var(--panel-2); border-radius: 8px; }
.kepnagy img { max-width: 100%; max-height: 60vh; object-fit: contain; display: block; border-radius: 8px; }