:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --border: #e2e4e9;
  --text: #1b1e26;
  --text-dim: #6b7280;
  --accent: #2f6f4f;
  --accent-dim: #e7f2ec;
  --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;
  --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%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161b;
    --panel: #1c1f26;
    --border: #2b2f38;
    --text: #e7e9ee;
    --text-dim: #9aa0ac;
    --accent: #57b98b;
    --accent-dim: #16261f;
    --danger: #ff8079;
    --danger-bg: #3a1f1e;
    --warn: #e8c468;
    --warn-bg: #362c12;
    --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; }

body {
  margin: 0;
  background: var(--bg);
  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; z-index: 5;
}
.topbar-inner {
  max-width: 1200px; margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
}
.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; }
/* 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-area a, .account-area button.link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.account-area a:hover, .account-area button.link:hover { text-decoration: underline; }
.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); }

/* 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; }

/* 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 {
  position: absolute; top: 100%; right: 0; margin-top: 8px; z-index: 60;
  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; }
/* 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 {
  /* z-index: 1000 — jóval a Leaflet saját belső rétegei (paneljei/kontrolljai
     akár 200–800-ig mennek) fölött, különben egy nyitva hagyott/kibontott
     térkép átfedi a modalokat, mintha a modal "mélyebben" jelenne meg */
  position: fixed; inset: 0; background: rgba(20, 20, 30, .45);
  display: flex; align-items: center; justify-content: center; z-index: 1000; 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 { font-size: 19px; margin: 0; }
.modal-scroll { overflow-y: auto; padding: 14px 24px 24px; }
.modal-scroll label { display: block; font-size: 12.5px; color: var(--text-dim); margin: 14px 0 6px; }
.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; }
.auth-benefits {
  list-style: none; margin: 0 0 16px; padding: 12px 14px; background: var(--accent-dim);
  border-radius: 10px; font-size: 13px; color: var(--text);
}
.auth-benefits li { padding: 3px 0; }
.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);
}
.history-table-wrap td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.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; }
.history-empty { text-align: center; color: var(--text-dim); padding: 32px 10px; font-size: 14px; }

.simple-layout {
  max-width: 640px; margin: 0 auto; padding: 32px 24px 64px;
}

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

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

.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

.advanced {
  border-top: 1px solid var(--border); margin-top: 18px; padding-top: 14px;
}
.advanced summary {
  cursor: pointer; font-size: 13px; font-weight: 650; color: var(--text-dim);
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::before { content: "▸"; transition: transform .15s; }
.advanced[open] summary::before { transform: rotate(90deg); }
.advanced > *:not(summary) { margin-top: 14px; }
.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" — ugyanaz a mintázat, mint a "További beállítások", csak a
   fő kérdéshez (Honnan/Hová) képest MÁSODLAGOS, opcionális mezőket rejti el
   alapból (dátum, matrica, gyakoriság, plusz idő), hogy elöl csak a lényeg
   látszódjon: két mező + egy gomb. */
.finomitas {
  border-top: 1px solid var(--border); margin-top: 18px; padding-top: 14px;
}
.finomitas summary {
  cursor: pointer; font-size: 14px; font-weight: 650; color: var(--text);
  list-style: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.finomitas summary::-webkit-details-marker { display: none; }
.finomitas summary::before { content: "▸"; transition: transform .15s; color: var(--text-dim); }
.finomitas[open] summary::before { transform: rotate(90deg); }
.finomitas-grid { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.finomitas-col > *:first-child { margin-top: 0; }

/* Nagyobb kijelzőn kihasználjuk a szélességet: a "Finomítás" mezői két
   oszlopba rendeződnek (kevesebb görgetés), a panel is szélesebb. Ennek a
   szabálynak KÉSŐBB kell jönnie a fájlban, mint az alap (mobil-first)
   szabálynak, különben azonos specificitásnál a forrás-sorrend miatt az
   alap verzió nyerne akkor is, ha a média-feltétel teljesül. */
@media (min-width: 860px) {
  .simple-layout { max-width: 880px; }
  .finomitas-grid { flex-direction: row; gap: 32px; }
  .finomitas-col { flex: 1 1 0; min-width: 0; }
}

.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: 40px; height: 40px;
  font-size: 19px; 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; }

.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; }

/* 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; }
.submit-hint { margin: 8px 0 0; font-size: 11.5px; color: var(--text-dim); text-align: center; }

.trust-row {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  margin-top: 14px; font-size: 11.5px; color: var(--text-dim);
}

.link-btn {
  display: block; width: 100%; text-align: center; margin-top: 10px;
  background: none; border: none; cursor: pointer; padding: 6px;
  color: var(--accent); font-size: 13.5px; font-weight: 600;
}
.link-btn:hover { text-decoration: underline; }

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; }

label { display: block; font-size: 12.5px; font-weight: 650; color: var(--text-dim); margin-bottom: 8px; }
input, select {
  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;
}
input:focus, select: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;
}

.hint { font-size: 11.5px; font-weight: 400; color: var(--text-dim); opacity: .85; margin: 6px 0 0; }
.hint.main-hint { font-size: 14px; opacity: 1; margin: 0 0 6px; }
.hint.main-hint-sub { font-size: 12.5px; margin: 0 0 20px; }
.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: 8px; margin-bottom: 8px; }
.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); border-color: var(--accent); 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 a keskeny "Finomítás" oszlopban
   (két hasábos elrendezésnél kb. 380–420px) a fenti fix 5-oszlopos gridnél
   összecsúszott: a matrica-név (select) + 2 dátum + 2 ikon-gomb sosem fért ki
   egy sorba. Csak ITT (NEM a "Saját adataim" modal szélesebb, ugyanezt a
   `.owned-row` osztályt vizuális egyezés miatt újrahasznosító szerkesztő-
   során, ld. lent) váltunk tördelő flexre: a select saját, teljes szélességű
   sorra kerül, a dátumok/gombok alá, szükség esetén tovább tördelve — így
   SEMMILYEN konténerszélességnél nem csúszhat egymásba. */
#owned-list .owned-row { display: flex; flex-wrap: wrap; gap: 6px 8px; }
#owned-list .owned-row .owned-product { flex: 1 1 100%; }
#owned-list .owned-row .owned-from, #owned-list .owned-row .owned-to { flex: 1 1 110px; min-width: 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); }
/* 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); border-color: var(--accent); color: #fff; margin-top: 6px; }
.btn-primary:hover { filter: brightness(1.06); }
.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); } }

/* ------------------------------------------------------------------ */
/* 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 {
  width: 26px; height: 26px; font-size: 15px; margin-bottom: 0;
}
.result-headline { font-size: 25px; font-weight: 750; line-height: 1.3; margin-bottom: 6px; }
.result-sub { font-size: 16px; color: var(--text-dim); margin-bottom: 22px; }

.answer-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.answer-card {
  border: 2px solid var(--border); border-radius: 14px; padding: 16px 18px;
}
.answer-card.recommended { border-color: var(--accent); background: var(--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) */
.answer-card.editing { outline: 3px 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; }
/* a térképen ehhez az útvonalhoz tartozó szín — így a kártya és a térképi
   vonal színről azonnal összepárosítható, becsukott kártyánál is látszik */
.route-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle; flex: none; }
.answer-card .answer-card-badge {
  font-size: 12px; font-weight: 700; color: #fff; background: var(--accent);
  padding: 2px 10px; border-radius: 999px;
}
.answer-card .headline-stats {
  display: flex; gap: 24px; margin-bottom: 14px; flex-wrap: wrap;
}
.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; }
/* note-row/reason-line megszűnt önálló látható elemként — a szövegük a
   kártya kind-tag címkéjének hover-tipjébe költözött (ld. app.js
   buildAnswerCard, .card-kind-tag.hover-tip). */
/* 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ártya-címke (🥇 Ajánlott / Alternatíva) — gyors vizuális megkülönböztetés */
.card-kind-tag {
  display: inline-block; font-size: 11.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 */
.compare-strip { margin-bottom: 14px; overflow-x: auto; }
.compare-strip table { width: 100%; border-collapse: collapse; font-size: 13px; }
.compare-strip th {
  text-align: left; color: var(--text-dim); font-weight: 650; font-size: 11px;
  text-transform: uppercase; letter-spacing: .03em; padding: 5px 8px;
}
.compare-strip th:not(:first-child), .compare-strip td:not(:first-child) { text-align: center; }
.compare-strip td { padding: 7px 8px; border-top: 1px solid var(--border); font-weight: 650; }
.compare-strip tr:first-child td { border-top: none; }
.compare-strip td:first-child { color: var(--text-dim); font-weight: 600; text-align: left; }
.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; }
.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; }
.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. */
.cost-details-static { margin-top: 12px; }
.section-subheading {
  font-size: 12.5px; font-weight: 650; color: var(--text-dim); margin: 0 0 8px;
}
.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; }

/* 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; }

.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; }

/* 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));
}
.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; } }

.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: 6px 0 4px; }
.ceremony-reward {
  font-size: 26px; font-weight: 750; color: var(--accent); margin-top: 14px;
  font-variant-numeric: tabular-nums;
}

/* 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, tompa (a téma saját) színekkel. */
.wheel-wrap { position: relative; width: 130px; height: 130px; margin: 16px auto 4px; }
.wheel-disc {
  width: 100%; height: 100%; border-radius: 50%;
  background: conic-gradient(var(--border) 0% 55%, var(--accent-dim) 55% 85%,
    var(--accent) 85% 97%, var(--edit-accent) 97% 100%);
  border: 3px solid var(--panel); box-shadow: var(--shadow);
  transition: transform 2.4s cubic-bezier(0.17, 0.67, 0.05, 1);
  position: relative;
}
.wheel-pointer {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 13px solid var(--text); z-index: 2;
}
.wheel-label {
  position: absolute; font-size: 12px; font-weight: 750; color: var(--text);
  transform: translate(-50%, -50%);
}

.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 */
.achievement-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border-radius: 10px; 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); }
.achievement-row:not(.unlocked) { opacity: .8; }
.achievement-progress {
  margin-top: 6px; height: 5px; border-radius: 3px; background: var(--panel); overflow: hidden;
}
.achievement-progress div { height: 100%; background: var(--accent); border-radius: 3px; }
.achievement-global-stat { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; }

.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: 10px 12px;
  background: var(--surface-gradient);
}
.quest-card-title { font-weight: 650; font-size: 14px; margin-bottom: 2px; }
.quest-card .achievement-progress { margin-top: 8px; }
.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);
}
.ranglista-tabs { display: flex; gap: 6px; margin: 14px 0 4px; 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); }
.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); }

.map-details { margin-bottom: 16px; }
.map-details summary {
  cursor: pointer; font-size: 14px; font-weight: 650; color: var(--text);
  list-style: none; display: flex; align-items: center; gap: 6px; padding: 4px 0;
}
.map-details summary::-webkit-details-marker { display: none; }
.map-details summary::before { content: "▸"; transition: transform .15s; color: var(--text-dim); }
.map-details[open] summary::before { transform: rotate(90deg); }
.map-details[open] summary { margin-bottom: 8px; }

/* a nem ajánlott kártyák fejléce (cím, idő/táv, összeg) alapból is látszik —
   ez maga a <summary>, hogy egyértelmű legyen, hogy ez is egy teljes értékű
   opció, nem egy elrejtett link mögötti üresség; csak a bontás/térkép-link
   csukott, azt jelzi a nyíl a jobb szélen */
.answer-card-collapse summary {
  cursor: pointer; list-style: none; display: block;
}
.answer-card-collapse summary::-webkit-details-marker { display: none; }
.answer-card-collapse summary::after {
  content: "▸ részletek"; display: block; margin-top: 10px;
  font-size: 12px; font-weight: 650; color: var(--text-dim);
}
.answer-card-collapse[open] summary::after { content: "▾ kevesebb"; }
.answer-card-collapse[open] summary { margin-bottom: 4px; }

.map-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; flex-wrap: wrap; }
.map-legend .swatch { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

.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; }
.result-footnote #report-issue { font-size: 12.5px; padding: 7px 12px; }
.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 {
  border: none; 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; }
.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. */
.info-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; background: var(--border); color: var(--text-dim);
  font-size: 10px; font-weight: 700; cursor: pointer; position: relative;
  flex: none; margin-left: 4px; vertical-align: middle;
}
.info-dot:hover, .info-dot:focus-visible { background: var(--accent); color: #fff; outline: none; }
.info-dot:hover::after, .info-dot:focus-visible::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 7px); 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;
}
/* 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;
}