:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --border: #e2e4e9;
  --text: #1b1e26;
  /* QA-kör WCAG-audit (2026-08-28): az eredeti #6b7280 4.43:1 kontrasztot adott
     var(--bg) alapon (pl. a fejléc "Bejelentkezés / Regisztráció" gombja) —
     az AA-küszöb 4,5:1, tehát épp csak elbukta. Egy alig észrevehető
     sötétítéssel (#657080) mindkét gyakori alapon (var(--bg): 4.60:1,
     var(--panel): 5.02:1) biztosan megfelel.
     Külső UX-audit, ötödik kör (2026-08-29): a user ismételt, konkrét
     panasza ("nagyon beleveszik a háttérbe"), hogy a fenti érték az AA-
     MINIMUMOT épp csak teljesíti, de a gyakorlatban továbbra sem kényelmesen
     olvasható — ugyanez a felismerés már egyszer megtörtént szűken, csak az
     "achievement-progress-count"-nál (ld. lejjebb), most a TELJES, globális
     --text-dim kap érdemi sötétítést, mert ez a szín ~60 helyen fut (hint-ek,
     label-ek, magyarázó szövegek mindenhol) — egy globális változó-bővítés
     minden képernyőn egyszerre javítja a kontrasztot. Új érték AAA-szintű
     (var(--bg): 6.92:1, var(--panel): 7.55:1), a var(--text) feketétől még
     mindig egyértelműen megkülönböztethető (nem lesz "second és primary
     szöveg összemosódik" hatás). */
  --text-dim: #4a5568;
  --accent: #2f6f4f;
  --accent-dim: #e7f2ec;
  /* Valós, élőben mért WCAG-hiba (2026-09-03, önálló UX/UI/CRO audit) —
     a `--accent`-et EGYSZERRE használja a kód (a) szövegszínként/keretként
     sötét háttér ELŐTT (pl. .logo-ut, linkek, .answer-card.recommended
     kerete) és (b) TELI HÁTTÉRKÉNT fehér szöveg ALATT (pl. .btn-primary,
     .answer-card-badge, .chip.active — kb. 10 hely). Ez a KÉT igény
     ELLENTÉTES: az (a)-hoz VILÁGOSABB zöld kell sötét témában (hogy
     kiváljon a sötét háttérből), a (b)-hez SÖTÉTEBB (hogy a RAJTA lévő
     fehér szöveg olvasható maradjon) — egyetlen közös érték nem tud
     mindkettőnek megfelelni. Világos témában (lent) még egyezik a kettő
     (`#2f6f4f` fehér szöveggel 5,99:1, jóval AA fölött), ezért itt,
     alapértelmezésben `--accent-fill` egyenlő `--accent`-tel — a sötét
     témabeli @media blokk adja csak a ténylegesen eltérő, sötétebb
     árnyalatot. ÚJ háttér-felhasználásnál `--accent-fill`-et kell hívni,
     NEM `--accent`-et, ha a háttéren fehér/világos szöveg fog állni. */
  --accent-fill: var(--accent);
  --danger: #b3261e;
  --danger-bg: #fbeae9;
  --warn: #8a6100;
  --warn-bg: #fff6df;
  /* a "kiválasztva / éppen ezt szerkeszted" jelzés ugyanazt a színt
     használja, mint a figyelmeztetés — szándékosan nincs külön 4. szín */
  --edit-accent: var(--warn);
  --edit-accent-dim: var(--warn-bg);
  --radius: 12px;
  /* Térköz-skála ("8px grid" audit, 2026-08-31, korábban tudatosan elhalasztott
     tétel a design-system döntésből). Átvilágítás eredménye: a MEGLÉVŐ ~300
     margin/padding/gap érték döntő többsége (gyakorisági elemzés: 10/8/6/14/
     4/12/18/16/2/24/20/32px) MÁR MA IS egy konzisztens, 2px-lépésű skálát
     követ — ez NEM egy kaotikus rendszer volt, csak eddig nem volt névvel
     ellátva. A tokenek ide kerültek, ÚJ kódhoz kötelezőek — a MEGLÉVŐ
     deklarációk (különösen a gomb/chip-padding párok, pl. `9px 14px`,
     `5px 12px`) SZÁNDÉKOSAN NEM lettek visszamenőleg tömegesen átírva: ezek
     jó része aszimmetrikus (függőlegesen kisebb, mint vízszintesen — bevett
     technika az optikai súlyozáshoz), sok élő teszttel finomhangolt — egy
     vak "kerekítsük mindet a legközelebbi skála-értékre" csere vizuális
     regressziót kockáztatna, funkcionális haszon nélkül. A tokenek egyelőre
     a legtisztább, tisztán strukturális (nem komponens-specifikusan
     hangolt) helyeken vannak alkalmazva. */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-64: 64px;
  --shadow: 0 1px 2px rgba(20, 20, 30, .04), 0 4px 16px rgba(20, 20, 30, .06);
  /* Színátmenetes felületek — ismételt, kifejezett kérésre (a korábbi lapos
     var(--panel)/var(--bg) töltés helyett). Szándékosan HALVÁNY, a saját
     palettából (var(--accent)/var(--panel)/var(--bg)) kevert átmenet, nem
     önálló, beégetett szín — így automatikusan igazodik light/dark témához,
     és nem üt el a termék visszafogott, "nem kaszinó-jellegű" vizuális
     szabályától (ld. a Goosebumps-kommentet lejjebb). */
  --surface-gradient: linear-gradient(155deg, color-mix(in srgb, var(--accent) 6%, var(--panel)) 0%, var(--panel) 65%);
  --surface-gradient-sunken: linear-gradient(155deg, color-mix(in srgb, var(--accent) 5%, var(--bg)) 0%, var(--bg) 65%);
  --accent-gradient: linear-gradient(155deg, var(--accent-dim) 0%, var(--panel) 85%);
  --accent-gradient-sunken: linear-gradient(155deg, var(--accent-dim) 0%, var(--bg) 85%);
  /* Eredmény-kártyák MÁSODLAGOS (nem ajánlott) színe — TELJESEN
     újratervezve (2026-09-02, közvetlen user visszajelzés: "túl sok szín
     ez így... a Kék szín nem jó, mert úgy hat, mintha ki lenne
     jelölve"). A korábbi kék `--free-accent` trió (csak az "ingyenes"
     kártyához) narancssárga `--secondary-accent` trióra cserélve,
     MINDEN nem-ajánlott kártyához — a `--accent` zöld trió mintáját
     követi, szándékosan KÜLÖN token-pár, hogy a két jelentés (ajánlott /
     egyéb lehetőség) CSS szinten is egyértelműen elváljon. */
  --secondary-accent: #c9660d;
  --secondary-accent-dim: #fbeee0;
  --secondary-accent-gradient: linear-gradient(155deg, var(--secondary-accent-dim) 0%, var(--panel) 85%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161b;
    --panel: #1c1f26;
    --border: #2b2f38;
    --text: #e7e9ee;
    /* Ugyanaz a globális kontraszt-bővítés sötét témában is — a világos
       témabeli sötétítéssel ellentétes irányban (itt világosítás kell,
       hiszen sötét háttéren dolgozunk), enyhébb mértékben, mert a sötét
       téma alapértéke már eddig is 6,3-6,9:1 körül volt (nem ugyanaz a
       probléma, mint világos témában, de a szimmetria és a jövőbeli sötét
       hátterű elemek miatt itt is érdemes egy fokkal világosítani). */
    --text-dim: #aab0bd;
    --accent: #57b98b;
    --accent-dim: #16261f;
    /* ld. a --accent-fill fenti, :root-beli kommentjét — itt TÉNYLEG eltér
       a plain --accent-től. Mérve: a sima #57b98b + fehér szöveg 2,41:1
       (a WCAG AA 4,5:1 alatt); ez a #3c8060 4,72:1-et ad, AA-megfelelő. */
    --accent-fill: #3c8060;
    --danger: #ff8079;
    --danger-bg: #3a1f1e;
    --warn: #e8c468;
    --warn-bg: #362c12;
    --secondary-accent: #e8944f;
    --secondary-accent-dim: #33210f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

/* Az elemek `display` szabálya (pl. `.map-busy { display: flex }`) azonos
   specificitású a böngésző beépített `[hidden] { display: none }`
   szabályával, és forrássorrendben KÉSŐBB jön — ezért felülírja azt, és a
   JS-ből `el.hidden = true`-val elrejtett elem mégis látszik. Ez okozta a
   „beragad, örökké tölt" hibát a térkép-busy jelzőn. */
[hidden] { display: none !important; }

/* Valós, élőben mért hiba (2026-09-03, önálló UX/UI/CRO audit) — a `<button>`
   elemek (a `.btn`-en át MINDEN gomb, a fő "Útvonal kiszámítása" CTA-t is
   beleértve) nem öröklik a site betűtípus-készletét, mert a böngésző saját,
   natív gomb-betűtípusára (jellemzően Arial) esnek vissza — élőben mérve:
   `#run-check`/`#btn-favorite` `fontFamily: "Arial"`-t adott, miközben a
   `<h1>`/`<summary>` helyesen a márka-fontot kapta. A `select`/`textarea`
   MÁR kapott ilyen szabályt korábban (ld. lent, `input, select, textarea`),
   csak a `button` maradt ki — ez pótolja. */
button { font-family: inherit; }

/* Külső UX-audit (2026-08-29, hetedik kör): eddig csak néhány elemnek
   (input/select/textarea, .logo-link, .info-dot) volt SAJÁT, tudatosan
   tervezett fókusz-stílusa — minden másra (gombok, chipek, kártyák,
   linkek) a böngésző alap fókusz-gyűrűje jutott, ami böngészőnként/
   témánként eltérő erősségű. Ez az egyetlen, alacsony specificitású
   globális szabály mindenre ad egy garantált, márkaszínű, jól látható
   alapértelmezést — a fenti, KONKRÉTABB szelektorral rendelkező szabályok
   (pl. `.info-dot:focus-visible`) a nagyobb specificitásuk miatt
   változatlanul felülírják, ahol egyedi viselkedés kell. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Skip-link (2026-08-30, külső UX-audit) — a billentyűzettel navigáló
   userek eddig végig kellett Tabozzák a fejlécet minden oldalbetöltésnél,
   mielőtt a fő tartalomhoz értek volna. Alapból a képernyőn kívülre van
   pozicionálva (nem `display:none` — az képernyőolvasóból is eltüntetné),
   fókuszra beúszik a bal felső sarokba. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent-fill); color: #fff; padding: 10px 18px;
  border-radius: 0 0 8px 0; font-weight: 650; text-decoration: none;
}
.skip-link:focus { left: 0; }

body {
  margin: 0;
  /* Külső UX-audit (2026-08-30): "finom gradient/texture a háttérben az
     'üres' érzés csökkentésére" — két nagyon halvány, márkaszínű radiális
     folt a lap tetején/alján, a `--bg` fölé rétegezve. Szándékosan HALVÁNY
     (a `--accent-dim`-nél is visszafogottabb, saját alacsony alfa-értékkel)
     és `background-attachment: fixed`, hogy görgetéskor ne mozogjon a
     tartalommal — sose vonhatja el a figyelmet az űrlaptól/eredménytől. */
  background:
    radial-gradient(circle at 15% -10%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 100% 110%, color-mix(in srgb, #3388ff 6%, transparent) 0%, transparent 45%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }

.dim { color: var(--text-dim); font-weight: 400; }

.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  /* a logó ikon kék→zöld átmenetét idézi vissza egy vékony csíkban — apró,
     de a márka mindkét témában felismerhető marad (a border-image felülírja
     a fenti border-bottom színét, csak a szélességét hagyjuk 1px helyett 3px-re) */
  border-image: linear-gradient(90deg, #3388ff, #2f6f4f) 1;
  border-bottom-width: 3px;
  position: sticky; top: 0;
  /* Valódi hiba, élőben talált (2026-09-02, screenshot: a fejléc fiók-
     menüje csonkán jelent meg a főoldali élő térkép-előnézet fölött) —
     a `position: sticky` MAGA is stacking contextet nyit, tehát a
     .topbar SAJÁT z-index-e (korábban 5) egy PLAFONT ad minden
     GYEREKÉNEK (pl. #account-menu, z-index:1006) ahhoz képest, amit
     a .topbar-on KÍVÜL álló elemek (itt: a Leaflet .leaflet-top/
     .leaflet-bottom kontroll-konténerei, z-index:1000) látnak — a
     .home-map-wrap/Leaflet NEM nyit saját stacking contextet (nincs
     rajta explicit z-index), tehát az ő 1000-es rétege a .topbar
     RÉGI 5-ös értékével versenyzett, nem a benne lévő dropdown 1006-
     osával, és nyert. Ugyanez a csapda (rejtett, alacsonyabb szintű
     stacking-context-plafon) az eredmény-oldali #map-re is elvben
     fennállt, csak ott korábban nem volt vele vizuálisan átfedő
     állapot tesztelve. Javítás: a .topbar z-index-e magasabbra, a
     Leaflet 1000-es rétege FÖLÉ (de a .modal-backdrop 1005 ALÁ, hogy
     egy modal mindig a fejléc fölött maradjon). */
  z-index: 1001;
}
/* A fejléc középső XP→kredit sávja (2026-08-28-tól) 2026-09-03-án törölve
   (ld. app.js frissitsdFiokTerulet() komment) — a grid emiatt 3 oszlopból
   (logó / sáv / fiók-terület) 2 oszlopra (logó / fiók-terület) egyszerűsödött,
   a fiók-területet a maradék `1fr` oszlop `justify-self:end`-je tartja a
   jobb szélen, pontosan úgy, mint korábban a 3. explicit oszlop tette. */
.topbar-inner {
  max-width: 1200px; margin: 0 auto; padding: 16px 24px;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px;
}
.topbar-inner > .topbar-right { justify-self: end; }
@media (max-width: 760px) {
  /* Szűk kijelzőn a logó/fiók-terület egy sorban marad (a korábbi, MOST
     törölt XP-sáv miatt létező 2. grid-sor is törölve — ld. fent). */
  .topbar-inner { grid-template-columns: auto auto; grid-template-areas: "logo account"; }
  .topbar-inner > .logo-link { grid-area: logo; }
  /* UX-audit (2026-09-03): "a nyelv-váltó 'HU' ikon önálló, izolált
     elemként lóg a fejléc tetején" — élőben megerősítve: a `.topbar-right`
     KÉT gyereke (#lang-switch-wrap, #account-area) korábban EGYMÁS ALÁ
     tördelődhetett (a saját `flex-wrap:wrap` miatt), ami a "account"
     grid-cellát magasabbra nyújtotta, mint a "logo" cellát — a grid
     `align-items:center` emiatt a logót lejjebb, a nyelv-váltót viszont a
     (magasabbra nyúlt) saját cellája TETEJÉRE igazította, vizuálisan
     szétesett, "lebegő" hatást keltve. A nyelv-váltó és a fiók-terület
     mostantól EGYMÁS MELLETT marad (nem törik egymás alá) — ha a
     fiók-terület SAJÁT tartalma (badge/streak/kredit/avatar) nem fér ki,
     AZ maga törhet 2 sorba (megtartja a `flex-wrap:wrap`-ját), de a
     nyelv-váltó ikon nem szakad el tőle egy külön, magasabb sorba.
     FONTOS: ez a felülírás a `.topbar-inner > .topbar-right` ÖSSZETETT
     szelektorral (2 osztály) kerül ide, NEM önálló `.topbar-right`-ként —
     utóbbi UGYANOLYAN specificitású lenne, mint a lenti (media query
     nélküli) alap-szabály, és a FORRÁS-SORREND miatt (az alap-szabály
     KÉSŐBB áll a fájlban) csendben veszítene, függetlenül attól, hogy a
     media query aktív-e. Élőben pont ez történt, míg ez a komment nem
     készült el — a `flex-wrap` élesben egyszerűen nem változott. */
  .topbar-inner > .topbar-right { grid-area: account; justify-self: end; flex-wrap: nowrap; align-items: flex-start; }
}
/* Valódi, user által élesben látott hiba (2026-08-29): a `gap: 8px` a
   flex-konténer MINDEN gyerekpárja közé beszúródik — a `<h1>` gyerekei
   korábban [img, "Optim" szövegcsomópont, .logo-ut span] voltak (egy
   nyers szövegcsomópont is önálló, anonim flex-itemnek számít), ezért a
   szándékolt "ikon ↔ szöveg" térköz TÉVESEN "Optim" és "Út" közé is
   bekerült — élesben ez látszott "Optim Út" két szónak, holott a DOM-ban
   nem volt szóköz köztük. Javítás: "Optim"+".logo-ut" most egyetlen
   `.logo-wordmark` span-ba került, ez ad a `<h1>`-nek csak KÉT flex-itemet
   (ikon, teljes szómárka) — a gap ezután csak azok között érvényesül. */
.topbar h1 { font-size: 19px; display: flex; align-items: center; gap: 8px; }
.tagline { margin: 2px 0 0; font-size: 12.5px; color: var(--text-dim); }
.logo-mark { height: 26px; width: auto; display: block; }
.logo-wordmark { white-space: nowrap; }
/* a logóban is az "Út" van kiemelve zölddel — ugyanaz a színkód, mint a
   térkép "szokásos út" kék vonaláé nem, ez a márka saját zöldje (accent) */
.logo-ut { color: var(--accent); }
/* a fejléc-logóra kattintva vissza a főoldalra (űrlap-nézet) — sima
   button-reset, hogy változatlanul nézzen ki, csak kattinthatóvá váljon */
.logo-link {
  /* a böngésző alap `<button>` stílusa saját (fekete) szöveg-színt ad, ami
     megtörte az öröklődést — az "Optim" szó emiatt feketén jelent meg a
     helyes, témafüggő var(--text) szín helyett */
  background: none; border: none; padding: 0; margin: 0; text-align: left; cursor: pointer;
  display: block; border-radius: 8px; color: inherit; font: inherit;
}
.logo-link:hover h1 { color: var(--accent); }
.logo-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.topbar-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.account-area { display: flex; align-items: center; gap: 10px; font-size: 13.5px; flex-wrap: wrap; }
.account-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  /* korábban var(--panel) volt — pont a topbar saját háttere, ezért a gomb
     kontúron kívül gyakorlatilag láthatatlanul olvadt bele */
  background: var(--bg); color: var(--text-dim); font-size: 15px; line-height: 1;
  cursor: pointer;
}
.account-icon-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Monogram-avatar a fiók-menü nyitásához — a user visszajelzésére
   (2026-08-29, külső UX-audit alapján) ez váltja a korábbi ☰ ikont ÉS a
   mindig kiírt teljes email-címet is: a fejlécben csak egy körbe zárt
   kezdőbetű látszik, a teljes email a lenyíló menü tetején van (ld.
   .account-menu-email), nem a fejlécben, nyersen. */
.account-avatar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--accent-fill); color: #fff; font-size: 14px; font-weight: 700;
  line-height: 1; cursor: pointer;
}
.account-avatar-btn:hover { filter: brightness(1.08); }

/* Goosebumps V4 — fejléc XP/kredit/streak widget, Fázis A: csak számok,
   ünneplés/animáció nélkül (az a Fázis B-ben jön) */
.gamification-widget {
  font-size: 12px; color: var(--text-dim); white-space: nowrap;
  background: none; border: none; padding: 0; font-family: inherit; cursor: pointer;
}

/* Folyamatos XP→kredit csúszka — 2026-08-28–2026-09-03 közt a fejlécben,
   "NAGYBAN, középen" élt (#header-xp-credit-big); user visszajelzésre
   ("furcsa ott magában") a Badge-eim fül tetejére költözött (ld. app.js
   epitsdFelXpKreditSavot()) — a belső elrendezés (ikon+szöveg+sáv)
   VÁLTOZATLAN, csak a külső konténer lett egy egyszerű `<div>` a korábbi
   topbar-beli `<button>` helyett (itt nincs saját kattintás-akciója). */
.achievements-xp-credit {
  display: flex; align-items: center; gap: 10px; max-width: 100%; margin: 10px 0;
}
.achievements-xp-credit .icon { font-size: 20px; flex: none; }
.header-xp-credit-big-text {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.header-xp-credit-label {
  font-size: 14px; font-weight: 650; color: var(--text); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.header-xp-credit-track {
  display: block; width: min(220px, 40vw); height: 8px; border-radius: 4px;
  background: var(--border); overflow: hidden;
}
.header-xp-credit-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
@media (max-width: 760px) {
  .header-xp-credit-track { width: min(280px, 70vw); }
}

/* Fejléc-menü — a korábbi 6 szöveges gomb helyett egy lenyitható menü, hogy
   a fejléc ne legyen zsúfolt; a kompakt jelzők (email, cím, csomag, XP/kredit)
   maradnak közvetlenül látható szövegként/ikonként, csak az AKCIÓK kerülnek
   a ☰ mögé. z-index a modalokénál (1000) alacsonyabb kell legyen (a menü
   sose kerülhet modal fölé), de a sima tartalomnál magasabb. */
.account-menu-wrap { position: relative; display: inline-flex; }
.account-menu {
  /* Valós hiba, screenshoton talált (2026-09-02): a fejléc fiók-/nyelv-
     menüje az eredmény-oldalon a térkép ALATT jelent meg (a Leaflet saját
     .leaflet-top/.leaflet-bottom kontroll-konténerei z-index:1000-en
     állnak, ld. a .modal-backdrop-nál dokumentált ugyanezt a csapdát) —
     60 → 1006-ra emelve, a modalok (1005) fölé, de a toast-container
     (1010) alá. */
  position: absolute; top: 100%; right: 0; margin-top: 8px; z-index: 1006;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); min-width: 200px; padding: 6px; display: flex; flex-direction: column;
}
.account-menu-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 9px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--text);
}
.account-menu-item:hover { background: var(--bg); }
.account-menu-sep { border: none; border-top: 1px solid var(--border); margin: 4px 2px; }
/* A teljes email a menü tetején — nem kattintható, csak tájékoztató sor
   (ld. app.js frissitsdFiokTerulet()). Kis, halványabb szöveg, mert ez
   itt már nem a fő cselekvési felület, csak "ezzel a fiókkal vagy
   bejelentkezve" emlékeztető. */
.account-menu-email {
  padding: 6px 10px 8px; font-size: 12.5px; color: var(--text-dim);
  word-break: break-all;
}
/* Nem-tolakodó Telegram-jelzés — csak addig látszik, amíg a user nem
   kapcsolta össze; a kis alcím halványabb, hogy ne tűnjön riasztásnak */
.account-menu-item--hint small { display: block; font-size: 11px; color: var(--text-dim); font-weight: normal; }

.modal-backdrop {
  /* Valódi hiba, élőben talált (2026-09-02, screenshot: a Leaflet-
     attribúció a regisztrációs modal FÖLÖTT jelent meg) — a korábbi
     z-index:1000 tévesen "jóval fölötte" volt a Leaflet saját rétegeinek,
     de a Leaflet KONTROLL-konténerei (.leaflet-top/.leaflet-bottom, ld.
     leaflet.css) MAGUK IS pontosan 1000-en állnak — egyenlő z-index-nél a
     DOM-sorrend dönt, és a #map (a <main>-ben, DOM-sorrendben a modal
     UTÁN) emiatt felülírta a modalt. 1005-re emelve — a MEGLÉVŐ toast-
     container (1010, "a modalok fölött is látszódjon") fölötte marad,
     a Leaflet 1000-es rétegei alatta. */
  position: fixed; inset: 0; background: rgba(20, 20, 30, .45);
  display: flex; align-items: center; justify-content: center; z-index: 1005; padding: 20px;
}
/* A modal korábban egyetlen, korlátlanul növekvő dobozként görgetett a
   HÁTTÉRREL együtt — hosszú tartalomnál (pl. sok badge) a bezáró gomb a
   viewport fölé csúszott, elérhetetlenné vált. Most a fejléc (cím+bezárás)
   fix marad, csak a tartalom (`.modal-scroll`) görgethet a dobozon belül. */
.modal-box {
  background: var(--surface-gradient); border-radius: var(--radius); box-shadow: var(--shadow);
  width: 100%; max-width: 380px; position: relative;
  max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal-header {
  display: flex; align-items: flex-start; gap: 10px; padding: 24px 24px 0; flex: none;
}
.modal-header h2, .modal-header .modal-title { font-size: 19px; margin: 0; font-weight: 700; }
.modal-scroll { overflow-y: auto; padding: var(--space-14) var(--space-24) var(--space-24); }
.modal-scroll label { display: block; font-size: 12.5px; color: var(--text-dim); margin: var(--space-14) 0 var(--space-6); }
.modal-scroll label:first-child { margin-top: 0; }
.modal-scroll input { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 14px; }
.modal-close {
  /* `margin-left:auto` a flex fejlécen belül mindig a jobb szélre tolja,
     akkor is, ha nincs melletta cím (pl. a ceremony-modalnak nincs h2-je) */
  margin-left: auto; flex: none; background: var(--bg); border: none; cursor: pointer;
  border-radius: 8px; font-size: 18px; color: var(--text-dim); line-height: 1; padding: 5px 9px;
}
.modal-close:hover { color: var(--text); background: var(--border); }
#upgrade-monthly, #upgrade-yearly { margin-top: 14px; }

.modal-box-wide { max-width: 620px; }
/* A "✔ " szöveg-előtag volt eddig az EGYETLEN vizuális felsorolás-jelző
   (list-style: none mellett) — az emoji-sűrűség csökkentésekor (2026-08-30)
   a `disc` jelző veszi át a szerepét, hogy a 4 előny vizuálisan tényleg
   különálló pontokként maradjon olvasható, ne csak sortöréssel elválasztott
   szövegfolyam legyen. */
/* Regisztráció/Bejelentkezés fül-pár (2026-09-03, közvetlen user
   visszajelzés: "sokadszorra futok bele, hogy regisztrációs űrlapba
   kezdek el bejelentkezni") — ugyanaz a szegmentált-fül vizuális minta,
   mint a kártyák vármegyei/országos matrica-váltójánál (ld.
   .vignette-choice-tabs), csak nagyobb méretben, mert ez egy TELJES
   modal elsődleges módválasztója, nem egy kártyán belüli apró kapcsoló. */
.auth-mode-tabs {
  display: flex; gap: 4px; background: var(--bg); border-radius: 10px;
  padding: 4px; margin-bottom: 16px;
}
.auth-mode-tab {
  flex: 1; font-size: 14.5px; font-weight: 700; color: var(--text-dim);
  background: none; border: none; border-radius: 7px; padding: 10px 12px;
  cursor: pointer; text-align: center; transition: background .15s ease, color .15s ease;
}
.auth-mode-tab:hover { color: var(--text); }
.auth-mode-tab.active {
  background: var(--panel); color: var(--accent); box-shadow: var(--shadow);
}
.auth-benefits {
  list-style: disc; margin: 0 0 16px; padding: 12px 14px 12px 30px; background: var(--accent-dim);
  border-radius: 10px; font-size: 13px; color: var(--text);
}
.auth-benefits li { padding: 3px 0; }
/* Value-driven CTA (2026-08-31, UX-audit, Conversion/High) — a korábbi
   4 tétel mind minőségi (nem szám-alapú) állítás volt; a user kifejezett
   kérésére egy KONKRÉT, valós tényen alapuló (ld. CLAUDE.md "Regisztráció-
   kor 15 kredit üdvözlő ajándék jár") sor kerül a lista élére, vizuálisan
   is kiemelve — nem csak egy a négy közül. */
.auth-benefits li.auth-benefit-highlight {
  list-style: none; margin-left: -18px; padding: 2px 0 8px;
  margin-bottom: 6px; border-bottom: 1px dashed var(--border);
  font-weight: 700; color: var(--accent);
}
/* Google Sign-In (2026-09-04) — #auth-google-button-be a JS rendereli be
   a Google saját gombját (iframe), a wrap csak a térközt/középre-igazítást
   adja. Az elválasztó egy klasszikus "── vagy ──" minta — nem egyedi
   design-döntés, hanem a form feletti/alatti szakaszok jól ismert,
   egyértelmű elkülönítése. */
#auth-google-wrap { margin-bottom: 14px; }
#auth-google-button { display: flex; justify-content: center; }
.auth-divider {
  display: flex; align-items: center; gap: 10px; margin: 14px 0;
  color: var(--text-dim); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.history-table-wrap { overflow-x: auto; margin-top: 14px; }
.history-table-wrap table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.history-table-wrap th {
  text-align: left; color: var(--text-dim); font-weight: 650; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .03em; padding: 6px 10px; border-bottom: 1px solid var(--border);
}
/* Valós, élőben talált hiba (2026-09-03, közvetlen user visszajelzés:
   "profilomban még mindig el van csúszva az action oszlop") — a fenti
   `th` szabály MINDEN fejlécet balra igazít, de az ACTION oszlop celláinak
   tartalma (`.history-actions`, lent) `justify-content: flex-end`-del
   JOBBRA igazított — a fejléc-szöveg és a ténylegesen alatta lévő
   ikongombok emiatt sose estek egy vonalba. Az ACTION MINDIG az utolsó
   oszlop, `:last-child`-dal nem kell külön osztályt bevezetni hozzá. */
.history-table-wrap th:last-child { text-align: right; }
/* Valós, élőben talált hiba (2026-09-03, közvetlen user visszajelzés:
   "a műveletek lejjebb vannak") — a `<td>` böngésző-alapértelmezett
   `vertical-align: middle`-je egy hosszú, 2 sorba törő "Honnan → Hová"
   szöveg mellett a szomszédos (mindig 1 soros) MŰVELET-cellát a MAGASABB
   sor KÖZEPÉRE igazította — vagyis lejjebb tolta az ikonokat az első sor
   szövegéhez képest. `vertical-align: top` minden cellát a sor TETEJÉHEZ
   igazít, függetlenül a szomszéd cellák magasságától. */
.history-table-wrap td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.history-table-wrap td.amount { font-variant-numeric: tabular-nums; text-align: right; }
.history-table-wrap td.amount.positive { color: var(--accent); font-weight: 650; }
/* Külső UX-audit (2026-08-29, hetedik kör, 17. tétel): a sorok most
   3 műveletet kapnak — a `.btn-icon:hover` alap (piros/danger) csak a
   TÖRLÉS gombhoz illik, az újratervezés/kedvenc nem destruktív akció. */
.history-row-clickable { cursor: pointer; }
.history-row-clickable:hover { background: var(--bg); }
/* VALÓS hiba, amit a fenti `vertical-align: top` NEM oldott meg (2026-09-03,
   ugyanaznapi KÖVETKEZŐ kör, közvetlen user visszajelzés: "az action része
   a táblázatnak más sorban van, nem illeszkedik a sorához") — élőben mérve
   `getBoundingClientRect()`-tel: a `.history-actions` osztály KORÁBBAN
   közvetlenül a `<td>`-n ült, `display: flex`-fel. Egy `<td>`, aminek a
   `display`-jét felülírjuk `flex`-re, MÁR NEM nyúlik ki a sor TELJES
   magasságára (a normál táblázat-cella viselkedés ELVESZIK, amint a
   display flex lesz) — egy hosszú, több sorba törő szomszéd cella mellett
   ez a cella JÓVAL rövidebb maradt, mint a sor, ezért vizuálisan úgy
   nézett ki, mintha egy MÁSIK (rövidebb) sorhoz tartozna. A `.history-
   actions` osztály mostantól egy a `<td>`-n BELÜLI `<div>`-en ül (ld.
   app.js) — a `<td>` MAGA sima táblázat-cella marad (helyesen nyúlik a
   sor magasságára, a `vertical-align: top` helyesen igazítja), a flex-
   elrendezés csak a belső div tartalmára vonatkozik. */
.history-actions { display: flex; gap: 4px; justify-content: flex-end; }
.history-replan:hover, .history-favorite:hover { color: var(--accent); border-color: var(--accent); }
.history-favorite.active { color: #e8a33d; border-color: #e8a33d; }
.history-empty { text-align: center; color: var(--text-dim); padding: 32px 10px; font-size: 14px; }
/* Korábbi útvonal önkéntes feedback (B2B/közösségi backlog, 2. tétel,
   2026-08-31; 2026-09-01, 2. kör: közvetlen user visszajelzésre a
   korábbi KÜLÖN, mindig látható doboz megszűnt — a `route_decisions`
   (nem a `route_history`) forrásból jövő kérdőív mostantól a MEGFELELŐ
   "Korábbi kereséseim" sor alá nyíló, rejtett <tr>-ként jelenik meg,
   a sor saját 💬 ikonjára kattintva, ld. app.js epitsdFelVisszajelzesSor
   és nyisdMegHistoryModalt). */
.feedback-pending-row td { padding: 14px 12px; background: var(--accent-dim); }
.feedback-form .feedback-step:first-child { margin-top: 0; }
.feedback-step { margin-bottom: 10px; }
.feedback-step .hint { margin: 0 0 6px; font-weight: 600; color: var(--text); }
/* Gomb-variáns konzisztencia-átvizsgálás (2026-08-30): a "Saját adataim"
   szerkesztés/mentés/mégse ikon-gombjai (matrica ÉS kedvenc soroknál,
   beleértve az "új hozzáadása" változatot is) NEM destruktív akciók, de
   eddig felülírás híján a `.btn-icon:hover` alap piros/danger színét
   örökölték, ugyanúgy, mint egy törlés-gomb — ugyanaz a hiba, amit a
   `.history-replan`/`.history-favorite` fent már megoldott a másik
   listánál. */
.my-data-vignette-edit:hover, .my-data-vignette-save:hover, .my-data-vignette-cancel:hover,
.my-data-vignette-add-save:hover, .my-data-vignette-add-cancel:hover,
.my-data-favorite-edit:hover, .my-data-favorite-save:hover, .my-data-favorite-cancel:hover,
.my-data-favorite-add-save:hover, .my-data-favorite-add-cancel:hover {
  color: var(--accent); border-color: var(--accent);
}

.simple-layout {
  position: relative;   /* a .home-stats-counter ehhez van abszolút pozicionálva lent */
  max-width: 640px; margin: 0 auto; padding: var(--space-32) var(--space-24) var(--space-64);
}

/* Közösségi számláló a desktop kezdőlap üres oldalsávjában (2026-09-02,
   közvetlen user visszajelzés) — a `.simple-layout` SAJÁT dobozához
   (nem a viewporthoz) igazítva `position:absolute`-tal, hogy a fenti
   860px-es/1024px-es töréspontok szélesség-változásait is automatikusan
   kövesse, HTML-átstrukturálás/viewport-szélesség-számolás nélkül. Csak
   elég széles nézetben fér el ténylegesen a panel mellett ütközés
   nélkül — keskenyebb (de még desktop) nézeten marad rejtve, ugyanúgy,
   mint a kompakt #social-proof-line-nál. Az eredmény-nézetben
   (body.viewing-result) a #refine-panel/térkép már úgyis elfoglalja ezt a
   helyet, ezért ott is rejtve marad — ez SZÁNDÉKOSAN csak kezdőlapi elem
   (a user kifejezetten "a desktop KEZDŐLAP üres oldalsávjai"-t kérte).
   UX-audit (2026-09-03): "a nagy oldalsáv-kártya emellett egy plusz,
   szigorú méret-feltételt is kér... ez elég ritka" — a doboz 200px→180px
   szélesre csökkent, a törésponttal EGYÜTT (lent), hogy szélesebb kör
   tényleg lássa, amint a `SOCIAL_PROOF_MIN_USERS`-t (app.py, KÜLÖN,
   üzleti döntés, ezt a kört NEM érinti) átlépi a regisztrált userszám. */
.home-stats-counter {
  display: none;
  /* top: a .simple-layout SAJÁT padding-top-ja (--space-32) igazítja a
     panel LÁTHATÓ (padding utáni) tetejéhez, ne az absztrakt border-boxhoz */
  position: absolute; left: 100%; top: var(--space-32); margin-left: var(--space-32); width: 180px;
}
.home-stats-counter .savings-stat { margin-bottom: var(--space-14); }
.home-stats-counter .savings-stat:last-child { margin-bottom: 0; }
@media (min-width: 1440px) {
  /* a küszöb SZÁMOLVA: a .simple-layout ekkor max-width:960px, középre
     igazítva — 1440px-en a jobb margó ~240px, a doboz (180px) + margó
     (32px) + kb. 17px scrollbar-tartalék = 229px igénye ebbe befér. */
  body:not(.viewing-result) .home-stats-counter:not([hidden]) { display: block; }
}

.panel {
  background: var(--surface-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-24);
}

.main-panel h2 { font-size: 24px; margin-bottom: var(--space-4); }
.main-panel h3 { font-size: 15px; margin: var(--space-20) 0 var(--space-4); }

.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-14); gap: var(--space-10); }

/* Élő térkép-előnézet a főoldalon (2026-08-31, UX-audit maradék, A) tétel)
   — a user kifejezett kérésére VALÓDI, élő Leaflet-térkép a korábbi puszta
   háttér-gradiens helyett/mellett (ld. body{} lent). A wrapper NEGATÍV
   margóval pontosan a .panel paddingját (24px) semlegesíti, hogy a térkép
   a kártya SZÉLÉIG érjen — a border-radius/overflow:hidden SZÁNDÉKOSAN a
   WRAPPEREN van, NEM a .panel-en magán, mert az utóbbi overflow:hidden-je
   levágná a benne lévő abszolút pozicionált elemeket (pl.
   .address-suggest-list dropdown). */
.home-map-wrap {
  position: relative; height: 190px;
  /* az alsó térköz korábban az alatta álló "Előzetes nézet..." hint
     (.home-map-hint, törölve 2026-09-02) margójából jött — enélkül itt
     kell, hogy a térkép ne érjen hozzá a "Kedvencek" sorhoz */
  margin: -24px -24px 16px;
  border-radius: var(--radius) var(--radius) 0 0; overflow: hidden;
  background: var(--surface-gradient);   /* tartalék, ha a Leaflet sose töltődik be */
}
.home-map { width: 100%; height: 100%; }
.home-map-fade {
  position: absolute; inset: 0; pointer-events: none;
  /* csak az ALSÓ szélt olvasztja a kártya felületébe — ha korábban
     kezdődött (50%), a fitBounds által odahelyezett cél-marker
     kimosódott alatta (élő teszttel találva: a Pécs-pin szinte
     eltűnt a színátmenetben) */
  background: linear-gradient(to bottom, transparent 78%, var(--panel) 100%);
}
/* A csempe-réteget (NEM a pin/vonal saját színeit) sötétítjük sötét
   témában — a projekt kizárólag prefers-color-scheme alapú témázást
   használ, nincs [data-theme]-kapcsoló (ld. :root lent). */
@media (prefers-color-scheme: dark) {
  .home-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9); }
}
@media (max-width: 600px) {
  .home-map-wrap { height: 140px; }
}

/* "Kedvencek"/"Legutóbbi" a fejléc jobb oldalára költözött, zárt
   legördülőbe (user visszajelzés, 2026-08-29, hatodik kör) — ld.
   index.html komment. A `[hidden]` attribútumot addig kapja, amíg
   sem kedvenc, sem legutóbbi útvonal nincs (ld. app.js
   frissitsdMentettUtvonalakGombLathatosagat()), hogy első használatkor
   ne mutasson egy üres, semmit nem tartalmazó gombot. */
/* Regisztrációhoz kötött funkciók (2026-09-03, közvetlen user visszajelzés:
   "bejelentkezés nélkül 5 db útvonalat tud csak megnézni... ezek mind
   regisztrációhoz kötött funkciók") — a "Mentett útvonalak" (Kedvencek +
   Legutóbbi) gomb és a ☆ csillag-gombok (`.fav-star`, ami a kezdőlapi
   `#btn-favorite`-ot ÉS az eredmény-oldali csillagot is jelöli, ld.
   index.html/app.js renderResult()) anonim módban SOSE látszanak, még
   akkor sem, ha a böngésző `localStorage`-ában maradt korábbi adat (egy
   5 ingyenes próbálkozásra korlátozott usernek nincs értelme "mentsd el
   későbbre" funkciót kínálni). SZÁNDÉKOSAN `body:not(.logged-in)`-es,
   FÉLIG-hozzáadó szabály (nem egy alap `display:none` + `body.logged-in`
   visszaállítás, ahogy a fenti `.owned-save`-nél) — a `.saved-routes-
   toggle`-nek MÁR van saját, tartalom-alapú `[hidden]`-logikája
   (frissitsdMentettUtvonalakGombLathatosagat()), amit egy `body.logged-in
   .saved-routes-toggle { display: block }`-szerű visszaállító szabály
   FELÜLÍRNA (2 osztály specificitása > 1 attribútum-szelektoré), és egy
   ÜRES listájú bejelentkezett usernél is kényszerítve megjelenítené az
   üres widgetet. Az `!important` itt indokolt: ez egy SZÁNDÉKOS, minden
   más szabálynál erősebb "anonim usernek ez sose látszik" korlát. */
body:not(.logged-in) .saved-routes-toggle,
body:not(.logged-in) .fav-star { display: none !important; }
.saved-routes-toggle { position: relative; flex: none; }
.saved-routes-toggle summary {
  cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 650;
  color: var(--text-dim); padding: 7px 12px; border: 1px solid var(--border);
  border-radius: 8px; white-space: nowrap; background: var(--bg);
}
.saved-routes-toggle summary::-webkit-details-marker { display: none; }
.saved-routes-toggle summary:hover,
.saved-routes-toggle[open] summary { border-color: var(--accent); color: var(--accent); }
.saved-routes-panel {
  position: absolute; top: 100%; right: 0; margin-top: 6px; z-index: 40;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 14px; min-width: 240px;
  max-width: min(320px, calc(100vw - 48px));
}
/* A `.recent-routes` alapból egy SOR (címke + chipek egymás mellett) — a
   keskeny legördülőben ez összezsúfolódna, ezért itt oszlopba rendezzük. */
.saved-routes-panel .recent-routes {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  margin-bottom: 12px;
}
.saved-routes-panel .recent-routes:last-child { margin-bottom: 0; }

/* "Pontosítsd az eredményt" (2026-08-29, negyedik kör) — a `.finomitas`
   (lent) korábban a kereső-űrlapon élt, MOST ide, az eredménykártyák alá
   költözött — a user kifejezett kérésére az ELSŐ keresés így tényleg csak
   Honnan/Hová/gomb, a jármű/matrica/gyakoriság finomítás csak azután jön,
   hogy már látott egy eredményt. A jármű-adatok blokk (korábban külön,
   összecsukott `.advanced` <details> volt, a panel LEGALJÁN) 2026-09-02-i,
   közvetlen user visszajelzésre a `.finomitas-flow` ELSŐ, mindig látható
   `.finomitas-q`-jává vált — a `.advanced` CSS-osztály ezért törölve,
   nincs többé rá élő hivatkozás (ld. index.html). */
.refine-panel {
  border-top: 2px solid var(--border); margin-top: 24px; padding-top: 18px;
}
.refine-panel h3 { margin-top: 0; }

/* Mobil kihúzható "Finomítás" fiók (2026-09-02, közvetlen user
   visszajelzés: "Mobil nézetben a filter miért alul jelenik meg? ez egy
   katasztrófális functionality error... Bal oldalra csinálj egy
   kinyitható filtersávot") — <1024px-en (ahol a #refine-panel korábban
   a görgetés VÉGÉN, a kártyák/B2B-doboz UTÁN élt a sima dokumentum-
   folyásban) a panel most fixen pozicionált, bal oldalról kihúzható
   fiók, EGY, mindenhonnan elérhető, erős (--accent) színű "fül" nyitja.
   ≥1024px-en (split-screen, ld. lent a meglévő szabályt) ez a teljes
   blokk irreleváns — a panel ott MARAD a mindig látható bal sáv, a fül/
   backdrop/mobil-fejléc ezért alapból (media query nélkül) rejtve. */
.refine-drawer-toggle, .refine-panel-backdrop, .refine-panel-mobile-header, .refine-recalc-btn-top { display: none; }
@media (max-width: 1023px) {
  /* Valós hiba, screenshoton talált (2026-09-02: a térkép +/- zoom-
     gombja "rálóg a filterre") — UGYANAZ a hibaosztály, mint a
     .modal-backdrop/.account-menu-nél: a Leaflet .leaflet-top/
     .leaflet-bottom kontroll-konténerei z-index:1000-en állnak, ez a
     teljes fiók-rendszer (950/970/980) MIND alattuk volt. 1000 fölé
     emelve mindhárom réteg. */
  .refine-drawer-toggle {
    display: block; position: fixed; left: 0; top: 55%; transform: translateY(-50%);
    z-index: 1002; background: var(--accent-fill); color: #fff; border: none;
    padding: 16px 9px; border-radius: 0 10px 10px 0; font-size: 13px; font-weight: 700;
    writing-mode: vertical-rl; text-orientation: mixed; cursor: pointer; box-shadow: var(--shadow);
  }
  .refine-panel-backdrop:not([hidden]) {
    display: block; position: fixed; inset: 0; background: rgba(20, 20, 30, .45); z-index: 1004;
  }
  #refine-panel {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 88vw);
    z-index: 1006; background: var(--surface-gradient); overflow-y: auto;
    padding: 20px; margin: 0; border: none; box-shadow: var(--shadow);
    transform: translateX(-100%); transition: transform .25s ease;
  }
  /* #refine-panel (ID-szelektor, ld. fent) specifitását kell elérni/
     túlszárnyalni, különben a nyitott állapot csendben veszítene a bázis
     szabály ellen (élőben talált hiba: a JS helyesen tette fel az
     `.open` osztályt, a translateX mégis -320px maradt). */
  #refine-panel.open { transform: translateX(0); }
  .refine-panel-mobile-header {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: -20px -20px 14px; padding: 16px 20px; border-bottom: 1px solid var(--border);
    background: var(--panel);
  }
  .refine-panel-mobile-header h2 { font-size: 17px; margin: 0; }
  .refine-recalc-btn-top { display: block; margin-bottom: 18px; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  /* ID-szelektor kell, ugyanaz a specifitási csapda, mint a .open-nél fent. */
  #refine-panel { transition: none; }
}
/* Közvetlen user visszajelzésre (2026-09-01/02, két kör): a `--text-dim`
   a Finomítás panelben túl halványan olvadt a háttérbe ("túlságosan
   beleolvad a háttérbe a betűszín") — előbb csak a desktop split-screen
   sunken gradiens-hátterén javítottuk (ugyanaz a minta, mint az
   achievement-badge-eknél, ld. lent `.achievement-progress-count`), a
   user visszajelzése szerint ez NEM volt elég: a panel EGÉSZÉN (mobilon
   is) teljes kontrasztú `--text`-et kap a másodlagos szöveg is, nem csak
   a sunken hátteres desktop-nézetben. */
.refine-panel .hint, .refine-panel .dim { color: var(--text); }

/* "Hogyan működik?" (2026-08-31, UX-audit) — natív <details>, a form
   ALATT (nem a Honnan/Hová mezők fölött, hogy azok ne toldódjanak
   lejjebb) — ugyanaz a mintázat, mint korábban a `.advanced`-nál volt. */
.how-it-works {
  border-top: 1px solid var(--border); margin-top: 20px; padding-top: 14px;
}
.how-it-works summary {
  cursor: pointer; font-size: 13px; font-weight: 650; color: var(--text-dim);
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.how-it-works summary::-webkit-details-marker { display: none; }
.how-it-works summary::before { content: "▸"; transition: transform .15s; }
.how-it-works[open] summary::before { transform: rotate(90deg); }
.how-it-works ol { margin: 12px 0 0; padding-left: 20px; font-size: 13px; color: var(--text-dim); }
.how-it-works ol li { margin-bottom: 6px; }
.how-it-works ol li:last-child { margin-bottom: 0; }
.how-it-works p { margin: 12px 0 0; font-size: 13px; color: var(--text-dim); }
/* SEO-audit (2026-09-04) — a "Gyakori kérdések" cím a MEGLÉVŐ, 3
   egymást követő .how-it-works <details> elé kerül. Szándékosan NEM a
   generikus `.main-panel h2` (24px) örökli — az túl hangsúlyos lenne
   egy másodlagos szekciónak a fő "Hová mész?" cím alatt. A `.main-panel
   h2.how-it-works-heading` (elem+szülő-osztály+saját-osztály) GARANTÁLTAN
   felülírja a `.main-panel h2` (elem+osztály) szabályt a forrás-sorrendtől
   függetlenül — ua. specifitási csapda, mint a korábbi Badge-lista/
   modal-backdrop eseteknél, ld. CLAUDE.md. */
.main-panel h2.how-it-works-heading {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); margin: 0; display: inline;
}
/* Külső, alapból csukott <details> a TELJES "Gyakori kérdések" blokk
   köré (2026-09-05, közvetlen user visszajelzés — 6 kérdésre bővülve a
   lapos lista túl sok helyet foglalt) — a form-tól elválasztó
   border-top/margin/padding, ami korábban magán a h2-n élt, most ide
   került, hogy csukott állapotban is helyesen jelenjen meg a
   választóvonal. */
.how-it-works-group {
  border-top: 1px solid var(--border); margin-top: 20px; padding-top: 14px;
}
.how-it-works-group > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px;
}
.how-it-works-group > summary::-webkit-details-marker { display: none; }
.how-it-works-group > summary::before { content: "▸"; transition: transform .15s; color: var(--text-dim); font-size: 13px; }
.how-it-works-group[open] > summary::before { transform: rotate(90deg); }
.how-it-works-group > .how-it-works:first-of-type { border-top: none; margin-top: 10px; padding-top: 0; }
.optional-badge {
  font-size: 10px; font-weight: 700; text-transform: none; letter-spacing: 0;
  color: var(--text-dim); background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px; margin-left: 2px;
}

/* "Finomítás" — KORÁBBAN egy összecsukható <details>/<summary> volt
   ("Finomítás" cím + "Nem kötelező..." badge, saját felső kerettel), amit
   a `.refine-panel` "Pontosítsd az eredményt" cím+leírásával EGYÜTT a
   user 2026-09-01-i, közvetlen visszajelzésére töröltünk — a panel
   MOSTANTÓL egyenesen a "Mikor indulsz?" kérdéssel indul, mindig látható
   (nincs többé nyitható/csukható állapota). A `.finomitas` ezért már csak
   szemantikai wrapper — a vizuális elválasztást a `.refine-panel` SAJÁT
   felső kerete adja (ld. fent), itt nincs külön border/összecsukó-fejléc. */
/* Egyetlen, egyenes sorrendű oszlop (2026-09-01, valós felhasználói
   visszajelzésre — a korábbi 2-oszlopos, viewport-függő elrendezés
   ("Mikor indulsz"+"Van matricád" balra, "Sokszor jársz"+"Mennyi plusz
   idő" jobbra) összekutyulta a kérdések logikai sorrendjét: a user
   szerint a MIKOR és a MATRICA-kérdés UTÁN egyenesen a GYAKORISÁG-kérdés
   következzen, ne egy másik oszlopban lapuljon. Ezért ez a réteg
   SZÁNDÉKOSAN mindig 1 oszlopos, minden viewporton — nincs 2-oszlopos
   desktop-változat többé.) */
.finomitas-flow { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.finomitas-q > *:first-child { margin-top: 0; }
/* A user visszajelzésére (2026-08-29, hetedik kör: "egymás hegyén hátán
   van, jobban el kéne választani a szekciókat") minden kérdés-blokk — az
   elsőt kivéve — elválasztó vonalat és nagyobb távolságot kap a felette
   lévőtől, hogy egyértelműen külön egységnek lássék. Közvetlen user
   visszajelzésre (2026-09-02): a vékony, halvány `var(--border)` vonal túl
   gyenge volt ("a szekciók elválasztása is legyen élesebb") — a
   `--text-dim` tónusra váltva (ugyanaz a szín, amit a panel másodlagos
   szövegei is használnak), és 1px helyett 2px vastagon, érdemben
   láthatóbb elválasztást ad. */
.finomitas-q + .finomitas-q {
  margin-top: 26px; padding-top: 18px; border-top: 2px solid var(--text-dim);
}

/* Vizuálisan elrejt, de képernyőolvasónak megtartja — a "Sokszor jársz"
   kérdésnél (2026-09-01) a látható felirat helyét a gyorsválasztó chip-sor
   veszi át, a mezőnek magának mégis kell egy elérhető név. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (min-width: 860px) {
  /* UX-audit (2026-09-01): korábban 880px volt, MINDEN desktop-méreten
     (akár egy 1920px-es monitoron is) — mérve: 1440px-es ablaknál ez
     ~560px kihasználatlan, üres hátteret hagyott a kereső-űrlap két
     oldalán. 960px-re emelve érdemben csökkenti ezt (a `body.viewing-
     result` saját, 1024px+-os 1160px-es szabálya, lent, ETTŐL FÜGGETLENÜL,
     nagyobb specificitással úgyis felülírja az eredmény-nézetet — ez a
     szám csak az űrlap-nézetet, ill. 860–1023px között az eredmény-nézetet
     is érinti). A `.home-map-wrap` magassága FIX (190px, ld. fent) —
     szélesedéskor a térkép-előnézet csak panorámásabb lesz, nem torzul. */
  .simple-layout { max-width: 960px; }
  /* A rögzített alsó CTA-sáv (ld. lent, mobil-only) desktopon nem kell —
     ott a Google Maps gomb már eleve a képen van, nincs hosszú görgetés
     ami miatt vissza kéne keresni. */
  #mobile-sticky-cta { display: none; }
}

/* Mobil-first eredményoldal (2026-08-30, "nagy tételek" első köre) — élő
   375px-es teszttel megerősített, konkrét problémák javítása. UGYANAZT a
   860px-es töréspontot használja, mint a fenti (min-width) szabály,
   fordítva. */
@media (max-width: 859px) {
  /* 1) A fejléc (logó + a user kifejezett kérésére nagyban középre tett
     XP/kredit-sáv) `position: sticky`-vel eddig MINDIG a képernyőn
     maradt — élő méréssel 164px magas, egy rövidebb telefonon ez a
     látható terület kb. 30%-a, TARTÓSAN, az eredmény görgetése közben
     is. Desktopon a sticky viselkedés marad (ld. fent, változatlan) —
     ez a szabály CSAK mobilon oldja fel: a fejléc a lap tetején
     ugyanúgy nagyban látszik, lefelé görgetve kigörgetve eltűnik,
     visszagörgetve a tetejére újra megjelenik. */
  .topbar { position: static; }

  /* 2) A compare-strip (Menetidő/Költség táblázat a kártyák fölött) a
     benne lévő két számot 1-2 görgetéssel újra megmutatja az alatta lévő
     kártyákon — desktopon (kártyák egymás mellett) hasznos gyors-
     összehasonlító eszköz, mobilon (kártyák egymás alatt) csak dupla
     hossz. A renderCompareStrip() JS-logikája változatlan, csak
     vizuálisan tűnik el keskeny nézetben. */
  .compare-strip { display: none; }

  /* 3) A NEM ajánlott (alternatíva) kártyák MÁR ma is <details>-be vannak
     csukva (a "▸ részletek" mögött a költségbontás+Google Maps gomb
     rejtve) — ez a mindig látható fejrész (cím, 3 statisztika, delta-
     jelvények, összeg) kap egy szűkebb, mobil-only méretet, hogy 2+
     alternatívánál ne legyen olyan hosszú a görgetés. Az AJÁNLOTT kártya
     (a döntés lényege) változatlan méretű marad. */
  .answer-card:not(.recommended) { padding: 14px 16px; }
  .answer-card:not(.recommended) .headline-stats .stat-value { font-size: 15px; }
  .answer-card:not(.recommended) .headline-stats { gap: 10px; }

  /* 4) Rögzített alsó CTA-sáv — az eredmény megjelenésétől kezdve MINDIG
     látszik (nem csak akkor, ha a fő gomb kigörgetett), hogy hosszú
     görgetésnél se kelljen visszakeresni az elsődleges akciót. Tartalmát
     (href/data-*) a JS az AJÁNLOTT kártya .maps-link-jéről másolja át
     (ld. app.js renderResult) — desktopon a fenti (min-width) szabály
     elrejti. */
  .mobile-sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
    background: var(--panel); border-top: 1px solid var(--border);
    padding: 10px 16px; box-shadow: 0 -4px 16px rgba(20, 20, 30, .08);
  }
  .mobile-sticky-cta .btn { margin: 0; text-decoration: none; }
  /* Hely a tartalom alján, hogy a rögzített sáv sose takarjon el semmit —
     kb. a sáv magassága (gomb + padding). */
  #result-panel { padding-bottom: 68px; }
}

/* Split-Screen Layout Desktopon (2026-08-31) — a user kifejezett,
   kétszer pontosított kérésére: BAL = a MEGLÉVŐ #refine-panel tartalma
   (Finomítás + További beállítások), KÖZÉP = eredmény-kártyák ÉS térkép
   együtt. Szándékosan NAGYOBB töréspont (1024px), mint a fenti 860px-es
   (ami csak a .simple-layout szélességét bővíti) — egy valódi bal
   sáv+közép oszlop elrendezéshez több hely kell, mint a puszta panel-
   szélesítéshez. 860–1023px között a result-oldal a MAI, egyoszlopos
   nézetet mutatja (ésszerű köztes állapot), <860px (mobil) TELJESEN
   ÉRINTETLEN marad ettől a szabálytól. (A .finomitas-flow maga, 2026-09-01
   óta, MINDEN viewporton 1 oszlopos — ld. lent — tehát ez a töréspont már
   csak a #refine-panel egészének layoutját érinti, nem a kérdés-sorrendet.)

   A #result-panel gyerekei a projekt saját elve szerint (ld. index.html
   megjegyzése buildPayload()-nál) a JS mindenhol globális ID-szelektorral
   dolgozik, sose DOM-pozícióval — az elrendezés (mind a DOM-sorrend, mind
   ez a grid-area-térkép) TISZTÁN erre a mintára épül. A DOM-sorrend
   2026-09-02-től: back → route → map → body → refine-panel → yearly →
   footnote (ld. index.html — a route/map ekkor költözött a body ELÉ,
   közvetlen user visszajelzésre: "legfelül a választott útvonal, alatta
   a térkép, alatta minden más"). */
@media (min-width: 1024px) {
  /* csak a result-nézetben szélesedik ki a lap — az űrlap-oldalnak
     (Honnan/Hová) nincs szüksége extra szélességre */
  body.viewing-result .simple-layout { max-width: 1160px; }

  #result-panel {
    display: grid;
    grid-template-columns: 320px 1fr;
    column-gap: 28px;
    align-items: start;
    grid-template-areas:
      "back    back"
      "sidebar route"
      "sidebar map"
      "sidebar body"
      "sidebar yearly"
      "sidebar footnote";
  }
  #result-back { grid-area: back; margin-bottom: 8px; }
  #result-route-header { grid-area: route; }
  #map-details { grid-area: map; margin-bottom: 0; }
  #result-body { grid-area: body; min-width: 0; }
  #refine-panel {
    grid-area: sidebar;
    /* önálló "szűrő-sáv" felület — a MEGLÉVŐ, sunken gradiens-tokenből,
       nem beégetett színből, hogy light/dark témával automatikusan
       együtt váltson (ld. :root és a dark-media blokk style.css tetején) */
    background: var(--surface-gradient-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-top: 0;
    border-top: none;
    /* a bal sáv görgetéskor a helyén marad, hogy hosszú eredmény-lista
       mellett is mindig elérhető legyen — saját görgetősávot kap, ha a
       tartalma magasabb, mint a látható terület */
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
  #yearly-box { grid-area: yearly; }
  #result-footnote { grid-area: footnote; }
  /* A .finomitas-flow (ld. fent) minden viewporton eleve 1 oszlopos, tehát
     itt, a keskeny (320px) sidebaron belül sincs mit visszaváltani. */
}

.row-route { align-items: flex-end; }
.fav-star {
  cursor: pointer; border: 1px solid var(--border); background: var(--bg);
  color: var(--text-dim); border-radius: 10px; width: 44px; height: 52px;
  font-size: 20px; line-height: 1; margin-bottom: 8px; flex: none;
}
.fav-star:hover { border-color: var(--accent); color: var(--accent); }
.fav-star.active { color: #e8a33d; border-color: #e8a33d; }

.swap-fields-btn {
  cursor: pointer; border: 1px solid var(--border); background: var(--bg);
  color: var(--text-dim); border-radius: 10px; width: 40px; height: 52px;
  font-size: 18px; line-height: 1; margin-bottom: 8px; flex: none;
}
.swap-fields-btn:hover { border-color: var(--accent); color: var(--accent); }

.recent-routes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.recent-routes-label { font-size: 12px; color: var(--text-dim); font-weight: 650; }
.recent-routes-list { display: flex; gap: 6px; flex-wrap: wrap; }
.recent-route-chip {
  cursor: pointer; border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 600; background: var(--bg); color: var(--text);
}
.recent-route-chip:hover { border-color: var(--accent); color: var(--accent); }

.btn-big { font-size: 16px; padding: 15px; margin-top: 18px; }
/* Külső UX-audit (2026-08-29, hetedik kör): "a user nem biztos, hogy
   tudja, mire elég 15/40/100 kredit" — minden kreditcsomag most egy
   rövid, ki-nek-való magyarázatot kap közvetlenül alatta, a kiemelt
   (100 kredites) csomag pedig egy "Legnépszerűbb" jelzőt. */
.credit-pack { margin-top: 14px; }
.credit-pack:first-child { margin-top: 0; }
.credit-pack .btn-big { margin-top: 0; }
.credit-pack-hint { font-size: 12px; margin: 4px 0 0; text-align: center; }
.credit-pack-badge {
  display: block; text-align: center; font-size: 11px; font-weight: 700;
  color: var(--accent); text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 4px;
}
/* UX-audit (2026-09-03): "a 3 csomag vizuálisan alig különbözik egymástól
   a 'Legnépszerűbb' jelzésen kívül — egy árazási táblázatnál jellemzően
   erősebb vizuális horgony kellene a preferált opciónak." Korábban a
   `.credit-pack` div-nek nem volt SAJÁT kerete/háttere (csak a gomb-szín
   és a badge-szöveg különböztette meg) — a `:has()`-t használjuk (csak
   a badge-es csomagot cél) ahelyett, hogy a HTML-be egy külön osztályt
   kelljen felvenni. */
.credit-pack:has(.credit-pack-badge) {
  border: 1.5px solid var(--accent); border-radius: 12px; padding: 12px 14px 14px;
  background: var(--accent-dim);
}

/* A fő gomb "sticky"-n a nézet alján marad görgetéskor (hosszú, "Haladó
   beállítások"-kal kibontott űrlapnál nem kell visszagörgetni hozzá) — a
   panel padding-jét kompenzáló negatív margó+ugyanakkora padding adja a
   "kiér a panel aljáig" hatást a sticky háttérrel együtt. */
.submit-sticky {
  position: sticky; bottom: 0; z-index: 4;
  background: var(--panel); margin: 18px -24px -24px; padding: 10px 24px 24px;
}
.submit-sticky .btn-big { margin-top: 0; }
/* A korábbi .submit-hint (gomb alatti value-prop mondat) 2026-09-02-én,
   közvetlen user visszajelzésre törölve — duplikálta a fejléc alatti
   .main-hint-sub mondatot (ld. lent), ami emiatt nagyobb betűméretet
   kapott, hogy egyedüliként is elég súlyt vigyen. */

/* Social proof (2026-08-30) — halványzöld pill, a fenti szöveges CTA-tól
   megkülönböztethető, de a fő gombbal nem versengő kiemeléssel. Csak
   akkor látszik, ha van elég VALÓDI felhasználó (ld. app.js). */
.social-proof-line {
  text-align: center; margin: 10px auto 0; padding: 6px 14px; max-width: fit-content;
  background: var(--accent-dim); color: var(--accent); border-radius: 999px;
  font-size: 12px; font-weight: 650;
}

/* Fázis 6 (2026-08-29, külső UX-audit) — konkrét komponens-inkonzisztencia
   hiba: a `class="link"` osztályt a "Saját adataim" törlés-linkjei
   (my-data-vehicle-delete/-remove, my-data-vignette-delete stb.), a
   Telegram-leválasztás és több más helyen is HASZNÁLTA a kód, de az
   egyetlen tényleges CSS-szabály, ami "link"-et stílusozott, `.account-
   area button.link`-re volt SZŰKÍTVE — a fejléc-menün KÍVÜL ezek a gombok
   stílus nélkül, natív böngésző-gombként (szürke keret, alap betűtípus)
   jelentek meg, kirívóan elütve a modern felülettől. Ez a generikus,
   sehova nem szűkített `.link` szabály ugyanazt az inline szöveg-link
   megjelenést adja, ahol csak használva van — NEM blokk-szintű/teljes
   szélességű, hanem sorban marad más elemek mellett (pl. egy "Mentés"
   gomb után). (A korábbi, sose használt `.link-btn` blokk-szintű
   változatot 2026-08-30-ban töröltük — halott CSS volt, ld. gomb-
   variáns konzisztencia-átvizsgálás.) */
.link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.link:hover { text-decoration: underline; }
/* "destructive" variáns — a végleges törlés-akcióknak (jármű/matrica/
   kedvenc törlése) eddig NEM volt saját, figyelmeztető színük, ugyanaz a
   zöld accent szín jelezte őket, mint egy ártalmatlan linket. */
.link.link-danger { color: var(--danger); }

fieldset {
  border: none; border-top: 1px solid var(--border);
  padding: 14px 0; margin: 0;
}
fieldset:first-of-type { border-top: none; padding-top: 0; }
legend {
  padding: 0; font-size: 13px; font-weight: 650; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px;
}
/* általános jelölőnégyzet-sor — akkor is jó, ha `legend`-en belül van
   (ld. "Elkerülő útvonal"), akkor is, ha önállóan áll (ld. "Ranglista"
   opt-in) — korábban csak `legend .check` létezett, ezért a fieldset nélküli
   helyeken a checkbox visszaesett az alap `label { display:block }`-ra */
.check { display: flex; align-items: center; gap: 6px; text-transform: none;
  letter-spacing: normal; font-size: 14px; color: var(--text); font-weight: 400; margin-bottom: 0; }

.row { display: flex; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.row label { flex: 1 1 140px; }
/* Külső UX-audit visszajelzésére (2026-08-29): a jármű-kategória natív
   <select> korábban a fogyasztás/üzemanyagár mezőkkel EGY sorban, azokkal
   egyenlő szélességet kapott — a hivatalos, hosszú kategória-szöveg (pl.
   "D2 — Egyéb (8-9 fős, kisbusz, lakóautó, tehergépkocsi ≤3,5t)") emiatt
   csonkolódott, és flex-arány hangolással sem lehetett garantálni elég
   helyet MINDEN nézetszélességen (a natív select nyíl-ikonja + padding
   pontos mérete böngészőnként eltér). A megoldás: a category-mező a
   SAJÁT, önálló sorát kapta a markupban (ld. index.html / app.js
   nyisdMegMyDataModalt) — így garantáltan a TELJES rendelkezésre álló
   szélességet megkapja, nem osztozik senkivel. A `flex` érték itt csak
   annyit biztosít, hogy egyedüli sortagként 100%-ra nyúljon; nem
   rövidítjük a hivatalos forrásból átvett, szándékosan pontos leírást
   (ld. CLAUDE.md). */
.row label.vehicle-category-field { flex: 1 1 100%; }
/* A user visszajelzésére (2026-08-29, hetedik kör): a "Sokszor jársz erre
   az útra?" mező egy 1-2 jegyű számot vár, nem kell teljes szélességű
   sávot adni neki — a gyors-választó chipek (2/6/12/30) MELLETTE, nem
   ALATTA férnek el, kevesebb függőleges helyet foglalva. A kérdés-szöveg
   (label span-ek) változatlanul teljes szélességű, csak az input+chipek
   kerülnek egy közös, alacsonyabb sorba alá. */
.trips-input-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.trips-input-row input { width: 90px; flex: none; margin-top: 0; }
.trips-input-row .chip-group { flex: 1 1 auto; margin-bottom: 0; }
/* A user visszajelzésére ("Melyik jármű?" és "Jármű kategória" egymás
   alatt két külön kérdésnek tűnt): amikor a "Melyik jármű?" választó IS
   látszik (>1 mentett jármű), a kategória-mező "↳" jelzést + enyhe
   behúzást kap — vizuálisan mutatja, hogy ez a FENTI választás RÉSZLETE
   (auto-kitöltve, felülírható), nem egy második, független kérdés. */
.row label.vehicle-category-field.nested-under-vehicle-picker {
  margin-left: 18px; padding-left: 10px; border-left: 2px solid var(--border);
}
.row label.vehicle-category-field.nested-under-vehicle-picker > span::before {
  content: "↳ "; color: var(--text-dim);
}

/* Cím-javaslat dropdown (Honnan/Hová) — a `.address-field-wrap` veszi át a
   korábban közvetlenül a <label>-re vonatkozó flex-arányt, mert a legördülő
   listát a mezőhöz (nem a teljes sorhoz) kell pozicionálni. */
.row .address-field-wrap { flex: 1 1 140px; position: relative; }
/* Külső UX-audit, ötödik kör (2026-08-29): a Honnan/Hová a form EGYETLEN
   kötelező bemenete, mégis ugyanolyan méretű/hangsúlyú volt, mint egy
   másodlagos mező (pl. fogyasztás, Ft/l) — nem volt egyértelmű elsőre,
   hogy pont ezt a kettőt KELL kitölteni. Nagyobb betű, vastagabb, teljes
   kontrasztú (var(--text), nem var(--text-dim)) címke, nagyobb padding —
   szándékosan csak ezen a két mezőn, a haladó/modal mezők méretét nem
   változtatja (azok maradnak a globális `label`/`input` szabály alatt). */
.address-field-wrap label {
  font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px;
}
.address-field-wrap input {
  /* Közvetlen user visszajelzésre (2026-09-05): "legyen kontrasztosabb,
     nagyobb, hogy látszódjon, hogy ezek az action itemek" — a korábbi
     1.5px, alig látható `--border` szín helyett 2px, jóval sötétebb
     `--text-dim` keret + valamivel nagyobb betű/padding, hogy a Honnan/
     Hová TÉNYLEG kiugorjon a form többi (halványabb keretű) mezője közül. */
  font-size: 18px; font-weight: 600; padding: 15px 15px;
  border: 2px solid var(--text-dim);
  /* Külső UX-audit (2026-08-30): "az induló keresőmező kiemelt árnyékkal/
     fókusszal szerepeljen" — a globális `input:focus` outline-on felül
     egy lágy, márkaszínű glow adja meg ennek a KÉT mezőnek (nem az összes
     inputnak) a vizuális elsőbbségét. */
  box-shadow: 0 1px 3px rgba(20, 20, 30, .07);
  transition: box-shadow .15s ease;
  /* UX-audit (2026-09-03): "a mobil Honnan/Hová mezők láthatatlanul vágják
     le a hosszabb címeket" — élőben mérve, `text-overflow` alapból `clip`
     volt (nincs jelzés, hogy a szöveg túlnyúlik). Különösen releváns azóta,
     hogy az induló mezők konkrét utcacímet mutatnak ("Budapest, Clark
     Ádám tér", ld. korábbi kör), ami mobil szélességen nem fér ki
     egészben. Az `…` legalább jelzi, hogy van folytatás — a mező
     FÓKUSZÁLVA/szerkesztés közben a böngésző natívan úgyis a kurzor
     pozíciójához görgeti a látható részt, ez csak az INAKTÍV állapotot
     javítja. */
  text-overflow: ellipsis; overflow: hidden;
}
.address-field-wrap input:focus {
  box-shadow: 0 2px 14px color-mix(in srgb, var(--accent) 25%, transparent);
}
/* Egyértelmű "ezt választottad" állapot (2026-08-31, UX-audit) — eddig egy
   javaslat kiválasztása csak kitöltötte a mezőt, semmilyen VIZUÁLIS jelzés
   nem különböztette meg egy validált (a legördülőből kiválasztott) címet
   egy csak begépelt, még nem ellenőrzött szövegtől. A `.confirmed-
   selection` osztályt a JS teszi rá kiválasztáskor, és leveszi, amint a
   user újra gépelni kezd (ld. app.js) — a pipa így csak addig látszik,
   amíg a mező tartalma TÉNYLEG megegyezik egy validált találattal. */
.address-field-wrap.confirmed-selection input { border-color: var(--accent); padding-right: 34px; }
.address-field-wrap.confirmed-selection::after {
  content: "✓"; position: absolute; right: 12px; bottom: 15px;
  color: var(--accent); font-weight: 800; font-size: 15px; pointer-events: none;
}
.address-suggest-list {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 55;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 6px; list-style: none;
  max-height: 260px; overflow-y: auto;
}
.address-suggest-item {
  display: flex; align-items: baseline; gap: 6px; padding: 8px 10px;
  border-radius: 7px; cursor: pointer; font-size: 13.5px; color: var(--text);
}
.address-suggest-item:hover, .address-suggest-item.active { background: var(--bg); }
.address-suggest-item .pin { flex: none; opacity: .7; }
.address-suggest-item .secondary { color: var(--text-dim); font-size: 12px; }
/* Szomszédos országok nagyvárosai mint "Hová" cél, a magyar határig
   (2026-09-02) — a javaslat-sor kicsit hangsúlyosabb (halvány --warn-bg
   háttér), hogy egyértelmű legyen: ez nem egy sima magyar cím-találat. */
.address-suggest-item--intl { background: var(--warn-bg); }
.address-suggest-item--intl:hover, .address-suggest-item--intl.active {
  background: color-mix(in srgb, var(--warn-bg) 60%, var(--bg));
}
/* A kiválasztás UTÁN is látható chip a mező alatt, hogy a mezőben álló
   tiszta határváros-név (pl. "Hegyeshalom") kontextusa ne vesszen el. */
.intl-target-chip {
  margin-top: 6px; padding: 5px 10px; border-radius: 8px;
  background: var(--warn-bg); color: var(--warn);
  font-size: 12.5px; font-weight: 600; width: fit-content;
}

label { display: block; font-size: 12.5px; font-weight: 650; color: var(--text-dim); margin-bottom: 8px; }
input, select, textarea {
  width: 100%; margin-top: 4px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 14px;
}
textarea { font-family: inherit; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
/* a checkbox/radio NEM szöveges mező — a fenti szabály (100% szélesség,
   padding, keret) rájuk alkalmazva egy apró jelölőnégyzetet egy furcsa, üres,
   szinte a teljes sort kitöltő dobozzá torzított (ld. "Ranglista beállítások") */
input[type="checkbox"], input[type="radio"] {
  width: auto; margin-top: 0; padding: 0; border: none; background: none; border-radius: 0;
  accent-color: var(--accent); cursor: pointer;
}

/* Korábban itt volt egy `opacity: .85` is a `--text-dim` szín TETEJÉN —
   ez a kettős halványítás fehér/világos hátterű dobozokban (pl. "Saját
   adataim", "Badge-eim") a WCAG AA kontrasztküszöb ALÁ vitte a szöveget,
   ez okozta a "beleolvad a háttérbe" panaszt — eltávolítva. */
.hint { font-size: 11.5px; font-weight: 400; color: var(--text-dim); margin: 6px 0 0; }
.hint.main-hint { font-size: 14px; margin: 0 0 6px; }
/* Közvetlen user visszajelzésre (2026-09-02: "ez meg lehet kicsit
   nagyobban") — 12.5px → 15px. Miután a gomb alatti .submit-hint törölve
   lett (duplikáció volt), ez maradt az EGYETLEN value-prop mondat a
   kezdőlapon, ezért megérdemli a nagyobb súlyt. */
.hint.main-hint-sub { font-size: 15px; line-height: 1.4; margin: 0 0 20px; }
/* Külső UX-audit (2026-08-29, nyolcadik kör, 16. tétel) — nem-tolakodó,
   de jól látható figyelmeztető sáv, ha van hamarosan lejáró matrica. */
.expiring-vignette-banner {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn);
  border-radius: 10px; padding: 10px 14px; font-size: 13.5px; font-weight: 600;
  margin: 0 0 16px;
}
.expiring-vignette-banner:hover { filter: brightness(0.97); }
.hint.status-ok { color: var(--accent); }
.hint.status-error { color: var(--danger); }
.hint.status-busy { color: var(--text-dim); font-style: italic; }

.chip-group { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-8); }
.chip {
  cursor: pointer; border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 16px; min-height: 44px; display: inline-flex; align-items: center;
  font-size: 13.5px; font-weight: 650; background: var(--panel); color: var(--text-dim);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.active { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }

.legs, .owned { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.leg-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 6px; align-items: center; }
.owned-row { display: grid; grid-template-columns: 2fr 1fr 1fr auto auto; gap: 6px; align-items: center; }
.leg-row input, .owned-row select, .owned-row input { margin-top: 0; }
/* A fő űrlap "🚗 Van érvényes matricád?" sora — ITT (NEM a "Saját adataim"
   modal szélesebb, ugyanezt a `.owned-row` osztályt vizuális egyezés miatt
   újrahasznosító szerkesztő-sorában, ld. lent) a #owned-list mostantól
   (2026-09-03, pipálható matrica-választó) csak egy NÉV + törlés-gomb
   egyszerű sora — a fenti fix 5-oszlopos grid ide nem illik. */
#owned-list .owned-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
}
#owned-list .owned-row-label { font-size: 13.5px; font-weight: 500; color: var(--text); }

/* Pipálható matrica gyorsválasztó (2026-09-03, közvetlen user visszajelzésre:
   "bonyolult kiválasztani és menteni") — a régi <select> (4 opció, a
   negyedik egy külön szabad szerkesztőt nyitott) helyett egy gomb+panel,
   ami MINDEN gyors opciót (országos éves/10 napos/1 napos + Pest + a többi
   vármegye névsorban) egyszerre, jelölőnégyzetként mutat. A gomb ugyanazt a
   vizuális szerepet tölti be, mint egy <select> — ezért a globális
   input/select stílust örökli (width/border/radius), csak flex-layoutot ad
   hozzá a felirat+nyíl elrendezéséhez. */
.vignette-picker { position: relative; }
.vignette-picker-toggle {
  width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--panel); color: var(--text); font-size: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer;
  text-align: left;
}
.vignette-picker-toggle:hover, .vignette-picker-toggle[aria-expanded="true"] { border-color: var(--accent); }
.vignette-picker-caret { color: var(--text-dim); font-size: 11px; }
/* Ugyanaz a felugró-panel minta, mint a cím-javaslat legördülőnél
   (.address-suggest-list) — konzisztens vizuális nyelv a projektben. */
.vignette-picker-panel {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 55;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 6px; max-height: 280px; overflow-y: auto;
}
.vignette-picker-item {
  padding: 8px 10px; border-radius: 7px; margin-bottom: 0; min-height: 32px;
}
.vignette-picker-item:hover { background: var(--bg); }
.vignette-picker-item input[type="checkbox"] { width: auto; margin: 0; }

/* A gomb alapból var(--panel) (fehér) hátteret használt — egy fehér modalon
   vagy panelen ez a border-t leszámítva gyakorlatilag eltűnt. A tónusos
   var(--bg) töltés mindig megkülönbözteti magát a körülötte lévő fehér
   felülettől, függetlenül attól, melyik felületen (panel/modal/kártya) ül. */
.btn {
  cursor: pointer; border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 14px; font-size: 13.5px; font-weight: 600; background: var(--bg); color: var(--text);
  transition: filter .12s ease, border-color .12s ease;
}
.btn:hover { border-color: var(--accent); }
/* Nyomás-visszajelzés (2026-08-30, külső UX-audit) — eddig SEHOL nem volt
   `:active` állapot a kódban, a gombok/chipek csak hoverre reagáltak, ami
   érintőképernyőn (nincs hover) semmilyen visszajelzést nem adott arra,
   hogy a kattintás/érintés ténylegesen célba talált-e. A `transform` csak
   mozgás-toleráns beállításnál fut (WCAG "Animation from Interactions"),
   a `filter`-alapú sötétítés minden esetben megmarad. */
.btn:active, .chip:active { filter: brightness(.93); }
@media (prefers-reduced-motion: no-preference) {
  .btn:active, .chip:active { transform: scale(.97); }
}
.fav-star:active, .share-btn:active, .account-icon-btn:active,
.swap-fields-btn:active, .info-dot:active { filter: brightness(.85); }
/* korábban `background: transparent` volt — ez volt a leggyakoribb
   "eltűnő gomb" forrása (pl. "Telegram összekapcsolása", "Mentés
   alapértelmezettként"); most a sima .btn tónusos hátterét örökli */
.btn-primary { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; margin-top: 6px; }
.btn-primary:hover { filter: brightness(1.06); }
/* A `docs/design_system.md` már eddig is "kontúros, semleges" másodlagos
   gombként dokumentálta a `.btn-ghost`-ot, de sose kapott tényleges
   szabályt — 12 helyen használva, láthatatlanul a sima `.btn`-ként
   viselkedett (gomb-variáns konzisztencia-átvizsgálás, 2026-08-30).
   SZÁNDÉKOSAN NEM `background: transparent` — pont ez okozta korábban a
   fenti "eltűnő gomb" hibát (ld. a .btn feletti komment) —, a
   megkülönböztetés a HALVÁNYABB szövegszínből jön, a tónusos háttér/
   keret megmarad, hogy a gomb sose olvadjon bele a felületébe. */
.btn-ghost { color: var(--text-dim); }
.btn-ghost:hover { color: var(--accent); }
.btn-block { width: 100%; padding: 11px; font-size: 14.5px; }
.btn-add { margin-bottom: 10px; }
.btn-icon {
  cursor: pointer; border: 1px solid var(--border); background: var(--bg); color: var(--text-dim);
  border-radius: 9px; width: 30px; height: 30px; font-size: 16px; line-height: 1;
}
.btn-icon:hover { color: var(--danger); border-color: var(--danger); }
/* csak bejelentkezve látszik — anonim usernek nincs mit "elmenteni",
   nem a fő kalkulációhoz kell, csak a jövőbeli automatikus kitöltéshez */
.owned-save { display: none; }
.owned-save:hover { color: var(--accent); border-color: var(--accent); }
body.logged-in .owned-save { display: inline-flex; align-items: center; justify-content: center; }

.error-box {
  background: var(--danger-bg); color: var(--danger); border-radius: 8px;
  padding: 12px 14px; font-size: 14px; white-space: pre-wrap;
}

.warn-box { background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; }
.warn-box ul { margin: 4px 0 0; padding-left: 18px; }

/* ------------------------------------------------------------------ */
/* Betöltés-jelzés — egyszerű szöveg a gomb alatt, nem lebegő elem      */
/* ------------------------------------------------------------------ */
.run-status {
  margin-top: 10px; font-size: 14px; font-weight: 600; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.run-status.busy { color: var(--text-dim); }
.run-status.error { color: var(--danger); }
.spinner {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 3px solid var(--border); border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* A skeleton-előnézet (2026-08-31) 2026-09-02-én, közvetlen user
   visszajelzésre törölve ("ez az alsó szürke boxos sáv ez mi? ez nem kell
   oda") — a lépésenkénti szöveges státusz (.run-status, fent) maradt az
   egyetlen töltés-jelző. */

/* ------------------------------------------------------------------ */
/* Eredmény — a form helyén, a normál oldalfolyamban (nincs lebegő ablak) */
/* ------------------------------------------------------------------ */
.result-route {
  font-size: 14px; color: var(--text-dim); font-weight: 650; margin: 14px 0 6px;
  display: flex; align-items: center; gap: 8px;
}
.result-route .fav-star {
  /* UX re-audit (2026-09-03, célméret): 26px → 32px */
  width: 32px; height: 32px; font-size: 16px; margin-bottom: 0;
}
/* Megosztás-gomb (B2B/közösségi backlog, 1. tétel, 2026-08-30) — külön
   osztály, NEM a `.fav-star`-t viseli, hogy a `$("#result-body .fav-star")`
   szelektor (renderResult, app.js) ne találjon rá véletlenül a valódi
   kedvenc-csillag helyett. Vizuálisan ugyanaz a kis kör alakú ikon-gomb
   megjelenés, amit a `.fav-star` alapszabálya ad. */
.result-route .share-btn {
  cursor: pointer; border: 1px solid var(--border); background: var(--bg);
  /* UX re-audit (2026-09-03, célméret): 26px → 32px */
  color: var(--text-dim); border-radius: 10px; width: 32px; height: 32px;
  font-size: 16px; line-height: 1; flex: none;
}
.result-route .share-btn:hover { border-color: var(--accent); color: var(--accent); }
/* UX re-audit (2026-09-03): a verdikt mostantól <h2> (címsor-navigációval
   eddig átugorható volt a teljes eredmény, az első címsor a "Finomítás"
   volt). Elem-minősített szelektor, hogy a `.main-panel h2` (0,1,1)
   szabályt biztosan felülírja — ugyanaz a specificitás, később a fájlban. */
h2.result-headline, .result-headline { font-size: 25px; font-weight: 750; line-height: 1.3; margin: 0 0 6px; }
/* A .result-sub (alcím-mondat, pl. "Lent a teljesen díjmentes utat is
   megnézheted.") 2026-09-02-én, közvetlen, ismételt user visszajelzésre
   ("ezt mondtam már hogy nem kell") törölve a renderResult() sablonjából
   — a hozzá tartozó CSS-szabály ezért is törölve. Minden variánsa vagy
   duplikálta a 💡 indoklás sorát (a "gyorsabb is/lassabb, de spórolsz"
   esetekben), vagy a lent úgyis látható táblázatra/kártyákra mutatott. */
/* A "miért ezt ajánljuk" indoklás — a user visszajelzésére (2026-08-29,
   külső UX-audit alapján) ez korábban hover-only volt egy kártya-címkén
   (ld. answer-card-note lejjebb), ami mobilon gyakorlatilag láthatatlanná
   tette a termék legfontosabb üzenetét. Most itt, rögtön a fejléc alatt,
   mindig látható. Az önálló zöld doboz-stílus (háttér/bal szegély)
   2026-09-02-től a SZÜLŐ .result-verdict-box-ra költözött (ld. lent) — a
   `.result-reason` önmagában (pl. ha valaha máshol is felhasználásra
   kerülne) egyszerű, kiemelés nélküli bekezdés marad. */
.result-reason { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.45; margin: 10px 0 0; }
/* Fejléc + alcím + indoklás EGY zöld dobozban (2026-09-02, közvetlen user
   visszajelzés: "ez mind mehet egy Zöld boxba!") — a MEGLÉVŐ
   --accent-gradient tokent használja, ugyanazt, mint a `.recommended`
   kártya és a `.register-cta` — így ugyanaz a zöld jelentés ("ez a jó
   választás") fut végig a teljes eredmény-oldalon. */
.result-verdict-box {
  background: var(--accent-gradient); border: 1px solid var(--accent-dim);
  border-radius: 12px; padding: 16px 18px; margin: 0 0 18px;
}
.result-verdict-box .result-reason { border-top: 1px solid var(--border); padding-top: 10px; }

/* Kontextusos regisztrációs CTA (2026-08-29, hatodik kör) — a user
   kérésére a legerősebb konverziós pillanat az ELSŐ konkrét eredmény
   után van, a TALÁLT megtakarításra hivatkozva, nem egy általános
   "regisztrálj" felszólítás. Csak anonim usernek jelenik meg (ld.
   app.js renderResult) — vizuálisan visszafogott, nem tolakodó (nem
   villog, nem modal, csak a kártyák alatt egy kártya-szerű blokk). */
.register-cta {
  border: 1px solid var(--accent-dim); background: var(--accent-gradient);
  border-radius: 12px; padding: 16px 18px; margin: 0 0 18px; text-align: center;
}
.register-cta p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; }
.register-cta .btn { display: inline-block; padding: 10px 28px; }

/* B2B ajánlati kalkulátor eredmény-blokk (B2B/közösségi backlog, 4. tétel,
   2026-09-01) — Céges módban, mentett vállalkozói profillal jelenik meg az
   eredményoldalon, az ajánlott útvonal kártyái alatt. */
.b2b-quote-card {
  border: 1px solid var(--border); background: var(--bg);
  border-radius: 12px; padding: 16px 18px; margin: 0 0 18px;
}
.b2b-quote-card h3 { margin: 0 0 6px; font-size: 15px; }
/* A "Projekt/ügyfél címke" mező 2026-09-02-től a doboz RÉSZE (közvetlen
   user visszajelzés: "ez mehet egy b2b boxba") — saját elválasztó vonal,
   hogy ne olvadjon össze a fölötte lévő tartalommal (gomb/másolható szöveg). */
.b2b-quote-card .decision-label-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.b2b-quote-rows { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; }
.b2b-quote-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 14px; padding: 4px 0; border-bottom: 1px solid var(--border);
}
.b2b-quote-row:last-child { border-bottom: none; }
.b2b-quote-row.highlight { font-weight: 700; font-size: 16.5px; color: var(--accent); }
.b2b-quote-row.dim { color: var(--text-dim); font-size: 13px; }
.b2b-quote-copy-box {
  background: var(--panel); border-radius: 10px; padding: 12px 14px; margin-top: 10px;
}
.b2b-quote-copy-box p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; }

.answer-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.answer-card {
  position: relative;   /* a .answer-card-reset-btn ehhez van pozicionálva */
  border: 2px solid var(--border); border-radius: 14px; padding: 16px 18px;
}
/* "Alaphelyzetbe állítás" gomb (2026-09-02, közvetlen user visszajelzés)
   — a kártya SAJÁT keretén kívülre, félig kilógva pozicionálva (nem a
   belső tartalom-paddingon belül), hogy sose ütközzön a cím melletti
   "Ezt ajánljuk" jelvénnyel, ami a title-sor SAJÁT flex-elrendezésében,
   attól függetlenül, szintén a jobb szélre igazodik. */
.answer-card-reset-btn {
  position: absolute; top: -12px; right: -12px; z-index: 2;
  /* UX re-audit (2026-09-03, célméret): 26px → 30px */
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--panel); color: var(--text-dim);
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  transition: color .15s ease, border-color .15s ease, transform .2s ease;
}
.answer-card-reset-btn:hover, .answer-card-reset-btn:focus-visible {
  color: var(--accent); border-color: var(--accent); transform: rotate(-70deg);
}
/* Kártya-színkód (2026-09-02, közvetlen user visszajelzés: "túl sok szín
   ez így... a Kék szín nem jó, mert úgy hat, mintha ki lenne jelölve") —
   EGYETLEN tengely: AJÁNLOTT (zöld) vs. MINDEN MÁS (narancssárga,
   halványan). A korábbi bal-szegély (route-típus szerinti szín) ÉS a kék
   "ingyenes" háttér-árnyalat törölve — ld. buildAnswerCard stripeColor. */
.answer-card.recommended { border-color: var(--accent); background: var(--accent-gradient); }
.answer-card:not(.recommended) { background: var(--secondary-accent-gradient); }
/* a "szerkesztem" állapot KÜLÖN vizuális csatorna (sárga outline), hogy ne
   vesszen el a "recommended" zöld kártyakeret mellett — a kettő egyszerre is
   látszódhat (pl. amikor épp az ajánlott utat szerkeszted). Közvetlen user
   visszajelzésre (2026-09-02: "a kijelölés is lehetne vastagabb") 3px→5px. */
.answer-card.editing { outline: 5px solid var(--edit-accent); outline-offset: 2px; }
/* nincs külön "ezt szerkesztem" gomb/jelző — magára a kártyára kattintva
   választható ki, melyiket módosítja a térképi vármegye-kattintás */
.answer-card.selectable { cursor: pointer; transition: box-shadow .15s ease; }
.answer-card.selectable:hover { box-shadow: 0 2px 10px rgba(20, 20, 30, .1); }
.answer-card .answer-card-title { font-size: 15px; font-weight: 700; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* UX re-audit (2026-09-03) — a kártya címe <h3>, kiválasztható kártyánál
   benne egy VALÓDI <button> (billentyűzet-elérhetőség, WCAG 2.1.1). A gomb
   szövegként néz ki (örökli a címsor betűjét), csak fókuszban kap keretet. */
.answer-card-title-text { margin: 0; font: inherit; min-width: 0; flex: 1 1 auto; }
.card-select-btn {
  all: unset; cursor: pointer; font: inherit; color: inherit; text-align: left;
  display: block; width: 100%; border-radius: 6px;
}
.card-select-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Jelszó-mező + 👁 gomb (UX re-audit, 2026-09-03) */
.pw-field { position: relative; display: block; }
.pw-field input { padding-right: 44px; width: 100%; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent;
  color: var(--text-dim); cursor: pointer; font-size: 16px; line-height: 1;
}
.pw-toggle:hover { background: var(--bg); color: var(--text); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); }
/* Bizalom-jel a kereső gomb alatt (UX re-audit, 2026-09-03) */
.trust-line { text-align: center; margin: 8px 0 0; font-size: 12px; }
/* Biztonságos fizetés megjegyzés a kredit-modálban */
.credit-secure-note { text-align: center; margin: 14px 0 0; font-size: 12px; }
/* Mező-szintű hibajelölés (UX re-audit, 2026-09-03) — a hibás cím-mező
   kerete a hibaszöveg színét kapja, a ✓ (confirmed-selection) pipa nem
   jelenhet meg rajta egyszerre */
.address-field-wrap.has-error input { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.address-field-wrap.has-error.confirmed-selection::after { content: none; }
/* Mobil érintési célméretek (UX re-audit, 2026-09-03, WCAG 2.5.8):
   lábléc-linkek 44px-es sormagassággal, Leaflet zoom 30 → 36px */
@media (max-width: 859px) {
  .site-footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
  .leaflet-bar a, .leaflet-touch .leaflet-bar a { width: 36px; height: 36px; line-height: 36px; }
}
/* Összecsukott kártya (2026-09-02, közvetlen user visszajelzés: "csak a
   kártya látszódik teljesen, amelyik épp ki van jelölve. a másik... csak
   a felső részt mutatná és kattintás esetén nyílna ki az egész") — a
   klemmezés a .answer-card-inner-en fut (ld. buildAnswerCard), NEM magán
   a .answer-card-en, hogy a ↻ gomb (ami a kártya SAJÁT szélén kívülre
   lóg) sose vágódjon le. A kattintás-esemény ÚJRA NEM kell — a teljes
   kártya már úgyis a szerkesztés-választó kattintás-figyelőhöz tartozik. */
.answer-card.collapsed .answer-card-inner {
  /* Közvetlen user visszajelzésre (2026-09-02, 15. kör, MAJD MÉGEGYSZER
     2026-09-03-án, mert az első javítás is csak BECSLÉS volt: "Budapest
     Békéscsaba esetén kártya méret megint nem jó gazdaságosra") — egy
     fix konstans (148px), majd egy karakterszám-alapú JS-becslés SEM
     tudta megbízhatóan megjósolni, mennyi hely kell a fejrésznek (note-
     hossz/deltaBadge/útnév-sor EGYÜTTES hatása kártya-szélességtől is
     függ, ezt egy JS-szám-számolás sose tudja pontosan lekövetni). A
     `--card-clamp` mostantól NEM becslés — a `frissitsdOsszecsukottMagassagokat()`
     (app.js, minden #result-body-újraépítés UTÁN fut) a `.answer-card-head`
     (a fejresz saját wrappere) TÉNYLEGES, böngésző által mért
     `scrollHeight`-jét írja bele. Ez a szabály csak a BIZTONSÁGI
     alapértéket tartja, minden kártya a SAJÁT, lemért értékét kapja
     inline stílusban (a JS-hiba esetére, hogy sose maradjon 0px-es). */
  /* Valós, élesben talált hiba (2026-09-03, közvetlen user visszajelzés:
     Budapest→Pécs "Ingyenes" kártya, "félbevágja az összeget") — a
     `--card-clamp` a `.answer-card-head` (fejresz) TELJES tartalmára van
     méretezve (+2px kerekítési biztonsági ráhagyással, ld. lenti komment),
     ami magába foglalja az UTOLSÓ sort, a "Σ Összesen kb." árat is. Az
     ALÁBBI `::after` egy 30px magas, LÁBLÉC-jellegű "Kattints a
     megnyitáshoz" sávot rajzol a doboz ALJÁRA `position:absolute;
     bottom:0`-val — mivel a doboz addig épp csak a fejrészhez volt
     méretezve, ez a sáv az ÖSSZEG SORÁRA lógott rá, félig eltakarva azt.
     A `+ 30px` itt a hintsávnak SAJÁT, a fejrészen TÚLI helyet ad — a
     fejrész (az összeg sorával együtt) mostantól TELJES egészében
     látszik, a hintsáv alatta, a (rejtett) részletek első pár pixelének
     helyén ül, nem a fejrész felett. */
  max-height: calc(var(--card-clamp, 148px) + 30px); overflow: hidden; position: relative;
  /* SZÁNDÉKOSAN nem szín-átmenetes "elhalványítás" — a kártya SAJÁT
     háttere (zöld/narancssárga árnyalat) a klemmezett, rövid ablakban még
     nem ért el a --panel-ig (az csak a TELJES kártya-magasság 85%-ánál
     van), egy oda illesztett fehér/panel-szín fade emiatt csúnya
     törésvonalat adna. Ehelyett egy SAJÁT, semleges "lábléc" jelzi az
     összecsukott állapotot, tudatosan MÁS (lapos, panel-színű) felülettel. */
  margin-bottom: -1px;
}
.answer-card.collapsed .answer-card-inner::after {
  content: "👆 Kattints a megnyitáshoz";
  position: absolute; left: 0; right: 0; bottom: 0; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 650; color: var(--text-dim);
  background: var(--panel); border-top: 1px solid var(--border);
}
.answer-card .answer-card-badge {
  font-size: 12px; font-weight: 700; color: #fff; background: var(--accent-fill);
  padding: 2px 10px; border-radius: 999px;
  /* Közvetlen user visszajelzésre (2026-09-02: "7329 ft megtakarítást zárd
     a kis zöld box közepére") — keskeny (mobil) kártyán a hosszabb badge-
     szöveg (pl. "💰 7840 Ft megtakarítás") 2 sorba törik; text-align nélkül
     a rövidebb 2. sor balra csúszva jelent meg a szélesebb (1. sor által
     meghatározott) dobozban, nem középen. Egysoros esetben a text-align
     nem változtat semmin (a doboz a tartalomhoz simul). */
  text-align: center;
}
.answer-card .headline-stats {
  display: flex; gap: 24px; margin-bottom: 14px; flex-wrap: wrap;
}
/* Közvetlen user visszajelzésre (2026-09-03: "ebből autópálya egy
   hangyányit legyen lejjebb, alulról illeszkedjen a mellette levő
   szöveghez") — a 3 oszlop `align-items: stretch` miatt (a flex-konténer
   alapértéke) azonos magasságú, DE a lenti "(ebből autópálya)" oszlop
   értéke (`.stat-value-sub`, 17px) alacsonyabb, mint a másik kettőé
   (26px), ezért az alatta lévő .stat-label eddig FELJEBB, a másik két
   oszlop címkéjénél magasabban állt (a rövidebb tartalom a stretchelt
   doboz TETEJÉHEZ igazodott). Az oszlopokat saját flex-oszloppá téve,
   `justify-content: flex-end`-del mind a 3 címke egy vízszintes vonalra,
   a doboz ALJÁHOZ kerül, függetlenül az érték-szöveg magasságától. */
.answer-card .headline-stats > div { display: flex; flex-direction: column; justify-content: flex-end; text-align: center; }
.answer-card .headline-stats .stat-value {
  font-size: 26px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.answer-card .headline-stats .stat-label {
  font-size: 12px; color: var(--text-dim); margin-top: 2px;
}
/* az "ebből autópálya" a teljes táv része, nem egy harmadik egyenrangú
   szám — vizuálisan is jelezze, hogy ez csak egy lábjegyzet a másik kettőhöz */
.answer-card .headline-stats .stat-value-sub { font-size: 17px; font-weight: 650; }
/* A kártya-szintű "mit jelent ez az opció" jegyzet (pl. "még mindig X km
   autópálya") — korábban a kind-tag hover-tipjébe volt száműzve (ld.
   .card-kind-tag lejjebb), 2026-08-29-től ismét mindig látható, hover
   nélkül (a fő "miért ajánljuk" indoklás a lap tetején van, ld.
   .result-reason fentebb — ez itt csak az adott kártyára vonatkozó,
   kiegészítő részlet, ezért marad visszafogottabb súlyú). */
.answer-card-note { font-size: 13px; color: var(--text-dim); margin: 0 0 10px; line-height: 1.4; }
/* Melyik fizetős úton/utakon megy az útvonal (2026-09-02, 15. kör) —
   halvány, a headline-stats ALATT, nem versenyez a fő idő/táv/összeg
   számokkal, de egy pillantásra megválaszolja "melyik autópályán". */
.answer-card-roads { font-size: 12.5px; color: var(--text-dim); margin: 6px 0 0; }
.answer-card-roads strong { color: var(--text); font-weight: 700; }
/* Nemzetközi úticél figyelmeztető sáv (2026-09-02) — a result-panel TETEJÉN,
   mielőtt bárki elolvasná a fejléc-verdiktet, hogy egyértelmű legyen: a
   lenti szám/idő csak a magyar szakaszra (a határig) vonatkozik. */
.intl-target-banner {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 16px;
}
.intl-target-banner .icon { font-size: 18px; line-height: 1.3; }
.intl-target-banner strong { display: block; color: var(--warn); font-size: 13.5px; margin-bottom: 2px; }
.intl-target-banner p { margin: 0; font-size: 13px; color: var(--text); line-height: 1.45; }
/* a "mennyivel más, mint a szokásos út" jelző — a tényleges döntés (idő vs.
   pénz) egyben, szembeötlően, hogy ne kelljen a fejben kiszámolni */
.delta-row {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px;
  background: var(--bg); border-radius: 10px;
}
.delta-chip {
  font-size: 14.5px; font-weight: 750; padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
}
.delta-chip.delta-good { background: var(--accent-dim); color: var(--accent); }
.delta-chip.delta-warn { background: var(--danger-bg); color: var(--danger); }
/* Közvetlen user visszajelzésre (2026-09-02: "7329 ft megtakarítást zárd a
   kis zöld box közepére") — ha a delta-row csak EGY chipet mutat (pl. csak
   megtakarítás, nincs érdemi időkülönbség), a flex-sor alapból a bal
   szélére húzta, nem a doboz közepére. Két chipnél (idő+ár) a bal-igazítás
   marad helyes (azt egymás mellett, nem középre kell olvasni). UX-audit
   (2026-09-03) óta a `.single-chip` osztályt app.js számolja ki (nem egy
   `:has()`-alapú DOM-gyerekszámlálás) — a 💰 jelvény county/national két
   VÁLTOZATA (ld. lent) miatt a DOM-gyerekek száma már nem egyezik meg a
   LÁTHATÓ jelvények számával. */
.delta-row.single-chip { justify-content: center; }

/* kártya-címke (🥇 Ajánlott / Alternatíva) — gyors vizuális megkülönböztetés */
.card-kind-tag {
  /* UX re-audit (2026-09-03): 11.5px → 12.5px — ez volt a kártya legkisebb
     olvasandó szövege, pont a kategória-címke */
  display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--text-dim);
  margin-bottom: 4px;
}

/* kompakt összehasonlító sáv a kártyák felett — a döntő számok egyben.
   Közvetlen user visszajelzés (2026-09-03): "a táblázat nagyon elveszik.
   jobban ki kellene emelni az adatokat. Nagyobb betűméret. esetleg
   élénkebb háttér" — a tábla korábban KÖZVETLENÜL a zöld
   `.result-verdict-box` (var(--accent-gradient)) hátterén ült, saját
   felület nélkül, emiatt vizuálisan belesimult abba. Most SAJÁT, panel-
   színű (a zöld hátértől elváló) kártyát kap, a tényleges adat-cellák
   pedig jóval nagyobb, félkövér, `tabular-nums` számokkal — a sor-címke
   (Menetidő/Költség) marad visszafogott, hogy a KONKRÉT számok legyenek
   a szem számára a legfeltűnőbbek. */
.compare-strip {
  margin-bottom: 14px; overflow-x: auto;
  background: var(--panel); border: 1px solid var(--accent-dim);
  border-radius: 10px; padding: 2px 6px;
}
.compare-strip table { width: 100%; border-collapse: collapse; font-size: 13px; }
.compare-strip th {
  text-align: left; color: var(--text-dim); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; padding: 10px 10px 6px;
}
.compare-strip th:not(:first-child), .compare-strip td:not(:first-child) { text-align: center; }
.compare-strip td {
  padding: 10px 10px; border-top: 1px solid var(--border); font-weight: 750;
  font-size: 17px; font-variant-numeric: tabular-nums; color: var(--text);
}
.compare-strip tr:first-child td { border-top: none; }
.compare-strip td:first-child {
  color: var(--text-dim); font-weight: 650; font-size: 13px; text-align: left;
  text-transform: none; letter-spacing: normal;
}
.compare-strip .delta-cell.delta-good { color: var(--accent); }
.compare-strip .delta-cell.delta-warn { color: var(--danger); }
/* korábban `.answer-card .items`-re volt szűkítve — de a "Saját adataim",
   "Ennyit spóroltál" és "Barátok" listái is `class="items"`-t használnak
   answer-card-on KÍVÜL, és emiatt sima, stílus nélküli felsorolásjelekkel
   jelentek meg a szándékolt sor-elrendezés helyett. */
.items { list-style: none; margin: 0 0 10px; padding: 0; font-size: 15px; }
.items li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 3px 0; }
.items li .amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.items li > span:last-child { display: flex; gap: 6px; flex: none; }
/* "Kedvenceim" inline szerkesztő sora — a "Saját matricáim" ugyanerre a
   mintára az .owned-row grid-et használja újra (ott már 5 oszlop kell). */
.my-data-fav-edit-row { display: flex; gap: 6px; align-items: center; }
.my-data-fav-edit-row input { flex: 1; margin-top: 0; }
/* Kedvencek szerkesztése/hozzáadása cím-javaslattal (2026-08-30) — az
   inputok most egy `.address-field-wrap`-ba kerültek (a javaslat-lista
   pozicionálásához kell a `position:relative`), ezért a flex-arányt a
   WRAPPER kapja, nem közvetlenül az input (a fenti `input { flex:1 }`
   szabály attól még nem árt, csak innentől hatástalan ezen a 2 mezőn). */
.my-data-fav-edit-row .address-field-wrap { flex: 1; position: relative; min-width: 0; }
.answer-card .total-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px;
}
.answer-card .total-row .total-label { font-size: 14px; color: var(--text-dim); }
.answer-card .total-row .total-amount { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; }
/* az összeg most a kártya tetején van, nem az elemek után — legyen ez a
   legszembetűnőbb szám, ne csak egy sima felsorolás-lezárás */
.answer-card .total-row.total-row-top {
  border-top: none; border-bottom: 1px solid var(--border); margin-top: 12px;
  padding-top: 0; padding-bottom: 12px;
}
.answer-card .total-row.total-row-top .total-amount { font-size: 26px; }
/* "Vármegyei-preferált" kártya-kapcsoló (2026-09-02, közvetlen user
   visszajelzés: "vármegyei egy befektetés, napi jegy egy egyszeri.
   preferáljuk a vármegyeit!") — ld. app.js buildAnswerCard komment a teljes
   indoklásért. A kártya alapból a vármegyei-alapú összeget mutatja.
   Második körös finomítás (közvetlen user visszajelzés: "az országos napi
   és vármegyei gomb egymás mellett legyen, látszódjon, hogy egyből a
   vármegyei van kiválasztva") — a korábbi egyetlen, önmagát átfogalmazó
   link helyett most egy klasszikus 2-fület tartalmazó szegmentált
   kapcsoló, mindkét opció mindig látható, az aktív fül vizuálisan
   kiemelve. SZÁNDÉKOSAN semleges (nem zöld/narancs) szín — a kártya-tető-
   csík már hordozza az "ajánlott vs. más" jelzést (ld. SZIN_AJANLOTT/
   SZIN_MASODLAGOS), egy zöld/narancs kiemelés itt azzal ütközne/keveredne. */
.vignette-choice-tabs {
  display: flex; gap: 4px; background: var(--bg); border-radius: 10px;
  padding: 4px; margin-bottom: 12px;
}
/* Globális árazás-nézet kapcsoló (2026-09-03 architektúra-kör) — a
   KORÁBBI, kártyánkénti fül-pár helyett EGY, a táblázat fölött álló
   kapcsoló, ami minden kártyát+a táblázatot egyszerre vált (ld. app.js
   renderResult() `arazasNezetTogglHtml`). Ugyanaz a `.vignette-choice-
   tabs` alap-stílus, csak `max-width`-del — a `.result-verdict-box`
   (ahol most lakik) sokkal szélesebb, mint egy kártya, egy teljes
   szélességben nyújtott fül-pár aránytalanul nagyra nőne. */
.pricing-view-toggle { max-width: 340px; margin-top: 4px; }
.vignette-choice-tab {
  flex: 1; font-size: 12.5px; font-weight: 650; color: var(--text-dim);
  background: none; border: none; border-radius: 7px; padding: 7px 8px;
  cursor: pointer; text-align: center; transition: background .15s ease, color .15s ease;
}
.vignette-choice-tab:hover { color: var(--text); }
.vignette-choice-tab.active {
  background: var(--panel); color: var(--text); box-shadow: var(--shadow);
}
.answer-card .meta { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
/* korábban a költség-bontás és a vármegyei matricák KÜLÖN <details>-ek
   voltak a kártya "▸ részletek" kapcsolóján BELÜL — két kattintás kellett
   ugyanahhoz az infóhoz. Most statikus, mindig kibontott blokkok. */
/* A "Költség részletezése" manuális <details>/<summary> nyit-csuk gomb
   törölve (2026-09-03, közvetlen user visszajelzés: "ha boxra kattintok
   nyíljon meg egyből, amelyik nincs kattintva ott az összesenig jelenik
   meg minden") — a `.cost-details-static` mostantól MINDIG a DOM-ban van,
   a láthatóságát KIZÁRÓLAG a kártya-szintű `.answer-card.collapsed`
   klemmezés dönti el (ld. app.js buildAnswerCard/frissitsdOsszecsukottMagassagokat
   komment), nem egy saját nyit/csuk állapot. */
.cost-details-static { margin-top: 12px; }
.cost-details-static .items { margin-top: 0; }
/* az <a>-nak (más .btn-block elemekkel ellentétben, amik <button>-ök,
   alapból inline-block) nincs saját block/inline-block display-e — enélkül
   a .btn-block-ból örökölt `width: 100%` hatástalan marad, és a gomb nem
   tölti ki a kártya szélességét */
.answer-card .maps-link { display: block; margin-top: 14px; text-decoration: none; text-align: center; }
/* Ugyanaz a csapda, mint fent a .maps-link-nél: az <a>-nak nincs saját
   block-display-e, enélkül a .btn-block width:100%-a hatástalan marad. */
#share-download-link { display: block; margin-bottom: 10px; text-decoration: none; text-align: center; }

/* a "Vármegyei matricák" felirat és a chip-ek egy sorban, tördelve, ne
   külön sorban legyenek (korábbi panasz: fölösleges függőleges hely) */
.county-chips-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.county-chips-label { font-size: 12.5px; font-weight: 650; color: var(--text-dim); }
.county-chip {
  font-size: 12px; font-weight: 600; color: var(--text-dim); background: var(--bg);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
}
.county-chip b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Közvetlen user visszajelzésre (2026-09-02: "itt miért van 4 matrica
   költsége de alul 5 matrica? Veszprém van írva alul matricaként mégsem
   adja hozzá az árát") — a sor MINDEN érintett vármegyét felsorolja, nem
   csak a ténylegesen külön megvásároltakat (ld. app.js buildAnswerCard
   komment) — a szomszéd matricájával már fedett vármegye (✓ jelzéssel)
   SZÁNDÉKOSAN halványabb, hogy vizuálisan is elüljön a ténylegesen
   fizetett tételektől. */
.county-chip.county-chip-covered {
  color: var(--text-dim); background: none; border-style: dashed; opacity: .75;
}
.county-chip-covered-mark { color: var(--accent); font-weight: 700; }

.yearly-box {
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px;
}
.yearly-box h4 { margin: 0 0 4px; font-size: 14.5px; }
.yearly-box .row { margin: 8px 0; }
.yearly-box label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); margin: 0; }
.yearly-box input[type="number"] { width: 80px; margin: 0; display: inline-block; }
.yearly-result { font-size: 13.5px; line-height: 1.6; margin-top: 8px; }
.yearly-result div + div { margin-top: 8px; }
.yearly-result .better { color: var(--accent); font-weight: 650; }
.yearly-headline-card {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: var(--accent-dim); border-radius: 10px;
}
.yearly-headline-number {
  font-size: 32px; font-weight: 750; color: var(--accent); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.yearly-headline-text { font-size: 14px; line-height: 1.4; }
.savings-stat {
  text-align: center; padding: 18px 14px; background: var(--accent-dim);
  border-radius: 10px; margin-bottom: 14px;
}
.savings-stat-value {
  font-size: 34px; font-weight: 750; color: var(--accent); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.savings-stat-label { font-size: 13.5px; color: var(--text-dim); margin-top: 4px; }
/* Külső UX-audit (2026-08-29, nyolcadik kör, 19. tétel): a döntések száma
   eddig csak a tooltipben bujkált — most mindig látható, saját sor. */
.savings-stat-count { font-size: 12px; color: var(--text-dim); margin-top: 6px; }

/* Goosebumps V4 — toast, ünneplés (ceremony) és Achievement Center, Fázis B.
   Szándékosan visszafogott — a csomag saját etikai szabálya tiltja a
   kaszinó-jellegű vizuálokat, ezért nincs itt se pörgő animáció, se
   konfetti-canvas, csak szám + szöveg. */
.toast-container {
  /* a modalok (z-index:1000) fölött is látszódjon — egy toast akkor is
     fontos, ha épp nyitva van egy modal */
  position: fixed; bottom: 18px; right: 18px; z-index: 1010;
  display: flex; flex-direction: column; gap: 8px; max-width: min(340px, calc(100vw - 36px));
}

/* Visszajelző űrlap (béta-tesztelés) — korábban egy mindig lebegő
   (position:fixed) gomb volt bal alul, ami folyamatosan takart tartalmat.
   Közvetlen user visszajelzésre (2026-09-02) a lábléc RENDES része lett
   (ld. index.html .site-footer) — csak a lap alján jelenik meg. */
.feedback-fab {
  display: inline-block; margin-bottom: 14px;
  background: var(--accent-fill); color: #fff; border: none; border-radius: 999px;
  padding: 10px 16px; font-size: 13.5px; font-weight: 650; cursor: pointer;
  box-shadow: var(--shadow);
}
.feedback-fab:hover { filter: brightness(1.08); }
@media (max-width: 520px) {
  .feedback-fab { padding: 10px 12px; font-size: 12.5px; }
}
.toast {
  background: var(--surface-gradient); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 12px 14px; font-size: 13.5px; cursor: pointer;
  animation: toast-in .18s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* A user kérésére a ceremónia-doboz "összébb" ment (kisebb margók) és
   kevesebb a beégetett szöveg (ld. app.js mutasdKovetkezoCeremoniat). */
.ceremony-box { max-width: 380px; text-align: center; }
.ceremony-progress {
  font-size: 11.5px; color: var(--text-dim); font-weight: 650;
  font-variant-numeric: tabular-nums; margin-bottom: 2px;
}
.ceremony-rarity { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ceremony-box h2 { margin: 4px 0 2px; }
.ceremony-reward {
  font-size: 24px; font-weight: 750; color: var(--accent); margin-top: 10px;
  font-variant-numeric: tabular-nums;
}

/* Nagy tétel 2/8: badge-animáció (2026-08-30) — a feloldás pillanata eddig
   statikusan jelent meg. Ez a szakasz TUDATOSAN visszafogott, ugyanazt az
   elvet követve, mint a szerencsekerék (ld. fenti komment): NINCS
   csillogás/fényvillanás-effekt (az "kaszinó"-hatást keltene), csak egy
   rövid, egyszeri, LÉPCSŐZETES belépés (előbb a ritkaság-címke, aztán a
   badge neve pop-szerűen, végül a jutalom csúszik be) — a feloldás
   pillanata "landol", de nem villog/pörög/csillog. A `prefers-reduced-
   motion: reduce`-t beállító usernek EZ az animáció-blokk EGYÁLTALÁN nem
   fut le (a tartalom azonnal, statikusan jelenik meg) — a kódban eddig
   sehol nem volt kezelve ez a beállítás, ez az első hely, ahol számít. */
@media (prefers-reduced-motion: no-preference) {
  .ceremony-rarity { animation: ceremony-fade-in .3s ease-out both; }
  .ceremony-box h2 { animation: ceremony-pop-in .5s cubic-bezier(.34, 1.56, .64, 1) .1s both; }
  .ceremony-box .hint { animation: ceremony-fade-in .35s ease-out .3s both; }
  .ceremony-reward { animation: ceremony-slide-up .4s ease-out .4s both; }
}
@keyframes ceremony-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ceremony-pop-in {
  0% { opacity: 0; transform: scale(.5); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes ceremony-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Szerencsekerék — a felhasználó kifejezett kérésére valódi, forgó vizuál
   (a korábbi "csak szám + szöveg, nincs pörgő animáció" elv itt szándékosan
   feloldva) — de tudatosan VISSZAFOGOTT marad: nincs konfetti, hang, villogás
   vagy "majdnem nyertél" trükk, egyetlen, a szerver által MÁR eldöntött
   eredményre álló pörgés. A user kérésére nagyobb, és 10 kisebb, jól
   megkülönböztethető szeletre bontott (a téma SAJÁT, más funkcióhoz —
   badge-ritkasághoz — is használt tónusaiból, NEM új, csillogó/neon
   paletta, hogy az etikai elv, "nincs kaszinó-csillogás", ne sérüljön).
   A háttér (conic-gradient) magát a KEREK_SZELETEK adatot tükrözve JS-ből
   (`kerekKorongHattere()`) épül fel inline style-ként, NEM itt — ld.
   app.js, hogy a vizuál és a forgásszög-számítás sose csúszhasson szét. */
/* A user kérésére (2026-08-28, második kör) jelentősen nagyobb korong
   (190px→270px) — ez az app legfontosabb, legjátékosabb mozzanata, nem
   szabad "eldugottnak" tűnnie. A `.ceremony-box` 380px széles, ez bőven
   elfér benne (270px + a szegély/margó). */
.wheel-wrap { position: relative; width: 270px; height: 270px; margin: 20px auto 8px; }
.wheel-disc {
  width: 100%; height: 100%; border-radius: 50%;
  border: 5px solid var(--panel); box-shadow: var(--shadow);
  /* Hosszabb (2.4s→4.2s) és kifejezettebb lassulás a végén (ease-out-expo-
     szerű görbe: gyors indulás, hosszan elnyúló, jól látható fékezés) —
     a user kifejezett kérése, hogy "lassabban pörögjön a végén". */
  transition: transform 4.2s cubic-bezier(0.13, 0.86, 0.13, 1);
  position: relative;
}
.wheel-pointer {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent;
  border-top: 21px solid var(--text); z-index: 2;
}
.wheel-label {
  /* a nagyobb koronggal (270px) visszaférő méret 13px→16px-re nőtt —
     10 szelet még mindig belefér ütközés nélkül */
  position: absolute; font-size: 16px; font-weight: 750; color: var(--text);
  transform: translate(-50%, -50%);
  /* a 4 szegmens most 4 különböző (piros/borostyán/zöld/szürke) hátteret ad —
     egy `--panel`-színű (a korong saját szegélyszíne, témafüggetlenül fehér/
     sötét) "glow" tartja olvashatónak a feliratot BÁRMELYIK szín felett,
     mindkét témában, új szín bevezetése nélkül */
  text-shadow: 0 0 3px var(--panel), 0 0 3px var(--panel), 0 0 5px var(--panel);
}

.achievement-list { list-style: none; margin: 10px 0 0; padding: 0; }
/* korábban sima, elválasztóvonalas lista volt, fehér modal-háttéren —
   most minden badge egy önálló, tónusos kártya, ez ad struktúrát/mélységet
   ("modernebb" hatás) és egyben kontrasztot is a benne lévő jelvény-pöttynek */
/* A `<ul>` "items achievement-list"-ként kapja mindkét osztályt (az
   `.items li` justify-content:space-between-jét a névnek/összegnek
   TOVÁBBRA IS kell) — de az `.items li { padding: 3px 0; }` (fentebb)
   ugyanolyan (osztály+elem) specifitású, és FORRÁSSORREND alapján
   felülírta ezt a paddingot: a korábbi 12px/16px-es padding-javítások
   emiatt SOHA nem léptek ténylegesen érvénybe — ez volt a user ismételt
   "túl közel kezdődnek a szövegek" panaszának valódi oka. Az elem-
   szelektor hozzáadásával (`li.achievement-row`) a specifitás azonos
   marad, de a KÉSŐBBI forráshelyünk miatt ez nyer. */
li.achievement-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 22px;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-gradient-sunken); font-size: 14px; margin-bottom: 12px;
}
.achievement-row:last-child { margin-bottom: 0; }
.achievement-row.unlocked { background: var(--accent-gradient-sunken); border-color: var(--accent-dim); }
/* Korábban `opacity: .8` jelezte a "még nincs feloldva" állapotot — ez a
   BENNE lévő szöveget (leírás, haladás-szám) is arányosan halványította,
   ami a már eleve visszafogott `--text-dim`-mel kombinálva olvashatatlanná
   vált. A "zárolt" jelleget mostantól csak a halványabb keret/háttér adja,
   a szöveg kontrasztja érintetlen marad. */
.achievement-row:not(.unlocked) { border-style: dashed; }
.achievement-progress {
  margin-top: 8px; height: 6px; border-radius: 3px; background: var(--panel); overflow: hidden;
}
.achievement-progress div { height: 100%; background: var(--accent); border-radius: 3px; }
/* QA/user visszajelzés (2026-08-28, második kör): a `--text-dim` a
   tónusos (gradient) badge-háttereken ("szürke szürkén", "zöldes háttéren
   nem látszik") a bare WCAG-minimumot épp csak teljesítette, de a
   valóságban továbbra sem volt kényelmesen olvasható — ez a két mező NEM
   igazán "mellékes" infó (pont ezt keresi a user), ezért `var(--text)`-re
   váltva, teljes kontraszttal. */
.achievement-progress-count {
  font-size: 12.5px; font-weight: 650; color: var(--text);
  font-variant-numeric: tabular-nums; margin-top: 5px;
}
.achievement-global-stat { font-size: 12.5px; color: var(--text); margin-top: 5px; }

.quest-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.quest-card {
  border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px;
  background: var(--surface-gradient);
}
.quest-card-title { font-weight: 650; font-size: 14px; margin-bottom: 2px; }
.quest-card .achievement-progress { margin-top: 10px; }
.quest-card-reward { font-size: 12px; color: var(--accent); font-weight: 650; margin-top: 6px; }

/* Sprint 10 — ranglista/barátok/szezon. Szándékosan NINCS új arany/ezüst/bronz
   szín (ld. a paletta tudatos 3-szín-korlátozását fent) — a rangsor "ez te
   vagy" kiemelése a MEGLÉVŐ `.yearly-row-current` mintát (--edit-accent-dim)
   használja újra. */
.profile-title {
  font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: var(--edit-accent-dim); color: var(--edit-accent);
  border: none; font-family: inherit; cursor: pointer;
}
.ranglista-tabs { display: flex; gap: var(--space-6); margin: var(--space-14) 0 var(--space-4); border-bottom: 1px solid var(--border); }
.ranglista-tab {
  cursor: pointer; border: none; background: none; padding: 8px 4px; margin-bottom: -1px;
  font-size: 13.5px; font-weight: 650; color: var(--text-dim); border-bottom: 2px solid transparent;
}
.ranglista-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Contributor ranglista időszak-váltó (napi/heti/havi/örök, 2026-08-31) —
   a "Heti" fülön BELÜLI, alárendelt vizuális súlyú pill-sor, hogy vizuálisan
   ne keveredjen a fenti .ranglista-tab (Heti/Barátok/Szezon) szinttel. */
.ranglista-periodus-tabs { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-12); }
.ranglista-periodus-tab {
  cursor: pointer; border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; font-size: 12.5px; font-weight: 650;
  background: var(--panel); color: var(--text-dim); font-family: inherit;
}
.ranglista-periodus-tab:hover { border-color: var(--accent); color: var(--accent); }
.ranglista-periodus-tab.active { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }

/* "Profilom" modal KÜLSŐ fül-szintje (5 korábban külön modal összevonva,
   külső ticket, 2026-08-31, 2. tétel) — SZÁNDÉKOSAN pill-stílus, vizuálisan
   eltérve a LENTEBBI, alsó-vonalas .settings-tab/.ranglista-tab mintától:
   ez adja a 2 tab-szint közti hierarchiát (külső = "melyik szekció", belső
   = "melyik alszekció", ugyanaz az elv, mint a .ranglista-periodus-tab
   vs. .ranglista-tab megkülönböztetésnél feljebb). */
/* Valós hiba, screenshoton talált (2026-09-02: "majdnem lelóg a korábbi
   kereséseim gomb a felületről") — a .profile-tabs a .modal-header/
   .modal-scroll TESTVÉRE, nem azok GYERMEKE, ezért nem örökölte a modal
   máshol mindenütt meglévő 24px oldalpaddingját — a pill-gombok a modal
   SZÉLÉHEZ tapadva jelentek meg. Saját, ugyanazzal a 24px-es értékkel. */
.profile-tabs { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: var(--space-14) 0 var(--space-4); padding: 0 var(--space-24); }
.profile-tab {
  cursor: pointer; border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 14px; font-size: 13.5px; font-weight: 650;
  background: var(--panel); color: var(--text-dim); font-family: inherit;
}
.profile-tab:hover { border-color: var(--accent); color: var(--accent); }
.profile-tab.active { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }

/* "Saját adataim" tabok (2026-08-29, nyolcadik kör, 16. tétel) — vizuálisan
   ugyanaz a minta, mint a .ranglista-tab-nál, csak külön class-névvel
   (más modal, más jelentés, nem indokolt megosztott class-t erőltetni). */
.settings-tabs { display: flex; gap: var(--space-6); margin: var(--space-14) 0 var(--space-4); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.settings-tab {
  cursor: pointer; border: none; background: none; padding: 8px 4px; margin-bottom: -1px;
  font-size: 13px; font-weight: 650; color: var(--text-dim); border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.ranglista-nev-label { display: block; margin-top: 10px; }
.ranglista-nev-label input { margin-top: 4px; }
.ranglista-list { list-style: none; margin: 10px 0 0; padding: 0; }
.ranglista-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 4px;
  border-bottom: 1px solid var(--border); font-size: 14px;
}
.ranglista-row:last-child { border-bottom: none; }
.ranglista-row .amount { margin-left: auto; font-weight: 650; }
.ranglista-row-en { background: var(--edit-accent-dim); border-radius: 8px; font-weight: 650; }
.ranglista-rank { font-variant-numeric: tabular-nums; color: var(--text-dim); width: 32px; flex: none; }
.ranglista-own-row { margin-top: 8px; font-weight: 650; }

.friend-invite-row { display: flex; gap: 8px; }
.friend-invite-row input { flex: 1; }
.friend-compare-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.friend-compare-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.friend-compare-title { display: flex; justify-content: space-between; align-items: center; font-weight: 650; }
.friend-compare-stats { display: flex; gap: 14px; margin-top: 6px; font-size: 13px; color: var(--text-dim); }
.btn-icon.friend-accept:hover { color: var(--accent); border-color: var(--accent); }
.yearly-personal { margin-top: 8px; }
.yearly-table-details { margin-top: 10px; }
.yearly-table-details summary {
  cursor: pointer; font-size: 12.5px; font-weight: 650; color: var(--text-dim);
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.yearly-table-details summary::-webkit-details-marker { display: none; }
.yearly-table-details summary::before { content: "▸"; transition: transform .15s; }
.yearly-table-details[open] summary::before { transform: rotate(90deg); }
.yearly-table-details .yearly-table-wrap { margin-top: 10px; }
.yearly-table-wrap { overflow-x: auto; }
.yearly-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.yearly-table th {
  text-align: left; color: var(--text-dim); font-weight: 650; font-size: 11px;
  text-transform: uppercase; letter-spacing: .03em; padding: 5px 8px; border-bottom: 1px solid var(--border);
}
.yearly-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.yearly-table tr.yearly-row-current { background: var(--edit-accent-dim); font-weight: 650; }
.yearly-tiznapos { font-size: 12.5px; color: var(--text-dim); }

/* Matrica-árlista referencia (2026-09-04, "Matricáim" fül) — ugyanaz a
   .yearly-table váz, csak jobbra-igazított ár-oszloppal + egy köztes,
   szakasz-fejléc sorral (Országos vs. Vármegyei éves). */
.yearly-table td.amount { text-align: right; white-space: nowrap; }
.yearly-table tr.price-list-sep td {
  padding-top: 14px; border-bottom: none; color: var(--text-dim); font-weight: 650;
  font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
}

/* A térkép korábban egy összecsukható <details> volt ("🗺️ Útvonal
   megtekintése térképen") — közvetlen user visszajelzésre (2026-09-02:
   "De csak a térkép! ...összecsukható rész NEM KELL") sima, mindig
   látható <div>-re cserélve (ugyanaz a minta, mint a "Finomítás" panel
   korábbi <details>→<div> konverziója) — nincs többé nyitott/csukott
   állapot, a régi summary-nyíl-stílusok ezért törölve. */
.map-details { margin-bottom: 16px; }

/* A nem ajánlott kártyák fejléce (cím, idő/táv, összeg) + a bontás/térkép-
   link/vármegye-chipek korábban (2026-08-29 óta) egy KÜLÖN, saját
   "▸ részletek"/"▾ kevesebb" <details>-be voltak zárva a fejléc FÖLÉ —
   ez a költség-bontás tételes listájával EGYÜTT egy "dupla lenyíló"
   élményt adott. Közvetlen user visszajelzésre (2026-09-01) törölve — a
   fejléc/bontás/gomb mostantól MINDIG közvetlenül a DOM-ban van; 2026-09-03
   óta a bontás saját nyit/csuk kapcsolója is törölve (ld. .cost-details-static
   fenti komment), a látszását kizárólag a kártya-szintű `.collapsed`
   klemmezés dönti el. */

/* A mindig-látható szín-swatch+"szokásos/elkerülő út" felirat és a
   "💡 Kattints egy vármegyére" hint 2026-09-02-én, közvetlen user
   visszajelzésre ("ez a szöveg nem kell"/"semmi egyéb") törölve — a
   #map-legend mostantól VAGY üres, VAGY egyetlen info-pöttyöt tartalmaz
   (ld. app.js renderMap()), ezért a korábbi flex/gap elrendezés is
   feleslegessé vált. */
.map-legend { margin-bottom: 6px; }

/* Elkerülés-visszavonás — SAJÁT, jól látható sor (2026-09-01, valós
   felhasználói visszajelzésre: a korábbi, a .map-legend apró hint-szövegei
   közé rejtett gomb nem volt elég feltűnő). Szándékosan MEGKÜLÖNBÖZTETETT
   háttérrel a semleges .map-legend-től, hogy egyértelműen egy AKTÍV
   állapot jelzése/vezérlője legyen, ne egy passzív infó-sor. */
.map-avoidance-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; font-size: 13.5px; padding: 8px 12px; margin-bottom: 8px;
  background: var(--accent-dim); border-radius: 8px; border: 1px solid var(--accent);
}
.map-avoidance-controls .btn { padding: 5px 14px; font-size: 13px; white-space: nowrap; }

/* Leaflet-attribúció (© OpenStreetMap/Esri) — közvetlen user visszajelzés
   (2026-09-02): a Leaflet SAJÁT, fél-átlátszó fehér háttere egybeolvadt
   a körülötte lévő fehér/--panel felülettel (a főoldali .home-map-wrap
   esetén ráadásul a .home-map-fade alsó, fehérbe olvasztó rétege alatt
   szinte el is tűnt) — nem látszott a térkép RÉSZÉNEK. Átlátszatlan,
   sötét háttér (a térkép-csempéktől és a lap saját témájától is
   FÜGGETLEN, fix szín — mint a megye-/útvonal-színek is) egyértelműen a
   térképhez tartozónak mutatja, bármelyik alatta lévő felületen. */
/* A `.leaflet-container .leaflet-control-attribution` (leaflet.css:413)
   a SAJÁT háttér-szabályát egy 2-osztályos szelektorral adja — ugyanazt
   a specifitást kell megcéloznunk, különben (élőben ellenőrizve: a
   `background` NEM, csak a `color` érvényesült) csendben veszítene a
   sima egy-osztályos szabály a cascade-ben, forrássorrendtől függetlenül. */
.leaflet-container .leaflet-control-attribution {
  background: rgba(20, 20, 30, .65); color: #fff; font-size: 10px;
}
.leaflet-control-attribution a { color: #fff; }

.map-wrap { position: relative; margin: 4px 0 16px; }
.route-map {
  height: 340px; border-radius: 12px; margin: 0;
  border: 1px solid var(--border); background: var(--bg);
}
.map-busy {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 500; background: var(--panel); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 16px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
}

.result-footnote {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-dim); line-height: 1.6;
}
.result-footnote p { margin: 0 0 6px; }
.result-footnote p:last-child { margin-bottom: 8px; }
/* Közvetlen user visszajelzésre (2026-09-04: "két visszajelzés gomb
   van") — a korábbi külön "Valami nem stimmel? Jelezd nekünk" gomb (ami
   ugyanazt a visszajelző modalt nyitotta, mint a lábléc "💬 Visszajelzés"
   gombja, közvetlenül alatta a lapon) törölve — csak a technikai adatok
   másolása maradt, a szövege most már MAGA mondja, hogy utána a lenti
   Visszajelzés gombbal küldhető el. */
.report-issue-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* UX-audit (2026-09-03): "nincs vissza a tetejére/új keresés gomb az
   eredmény hosszú görgetése után" — a lap alján is elérhető, ne csak a
   fejlécben. Kicsit levegősebb keret adja, hogy elváljon a jogi/
   diagnosztikai kis-betűs szövegtől fölötte és alatta. */
.result-new-search-btn { margin-bottom: 18px; }
.btn-text-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 12px; color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px;
}
.btn-text-link:hover { color: var(--accent); }
.result-footnote #report-issue-status { display: block; margin-top: 6px; }

/* ------------------------------------------------------------------ */
/* "Saját adataim" design-kör — tónusos kártya-szekciók + hover-only    */
/* magyarázatok, hogy a rövid szöveg mellett a részletek se vesszenek el */
/* ------------------------------------------------------------------ */
/* Kártyák szürkébb, tónusos háttérrel (nem fehér a fehér modalon) — a benne
   lévő mezők/gombok viszont FEHÉREK, hogy kiemelkedjenek a szürke kártyából
   (fordított logika, mint a gomboknál — itt a kártya a "mélyebb" felület). */
.settings-section {
  /* Korábban `border: none` volt — a `--surface-gradient-sunken` háttér
     (túlnyomórészt `--bg`) és a modal saját, túlnyomórészt `--panel`
     hátterű `--surface-gradient`-je túl közel áll egymáshoz ahhoz, hogy a
     doboz-határ önmagában látszódjon — a user panasza ("a boxok nem
     különülnek el") pont ez volt. Egy tényleges keret adja meg a vizuális
     elválasztást. */
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-top: 12px;
  background: var(--surface-gradient-sunken);
}
.settings-section:first-child { margin-top: 0; }
.settings-section h3 { font-size: 14px; margin-bottom: 10px; display: flex; align-items: center; }
.settings-section input, .settings-section select { background: var(--panel); }
.settings-section .btn-icon { background: var(--panel); }
.settings-row { display: flex; gap: 10px; flex-wrap: wrap; }
.settings-row > label { flex: 1 1 120px; margin: 0 !important; }
/* ld. .row label.vehicle-category-field fentebb — ugyanaz a csonkolódási
   probléma jelentkezett a "Saját adataim" jármű-szekcióban is, ugyanazzal
   a "saját, önálló sor" megoldással. */
.settings-row > label.vehicle-category-field { flex: 1 1 100%; }
.settings-row > label > select, .settings-row > label > input { margin-top: 6px; }
.settings-actions { display: flex; gap: 14px; align-items: center; margin-top: 12px; }

/* Kis "i" jelzés — alapból alig látszik (halvány pötty), csak hover/fókusz
   esetén bontja ki a hosszabb magyarázatot egy lebegő buborékban. Így a fő
   szöveg egysoros/rövid maradhat, a részletek mégis elérhetők maradnak.
   `cursor:pointer` (nem `help`) — a felhasználó ezt kérte, mutatóujj jelezze,
   hogy kattintható/hover-elhető, ne a szokásos "?" kurzor. */
/* Akadálymentesítési javítás (2026-08-30, külső UX-audit): korábban
   `<span tabindex="0">` volt — billentyűzettel fókuszálható volt, de NEM
   szemantikailag interaktív elem, és a hozzáférhető neve a látható "i"
   betű volt, nem egy leíró szöveg. Mostantól valódi `<button>`, a `border:
   none; padding: 0; font: inherit` a böngésző alap gomb-stílusát nullázza
   (a lenti szabályok a tényleges megjelenést változatlanul adják). */
.info-dot {
  display: inline-flex; align-items: center; justify-content: center;
  /* UX re-audit (2026-09-03, WCAG 2.2 SC 2.5.8 Target Size AA): 20px → 24px —
     a 24×24 CSS px a minimum érintési célméret; 6 ilyen pötty volt alatta. */
  width: 24px; height: 24px; border-radius: 50%; background: var(--border); color: var(--text-dim);
  font-size: 12.5px; font-weight: 700; cursor: pointer; position: relative;
  flex: none; margin-left: 4px; vertical-align: middle;
  border: none; padding: 0; font-family: inherit;
}
/* WCAG 2.2 SC 2.5.8 (Target Size Minimum, AA) alapból csak 24×24px-et
   kívánna meg — a pötty vizuális mérete emiatt eredetileg tudatosan
   15×15px maradt, láthatatlan ::before hit-area-val kiegészítve. Közvetlen
   user visszajelzésre (2026-09-01, 2. kör: "i hover over buttonok
   nagyságát emeld még") a LÁTHATÓ méret is nagyobb (20×20px, ld. fent) —
   jobban felfedezhető/könnyebben eltalálható —, a láthatatlan
   ::before-zóna pedig ennek megfelelően 28×28px-re nő, hogy a tényleges
   érinthető terület is arányosan nagyobb maradjon a WCAG-minimumnál. A
   tooltip-buborék a ::after-t használja (ld. lent), ez szabadon marad. */
.info-dot::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 28px; height: 28px;
}
.info-dot:hover, .info-dot:focus-visible { background: var(--accent-fill); color: #fff; outline: none; }
/* WCAG 2.2 Focus Appearance — a fenti szabály a hoverrel közösen `outline:
   none`-t adott a fókuszált állapotnak is, a szín-/háttérváltás önmagában
   egy 15px-es pötty esetén túl gyenge fókusz-jelzés lehet. Külön,
   kifejezetten a billentyűzet-fókuszra (nem hoverre) egy tényleges
   outline is jár, ugyanaz a minta, mint a `.logo-link:focus-visible`. */
.info-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Negyedik kör után (közvetlen user visszajelzés: "Zárd középre
   összeset. Ezt már ideje jól megoldani, mert 4x-re kérem!") a korábbi,
   3 CSS-osztály közt váltó (középre/jobbra/balra) megoldás helyett egy
   TELJESEN újratervezett, JS-számolt pixel-pontos pozicionálás — app.js
   `igazitsdAzInfoTippet()` MINDIG a `--tip-left` egyéni CSS-tulajdonságot
   írja (a pötty saját bal szélétől mért, px-ben pontos érték), a buborék
   pedig MINDIG `translateX(-50%)`-kal középre igazodik ERRE a pontra —
   tehát VIZUÁLISAN mindig középre igazított marad (nem lóg át se jobbra,
   se balra igazított módba), csak a KÖZÉPPONT tolódik el annyival,
   amennyi a tényleges tartalom-határon belül maradáshoz szükséges. Ha
   nincs elég hely a pötty fölött/körül, a buborék a KONTÉNER közepére
   igazodik (nem a pöttyére) — így legalább szimmetrikusan lóg túl
   mindkét oldalon, sose csak az egyiken. A max-width is reszponzív
   (`min(240px, 100vw - 48px)`), hogy keskeny mobil nézeten eleve
   kevesebb hely kelljen neki. */
.info-dot:hover::after, .info-dot:focus-visible::after {
  content: attr(data-tip);
  position: absolute; left: var(--tip-left, 50%);
  /* Függőleges irány (2026-09-02, user screenshot: egy panel tetejéhez
     közeli pötty buboréka a képernyő TETEJÉN lógott ki, mert eddig a
     buborék MINDIG a pötty fölé nyílt) — app.js igazitsdAzInfoTippet()
     állítja be a --tip-top/--tip-bottom párt, alapból (nincs elég hely
     felül) VÁLTOZATLANUL a pötty fölé nyílik. */
  bottom: var(--tip-bottom, calc(100% + 7px)); top: var(--tip-top, auto);
  transform: var(--tip-transform, translateX(-50%));
  background: var(--text); color: var(--panel); font-size: 12px; font-weight: 500;
  padding: 8px 11px; border-radius: 8px; white-space: normal; width: max-content;
  max-width: min(240px, calc(100vw - 48px));
  box-shadow: var(--shadow), 0 0 0 1px rgba(127,127,127,.25); z-index: 30; line-height: 1.45; text-align: left;
}
/* Ugyanaz a hover-buborék, de magára a mezőre alkalmazva (nincs külön "i"
   pötty) — a fejléc kompakt ikonjaihoz/jelzőihez, ahol egy extra ikon már
   zsúfoltnak hatna. Lent nyílik (a fejléc alatt van hely, fölötte nincs). */
.hover-tip { cursor: pointer; position: relative; }
.hover-tip:hover::after, .hover-tip:focus-visible::after {
  content: attr(data-tip);
  position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
  background: var(--text); color: var(--panel); font-size: 12px; font-weight: 500;
  padding: 8px 11px; border-radius: 8px; white-space: normal; width: max-content; max-width: 240px;
  box-shadow: var(--shadow), 0 0 0 1px rgba(127,127,127,.25); z-index: 30; line-height: 1.45; text-align: left;
}
/* Felfelé nyíló változat — olyan elemeknek, amik egy modal ALJÁN vannak
   (pl. a szerencsekerék-gomb), ahol a lefelé nyíló buborék a modal
   görgetősávja alá csúszna, és a usernek le kellene görgetnie, hogy lássa. */
.hover-tip-up:hover::after, .hover-tip-up:focus-visible::after {
  top: auto; bottom: calc(100% + 8px);
}

/* Jogi lábléc (2026-09-01, közvetlen user kérésre: "mivel van
   regisztráció ezért kellene ÁSZF és Adatkezelési tájékoztató is") —
   szándékosan visszafogott, nem versenyez a fő tartalommal. */
.site-footer {
  max-width: 640px; margin: 0 auto; padding: 18px var(--space-24) 40px;
  text-align: center; font-size: 12.5px; color: var(--text-dim);
}
.site-footer a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--accent); }
@media (min-width: 860px) {
  .site-footer { max-width: 960px; }
}