/* =====================================================================
   Árfigyelő és árazó rendszer – közös stíluslap (képernyőterv)
   Minden szín, betűméret és térköz az alábbi :root változókból jön.
   Az arculati színek (fő szín, gombszín, zöld, piros, áthúzott ár) és a
   Poppins betűtípus a bolt élő nyitóoldaláról kiolvasott értékek.
   ===================================================================== */

:root {
  /* --- Alapszínek (semleges) --- */
  --szin-hatter: #f4f5f3;          /* az oldal háttere */
  --szin-felulet: #ffffff;         /* kártyák, táblázat, menü */
  --szin-felulet-2: #f8f9f7;       /* táblázatfejléc, halvány sáv */
  --szin-vonal: #dfe2dd;           /* elválasztó vonal */
  --szin-vonal-eros: #858c84;      /* űrlapmező kerete (3:1 fehéren) */
  --szin-szoveg: #1c232b;          /* fő szöveg */
  --szin-szoveg-2: #46505b;        /* másodlagos szöveg */
  --szin-szoveg-3: #5f6975;        /* halvány felirat (AA fehéren) */

  /* --- Arculati színek: a bolt élő oldaláról kiolvasott értékek --- */
  --szin-kiemelo: #0a1e3c;         /* fő szín: menüsáv, hivatkozások, kiemelt árak */
  --szin-kiemelo-sotet: #203e59;   /* rámutatás, aktív menüpont háttere */
  --szin-kiemelo-halvany: #e6ebf2; /* kijelölt sor, tájékoztató sáv (a fő színből származtatva) */
  --szin-kiemelo-szoveg: #ffffff;  /* szöveg a fő színen */
  --szin-menu-szoveg: #d3dbe6;     /* nem aktív menüpont a sötétkék sávon (származtatva) */
  --szin-gomb: #4ba5ab;            /* másodlagos arculati szín: elsődleges gomb, akciós ár jelölése */
  --szin-gomb-ramutat: #3f959b;    /* gomb rámutatáskor (származtatva) */
  --szin-gomb-szoveg: #121212;     /* szöveg a türkizen – NEM fehér, a kontraszt miatt */
  --szin-athuzott: #676767;        /* áthúzott eredeti ár */

  /* --- Jelentésszínek --- */
  --szin-dragabb: #8a4a00;         /* drágábbak vagyunk / figyelem */
  --szin-dragabb-hatter: #fcefd9;
  --szin-dragabb-vonal: #dfae5c;
  --szin-olcsobb: #177537;         /* olcsóbbak vagyunk / siker / készleten (a bolt zöldje) */
  --szin-olcsobb-hatter: #e2f2e7;
  --szin-olcsobb-vonal: #86c29a;
  --szin-hiba: #f00540;            /* a bolt pirosa: keret, ikon (nincs készleten, hiba) */
  --szin-hiba-szoveg: #c00433;     /* ugyanez sötétítve, apró betűs szöveghez (AA) */
  --szin-hiba-hatter: #fde8ed;
  --szin-hiba-vonal: #f00540;
  --szin-semleges: #46505b;        /* nincs adat / hiányzik */
  --szin-semleges-hatter: #eceeed;
  --szin-semleges-vonal: #858c84;

  /* --- Diagramvonalak --- */
  --diagram-1: #0a1e3c;            /* saját ár – folytonos */
  --diagram-2: #8a4a00;            /* versenytárs – szaggatott */
  --diagram-3: #5f6975;            /* beszerzési ár – pontozott */
  --diagram-4: #177537;            /* olcsóbb termékek – szaggatott */
  --diagram-racs: #e6e8e4;

  /* --- Betűk --- */
  --betu-csalad: "Poppins", "Segoe UI", system-ui, sans-serif;
  --betu-szam: "Segoe UI", system-ui, sans-serif; /* számoszlopok: a Poppins számjegyei nem egyforma szélesek */
  --betu-xs: 12px;
  --betu-s: 13px;
  --betu-alap: 14px;
  --betu-m: 16px;
  --betu-l: 20px;
  --betu-xl: 28px;
  --sormagassag: 1.45;

  /* --- Térközök (4-es rács) --- */
  --t-1: 4px;
  --t-2: 8px;
  --t-3: 12px;
  --t-4: 16px;
  --t-5: 24px;
  --t-6: 32px;
  --t-7: 48px;

  /* --- Formák --- */
  --sugar: 6px;
  --sugar-nagy: 10px;
  --arnyek: 0 1px 2px rgba(28, 35, 43, .06);
  --arnyek-nagy: 0 12px 32px rgba(28, 35, 43, .22);

  /* --- Elrendezés --- */
  --menu-szelesseg: 232px;
  --fejlec-magassag: 52px;
}

/* ---------- Alapok ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--szin-hatter);
  color: var(--szin-szoveg);
  font-family: var(--betu-csalad);
  font-size: var(--betu-alap);
  line-height: var(--sormagassag);
  overflow-x: hidden;
}
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: var(--betu-l); font-weight: 600; line-height: 1.25; }
h2 { font-size: var(--betu-m); font-weight: 600; line-height: 1.3; }
h3 { font-size: var(--betu-alap); font-weight: 600; }
a { color: var(--szin-kiemelo); text-underline-offset: 2px; }
a:hover { color: var(--szin-kiemelo-sotet); }
:focus-visible { outline: 2px solid var(--szin-kiemelo); outline-offset: 2px; border-radius: 3px; }
.halvany { color: var(--szin-szoveg-3); }
.kicsi { font-size: var(--betu-xs); }
.szam { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tab-szam { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nincs-tores { white-space: nowrap; }
.rejtett-felirat {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
[hidden] { display: none !important; }

/* ---------- Ikonok ---------- */
.ik {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -4px;
}
.ik.kis { width: 14px; height: 14px; vertical-align: -2px; }
.ik.nagy { width: 28px; height: 28px; }

/* ---------- Keret: menü + fejléc ---------- */
.menu-kapcs { position: absolute; opacity: 0; pointer-events: none; }
.keret { display: grid; grid-template-columns: var(--menu-szelesseg) minmax(0, 1fr); min-height: 100vh; }
.menu {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--szin-kiemelo); color: var(--szin-kiemelo-szoveg);
  display: flex; flex-direction: column; padding: var(--t-4) var(--t-3);
  z-index: 30;
}
.logo {
  /* A logó felirata sötét, ezért a sötétkék sávon fehér lapkán áll. */
  display: block; background: var(--szin-felulet); color: var(--szin-kiemelo); border-radius: var(--sugar);
  font-weight: 600; font-size: var(--betu-m); line-height: 43px; min-height: 59px;
  margin-bottom: var(--t-4); padding: var(--t-2) var(--t-1); text-decoration: none; overflow: hidden; white-space: nowrap;
}
.logo img { display: block; max-width: 100%; height: auto; margin: 0 auto; color: var(--szin-kiemelo); }
.logo.doboz { border: 1px solid var(--szin-vonal); max-width: 216px; }
.menu nav { display: flex; flex-direction: column; gap: 2px; }
.menu-pont {
  display: flex; align-items: center; gap: var(--t-3);
  padding: 9px var(--t-3); border-radius: var(--sugar);
  color: var(--szin-menu-szoveg); text-decoration: none; font-weight: 500;
  border-left: 3px solid transparent;
}
.menu-pont:hover { background: var(--szin-kiemelo-sotet); color: var(--szin-kiemelo-szoveg); }
.menu-pont.aktiv {
  background: var(--szin-kiemelo-sotet); color: var(--szin-kiemelo-szoveg);
  border-left-color: var(--szin-gomb); font-weight: 600;
}
.menu :focus-visible, .belepes-oldal > p a:focus-visible { outline-color: #fff; }
.menu-pont .szamlalo {
  margin-left: auto; font-size: var(--betu-xs); font-weight: 600;
  background: var(--szin-gomb); color: var(--szin-gomb-szoveg);
  border-radius: 10px; padding: 1px 7px; font-variant-numeric: tabular-nums;
}
.menu-lab { margin-top: auto; padding: var(--t-3); font-size: var(--betu-xs); color: var(--szin-menu-szoveg); }
.menu-lab a { color: inherit; }

.fo { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.fejlec {
  position: sticky; top: 0; z-index: 20; height: var(--fejlec-magassag);
  background: var(--szin-felulet); border-bottom: 1px solid var(--szin-vonal);
  display: flex; align-items: center; gap: var(--t-4); padding: 0 var(--t-5);
}
.fejlec .bolt { font-weight: 600; white-space: nowrap; }
.fejlec .koz { flex: 1; }
.fejlec .futas-info { color: var(--szin-szoveg-2); font-size: var(--betu-s); white-space: nowrap; display: flex; align-items: center; gap: var(--t-2); }
.fejlec .felhasznalo { display: flex; align-items: center; gap: var(--t-2); color: var(--szin-szoveg-2); font-size: var(--betu-s); white-space: nowrap; text-decoration: none; }
.monogram {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--szin-kiemelo-halvany); color: var(--szin-kiemelo-sotet);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--betu-xs); font-weight: 600;
}
.menu-gomb {
  display: none; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid var(--szin-vonal-eros); border-radius: var(--sugar); cursor: pointer; color: var(--szin-szoveg);
  background: var(--szin-felulet); flex: none;
}
.menu-fatyol { display: none; }

.tartalom { padding: var(--t-5); width: 100%; max-width: 1680px; flex: 1; min-width: 0; }
.tartalom > * + * { margin-top: var(--t-5); }
.oldalfej { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--t-3) var(--t-4); }
.oldalfej .cim { flex: 1 1 280px; min-width: 0; }
.oldalfej .cim p { color: var(--szin-szoveg-2); margin-top: var(--t-1); max-width: 70ch; }
.oldalfej .muveletek { display: flex; flex-wrap: wrap; gap: var(--t-2); }
.morzsa { font-size: var(--betu-s); color: var(--szin-szoveg-3); margin-bottom: var(--t-1); }
.lablec {
  padding: var(--t-3) var(--t-5); border-top: 1px solid var(--szin-vonal);
  color: var(--szin-szoveg-3); font-size: var(--betu-xs);
}

/* ---------- Rácsok ---------- */
.racs { display: grid; gap: var(--t-4); }
.racs > * { min-width: 0; }
.racs.kartyak { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.racs.ketto { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.racs.fele { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.racs.harom { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.oszlop { display: flex; flex-direction: column; gap: var(--t-4); min-width: 0; }
.sor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t-2) var(--t-3); }
.sor.szet { justify-content: space-between; }

/* ---------- Kártya ---------- */
.kartya {
  background: var(--szin-felulet); border: 1px solid var(--szin-vonal);
  border-radius: var(--sugar-nagy); box-shadow: var(--arnyek); min-width: 0;
}
.kartya-fej {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--t-2) var(--t-3);
  padding: var(--t-3) var(--t-4); border-bottom: 1px solid var(--szin-vonal);
}
.kartya-fej h2 { flex: 1 1 auto; }
.kartya-test { padding: var(--t-4); }
.kartya-test > * + * { margin-top: var(--t-3); }
.kartya-lab { padding: var(--t-3) var(--t-4); border-top: 1px solid var(--szin-vonal); }

/* ---------- Számkártya ---------- */
.szamkartya {
  display: block; text-decoration: none; color: inherit;
  background: var(--szin-felulet); border: 1px solid var(--szin-vonal);
  border-top: 3px solid var(--szin-semleges-vonal);
  border-radius: var(--sugar-nagy); padding: var(--t-3) var(--t-4) var(--t-4); box-shadow: var(--arnyek);
}
a.szamkartya:hover { border-color: var(--szin-kiemelo); color: inherit; }
.szamkartya .felirat { display: flex; align-items: center; gap: var(--t-2); font-size: var(--betu-s); font-weight: 600; color: var(--szin-szoveg-2); }
.szamkartya .ertek { font-size: var(--betu-xl); font-weight: 600; line-height: 1.2; margin-top: var(--t-2); font-variant-numeric: tabular-nums; }
.szamkartya .ertek small { font-size: var(--betu-alap); font-weight: 400; color: var(--szin-szoveg-3); }
.szamkartya .valtozas { font-size: var(--betu-xs); color: var(--szin-szoveg-2); margin-top: var(--t-1); }
.szamkartya.dragabb { border-top-color: var(--szin-dragabb-vonal); }
.szamkartya.dragabb .felirat { color: var(--szin-dragabb); }
.szamkartya.olcsobb { border-top-color: var(--szin-olcsobb-vonal); }
.szamkartya.olcsobb .felirat { color: var(--szin-olcsobb); }
.szamkartya.hiba { border-top-color: var(--szin-hiba-vonal); }
.szamkartya.hiba .felirat { color: var(--szin-hiba-szoveg); }
.szamkartya.kiemelt { border-top-color: var(--szin-kiemelo); }
.szamkartya.kiemelt .felirat { color: var(--szin-kiemelo-sotet); }

/* ---------- Gombok ---------- */
.gomb {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--t-2);
  min-height: 34px; padding: 6px 14px; border-radius: var(--sugar);
  border: 1px solid var(--szin-vonal-eros); background: var(--szin-felulet); color: var(--szin-szoveg);
  font: inherit; font-weight: 600; font-size: var(--betu-s); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.gomb:hover { background: var(--szin-felulet-2); color: var(--szin-szoveg); border-color: var(--szin-szoveg-3); }
.gomb.elsodleges { background: var(--szin-gomb); border-color: var(--szin-gomb); color: var(--szin-gomb-szoveg); }
.gomb.elsodleges:hover { background: var(--szin-gomb-ramutat); border-color: var(--szin-gomb-ramutat); color: var(--szin-gomb-szoveg); }
.gomb.veszely { background: var(--szin-felulet); border-color: var(--szin-hiba-vonal); color: var(--szin-hiba-szoveg); }
.gomb.veszely:hover { background: var(--szin-hiba-hatter); }
.gomb.veszely.teli { background: var(--szin-hiba-szoveg); border-color: var(--szin-hiba-szoveg); color: #fff; }
.gomb.szoveges { border-color: transparent; background: transparent; color: var(--szin-kiemelo); padding-left: 8px; padding-right: 8px; }
.gomb.szoveges:hover { background: var(--szin-kiemelo-halvany); }
.gomb.kicsi { min-height: 28px; padding: 3px 10px; font-size: var(--betu-xs); }
.gomb.teljes { width: 100%; }
.gomb:disabled, .gomb.letiltott {
  background: var(--szin-semleges-hatter); border-color: var(--szin-vonal); color: var(--szin-szoveg-3);
  cursor: not-allowed; pointer-events: none;
}

/* ---------- Űrlapelemek ---------- */
.mezo { display: flex; flex-direction: column; gap: var(--t-1); min-width: 0; }
.mezo > label, .mezo > .felirat { font-size: var(--betu-s); font-weight: 600; color: var(--szin-szoveg); }
.mezo .segito { font-size: var(--betu-xs); color: var(--szin-szoveg-3); }
.mezo .hibauzenet { font-size: var(--betu-xs); color: var(--szin-hiba-szoveg); font-weight: 600; }
.bevitel, select.bevitel, textarea.bevitel {
  width: 100%; min-height: 34px; padding: 6px 10px; font: inherit; color: var(--szin-szoveg);
  background: var(--szin-felulet); border: 1px solid var(--szin-vonal-eros); border-radius: var(--sugar);
}
.bevitel:focus { outline: 2px solid var(--szin-kiemelo); outline-offset: 0; border-color: var(--szin-kiemelo); }
.bevitel.hibas { border-color: var(--szin-hiba); background: var(--szin-hiba-hatter); }
.bevitel:disabled { background: var(--szin-semleges-hatter); color: var(--szin-szoveg-3); }
.bevitel.rovid { width: 96px; }
.bevitel.kozepes { width: 180px; max-width: 100%; }
.bevitel.szam { text-align: right; }
.mertekegyseg { display: inline-flex; align-items: center; gap: var(--t-2); flex-wrap: wrap; }
.kereso { position: relative; flex: 1 1 220px; max-width: 360px; min-width: 0; }
.kereso .ik { position: absolute; left: 10px; top: 8px; color: var(--szin-szoveg-3); }
.kereso .bevitel { padding-left: 34px; }
.valaszto { display: flex; align-items: flex-start; gap: var(--t-2); cursor: pointer; }
.valaszto input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--szin-kiemelo); flex: none; }
.urlap-sor { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--t-4); }
.urlap-sor > * { min-width: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-size: var(--betu-s); font-weight: 600; padding: 0; margin-bottom: var(--t-2); }

/* Kapcsoló */
.kapcsolo { display: inline-flex; align-items: center; gap: var(--t-2); cursor: pointer; font-size: var(--betu-s); font-weight: 600; }
.kapcsolo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kapcsolo .csuszka {
  width: 38px; height: 22px; border-radius: 11px; background: var(--szin-semleges-vonal);
  position: relative; flex: none; transition: background .15s;
}
.kapcsolo .csuszka::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s;
}
.kapcsolo input:checked + .csuszka { background: var(--szin-kiemelo); }
.kapcsolo input:checked + .csuszka::after { transform: translateX(16px); }
.kapcsolo input:focus-visible + .csuszka { outline: 2px solid var(--szin-kiemelo); outline-offset: 2px; }
.kapcsolo .be { display: none; color: var(--szin-kiemelo-sotet); }
.kapcsolo .ki { color: var(--szin-szoveg-3); }
.kapcsolo input:checked ~ .be { display: inline; }
.kapcsolo input:checked ~ .ki { display: none; }
.kapcsolo input:disabled + .csuszka { opacity: .55; }

/* ---------- Eszköztár, szűrők ---------- */
.eszkoztar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t-2) var(--t-3); padding: var(--t-3) var(--t-4); }
.eszkoztar + .eszkoztar { border-top: 1px solid var(--szin-vonal); }
.eszkoztar select.bevitel { width: auto; max-width: 100%; flex: 0 1 auto; }
.eszkoztar .koz { flex: 1; }
.tomeges {
  background: var(--szin-kiemelo-halvany); border-top: 1px solid var(--szin-vonal);
  color: var(--szin-kiemelo-sotet); font-size: var(--betu-s);
}

/* ---------- Fülek ---------- */
.fulek { display: flex; gap: var(--t-1); overflow-x: auto; border-bottom: 1px solid var(--szin-vonal); padding: 0 var(--t-3); }
.ful {
  display: inline-flex; align-items: center; gap: var(--t-2); white-space: nowrap;
  padding: 11px var(--t-3) 9px; border: 0; border-bottom: 3px solid transparent; background: none;
  font: inherit; font-weight: 600; font-size: var(--betu-s); color: var(--szin-szoveg-2); cursor: pointer; text-decoration: none;
}
.ful:hover { color: var(--szin-szoveg); background: var(--szin-felulet-2); }
.ful[aria-selected="true"], .ful.aktiv { color: var(--szin-kiemelo-sotet); border-bottom-color: var(--szin-kiemelo); }
.ful .db { font-weight: 400; color: var(--szin-szoveg-3); font-variant-numeric: tabular-nums; }

/* ---------- Táblázat ---------- */
.tabla-doboz { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--betu-s); }
.tabla caption { text-align: left; padding: var(--t-2) var(--t-4); color: var(--szin-szoveg-3); font-size: var(--betu-xs); caption-side: bottom; }
.tabla th, .tabla td { padding: 7px 10px; border-bottom: 1px solid var(--szin-vonal); text-align: left; vertical-align: middle; }
.tabla thead th {
  background: var(--szin-felulet-2); color: var(--szin-szoveg-2); font-weight: 600; font-size: var(--betu-xs);
  white-space: nowrap; border-bottom: 1px solid var(--szin-vonal-eros); vertical-align: bottom;
}
.tabla thead th small { display: block; font-weight: 400; color: var(--szin-szoveg-3); }
.tabla th.szam, .tabla td.szam { text-align: right; }
.tabla tbody tr:hover { background: var(--szin-felulet-2); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tr.kijelolt { background: var(--szin-kiemelo-halvany); }
.tabla td.nev { min-width: 220px; }
.tabla td.nev a { font-weight: 600; text-decoration: none; color: var(--szin-szoveg); }
.tabla td.nev a:hover { color: var(--szin-kiemelo); text-decoration: underline; }
.tabla .kod { font-family: Consolas, "Cascadia Mono", monospace; font-size: var(--betu-xs); color: var(--szin-szoveg-2); white-space: nowrap; }
.tabla input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--szin-kiemelo); vertical-align: middle; }
.tabla.laza th, .tabla.laza td { padding: 10px 12px; }
.tabla .uj-ar { font-weight: 600; }
.lapozo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t-2) var(--t-3); padding: var(--t-3) var(--t-4); border-top: 1px solid var(--szin-vonal); font-size: var(--betu-s); color: var(--szin-szoveg-2); }
.lapozo .koz { flex: 1; }
.lapozo .oldalak { display: flex; gap: var(--t-1); flex-wrap: wrap; }
.lapozo .oldal {
  min-width: 30px; height: 30px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--szin-vonal); border-radius: var(--sugar); text-decoration: none; color: var(--szin-szoveg-2);
  background: var(--szin-felulet); font-variant-numeric: tabular-nums;
}
.lapozo .oldal.aktiv { background: var(--szin-kiemelo); border-color: var(--szin-kiemelo); color: var(--szin-kiemelo-szoveg); font-weight: 600; }

/* ---------- Különbség-jelzés (szín + nyíl + előjel) ---------- */
.kul { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.kul.fel { color: var(--szin-dragabb); }
.kul.le { color: var(--szin-olcsobb); }
.kul.nulla { color: var(--szin-szoveg-2); font-weight: 400; }
.kul.rossz { color: var(--szin-hiba-szoveg); }
.arres-rossz { color: var(--szin-hiba-szoveg); font-weight: 600; white-space: nowrap; }

/* ---------- Állapotcímkék ---------- */
.cimke {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 2px 8px 2px 6px; border-radius: 11px; font-size: var(--betu-xs); font-weight: 600; line-height: 1.4;
  border: 1px solid var(--szin-semleges-vonal); background: var(--szin-semleges-hatter); color: var(--szin-semleges);
}
.cimke .ik { width: 13px; height: 13px; vertical-align: 0; stroke-width: 2; }
.cimke.dragabb { background: var(--szin-dragabb-hatter); border-color: var(--szin-dragabb-vonal); color: var(--szin-dragabb); }
.cimke.olcsobb, .cimke.siker { background: var(--szin-olcsobb-hatter); border-color: var(--szin-olcsobb-vonal); color: var(--szin-olcsobb); }
.cimke.egyezik { background: var(--szin-felulet); }
.cimke.hianyzik { background: var(--szin-felulet); border-style: dashed; }
.cimke.var { background: var(--szin-kiemelo-halvany); border-color: var(--szin-kiemelo); color: var(--szin-kiemelo-sotet); }
.cimke.elkuldve { background: var(--szin-felulet); border-color: var(--szin-olcsobb-vonal); color: var(--szin-olcsobb); }
.cimke.hiba { background: var(--szin-hiba-hatter); border-color: var(--szin-hiba-vonal); color: var(--szin-hiba-szoveg); }
.cimke.akcio { background: var(--szin-kiemelo); border-color: var(--szin-kiemelo); color: var(--szin-kiemelo-szoveg); }
.cimkek { display: flex; flex-wrap: wrap; gap: var(--t-1); }

/* Fokozat-jelölő (1 Figyelő / 2 Javaslattevő / 3 Automata) */
.fok {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; vertical-align: middle;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--szin-szoveg-3);
  border: 1px solid var(--szin-vonal); border-radius: 4px; padding: 1px 6px 1px 2px; background: var(--szin-felulet);
}
.fok b {
  display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 3px;
  background: var(--szin-semleges-hatter); color: var(--szin-szoveg-2); font-size: 10px;
}

/* ---------- Figyelmeztető sávok ---------- */
.sav {
  display: flex; align-items: flex-start; gap: var(--t-3); padding: var(--t-3) var(--t-4);
  border: 1px solid var(--szin-semleges-vonal); border-left-width: 4px; border-radius: var(--sugar);
  background: var(--szin-semleges-hatter); color: var(--szin-szoveg);
}
.sav .ik { margin-top: 1px; }
.sav .szoveg { flex: 1; min-width: 0; }
.sav .szoveg strong { display: block; }
.sav .muveletek { display: flex; gap: var(--t-2); flex-wrap: wrap; }
.sav.siker { background: var(--szin-olcsobb-hatter); border-color: var(--szin-olcsobb-vonal); }
.sav.siker > .ik { color: var(--szin-olcsobb); }
.sav.figyelem { background: var(--szin-dragabb-hatter); border-color: var(--szin-dragabb-vonal); }
.sav.figyelem > .ik { color: var(--szin-dragabb); }
.sav.hiba { background: var(--szin-hiba-hatter); border-color: var(--szin-hiba-vonal); }
.sav.hiba > .ik { color: var(--szin-hiba); }
.sav.info { background: var(--szin-kiemelo-halvany); border-color: var(--szin-kiemelo); }
.sav.info > .ik { color: var(--szin-kiemelo); }
.sav.tores { flex-wrap: wrap; }

/* ---------- Kulcs–érték lista ---------- */
.adatok { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: var(--t-2) var(--t-4); margin: 0; }
.adatok dt { color: var(--szin-szoveg-3); font-size: var(--betu-s); }
.adatok dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.arak { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--t-3); }
.ar-doboz { border: 1px solid var(--szin-vonal); border-radius: var(--sugar); padding: var(--t-3); background: var(--szin-felulet-2); min-width: 0; }
.ar-doboz .felirat { font-size: var(--betu-xs); color: var(--szin-szoveg-3); font-weight: 600; }
.ar-doboz .ertek { font-size: var(--betu-l); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar-doboz.javasolt { background: var(--szin-kiemelo-halvany); border-color: var(--szin-kiemelo); }
.magyarazat {
  border-left: 4px solid var(--szin-kiemelo); background: var(--szin-kiemelo-halvany);
  padding: var(--t-3) var(--t-4); border-radius: 0 var(--sugar) var(--sugar) 0;
}
.magyarazat ol { margin: var(--t-2) 0 0; padding-left: 20px; }
.magyarazat li + li { margin-top: 2px; }

/* ---------- Teendők, eseménynapló ---------- */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { display: flex; align-items: flex-start; gap: var(--t-3); padding: var(--t-3) var(--t-4); border-bottom: 1px solid var(--szin-vonal); }
.lista > li:last-child { border-bottom: 0; }
.lista .szoveg { flex: 1; min-width: 0; }
.lista .szoveg small { display: block; color: var(--szin-szoveg-3); }
.lista .ik.dragabb { color: var(--szin-dragabb); }
.lista .ik.hiba { color: var(--szin-hiba); }
.lista .ik.kiemelo { color: var(--szin-kiemelo); }
.lista .ik.olcsobb { color: var(--szin-olcsobb); }
.naplo { list-style: none; margin: 0; padding: 0 0 0 var(--t-4); border-left: 2px solid var(--szin-vonal); }
.naplo li { position: relative; padding: 0 0 var(--t-4) var(--t-3); }
.naplo li:last-child { padding-bottom: 0; }
.naplo li::before {
  content: ""; position: absolute; left: -23px; top: 5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--szin-felulet); border: 2px solid var(--szin-kiemelo);
}
.naplo time { display: block; font-size: var(--betu-xs); color: var(--szin-szoveg-3); font-variant-numeric: tabular-nums; }

/* ---------- Diagram ---------- */
.diagram-doboz { overflow-x: auto; max-width: 100%; }
.diagram { display: block; width: 100%; min-width: 560px; max-width: 980px; height: auto; }
.diagram text { font-family: var(--betu-csalad); font-size: 11px; fill: var(--szin-szoveg-2); }
.diagram .racs { stroke: var(--diagram-racs); stroke-width: 1; }
.diagram .tengely { stroke: var(--szin-vonal-eros); stroke-width: 1; }
.diagram .vonal { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.diagram .szaggatott { stroke-dasharray: 8 5; }
.diagram .pontozott { stroke-dasharray: 1.5 5; }
.diagram .pont { stroke-width: 1.75; fill: var(--szin-felulet); }
.jelmagyarazat { display: flex; flex-wrap: wrap; gap: var(--t-2) var(--t-5); font-size: var(--betu-s); color: var(--szin-szoveg-2); }
.jelmagyarazat span { display: inline-flex; align-items: center; gap: var(--t-2); }
.jelmagyarazat svg { width: 34px; height: 12px; flex: none; }
.jelmagyarazat svg line { stroke-width: 2.25; stroke-linecap: round; }

/* ---------- Idővonal (akciók) ---------- */
.idovonal { min-width: 820px; }
.idovonal .iv-sor { display: grid; grid-template-columns: 240px minmax(0, 1fr); border-bottom: 1px solid var(--szin-vonal); }
.idovonal .iv-sor:last-child { border-bottom: 0; }
.idovonal .iv-nev { padding: var(--t-2) var(--t-3) var(--t-2) var(--t-4); font-size: var(--betu-s); border-right: 1px solid var(--szin-vonal); }
.idovonal .iv-nev strong { display: block; }
.idovonal .iv-nev small { color: var(--szin-szoveg-3); }
.idovonal .iv-sav { position: relative; min-height: 46px; background-image: linear-gradient(to right, var(--diagram-racs) 1px, transparent 1px); background-size: calc(100% / 6) 100%; }
.idovonal .iv-fej .iv-sav { display: grid; grid-template-columns: repeat(6, 1fr); min-height: 0; background: var(--szin-felulet-2); }
.idovonal .iv-fej .iv-sav span { padding: 6px 8px; font-size: var(--betu-xs); font-weight: 600; color: var(--szin-szoveg-2); border-left: 1px solid var(--diagram-racs); }
.idovonal .iv-fej .iv-nev { background: var(--szin-felulet-2); font-weight: 600; font-size: var(--betu-xs); color: var(--szin-szoveg-2); }
.iv-elem {
  position: absolute; top: 9px; height: 28px; border-radius: 5px; padding: 0 8px; overflow: hidden;
  display: flex; align-items: center; gap: 5px; font-size: var(--betu-xs); font-weight: 600; white-space: nowrap;
  border: 1px solid var(--szin-kiemelo); background: var(--szin-kiemelo-halvany); color: var(--szin-kiemelo-sotet);
}
.iv-elem.fut { background: var(--szin-kiemelo); color: var(--szin-kiemelo-szoveg); }
.iv-elem.lezart { background: var(--szin-semleges-hatter); border-color: var(--szin-semleges-vonal); color: var(--szin-semleges); }
.iv-elem.terv { background: var(--szin-felulet); border-style: dashed; }
.iv-ma { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--szin-hiba); z-index: 2; }
.iv-ma span { position: absolute; top: 0; left: 3px; font-size: 10px; font-weight: 600; color: var(--szin-hiba-szoveg); background: var(--szin-felulet); padding: 0 3px; white-space: nowrap; }

/* ---------- Párbeszédablak ---------- */
dialog.parbeszed { border: 0; padding: 0; background: transparent; max-width: calc(100vw - 32px); width: 520px; }
dialog.parbeszed::backdrop { background: rgba(28, 35, 43, .5); }
.parbeszed-doboz {
  background: var(--szin-felulet); border-radius: var(--sugar-nagy); box-shadow: var(--arnyek-nagy);
  border: 1px solid var(--szin-vonal); max-width: 520px; width: 100%; color: var(--szin-szoveg);
}
.parbeszed-doboz header { display: flex; align-items: center; gap: var(--t-3); padding: var(--t-4) var(--t-4) 0; }
.parbeszed-doboz header h2 { flex: 1; }
.parbeszed-doboz .test { padding: var(--t-3) var(--t-4) var(--t-4); }
.parbeszed-doboz .test > * + * { margin-top: var(--t-3); }
.parbeszed-doboz footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--t-2); padding: var(--t-3) var(--t-4); border-top: 1px solid var(--szin-vonal); background: var(--szin-felulet-2); border-radius: 0 0 var(--sugar-nagy) var(--sugar-nagy); }

/* ---------- Üres, betöltés, hiba állapot ---------- */
.ures { text-align: center; padding: var(--t-6) var(--t-4); color: var(--szin-szoveg-2); }
.ures > .ik { width: 40px; height: 40px; color: var(--szin-szoveg-3); stroke-width: 1.5; }
.ures h3 { font-size: var(--betu-m); margin-top: var(--t-2); color: var(--szin-szoveg); }
.ures p { max-width: 44ch; margin: var(--t-1) auto var(--t-4); }
.ures.hibaallapot > .ik { color: var(--szin-hiba); }
.csontvaz { display: block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, #e6e8e4 25%, #f2f3f0 50%, #e6e8e4 75%); background-size: 200% 100%; animation: csillog 1.4s linear infinite; }
.csontvaz.nagy { height: 30px; width: 55%; }
.csontvaz.w40 { width: 40%; } .csontvaz.w60 { width: 60%; } .csontvaz.w80 { width: 80%; }
@keyframes csillog { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .csontvaz { animation: none; } .kapcsolo .csuszka, .kapcsolo .csuszka::after { transition: none; } }

/* ---------- Modulok, források ---------- */
.modul { display: flex; align-items: flex-start; gap: var(--t-3); padding: var(--t-3) var(--t-4); border-bottom: 1px solid var(--szin-vonal); }
.modul:last-child { border-bottom: 0; }
.modul .szoveg { flex: 1; min-width: 0; }
.modul .szoveg small { display: block; color: var(--szin-szoveg-3); }
.modul.kikapcsolt { background: var(--szin-felulet-2); }
.modul.kikapcsolt .szoveg strong, .modul.kikapcsolt .szoveg small { color: var(--szin-szoveg-3); }
.feltolto {
  border: 1.5px dashed var(--szin-vonal-eros); border-radius: var(--sugar); padding: var(--t-4);
  text-align: center; color: var(--szin-szoveg-2); background: var(--szin-felulet-2);
}
.oldal-menu { display: flex; flex-wrap: wrap; gap: var(--t-2); }
.elonezet-szam { font-size: var(--betu-xl); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.terv-valto {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--t-2);
  border: 1px dashed var(--szin-vonal-eros); border-radius: var(--sugar); padding: var(--t-2) var(--t-3);
  font-size: var(--betu-xs); color: var(--szin-szoveg-3); background: transparent;
}
.sorrend { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--szin-semleges-hatter); font-size: var(--betu-xs); font-weight: 600; }

/* ---------- Belépés ---------- */
.belepes-oldal { background: var(--szin-kiemelo); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--t-5) var(--t-4); gap: var(--t-4); }
.belepes-doboz { width: 100%; max-width: 380px; }
.belepes-doboz .logo { margin: 0 auto var(--t-4); width: 208px; max-width: 100%; }
.belepes-oldal > p, .belepes-oldal > p a { color: var(--szin-menu-szoveg); }
.belepes-doboz .kartya-test > * + * { margin-top: var(--t-4); }

/* ---------- Stílus-útmutató ---------- */
.szinminta { border: 1px solid var(--szin-vonal); border-radius: var(--sugar); overflow: hidden; background: var(--szin-felulet); font-size: var(--betu-xs); }
.szinminta .szin { height: 52px; border-bottom: 1px solid var(--szin-vonal); }
.szinminta .leiras { padding: var(--t-2); }
.szinminta code { display: block; font-family: Consolas, monospace; color: var(--szin-szoveg-2); }
.racs.szinek { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--t-3); }
.terkoz-minta { display: flex; align-items: center; gap: var(--t-3); font-size: var(--betu-s); }
.terkoz-minta i { display: block; height: 14px; background: var(--szin-kiemelo); border-radius: 2px; }
.ikon-racs { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--t-2); }
.ikon-racs div { border: 1px solid var(--szin-vonal); border-radius: var(--sugar); padding: var(--t-3) var(--t-1); text-align: center; font-size: var(--betu-xs); color: var(--szin-szoveg-2); }
.ikon-racs .ik { width: 22px; height: 22px; display: block; margin: 0 auto var(--t-1); color: var(--szin-szoveg); }
.minta-sor { display: flex; flex-wrap: wrap; gap: var(--t-3); align-items: center; }
code.valtozo { font-family: Consolas, monospace; font-size: var(--betu-xs); background: var(--szin-semleges-hatter); padding: 1px 5px; border-radius: 3px; }

/* ---------- Kisebb képernyők ---------- */
@media (max-width: 1180px) {
  .racs.ketto, .racs.fele { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .keret { grid-template-columns: minmax(0, 1fr); }
  .menu {
    position: fixed; left: 0; top: 0; bottom: 0; width: min(280px, 86vw); height: auto;
    transform: translateX(-102%); transition: transform .18s ease; box-shadow: var(--arnyek-nagy);
  }
  .menu-kapcs:checked ~ .keret .menu { transform: none; }
  .menu-kapcs:checked ~ .keret .menu-fatyol { display: block; position: fixed; inset: 0; background: rgba(28, 35, 43, .45); z-index: 25; }
  .menu-kapcs:focus-visible ~ .keret .menu-gomb { outline: 2px solid var(--szin-kiemelo); outline-offset: 2px; }
  .menu-gomb { display: inline-flex; }
  .fejlec { padding: 0 var(--t-3); gap: var(--t-3); }
  .tartalom { padding: var(--t-4) var(--t-3); }
  .lablec { padding: var(--t-3); }
}
@media (max-width: 640px) {
  .fejlec .futas-info .hosszu, .fejlec .felhasznalo .nev { display: none; }
  .racs.kartyak { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t-3); }
  .szamkartya { padding: var(--t-3); }
  .szamkartya .ertek { font-size: 24px; }
  .adatok { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .adatok dd { margin-bottom: var(--t-2); }
  .kereso { max-width: none; flex-basis: 100%; }
  .oldalfej .muveletek .gomb { flex: 1 1 auto; }
}
@media print {
  .menu, .fejlec, .terv-valto { display: none; }
  .keret { display: block; }
}

/* ---------- Arculati kiegészítők ---------- */
.keszlet { white-space: nowrap; font-weight: 500; }
.keszlet.van { color: var(--szin-olcsobb); }
.keszlet.nincs { color: var(--szin-hiba-szoveg); }
.keszlet .ik { width: 13px; height: 13px; vertical-align: -1px; stroke-width: 2; }
.athuzott { color: var(--szin-athuzott); text-decoration: line-through; font-weight: 400; }
.akcios-ar { display: inline-block; background: var(--szin-gomb); color: var(--szin-gomb-szoveg); border-radius: 4px; padding: 0 6px; }

/* Számoszlopok: egyforma szélességű számjegyek (a Poppins ezt nem tudja) */
.tabla td.szam, .tab-szam, .kul, .arres-rossz, .bevitel.szam, .lapozo, .naplo time, .adatok dd.tab-szam {
  font-family: var(--betu-szam); font-variant-numeric: tabular-nums;
}

.kartya-test > .adatok, .parbeszed-doboz .test > .adatok { margin-top: var(--t-3); }
.valaszto:has(.mertekegyseg) { align-items: center; }
.valaszto:has(.mertekegyseg) input[type="radio"] { margin-top: 0; }
.tartalom > dialog.parbeszed { margin: auto; }
.sor.szet > span:first-child { flex: 1 1 200px; min-width: 0; }

/* ---------- Keskeny képernyő: finomítások ---------- */
.kapcsolo, .tabla-doboz, .kereso { position: relative; }
.fejlec .bolt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) {
  .fejlec .futas-info { display: none; }
  .sav { padding: var(--t-3); gap: var(--t-2); }
  .kartya-test { padding: var(--t-3); }
}