/* Marjai költségvetés — felület
 *
 * Alaphelyzet: valaki a boltban vagy a piacon áll, egy kézzel fogja a telefont, és
 * négy másodperce van. Ebből következik minden: napfényben olvasható világos alap,
 * nagy tabuláris számok, a műveletek a hüvelykujj zónájában, semmi dísz.
 *
 * A zsebek jelzőszínei a forintbankjegyekből jönnek — 10 000-es kék, 20 000-es
 * szürke-lila, 5000-es zöld. Nem dekoráció: a szín végig ugyanazt a zsebet jelenti.
 *
 * Nincs webfont: a rendszerbetű azonnal ott van, offline is. A karaktert a méret,
 * a vastagság és a betűköz adja, nem egy letöltött fájl.
 */

:root {
  --alap:      #fbfaf7;
  --lap:       #ffffff;
  --tinta:     #15181d;
  --halvany:   #6b7078;
  --vonal:     #e6e2da;
  --vonal-eros: #d5cfc2;

  --joint:     #2c5f8a;
  --luxury:    #6b5b7b;
  --savings:   #286b5d;
  --personal:  #8a6a3f;   /* 2000-es barna-okker */
  --piros:     #a8442f;
  --zold:      #2f6d3f;

  --sugar:     .85rem;
  --tap:       3rem;          /* 48px — a legkisebb megérinthető méret */
}

@media (prefers-color-scheme: dark) {
  :root {
    --alap: #131519; --lap: #1c1f25; --tinta: #e9e7e1; --halvany: #9298a1;
    --vonal: #2b2f36; --vonal-eros: #3a3f48;
    --joint: #6fa3ce; --luxury: #ab98bd; --savings: #63b39c; --personal: #c9a86e;
    --piros: #e2836c; --zold: #7fbb8c;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--alap);
  color: var(--tinta);
  font: 1rem/1.5 ui-sans-serif, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
}

.lap { max-width: 30rem; margin: 0 auto; padding: .75rem 1rem 1.5rem; }

/* ------------------------------------------------------------------ fejléc */

.fejlec {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: .35rem 0 1rem;
}
.fejlec .datum { font-size: .8rem; color: var(--halvany); }
.fejlec .ki {
  font-size: .8rem; color: var(--halvany);
  background: none; border: 0; padding: .25rem; cursor: pointer;
  font-family: inherit;
}

/* --------------------------------------------------------------- zsebkártya */

.zseb {
  display: block; text-decoration: none; color: inherit;
  background: var(--lap); border: 1px solid var(--vonal);
  border-radius: var(--sugar); padding: .85rem 1rem .9rem;
  margin-bottom: .6rem;
}
.zseb .fej { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.zseb .nev {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 600; color: var(--halvany);
}
.zseb .ertek {
  font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.1;
}
.zseb[data-zseb="joint"]   .nev { color: var(--joint); }
.zseb[data-zseb="luxury"]  .nev { color: var(--luxury); }
.zseb[data-zseb="savings"] .nev { color: var(--savings); }

/* Hol van fizikailag a pénz — a zseb és a számla egymásra merőleges. */
.hol { display: flex; gap: 2px; margin-top: .6rem; height: 4px; }
.hol i { display: block; border-radius: 2px; background: var(--vonal-eros); }
.hol i[data-szamla="kp"]         { background: var(--joint); }
.hol i[data-szamla="revolut"]    { background: var(--luxury); }
.hol i[data-szamla="szepkartya"] { background: var(--savings); }
.hol-cimke {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: .4rem; font-size: .72rem; color: var(--halvany);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------- tartalék: hónapnyi működés ---
 * Ez a felület egyetlen hangsúlyos eleme. Nem százalékot mutat, hanem azt, hogy
 * hány hónapig bírnátok ki bevétel nélkül — ez az az egység, amiben gondolkodtok.
 * Egy szegmens = egy hónapnyi közös működés.
 */

.tartalek {
  background: var(--lap); border: 1px solid var(--vonal);
  border-radius: var(--sugar); padding: .9rem 1rem 1rem; margin: 1rem 0 .6rem;
}
.tartalek .cim {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 600; color: var(--savings); margin-bottom: .7rem;
}
.honapok { display: flex; gap: 4px; }
.honapok .ho {
  flex: 1; height: 2.25rem; border-radius: 4px;
  background: var(--vonal); position: relative; overflow: hidden;
}
.honapok .ho > i {
  /* KÜLÖN eltolások, nem "inset": ahol az inset rövid alak nem támogatott, ott a
     magasság 0 marad, és a kitöltés láthatatlan (üres szürke doboz). */
  position: absolute; top: 0; bottom: 0; left: 0; display: block;
  background: var(--savings);
}
.honapok .ho > span {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 600; color: var(--halvany);
  font-variant-numeric: tabular-nums;
}
.honapok .ho.tele > span { color: var(--lap); }
.tartalek .lab {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: .6rem; font-size: .8rem; color: var(--halvany);
  font-variant-numeric: tabular-nums;
}
.tartalek .lab b { color: var(--tinta); font-weight: 600; }

/* ------------------------------------------------------------------- sávok */

.sav {
  background: var(--lap); border: 1px solid var(--vonal);
  border-radius: var(--sugar); padding: .75rem 1rem;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: .6rem; font-size: .85rem;
}
.sav .cimke { color: var(--halvany); }
.sav .szam { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--halvany); font-weight: 600; margin: 1.6rem 0 .6rem;
}

/* ----------------------------------------------------------------- tételek */

.tetel {
  display: flex; align-items: baseline; gap: .75rem;
  padding: .6rem 0; border-bottom: 1px solid var(--vonal);
}
.tetel .fo { flex: 1; min-width: 0; }
.tetel .cim { font-size: .92rem; }
.tetel .alsor {
  font-size: .74rem; color: var(--halvany);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tetel .osszeg {
  font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap;
}
.tetel .osszeg[data-irany="KI"] { color: var(--piros); }
.tetel .osszeg[data-irany="BE"] { color: var(--zold); }

.vissza-gomb {
  background: none; border: 0; color: var(--halvany);
  font-family: inherit; font-size: .78rem; cursor: pointer;
  min-height: 2.75rem; padding: 0 .35rem;
}

/* ------------------------------------------------------- alsó műveletsáv --
 * Három közvetlen gomb, nem egy menüt nyitó lebegő gomb: a rögzítés így egy
 * koppintással indul, nem kettővel.
 */

/* Grid-arány, nem flex: a flex-item méretezés egyes böngészőkben nem osztja szét
   a teret (mért tény), a grid-fr viszont megbízhatóan. Kiadás/Befizetés a hangsúlyos
   (2-2 rész), az átvezetés ritkább, ezért kisebb (1 rész) → 40-40-20. */
.muveletek {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: 2fr 2fr 1fr; gap: .5rem;
  padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom));
  background: var(--alap);
  border-top: 1px solid var(--vonal);
}
.muveletek a {
  min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  text-align: center; border-radius: .7rem; text-decoration: none;
  font-size: .9rem; font-weight: 600; line-height: 1.15;
  border: 1px solid var(--vonal-eros); color: var(--tinta); background: var(--lap);
}
.muvelet-jel { font-size: 1.3rem; font-weight: 700; line-height: 1; }
/* Kiadás piros, befizetés zöld — a színek végig ugyanazt jelentik (KI/BE).
   A szelektor a.muvelet-X, hogy felülírja a .muveletek a alap-hátterét
   (különben a nagyobb specificitású .muveletek a nyer, és a gomb fehér marad). */
.muveletek a.muvelet-kiadas    { background: var(--piros); color: #fff; border-color: var(--piros); }
.muveletek a.muvelet-befizetes { background: var(--zold);  color: #fff; border-color: var(--zold); }
.muveletek a.muvelet-atvezetes { font-size: .8rem; }

/* ---------------------------------------------------------- rögzítő képernyő */

.felso {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem 0 .5rem; min-height: var(--tap);
}
.felso a, .felso button {
  min-width: var(--tap); min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--tinta);
  font-size: 1.35rem; text-decoration: none; cursor: pointer; font-family: inherit;
}
.felso h1 { font-size: 1rem; font-weight: 600; margin: 0; }

.kijelzo { text-align: center; padding: 1.5rem 0 .35rem; }
.kijelzo .osszeg {
  font-size: 3rem; font-weight: 700; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.kijelzo .osszeg.ures { color: var(--vonal-eros); }

/* A zseb/számla egyetlen, megérinthető sorban — általában nem kell hozzányúlni. */
.beallitas-sor {
  display: block; width: 100%; min-height: var(--tap);
  background: none; border: 0; color: var(--halvany);
  font: inherit; font-size: .85rem; cursor: pointer;
  padding: .35rem; text-align: center;
}
.beallitas-sor u { text-decoration-color: var(--vonal-eros); text-underline-offset: 3px; }

.valaszto { display: none; margin: .25rem 0 .5rem; }
.valaszto.nyitva { display: block; }
.valaszto fieldset { border: 0; margin: 0 0 .5rem; padding: 0; }
.valaszto legend {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--halvany); font-weight: 600; padding: 0 0 .35rem;
}

.chipek { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: block; min-height: var(--tap); padding: .7rem .9rem;
  border: 1px solid var(--vonal-eros); border-radius: .7rem;
  background: var(--lap); font-size: .9rem; cursor: pointer;
}
.chip input:checked + span {
  background: var(--tinta); color: var(--alap); border-color: var(--tinta); font-weight: 600;
}
.chip input:focus-visible + span { outline: 2px solid var(--joint); outline-offset: 2px; }

/* numpad */
.numpad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  margin: 1rem 0 .75rem;
}
.numpad button {
  min-height: 3.5rem; font-size: 1.5rem; font-weight: 500;
  font-variant-numeric: tabular-nums; font-family: inherit;
  background: var(--lap); color: var(--tinta);
  border: 1px solid var(--vonal); border-radius: .7rem; cursor: pointer;
}
.numpad button:active { background: var(--vonal); }
.numpad button.mellek { font-size: 1.05rem; color: var(--halvany); }

.gomb {
  display: block; width: 100%; min-height: 3.25rem;
  background: var(--tinta); color: var(--alap);
  border: 0; border-radius: .7rem;
  font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.gomb[disabled] { opacity: .4; cursor: not-allowed; }
.gomb.masodlagos {
  background: var(--lap); color: var(--tinta); border: 1px solid var(--vonal-eros);
}

.mezo { margin: .75rem 0; }
.mezo label {
  display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--halvany); font-weight: 600; margin-bottom: .3rem;
}
.mezo input, .mezo select {
  width: 100%; min-height: var(--tap); padding: .6rem .75rem;
  background: var(--lap); color: var(--tinta);
  border: 1px solid var(--vonal-eros); border-radius: .6rem;
  font: inherit; font-size: 1rem;
}
.parban { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

/* ------------------------------------------------------------- visszajelzés */

.uzenet {
  padding: .7rem .9rem; border-radius: .6rem; margin-bottom: .75rem;
  font-size: .88rem; border: 1px solid;
}
.uzenet.siker { border-color: var(--zold); color: var(--zold); }
.uzenet.hiba  { border-color: var(--piros); color: var(--piros); }

.ures-allapot {
  text-align: center; color: var(--halvany); font-size: .88rem;
  padding: 2rem 1rem; border: 1px dashed var(--vonal-eros); border-radius: var(--sugar);
}

.offline {
  display: none; background: var(--piros); color: #fff;
  text-align: center; font-size: .8rem; padding: .35rem;
}
body.nincs-halo .offline { display: block; }

/* --------------------------------------------------------------- belépés */

.belepteto { max-width: 22rem; margin: 0 auto; padding: 4rem 1.5rem; text-align: center; }
.belepteto h1 { font-size: 1.35rem; margin: 0 0 .4rem; letter-spacing: -.02em; }
.belepteto p { color: var(--halvany); font-size: .9rem; margin: 0 0 2rem; }
.belepteto .gomb { margin-bottom: 1rem; }
.belepteto .apro { font-size: .78rem; color: var(--halvany); }

:focus-visible { outline: 2px solid var(--joint); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------- Revolut-kivonat import --
 * Havi feladat, jellemzően nagyobb képernyőn. A sorok tömörek: a döntés a pipa,
 * a kategória csak akkor kell, ha a javaslat nem stimmel.
 */

.import-sor {
  border: 1px solid var(--vonal); border-radius: .6rem;
  padding: .6rem .75rem; margin-bottom: .4rem; background: var(--lap);
}
.import-sor.gyanus { border-color: var(--piros); }
.import-pipa {
  display: flex; align-items: baseline; gap: .6rem; cursor: pointer;
  min-height: 2.5rem;
}
.import-pipa input { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .2rem; }
.import-fo { flex: 1; min-width: 0; }
.import-fo b { font-weight: 500; font-size: .92rem; }
.import-fo .alsor {
  display: block; font-size: .74rem; color: var(--halvany);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.import-mezok { display: flex; gap: .4rem; margin-top: .4rem; }
.import-mezok select {
  flex: 1; min-width: 0; min-height: 2.5rem; padding: .3rem .5rem;
  background: var(--alap); color: var(--tinta);
  border: 1px solid var(--vonal); border-radius: .45rem;
  font: inherit; font-size: .82rem;
}
.import-mezok select.nincs-javaslat { border-color: var(--piros); }

/* --------------------------------------------------------- első beállítás -- */

.lepesek { padding-left: 1.3rem; margin: 0 0 1.75rem; font-size: .92rem; }
.lepesek li { margin-bottom: 1rem; }
.lepesek small { display: block; color: var(--halvany); font-size: .78rem; margin-top: .3rem; }
.masolando {
  display: block; margin: .5rem 0 .2rem; padding: .6rem .7rem;
  background: var(--lap); border: 1px solid var(--vonal-eros); border-radius: .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem;
  word-break: break-all; user-select: all;
}
.mezo small { display: block; color: var(--halvany); font-size: .78rem; margin-top: .3rem; }

/* --------------------------------------------- ragadós összeg-kijelző -------
 * A kijelző a lap tetejéhez tapad: akárhol jársz (kategória, megjegyzés), az
 * összeg a képernyőn marad. Korábban a chipek álltak a kijelző és a numpad
 * között, ezért gépelés közben nem látszott, mit ütöttél be.
 */

.kijelzo.ragados {
  position: sticky; top: 0; z-index: 15;
  background: var(--alap);
  padding: .6rem 0 .35rem;
  border-bottom: 1px solid var(--vonal);
  margin-bottom: .75rem;
}
.kijelzo.ragados .beallitas-sor { min-height: 2.25rem; padding: .1rem; }

.kategoria-blokk { border: 0; margin: 1.1rem 0 0; padding: 0; }
.kategoria-blokk legend {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--halvany); font-weight: 600; padding: 0 0 .5rem;
}

/* ------------------------------------------------------------- elszámolás -- */

.ho-valto {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin: .25rem 0 1.25rem;
  background: var(--lap); border: 1px solid var(--vonal);
  border-radius: var(--sugar); padding: .35rem .5rem;
}
.ho-valto span { font-weight: 600; font-size: .95rem; }
.ho-valto a {
  min-width: var(--tap); min-height: var(--tap);
  display: grid; place-items: center;
  text-decoration: none; color: var(--tinta); font-size: 1.3rem;
}

.teendo-lista { border-top: 1px solid var(--vonal); }
.teendo {
  display: flex; align-items: baseline; gap: .75rem;
  padding: .7rem 0; border-bottom: 1px solid var(--vonal);
}
.teendo .fo { flex: 1; min-width: 0; }
.teendo .cim { font-size: .95rem; font-weight: 500; }
.teendo .alsor { display: block; font-size: .74rem; color: var(--halvany); }
.teendo .osszeg {
  font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap;
  font-size: 1.05rem;
}
.teendo.kiemelt {
  border: 1px solid var(--joint); border-radius: .6rem;
  padding: .7rem .85rem; margin-top: .75rem;
}

.elszamolas-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.elszamolas-tabla th {
  text-align: right; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--halvany); font-weight: 600;
  padding: 0 0 .35rem .55rem; border-bottom: 1px solid var(--vonal);
}
.elszamolas-tabla th:first-child { text-align: left; }
.elszamolas-tabla td { padding: .5rem 0 .5rem .55rem; border-bottom: 1px solid var(--vonal); }
.elszamolas-tabla td:first-child, .elszamolas-tabla th:first-child { padding-left: 0; }
.elszamolas-tabla td.szam {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.elszamolas-tabla td.halvany { color: var(--halvany); }
.elszamolas-tabla td.tartozas { color: var(--piros); font-weight: 600; }
.elszamolas-tabla td.rendben { color: var(--zold); font-weight: 600; }
.elszamolas-tabla .alsor {
  display: block; font-size: .72rem; color: var(--halvany);
}

.fix-sor {
  font-size: .82rem; color: var(--halvany); margin: .7rem 0 0;
  padding: .7rem .85rem; background: var(--lap);
  border: 1px solid var(--vonal); border-radius: .6rem;
}
.fix-sor b { color: var(--tinta); }
.kartya-blokk {
  background: var(--lap); border: 1px solid var(--vonal);
  border-radius: var(--sugar); padding: .9rem 1rem;
}
.kartya-blokk p { margin: 0 0 .5rem; font-size: .92rem; }
.kartya-blokk p:last-child { margin-bottom: 0; }
.halvany { color: var(--halvany); }

/* ------------------------------------------------------- bevételi források -- */

.forras {
  background: var(--lap); border: 1px solid var(--vonal);
  border-radius: var(--sugar); padding: .75rem .85rem; margin-bottom: .5rem;
}
.forras.rossz { border-color: var(--piros); }
.forras-fej {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: .5rem;
}
.forras-fej .nev { font-weight: 600; font-size: .95rem; }
.forras-fej .osszesen {
  font-size: .8rem; font-variant-numeric: tabular-nums;
  color: var(--zold); font-weight: 600;
}
.forras.rossz .osszesen { color: var(--piros); }
.aranyok { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.aranyok label { display: block; }
.aranyok span {
  display: block; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--halvany); font-weight: 600;
  margin-bottom: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aranyok input {
  width: 100%; min-height: var(--tap); padding: .4rem .3rem;
  background: var(--alap); color: var(--tinta);
  border: 1px solid var(--vonal-eros); border-radius: .45rem;
  font: inherit; font-size: 1rem; text-align: center;
  font-variant-numeric: tabular-nums;
}
.uj-forras { background: var(--lap); border: 1px solid var(--vonal);
             border-radius: var(--sugar); padding: .85rem 1rem; }

/* ------------------------------------------------------------ havi bevétel -- */

.bevetel-sor {
  background: var(--lap); border: 1px solid var(--vonal);
  border-radius: var(--sugar); padding: .7rem .85rem; margin-bottom: .5rem;
}
.bevetel-sor.uj { border-style: dashed; }
.bevetel-fej { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.bevetel-fej select {
  flex: 1; min-width: 0; min-height: 2.6rem; padding: .35rem .5rem;
  background: var(--alap); color: var(--tinta);
  border: 1px solid var(--vonal); border-radius: .45rem;
  font: inherit; font-size: .88rem;
}
.bevetel-fej select.csatorna-valaszto { flex: 0 0 8rem; }
.bevetel-ertek { display: flex; align-items: center; gap: .5rem; }
.bevetel-ertek input {
  flex: 1; min-width: 0; min-height: var(--tap); padding: .5rem .7rem;
  background: var(--alap); color: var(--tinta);
  border: 1px solid var(--vonal-eros); border-radius: .5rem;
  font: inherit; font-size: 1.15rem; font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums;
}
.bevetel-ertek .penznem { font-size: .9rem; color: var(--halvany); }
.bevetel-ertek .csatorna {
  font-size: .72rem; color: var(--halvany); text-transform: uppercase;
  letter-spacing: .06em; min-width: 5.5rem; text-align: right;
}

/* A törlés-jelölő: koppintásra áthúzza a sort, mentéskor tűnik el. */
.torol-jel { position: relative; flex: 0 0 auto; cursor: pointer; }
.torol-jel input { position: absolute; opacity: 0; width: 0; height: 0; }
.torol-jel > span[aria-hidden] {
  display: grid; place-items: center;
  width: var(--tap); height: var(--tap);
  border: 1px solid var(--vonal-eros); border-radius: .45rem;
  font-size: 1.15rem; color: var(--halvany);
}
.torol-jel input:checked + span { background: var(--piros); color: #fff; border-color: var(--piros); }
.torol-jel input:focus-visible + span { outline: 2px solid var(--joint); outline-offset: 2px; }
.bevetel-sor:has(.torol-jel input:checked) { opacity: .5; }
.bevetel-sor:has(.torol-jel input:checked) .bevetel-ertek input { text-decoration: line-through; }
.csak-olvasonak { position: absolute; left: -9999px; }

.lezar-gomb {
  background: none; border: 0; color: var(--halvany);
  font: inherit; font-size: .76rem; cursor: pointer;
  min-height: 2.5rem; padding: 0 .4rem; text-decoration: underline;
  text-decoration-color: var(--vonal-eros);
}
.forras.lezart { opacity: .65; }
.forras.lezart .forras-fej { margin-bottom: 0; }

/* ============================================================ zsebszínek ===
 * A négy zseb színe a forintbankjegyekből jön (10 000 kék, 20 000 szürkelila,
 * 5000 zöld, 2000 barna-okker). Nem dísz: végig ugyanaz a szín ugyanazt a
 * zsebet jelenti — a kártyán, az arány-sávon és az elszámolásban is.
 */

[data-zseb="joint"]    { --zseb-szin: var(--joint); }
[data-zseb="luxury"]   { --zseb-szin: var(--luxury); }
[data-zseb="savings"]  { --zseb-szin: var(--savings); }
[data-zseb="personal"] { --zseb-szin: var(--personal); }

/* ------------------------------------------------- arány-sáv (szélességarányos)
 * A sáv szélessége maga a szám: ha 50% megy a Jointba, a sáv fele kék. Így
 * ránézésre látszik a felosztás, nem kell négy százalékot összeolvasni.
 */

/* A gomb NEM lehet flex-konténer: a WebKit a gomb tartalmát saját belső dobozba
   csomagolja, ezért a flex-elrendezés nem érvényesül, és a szeletek eltűnnek.
   A gomb csak burok; a sávot egy sima span viszi. */
.arany-gomb {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  margin: .5rem 0 0; cursor: pointer; font: inherit; text-decoration: none;
}
/* GRADIENS sáv: a felosztás egyetlen elem háttere (linear-gradient), a stopok a
   kumulatív százalékok. Nem flex-item — így immunis arra, hogy egyes böngészőkben
   a flex-item méretezés nem osztja szét a teret (mért tény). A százalékok fölé
   abszolút pozícióval kerülnek, a saját szeletük közepére. */
.arany-sav {
  position: relative; display: block; height: 2rem; width: 100%;
  border-radius: .35rem; overflow: hidden; background: var(--vonal);
}
.arany-szam {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  color: #fff; font-size: .72rem; font-weight: 700;
  font-variant-numeric: tabular-nums; pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.arany-gomb { text-decoration: none; }
.arany-gomb:focus-visible { outline: 2px solid var(--joint); outline-offset: 2px; }

.arany-cimkek {
  display: flex; flex-wrap: wrap; gap: .1rem .9rem;
  font-size: .72rem; color: var(--halvany);
}
.arany-cimkek b { color: var(--halvany); font-weight: 600; }
.arany-cimkek span[data-zseb="joint"]    b { color: var(--joint); }
.arany-cimkek span[data-zseb="luxury"]   b { color: var(--luxury); }
.arany-cimkek span[data-zseb="savings"]  b { color: var(--savings); }
.arany-cimkek span[data-zseb="personal"] b { color: var(--personal); }

/* ---------------------------------------------------------- forrás-kártya -- */

.forras-kartya {
  background: var(--lap); border: 1px solid var(--vonal);
  border-radius: var(--sugar); padding: .55rem .7rem .6rem; margin-bottom: .4rem;
}
.forras-kartya > header {
  display: flex; align-items: baseline; gap: .6rem;
}
.forras-kartya .nev {
  flex: 1; min-width: 0;
  font-size: .98rem; font-weight: 600; letter-spacing: -.01em;
}
.forras-kartya .osszeg {
  font-size: 1.05rem; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
/* A fejléc ×-e: csak akkor jelenik meg, ha a forrásnak MÉG NINCS tétele ebben a
   hónapban — ilyenkor nincs mit "kukázni" (nincs sor), csak a teljes forrást
   lehet lezárni/törölni. Ha van tétel, a sor saját kukája (.torol-jel) intézi. */
.lezar-x {
  flex: none; background: none; border: 0; padding: 0;
  width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
  color: var(--halvany); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.lezar-x:hover, .lezar-x:focus-visible { color: var(--piros); }
.forras-kartya.lezart { opacity: .6; }
.forras-kartya.lezart .nev::after {
  content: " lezárt"; font-size: .68rem; font-weight: 600; color: var(--halvany);
  text-transform: uppercase; letter-spacing: .08em;
}

/* tételsorok a forráson belül */
.tetelsor { display: flex; align-items: center; gap: .35rem; margin-top: .35rem; }
.tetelsor input.penz-mezo {
  flex: 1; min-width: 0; min-height: 2.4rem; padding: .3rem .55rem;
  background: var(--alap); color: var(--tinta);
  border: 1px solid var(--vonal); border-radius: .45rem;
  font: inherit; font-size: 1rem; text-align: right;
  font-variant-numeric: tabular-nums;
}
.tetelsor select {
  flex: 0 0 5.8rem; min-height: 2.4rem; padding: .25rem .35rem;
  background: var(--alap); color: var(--tinta);
  border: 1px solid var(--vonal); border-radius: .45rem;
  font: inherit; font-size: .8rem;
}
.tetelsor .torol-jel > span[aria-hidden] {
  width: 2.4rem; height: 2.4rem; font-size: 1rem;
}
.tetelsor:has(.torol-jel input:checked) { opacity: .45; }
.tetelsor:has(.torol-jel input:checked) input.penz-mezo { text-decoration: line-through; }

.arany-nyito {
  background: none; border: 0; padding: .2rem; cursor: pointer;
  font: inherit; font-size: .72rem; color: var(--halvany);
  text-decoration: underline; text-decoration-color: var(--vonal-eros);
}
.arany-szerkeszto { display: none; margin-top: .5rem; }
.arany-szerkeszto.nyitva { display: block; }
.arany-szerkeszto .aranyok { margin-top: .3rem; }
.forras-kartya.rossz { border-color: var(--piros); }
.forras-kartya.rossz .arany-osszeg { color: var(--piros); font-weight: 700; }

.szemely-fej {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin: 1.1rem 0 .45rem;
}
.szemely-fej h2 { margin: 0; }
.szemely-fej .szum {
  font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

.kapcsolo {
  display: flex; align-items: flex-start; gap: .55rem;
  margin-top: .6rem; font-size: .8rem; color: var(--halvany); cursor: pointer;
  min-height: 2.5rem;
}
.kapcsolo input { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .15rem; }
.kapcsolo input:checked ~ span { color: var(--tinta); }

/* ------------------------------------------------------------------ menü --
 * A havi rutinok listája. Nem nyers linkek: ikonos kártyasorok, a leggyakoribb
 * (elszámolás) elöl. Az ikon színe a hozzá tartozó zsebé, ahol van értelme.
 */

.menu { display: flex; flex-direction: column; gap: .4rem; }
.menu a {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .85rem; text-decoration: none; color: inherit;
  background: var(--lap); border: 1px solid var(--vonal);
  border-radius: var(--sugar);
}
.menu a:active { background: var(--alap); }
.menu-ikon {
  flex: 0 0 2.4rem; height: 2.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: .55rem; font-size: 1.2rem; line-height: 1;
  background: color-mix(in srgb, var(--zseb-szin, var(--halvany)) 15%, var(--lap));
  color: var(--zseb-szin, var(--halvany));
}
.menu-fo { display: flex; flex-direction: column; min-width: 0; }
.menu-fo b { font-size: .95rem; font-weight: 600; }
.menu-fo small { font-size: .76rem; color: var(--halvany); }
.menu a::after {
  content: "→"; margin-left: auto; color: var(--vonal-eros);
  flex: 0 0 auto; font-size: 1rem;
}

.verzio-belyeg {
  text-align: center; font-size: .68rem; color: var(--halvany);
  margin: 2rem 0 5.5rem; opacity: .6; font-variant-numeric: tabular-nums;
}


/* ============================================================ elszámolás ===
 * Színkódolt levezetés személyenként. A zseb-pött végig ugyanazt a színt viszi,
 * mint a bevételi sáv. Az önellenőrző blokk zölden pipál, ha a három rész összege
 * kiadja a bevételt — ezzel ellenőrizhető a projekt.
 */

.zseb-pott {
  display: inline-block; width: .65rem; height: .65rem; border-radius: 2px;
  background: var(--halvany); vertical-align: baseline;
  margin-right: .1rem;
}
.zseb-pott[data-zseb="joint"]    { background: var(--joint); }
.zseb-pott[data-zseb="luxury"]   { background: var(--luxury); }
.zseb-pott[data-zseb="savings"]  { background: var(--savings); }
.zseb-pott[data-zseb="personal"] { background: var(--personal); }

/* teendők */
.teendo-szemely { margin-bottom: .9rem; }
.teendo-nev {
  font-size: .95rem; font-weight: 600; margin-bottom: .25rem;
}
.teendo-sor {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--vonal);
}
.teendo-zseb { font-size: .9rem; }
.teendo-ossz {
  font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap;
}

/* személyenkénti levezető kártya */
.elsz-kartya {
  background: var(--lap); border: 1px solid var(--vonal);
  border-radius: var(--sugar); padding: .9rem 1rem 1rem;
}
.elsz-bevetel {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: .6rem; border-bottom: 2px solid var(--vonal);
}
.elsz-bevetel span { color: var(--halvany); font-size: .9rem; }
.elsz-bevetel b {
  font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.elsz-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: .5rem; }
.elsz-tabla th {
  text-align: right; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--halvany); font-weight: 600;
  padding: 0 0 .35rem;
}
.elsz-tabla th:first-child { text-align: left; }
.elsz-tabla td { padding: .45rem 0; border-bottom: 1px solid var(--vonal); }
.elsz-tabla td.szam {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.elsz-tabla td.halvany { color: var(--halvany); }
.elsz-tabla td.tartozas { color: var(--piros); font-weight: 600; }
.elsz-tabla td.rendben { color: var(--zold); font-weight: 700; }
.elsz-tabla .alsor { display: block; font-size: .72rem; color: var(--halvany); }
.elsz-ossz-sor td { font-weight: 700; border-bottom: 0; padding-top: .55rem; }

/* fix + személyes kifejtő blokkok */
.elsz-blokk { margin-top: .85rem; padding-top: .7rem; border-top: 1px solid var(--vonal); }
.elsz-blokk-fej {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .95rem;
}
.elsz-blokk-fej b { font-variant-numeric: tabular-nums; font-weight: 700; }
.elsz-magyaraz {
  font-size: .8rem; color: var(--halvany); margin: .3rem 0 0; line-height: 1.5;
}
.elsz-magyaraz b { color: var(--tinta); font-weight: 600; }

/* önellenőrző blokk */
.elsz-ellenor {
  margin-top: 1rem; padding: .7rem .85rem; border-radius: .6rem;
  border: 1px solid var(--vonal);
}
.elsz-ellenor.ok   { border-color: var(--zold); background: color-mix(in srgb, var(--zold) 7%, transparent); }
.elsz-ellenor.hiba { border-color: var(--piros); background: color-mix(in srgb, var(--piros) 8%, transparent); }
.elsz-ellenor-sor {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .84rem; padding: .12rem 0; color: var(--halvany);
}
.elsz-ellenor-sor .szam { font-variant-numeric: tabular-nums; color: var(--tinta); }
.elsz-ellenor-sor.osszeg {
  margin-top: .35rem; padding-top: .45rem; border-top: 1px solid var(--vonal);
  font-weight: 700; font-size: .9rem;
}
.elsz-ellenor.ok   .osszeg span { color: var(--zold); }
.elsz-ellenor.hiba .osszeg span { color: var(--piros); }

.elsz-vegosszeg {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-top: 1.5rem; padding: .9rem 1rem;
  background: var(--lap); border: 2px solid var(--vonal-eros);
  border-radius: var(--sugar);
}
.elsz-vegosszeg span { color: var(--halvany); font-size: .9rem; }
.elsz-vegosszeg b {
  font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Az összesített kártya kiemelkedik: erősebb keret, halvány kiemelés. */
.elsz-kartya.osszesitett {
  border: 2px solid var(--tinta);
  background: color-mix(in srgb, var(--tinta) 3%, var(--lap));
}

/* ============================================================ fő menü ======
 * Fix felső sáv, minden bejelentkezett lapon. Grid (nem flex): a flex-item
 * méretezés egyes böngészőkben nem osztja szét a teret; a grid-fr igen.
 */
.fomenu {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  padding: .3rem .5rem calc(.3rem + env(safe-area-inset-top));
  background: var(--alap); border-bottom: 1px solid var(--vonal);
}
.fomenu a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-height: 2.6rem; padding: .25rem;
  text-decoration: none; color: var(--halvany); border-radius: .5rem;
  font-size: .68rem; font-weight: 600; line-height: 1.1; text-align: center;
}
.fomenu a[aria-current] { color: var(--tinta); background: var(--lap); }
.fomenu-ikon { font-size: 1rem; line-height: 1; }

/* A fix alsó műveletsáv miatt a lap alján legyen hely (a body-n már van
   padding-bottom); a fix felső menü a sticky miatt nem kell extra hely. */

/* ------------------------------------------------------- fix költség sor ---
 * Kompakt: név · összeg · Ft · kuka egy sorban. Nincs kapcsoló (minden fix
 * költség a közöset csökkenti). Grid, hogy az összeg-mező igazodjon.
 */
.fix-sor {
  display: grid; grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: .5rem;
  padding: .5rem .2rem; border-bottom: 1px solid var(--vonal);
}
.fix-sor .fix-nev { font-size: .95rem; font-weight: 500; min-width: 0; }
.fix-sor .penz-mezo {
  width: 7rem; min-height: 2.6rem; padding: .4rem .6rem; text-align: right;
  background: var(--alap); color: var(--tinta);
  border: 1px solid var(--vonal-eros); border-radius: .5rem;
  font: inherit; font-size: 1rem; font-variant-numeric: tabular-nums;
}
.fix-sor .penznem { font-size: .82rem; color: var(--halvany); }
.fix-sor .torol-jel > span[aria-hidden] { width: 2.4rem; height: 2.4rem; font-size: 1rem; }
.fix-megj { font-size: .72rem; color: var(--halvany); margin: -.1rem 0 .5rem .2rem; }

.fix-uj { margin-top: .3rem; }
.fix-uj-fej { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin-bottom: .5rem; }
.fix-uj-fej input, .fix-uj-fej select {
  min-height: 2.6rem; padding: .4rem .6rem;
  background: var(--alap); color: var(--tinta);
  border: 1px solid var(--vonal-eros); border-radius: .5rem; font: inherit; font-size: .9rem;
}
.lap-cim { font-size: 1.15rem; margin: .5rem 0 1rem; }

.elorejelzes {
  margin: .55rem 0 0; font-size: .8rem; color: var(--halvany);
  padding-top: .55rem; border-top: 1px solid var(--vonal);
}
.elorejelzes b { color: var(--tinta); font-weight: 600; }
.elorejelzes.gyenge { color: var(--piros); }
.elorejelzes.gyenge b { color: var(--piros); }