/* ==========================================================================
   Fabton Hub – design rendszer

   A színek 12 lépcsős skálákra épülnek, a Radix Colors módszertana szerint:
     1–2   lap háttere
     3–5   komponens háttere (alap / hover / lenyomva)
     6–8   keretek (halvány / normál / erős)
     9–10  telt színfelület (márka, hover)
     11    halvány szöveg
     12    erős szöveg
   Így a világos és a sötét mód ugyanazokkal a szerepekkel dolgozik,
   és minden szöveg kontrasztos marad.

   MÁRKASZÍNEK – SZEREP SZERINT, NEM ÍZLÉS SZERINT
     Sárga  #FFCB05   (--y*, --marka)  telt felület: fő gomb, aktív menü,
                      kiemelés. Szövegszínnek alkalmatlan (fehér háttéren
                      1,6:1), ezért rajta mindig sötét felirat áll.
     Lila   #4B1C7D–#6C32A3 (--a*)     minden, ami SZÖVEG színnel: link,
                      hangsúly, fókusz. Ez a régi kék kiemelés helyére lépett,
                      így a meglévő felületek magától átszíneződtek.
     Türkiz #00B5B5–#20D4D4 (--t*)     információ és másodlagos szín
                      (info-üzenet, jelvények, diagramok). Szövegnek a
                      sötétített 11-es lépcső, mert a telt türkiz nem olvasható.
     Zöld / narancs / piros (--j*, --f*, --p*) maradnak az ÁLLAPOTOKNAK
                      (jelen, figyelmeztetés, lejárt), hogy a „fizetve" és a
                      „lejárt" jelzés ne keveredjen a márkaszínekkel.
   ========================================================================== */

/* --- Betű: Plus Jakarta Sans (saját tárhelyről, SIL OFL) ----------------- */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2-variations'),
       url('../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations'),
       url('../fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Skálák: világos ----------------------------------------------------- */

:root {
  /* Semleges: egy leheletnyi lila tónussal, hogy a márkaszínek mellett ne
     hasson hidegnek. A kártya tiszta fehér, a lap alatta halványszürke. */
  --n1:  #ffffff;  --n2:  #f6f6f9;  --n3:  #efeff4;  --n4:  #e8e8ef;
  --n5:  #e2e1ea;  --n6:  #d9d8e3;  --n7:  #cbcad7;  --n8:  #b3b1c3;
  --n9:  #8a889c;  --n10: #7b798e;  --n11: #5e5c71;  --n12: #17151f;

  /* Kiemelés: Fabton lila */
  --a1:  #fdfcfe;  --a2:  #faf7fd;  --a3:  #f3ecfa;  --a4:  #ebe0f6;
  --a5:  #e0d0f0;  --a6:  #d1bbe7;  --a7:  #bd9fdb;  --a8:  #a27bcb;
  --a9:  #6c32a3;  --a10: #5e2893;  --a11: #5b2a8e;  --a12: #2e1248;

  /* Márka: Fabton sárga */
  --y1:  #fffdf5;  --y2:  #fffae6;  --y3:  #fff4c7;  --y4:  #ffeda3;
  --y5:  #ffe57a;  --y6:  #ffdc52;  --y7:  #f5cf3b;  --y8:  #e0b800;
  --y9:  #ffcb05;  --y10: #f5c000;  --y11: #7a5d00;  --y12: #3d2f00;

  /* Másodlagos: Fabton türkiz */
  --t3:  #e0f7f7;  --t4:  #c9f0f0;  --t6:  #a3e3e3;  --t9:  #00b5b5;
  --t10: #20d4d4;  --t11: #006f70;  --t12: #073c3c;

  --j3:  #e7f7ed;  --j6:  #b7e4c8;  --j9:  #2a9d63;  --j11: #16713f;
  --f3:  #fdf3dc;  --f6:  #f2ddaa;  --f8:  #e8b73e;  --f9:  #e4a012;  --f11: #92580a;
  --p2:  #fef6f6;  --p3:  #fdecec;  --p6:  #f6c8c6;  --p9:  #dc3d43;  --p11: #b02a25;

  --marka:         var(--y9);
  --marka-hover:   var(--y10);
  --marka-szoveg:  #17130a;

  --arnyek-1: 0 1px 2px rgba(23, 21, 31, .04);
  --arnyek-2: 0 1px 2px rgba(23, 21, 31, .04), 0 6px 16px -6px rgba(23, 21, 31, .10);
  --arnyek-3: 0 8px 16px -6px rgba(23, 21, 31, .10), 0 28px 56px -16px rgba(23, 21, 31, .24);
  --arnyek-kartya: 0 1px 2px rgba(23, 21, 31, .03), 0 10px 28px -20px rgba(23, 21, 31, .22);
  --arnyek-marka: 0 1px 0 rgba(23, 19, 10, .06), 0 8px 18px -10px rgba(224, 170, 0, .75);
  --arnyek-be: inset 0 1px 0 rgba(255, 255, 255, .6);

  --r-kicsi:  8px;
  --r-kozep:  12px;
  --r-nagy:   18px;
  --r-teljes: 999px;

  --atmenet: 160ms cubic-bezier(.4, 0, .2, 1);
  --fokusz: 0 0 0 3px color-mix(in srgb, var(--a9) 28%, transparent);

  accent-color: var(--a9);
  color-scheme: light;
}

/* --- Skálák: sötét ------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --n1:  #17161d;  --n2:  #0f0e13;  --n3:  #1e1d25;  --n4:  #25232d;
    --n5:  #2b2934;  --n6:  #33313d;  --n7:  #3e3c49;  --n8:  #504d5d;
    --n9:  #716e81;  --n10: #807d90;  --n11: #aba8bb;  --n12: #efeef4;

    --a1:  #141019;  --a2:  #1a1422;  --a3:  #261a36;  --a4:  #301f47;
    --a5:  #3a2555;  --a6:  #452d65;  --a7:  #55387b;  --a8:  #6d479c;
    --a9:  #7a3fb8;  --a10: #8a52c7;  --a11: #cba9f2;  --a12: #efe3fc;

    --y1:  #16130a;  --y2:  #1d180a;  --y3:  #2c2308;  --y4:  #3a2d06;
    --y5:  #473705;  --y6:  #574407;  --y7:  #6e560c;  --y8:  #8f7112;
    --y9:  #ffcb05;  --y10: #ffd633;  --y11: #ffd84d;  --y12: #fff1c2;

    --t3:  #0b2626;  --t4:  #0d3131;  --t6:  #125050;  --t9:  #00b5b5;
    --t10: #20d4d4;  --t11: #4fe0e0;  --t12: #c8f7f7;

    --j3:  #0e2a1c;  --j6:  #1c5236;  --j9:  #2a9d63;  --j11: #55c98a;
    --f3:  #2c1f06;  --f6:  #59410c;  --f8:  #b8860f;  --f9:  #e4a012;  --f11: #eab308;
    --p2:  #22100f;  --p3:  #2d1315;  --p6:  #5c2426;  --p9:  #dc3d43;  --p11: #ff9b98;

    --arnyek-1: 0 1px 2px rgba(0, 0, 0, .4);
    --arnyek-2: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px -6px rgba(0, 0, 0, .55);
    --arnyek-3: 0 8px 16px -6px rgba(0, 0, 0, .5), 0 28px 56px -16px rgba(0, 0, 0, .7);
    --arnyek-kartya: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px -20px rgba(0, 0, 0, .8);
    --arnyek-marka: 0 1px 0 rgba(0, 0, 0, .3), 0 8px 20px -10px rgba(255, 203, 5, .45);
    --arnyek-be: inset 0 1px 0 rgba(255, 255, 255, .04);

    --fokusz: 0 0 0 3px color-mix(in srgb, var(--a10) 45%, transparent);

    color-scheme: dark;
  }
}

/* --- Alapok -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--n12);
  background: var(--n2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 {
  margin: 0 0 .5rem;
  line-height: 1.25;
  letter-spacing: -.018em;
  font-weight: 700;
  color: var(--n12);
}
h1 { font-size: 1.55rem; font-weight: 780; letter-spacing: -.028em; }
h2 { font-size: 1.1rem; }
h3 { font-size: .96rem; font-weight: 680; }
p  { margin: 0 0 .75rem; }

a {
  color: var(--a11);
  text-decoration-color: color-mix(in srgb, var(--a11) 30%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--atmenet), text-decoration-color var(--atmenet);
}
a:hover { color: var(--a10); text-decoration-color: var(--marka); }

:focus-visible {
  outline: 2px solid var(--a9);
  outline-offset: 2px;
  border-radius: var(--r-kicsi);
}

::selection { background: var(--y4); color: var(--n12); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Váz ----------------------------------------------------------------- */

:root { --alsosav: calc(4.1rem + env(safe-area-inset-bottom)); }

/* A vízszintes túlcsordulás vágása: ha egy elem (táblázat, hosszú szó)
   szélesebbre tolná az oldalt a kijelzőnél, a telefon kicsinyítve mutatná,
   és a képernyő aljához rögzített menüsáv elcsúszna. A `clip` – szemben a
   `hidden`-nel – nem csinál görgetőtárolót, így a ragadós fejléc működik. */
.keret { display: flex; min-height: 100vh; min-height: 100dvh; overflow-x: clip; }
.fooszlop { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.fejlec {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 1rem;
  padding-top: max(.65rem, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--n2) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--n6) 70%, transparent);
}
.fejlec .cim {
  flex: 1; min-width: 0;
  font-weight: 750; font-size: 1.05rem; letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fejlec .alcim {
  display: block; font-weight: 450; font-size: .775rem;
  color: var(--n11); letter-spacing: 0;
}

.tartalom {
  flex: 1;
  width: 100%; max-width: 58rem; margin: 0 auto;
  padding: 1.15rem 1rem;
  padding-bottom: calc(1.15rem + var(--alsosav));
  animation: belep 220ms cubic-bezier(.4, 0, .2, 1);
}
.tartalom.szeles { max-width: 84rem; }

@keyframes belep {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* --- Oldalsáv (asztali gép) ---------------------------------------------- */

.oldalsav { display: none; }

.markajel {
  display: flex; align-items: center; gap: .65rem;
  padding: 1.1rem 1rem 1rem;
  font-weight: 780; font-size: 1rem; letter-spacing: -.022em;
  color: var(--n12); text-decoration: none;
}
.markajel img { border-radius: 7px; flex: none; }
.markajel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.oldalsav-menu { flex: 1; overflow-y: auto; padding: 0 .55rem; }

.menucsoport { margin-bottom: 1.05rem; }
.menucsoport-cim {
  padding: 0 .7rem .4rem;
  font-size: .68rem; font-weight: 700; color: var(--n9);
  text-transform: uppercase; letter-spacing: .09em;
}

/* --- Összecsukható menücsoport (ritkán használt beállítások) --------------
 *
 * A csoportcím itt kapcsológomb, nem felirat – de SZÁNDÉKOSAN ugyanaz a
 * betűkép, mint a sima csoportcímeké. Ha másképp néznének ki, a menüben
 * kétféle dolognak látszanának, pedig mindkettő ugyanazt jelenti: „innen
 * kezdődik egy csoport".
 */
.csukhato-csoport {
  margin-top: .35rem;
  padding-top: .8rem;
  border-top: 1px solid var(--n5);
}
button.menucsoport-cim {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .4rem .7rem;
  font: inherit;
  font-size: .68rem; font-weight: 700; color: var(--n9);
  text-transform: uppercase; letter-spacing: .09em;
  text-align: left;
  background: none; border: 0; border-radius: var(--r-kozep);
  cursor: pointer;
  transition: background var(--atmenet), color var(--atmenet);
}
button.menucsoport-cim:hover { background: var(--n3); color: var(--n11); }
button.menucsoport-cim:focus-visible { outline: none; box-shadow: var(--fokusz); }
button.menucsoport-cim svg { flex: none; opacity: .75; }
button.menucsoport-cim span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Egy rajzból lesz a kétféle állás: csukva lefelé, nyitva felfelé mutat. */
.menucsoport-nyil { display: flex; transition: transform var(--atmenet); }
button.menucsoport-cim.nyitva .menucsoport-nyil { transform: rotate(180deg); }

.menupont {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .55rem .7rem;
  margin-bottom: .15rem;
  font: inherit; font-size: .885rem; font-weight: 560; text-align: left;
  color: var(--n11); background: none; border: 0;
  border-radius: var(--r-kozep);
  text-decoration: none; cursor: pointer;
  transition: background var(--atmenet), color var(--atmenet), transform var(--atmenet);
}
.menupont svg { flex: none; opacity: .8; }
.menupont:hover { background: var(--n3); color: var(--n12); }
.menupont:active { transform: scale(.985); }
/* Az aktív pont sárga pirula, sötét felirattal – a márka legerősebb jele. */
.menupont.aktiv {
  background: var(--marka); color: var(--marka-szoveg); font-weight: 700;
  box-shadow: var(--arnyek-marka);
}
.menupont.aktiv:hover { background: var(--marka-hover); color: var(--marka-szoveg); }
.menupont.aktiv svg { opacity: 1; }
.menupont:focus-visible { outline: none; box-shadow: var(--fokusz); }

.oldalsav-lab { padding: .55rem; border-top: 1px solid var(--n5); }

.felhasznalo {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .55rem .6rem;
}
.felhasznalo-nev {
  font-size: .87rem; font-weight: 580; color: var(--n12);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kezdobetu {
  flex: none;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: var(--r-teljes);
  background: linear-gradient(135deg, #6c32a3, #4b1c7d); color: #fff;
  font-size: .755rem; font-weight: 700; letter-spacing: .02em;
}

@media (min-width: 60rem) {
  .oldalsav {
    position: sticky; top: 0;
    display: flex; flex-direction: column;
    flex: none; width: 15.5rem; height: 100vh;
    background: var(--n1);
    border-right: 1px solid var(--n5);
  }
  .tartalom { padding-bottom: 1.15rem; }
  .fejlec { padding-left: 1.5rem; padding-right: 1.5rem; }
  .tartalom { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* --- Alsó sáv (telefon) -------------------------------------------------- */

.alsosav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--n1) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--n6);
}
.alsopont {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: .12rem;
  padding: .35rem .2rem .45rem;
  font: inherit; font-size: .67rem; font-weight: 600;
  color: var(--n10); background: none; border: 0;
  text-decoration: none; cursor: pointer;
  transition: color var(--atmenet);
}
.alsopont span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Az ikon egy pirulában ül: az aktív pontnál ez a pirula sárga. */
.alsopont svg {
  box-sizing: content-box;
  padding: .2rem .95rem;
  border-radius: var(--r-teljes);
  transition: transform var(--atmenet), background var(--atmenet), color var(--atmenet);
}
.alsopont:active svg { transform: scale(.9); }
.alsopont.aktiv { color: var(--n12); font-weight: 750; }
.alsopont.aktiv svg { background: var(--marka); color: var(--marka-szoveg); }
.alsopont:focus-visible { outline: none; box-shadow: var(--fokusz); border-radius: var(--r-kicsi); }

@media (min-width: 60rem) {
  .alsosav { display: none; }
  .csak-mobil { display: none !important; }
}

/* A „Több” lap a telefonos menühöz */
.tobb-lap { padding-bottom: max(1.15rem, calc(env(safe-area-inset-bottom) + .5rem)); }
.tobb-fej {
  display: flex; align-items: center; gap: .6rem;
  padding-bottom: .8rem; margin-bottom: .6rem;
  border-bottom: 1px solid var(--n5);
}
.tobb-lap .menupont { font-size: .95rem; padding: .62rem .6rem; }

/* Önálló oldalak (belépés, szülői nézet): se oldalsáv, se alsó sáv. */
.belepes-mod .alsosav,
.belepes-mod .oldalsav,
.belepes-mod .fejlec { display: none; }

.belepes-mod .tartalom,
body.onallo .tartalom { padding-bottom: 1.15rem; }

/* --- Kártyák ------------------------------------------------------------- */

.kartya {
  background: var(--n1);
  border: 1px solid var(--n5);
  border-radius: var(--r-nagy);
  padding: 1.15rem 1.25rem;
  margin-bottom: .9rem;
  box-shadow: var(--arnyek-kartya);
}
.kartya.tomor { padding: .75rem .9rem; }
.kartya-fej {
  display: flex; align-items: flex-start; gap: .75rem;
  margin-bottom: .7rem; flex-wrap: wrap;
}
.kartya-fej > h1, .kartya-fej > h2, .kartya-fej > h3 { margin: 0; flex: 1; min-width: 8rem; }

.lista-elem {
  display: flex; align-items: center; gap: .85rem;
  padding: .78rem .95rem;
  margin-bottom: .5rem;
  background: var(--n1);
  border: 1px solid var(--n5);
  border-radius: 14px;
  color: inherit; text-decoration: none;
  box-shadow: var(--arnyek-1);
  transition: border-color var(--atmenet), box-shadow var(--atmenet), transform var(--atmenet);
}
.lista-elem:hover {
  border-color: var(--n7);
  box-shadow: var(--arnyek-2);
  transform: translateY(-1px);
  color: inherit;
}
.lista-elem:active { transform: scale(.995); }
.lista-elem .fo { flex: 1; min-width: 0; }
.lista-elem .nev { font-weight: 650; letter-spacing: -.01em; }
.lista-elem .mellek { font-size: .81rem; color: var(--n11); }

/* --- Gombok -------------------------------------------------------------- */

.gomb {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .6rem 1.05rem;
  font: inherit; font-size: .9rem; font-weight: 650; line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--n12); background: var(--n1);
  border: 1px solid var(--n6);
  border-radius: var(--r-kozep);
  box-shadow: var(--arnyek-1), var(--arnyek-be);
  cursor: pointer; text-decoration: none;
  transition: background var(--atmenet), border-color var(--atmenet),
              box-shadow var(--atmenet), transform var(--atmenet);
}
.gomb:hover { background: var(--n2); border-color: var(--n8); color: var(--n12); }
.gomb:active { transform: scale(.975); box-shadow: none; }
.gomb:focus-visible { outline: none; box-shadow: var(--fokusz); }

/* Fő gomb: Fabton sárga, sötét felirattal. */
.gomb.elsodleges {
  background: var(--marka); border-color: transparent; color: var(--marka-szoveg);
  font-weight: 720;
  box-shadow: var(--arnyek-marka), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.gomb.elsodleges:hover { background: var(--marka-hover); color: var(--marka-szoveg); }
.gomb.elsodleges:focus-visible {
  box-shadow: var(--arnyek-marka), 0 0 0 3px color-mix(in srgb, var(--a9) 35%, transparent);
}

.gomb.veszely { color: var(--p11); border-color: var(--p6); background: var(--n1); }
.gomb.veszely:hover { background: var(--p3); border-color: var(--p9); }

.gomb.kicsi { padding: .36rem .68rem; font-size: .8rem; font-weight: 600; border-radius: 9px; }
.gomb.teljes { width: 100%; }
/* Választólistának használt gomb: a szöveg a bal szélen kezdődjön, hogy a
   nevek egymás alatt olvashatóan sorakozzanak. */
.gomb.balra { justify-content: flex-start; text-align: left; }
.gomb[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.gomb-sor { display: flex; gap: .45rem; flex-wrap: wrap; }

/* --- Űrlapok ------------------------------------------------------------- */

.mezo { margin-bottom: .95rem; }
.mezo > label {
  display: block; margin-bottom: .35rem;
  font-size: .8rem; font-weight: 650; color: var(--n11);
}
.mezo .sugo { margin-top: .3rem; font-size: .785rem; color: var(--n11); line-height: 1.45; }

input[type=text], input[type=password], input[type=date], input[type=time],
input[type=number], input[type=search], input[type=month],
input[type=email], input[type=tel], input[type=url], select, textarea {
  width: 100%;
  padding: .62rem .8rem;
  font: inherit; font-size: .93rem;
  color: var(--n12); background: var(--n1);
  border: 1px solid var(--n6);
  border-radius: var(--r-kozep);
  box-shadow: var(--arnyek-1);
  transition: border-color var(--atmenet), box-shadow var(--atmenet), background var(--atmenet);
}
input::placeholder, textarea::placeholder { color: var(--n9); }
input:hover, select:hover, textarea:hover { border-color: var(--n8); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--a8); box-shadow: var(--fokusz);
}
input[readonly] { background: var(--n2); }
textarea {
  min-height: 8rem; resize: vertical;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .855rem; line-height: 1.6;
}

/* ÉRINTŐKÉPERNYŐN A MEZŐK LEGALÁBB 16 PX-ESEK.
   Az iPhone Safari minden 16 px alatti mezőre koppintáskor ránagyít, és a
   nagyítás bent marad. Nagyított nézetben a képernyő aljához rögzített
   menüsáv a nagyított területhez igazodik – görgetéskor „felúszik" a
   képernyő közepére. A nagyítást nem tiltjuk le a viewport címkében: az a
   gyengénlátóknak venné el a lehetőséget. */
@media (hover: none) and (pointer: coarse) {
  input[type=text], input[type=password], input[type=date], input[type=time],
  input[type=number], input[type=search], input[type=month],
  input[type=email], input[type=tel], input[type=url], select, textarea {
    font-size: 16px;
  }
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23838f98' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  padding-right: 2rem;
}

.mezo-sor { display: flex; gap: .65rem; }
.mezo-sor > * { flex: 1; min-width: 0; }

/* Körlevél kiküldési haladás. */
.halado-sav {
  height: .55rem;
  background: var(--n4);
  border-radius: 1rem;
  overflow: hidden;
}
.halado-sav-belso {
  height: 100%;
  background: linear-gradient(90deg, var(--y8), var(--marka));
  border-radius: 1rem;
  transition: width .25s ease;
}

/* Levélsablon élő előnézete – a szöveg úgy, ahogy a szülő látja. */
.sablon-elonezet {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--n2);
  border: 1px solid var(--n6);
  border-radius: .5rem;
  padding: .7rem .85rem;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--n12);
  max-height: 16rem;
  overflow-y: auto;
}

/* Összetartozó mezők elválasztva a felettük lévőktől – hosszabb űrlapon
   enélkül egyetlen szakadatlan mezőoszlop lenne. */
.mezo-csoport {
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid var(--n6);
}
.mezo-csoport > h3 { margin: 0 0 .25rem; font-size: .92rem; }
.mezo-csoport > p { margin: 0 0 .7rem; }

/* Belépőképernyő: Fabton Hub fejléc + tanár/szülő váltó. */
.belepes-keret { max-width: 23rem; margin: 2.5rem auto 0; padding: 0 1rem; }
.belepes-fejlec {
  display: flex; justify-content: center;
  margin-bottom: 1.4rem;
}
/* Átlátszó hátterű Fabton logó – nincs plakett, nincs felirat, csak a logó. */
.belepes-logo { display: block; height: 3rem; width: auto; }
.belepes-valto {
  display: flex; gap: .25rem; padding: .28rem; margin: 0 auto 1.15rem;
  max-width: 15rem; background: var(--n3); border-radius: var(--r-teljes);
}
.belepes-valto-ful {
  flex: 1; text-align: center; padding: .5rem .5rem; border-radius: var(--r-teljes);
  font-size: .9rem; font-weight: 650; color: var(--n11); text-decoration: none;
  cursor: pointer; transition: background var(--atmenet), color var(--atmenet);
}
.belepes-valto-ful:hover { color: var(--n12); }
.belepes-valto-ful.aktiv {
  background: var(--n1); color: var(--n12); box-shadow: var(--arnyek-1); cursor: default;
}

/* Belépőképernyő lábléce: másodlagos utak (elfelejtett jelszó). */
.belepes-lablec {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem;
  margin-top: .9rem;
}
.szoveg-gomb {
  padding: 0; border: 0; background: none; font: inherit; font-size: .82rem;
  color: var(--a11); text-decoration: underline; cursor: pointer;
}
.szoveg-gomb:hover { color: var(--a12); }

/* --- Rendszernapló ------------------------------------------------------- */
.nowrap { white-space: nowrap; }
.naplo-tabla td { vertical-align: top; }
.naplo-esemeny {
  display: inline-block; font-weight: 560; color: var(--n12);
}
.naplo-esemeny.rossz { color: var(--piros11, #c0392b); }
.naplo-kulcs {
  display: block; margin-top: .1rem; font-size: .72rem; color: var(--n9);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.naplo-reszlet {
  color: var(--n11); word-break: break-word; max-width: 34rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .78rem; line-height: 1.5;
}
.naplo-hiba { background: color-mix(in srgb, var(--piros9, #e74c3c) 8%, transparent); }

/* Nyíltnap-esemény felvevő sor: reszponzív, becsomagol kis kijelzőn. */
.ujesemeny {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: end;
  margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--n5);
}

/* A tanár elérhetősége a szülői oldalon: koppintható, nem másolgatható. */
.tanar-elerhetoseg { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }

label.jelolo {
  display: flex; align-items: center; gap: .55rem;
  font-size: .9rem; font-weight: 500; color: var(--n12); cursor: pointer;
}
label.jelolo input { width: auto; accent-color: var(--a9); width: 1.05rem; height: 1.05rem; }

/* --- Táblázat ------------------------------------------------------------ */

.tabla-doboz {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--n1);
  border: 1px solid var(--n5);
  border-radius: 14px;
}
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { padding: .62rem .85rem; text-align: left; border-bottom: 1px solid var(--n4); }
th {
  position: sticky; top: 0; z-index: 1;
  background: var(--n2); color: var(--n10);
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--atmenet); }
tbody tr:hover { background: color-mix(in srgb, var(--a3) 55%, transparent); }
td.szuk, th.szuk { width: 1%; white-space: nowrap; }

/* Szülői oldal telefonon (5. kör, 2026-10-11): a díj- és alkalomtáblák sorai
   kártyává tördelődnek, hogy az állapotcímke és a „Nem tudunk jönni" gomb ne
   vágódjon le a jobb szélen. Az első cella (megnevezés / dátum) egész sor,
   a többi egymás mellé folyik. */
@media (max-width: 30rem) {
  .onallo .tabla-doboz table, .onallo .tabla-doboz tbody { display: block; }
  .onallo .tabla-doboz tr {
    display: flex; flex-wrap: wrap; gap: .25rem .7rem; align-items: center;
    padding: .55rem .85rem; border-bottom: 1px solid var(--n4);
  }
  .onallo .tabla-doboz tbody tr:last-child { border-bottom: 0; }
  .onallo .tabla-doboz td { display: block; border: 0; padding: 0; }
  .onallo .tabla-doboz td:first-child { flex: 1 1 100%; }
  .onallo .tabla-doboz td.szuk { width: auto; white-space: normal; }
  .onallo .tabla-doboz td.szuk:last-child { margin-left: auto; }
  .onallo .tabla-doboz td .gomb { white-space: nowrap; }
}

/* --- Címkék -------------------------------------------------------------- */

.cimke {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .15rem .58rem;
  border-radius: var(--r-teljes);
  font-size: .72rem; font-weight: 680; letter-spacing: 0;
  background: var(--n3); color: var(--n11);
  white-space: nowrap;
}
.cimke.jelen     { background: var(--j3); color: var(--j11); }
.cimke.beteg     { background: var(--f3); color: var(--f11); }
.cimke.hianyzott { background: var(--p3); color: var(--p11); }
/* Az információ türkiz, a márkakiemelés sárga, a lila hangsúly. */
.cimke.info      { background: var(--t3); color: var(--t11); }
.cimke.marka     { background: var(--marka); color: var(--marka-szoveg); }
.cimke.lila      { background: var(--a3); color: var(--a11); }

/* --- Levélszerkesztő ----------------------------------------------------- */

.level-eszkoztar { display: flex; flex-wrap: wrap; gap: .25rem; }
.level-eszkoztar .gomb { min-width: 2.1rem; padding: .4rem .5rem; }

.level-szerkeszto {
  min-height: 14rem;
  max-height: 34rem;
  overflow-y: auto;
  padding: .7rem .85rem;
  background: var(--n1);
  border: 1px solid var(--n7);
  border-radius: var(--r-kozep);
  box-shadow: var(--arnyek-1);
  font-size: .93rem; line-height: 1.6;
}
.level-szerkeszto:focus {
  outline: none; border-color: var(--a8); box-shadow: var(--fokusz);
}
/* Üres szerkesztőben nincs mit nézni – a placeholder mondja meg, mi jön ide. */
.level-szerkeszto:empty::before {
  content: attr(data-ures);
  color: var(--n9);
}
.level-szerkeszto img { max-width: 100%; height: auto; }
.level-szerkeszto a { color: var(--a11); }
.level-szerkeszto p { margin: 0 0 .7rem; }
.level-szerkeszto h1, .level-szerkeszto h2, .level-szerkeszto h3 {
  margin: 0 0 .5rem; font-size: 1.05rem;
}
.level-szerkeszto ul, .level-szerkeszto ol { margin: 0 0 .7rem; padding-left: 1.4rem; }

/* Szabad címkék (gyerekek): több bélyeg egy sorban, tördeléssel. */
.cimke-sor { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }

/* A címke levételét jelző × – a bélyegen belül, annak a színével. */
.cimke-x {
  border: 0; background: none; padding: 0 0 0 .1rem; margin: 0;
  color: inherit; font: inherit; line-height: 1;
  opacity: .55; cursor: pointer;
}
.cimke-x:hover { opacity: 1; }
.cimke-x:focus-visible { outline: 0; box-shadow: var(--fokusz); border-radius: var(--r-teljes); }

.uzenet {
  position: relative;
  padding: .78rem 1rem .78rem 1.15rem;
  margin-bottom: .8rem;
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: .885rem; line-height: 1.5;
  overflow: hidden;
}
/* Színes sáv a bal szélen: ránézésre elválik a tartalomtól. */
.uzenet::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: currentColor; opacity: .55;
}
.uzenet:not(.hiba):not(.siker):not(.figyelem):not(.info) {
  background: var(--n2); border-color: var(--n5); color: var(--n11);
}
.uzenet.hiba     { background: var(--p3); border-color: var(--p6); color: var(--p11); }
.uzenet.siker    { background: var(--j3); border-color: var(--j6); color: var(--j11); }
.uzenet.figyelem { background: var(--f3); border-color: var(--f6); color: var(--f11); }
.uzenet.info     { background: var(--t3); border-color: var(--t6); color: var(--t11); }

.ures {
  padding: 2.75rem 1rem; text-align: center;
  color: var(--n11); font-size: .885rem;
  border: 1.5px dashed var(--n6); border-radius: var(--r-nagy);
  background: var(--n1);
}

/* --- Jelenlét-jelölő (a tanári felület szíve) ---------------------------- */

.gyerek-sor {
  padding: .8rem .95rem;
  margin-bottom: .55rem;
  background: var(--n1);
  border: 1px solid var(--n5);
  border-radius: var(--r-nagy);
  box-shadow: var(--arnyek-kartya);
  transition: border-color var(--atmenet);
}
.gyerek-sor .fejsor { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; flex-wrap: wrap; }
.gyerek-sor .gyerek-nev { flex: 1; min-width: 6rem; font-weight: 590; letter-spacing: -.007em; }

.statusz-valaszto {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem;
  padding: .25rem;
  background: var(--n3);
  border-radius: 14px;
}
.statusz-gomb {
  padding: .58rem .3rem;
  font: inherit; font-size: .855rem; font-weight: 570; line-height: 1.2;
  color: var(--n11); background: transparent;
  border: 1px solid transparent; border-radius: var(--r-kicsi);
  cursor: pointer;
  transition: background var(--atmenet), color var(--atmenet),
              box-shadow var(--atmenet), transform 90ms ease;
}
.statusz-gomb:hover { color: var(--n12); background: color-mix(in srgb, var(--n1) 60%, transparent); }
.statusz-gomb:active { transform: scale(.96); }
.statusz-gomb:focus-visible { outline: none; box-shadow: var(--fokusz); }

.statusz-gomb.valasztott { background: var(--n1); box-shadow: var(--arnyek-2); font-weight: 650; }
.statusz-gomb.valasztott[data-statusz=jelen]     { color: var(--j11); border-color: var(--j6); }
.statusz-gomb.valasztott[data-statusz=beteg]     { color: var(--f11); border-color: var(--f6); }
.statusz-gomb.valasztott[data-statusz=hianyzott] { color: var(--p11); border-color: var(--p6); }

/* --- Pontozó (1–5) ------------------------------------------------------- */

.pont-valaszto { display: flex; gap: .3rem; }
.pont-gomb {
  flex: 1; min-width: 2rem;
  padding: .45rem 0;
  font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--n11); background: var(--n2);
  border: 1px solid var(--n6); border-radius: var(--r-kicsi);
  cursor: pointer;
  transition: all var(--atmenet);
}
.pont-gomb:hover { background: var(--n4); color: var(--n12); }
.pont-gomb:active { transform: scale(.94); }
.pont-gomb:focus-visible { outline: none; box-shadow: var(--fokusz); }
.pont-gomb.valasztott {
  background: var(--marka); border-color: var(--y8); color: var(--marka-szoveg); font-weight: 800;
  box-shadow: var(--arnyek-2);
}
.pont-gomb.elozo {
  border-style: dashed; border-color: var(--a8); color: var(--a11);
}

.kriterium-sor {
  display: grid; grid-template-columns: 1fr; gap: .35rem;
  padding: .55rem 0;
  border-top: 1px solid var(--n5);
}
.kriterium-sor:first-of-type { border-top: 0; }
/* Készségértékelés gyerekenként: egy gyerek egyszerre, a gombok mindig a teljes szélességben. */
.ert-skala { margin-top: .6rem; }
.ert-skala summary { cursor: pointer; }
.ert-pottyok { display: flex; flex-wrap: wrap; gap: .35rem; margin: .8rem 0 .6rem; }
.ert-potty {
  min-width: 2.3rem; height: 2.3rem; padding: 0 .4rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .75rem; font-weight: 700; color: var(--n11);
  background: var(--n2); border: 1.5px solid var(--n6);
}
.ert-potty.kesz { background: var(--j3, #dff5e6); border-color: var(--j8, #3bb273); color: var(--j11, #1d6b42); }
.ert-potty.aktiv { border-color: var(--navy, #062b45); box-shadow: 0 0 0 2px var(--navy, #062b45); }
.ert-lap { display: block; }
.ert-fej { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.ert-sor { display: block; padding: .7rem 0; border-top: 1px solid var(--n5); }
.ert-lap .ert-sor:first-of-type { margin-top: .6rem; }
.ert-nev { font-weight: 650; font-size: .95rem; margin-bottom: .45rem; }
.ert-leiras { font-weight: 400; font-size: .78rem; color: var(--n10); margin-top: .1rem; }
.ert-gombok { display: grid; grid-template-columns: repeat(5, 1fr) 1.25fr; gap: .4rem; max-width: 30rem; }
.ert-gomb {
  min-height: 2.75rem; padding: 0; border-radius: .7rem; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 700; color: var(--n11);
  background: var(--n1, #fff); border: 1.5px solid var(--n6);
  transition: background .12s, border-color .12s, transform 90ms ease;
}
.ert-gomb.nm { font-size: .78rem; }
.ert-gomb:active { transform: scale(.95); }
.ert-gomb:focus-visible { outline: 3px solid var(--fokusz, #20d4d4); outline-offset: 2px; }
.ert-gomb.elozo { border-style: dashed; border-color: var(--a8, #8a8af0); }
.ert-gomb.valasztott { background: var(--fabton-sarga, #ffcb05); border-color: var(--fabton-sarga, #ffcb05); color: var(--navy, #062b45); }
.ert-lapozo { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .8rem; }
.ert-lapozo .gomb { min-width: 7.5rem; }
.kriterium-sor .kriterium-nev { font-size: .875rem; font-weight: 540; }
@media (min-width: 34rem) {
  .kriterium-sor { grid-template-columns: 1fr 13rem; align-items: center; gap: .75rem; }
}

/* --- Készségsávok (szülői nézet) ---------------------------------------- */

.keszseg { padding: .7rem 0; border-top: 1px solid var(--n5); }
.keszseg:first-of-type { border-top: 0; padding-top: 0; }
.keszseg-fej {
  display: flex; align-items: baseline; gap: .5rem; margin-bottom: .4rem;
}
.keszseg-nev { flex: 1; font-weight: 570; font-size: .93rem; }
.keszseg-ertek { font-size: .875rem; font-weight: 650; color: var(--n11); }

.keszseg-sav {
  position: relative; height: 8px;
  background: var(--n4); border-radius: var(--r-teljes);
  overflow: hidden;
}
.keszseg-sav > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--a9), var(--t9));
  border-radius: var(--r-teljes);
  transition: width 700ms cubic-bezier(.4, 0, .2, 1);
}
.keszseg-lab {
  display: flex; gap: .5rem; align-items: center;
  margin-top: .35rem; font-size: .785rem; color: var(--n11);
}
.fejlodes-jel {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .1rem .45rem; border-radius: var(--r-teljes);
  font-size: .74rem; font-weight: 620;
  background: var(--j3); color: var(--j11);
}

/* --- Offline sáv --------------------------------------------------------- */

.offline-sav {
  position: sticky; top: 3.05rem; z-index: 28;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .5rem 1rem;
  background: var(--f3); color: var(--f11);
  border-bottom: 1px solid var(--f6);
  font-size: .82rem; font-weight: 560;
}
@media (min-width: 60rem) { .offline-sav { top: 0; } }

/* --- Fülek --------------------------------------------------------------- */

.fulek {
  display: flex; gap: .25rem;
  padding: .28rem;
  margin-bottom: 1rem;
  background: var(--n3);
  border: 1px solid var(--n4);
  border-radius: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.fulek::-webkit-scrollbar { display: none; }
.ful {
  flex: 1; min-width: max-content;
  padding: .48rem .9rem;
  font: inherit; font-size: .865rem; font-weight: 600;
  color: var(--n11); background: none;
  border: 0; border-radius: 10px;
  cursor: pointer; white-space: nowrap;
  transition: background var(--atmenet), color var(--atmenet), box-shadow var(--atmenet);
}
.ful:hover { color: var(--n12); background: color-mix(in srgb, var(--n1) 55%, transparent); }
.ful.aktiv {
  background: var(--n1); color: var(--n12); font-weight: 720;
  box-shadow: var(--arnyek-2);
}
.ful:focus-visible { outline: none; box-shadow: var(--fokusz); }

.ful-szam {
  display: inline-block; margin-left: .4rem;
  padding: 0 .42rem;
  border-radius: var(--r-teljes);
  background: var(--n5); color: var(--n11);
  font-size: .7rem; font-weight: 700;
}
.ful.aktiv .ful-szam { background: var(--marka); color: var(--marka-szoveg); }

/* --- Kártyarács (kurzustípusok) ------------------------------------------ */

.kartya-racs {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.tipus-kartya {
  display: block; padding: 1rem 1.1rem;
  background: var(--n1);
  border: 1px solid var(--n5);
  border-radius: var(--r-nagy);
  box-shadow: var(--arnyek-kartya);
  color: inherit; text-decoration: none;
  transition: border-color var(--atmenet), box-shadow var(--atmenet), transform var(--atmenet);
}
.tipus-kartya:hover {
  border-color: var(--a7); box-shadow: var(--arnyek-2); color: inherit;
  transform: translateY(-2px);
}
.tipus-fej { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.tipus-nev { font-size: 1.03rem; font-weight: 640; letter-spacing: -.014em; }

.tipus-szamok {
  display: flex; gap: 1.35rem;
  padding-top: .7rem; margin-top: .2rem;
  border-top: 1px solid var(--n5);
}
.tipus-szam { font-size: 1.15rem; font-weight: 680; line-height: 1.1; }
.tipus-felirat {
  font-size: .705rem; font-weight: 560; color: var(--n11);
  text-transform: uppercase; letter-spacing: .045em;
}

/* --- Galéria ------------------------------------------------------------- */

.galeria {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
.galeria-elem {
  margin: 0;
  background: var(--n2);
  border: 1px solid var(--n6);
  border-radius: var(--r-kozep);
  overflow: hidden;
}
.galeria-elem img {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; background: var(--n4);
  transition: transform var(--atmenet);
}
.galeria-elem a:hover img { transform: scale(1.03); }
.galeria-elem figcaption {
  display: flex; align-items: center; gap: .35rem;
  padding: .4rem .5rem;
  font-size: .755rem; color: var(--n11); line-height: 1.35;
}
.galeria-elem figcaption > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Szülői galéria: nagyobb, levegősebb */
.galeria.nagy { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }

/* --- E-mail/SMS sorozatok ------------------------------------------------ */
.sorozat-lepesek { display: flex; flex-direction: column; gap: .5rem; }
.sorozat-lepes {
  display: flex; gap: .75rem; align-items: flex-start; flex-wrap: wrap;
  padding: .7rem .8rem; border: 1px solid var(--n5); border-radius: var(--r-kozep);
  background: var(--n1);
}
.sorozat-lepes-szam {
  width: 1.9rem; height: 1.9rem; border-radius: 50%; flex: none;
  background: var(--a3); color: var(--a11); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.sorozat-lepes-elonezet {
  margin-top: .25rem; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}

/* --- Feladatok (csapatmunka) ------------------------------------------- */
.menu-jelveny {
  margin-left: auto; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem;
  border-radius: var(--r-teljes); background: var(--p9); color: #fff;
  font-size: .72rem; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center;
}
.gomb-link {
  border: 0; background: none; padding: 0 .15rem; cursor: pointer;
  color: var(--n10); font: inherit;
}
.gomb-link:hover { color: var(--p11); }
.feladat-racs {
  display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 1rem;
  align-items: start; margin-top: .6rem;
}
.feladat-szurok { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.feladat-szurok select, .feladat-szurok input { flex: 1 1 140px; min-width: 0; }
.feladat-lista { display: flex; flex-direction: column; gap: .35rem; }
.feladat-elem {
  display: block; padding: .6rem .75rem; border-radius: var(--r-kozep);
  background: var(--n1); border: 1px solid var(--n5); color: var(--n12);
  text-decoration: none; box-shadow: var(--arnyek-1);
}
.feladat-elem:hover { border-color: var(--n8); }
.feladat-elem.aktiv { border-color: var(--a9); box-shadow: var(--fokusz); }
.feladat-elem.olvasatlan .feladat-elem-cim { font-weight: 750; }
.feladat-elem-fej { display: flex; align-items: center; gap: .4rem; }
.feladat-elem-cim { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.feladat-elem-utolso {
  margin-top: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feladat-jelveny {
  min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem; border-radius: var(--r-teljes);
  background: var(--a9); color: #fff; font-size: .72rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.feladat-reszlet {
  background: var(--n1); border: 1px solid var(--n5); border-radius: var(--r-nagy);
  box-shadow: var(--arnyek-kartya); display: flex; flex-direction: column;
  min-height: 60vh; max-height: calc(100vh - 7rem); overflow: hidden;
}
.feladat-ures { margin: auto; }
.feladat-reszlet-fej {
  padding: 1rem 1.1rem .7rem; border-bottom: 1px solid var(--n4);
  display: flex; flex-direction: column; gap: .55rem; overflow-y: auto; max-height: 45%;
}
.feladat-vissza { display: none; }
.feladat-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.feladat-meta-sor { display: flex; gap: .4rem; }
.feladat-leiras { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; }
.feladat-csatolmanyok { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.feladat-csatolmany { max-width: 150px; }
.feladat-csatolmany img {
  display: block; width: 150px; height: 110px; object-fit: cover;
  border-radius: var(--r-kicsi); border: 1px solid var(--n5);
}
.kicsi-kepek .feladat-csatolmany img { width: 120px; height: 90px; }
.feladat-csatolmany-nev { overflow-wrap: anywhere; }
.feladat-fajl {
  display: inline-block; padding: .45rem .6rem; border-radius: var(--r-kicsi);
  background: var(--n3); color: var(--n12); text-decoration: none; overflow-wrap: anywhere;
}
.feladat-folyam {
  flex: 1; overflow-y: auto; padding: .9rem 1.1rem; display: flex;
  flex-direction: column; gap: .55rem; background: var(--n2);
}
.feladat-uzenet { display: flex; gap: .5rem; align-items: flex-end; max-width: 85%; }
.feladat-uzenet.sajat { align-self: flex-end; flex-direction: row-reverse; }
.feladat-buborek {
  background: var(--n1); border: 1px solid var(--n5); border-radius: var(--r-kozep);
  padding: .45rem .7rem; min-width: 0;
}
.feladat-uzenet.sajat .feladat-buborek { background: var(--a3); border-color: var(--a5); }
.feladat-uzenet-fej { display: flex; gap: .2rem; align-items: center; margin-bottom: .15rem; }
.feladat-uzenet-torol { margin-left: auto; opacity: 0; }
.feladat-buborek:hover .feladat-uzenet-torol { opacity: 1; }
.feladat-uzenet-szoveg { white-space: pre-wrap; overflow-wrap: anywhere; }
.feladat-uzenet-rendszer { align-self: center; text-align: center; max-width: 90%; }
.feladat-emlites {
  background: var(--y3); color: var(--y12); border-radius: 4px; padding: 0 .15rem;
  font-weight: 600;
}
.feladat-iro { position: relative; border-top: 1px solid var(--n4); padding: .6rem .8rem; }
.feladat-iro-sor { display: flex; gap: .5rem; align-items: flex-end; }
.feladat-iro-sor textarea { flex: 1; min-width: 0; resize: vertical; min-height: 2.6rem; }
.feladat-fuggo-csatolmanyok { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .35rem; }
.feladat-fuggo-csatolmanyok:empty { display: none; }
.feladat-emlites-lista {
  position: absolute; bottom: 100%; left: .8rem; right: .8rem; z-index: 20;
  background: var(--n1); border: 1px solid var(--n6); border-radius: var(--r-kozep);
  box-shadow: var(--arnyek-3); padding: .3rem; max-height: 240px; overflow-y: auto;
}
.feladat-emlites-elem {
  display: flex; align-items: center; width: 100%; border: 0; background: none;
  padding: .35rem .45rem; border-radius: var(--r-kicsi); cursor: pointer;
  color: var(--n12); font: inherit; text-align: left;
}
.feladat-emlites-elem:hover { background: var(--n3); }
.feladat-resztvevo-valaszto {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .2rem .6rem;
  max-height: 180px; overflow-y: auto;
}
.lista-elem.olvasatlan { background: var(--a2); }
@media (max-width: 800px) {
  .feladat-racs { grid-template-columns: 1fr; }
  .feladat-racs.van-reszlet .feladat-lista-oszlop { display: none; }
  .feladat-racs:not(.van-reszlet) .feladat-reszlet { display: none; }
  .feladat-vissza { display: inline; }
  .feladat-reszlet { max-height: none; min-height: calc(100vh - 9rem); }
  .feladat-uzenet { max-width: 95%; }
}

/* Lapozható képnézegető (szülői oldal). Témától függetlenül sötét: a fotó
   így kap kontrasztot, világos témában is. */
.kepnezo {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(8, 8, 12, .94);
  display: flex; align-items: center; justify-content: center;
  padding: 3.2rem 3.4rem;
  touch-action: pan-y;
}
.kepnezo-keret { margin: 0; max-width: 100%; max-height: 100%; display: flex;
  flex-direction: column; align-items: center; gap: .6rem; }
.kepnezo-kep { max-width: 100%; max-height: calc(100vh - 9rem); object-fit: contain;
  border-radius: .4rem; user-select: none; }
.kepnezo-felirat { color: #e8e7ee; font-size: .9rem; text-align: center; max-width: 40rem; }
.kepnezo-szamlalo { position: absolute; top: 1rem; left: 1.2rem; color: #b9b7c6;
  font-size: .85rem; }
.kepnezo-gomb {
  position: absolute; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff;
  width: 2.8rem; height: 2.8rem; border-radius: 50%;
  font-size: 1.6rem; line-height: 1; display: flex; align-items: center;
  justify-content: center;
}
.kepnezo-gomb:hover, .kepnezo-gomb:focus-visible { background: rgba(255, 255, 255, .25); }
.kepnezo-bezar { top: .8rem; right: .8rem; font-size: 1.1rem; }
.kepnezo-elozo { left: .6rem; top: 50%; transform: translateY(-50%); }
.kepnezo-kovetkezo { right: .6rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .kepnezo { padding: 3.2rem .5rem 4.5rem; }
  .kepnezo-elozo, .kepnezo-kovetkezo { top: auto; bottom: .9rem; transform: none; }
  .kepnezo-elozo { left: calc(50% - 3.4rem); }
  .kepnezo-kovetkezo { right: calc(50% - 3.4rem); }
}

.kiemeles-elem {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .6rem 0; border-top: 1px solid var(--n5);
}
.kiemeles-elem:first-of-type { border-top: 0; }
.kiemeles-jel {
  flex: none;
  width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center;
  border-radius: var(--r-teljes);
  background: var(--f3); color: var(--f11);
  font-size: .85rem;
}

/* Beállítási értékek szövegközben (kiszolgálónév, port). */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--n3);
  padding: .1rem .3rem;
  border-radius: var(--r-kicsi);
}

/* ==========================================================================
   Jelentkezési varázsló (nyilvános oldal)

   Egy képernyő, egy kérdés. Nagy betűk, sok levegő, billentyűzetről is
   végigvihető. A kiemelőszín adminból állítható, ezért minden szín a
   --reg-* változókból jön – nem a belső felület palettájából.
   ========================================================================== */

.reg-oldal {
  /* --reg:        telt kiemelőfelület (alapból Fabton sárga)
     --reg-szoveg: felirat a telt felületen (sárgán sötét)
     --reg-hang:   szövegszínű kiemelés (sárga szövegnek olvashatatlan,
                   ezért alapból lila). Egyedi színnél a regisztracio.js
                   számolja ki a kettőt a szín világosságából. */
  --reg:        var(--marka);
  --reg-szoveg: var(--marka-szoveg);
  --reg-hang:   var(--a11);
  --reg-vil: color-mix(in srgb, var(--reg) 16%, transparent);
  --reg-koz: color-mix(in srgb, var(--reg) 55%, var(--n6));

  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--n1);
}

/* Vékony csík legfelül: mindig látszik, mennyi van hátra. */
.reg-sav {
  position: sticky; top: 0; z-index: 5;
  height: 4px; background: var(--n4);
}
.reg-sav > span {
  display: block; height: 100%;
  background: var(--reg); border-radius: 0 var(--r-teljes) var(--r-teljes) 0;
  transition: width 320ms cubic-bezier(.2, .8, .2, 1);
}

.reg-torzs {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.25rem 1rem;
}
.reg-doboz { width: 100%; max-width: 34rem; }

/* Belépő mozgás: jelzi, hogy haladunk, de nem lassít. */
.reg-lepes { animation: regBe 300ms cubic-bezier(.2, .8, .2, 1); }
@keyframes regBe {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reg-lepes { animation: none; }
}

/* A kérdés sorszáma – ettől lesz „kérdés” és nem „mező”. */
.reg-szam {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-bottom: .55rem;
  font-size: .82rem; font-weight: 700; color: var(--reg-hang);
}
.reg-kerdes {
  margin: 0 0 .5rem;
  font-size: 1.6rem; line-height: 1.2; font-weight: 780;
  letter-spacing: -.028em;
}
.reg-alcim {
  margin: 0 0 1.4rem;
  font-size: .95rem; line-height: 1.5; color: var(--n11);
}
.reg-jeloles {
  display: inline-block; margin-left: .45rem;
  padding: .05rem .4rem; border-radius: var(--r-teljes);
  font-size: .68rem; font-weight: 650; letter-spacing: .02em;
  text-transform: uppercase; vertical-align: .18em;
  background: var(--n4); color: var(--n11);
}
.reg-jeloles.kell { background: var(--p3); color: var(--p11); }

/* Nagy, aláhúzott beviteli mező. Keret nélkül nem néz ki űrlapnak. */
.reg-beviteli {
  width: 100%; padding: .5rem 0 .55rem;
  font: inherit; font-size: 1.35rem; color: var(--n12);
  background: none;
  border: 0; border-bottom: 2px solid var(--n7);
  border-radius: 0;
  transition: border-color var(--atmenet);
}
.reg-beviteli::placeholder { color: var(--n8); }
.reg-beviteli:focus {
  outline: none; border-bottom-color: var(--reg-hang);
}
.reg-cimke {
  display: block; margin: 1.1rem 0 -.2rem;
  font-size: .8rem; font-weight: 600; color: var(--n11);
}

/* Fő gomb: mellette a billentyűs tipp, hogy kiderüljön, Enterrel is megy. */
.reg-tovabb {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 1.5rem; padding: .78rem 1.5rem;
  font: inherit; font-size: 1.02rem; font-weight: 750;
  color: var(--reg-szoveg); background: var(--reg);
  border: 0; border-radius: var(--r-kozep);
  box-shadow: 0 1px 0 rgba(23, 19, 10, .06),
              0 10px 22px -12px color-mix(in srgb, var(--reg) 85%, transparent);
  cursor: pointer;
  transition: filter var(--atmenet), transform var(--atmenet), box-shadow var(--atmenet);
}
.reg-tovabb:hover { filter: brightness(1.04) saturate(1.05); }
.reg-tovabb:active { transform: scale(.98); }
.reg-tovabb[disabled] { opacity: .55; cursor: default; }
.reg-tipp {
  font-size: .74rem; font-weight: 600; opacity: .8;
}
.reg-masodlagos {
  display: block; margin-top: 1rem;
  padding: 0; font: inherit; font-size: .88rem;
  color: var(--n11); background: none; border: 0;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.reg-masodlagos:hover { color: var(--n12); }

/* Választható kártya, betűjellel – A, B, C. Ez a Typeform-érzés lelke. */
.reg-opcio {
  display: flex; align-items: flex-start; gap: .75rem;
  width: 100%; margin-bottom: .55rem;
  padding: .85rem 1rem;
  text-align: left; font: inherit;
  background: var(--n1); color: var(--n12);
  border: 1.5px solid var(--n6); border-radius: var(--r-nagy);
  box-shadow: var(--arnyek-1);
  cursor: pointer;
  transition: background var(--atmenet), border-color var(--atmenet),
              transform var(--atmenet), box-shadow var(--atmenet);
}
.reg-opcio:hover { background: var(--reg-vil); border-color: var(--reg-koz); box-shadow: var(--arnyek-2); }
.reg-opcio:active { transform: scale(.995); }
.reg-opcio.valasztott {
  border-color: var(--reg); background: var(--reg-vil);
}
.reg-opcio[disabled] {
  opacity: .5; cursor: default; border-style: dashed;
}
.reg-opcio[disabled]:hover { background: var(--n1); }
.reg-billentyu {
  flex: none;
  min-width: 1.55rem; height: 1.55rem; padding: 0 .3rem;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 700;
  color: var(--reg-hang);
  border: 1.5px solid var(--n6); border-radius: 7px;
}
.reg-opcio.valasztott .reg-billentyu {
  background: var(--reg); border-color: var(--reg); color: var(--reg-szoveg);
}
.reg-opcio-test { flex: 1; display: flex; flex-direction: column; gap: .12rem; }
.reg-opcio-cim { font-weight: 620; font-size: 1.02rem; }
.reg-opcio-leiras { font-size: .84rem; color: var(--n11); line-height: 1.45; }
.reg-opcio-ar {
  font-size: .82rem; font-weight: 700; color: var(--reg-hang);
}

/* Időpontrács: fejlécgombokkal, hogy ne legyen húsz koppintás. */
.reg-racs {
  display: grid;
  grid-template-columns: 3.4rem repeat(var(--napok, 5), 1fr);
  gap: .25rem;
}
.reg-fejgomb {
  padding: .35rem .2rem;
  font: inherit; font-size: .74rem; font-weight: 620;
  color: var(--n11); background: none;
  border: 0; border-radius: var(--r-kicsi);
  cursor: pointer; text-transform: capitalize;
}
.reg-fejgomb:hover { background: var(--n3); color: var(--n12); }
.reg-cella {
  height: 2.5rem;
  background: var(--n3);
  border: 1.5px solid transparent; border-radius: var(--r-kicsi);
  cursor: pointer;
  transition: background var(--atmenet), border-color var(--atmenet);
}
.reg-cella:hover { background: var(--n4); border-color: var(--n7); }
.reg-cella.valasztott {
  background: var(--reg); border-color: var(--reg);
  position: relative;
}
.reg-cella.valasztott::after {
  content: '✓';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--reg-szoveg); font-size: .95rem; font-weight: 800;
}
.reg-szamlalo {
  margin-top: .7rem; padding: .55rem .8rem;
  background: var(--n2); border-radius: var(--r-kozep);
  font-size: .87rem;
}

/* Beágyazott részvételi feltételek: itt helyben elolvasható. */
.reg-aszf {
  max-height: 15rem; overflow-y: auto;
  padding: .9rem 1rem;
  background: var(--n2);
  border: 1px solid var(--n5); border-radius: var(--r-nagy);
  font-size: .85rem; line-height: 1.6; color: var(--n11);
}
.reg-aszf h4 {
  margin: 1rem 0 .25rem;
  font-size: .85rem; font-weight: 680; color: var(--n12);
}
.reg-aszf h4:first-child { margin-top: 0; }
.reg-aszf p { margin: 0 0 .5rem; }
.reg-aszf-lab {
  display: flex; justify-content: space-between; align-items: center;
  gap: .5rem; margin-top: .4rem;
  font-size: .76rem; color: var(--n10);
}

/* Pipa a nyilatkozatokhoz: a címke mondja meg, mi kötelező és mi nem. */
.reg-pipa {
  display: flex; gap: .75rem; align-items: flex-start;
  margin-top: .9rem; padding: .8rem 1rem;
  background: var(--n1);
  border: 1.5px solid var(--n6); border-radius: var(--r-nagy);
  cursor: pointer;
  transition: border-color var(--atmenet), background var(--atmenet);
}
.reg-pipa:hover { border-color: var(--reg-koz); }
.reg-pipa.bejelolve { border-color: var(--reg); background: var(--reg-vil); }
.reg-pipa input { margin-top: .22rem; flex: none; width: 1.05rem; height: 1.05rem; }
.reg-pipa-cim { display: block; font-weight: 600; }
.reg-pipa-leiras {
  display: block; margin-top: .2rem;
  font-size: .82rem; line-height: 1.5; color: var(--n11);
}

/* Logó és fejléckép a nyitóképernyőn. */
.reg-logo {
  display: block; max-width: 11rem; max-height: 4rem;
  margin: 0 auto 1.1rem; object-fit: contain;
}
.reg-hero {
  display: block; width: 100%; max-height: 13rem;
  margin: 0 auto 1.3rem; object-fit: cover;
  border-radius: var(--r-nagy);
}

/* Kisebb mező a több mezős képernyőkön (számlázási cím). */
.reg-kis { font-size: 1.05rem; }
.reg-mezo { margin-bottom: .35rem; }
.reg-mezosor { display: flex; flex-wrap: wrap; gap: .9rem; }
.reg-mezosor > .reg-mezo { flex: 1 1 9rem; }

/* Összefoglaló a beküldés előtt. */
.reg-ossz {
  margin-bottom: 1.1rem; padding: .8rem 1rem;
  background: var(--n2); border-radius: var(--r-nagy);
}
.reg-ossz-sor {
  display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline;
  padding: .18rem 0;
}
.reg-ossz-nev { font-weight: 620; }
.reg-ossz-mellek { font-size: .84rem; color: var(--n11); }

/* Alsó sáv: vissza-gomb és lépésszám, halkan. */
.reg-lab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .8rem 1.25rem 1.4rem;
  max-width: 34rem; width: 100%; margin: 0 auto;
  font-size: .78rem; color: var(--n10);
}
.reg-vissza {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .7rem;
  font: inherit; font-size: .82rem;
  color: var(--n11); background: none;
  border: 1px solid var(--n6); border-radius: var(--r-teljes);
  cursor: pointer;
}
.reg-vissza:hover { color: var(--n12); border-color: var(--n8); }

/* Nyitó- és záróképernyő. */
.reg-nyito { text-align: center; }
.reg-nyito .reg-kerdes { font-size: 2rem; }
.reg-jelvenyek {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
  margin: 1.2rem 0 .2rem;
}
.reg-jelveny {
  padding: .3rem .7rem;
  background: var(--n2); border-radius: var(--r-teljes);
  font-size: .78rem; color: var(--n11);
}
.reg-korong {
  width: 4.5rem; height: 4.5rem; margin: 0 auto 1.2rem;
  display: grid; place-items: center;
  font-size: 2.1rem;
  background: var(--reg-vil); border-radius: var(--r-teljes);
}

@media (min-width: 40rem) {
  .reg-kerdes { font-size: 1.85rem; }
  .reg-nyito .reg-kerdes { font-size: 2.35rem; }
  .reg-torzs { padding-top: 3rem; }
}

/* ==========================================================================
   Jelentkezés testreszabása (admin)
   ========================================================================== */

.jelentkezes-link {
  display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start;
}
.jelentkezes-qr {
  display: flex; flex-direction: column; gap: .3rem; align-items: center;
  padding: .6rem; background: #fff; border-radius: var(--r-nagy);
}

/* Mentősáv: csak akkor látszik, ha tényleg van mit menteni. */
.mentosav {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: .6rem;
  margin-top: 1rem; padding: .7rem .9rem;
  background: var(--n2);
  border: 1px solid var(--n6); border-radius: var(--r-nagy);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
  font-size: .85rem;
}
.mentosav > span:first-child { flex: 1; color: var(--n11); }

/* Ki/be kapcsolható jelek: napok, órák, városok. */
.valaszto-sor { display: flex; flex-wrap: wrap; gap: .35rem; }
.valaszto-jel {
  padding: .38rem .7rem;
  font: inherit; font-size: .82rem; font-weight: 560;
  color: var(--n11); background: var(--n2);
  border: 1.5px solid var(--n6); border-radius: var(--r-teljes);
  cursor: pointer;
  transition: background var(--atmenet), border-color var(--atmenet),
              color var(--atmenet);
}
.valaszto-jel:hover { border-color: var(--a8); color: var(--n12); }
.valaszto-jel.aktiv {
  background: var(--marka); border-color: var(--y8); color: var(--marka-szoveg); font-weight: 700;
}

/* Indulás előtti ellenőrzőlista. */
.ellenorzo { display: flex; flex-direction: column; gap: .55rem; }
.ellenorzo-sor { display: flex; gap: .6rem; align-items: flex-start; }
.ellenorzo-jel {
  flex: none; width: 1.3rem; height: 1.3rem;
  display: grid; place-items: center;
  border-radius: var(--r-teljes);
  font-size: .78rem; font-weight: 700;
}
.ellenorzo-jel.ok  { background: var(--j3); color: var(--j11); }
.ellenorzo-jel.baj { background: var(--f3); color: var(--f11); }
.ellenorzo-sor .sugo { margin-top: .1rem; }

/* Meghirdetett órák listája. */
.ora-lista { display: flex; flex-direction: column; gap: .35rem; }
.ora-tetel {
  display: flex; flex-wrap: wrap; gap: .2rem .7rem; align-items: baseline;
  width: 100%; padding: .55rem .8rem;
  text-align: left; font: inherit;
  background: var(--n2); color: var(--n12);
  border: 1px solid var(--n6); border-radius: var(--r-kozep);
  cursor: pointer;
}
.ora-tetel:hover { border-color: var(--a8); }
.ora-tetel.kikapcsolt { opacity: .55; border-style: dashed; }
.ora-fo { font-weight: 620; }
.ora-mellek { font-size: .8rem; color: var(--n11); }

/* Fizetési módok választása – nagy, egyértelmű dobozok. */
.fizetes-utak { display: flex; flex-direction: column; gap: .5rem; }
.fizetes-ut {
  display: flex; flex-direction: column; gap: .15rem;
  width: 100%; padding: .8rem 1rem;
  text-align: left; font: inherit;
  background: var(--n1); color: var(--n12);
  border: 1.5px solid var(--n6); border-radius: var(--r-nagy);
  cursor: pointer;
  transition: border-color var(--atmenet), background var(--atmenet);
}
.fizetes-ut:hover { border-color: var(--a9); background: var(--a2); }
.fizetes-ut.tiltva { opacity: .55; cursor: default; border-style: dashed; }
.fizetes-ut.tiltva:hover { background: var(--n1); border-color: var(--n6); }
.fizetes-ut-cim { font-weight: 620; }
.fizetes-ut-leiras { font-size: .82rem; color: var(--n11); line-height: 1.45; }

/* Városbélyeg a gyerek neve mellett – két azonos nevűt így lehet
   megkülönböztetni a profil megnyitása nélkül. */
.cimke.varos { background: var(--a3); color: var(--a11); font-weight: 560; }

/* Lejárt pénzügyi tétel sora – ránézésre látszódjon. */
.sor-figyelem > td { background: var(--p2); }

/* ==========================================================================
   Arckép

   Kis kör a név mellett. Ha nincs fotó, a monogram áll benne – a lista
   így nem lyukacsos, amíg a képek gyűlnek.
   ========================================================================== */

.arckep {
  flex: none;
  display: inline-grid; place-items: center;
  border-radius: var(--r-teljes);
  object-fit: cover;
  background: var(--n4);
}
.arckep-betu {
  font-weight: 680; color: #2b2b2b;
  letter-spacing: .01em; line-height: 1;
  user-select: none;
}

/* A profil fejlécében kattintható, cserélhető. */
.arckep-doboz {
  flex: none;
  display: flex; flex-direction: column; gap: .25rem; align-items: center;
  margin-right: .9rem;
}
.arckep-gomb {
  position: relative;
  padding: 0; background: none; border: 0; cursor: pointer;
  line-height: 0; border-radius: var(--r-teljes);
}
.arckep-gomb:hover .arckep { filter: brightness(.94); }
.arckep-gomb:focus-visible { outline: none; box-shadow: var(--fokusz); }
.arckep-jel {
  position: absolute; right: -2px; bottom: -2px;
  width: 1.35rem; height: 1.35rem;
  display: grid; place-items: center;
  font-size: .8rem; line-height: 1; font-weight: 700;
  color: var(--marka-szoveg); background: var(--marka);
  border: 2px solid var(--n1); border-radius: var(--r-teljes);
}
.arckep-torol {
  padding: 0; font: inherit; font-size: .72rem;
  color: var(--n10); background: none; border: 0;
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.arckep-torol:hover { color: var(--p11); }

/* A jelenléti sor fejlécében az arckép a névvel egy sorban áll. */
.gyerek-sor .fejsor .arckep { margin-right: .1rem; }

/* ==========================================================================
   Vezetői áttekintő

   Csempék rácsban. A rács annyi oszlopot tölt ki, amennyi elfér – asztali
   gépen öt-hat fér egy sorba, telefonon kettő. Egy mérőszám így mindig egy
   önálló, olvasható egység marad, nem egy hosszú kártya közepe.
   ========================================================================== */

.kpi-szakasz { margin-bottom: 1.8rem; }
.kpi-cim {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .7rem;
  font-size: .78rem; font-weight: 750; letter-spacing: .08em;
  text-transform: uppercase; color: var(--n11);
}
/* Kis sárga jel a szakaszcím előtt – a márka ritmusa az oldalon. */
.kpi-cim::before {
  content: ''; flex: none; width: .55rem; height: .55rem; border-radius: 3px;
  background: var(--marka); box-shadow: 0 0 0 3px var(--y3);
}

.kpi-racs {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  margin-bottom: .6rem;
}
.kpi {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .15rem;
  padding: .95rem 1.05rem;
  background: var(--n1);
  border: 1px solid var(--n5); border-radius: var(--r-nagy);
  box-shadow: var(--arnyek-kartya);
  transition: transform var(--atmenet), box-shadow var(--atmenet);
}
.kpi:hover { transform: translateY(-1px); box-shadow: var(--arnyek-2); }
/* A kiemelt csempe az, amit elsőként keres a szem: márkaszínű felső sáv és
   egy leheletnyi sárga fény a sarokban. */
.kpi.kiemelt {
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--marka) 14%, transparent), transparent 60%),
    var(--n1);
}
.kpi.kiemelt::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--marka), var(--t10));
}
.kpi-ertek {
  font-size: 1.6rem; font-weight: 800; line-height: 1.1;
  letter-spacing: -.035em;
}
.kpi-cimke { font-size: .8rem; font-weight: 600; color: var(--n11); }
.kpi-alcim { font-size: .72rem; color: var(--n10); line-height: 1.35; }

/* Két doboz egymás mellett, ha van hely. */
.kpi-oszlopok {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.kpi-oszlopok > .kartya { margin: 0; }

@media (min-width: 60rem) {
  .kpi-ertek { font-size: 1.8rem; }
  .kpi-racs { gap: .7rem; }
}

/* ==========================================================================
   Jelentkezők (admin)
   ========================================================================== */

/* Állapotonkénti számok – egyben szűrőgombok. */
.jel-kpi {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 1rem;
}
.jel-kpi-elem {
  flex: 1 1 6.5rem;
  display: flex; flex-direction: column; gap: .1rem;
  padding: .6rem .8rem;
  text-align: left; font: inherit;
  background: var(--n1); color: var(--n12);
  border: 1.5px solid var(--n5); border-radius: var(--r-nagy);
  box-shadow: var(--arnyek-kartya);
  cursor: pointer;
  transition: border-color var(--atmenet), background var(--atmenet);
}
.jel-kpi-elem:hover { border-color: var(--n7); }
.jel-kpi-elem.aktiv {
  border-color: var(--y8);
  background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--marka) 24%, transparent), transparent 65%), var(--n1);
}
.jel-kpi-szam { font-size: 1.55rem; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
.jel-kpi-felirat { font-size: .78rem; color: var(--n11); }

.jel-szuro {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.jel-szuro > * { flex: 1 1 9rem; min-width: 0; }

/* Egy jelentkező sora. */
.jel-lista { display: flex; flex-direction: column; gap: .5rem; }
.jel-tetel {
  display: flex; align-items: stretch; gap: .2rem;
  background: var(--n1);
  border: 1px solid var(--n6); border-radius: var(--r-nagy);
  overflow: hidden;
}
.jel-jelolo { display: grid; place-items: center; padding: 0 .3rem 0 .7rem; }
.jel-test {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: .25rem;
  padding: .7rem .8rem;
  text-align: left; font: inherit;
  background: none; border: 0; color: var(--n12);
  cursor: pointer;
}
.jel-test:hover { background: var(--n2); }
.jel-fejsor {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
}
.jel-nev { font-weight: 640; font-size: 1.02rem; }
.jel-sorok {
  display: flex; flex-direction: column; gap: .1rem;
  font-size: .85rem; color: var(--n11);
}
.jel-idopont { font-weight: 560; color: var(--n12); }
.jel-csoport { color: var(--j11); font-weight: 560; }
.jel-lab {
  display: flex; flex-wrap: wrap; gap: .1rem .7rem;
  font-size: .76rem; color: var(--n10);
}
.jel-jegyzet { font-style: italic; }
.jel-gomb { align-self: center; margin-right: .7rem; flex: none; }
/* Meglévő szülő eltérő adata a jelentkezésen (3. kör): jelzés a kártyán,
   a döntés gombjai a kártya alatti sorban. */
.jel-tetel-csomag { display: flex; flex-direction: column; gap: .25rem; }
.lemondas-ok { flex: 1 1 100%; font-style: italic; }
.jel-elteres-jelzes { font-size: .82rem; color: var(--p11); font-weight: 560; }
.jel-elteres {
  display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center;
  justify-content: space-between; margin: 0 0 0 .4rem;
}
.jel-elteres .gomb-sor { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Adatpárok a részletek ablakban. */
.adatpar-lista {
  display: flex; flex-direction: column; gap: .1rem;
  margin-bottom: .9rem;
}
.adatpar {
  display: flex; flex-wrap: wrap; gap: .2rem .7rem;
  padding: .28rem 0; border-bottom: 1px solid var(--n4);
  font-size: .88rem;
}
.adatpar-cim { min-width: 10rem; color: var(--n10); }
/* Szakaszcím egy hosszabb szerkesztőablakon belül (pl. Várólista részletek). */
.modalis-szakasz {
  font-size: .95rem; margin: 1.1rem 0 .45rem; padding-top: .7rem;
  border-top: 1px solid var(--n4);
}

/* Forrásmegoszlás. */
.forras-sor {
  display: grid; grid-template-columns: 10rem 1fr auto;
  gap: .6rem; align-items: center;
  padding: .25rem 0; font-size: .84rem;
}
.forras-nev { color: var(--n12); }
.forras-savtart {
  height: .55rem; background: var(--n4); border-radius: var(--r-teljes);
  overflow: hidden;
}
.forras-sav { display: block; height: 100%; background: linear-gradient(90deg, var(--a9), var(--t9)); border-radius: var(--r-teljes); }
.forras-szam { color: var(--n11); font-size: .78rem; white-space: nowrap; }
@media (max-width: 40rem) {
  .forras-sor { grid-template-columns: 1fr; gap: .1rem; }
}

/* Kép-előnézet a testreszabásnál. */
.kep-elonezet {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
  margin-top: .5rem; padding: .7rem;
  background: var(--n2); border-radius: var(--r-nagy);
}
.kep-logo { max-height: 3rem; max-width: 10rem; object-fit: contain; }
.kep-fejlec {
  max-height: 6rem; max-width: 100%; object-fit: cover;
  border-radius: var(--r-kozep);
}

/* --- Összecsukható kártya ------------------------------------------------ */

/* Ami nem kell minden nap, az becsukva áll. A fejlécben marad a lényeg,
   hogy kinyitás nélkül is látszódjon, van-e ott bármi érdekes. */
.osszecsuk > summary {
  display: flex; align-items: center; gap: .5rem;
  cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: 600; color: var(--n12);
  margin: -.15rem 0;
}
.osszecsuk > summary::-webkit-details-marker { display: none; }
.osszecsuk > summary::before {
  content: '▸';
  flex: none;
  color: var(--n10);
  font-size: .9em;
  transition: transform .15s ease;
}
.osszecsuk[open] > summary::before { transform: rotate(90deg); }
.osszecsuk > summary:hover::before { color: var(--n12); }
.osszecsuk > summary:focus-visible { outline: 2px solid var(--f8); outline-offset: 3px; }
.osszecsuk-cim { flex: 1; }
.osszecsuk > summary .cimke { flex: none; }
.osszecsuk-tartalom { padding-top: .85rem; }

/* Becsukva ne foglaljon annyi helyet, mint egy teli kártya. */
.osszecsuk:not([open]) { padding-top: .8rem; padding-bottom: .8rem; }

/* Szöveges vélemény: idézetként, hogy olvasásra hívjon. */
.velemeny {
  margin: 0;
  padding: .6rem 0 .6rem .85rem;
  border-left: 3px solid var(--a6);
  border-top: 1px solid var(--n5);
}
.velemeny:first-of-type { border-top: 0; }

/* Szabad idősávok mátrixa: terem soronként, nap oszloponként. */
.savracs td, .savracs th { padding: .3rem .4rem; }
.kozepre { text-align: center; }
.savjel {
  display: inline-block;
  margin: .1rem .1rem 0;
  padding: .1rem .35rem;
  border-radius: var(--r-kicsi);
  font-size: .74rem; font-weight: 600;
  white-space: nowrap;
}
/* Zöld: legalább két óra, kényelmesen befér egy foglalkozás. */
.savjel.tagas { background: var(--j3); color: var(--j11); }
/* Sárga: egy óra, csak rövidebb foglalkozásnak. */
.savjel.szuk  { background: var(--f3); color: var(--f11); }

/* Kezdőbetű szerinti gyerekcsoportok: tömörebb, mint egy sima kártya. */
.betucsoport { padding: .55rem .85rem; margin-bottom: .5rem; }
.betucsoport > summary .osszecsuk-cim { font-size: 1.05rem; letter-spacing: .02em; }
.betucsoport .osszecsuk-tartalom { padding-top: .35rem; }

/* --- Adatvédelmi blokkok (szándékosan visszafogottak) -------------------- */

/* Kártya, de becsukva: ott van, ha kell, de nem vonja el a figyelmet. */
.adatvedelem-blokk > summary {
  display: flex; align-items: center; gap: .5rem;
  cursor: pointer; list-style: none;
  font-weight: 560; color: var(--n11);
}
.adatvedelem-blokk > summary::-webkit-details-marker { display: none; }
.adatvedelem-blokk > summary::before {
  content: '▸'; color: var(--n10); transition: transform .15s ease;
}
.adatvedelem-blokk[open] > summary::before { transform: rotate(90deg); }

/* A szülői oldal lábában: a lehető legdiszkrétebb. */
.adatvedelem { margin: 0 0 3rem; }
.adatvedelem > summary {
  cursor: pointer; list-style: none;
  text-align: center;
  font-size: .8rem; color: var(--n10);
  padding: .4rem;
}
.adatvedelem > summary::-webkit-details-marker { display: none; }
.adatvedelem > summary:hover { color: var(--n12); text-decoration: underline; }

/* --- Korábbi szezonok (összecsukott előzmény) ---------------------------- */

/* A lezárt szezonok adatait halványabban, becsukva mutatjuk, hogy egy
   pillantásra se lehessen összekeverni az aktuális szezonéval. */
.szezon-elozmeny {
  border: 1px solid var(--n5);
  border-radius: var(--r-kozep);
  margin-top: .6rem;
  background: var(--n2);
}
.szezon-elozmeny > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .7rem .85rem;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-kozep);
}
.szezon-elozmeny > summary::-webkit-details-marker { display: none; }
.szezon-elozmeny > summary::before {
  content: '▸';
  color: var(--n10);
  transition: transform .15s ease;
}
.szezon-elozmeny[open] > summary::before { transform: rotate(90deg); }
.szezon-elozmeny > summary:hover { background: var(--n3); }
.szezon-elozmeny > summary:focus-visible { outline: 2px solid var(--f8); outline-offset: 2px; }
.szezon-nev { font-weight: 650; }
.szezon-elozmeny > summary .cimke { margin-left: auto; }
.szezon-elozmeny > summary .cimke ~ .cimke { margin-left: 0; }
.szezon-tartalom {
  padding: .3rem .85rem .85rem;
  border-top: 1px solid var(--n5);
}
.szezon-tartalom h3 { font-size: .82rem; margin: .5rem 0 .35rem; color: var(--n11); }

/* --- Lebegő mentősáv ----------------------------------------------------- */

/* Telefonon az alsó ikonsáv fölé ül, hogy ne takarja el egyik a másikat. */
.mento-sav {
  position: sticky; bottom: var(--alsosav); z-index: 25;
  display: flex; align-items: center; gap: .75rem;
  margin: 1.15rem -1rem calc(-1.15rem - var(--alsosav));
  padding: .7rem 1rem;
  background: color-mix(in srgb, var(--n1) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--n6);
  border-bottom: 1px solid var(--n6);
}
.mento-sav .allapot { flex: 1; font-size: .84rem; color: var(--n11); }

/* Görgethető térköz, hogy az utolsó pontsor a lebegő mentősáv FÖLÉ tudjon
   emelkedni. A sáv negatív alsó margója miatt enélkül a sáv rá­csúszna. */
.mento-sav-terkoz { height: calc(3.75rem + var(--alsosav)); }
@media (min-width: 60rem) { .mento-sav-terkoz { height: 3.75rem; } }

@media (min-width: 60rem) {
  .mento-sav {
    bottom: 0;
    margin: 1.15rem -1.5rem -1.15rem;
    padding: .7rem 1.5rem;
    padding-bottom: max(.7rem, env(safe-area-inset-bottom));
    border-bottom: 0;
  }
}

/* --- Modális ablak ------------------------------------------------------- */

.fatyol {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
  background: color-mix(in srgb, #120a1c 48%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fatyol-be 160ms ease;
}
@keyframes fatyol-be { from { opacity: 0; } to { opacity: 1; } }
@keyframes buborekBe { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

.modalis {
  width: 100%; max-width: 34rem; max-height: 88vh;
  padding: 1.35rem 1.3rem;
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--n1);
  border: 1px solid var(--n5); border-bottom: 0;
  border-radius: 22px 22px 0 0;
  box-shadow: var(--arnyek-3);
  animation: modalis-be 240ms cubic-bezier(.2, .8, .2, 1);
}
.modalis { max-height: 88dvh; overscroll-behavior: contain; }
@keyframes modalis-be {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.modalis > h2 { margin-bottom: .95rem; font-size: 1.2rem; font-weight: 760; letter-spacing: -.022em; }
.modalis-labjegyzet { display: flex; gap: .5rem; margin-top: 1.1rem; }
.modalis-labjegyzet .gomb { flex: 1; }

@media (min-width: 40rem) {
  .fatyol { align-items: center; padding: 1rem; }
  .modalis { border-radius: 22px; border-bottom: 1px solid var(--n5); }
  @keyframes modalis-be {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to   { opacity: 1; transform: none; }
  }
}

/* --- Órarendi rács ------------------------------------------------------- */

.orarend { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 56rem) { .orarend { grid-template-columns: repeat(5, 1fr); } }

.orarend-nap {
  min-height: 4rem; padding: .6rem;
  background: var(--n1); border: 1px solid var(--n6);
  border-radius: var(--r-kozep);
}
.orarend-nap h3 {
  margin-bottom: .5rem;
  font-size: .72rem; font-weight: 620; color: var(--n11);
  text-transform: uppercase; letter-spacing: .05em;
}
.orarend-ora {
  display: block; margin-bottom: .4rem; padding: .45rem .55rem;
  font-size: .8rem; color: inherit; text-decoration: none;
  background: var(--a3); border-left: 3px solid var(--a9);
  border-radius: var(--r-kicsi);
  transition: background var(--atmenet), transform var(--atmenet);
}
.orarend-ora:hover { background: var(--a4); color: inherit; transform: translateX(2px); }
.orarend-ora .ido { font-weight: 680; color: var(--a11); }
.orarend-ora .hely { color: var(--n11); }

/* --- Számlálók ----------------------------------------------------------- */

.szamlalo { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.szamlalo > div { min-width: 4rem; }
.szamlalo .ertek {
  font-size: 1.75rem; font-weight: 780; line-height: 1.05; letter-spacing: -.035em;
}
.szamlalo .felirat {
  margin-top: .2rem;
  font-size: .7rem; font-weight: 650; color: var(--n10);
  text-transform: uppercase; letter-spacing: .06em;
}

/* --- Segédosztályok ------------------------------------------------------ */

.halvany { color: var(--n11); }
.kicsi   { font-size: .82rem; }
.jobbra  { text-align: right; }
.kozepre { text-align: center; }
.kod {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 680; letter-spacing: .09em;
}

.tolt { padding: 3rem 1rem; text-align: center; color: var(--n9); }

/* Csontváz-betöltés: kevésbé ugrál a felület, mint egy "Betöltés…" felirat */
.csontvaz {
  height: 3.2rem; margin-bottom: .5rem;
  background: linear-gradient(90deg, var(--n3) 25%, var(--n4) 37%, var(--n3) 63%);
  background-size: 400% 100%;
  border-radius: var(--r-kozep);
  animation: csontvaz 1.4s ease infinite;
}
@keyframes csontvaz {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}

/* --- Nyomtatvány ---------------------------------------------------------
   A nyomtatható nézetek MINDIG papírként jelennek meg, akkor is, ha a
   felhasználó sötét témát használ. Enélkül az ív a képernyőn másképp
   nézne ki, mint a papíron – és a világos hátterű cellákba világos
   betű kerülne, azaz olvashatatlan lenne.
   ------------------------------------------------------------------------ */

.nyomtatvany {
  --n1: #ffffff; --n2: #fbfbfc; --n3: #f2f3f5; --n4: #eaecef;
  --n5: #e1e4e8; --n6: #d3d7dc; --n7: #bcc2c9; --n8: #9aa2ab;
  --n9: #78818b; --n10: #67707a; --n11: #4d565f; --n12: #14181c;

  --a3: #eef2ff; --a6: #c3d0f7; --a9: #2a4fc4; --a11: #24408f;
  --j3: #e6f6ec; --j6: #b3ddc3; --j11: #14622f;
  --f3: #fdf2da; --f6: #f0dcaa; --f11: #7d4b05;
  --p3: #fdeaea; --p6: #f4c5c3; --p11: #a32a24;

  color: var(--n12);
  background: #ffffff;
  border: 1px solid var(--n6);
  border-radius: var(--r-nagy);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--arnyek-1);
  color-scheme: light;
}
.nyomtatvany table { color: var(--n12); }
.nyomtatvany th { background: var(--n3); color: var(--n11); }
.nyomtatvany tbody tr:hover { background: transparent; }

/* Jelenlét-jelek az íven: a háttér és a betűszín EGYÜTT változik. */
.jel { padding: 2px; text-align: center; font-weight: 700; }
.jel-jelen     { background: var(--j3); color: var(--j11); }
.jel-beteg     { background: var(--f3); color: var(--f11); }
.jel-hianyzott { background: var(--p3); color: var(--p11); }
.jel-elmaradt  { background: var(--n4); color: var(--n9); }
.fejlec-elmaradt { background: var(--p3) !important; color: var(--p11) !important; }

.alairas-vonal { border-bottom: 1px solid var(--n11); height: 2rem; }

/* --- Oklevél ------------------------------------------------------------- */

.oklevel { margin-bottom: 1.5rem; }
.oklevel-keret {
  padding: 14mm 12mm;
  text-align: center;
  border: 3px double var(--a9);
  border-radius: 4px;
}
.oklevel-fej {
  font-size: .85rem; font-weight: 620; letter-spacing: .12em;
  text-transform: uppercase; color: var(--n11);
}
.oklevel-cim {
  margin: 6mm 0 8mm;
  font-size: 2.6rem; font-weight: 300; letter-spacing: .22em;
  text-transform: uppercase; color: var(--a11);
}
.oklevel-nev {
  margin-bottom: 5mm;
  font-size: 1.9rem; font-weight: 700; letter-spacing: -.01em;
}
.oklevel-szoveg { max-width: 30rem; margin: 0 auto 7mm; font-size: .98rem; line-height: 1.6; }

.oklevel-szamok {
  display: flex; justify-content: center; gap: 3.5rem;
  padding: 5mm 0; margin-bottom: 5mm;
  border-top: 1px solid var(--n6); border-bottom: 1px solid var(--n6);
}
.oklevel-szam { font-size: 1.7rem; font-weight: 700; color: var(--a11); line-height: 1.1; }
.oklevel-felirat {
  font-size: .72rem; font-weight: 560; color: var(--n11);
  text-transform: uppercase; letter-spacing: .05em;
}

.oklevel-kiemeles { max-width: 30rem; margin: 0 auto 10mm; font-size: .95rem; }
.oklevel-lab { display: flex; justify-content: center; gap: 5rem; margin-top: 12mm; }
.oklevel-lab > div { min-width: 12rem; }

/* --- Szülői ív ----------------------------------------------------------- */

.szuloi-lap { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; margin-bottom: 1rem; }
@media (max-width: 50rem) { .szuloi-lap { grid-template-columns: 1fr; } }

.szuloi-iv {
  display: flex; flex-direction: column; gap: 3mm;
  padding: 5mm;
  background: #ffffff;
  border: 1px solid var(--n7); border-radius: var(--r-kozep);
}
.iv-fej {
  display: flex; gap: 4mm; align-items: flex-start;
  padding-bottom: 2.5mm; border-bottom: 1px solid var(--n6);
}
.iv-nev { margin: 1mm 0; font-size: 1.12rem; font-weight: 680; line-height: 1.2; }
.iv-qr { text-align: center; flex: none; }
.iv-qr svg { display: block; border: 1px solid var(--n6); border-radius: 3px; }

.iv-racs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5mm; flex: 1; }
.iv-cella {
  padding: 1mm 1mm 1.5mm; text-align: center;
  border: 1px solid var(--n7); border-radius: 3px;
  background: var(--n1);
}
.iv-datum {
  font-size: 8.5px; font-weight: 600; color: var(--n11);
  line-height: 1.2; white-space: nowrap;
}
/* Beírható kocka: körbe keretezve látszik, hogy ide kell jelölni. */
.iv-negyzet {
  height: 7mm; margin-top: 1mm;
  border: 1px solid var(--n8); border-radius: 2px;
  background: #ffffff;
}
.iv-lab { font-size: 8.5px; color: var(--n11); line-height: 1.35; }

/* --- Nyomtatás ----------------------------------------------------------- */

@media print {
  /* A nyomtatás mindig világos, függetlenül a képernyő módjától. */
  :root {
    --n1: #fff; --n2: #fff; --n3: #f2f2f2; --n4: #ebebeb; --n5: #e0e0e0;
    --n6: #cfcfcf; --n7: #b8b8b8; --n8: #9a9a9a;
    --n9: #6b6b6b; --n10: #5c5c5c; --n11: #4a4a4a; --n12: #000;
    --a3: #eef2ff; --a9: #2a4fc4; --a11: #24408f;
    --j3: #eaf6ee; --j11: #14532d; --f3: #fdf3dc; --f11: #7c4a03;
    --p3: #fdecec; --p11: #9b1c1c;
    color-scheme: light;
  }

  body { background: #fff; color: #000; font-size: 11px; }

  .fejlec, .oldalsav, .alsosav, .nyomtatas-rejt, .mento-sav, .fatyol {
    display: none !important;
  }

  .keret { display: block; }
  .tartalom { max-width: none; padding: 0; animation: none; }
  .kartya { padding: 0; margin: 0 0 .5rem; border: 0; box-shadow: none; }
  .tabla-doboz { overflow: visible; border: 0; }

  table { font-size: 10px; page-break-inside: auto; }
  tr { page-break-inside: avoid; }
  th, td { padding: 3px 4px; border: 1px solid #999; }
  th {
    position: static; background: #eee !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  .lapdobas { page-break-before: always; }

  /* A penzugyi elszamolas egyben maradjon: egy ketfele tort tetellista
     olvashatatlan, es vitat szul arrol, mi maradt le a lapról. */
  .lapdobas-elott { page-break-inside: avoid; }
  a { color: inherit; text-decoration: none; }

  .nyomtatvany {
    padding: 0; border: 0; border-radius: 0; box-shadow: none;
  }
  .jel, .fejlec-elmaradt, .nyomtatvany th {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  .szuloi-lap { gap: 10mm; margin: 0; page-break-inside: avoid; }
  .szuloi-iv  { border: 1px solid #999; box-shadow: none; page-break-inside: avoid; }
  .iv-cella   { border-color: #999; }
  .iv-negyzet { border-color: #666; }

  .keszseg-sav { border: 1px solid #999; }
  .keszseg-sav > span {
    background: #666 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

@page { size: A4 landscape; margin: 10mm; }

/* ==========================================================================
   Vezetői szűrősáv és diagram

   A szűrő a mutatók fölött ül, és mindig kiírja, MI látszik éppen – egy
   dátumtartomány fejből nem olvasható vissza egy legördülő értékéből.
   ========================================================================== */

.szuro-sav {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem;
  padding: .9rem 1.1rem; margin-bottom: 1.2rem;
  background: var(--n1); border: 1px solid var(--n5);
  border-radius: var(--r-nagy);
  box-shadow: var(--arnyek-kartya);
}
.szuro-mezo { display: flex; flex-direction: column; gap: .25rem; }
.szuro-mezo > label {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--n10);
}
.szuro-mezo select, .szuro-mezo input { min-width: 9rem; }
.szuro-datumpar { display: flex; gap: .4rem; }
.szuro-ertek { font-size: .92rem; font-weight: 560; color: var(--n12); }

/* Változás az összehasonlított időszakhoz képest. */
.kpi-delta {
  margin-top: .3rem; font-size: .74rem; font-weight: 560; line-height: 1.3;
}

/* A diagram vízszintesen görgethető: sok hónapnál nem zsugorítjuk
   olvashatatlanra, inkább csúsztatható. */
.diagram-doboz { overflow-x: auto; padding-bottom: .3rem; }
.diagram-doboz svg { display: block; max-width: none; }

.jelmagyarazat {
  display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: .7rem;
  font-size: .8rem; color: var(--n11);
}
.jelmagyarazat-elem { display: inline-flex; align-items: center; gap: .35rem; }
.jelmagyarazat-szin {
  width: .7rem; height: .7rem; border-radius: 4px; display: inline-block;
}

@media (max-width: 640px) {
  .szuro-sav { gap: .6rem; }
  .szuro-mezo { flex: 1 1 100%; }
  .szuro-mezo select, .szuro-mezo input { width: 100%; min-width: 0; }
}

/* --- Csoportszervező ----------------------------------------------------- */

.cssz-jelmagyarazat {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: .7rem;
  font-size: .74rem; color: var(--n10);
}
.cssz-racs-doboz { padding-bottom: .4rem; }
.cssz-nap { margin-bottom: 1rem; }
.cssz-nap-fej {
  display: flex; align-items: baseline; gap: .6rem;
  font-weight: 650; font-size: .95rem; margin: .2rem 0 .35rem;
  position: sticky; left: 0;
}
.cssz-racs { display: grid; gap: .25rem; min-width: max-content; align-items: stretch; }
.cssz-ido {
  font-size: .68rem; color: var(--n10); padding: 0 .25rem .15rem;
  border-left: 1px dashed var(--n6); font-variant-numeric: tabular-nums;
}
.cssz-terem {
  position: sticky; left: 0; z-index: 3;
  background: var(--n3); border-radius: var(--r-kicsi);
  padding: .35rem .5rem; font-size: .76rem; font-weight: 700; color: var(--n11);
}
.cssz-sav { background: var(--n2); border-radius: var(--r-kicsi); min-height: 2.6rem; }

.cssz-csoport {
  position: relative; z-index: 1; min-width: 0;
  background: var(--n1); border: 1px solid var(--n5); border-left: 4px solid var(--marka);
  border-radius: var(--r-kozep); padding: .38rem .5rem .45rem;
  box-shadow: var(--arnyek-kartya);
  transition: box-shadow var(--atmenet);
}
.cssz-csoport:hover { box-shadow: var(--arnyek-2); }
.cssz-csoport.figyelem { border-left-color: var(--f9); }
.cssz-csoport.hiba { border-left-color: var(--p9); }
.cssz-csoport-fej { display: flex; align-items: center; gap: .3rem; font-size: .8rem; }
.cssz-csoport-nev {
  flex: 1; min-width: 0; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cssz-csoport-al { font-size: .68rem; color: var(--n10); margin-top: .05rem; }
.cssz-szerk {
  border: 0; background: transparent; cursor: pointer; color: var(--n10);
  font-size: .9rem; padding: 0 .15rem; line-height: 1;
}
.cssz-szerk:hover { color: var(--a11); }
.cssz-figy { font-size: .68rem; line-height: 1.25; color: var(--f11); margin-top: .15rem; }
.cssz-figy.hiba { color: var(--p11); }

.cssz-gyerekek { display: flex; flex-wrap: wrap; gap: .22rem; margin-top: .3rem; min-height: 1.5rem; }
.cssz-gyerek {
  display: inline-flex; align-items: center; gap: .22rem; max-width: 100%;
  padding: .14rem .45rem; border-radius: var(--r-teljes);
  background: var(--n3); border: 1px solid var(--n6);
  font-size: .72rem; line-height: 1.25; cursor: grab;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.cssz-gyerek .kor { color: var(--n10); font-variant-numeric: tabular-nums; }
.cssz-gyerek.figyelem { background: var(--f3); border-color: var(--f6); }
.cssz-gyerek.kivalasztott {
  background: var(--marka); border-color: var(--y8); color: var(--marka-szoveg);
  outline: 2px solid var(--a9); outline-offset: 1px;
}
.cssz-gyerek.kivalasztott .kor { color: var(--marka-szoveg); opacity: .7; }
.cssz-szint {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.05rem; padding: 0 .22rem; border-radius: 4px;
  font-size: .6rem; font-weight: 750; line-height: 1.35; letter-spacing: .01em;
}
.cssz-szint.kezdo { background: var(--j3); color: var(--j11); }
.cssz-szint.visszatero { background: var(--a4); color: var(--a11); }
.cssz-szint.kerdes { background: var(--f3); color: var(--f11); outline: 1px dashed var(--f9); }
.cssz-barat-ok { color: var(--j9); }
.cssz-barat-rossz { color: var(--p9); }
.cssz-fizetett { color: var(--j9); font-weight: 700; }

.cssz-foglalt {
  position: relative; z-index: 1; min-width: 0;
  border: 1px dashed var(--n7); border-radius: var(--r-kozep);
  background: repeating-linear-gradient(45deg, var(--n4), var(--n4) 6px, var(--n3) 6px, var(--n3) 12px);
  padding: .3rem .45rem; font-size: .68rem; color: var(--n11); overflow: hidden;
}

.cssz-varo .cssz-gyerekek {
  min-height: 3rem; padding: .5rem; gap: .45rem .7rem;
  background: var(--n2); border: 1px dashed var(--n7); border-radius: var(--r-kozep);
}
.cssz-varo-elem { display: inline-flex; flex-direction: column; gap: .05rem; }

/* Kiválasztott gyereknél a lehetséges célok kiemelve. */
.cssz-valaszto-mod .cssz-csoport, .cssz-valaszto-mod ~ .cssz-varo { cursor: pointer; }
.cssz-valaszto-mod .cssz-csoport:hover { outline: 2px dashed var(--a8); outline-offset: 1px; }
.cssz-folott { outline: 2px dashed var(--a9) !important; outline-offset: 1px; background: var(--y2) !important; }
.cssz-szellem { position: fixed; z-index: 1000; pointer-events: none; box-shadow: var(--arnyek-3); }
body.cssz-huzas, body.cssz-huzas * { cursor: grabbing !important; }

.cssz-indok { font-size: .85rem; padding: .25rem 0; }
.cssz-indok.jo { color: var(--j11); }
.cssz-indok.rossz { color: var(--f11); }

.cssz-barat-blokk { padding: .6rem 0; border-top: 1px solid var(--n5); }
.cssz-barat-blokk:first-child { border-top: 0; }
.cssz-barat-sor {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .3rem 0 .3rem .6rem; font-size: .88rem;
}

/* --- Szülői oldal fejléce ------------------------------------------------ */

/* Márkás sáv: sárga fény a bal felső sarokban, lila a jobb alsóban. A név
   nagy és erős, mert a szülő ebből tudja, kinek az oldalát nézi. */
.szulo-fej {
  position: relative; overflow: hidden;
  margin: .4rem 0 1rem; padding: 1.1rem 1.15rem;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--marka) 38%, transparent), transparent 55%),
    radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--a9) 22%, transparent), transparent 60%),
    var(--n1);
  border: 1px solid var(--n5); border-radius: 22px;
  box-shadow: var(--arnyek-kartya);
}
.szulo-fej-sor { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.szulo-fej-monogram {
  flex: none; width: 3.1rem; height: 3.1rem;
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--marka); color: var(--marka-szoveg);
  font-size: 1.1rem; font-weight: 800; letter-spacing: .02em;
  box-shadow: var(--arnyek-marka);
}
.szulo-fej-szoveg { flex: 1; min-width: 10rem; }
.szulo-fej-intezmeny {
  font-size: .7rem; font-weight: 700; color: var(--a11);
  text-transform: uppercase; letter-spacing: .08em;
}
.szulo-fej-nev { margin: .05rem 0 0; font-size: 1.6rem; line-height: 1.15; }
.szulo-fej-alcim { margin-top: .15rem; font-size: .85rem; font-weight: 550; color: var(--n11); }
.szulo-fej-gombok { display: flex; gap: .4rem; }
.szulo-fej-gombok .gomb { background: color-mix(in srgb, var(--n1) 80%, transparent); backdrop-filter: blur(6px); }

@media (max-width: 30rem) {
  .szulo-fej { padding: .95rem; border-radius: 18px; }
  .szulo-fej-nev { font-size: 1.35rem; }
  .szulo-fej-monogram { width: 2.7rem; height: 2.7rem; border-radius: 14px; font-size: 1rem; }
}

/* Megyeválasztó: gépelés közben felajánlott megyék (assets/js/megyek.js). */
.megye-tarto { position: relative; }
.megye-javaslatok {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  margin: .2rem 0 0; padding: .25rem; list-style: none;
  background: var(--n1); border: 1px solid var(--n6);
  border-radius: var(--r-kozep); box-shadow: var(--arnyek-3);
  max-height: 16rem; overflow-y: auto;
}
.megye-javaslatok li {
  display: flex; justify-content: space-between; gap: .75rem;
  padding: .45rem .6rem; border-radius: var(--r-kicsi);
  cursor: pointer; font-size: 1rem; color: var(--n12);
}
.megye-javaslatok li span { color: var(--n10); }
.megye-javaslatok li[aria-selected="true"], .megye-javaslatok li:hover { background: var(--a3); }

/* Hub munkatér: ugyanazok a szemantikus tokenek, nyugodt sötét alap. */
body.hub-felulet {
  --n1:#18191d; --n2:#111216; --n3:#202126; --n4:#27282e;
  --n5:#303137; --n6:#3b3c43; --n7:#474952; --n8:#5a5d67;
  --n9:#787c88; --n10:#9398a6; --n11:#b2b6c2; --n12:#f1f2f5;
  --a1:#151a1c; --a2:#172124; --a3:#193035; --a4:#1c3c42;
  --a5:#224c53; --a6:#295c64; --a7:#32727b; --a8:#3d8d98;
  --a9:#3ec2cf; --a10:#70d4df; --a11:#70d4df; --a12:#d8f7fa;
  --t3:#142c30; --t4:#193940; --t6:#28545c; --t9:#3ec2cf; --t10:#70d4df; --t11:#70d4df; --t12:#d8f7fa;
  --j3:#142b20; --j6:#28553c; --j11:#76d8a0;
  --f3:#322813; --f6:#665125; --f11:#f1c66b;
  --p2:#29191b; --p3:#381c20; --p6:#693139; --p11:#ffaaaa;
  --y1:#211d10; --y2:#292414; --y3:#393119; --y4:#4b401d; --y5:#615221;
  --y6:#7a6827; --y7:#97812e; --y8:#bba035; --y11:#ffda60; --y12:#fff0b7;
  --r-nagy:12px; --r-kozep:10px;
  --arnyek-kartya:none; --arnyek-marka:none; --arnyek-be:none;
  --arnyek-1:0 1px 3px #0003; --arnyek-2:0 6px 20px #0004; --arnyek-3:0 16px 56px #0007;
  --fokusz:0 0 0 3px #3ec2cf40;
  color-scheme:dark; background:var(--n2); color:var(--n12);
}
[hidden] { display:none !important; }
.ugro-link { position:fixed;top:8px;left:8px;z-index:500;padding:12px;background:var(--n1);transform:translateY(-160%); }
.ugro-link:focus {transform:none;}
.tartalom:focus {outline:none;}
.hub-felulet .markajel {font-size:.9rem;padding:22px 16px;}
.hub-felulet .oldalsav {background:var(--n1);}
.hub-felulet .oldalsav-menu {min-height:0;overscroll-behavior:contain;scrollbar-width:thin;}
.hub-felulet .oldalsav-lab {flex-shrink:0;}
.hub-felulet .menupont {border-radius:7px;min-height:36px;font-size:.82rem;}
.hub-felulet .menupont.aktiv {background:var(--n4);color:var(--n12);box-shadow:inset 2px 0 var(--marka);}
.hub-felulet .menucsoport-cim {font-size:.69rem;letter-spacing:.04em;padding-top:8px;}
.admin-belepo {border:1px solid var(--n5);margin-bottom:10px;}
.hub-vissza {margin:0 10px 12px;}
.hub-felulet .tartalom {max-width:64rem;padding-top:28px;}
.hub-felulet .tartalom.szeles {max-width:100rem;}
.hub-felulet .fejlec {min-height:64px;background:var(--n2);backdrop-filter:none;}
.hub-felulet .fejlec .cim {font-size:.9rem;font-weight:600;}
.hub-felulet .gomb {box-shadow:none;min-height:36px;white-space:normal;}
.hub-felulet .gomb.elsodleges {color:var(--marka-szoveg);}
.hub-felulet .kartya {box-shadow:none;}
.hub-felulet .lista-elem {border-radius:8px;}
.oldal-fej {display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px;}
.oldal-fej h1 {font-size:1.65rem;}
.oldal-fej p {margin:8px 0 0;font-size:.88rem;line-height:1.6;}
.oldal-fej .gomb-sor {flex-shrink:0;}
.filterbar {display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 0;border-bottom:1px solid var(--n5);margin-bottom:16px;}
.filterbar input[type=search] {flex:1;min-width:180px;}
.filterbar select {width:auto;max-width:100%;}
.lista-osszegzes {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:14px 0;color:var(--n11);font-size:.8rem;}
.record-lista {display:grid;gap:4px;}
.record-lista .lista-elem {margin:0;border:0;border-bottom:1px solid var(--n5);background:transparent;}
.record-lista .lista-elem:hover {background:var(--n3);}
.record-lista .kod {display:none;}
.admin-kereso {max-width:36rem;margin:0 0 24px;}
.admin-kategoriak {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.admin-kategoria {padding:20px;border:1px solid var(--n5);border-radius:var(--r-kozep);background:var(--n1);}
.admin-kategoria h2 {font-size:1rem;}
.admin-kategoria p {line-height:1.6;margin:8px 0 14px;}
.admin-eszkozok {border-top:2px solid var(--f6);}
.admin-oldal-link {display:flex;gap:12px;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--n5);color:var(--n12);font-size:.85rem;text-decoration:none;}
.admin-oldal-link:last-child {border-bottom:0;}
.admin-oldal-link:hover {color:var(--a11);}
.admin-kereso-lista {background:var(--n1);border:1px solid var(--n5);border-radius:10px;padding:8px 20px;}
.gyorskereso-lista {max-height:55dvh;overflow:auto;margin-top:14px;}
.admin-tartalom > .kartya,.admin-tartalom > .beallitas-szakasz,
.admin-tartalom .beallitas-szerkeszto > .kartya {background:transparent;border:0;border-bottom:1px solid var(--n5);border-radius:0;padding:20px 0;box-shadow:none;}
.admin-tartalom h2 {margin-bottom:20px;}
.admin-tartalom .mezo {max-width:44rem;}
.admin-tartalom .sugo {line-height:1.6;max-width:42rem;}
.beallitas-osszegzes {margin:20px 0 24px;}
.beallitas-osszegzes > div {display:grid;grid-template-columns:minmax(160px,.8fr) minmax(0,1fr);gap:20px;padding:14px 0;border-bottom:1px solid var(--n5);font-size:.85rem;}
.beallitas-osszegzes dt {color:var(--n11);}
.beallitas-osszegzes dd {margin:0;overflow-wrap:anywhere;}
.beallitas-sugo p {margin-bottom:4px;}
.beallitas-sugo summary {font-size:.8rem;color:var(--a11);cursor:pointer;}
.hub-felulet .mento-sav {gap:12px;flex-wrap:wrap;max-width:100%;z-index:25;}
.hub-felulet .modalis {width:min(46rem,calc(100vw - 24px));max-width:calc(100vw - 24px);overflow-x:hidden;}
.modalis-labjegyzet {flex-wrap:wrap;align-items:center;}
.modalis-labjegyzet .gomb {flex:1 1 130px;min-width:0;max-width:100%;overflow-wrap:anywhere;}
.muvelet-menu {position:relative;}
.muvelet-menu > summary {list-style:none;cursor:pointer;}
.muvelet-lista {position:absolute;right:0;top:calc(100% + 6px);z-index:50;min-width:200px;max-width:calc(100vw - 32px);padding:8px;background:var(--n1);border:1px solid var(--n6);border-radius:8px;box-shadow:var(--arnyek-2);display:grid;gap:4px;}
.muvelet-lista .gomb {text-align:left;width:100%;}
.hub-felulet table {font-variant-numeric:tabular-nums;}
.hub-felulet td.jobbra,.hub-felulet th.jobbra {white-space:nowrap;}
.hub-felulet .tabla-doboz {max-width:100%;overscroll-behavior-x:contain;}
.ora-aktualis {border:1px solid var(--a8) !important;background:var(--a2) !important;}
.ora-szakasz {margin:24px 0 12px;font-size:.85rem;color:var(--n11);}
.workflow-lepesek {display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 24px;counter-reset:lepes;}
.workflow-lepesek span {padding:8px 12px;background:var(--n3);border-radius:6px;font-size:.8rem;}
.workflow-szakasz {margin-top:32px;padding-top:20px;border-top:1px solid var(--n5);scroll-margin-top:80px;}
.hub-felulet button[aria-busy="true"] {opacity:.65;cursor:wait;}
.hub-felulet :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible {outline:2px solid var(--a11);outline-offset:3px;}
.hub-felulet .tartalom:focus {outline:none;}
.jel-muveletek .muvelet-lista {top:auto;bottom:calc(100% + 6px);left:0;right:auto;}
.gyerek-profil-fej .kartya-fej {align-items:flex-start;flex-wrap:wrap;}
.gyerek-profil-fej .profil-reszletek {margin-top:12px;padding-top:12px;border-top:1px solid var(--n5);}
.gyerek-profil-fej .profil-reszletek summary {font-size:.85rem;color:var(--n11);cursor:pointer;}
@media(min-width:60rem) {
  .hub-felulet .oldalsav {width:232px;height:100dvh;}
  .hub-felulet .tartalom {padding:32px clamp(24px,3vw,40px);}
  .hub-felulet .fejlec {padding-left:32px;padding-right:32px;}
}
@media(max-width:59.99rem) {
  .hub-felulet .buborek-tartaly {bottom:calc(var(--alsosav) + 16px) !important;}
  .hub-felulet .tartalom {padding-top:20px;}
  .hub-felulet .mento-sav {bottom:var(--alsosav);}
  .kereso-felirat {display:none;}
}
@media(max-width:42rem) {
  .admin-kategoriak {grid-template-columns:1fr;gap:16px;}
  .oldal-fej {flex-wrap:wrap;}
  .oldal-fej .gomb-sor {width:100%;flex-wrap:wrap;}
  .beallitas-osszegzes > div {grid-template-columns:1fr;gap:6px;}
  .filterbar select {flex:1 1 140px;}
  .hub-felulet .fulek {max-width:100%;}
  .hub-felulet .modalis {padding:18px;}
  .hub-felulet .mento-sav {position:sticky;bottom:var(--alsosav);}
  .hub-felulet .mento-sav .allapot {flex-basis:100%;}
}

/* --- Oldalsáv: profilmenü és görgetésjelző (2026-10-10, 2. kör) ---------- */
.profil-menu {position:relative;}
.profil-gomb {width:100%;font:inherit;color:inherit;background:none;border:0;border-radius:7px;cursor:pointer;}
.profil-gomb:hover {background:var(--n3);}
.profil-gomb[aria-expanded="true"] .menucsoport-nyil {transform:rotate(180deg);}
.profil-lenyilo {position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:30;padding:6px;
  background:var(--n3);border:1px solid var(--n5);border-radius:10px;box-shadow:0 12px 32px #0008;}
.profil-lenyilo .menupont {margin:0;}
.hub-felulet .oldalsav-menu.tobb-lent {
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent);}
@media (min-width:60rem) and (max-height:56rem) {
  .hub-felulet .markajel {padding:16px;}
  .hub-felulet .menupont {min-height:32px;padding-top:.4rem;padding-bottom:.4rem;margin-bottom:.05rem;}
  .hub-felulet .menucsoport {margin-bottom:.6rem;}
  .hub-felulet .admin-belepo {margin-bottom:6px;}
}

/* Jelenléti ív asztali gépen: egy gyerek egy sor (név balra, a három gomb
   jobbra). 20+ fős csoportnál a kétsoros kártya 3000 px görgetést adott.
   Telefonon marad a teljes szélességű, hüvelykujjnyi gombsor. */
@media (min-width:60rem) {
  .hub-felulet .gyerek-sor {display:grid;grid-template-columns:minmax(0,1fr) 21rem;align-items:center;
    column-gap:1rem;padding:.45rem .6rem .45rem .8rem;margin-bottom:.3rem;}
  .hub-felulet .gyerek-sor .fejsor {margin-bottom:0;}
  .hub-felulet .gyerek-sor .statusz-gomb {padding:.5rem .3rem;}
}

/* Tanítványlista táblázat; telefonon soronként kártya. */
.gyerek-tabla tbody tr {cursor:pointer;}
.gyerek-tabla td {vertical-align:middle;}
.gyerek-tabla-nev {display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-weight:590;}
.gyerek-tabla-nev a {color:var(--n12);text-decoration:none;}
.gyerek-tabla-nev a:hover {text-decoration:underline;}
.gyerek-tabla .cimke-sor {margin:0;}
@media (max-width:42rem) {
  .gyerek-tabla {border:0;background:none;}
  .gyerek-tabla thead {display:none;}
  .gyerek-tabla tr {display:block;padding:.7rem .2rem;border-bottom:1px solid var(--n5);}
  .gyerek-tabla td {display:block;padding:.15rem 0 .15rem 2.6rem;border:0;font-size:.82rem;}
  .gyerek-tabla td:first-child {padding-left:0;font-size:.9rem;}
  .gyerek-tabla td:empty {display:none;}
}

/* F1 – Teendők blokk és jelöletlen gyerekek */
.teendok h2 {margin:0 0 .4rem;}
.teendo-csoport {padding:.5rem 0;border-top:1px solid var(--n5);}
.teendo-csoport:first-of-type {border-top:0;}
.teendo-cim {font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--n10);margin-bottom:.2rem;}
.teendo-sor {margin:0;padding:.45rem .2rem;border:0;background:none;}
.teendo-sor:hover {background:var(--n3);}
.ora-muveletek .muvelet-lista {left:0;right:auto;}
.jeloletlen-kiemeles .gyerek-sor.jeloletlen {border-color:var(--f8);box-shadow:0 0 0 1px var(--f8) inset;}

/* F2 – gyermekadatlap: kiemelt értékek, fejléc, fülsor */
.profil-csempek {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:1rem;}
.profil-csempe {display:block;padding:.75rem .9rem;border:1px solid var(--n5);border-radius:var(--r-kozep);background:var(--n1);color:var(--n12);text-decoration:none;min-width:0;}
a.profil-csempe:hover {border-color:var(--n7);background:var(--n2);}
.profil-csempe-cim {font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--n10);}
.profil-csempe-ertek {font-size:1.15rem;font-weight:700;margin:.15rem 0;font-variant-numeric:tabular-nums;}
.profil-muveletek {align-items:center;}
.hub-felulet .fulek.tobb-jobbra {-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);}
/* Az arckép a gyerek azonosítása: nagyobb, és telefonon a név mellett áll,
   így a fejléc rövidebb lesz, a kép viszont nem kisebb (megrendelői kérés). */
.gyerek-profil-fej .arckep-gomb .arckep {width:88px !important;height:88px !important;font-size:1.6rem;}
@media (max-width:42rem) {
  /* Telefonon a nagy arckép mellett csak a név áll; minden más alatta,
     teljes szélességben – így nem szorul egy keskeny oszlopba. */
  .gyerek-profil-fej .kartya-fej {display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.9rem;row-gap:.2rem;align-items:center;}
  .gyerek-profil-fej .kartya-fej > div:not(.arckep-doboz):not(.profil-muveletek) {display:contents;}
  .gyerek-profil-fej .kartya-fej > div:not(.arckep-doboz):not(.profil-muveletek) > * {grid-column:1 / -1;min-width:0;}
  .gyerek-profil-fej .kartya-fej > div:not(.arckep-doboz):not(.profil-muveletek) > h1 {grid-column:2;grid-row:1;margin:0 !important;}
  .gyerek-profil-fej .kartya-fej > .arckep-doboz {grid-column:1;grid-row:1;}
  .gyerek-profil-fej .kartya-fej > .profil-muveletek {grid-column:1 / -1;margin-top:.5rem;}
  .gyerek-profil-fej .kicsi > span {white-space:normal !important;}
  .gyerek-profil-fej h1 {font-size:1.35rem;}
  .profil-csempek {grid-template-columns:1fr 1fr;}
}
@media (max-width:42rem) { .profil-muveletek .muvelet-lista {left:0;right:auto;} }

/* F3 – soronkénti „⋯” menü és csoportadatlap */
.soron-menu > summary {min-width:2.2rem;justify-content:center;letter-spacing:.08em;}
.soron-menu .muvelet-lista {z-index:80;}
/* F3 – Órarend: hétvégi oszlop ugyanabban a rácsban, kiemelt mai nap */
@media (min-width: 56rem) { .orarend.orarend-hetvege { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.orarend-nap.orarend-ma { border-color: var(--a8); box-shadow: inset 0 2px 0 var(--a9); }

/* F4 – felvételi sáv: Lead → Jelentkező → Szabad hely */
.felvetel-sav {display:flex;align-items:stretch;gap:.4rem;margin:.6rem 0 1rem;flex-wrap:wrap;}
.felvetel-szakasz {flex:1 1 180px;display:flex;flex-direction:column;gap:.1rem;padding:.6rem .8rem;border:1px solid var(--n5);border-radius:var(--r-kozep);background:var(--n1);color:var(--n12);text-decoration:none;min-width:0;}
a.felvetel-szakasz:hover {border-color:var(--n7);background:var(--n2);}
.felvetel-szakasz.aktiv {border-color:var(--a8);box-shadow:inset 0 2px 0 var(--a9);}
.felvetel-szam {font-size:1.35rem;font-weight:750;font-variant-numeric:tabular-nums;}
.felvetel-cim {font-size:.82rem;font-weight:600;}
.felvetel-nyil {align-self:center;color:var(--n9);}
@media (max-width:42rem) { .felvetel-nyil {display:none;} .felvetel-szakasz {flex-basis:100%;flex-direction:row;align-items:baseline;gap:.5rem;flex-wrap:wrap;} }

/* F7/J1: átvezető kulcsszám-csempe – az egész kártya kattintható. */
.kpi-ugro { cursor: pointer; transition: border-color var(--atmenet); }
.kpi-ugro:hover, .kpi-ugro:focus-visible { border-color: var(--n8); }
.kulcs-sav .kpi-racs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .kulcs-sav .kpi-racs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .kulcs-sav .kpi-racs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kulcs-sav .kpi-ertek { font-size: clamp(1.15rem, 1.45vw, 1.5rem); white-space: nowrap; }

/* F7/J5: „Hogyan számoljuk?” – kis kör alakú „i” a mutató neve mellett. */
.def-gomb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; margin-left: .35rem; padding: 0;
  border: 1px solid var(--n7); border-radius: 50%; background: transparent;
  color: var(--n10); font: italic 600 .7rem/1 Georgia, serif; cursor: help;
  vertical-align: middle;
}
.def-gomb:hover, .def-gomb:focus-visible { color: var(--n12); border-color: var(--n9); }

/* F8/J1–J2: állapotcímke az admin hivatkozások mellett, teendőlista, áttekintő. */
.admin-oldal-jobb { display: inline-flex; align-items: center; gap: .5rem; }
.teendo-lista { margin: .4rem 0 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
.admin-attekinto { display: grid; gap: .6rem; }
.admin-attekinto-sor { display: block; color: inherit; text-decoration: none; }
.admin-attekinto-sor:hover, .admin-attekinto-sor:focus-visible { border-color: var(--n8); }

/* --- Körlevél: szerkesztő + élő előnézet -----------------------------------
 *
 * Fent a „Kinek megy?” sáv, alatta két hasáb: balra a megírás, jobbra
 * ragadósan az előnézet és a küldés – írás közben végig látszik, mi lesz a
 * levélből és kinek megy ki. Széles képernyőn (72rem felett) egymás mellett;
 * keskenyebben egymás alatt, az Írás / Előnézet fülváltóval.
 */
.korlevel-fulek { display: inline-flex; max-width: 100%; margin-bottom: 1rem; }
.korlevel-fulek .ful { flex: 0 1 auto; }
.korlevel-hasab-fej { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .75rem; }
.korlevel-hasab-fej h2 { margin: 0; flex: 1; min-width: 0; }
.korlevel-letszam { font-size: .9rem; padding: .3rem .8rem; }
.korlevel-kinek { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: flex-end; }
.korlevel-kinek-mezo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.korlevel-kinek-mezo > span { font-size: .8rem; font-weight: 700; color: var(--n11); }
.korlevel-kinek select { width: auto; max-width: 100%; }
.korlevel-cimzettek > .sugo, .korlevel-cimzettek > .uzenet { margin-top: .6rem; }

.sugo-reszlet { margin-top: .4rem; }
.sugo-reszlet > summary {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; color: var(--n11); cursor: pointer; list-style: none;
}
.sugo-reszlet > summary::-webkit-details-marker { display: none; }
.sugo-reszlet > summary::before {
  content: '?'; display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem;
  border-radius: 50%; border: 1.5px solid currentColor; font-size: .7rem; font-weight: 700;
}
.sugo-reszlet > summary:hover { color: var(--n12); }
.sugo-reszlet[open] > .sugo { margin-top: .35rem; max-width: 65ch; }

.korlevel-racs { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.korlevel-iras, .korlevel-oldal { min-width: 0; }
.korlevel-iras > h2 { margin-bottom: .9rem; }
.korlevel-oldal { display: flex; flex-direction: column; gap: 1rem; }
.korlevel-oldal > .kartya { margin-bottom: 0; }

.korlevel-level-fej {
  display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap;
  padding: .55rem .8rem; margin-bottom: .6rem;
  background: var(--n2); border: 1px solid var(--n5); border-radius: 10px; font-size: .88rem;
}
.korlevel-targy-kep { font-weight: 700; color: var(--n12); overflow-wrap: anywhere; }
.korlevel-targy-kep.halvany { font-weight: 400; color: var(--n10); }
.korlevel-elonezet iframe { height: 24rem !important; }
.korlevel-elonezet .sablon-elonezet { min-height: 12rem; max-height: 24rem; overflow: auto; margin: 0; }

.korlevel-muvelet h2 { margin-bottom: .4rem; }
.korlevel-kinek-osszegzes { margin: 0 0 .75rem; color: var(--n11); }
.korlevel-kinek-osszegzes strong { color: var(--n12); }
.korlevel-gombok { display: grid; gap: .5rem; margin-bottom: .6rem; }
.korlevel-gombok .gomb { width: 100%; }

.korlevel-nezet-valto { margin: 0 0 .75rem; }

@media (min-width: 72rem) {
  .tartalom:has(.korlevel-racs) { max-width: 84rem; }
  .korlevel-racs { grid-template-columns: minmax(0, 1.4fr) minmax(20rem, 1fr); }
  .korlevel-oldal { position: sticky; top: calc(64px + 1rem); }
  .korlevel-nezet-valto { display: none; }
}
@media (max-width: 71.99rem) {
  .korlevel-racs.mutat-elonezet .korlevel-iras { display: none; }
  .korlevel-racs:not(.mutat-elonezet) .korlevel-elonezet { display: none; }
}

/* A „Szöveg” címke és a mezőmenü egy sorban: ott van, ahol írsz. */
.korlevel-cimke-sor { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.korlevel-cimke-sor > label { margin: 0; }

/* --- Kereshető lenyíló menü (mezők, sablonok) ------------------------------ */
.kmenu { position: relative; display: inline-block; }
.kmenu-gomb { gap: .35rem; max-width: 100%; }
.kmenu-felirat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.kmenu-nyil { font-size: .7em; opacity: .7; }
.kmenu-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  width: min(22rem, calc(100vw - 2rem));
  display: flex; flex-direction: column; gap: .4rem; padding: .5rem;
  background: var(--n1); border: 1px solid var(--n5); border-radius: 14px; box-shadow: var(--arnyek-3);
}
.kmenu-panel.kmenu-bal { right: auto; left: 0; }
.kmenu-panel[hidden] { display: none; }
.kmenu-lista { max-height: 18rem; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.kmenu-elem {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
  padding: .45rem .6rem; border: 0; border-radius: 8px; background: none;
  font: inherit; text-align: left; color: var(--n12); cursor: pointer;
}
.kmenu-elem:hover, .kmenu-elem:focus-visible { background: var(--n3); outline: none; }
.kmenu-cim { font-weight: 700; font-size: .9rem; overflow-wrap: anywhere; }
.kmenu-leiras { font-size: .78rem; color: var(--n10); }
.kmenu-ures { padding: .6rem; font-size: .85rem; color: var(--n10); }
.kmenu-lab { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .5rem; border-top: 1px solid var(--n5); }

/* Csoportváltás: az iroda csoportjai koppintható kártyákként. */
.valaszto-lista { display: flex; flex-direction: column; gap: .4rem; }
.valaszto-kartya {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  width: 100%; padding: .65rem .8rem; text-align: left; font: inherit; cursor: pointer;
  border: 1px solid var(--n5); border-radius: .7rem; background: var(--n1, #fff); color: inherit;
}
.valaszto-kartya:hover { border-color: var(--n10); }
.valaszto-kartya:focus-visible { outline: 3px solid var(--fokusz, #20d4d4); outline-offset: 2px; }
.valaszto-kartya.valasztott { border-color: var(--fabton-sarga, #ffcb05); box-shadow: 0 0 0 2px var(--fabton-sarga, #ffcb05) inset; }

/* Szülői portál: Fejlődés kártya és beszámolók. */
.fejlodes-blokk { padding: .65rem 0; border-top: 1px solid var(--n5); }
.fejlodes-blokk:first-of-type { border-top: 0; }
.fejlodes-cim { font-weight: 700; margin-bottom: .3rem; display: flex; align-items: center; gap: .45rem; }
.fejlodes-ikon {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px;
  background: var(--fabton-sarga, #ffcb05); color: var(--navy, #062b45); font-size: .85rem; font-weight: 800;
}
.fejlodes-sor { padding: .15rem 0 .15rem 1.95rem; }
.fejlodes-idezet { margin: .7rem 0 0; padding: .6rem .85rem; border-left: 3px solid var(--fabton-sarga, #ffcb05); background: var(--n2); border-radius: .4rem; font-style: italic; }
.riport-sor { width: 100%; text-align: left; font: inherit; cursor: pointer; background: none; }
.riport-szoveg { white-space: pre-wrap; line-height: 1.55; max-height: 65vh; overflow-y: auto; }

/* Kurzustípus: értékelési mód (közös készségek / saját szempontok). */
.mod-sor { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; margin: .8rem 0; }
.mod-valaszto {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: left;
  padding: .75rem .9rem; font: inherit; cursor: pointer; color: inherit;
  background: var(--n1, #fff); border: 1.5px solid var(--n6); border-radius: .8rem;
}
.mod-valaszto.aktiv { border-color: var(--fabton-sarga, #ffcb05); box-shadow: 0 0 0 2px var(--fabton-sarga, #ffcb05) inset; }
.mod-valaszto:focus-visible { outline: 3px solid var(--fokusz, #20d4d4); outline-offset: 2px; }

/* D2c: lecketeljesítés – gyerekek × leckék, a fejlécben a dátum; egyedi jelvények. */
.teljesites-tabla th, .teljesites-tabla td { text-align: center; vertical-align: top; }
.teljesites-tabla th[scope='row'] { text-align: left; white-space: nowrap; }
.teljesites-fej { min-width: 9.5rem; }
.teljesites-fej > * { display: block; margin: .3rem auto 0; }
.teljesites-lecke { font-weight: 600; margin-bottom: .3rem; }
.teljesites-tabla input.teljesites-datum { width: 9rem; min-width: 0; min-height: 0; padding: .25rem .35rem; font-size: .8rem; }
.teljesites-cella .jelolo { justify-content: center; flex-direction: column; gap: .15rem; }
.teljesites-nap { min-height: 1em; }
.egyedi-cimzettek { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.egyedi-cimzettek .gomb.kicsi { padding: 0 .4rem; min-height: 0; line-height: 1.4; }

/* Osztály-ranglista (kivetítőre): sötét Fabton-lila, arany kiemelés, nagy betűk – mint az Akadémia előtere. */
.osztaly-ranglista {
  --or-hatter: #1b0b33; --or-felulet: #2a1450; --or-felulet2: #351a63; --or-szoveg: #fff; --or-halvany: #c9b8ec;
  --or-arany: var(--fabton-sarga, #ffcb05); --or-ezust: #d9dde6; --or-bronz: #e09a5a;
  background: radial-gradient(circle at 12% 0%, rgba(255, 203, 5, .14), transparent 40%),
              radial-gradient(circle at 100% 100%, rgba(138, 76, 255, .35), transparent 50%), var(--or-hatter);
  color: var(--or-szoveg); border-radius: 1.2rem; padding: clamp(1rem, 2.4vw, 2.4rem); min-height: 70vh;
  font-size: clamp(1rem, 1.25vw, 1.6rem);
}
.osztaly-ranglista:fullscreen { border-radius: 0; overflow: auto; padding: 3vh 3vw; }
.or-fej { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.or-felcim { color: var(--or-arany); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .8em; }
.or-fej h1 { margin: .15rem 0 0; font-size: 2.2em; line-height: 1.1; color: var(--or-szoveg); }
.or-muveletek { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.or-kapcsolok { display: inline-flex; background: var(--or-felulet); border-radius: 999px; padding: .25rem; }
.or-kapcsolo, .or-gomb {
  font: inherit; font-size: .8em; font-weight: 700; color: var(--or-szoveg); background: transparent; cursor: pointer;
  border: 0; border-radius: 999px; padding: .45em 1em; text-decoration: none;
}
.or-kapcsolo.aktiv { background: var(--or-arany); color: #1b0b33; }
.or-gomb { background: var(--or-felulet2); border: 1.5px solid rgba(255, 255, 255, .25); }
.or-gomb:hover, .or-kapcsolo:hover:not(.aktiv) { background: var(--or-felulet2); }
.or-kapcsolo:focus-visible, .or-gomb:focus-visible { outline: 3px solid var(--or-arany); outline-offset: 2px; }
.or-frissitve { color: var(--or-halvany); font-size: .75em; }
.or-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.or-sor {
  display: grid; grid-template-columns: 2.6em 3.6em minmax(0, 1fr) repeat(3, minmax(5.5em, 8em)); align-items: center; gap: 1em;
  background: var(--or-felulet); border-radius: 1rem; padding: .55em 1.1em; border: 2px solid transparent;
}
.or-sor.dobogo { background: var(--or-felulet2); }
.or-sor.hely-1 { border-color: var(--or-arany); box-shadow: 0 0 1.4rem rgba(255, 203, 5, .3); }
.or-sor.hely-2 { border-color: var(--or-ezust); }
.or-sor.hely-3 { border-color: var(--or-bronz); }
.or-hely { font-size: 1.6em; font-weight: 900; text-align: center; color: var(--or-halvany); }
.hely-1 .or-hely { color: var(--or-arany); }
.hely-2 .or-hely { color: var(--or-ezust); }
.hely-3 .or-hely { color: var(--or-bronz); }
.or-kep { width: 3.6em; height: 3.6em; border-radius: 50%; object-fit: cover; background: #4a2a86; border: 3px solid rgba(255, 255, 255, .35); }
.hely-1 .or-kep { border-color: var(--or-arany); }
/* A kezdőbetű nagyobb betűvel: a 2.25em itt ugyanaz a 3.6em-es kör. */
.or-betu { display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.6em; width: 2.25em; height: 2.25em; }
.or-betu.rejtett { color: var(--or-halvany); background: #3a3150; }
.or-nev-sor { font-size: 1.35em; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.or-szam { color: var(--or-arany); font-weight: 700; }
.or-rang { color: var(--or-halvany); font-size: .85em; display: flex; flex-wrap: wrap; align-items: center; gap: .5em; }
.or-rejtett { font-size: .8em; border: 1px solid var(--or-halvany); border-radius: 999px; padding: .05em .6em; }
.or-xp { text-align: right; }
.or-xp-szam { font-size: 1.35em; font-weight: 800; font-variant-numeric: tabular-nums; }
.or-xp-cim { color: var(--or-halvany); font-size: .65em; text-transform: uppercase; letter-spacing: .05em; }
.or-xp.kiemelt .or-xp-szam { color: var(--or-arany); font-size: 1.6em; }
.or-megjegyzes { color: var(--or-halvany); margin: .8rem 0 0; font-size: .8em; }
.or-kartyak h2 { color: var(--or-arany); font-size: 1.1em; margin: 1.6rem 0 .6rem; }
.or-kartya-sav { display: flex; gap: .7rem; overflow-x: auto; padding-bottom: .3rem; }
.or-kartya { flex: 0 0 auto; min-width: 10em; background: var(--or-felulet); border-radius: .8rem; padding: .6em .9em; border-top: 4px solid #8a7fb0; }
.or-kartya.kozonseges { border-top-color: #c98a4f; }
.or-kartya.kulonleges { border-top-color: #4fcf72; }
.or-kartya.ritka { border-top-color: #4fb3ff; }
.or-kartya.epikus { border-top-color: #b46cff; }
.or-kartya.legendas { border-top-color: var(--or-arany); box-shadow: 0 0 14px rgba(255, 214, 80, .35); }
.or-kartya-nev { font-weight: 800; }
.or-kartya-ki { color: var(--or-halvany); font-size: .75em; }
.or-uzenet { background: var(--or-felulet); border-radius: 1rem; padding: 2em; text-align: center; color: var(--or-halvany); }
.or-uzenet-cim { color: var(--or-szoveg); font-size: 1.4em; font-weight: 800; margin-bottom: .4em; }
@media (max-width: 760px) {
  .or-sor { grid-template-columns: 2em 3em minmax(0, 1fr) minmax(4.5em, auto); }
  .or-sor .or-xp:not(.kiemelt) { display: none; }
}

/* Szülői portál: az Akadémia-rész a Fejlődés kártyán. */
.akademia-resz { display: flex; gap: .9rem; align-items: center; }
.akademia-resz-kep { width: 3.4rem; height: 3.4rem; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: var(--a3, #e9e2fb); color: var(--a11, #4b2a8f); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.3rem; border: 2px solid var(--fabton-sarga, #ffcb05); }
.akademia-resz-nev { font-weight: 800; font-size: 1.05rem; }

/* Akadémia-kódok (54): a saját tanári kód és a vendég kódok kivetítője. */
.akod-sajat, .akod-vendeg, .akod-kodzar { margin-bottom: 1rem; }
.akod-nagy { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 800; letter-spacing: .12em; margin: .5rem 0 .25rem; color: var(--szoveg, inherit); }
.akod-kod { font-size: 1.05rem; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
/* Kódok: olyan betűtípus, amelyben az S/5, Z/2, B/8, G/6 jól megkülönböztethető (2026-10-21). */
.akod-kod, .akad-kod, .akod-kiv-kod { font-family: "Cascadia Mono", Consolas, "DejaVu Sans Mono", "Roboto Mono", "Liberation Mono", ui-monospace, monospace;
  font-variant-ligatures: none; font-variant-numeric: slashed-zero; }
.akademia-kapcsolat { color: #b45309; font-weight: 600; margin: .2rem 0 .4rem; }
.akod-tabla { width: 100%; border-collapse: collapse; }
.akod-tabla th, .akod-tabla td { text-align: left; padding: .45rem .5rem; border-top: 1px solid var(--vonal, #e5e7eb); vertical-align: top; }
.akod-tabla th { font-size: .85rem; font-weight: 640; border-top: 0; }
.akod-muveletek { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.akod-kivetito { background: radial-gradient(circle at 12% 0%, rgba(255, 203, 5, .16), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(138, 76, 255, .35), transparent 50%), #1b0b33;
  color: #fff; border-radius: 1rem; padding: clamp(1.2rem, 4vw, 3rem); text-align: center; }
.akod-kivetito:fullscreen { border-radius: 0; display: flex; flex-direction: column; justify-content: center; font-size: 1.6vw; }
.akod-kiv-felcim { color: var(--fabton-sarga, #ffcb05); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .85em; }
.akod-kiv-cim { font-size: 1.8em; font-weight: 800; margin: .3em 0 .8em; }
.akod-kiv-utmutato { color: #c9b8ec; font-size: 1.1em; }
.akod-kiv-kod { font-weight: 800; letter-spacing: .14em;
  font-size: clamp(2.6rem, 10vw, 7rem); margin: .2em 0; color: #fff; }
.akod-kivetito:fullscreen .akod-kiv-kod { font-size: 12vw; }
.akod-kiv-hasznalat { color: #c9b8ec; font-size: 1.05em; }