/* ===========================================================================
   fiok.css - a vevői fiók lapstílusa.

   A tokenek NEM itt vannak: `ui/tokens.css`. Ez a fájl csak elrendez.

   ❗ AMI 2026-08-27-ÉN VÁLTOZOTT A SZERKEZETBEN:

   1. SAJÁT FEJLÉC. A fiók tetején addig a MARKETING navigáció ült (118 px dupla
      fejléc, két márkajel), és a képernyő leghangosabb eleme egy fekete
      „Weboldalt rendelek" gomb volt - annak, aki épp a tartozását nézi. A
      bejelentkezett felület saját fejlécet kapott: bal oldalt a márka, jobb
      oldalt a fiók-menü. A marketing navot a `_gen-nav.cjs` KIHAGY listája
      tartja távol, ugyanúgy, mint az `admin.html`-t.

   2. A KILÉPÉS LEKERÜLT A CÍM MELLŐL. Mobilon ez volt az első gomb a vevő neve
      alatt: a legritkábban kellő, leginkább visszafordíthatatlan művelet ült a
      legjobb helyen. Most a fiók-menüben van.

   3. A FÜLSOR GÖRGETHETŐSÉGE LÁTSZIK. 390 px-en a sáv scrollWidth-je 545 volt a
      359-es clientWidth mellett: a „Számlák" fül offsetLeft-je PONTOSAN 359
      (nulla képpontja látszott), az „Adataim" teljesen kívül volt, a görgetősáv
      pedig el volt rejtve. Telefonon a vevő nem tudhatta meg, hogy van
      számla-szakasz. Most széli elhalványítás jelzi, ha van hova görgetni.

   4. KÉTOSZLOPOS ASZTALON. 760 px-es hasáb futott 1280-on, félüres margókkal;
      1080 px fölött a szakaszlista oldalra kerül, és a tartalom kap teret.
   =========================================================================== */

* { box-sizing: border-box; }
html { color-scheme: light dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--sz-2);
  line-height: var(--sor-alap);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); }
.hide { display: none !important; }
.mt-1 { margin-top: var(--t-1); }
.mt-2 { margin-top: var(--t-2); }
.kozep { text-align: center; }
.mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 14px; }

/* Csak képernyőolvasónak. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- FEJLÉC -------------------------------------------------------------- */
.fejlec-sav {
  position: sticky; top: 0; z-index: 40;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.fejlec-sav .in {
  max-width: 1120px; margin: 0 auto;
  padding: var(--t-3) clamp(14px, 4vw, 28px);
  display: flex; align-items: center; justify-content: space-between; gap: var(--t-4);
}
.marka {
  display: inline-flex; align-items: center; gap: var(--t-2);
  text-decoration: none; color: var(--ink);
  font-weight: var(--v-felkover); font-size: 15.5px; letter-spacing: -0.01em;
}
.marka .cimke {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em;
  color: var(--ink-mute); text-transform: uppercase; padding-left: var(--t-2);
  border-left: 1px solid var(--line); margin-left: var(--t-1);
}
@media (max-width: 520px) { .marka .cimke { display: none; } }

/* Fiók-menü: a név a gomb, a kilépés benne. */
.fiokmenu { position: relative; }
.fiokmenu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--t-2);
  padding: 6px 12px 6px 10px; border: 1px solid var(--line); border-radius: var(--ker-pirula);
  font-size: var(--sz-1); color: var(--ink); max-width: 46vw;
}
.fiokmenu > summary::-webkit-details-marker { display: none; }
.fiokmenu > summary:hover { border-color: var(--ink-mute); }
.fiokmenu .nev {
  font-weight: var(--v-felkover); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fiokmenu .nyil { color: var(--ink-mute); font-size: 10px; }
.fiokmenu-lap {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; z-index: 50;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--ker);
  box-shadow: var(--arnyek); padding: var(--t-3);
}
.fiokmenu-lap .cim { font-weight: var(--v-felkover); font-size: var(--sz-1); }
.fiokmenu-lap .em { color: var(--ink-soft); font-size: var(--sz-0); overflow-wrap: anywhere; }
.fiokmenu-lap hr { border: none; border-top: 1px solid var(--line); margin: var(--t-3) 0; }
.fiokmenu-lap a, .fiokmenu-lap button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  font: inherit; font-size: var(--sz-1); color: var(--ink); padding: 7px 0;
  cursor: pointer; text-decoration: none;
}
.fiokmenu-lap a:hover, .fiokmenu-lap button:hover { color: var(--accent); }

/* ---- VÁZ ----------------------------------------------------------------- */
/* ❗ `min-width:0` A FLEX-ELEMEN. A body `display:flex;flex-direction:column`,
   ezért a .wrap FLEX-ELEM, és az alapértelmezett `min-width:auto` miatt nem tud
   a tartalma alá zsugorodni: a mérőszám-rács max-content szélességére nőtt
   (390 px-es telefonon 545 px), és a lap VÍZSZINTESEN GÖRGETHETŐ lett. */
.wrap {
  max-width: 1120px; width: 100%; min-width: 0;
  margin: 0 auto; padding: var(--t-5) clamp(14px, 4vw, 28px) var(--t-7);
  flex: 1 0 auto;
}

h1 {
  font-weight: var(--v-felkover); font-size: var(--sz-5);
  letter-spacing: var(--betukoz-cim); margin: 0;
}
h2 { font-size: var(--sz-2); font-weight: var(--v-felkover); margin: 0; color: var(--ink-soft); }

.muted { color: var(--ink-soft); font-size: var(--sz-1); }
.faint { color: var(--ink-mute); font-size: var(--sz-0); }
.big { font-weight: var(--v-felkover); font-size: var(--sz-3); letter-spacing: -0.01em; }
.note { font-size: var(--sz-0); color: var(--ink-mute); margin-top: var(--t-2); }
.secc { font-size: var(--sz-0); font-weight: var(--v-felkover); color: var(--ink-soft); margin-bottom: var(--t-2); }
.tetel-sor { font-size: var(--sz-0); color: var(--ink-mute); margin: 2px 0 4px; line-height: var(--sor-alap); }

.jel {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--sz-0); font-weight: var(--v-felkover);
  padding: 5px 11px; border-radius: var(--ker-pirula);
  background: var(--warn-bg); color: var(--warn); margin-bottom: var(--t-3);
}

/* ---- KÁRTYA -------------------------------------------------------------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--ker-nagy);
  padding: var(--t-4); margin-bottom: var(--t-3);
}
.kfej { display: flex; justify-content: space-between; gap: var(--t-3); align-items: flex-start; flex-wrap: wrap; }
.kfej > div:first-child { flex: 1 1 240px; min-width: 0; }
.kfej-pill { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: 0 0 auto; }
.ktorzs { margin-top: var(--t-3); padding-top: var(--t-3); border-top: 1px solid var(--line); }
.row { display: flex; justify-content: space-between; gap: var(--t-3); flex-wrap: wrap; align-items: flex-start; }
.row > div:first-child { flex: 1 1 240px; min-width: 0; }
.row > div:last-child:not(:first-child) { flex: 0 0 auto; text-align: right; }

.szekcio-fej {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--t-2); flex-wrap: wrap; margin: var(--t-5) 0 var(--t-3);
}
.panel > .szekcio-fej:first-child { margin-top: 0; }
.szekcio-fej h2 {
  font-size: var(--sz-1); font-weight: var(--v-kover); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.szekcio-fej .sub { font-size: var(--sz-0); color: var(--ink-mute); }

/* ---- ŰRLAP --------------------------------------------------------------- */
label { display: block; font-size: var(--sz-1); color: var(--ink-soft); margin: var(--t-3) 0 var(--t-1); }
input, textarea {
  width: 100%; font-family: inherit; font-size: var(--sz-2); color: var(--ink);
  background: var(--field); border: 1.5px solid var(--line); border-radius: var(--ker-kicsi);
  padding: 11px 13px;
}
input:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { resize: vertical; min-height: 72px; }
/* ❗ iOS: 16 px ALATTI betűnél a Safari ránagyít a fókuszált mezőre, és nem
   nagyít vissza. Itt ez a beléptető mezőt érinti - vagyis a fizető ügyfél ELSŐ
   érintését a portálon. Csak mobilon emelünk. */
@media (max-width: 768px) { input, textarea { font-size: 16px; } }
input[aria-invalid="true"] { border-color: var(--bad); }
.mezo-hiba { color: var(--bad); font-size: var(--sz-0); margin-top: var(--t-1); min-height: 1px; }
.gr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--t-3); }
@media (max-width: 560px) { .gr { grid-template-columns: 1fr; } }

/* ---- GOMB ---------------------------------------------------------------- */
.btn {
  font-family: inherit; font-weight: var(--v-felkover); font-size: var(--sz-1);
  border: none; border-radius: var(--ker-pirula); padding: 11px 20px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  transition: filter var(--ido) var(--gorbe), border-color var(--ido) var(--gorbe);
  text-decoration: none; display: inline-block; text-align: center;
}
.btn:hover { filter: brightness(1.06); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.sec { background: var(--surface); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink-soft); border: 1.5px solid var(--line); }
.btn.ghost:hover { color: var(--ink); border-color: var(--ink-mute); }
.btn.danger { background: transparent; color: var(--bad); border: 1.5px solid var(--bad-line); }
.btn.sm { font-size: var(--sz-1); padding: 8px 14px; }
.btn.teljes { width: 100%; margin-top: var(--t-3); }
.acts { display: flex; gap: var(--t-2); flex-wrap: wrap; margin-top: var(--t-3); }
.linkgomb {
  background: none; border: none; font-family: inherit; font-size: var(--sz-1);
  font-weight: var(--v-felkover); color: var(--accent); cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 3px;
}
.msg { font-size: var(--sz-1); margin-top: var(--t-3); min-height: 18px; }
.msg.err { color: var(--bad); }
.msg.ok { color: var(--ok); }

/* ---- PIRULA -------------------------------------------------------------- */
/* ❗ SZÍN CSAK OTT, AHOL TEENDŐ VAN. A `nyugvo` szándékosan színtelen: ha minden
   állapot színes jelvény, a szín nem mond semmit. */
.pill {
  display: inline-block; font-size: 11.5px; font-weight: var(--v-felkover);
  padding: 3px 10px; border-radius: var(--ker-pirula);
}
.pill.nyugvo { background: transparent; color: var(--ink-mute); padding-left: 0; padding-right: 0; }
.pill.mut { background: var(--surface); color: var(--ink-soft); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }

/* ---- TEENDŐ-SÁV ---------------------------------------------------------- */
.teendok { margin: var(--t-4) 0 var(--t-1); display: grid; gap: var(--t-2); }
.tdo {
  display: flex; gap: var(--t-3); align-items: flex-start;
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: var(--ker);
  padding: var(--t-3) var(--t-4);
}
/* A rangsor a KERETBEN és a GOMBBAN van, nem a méretben - négy egyforma doboz
   nem rangsor, hanem fal. */
.tdo.rang-1 { border-left-color: var(--warn); }
.tdo.rang-2 { border-left-color: var(--accent); }
.tdo.rang-3 { border-left-color: var(--line); background: transparent; }
.tdo.rang-0 { border-left-color: var(--line); }
.tdo-ikon {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: var(--v-kover);
  background: var(--surface); color: var(--ink-soft); margin-top: 1px;
}
.tdo.rang-1 .tdo-ikon { background: var(--warn-bg); color: var(--warn); }
.tdo-torzs { flex: 1 1 auto; min-width: 0; }
.tdo-cim { font-weight: var(--v-felkover); font-size: var(--sz-2); }
.tdo-alcim { font-size: var(--sz-1); color: var(--ink-soft); margin-top: 2px; }
.tdo-gomb {
  flex: none; font-size: var(--sz-1); font-weight: var(--v-felkover); text-decoration: none;
  white-space: nowrap; border: 1.5px solid var(--line); border-radius: var(--ker-pirula);
  padding: 8px 15px; color: var(--ink); background: transparent;
  font-family: inherit; cursor: pointer; align-self: center;
  transition: border-color var(--ido) var(--gorbe), color var(--ido) var(--gorbe);
}
.tdo-gomb:hover { border-color: var(--accent); color: var(--accent); }
/* PONTOSAN EGY kitöltött gomb a sávban: az, amelyik pénzről szól. */
.tdo-gomb.elsodleges {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.tdo-gomb.elsodleges:hover { filter: brightness(1.06); color: var(--accent-ink); }
@media (max-width: 560px) {
  .tdo { flex-wrap: wrap; }
  .tdo-gomb { margin-left: 34px; }
}

/* ---- MÉRŐSZÁMOK ---------------------------------------------------------- */
.kpi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--t-2); margin: var(--t-4) 0 var(--t-1);
}
.kpi .k { background: var(--card); border: 1px solid var(--line); border-radius: var(--ker); padding: var(--t-3) var(--t-4); }
.kpi .kc { font-size: 11px; font-weight: var(--v-kover); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); }
.kpi .kv { font-size: var(--sz-4); font-weight: var(--v-felkover); letter-spacing: var(--betukoz-cim); margin-top: var(--t-1); line-height: var(--sor-suru); }
.kpi .kn { font-size: var(--sz-0); color: var(--ink-mute); margin-top: 2px; }
.kpi .k.fig .kv { color: var(--warn); }
.kpi .k.surgos { border-color: var(--warn-line); }
/* ❗ MOBILON KÉT OSZLOP, NEM EGY. A `minmax(190px,1fr)` egy 344 px-es sávban
   egyetlen oszlopot enged, tehát a három csempe 230 pixert evett a hajtás
   fölött - épp azt a helyet, ahonnan a tartalmat kiszorítottuk. Két oszlopnál a
   „2026. 09. 07." 21 px-en nem fér el egy 156 pixeles csempében, ezért ott a
   mérőszám egy fokkal kisebb. A csempe INFORMÁCIÓ, nem plakát. */
@media (max-width: 560px) {
  .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .kv { font-size: 17px; }
  .kpi .k { padding: var(--t-3); }
}

/* ---- SZAKASZOK (fülek) --------------------------------------------------- */
.fulek-keret { position: relative; margin: var(--t-5) 0 var(--t-4); }
.fulek {
  display: flex; gap: var(--t-1); overflow-x: auto;
  border-bottom: 1px solid var(--line);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  /* ❗ NINCS `scroll-snap-type`. Volt, és MÉRVE ELRONTOTTA a lényeget: a
     kiválasztott fület a router 160 pixerre görgette volna, a snap viszont
     visszarántotta 101,7-re (a szomszéd fül kezdetére), tehát a „Számlák" fül
     kiválasztva sem látszott teljesen. Egy fülsávon a snap kényelmi dísz; azt,
     hogy a kiválasztott szakasz LÁTSZIK-e, nem áldozhatjuk fel érte. */
}
.fulek::-webkit-scrollbar { display: none; }
.fulek button {
  flex: none; font-family: inherit; font-size: var(--sz-2); font-weight: var(--v-felkover);
  color: var(--ink-soft); background: none; border: none; border-bottom: 2px solid transparent;
  padding: 10px 13px; cursor: pointer; white-space: nowrap; margin-bottom: -1px;
  transition: color var(--ido) var(--gorbe), border-color var(--ido) var(--gorbe);
}
.fulek button:hover { color: var(--ink); }
.fulek button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.fulek .db {
  display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px;
  border-radius: var(--ker-pirula); background: var(--surface); color: var(--ink-soft);
  font-size: 11.5px; font-weight: var(--v-kover); text-align: center;
}
.fulek button[aria-selected="true"] .db { background: var(--accent); color: var(--accent-ink); }

/* ❗ A GÖRGETHETŐSÉG JELE. Enélkül 390 px-en 186 pixel lógott ki jelzés nélkül,
   és a „Számlák" szakaszból nulla képpont látszott. A takarás csak akkor van
   ott, ha tényleg van hova görgetni - különben nem létező tartalmat ígérne. */
.fulek-keret::before, .fulek-keret::after {
  content: ""; position: absolute; top: 0; bottom: 1px; width: 36px;
  pointer-events: none; opacity: 0; transition: opacity var(--ido) var(--gorbe);
}
.fulek-keret::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.fulek-keret::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.fulek-keret:has(.van-bal)::before { opacity: 1; }
.fulek-keret:has(.van-jobb)::after { opacity: 1; }

/* ---- KÉTOSZLOPOS ASZTALON ------------------------------------------------ */
/* 1080 px fölött a szakaszlista oldalra kerül. A `.fulek` ilyenkor függőleges,
   tehát nincs mit görgetni - a takarások is kikapcsolnak. */
@media (min-width: 1080px) {
  .torzs { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--t-6); align-items: start; }
  .fulek-keret { margin: 0; position: sticky; top: 84px; }
  .fulek { flex-direction: column; gap: 2px; border-bottom: none; overflow: visible; }
  .fulek button {
    text-align: left; border-bottom: none; border-radius: var(--ker-kicsi);
    padding: 9px 12px; margin-bottom: 0; display: flex; justify-content: space-between; align-items: center;
  }
  .fulek button[aria-selected="true"] { background: var(--surface); color: var(--ink); }
  .fulek-keret::before, .fulek-keret::after { content: none; }
}

/* ---- ÖSSZEFOGLALÓ SOROK -------------------------------------------------- */
.osor {
  display: flex; justify-content: space-between; gap: var(--t-3); align-items: center;
  padding: var(--t-3) 0; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.osor:last-of-type { border-bottom: none; }
.osor .ol { font-size: var(--sz-2); font-weight: var(--v-felkover); }
.osor .om { font-size: var(--sz-0); color: var(--ink-mute); margin-top: 1px; }
.osor .oj { display: flex; align-items: center; gap: var(--t-2); flex-wrap: wrap; justify-content: flex-end; }

/* ---- ADATSOROK ----------------------------------------------------------- */
.dl { margin: 0; }
.dl .s { display: flex; justify-content: space-between; gap: var(--t-4); padding: 9px 0; border-bottom: 1px solid var(--line); }
.dl .s:last-child { border-bottom: none; }
.dl dt { font-size: var(--sz-1); color: var(--ink-soft); flex: 0 0 auto; }
.dl dd { margin: 0; font-size: var(--sz-2); text-align: right; overflow-wrap: anywhere; }

/* ---- UTALÁSI ADATOK ------------------------------------------------------ */
/* Monokróm keret, kitöltés nélkül - a hangsúlyt a tartalom adja, nem a szín. A
   monospace nem dísz: a 24 jegyű számlaszámot és a közleményt a vevő
   karakterenként olvassa vissza a netbankjában. */
.utal { border: 1px solid var(--line); border-radius: var(--ker); margin-top: var(--t-3); }
.ur { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 9px 12px; }
.ur + .ur { border-top: 1px solid var(--line); }
.uk { flex: 0 0 132px; font-size: var(--sz-0); color: var(--ink-soft); }
/* `anywhere` és nem `break-all`: a hosszú számlaszám csak akkor törik, ha muszáj,
   a „Kiss Szabolcs e.v." viszont nem szakad ketté a szó közepén. */
.uv { flex: 1 1 170px; font-size: 14.5px; overflow-wrap: anywhere; }
/* Fix szélesség: a „Másolás" -> „Kimásolva" visszajelzés így nem tolja el a sort. */
.copy { flex: none; min-width: 106px; }
@media (max-width: 520px) {
  .uk { flex: 1 0 100%; }
  .uv { flex: 1 1 auto; }
  .ur { gap: 6px 10px; }
  .copy { margin-left: auto; }
}

/* ---- FIZETÉSI RÉSZLET ---------------------------------------------------- */
.frc { font-weight: var(--v-felkover); font-size: 14.5px; }
.fr + .fr { border-top: 1px solid var(--line); margin-top: var(--t-3); padding-top: var(--t-3); }

/* ---- PROJEKT-FÁZIS ------------------------------------------------------- */
.fazis { margin: var(--t-4) 0; }
.lepesek {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--t-1);
}
.lepes { position: relative; padding-top: 16px; font-size: var(--sz-0); color: var(--ink-mute); min-width: 0; }
.lepes-jel { position: absolute; top: 4px; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--surface); }
.lepes.kesz .lepes-jel, .lepes.aktiv .lepes-jel { background: var(--accent); }
.lepes.aktiv .lepes-jel { background: linear-gradient(to right, var(--accent) 55%, var(--surface) 55%); }
.lepes-nev { display: block; font-weight: var(--v-kozep); }
.lepes.kesz .lepes-nev { color: var(--ink-soft); }
.lepes.aktiv .lepes-nev { color: var(--accent); font-weight: var(--v-felkover); }
.lepes-mikor { display: block; font-size: 11.5px; color: var(--ink-mute); margin-top: 1px; }
@media (max-width: 560px) {
  .lepesek { grid-template-columns: repeat(5, 1fr); }
  .lepes-nev { font-size: 11px; }
  .lepes-mikor { font-size: 10.5px; }
}
.fazis-mit { font-size: var(--sz-1); color: var(--ink-soft); margin: var(--t-3) 0 0; }
.fazis-atadas {
  display: flex; align-items: baseline; gap: var(--t-2); flex-wrap: wrap;
  margin-top: var(--t-3); padding-top: var(--t-3); border-top: 1px dashed var(--line);
}
.fazis-atadas .fa-cimke { font-size: 11px; font-weight: var(--v-kover); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); }
.fazis-atadas .fa-ertek { font-size: var(--sz-2); font-weight: var(--v-felkover); }
.fazis-atadas .fa-sur { font-size: var(--sz-0); color: var(--ink-mute); }
.fazis-atadas .fa-sur.kesik { color: var(--warn); font-weight: var(--v-felkover); }
.fazis-atadas.nincs .fa-ertek { color: var(--ink-soft); font-weight: var(--v-kozep); }
.fazis-leall {
  background: var(--surface); border-radius: var(--ker); padding: var(--t-3);
  font-size: var(--sz-1); color: var(--ink-soft);
}

/* ---- ANYAG-ŰRLAP --------------------------------------------------------- */
.anyagok { margin-top: var(--t-4); border-top: 1px solid var(--line); padding-top: var(--t-3); }
.anyagok > summary {
  cursor: pointer; font-size: var(--sz-2); font-weight: var(--v-felkover); color: var(--ink-soft);
  display: flex; align-items: center; gap: var(--t-2);
}
.invite {
  border: 1px solid var(--accent); border-radius: var(--ker); padding: var(--t-3) var(--t-4);
  margin: var(--t-4) 0; background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.invite-cim { font-weight: var(--v-kover); font-size: 14.5px; margin-bottom: 6px; }
.invite p { font-size: var(--sz-1); color: var(--ink-soft); margin: 0 0 var(--t-2); }
.invite-mail { display: flex; align-items: center; gap: var(--t-2); flex-wrap: wrap; margin-bottom: var(--t-3); }
.invite-mail code { font-size: var(--sz-2); background: var(--surface); border-radius: 7px; padding: 6px 10px; word-break: break-all; }
.invite-lista { margin: 0 0 var(--t-2); padding-left: 18px; font-size: var(--sz-1); color: var(--ink-soft); line-height: 1.6; }
.invite-lista li { margin-bottom: 5px; }
.invite .faint { margin: 0; }

/* ---- MEGHIÚSULT LEVONÁS -------------------------------------------------- */
.baj {
  border: 1px solid var(--warn-line); background: var(--warn-bg);
  border-radius: var(--ker); padding: var(--t-3) var(--t-4); margin: var(--t-3) 0;
}
.baj-fej { display: flex; gap: var(--t-3); align-items: flex-start; }
.baj-ikon {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: var(--v-kover); background: var(--warn); color: var(--card);
}
.baj-cim { font-weight: var(--v-felkover); font-size: var(--sz-2); }
.baj-mit { font-size: var(--sz-1); color: var(--ink-soft); margin-top: 2px; }
.baj-teendo { font-size: var(--sz-1); margin: var(--t-3) 0 0 34px; }
.baj-dl { margin: var(--t-3) 0 0 34px; }
.baj-dl .s { border-bottom-color: var(--warn-line); }
@media (max-width: 520px) { .baj-teendo, .baj-dl { margin-left: 0; } }

/* ---- IKER-FIGYELMEZTETÉS ------------------------------------------------- */
.figy {
  margin-top: var(--t-3); padding: var(--t-3) var(--t-4); border-radius: var(--ker);
  background: var(--warn-bg); color: var(--warn); font-size: var(--sz-1);
}
.figy a { color: inherit; }
.figy.halk { background: var(--surface); color: var(--ink-soft); }

/* ---- SZÁMLÁK ------------------------------------------------------------- */
.szamlak .szla-sor {
  display: flex; justify-content: space-between; align-items: center; gap: var(--t-3);
  padding: var(--t-3) 0; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.szamlak .szla-sor:last-child { border-bottom: none; }
.szla-szam { font-weight: var(--v-felkover); font-size: var(--sz-2); }
.szla-jobb { display: flex; align-items: center; gap: var(--t-3); flex-wrap: wrap; }
.szla-ar { font-weight: var(--v-felkover); }

/* ---- SZERZŐDÉS ----------------------------------------------------------- */
.szerz blockquote {
  margin: var(--t-2) 0 0; padding: var(--t-3) var(--t-4);
  background: var(--surface); border-radius: var(--ker);
  font-size: var(--sz-1); color: var(--ink-soft); line-height: 1.6;
}
.szerz-nyil { margin-top: var(--t-4); }
.szerz-reszlet, .csere { margin-top: var(--t-4); }
.szerz-reszlet > summary, .csere > summary {
  cursor: pointer; font-size: var(--sz-1); font-weight: var(--v-felkover); color: var(--ink-soft);
}

/* ---- ÉRTESÍTÉS-LISTA ----------------------------------------------------- */
.lev-lista { list-style: none; margin: 0; padding: 0; }
.lev-lista li {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--t-4);
  padding: var(--t-3) 0; border-bottom: 1px solid var(--line);
}
.lev-lista li:last-child { border-bottom: none; }
.lev-cim { font-weight: var(--v-felkover); font-size: var(--sz-2); }
.lev-mit { font-size: var(--sz-1); color: var(--ink-soft); margin-top: 2px; }
.lev-kotelezo { flex: none; font-size: var(--sz-0); color: var(--ink-mute); white-space: nowrap; padding-top: 3px; }
.kapcs { display: inline-flex; align-items: center; gap: 7px; flex: none; margin: 0; padding-top: 2px; font-size: var(--sz-1); color: var(--ink); }
.kapcs input { width: auto; }

/* ---- IDŐVONAL ------------------------------------------------------------ */
.idovonal { list-style: none; margin: 0; padding: 0; }
.iv { position: relative; padding: 0 0 var(--t-5) var(--t-5); }
.iv:last-child { padding-bottom: 0; }
.iv::before {
  content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 1px; background: var(--line);
}
.iv:last-child::before { content: none; }
.iv-jel {
  position: absolute; left: 0; top: 6px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--line);
}
.iv:first-child .iv-jel { border-color: var(--accent); }
.iv-mikor { font-size: var(--sz-0); color: var(--ink-soft); }
.iv-esemeny { margin-top: 2px; }
.iv-cim { font-size: var(--sz-2); font-weight: var(--v-kozep); }
.iv-alcim { display: block; font-size: var(--sz-0); color: var(--ink-mute); }

/* ---- MEGERŐSÍTŐ ABLAK ---------------------------------------------------- */
/* Nem a natív `confirm()`: abban csak EGY mondat fér el, itt viszont a
   szolgáltatás neve, a díja és a következő esedékesség is kiírandó. */
.mdlbg {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 18px; z-index: 9000;
}
.mdl {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--ker-nagy);
  padding: var(--t-5); max-width: 430px; width: 100%; box-shadow: var(--arnyek-nagy);
}
.mdl h3 { margin: 0 0 var(--t-2); font-size: var(--sz-3); font-weight: var(--v-felkover); }
.mdl p { margin: 0 0 var(--t-4); font-size: var(--sz-1); line-height: var(--sor-alap); color: var(--ink-soft); }
.mdl dl { margin: 0 0 var(--t-4); font-size: var(--sz-1); }
.mdl dl div { display: flex; justify-content: space-between; gap: var(--t-3); padding: 6px 0; border-bottom: 1px solid var(--line); }
.mdl dt { color: var(--ink-soft); }
.mdl dd { margin: 0; font-weight: var(--v-felkover); text-align: right; }
.mdl .mdlact { display: flex; gap: var(--t-2); justify-content: flex-end; flex-wrap: wrap; }

/* ---- BELÉPÉS ------------------------------------------------------------- */
.belep { max-width: 420px; margin: 8vh auto 0; }
.belep h1 { margin-bottom: var(--t-2); }
.belep .card { margin-top: var(--t-4); }
.belep-alul { display: flex; justify-content: space-between; gap: var(--t-3); flex-wrap: wrap; margin-top: var(--t-3); }

/* ---- CSONTVÁZ ------------------------------------------------------------ */
/* Szerkezetet mutat, nem tartalmat: számot még halványan sem, mert egy
   odaképzelt összeg rosszabb, mint a szürke sáv. */
.cs-sav { display: block; height: 12px; border-radius: 6px; background: var(--surface); margin: 8px 0; }
.cs-fej { margin-bottom: var(--t-4); }
.cs-fej .cs-sav:first-child { height: 26px; }
.cs-tdo { display: block; }
.csontvaz .kpi .k .cs-sav:first-child { height: 9px; }
.cs-fulek { display: flex; gap: var(--t-3); margin: var(--t-5) 0 var(--t-4); }
.cs-fulek .cs-sav { height: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .cs-sav { animation: cs-lelegzik 1.4s ease-in-out infinite; }
  @keyframes cs-lelegzik { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
}

/* ---- KIEMELÉS ------------------------------------------------------------ */
/* A fülváltás utáni ugrás célja: a szem találja meg, melyik kártyáról volt szó. */
.kiemel { box-shadow: 0 0 0 2px var(--accent); transition: box-shadow .4s var(--gorbe); }

/* ---- LÁBLÉC -------------------------------------------------------------- */
.foot { margin-top: auto; border-top: 1px solid var(--line); background: var(--card); }
.foot .in {
  max-width: 1120px; margin: 0 auto; padding: var(--t-4) clamp(14px, 4vw, 28px) var(--t-5);
  display: flex; flex-wrap: wrap; gap: 7px 18px; align-items: baseline;
}
.foot a { color: var(--ink-soft); font-size: var(--sz-1); text-decoration: none; border-bottom: 1px solid var(--line); }
.foot a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.foot .co { flex-basis: 100%; color: var(--ink-mute); font-size: var(--sz-0); }