/* ============================================================
   assets/style.css — A rendszer teljes design systemje.
   Ki használja: minden oldal, a layout.php tölti be.
   Mit ne felejts: színt SOHA ne írj be közvetlenül — mindig a :root
   változóit használd, különben a világos mód eltörik. Mobil-első a
   szerkezet: az alap szabályok telefonra szólnak, a @media blokkok
   felfelé bővítenek (640 / 900 / 1200 px).
   ============================================================ */

/* ─────────────────────────────────────────────
   1. TOKENEK
   ───────────────────────────────────────────── */
:root{
  /* A --brand-300, a --sky és a --faint a specifikációhoz képest egy árnyalattal
     világosabb: így a legvilágosabb felületen (--surface-2) is teljesül a
     WCAG AA 4.5:1 kontraszt. A márkaszín (--brand) változatlan. */
  --brand:#A4281F;  --brand-600:#8C201A;  --brand-300:#E0705E;  --brand-glow:rgba(164,40,31,.35);
  /* A csapat CÍMERÉNEK saját bordója. Szándékosan NEM téma-függő: a címer
     festett kép, a háttere minden témában ugyanaz a szín — enélkül a
     lekerekített doboz sarkában kilátszana egy idegen színű sarló. */
  --brand-cimer:#8D1626;
  --ember:#E08A3C;                /* borostyán kiemelés, figyelmeztetés */
  --forest:#3E5C48;  --forest-300:#7FA88C;   /* természet-akcent, siker */
  --sky:#5E93B8;                  /* info, megbeszélés */
  --bg:#141110;  --bg-2:#1C1817;  --surface:#231E1C;  --surface-2:#2C2523;
  --line:rgba(255,255,255,.08);
  --text:#F6F1ED;  --muted:#B6A69E;  --faint:#9C8C84;
  --radius:16px;  --radius-sm:10px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Származtatott tokenek */
  --line-eros:rgba(255,255,255,.16);
  --surface-attetszo:rgba(35,30,28,.82);
  --fejlec-magassag:60px;
  --oldalsav-szelesseg:236px;
  --mobil-nav-magassag:62px;

  /* v4.1 — iPhone kezdőképernyős (webapp) módban a lap a KÉPERNYŐ TETEJÉTŐL indul,
     az óra és a térerő alatt is. Ezek a tokenek mondják meg, mennyit kell kihagyni,
     hogy a fejléc a telefon állapotsávja ALATT üljön. Böngészőben és asztali gépen
     az env() értéke 0px, tehát ott semmi nem változik. */
  --biztonsag-felul:env(safe-area-inset-top, 0px);
  --biztonsag-alul:env(safe-area-inset-bottom, 0px);
  --biztonsag-bal:env(safe-area-inset-left, 0px);
  --biztonsag-jobb:env(safe-area-inset-right, 0px);
  /* A fejléc TELJES helyfoglalása: a sáv magassága + a fölötte kihagyott állapotsáv.
     Mindenhol ezt kell használni, ahol valami a fejléc alá igazodik (body felső
     margója, oldalsáv teteje, ragadós címek). */
  --fejlec-teljes:calc(var(--fejlec-magassag) + var(--biztonsag-felul));
  --siker:var(--forest-300);
  --veszely:var(--brand-300);
  --focus:0 0 0 2px var(--bg), 0 0 0 4px var(--brand-300);
  --cim-betu:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --szoveg-betu:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* A háttér két finom fényfoltja. Tokenben van, hogy a világos mód
     halkabbra tudja venni — ott a sötét alapon jó derengés harsány lenne. */
  --hatter-fenylatt:rgba(164,40,31,.16);
  --hatter-fenylatt2:rgba(62,92,72,.10);

  /* ─── Naptári alkalomtípusok (Sahara v1) ───
     Szándékosan NEM a márkaszínből származnak. Ez egy JELMAGYARÁZAT: az öt
     típusnak öt, egymástól ránézésre megkülönböztethető színe kell legyen,
     a bordó pedig csak az egyikük lehetne.
     Az őrsgyűlés szándékosan a leghalkabb: az minden héten ugyanakkor van,
     helyette inkább a ritka alkalom (különprogram, túra) vonja magára a szemet. */
  --tip-orsgyules:#7E8C82;
  --tip-kulonprogram:#E0705E;
  --tip-tura:#6FAE86;
  --tip-mozi:#E0A83C;
  --tip-megbeszeles:#6E9BC4;
}

/* Alapértelmezés: a RENDSZER beállítása dönt (prefers-color-scheme).
   A fenti :root a sötét alap; ha a rendszer világos módban van ÉS a felhasználó
   nem választott kézzel sötétet, akkor a világos tokenek lépnek életbe.
   Ez JavaScript nélkül is működik. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
  --bg:#FAF6F3; --bg-2:#F2EBE6; --surface:#FFFFFF; --surface-2:#F7F1ED;
  --line:rgba(20,17,16,.10); --text:#1C1817; --muted:#6B5B54; --faint:#79685F;
  --shadow:0 8px 24px rgba(90,60,50,.10);

  --line-eros:rgba(20,17,16,.18);
  --surface-attetszo:rgba(255,255,255,.86);
  --brand-300:#8C201A;            /* világos alapon sötétebb árnyalat kell a kontraszthoz */
  --forest-300:#2F4A38;
  --ember:#B25F13;
  --sky:#2F6489;
  --siker:#2F4A38;
  --veszely:#8C201A;
  --focus:0 0 0 2px #fff, 0 0 0 4px var(--brand);
  --hatter-fenylatt:rgba(164,40,31,.09);
  --hatter-fenylatt2:rgba(62,92,72,.07);
  /* Világos alapon sötétebb árnyalat kell (lásd a sötét blokk magyarázatát). */
  --tip-orsgyules:#6E7C72;
  --tip-kulonprogram:#B23E2E;
  --tip-tura:#3E7D57;
  --tip-mozi:#A8700F;
  --tip-megbeszeles:#2F6489;

  }
}

/* Kézi választás: a fejléc kapcsolója ezt állítja be, és mindkét irányban felülírja a rendszert. */
[data-theme="light"]{
  --bg:#FAF6F3; --bg-2:#F2EBE6; --surface:#FFFFFF; --surface-2:#F7F1ED;
  --line:rgba(20,17,16,.10); --text:#1C1817; --muted:#6B5B54; --faint:#79685F;
  --shadow:0 8px 24px rgba(90,60,50,.10);

  --line-eros:rgba(20,17,16,.18);
  --surface-attetszo:rgba(255,255,255,.86);
  --brand-300:#8C201A;            /* világos alapon sötétebb árnyalat kell a kontraszthoz */
  --forest-300:#2F4A38;
  --ember:#B25F13;
  --sky:#2F6489;
  --siker:#2F4A38;
  --veszely:#8C201A;
  --focus:0 0 0 2px #fff, 0 0 0 4px var(--brand);
  --hatter-fenylatt:rgba(164,40,31,.09);
  --hatter-fenylatt2:rgba(62,92,72,.07);
  /* Világos alapon sötétebb árnyalat kell (lásd a sötét blokk magyarázatát). */
  --tip-orsgyules:#6E7C72;
  --tip-kulonprogram:#B23E2E;
  --tip-tura:#3E7D57;
  --tip-mozi:#A8700F;
  --tip-megbeszeles:#2F6489;

}


/* ─────────────────────────────────────────────
   2. ALAPOK
   ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* FONTOS: a [hidden] attribútum erősebb legyen, mint bármelyik display szabályunk.
   E nélkül a display:grid/flex komponensek (modál, panel) nem tűnnének el. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--szoveg-betu); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Nagyon finom zajréteg + felső fénygradiens */
  background-image:
    radial-gradient(1100px 560px at 50% -180px, var(--hatter-fenylatt), transparent 72%),
    radial-gradient(700px 400px at 100% 8%, var(--hatter-fenylatt2), transparent 70%);
  background-attachment:fixed;
}
h1,h2,h3,h4,h5{font-family:var(--cim-betu); font-weight:600; line-height:1.25; letter-spacing:-.015em; margin:0 0 .4em}
h1{font-size:clamp(22px,4.4vw,30px)}
h2{font-size:clamp(18px,3.2vw,22px)}
h3{font-size:17px}
h4{font-size:15.5px}
p{margin:0 0 1em}
a{color:var(--brand-300); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; display:block}
small{font-size:13.5px}
code{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
     background:rgba(128,128,128,.14); padding:2px 6px; border-radius:5px}
hr{border:0;border-top:1px solid var(--line);margin:22px 0}
::selection{background:var(--brand); color:#fff}
:focus-visible{outline:none; box-shadow:var(--focus); border-radius:6px}
.ikon{flex:none; vertical-align:middle}
.halvany{color:var(--muted)}
.nagyon-halvany{color:var(--faint)}
.rejtve{display:none !important}
.csak-olvasoknak{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ugras-tartalomra{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--brand);color:#fff;
  padding:10px 16px;border-radius:8px}
.ugras-tartalomra:focus{left:8px}

/* ─────────────────────────────────────────────
   3. SZERKEZET
   ───────────────────────────────────────────── */
/* v3: a fejléc RÖGZÍTETT — soha nem görög el, csak a tartalom mozog alatta.
   A body felső belső margója pontosan a fejléc magassága (lásd body.app). */
.fejlec{
  position:fixed; top:0; left:0; right:0; z-index:60;
  /* A magasság a sáv MAGASSÁGA + a telefon állapotsávja, a felső belső margó
     pedig lenyomja a tartalmat az óra alá. Enélkül kezdőképernyős (webapp)
     módban a menügomb és a márka belelógna az órába és a térerőbe. */
  height:var(--fejlec-teljes);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:var(--biztonsag-felul) max(12px, var(--biztonsag-jobb)) 0 max(12px, var(--biztonsag-bal));
  background:var(--uveg-hatter);
  backdrop-filter:var(--uveg-elmosas);
  -webkit-backdrop-filter:var(--uveg-elmosas);
  border-bottom:1px solid var(--uveg-szegely);
}
/* Finom fényél a sáv alján — ettől „üveglap” a fejléc, nem festett csík. */
.fejlec::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--uveg-fenyel), transparent);
  pointer-events:none;
}
body.app{padding-top:var(--fejlec-teljes)}
.fejlec-bal{display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 auto}
.marka{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; min-width:0}
.marka:hover{text-decoration:none}
.marka-jel{
  width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  overflow:hidden; background:var(--brand-cimer); color:#fff;
  box-shadow:0 4px 14px var(--brand-glow);
}
/* A csapat címere képként. A fájl négyzetes és átlátszatlan (bordó alap), ezért
   a lekerekítést a beágyazó doboz overflow:hidden-je adja hozzá — így a kép
   szélétől a sarokig nem marad világos csík. */
.csapat-logo{display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit}
/* A címer SZÁNDÉKOSAN csak nagyban jelenik meg (fejléc, bejelentkezés,
   alkalmazásikon, üres állapot). A 12–20 px-es, szövegbe ágyazott helyeken a
   rajzolt vonalas liliom marad: egy festett címer ekkora méretben olvashatatlan
   folt lenne, és kilógna a többi vonalas ikon közül. */
.marka-szoveg{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.marka-szoveg strong{font-family:var(--cim-betu);font-size:16px;letter-spacing:-.01em}
.marka-szoveg small{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fejlec-jobb{display:flex;align-items:center;gap:8px}

.keret{display:flex; align-items:flex-start; gap:0; min-height:calc(100vh - var(--fejlec-teljes))}
.oldalsav{display:none}
.fotartalom{
  flex:1 1 auto; min-width:0; width:100%;
  /* Az alsó sáv magasabb annyival, amennyi a telefon gesztussávja — a tartalom
     alsó margója ezt is beleszámolja, hogy az utolsó kártya se csússzon alá. */
  padding:18px max(14px, var(--biztonsag-jobb)) calc(var(--mobil-nav-magassag) + var(--biztonsag-alul) + 30px) max(14px, var(--biztonsag-bal));
  max-width:1240px; margin:0 auto;
}
.oldal-fej{margin:2px 0 18px}
.oldal-fej h1{margin:0 0 4px}
.oldal-alcim{color:var(--muted); font-size:14.5px; margin:0; max-width:70ch}
.lablec{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);color:var(--faint);font-size:13px}
.lablec p{margin:0}

/* Oldalsáv-linkek (asztali) és mobil-nav közös elemei */
.nav-elem{
  position:relative; display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:var(--radius-sm);
  color:var(--muted); font-size:14.5px; font-weight:500; text-decoration:none;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.nav-elem:hover{background:var(--surface-2); color:var(--text); text-decoration:none}
.nav-elem.aktiv{color:var(--text); background:var(--surface-2)}
.nav-elem.aktiv::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--brand);
}
.nav-jelveny{
  margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:var(--brand); color:#fff; font-size:11.5px; font-weight:700;
  display:grid; place-items:center; line-height:1;
}

/* Mobil alsó navigáció */
/* v3: az alsó sáv is RÖGZÍTETT és üveges — a v3 másik nagy grafikai jegye. */
.mobil-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  height:calc(var(--mobil-nav-magassag) + var(--biztonsag-alul));
  padding-bottom:var(--biztonsag-alul);
  display:flex; align-items:stretch;
  background:var(--uveg-hatter);
  backdrop-filter:var(--uveg-elmosas); -webkit-backdrop-filter:var(--uveg-elmosas);
  border-top:1px solid var(--uveg-szegely);
}
.mobil-nav::before{
  content:''; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--uveg-fenyel), transparent);
  pointer-events:none;
}
.mobil-elem{
  position:relative; flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border:0; background:none; cursor:pointer; padding:6px 2px;
  color:var(--muted); font:500 10.5px/1.2 var(--szoveg-betu); text-decoration:none;
  min-height:44px;
}
.mobil-elem .nav-felirat{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* Öt elem közül a leghosszabb az „Elérhetőségek”: 400 px alatt egy hajszállal
   nem fér ki, ezért ott kisebb a felirat. Rövidíteni nem akarjuk — az alsó sáv
   és az oldalsáv címkéi szó szerint egyezzenek. */
@media (max-width:409.98px){
  .mobil-elem{font-size:10px; padding-left:1px; padding-right:1px}
}
.mobil-elem:hover{text-decoration:none;color:var(--text)}
.mobil-elem.aktiv{color:var(--brand-300)}
.mobil-elem.aktiv::after{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:3px; border-radius:0 0 3px 3px; background:var(--brand);
}
.mobil-elem .nav-jelveny{position:absolute; top:5px; right:calc(50% - 20px); margin:0}

/* Mobil „Több” panel */
.lap-hatter{position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.5);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}
.tobb-lap{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:var(--surface); border-top:1px solid var(--line);
  border-radius:20px 20px 0 0; padding:10px 14px calc(18px + var(--biztonsag-alul));
  box-shadow:0 -16px 40px rgba(0,0,0,.4);
  animation:felcsuszik .26s var(--ease);
}
.tobb-fogantyu{width:40px;height:4px;border-radius:4px;background:var(--line-eros);margin:2px auto 12px}
.tobb-racs{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.tobb-racs a,.tobb-racs button{
  display:flex; align-items:center; gap:10px; padding:14px 12px; min-height:52px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface-2); color:var(--text); font:500 14px var(--szoveg-betu);
  text-decoration:none; cursor:pointer; text-align:left;
}
.tobb-racs a:hover,.tobb-racs button:hover{border-color:var(--line-eros); text-decoration:none}
.tobb-racs .nav-jelveny{margin-left:auto}
.tobb-kilepes-urlap{margin-top:10px}

/* Csupasz keret (belépés, jelszócsere) */
/* Belépés / jelszócsere: itt nincs fejléc, ezért a doboz maga kerüli ki a
   telefon állapotsávját és a gesztussávot. */
body.csupasz{display:grid; place-items:center; min-height:100vh;
  padding:calc(22px + var(--biztonsag-felul)) max(16px, var(--biztonsag-jobb))
          calc(22px + var(--biztonsag-alul)) max(16px, var(--biztonsag-bal))}
.csupasz-kozep{width:100%; max-width:430px}

/* ─────────────────────────────────────────────
   4. KOMPONENSEK
   ───────────────────────────────────────────── */

/* — Kártya — */
.kartya{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; margin-bottom:16px; position:relative;
}
.kartya--sik{background:transparent; border-style:dashed}
.kartya--kiemelt{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand-glow)}
.kartya--figyelem{border-color:rgba(224,138,60,.5)}
.kartya-fej{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap}
.kartya-fej h2,.kartya-fej h3{margin:0}
.kartya-alcim{color:var(--muted); font-size:13.5px; margin:3px 0 0}
.kartya-lab{margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.kattinthato-kartya{transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease)}
.kattinthato-kartya:hover{transform:translateY(-2px); border-color:var(--line-eros);
  box-shadow:0 8px 26px rgba(0,0,0,.28), 0 0 0 1px var(--brand-glow)}

/* — Rács — */
.racs{display:grid; gap:14px}
.racs--2{grid-template-columns:1fr}
.racs--3{grid-template-columns:1fr}
.racs--4{grid-template-columns:repeat(2,1fr)}
.racs--auto{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

/* — Jelvények — */
.jelveny{
  display:inline-flex; align-items:center; gap:5px; vertical-align:middle;
  padding:3px 9px; border-radius:999px; font-size:12px; font-weight:600; line-height:1.5;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line);
  white-space:nowrap;
}
.jelveny--brand{background:rgba(164,40,31,.16); color:var(--brand-300); border-color:rgba(164,40,31,.35)}
.jelveny--ember{background:rgba(224,138,60,.16); color:var(--ember); border-color:rgba(224,138,60,.38)}
.jelveny--forest{background:rgba(62,92,72,.22); color:var(--forest-300); border-color:rgba(127,168,140,.32)}
.jelveny--sky{background:rgba(76,127,163,.18); color:var(--sky); border-color:rgba(76,127,163,.35)}
.jelveny--halvany{background:transparent}
.jelveny--nagy{font-size:13px; padding:5px 12px}

/* — Gombok — */
.gomb{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:11px 18px; border-radius:var(--radius-sm);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  font:600 14.5px/1.2 var(--szoveg-betu); color:var(--text);
  background:var(--surface-2); border-color:var(--line);
  transition:transform .12s var(--ease), background .18s var(--ease), border-color .18s var(--ease), opacity .18s;
  -webkit-tap-highlight-color:transparent;
}
.gomb:hover{text-decoration:none; border-color:var(--line-eros)}
.gomb:active{transform:scale(.975)}
.gomb--elsodleges{background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 4px 16px var(--brand-glow)}
.gomb--elsodleges:hover{background:var(--brand-600); border-color:var(--brand-600)}
.gomb--masodlagos{background:var(--surface-2); color:var(--text)}
.gomb--szellem{background:transparent; border-color:var(--line)}
.gomb--szellem:hover{background:var(--surface-2)}
.gomb--veszely{background:transparent; color:var(--veszely); border-color:rgba(164,40,31,.45)}
.gomb--veszely:hover{background:rgba(164,40,31,.14)}
.gomb--siker{background:var(--forest); border-color:var(--forest); color:#fff}
.gomb--kicsi{min-height:36px; padding:7px 12px; font-size:13.5px; border-radius:8px}
.gomb--teljes{width:100%}
.gomb[disabled],.gomb--tiltott{opacity:.45; cursor:not-allowed; pointer-events:none}
.gomb-sor{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:4px}
.ikon-gomb{
  width:38px;height:38px;min-height:38px;display:grid;place-items:center;border-radius:10px;
  background:transparent;border:1px solid var(--line);color:var(--muted);cursor:pointer;
  transition:color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.ikon-gomb:hover{color:var(--text); border-color:var(--line-eros); background:var(--surface-2)}
.gomb-spinner{width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%; animation:porog .7s linear infinite; display:none}
.gomb.tolt .gomb-spinner{display:block}
.gomb.tolt{pointer-events:none; opacity:.75}

/* Téma-váltó gomb: mindig csak az „ellenkező” ikon látszik */
.tema-valto .tema-hold{display:none}
[data-theme="light"] .tema-valto .tema-hold{display:block}
[data-theme="light"] .tema-valto .tema-nap{display:none}

/* — Felhasználó-menü a fejlécben — */
.user-menu{position:relative}
.user-gomb{
  display:flex; align-items:center; gap:9px; padding:5px 9px 5px 5px; border-radius:999px;
  background:transparent; border:1px solid var(--line); color:var(--text); cursor:pointer;
  font-family:var(--szoveg-betu); min-height:44px;
}
.user-gomb:hover{border-color:var(--line-eros); background:var(--surface-2)}
.user-szoveg{display:none; flex-direction:column; line-height:1.2; text-align:left; min-width:0}
.user-szoveg strong{font-size:13.5px; font-weight:600; white-space:nowrap}
.user-szoveg small{font-size:11.5px; color:var(--muted); white-space:nowrap;
  max-width:190px; overflow:hidden; text-overflow:ellipsis}
.user-nyil{display:none; color:var(--muted)}
.legordulo-lap{
  position:absolute; right:0; top:calc(100% + 8px); min-width:225px; z-index:100;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow); padding:6px; animation:lehajlik .18s var(--ease);
}
.legordulo-lap a,.legordulo-lap button{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 11px; border-radius:8px;
  background:none; border:0; color:var(--text); font:500 14px var(--szoveg-betu);
  text-decoration:none; cursor:pointer; text-align:left; min-height:42px;
}
.legordulo-lap a:hover,.legordulo-lap button:hover{background:var(--surface-2); text-decoration:none}
.legordulo-kilepes{color:var(--veszely) !important}

/* — Avatar — */
.avatar{display:inline-grid; place-items:center; border-radius:50%; overflow:hidden; flex:none;
  background:var(--surface-2); border:1px solid var(--line); color:var(--muted);
  font-family:var(--cim-betu); font-weight:600; line-height:1}
.avatar img{width:100%; height:100%; object-fit:cover}
.avatar--xs{width:24px;height:24px;font-size:9.5px}
.avatar--sm{width:34px;height:34px;font-size:13px}
.avatar--md{width:46px;height:46px;font-size:16px}
.avatar--lg{width:84px;height:84px;font-size:28px}
.avatar--betu{background:linear-gradient(150deg,var(--surface-2),var(--surface)); color:var(--brand-300)}
.avatar-sor{display:flex; align-items:center; gap:10px; min-width:0}
.avatar-halmaz{display:flex; align-items:center}
.avatar-halmaz .avatar{margin-left:-7px; border:2px solid var(--surface)}
.avatar-halmaz .avatar:first-child{margin-left:0}

/* — Űrlapok — */
.urlap{display:grid; gap:16px}
.mezo{display:block; min-width:0}
.mezo > label,.mezo-cimke{display:block; font-size:14px; font-weight:600; margin-bottom:6px}
.kotelezo-jel{color:var(--brand-300); margin-left:2px}
.kotelezo-szo{font-weight:500; font-size:12px; color:var(--brand-300); margin-left:6px}
.opcionalis-szo{font-weight:400; font-size:12px; color:var(--faint); margin-left:6px}
.mezo input[type=text],.mezo input[type=email],.mezo input[type=password],.mezo input[type=tel],
.mezo input[type=url],.mezo input[type=number],.mezo input[type=date],.mezo input[type=time],
.mezo input[type=datetime-local],.mezo input[type=search],.mezo select,.mezo textarea,
input.mezo-be,select.mezo-be,textarea.mezo-be{
  width:100%; padding:11px 13px; min-height:44px; border-radius:var(--radius-sm);
  border:1px solid var(--line-eros); background:var(--surface-2); color:var(--text);
  font:15px/1.45 var(--szoveg-betu); transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.mezo textarea,textarea.mezo-be{min-height:104px; resize:vertical}
.mezo input:focus,.mezo select:focus,.mezo textarea:focus,
input.mezo-be:focus,select.mezo-be:focus,textarea.mezo-be:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-glow);
}
.mezo input::placeholder,.mezo textarea::placeholder{color:var(--faint)}
.mezo select{appearance:none; -webkit-appearance:none; padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.mezo-segit{display:block; color:var(--muted); font-size:12.5px; margin-top:6px; line-height:1.45}
.mezo-hiba{color:var(--brand-300); font-size:13px; margin:6px 0 0; font-weight:500;
  display:flex; align-items:flex-start; gap:5px}
.mezo-hiba::before{content:"⚠"; font-size:12px}
.mezo.hibas input,.mezo.hibas select,.mezo.hibas textarea,
input.hibas,select.hibas,textarea.hibas{border-color:var(--brand-300); background:rgba(164,40,31,.07)}
.mezo-parok{display:grid; gap:16px; grid-template-columns:1fr}
fieldset{border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; margin:0}
legend{font-size:13.5px; font-weight:600; padding:0 6px; color:var(--muted)}

/* Jelszó-erősség jelző */
.jelszo-ero{margin-top:8px}
.jelszo-ero-sav{height:5px; border-radius:3px; background:var(--surface-2); overflow:hidden}
.jelszo-ero-sav i{display:block; height:100%; width:0; border-radius:3px; background:var(--brand-300);
  transition:width .3s var(--ease), background .3s var(--ease)}
.jelszo-ero[data-szint="2"] i{background:var(--ember)}
.jelszo-ero[data-szint="3"] i{background:var(--forest-300)}
.jelszo-ero[data-szint="4"] i{background:var(--forest-300)}
.jelszo-ero-szoveg{font-size:12.5px; color:var(--muted); margin-top:5px; display:block}

/* Jelszó megjelenítése — a mező jobb szélén ülő szem-gomb.
   A .jelszo-mezo előtag azért kell, mert az .ikon-gomb alapszabálya lejjebb áll
   a fájlban (position:relative), és azonos súllyal felülírná a pozicionálást. */
.jelszo-mezo{position:relative}
.jelszo-mezo input[type=password],.jelszo-mezo input[type=text]{padding-right:48px}
.jelszo-mezo .jelszo-szem{position:absolute; top:50%; right:5px; transform:translateY(-50%);
  width:34px; height:34px; min-height:34px; border:0; background:none}
.jelszo-mezo .jelszo-szem:hover{background:none; color:var(--text)}
.jelszo-szem .szem-ki{display:none}
.jelszo-szem.mutat .szem-be{display:none}
.jelszo-szem.mutat .szem-ki{display:block}

/* Checkbox / rádió kártya */
.valaszto-racs{display:grid; gap:9px; grid-template-columns:1fr}
.valaszto-kartya{
  position:relative; display:flex; gap:11px; align-items:flex-start;
  padding:13px 14px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface-2); cursor:pointer; min-height:52px;
  transition:border-color .18s var(--ease), background .18s var(--ease), transform .12s var(--ease);
}
.valaszto-kartya:hover{border-color:var(--line-eros)}
.valaszto-kartya:active{transform:scale(.995)}
.valaszto-kartya input{position:absolute; opacity:0; width:0; height:0}
.valaszto-jel{
  width:21px;height:21px;border-radius:6px;border:1.6px solid var(--line-eros);flex:none;margin-top:1px;
  display:grid;place-items:center;transition:background .18s var(--ease), border-color .18s var(--ease);
}
.valaszto-kartya input[type=radio] ~ .valaszto-jel{border-radius:50%}
.valaszto-jel::after{content:""; width:9px;height:9px;border-radius:2px;background:#fff;
  transform:scale(0); transition:transform .18s var(--ease)}
.valaszto-kartya input[type=radio] ~ .valaszto-jel::after{border-radius:50%}
.valaszto-kartya input:checked ~ .valaszto-jel{background:var(--brand); border-color:var(--brand)}
.valaszto-kartya input:checked ~ .valaszto-jel::after{transform:scale(1)}
.valaszto-kartya:has(input:checked){border-color:var(--brand); background:rgba(164,40,31,.10)}
.valaszto-kartya input:focus-visible ~ .valaszto-jel{box-shadow:var(--focus)}
.valaszto-szoveg{min-width:0; flex:1}
.valaszto-szoveg strong{display:block; font-size:14.5px; font-weight:600; line-height:1.35}
.valaszto-szoveg small{display:block; color:var(--muted); font-size:12.5px; margin-top:3px}
.valaszto-sugo{
  flex:none; width:22px;height:22px;border-radius:50%; border:1px solid var(--line-eros);
  background:transparent; color:var(--muted); cursor:help; font-size:12px; font-weight:700;
  display:grid; place-items:center; margin-top:1px;
}
.valaszto-sugo:hover{color:var(--text); border-color:var(--brand-300)}

/* Kapcsoló (be/ki) */
.kapcsolo{display:inline-flex; align-items:center; gap:10px; cursor:pointer; min-height:44px}
.kapcsolo input{position:absolute;opacity:0;width:0;height:0}
.kapcsolo-sin{width:42px;height:24px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--line-eros); position:relative; transition:background .2s var(--ease)}
.kapcsolo-sin::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--muted); transition:transform .2s var(--ease), background .2s var(--ease)}
.kapcsolo input:checked ~ .kapcsolo-sin{background:var(--brand); border-color:var(--brand)}
.kapcsolo input:checked ~ .kapcsolo-sin::after{transform:translateX(18px); background:#fff}
.kapcsolo input:focus-visible ~ .kapcsolo-sin{box-shadow:var(--focus)}
/* A `.mezo > label` blokk-szabálya erősebb, mint a .kapcsolo inline-flexe —
   enélkül a kapcsoló sínje és a felirata egymásra csúszna minden olyan
   mezőcsoportban, ahol a kapcsoló közvetlenül a .mezo gyereke. */
.mezo > label.kapcsolo{display:inline-flex; margin-bottom:0}

/* — Üzenetek (flash) — */
.uzenet{
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px; margin:0 0 14px;
  border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface);
  font-size:14.5px; animation:felbukkan .3s var(--ease);
}
.uzenet p{margin:0; flex:1; min-width:0}
/* Ha az üzenetben a szövegen kívül más is van (pl. a tárhely-diagnosztika),
   az egész törzs egy oszlopba kerül az ikon mellett. */
.uzenet-torzs{flex:1; min-width:0; display:flex; flex-direction:column; gap:10px}
.uzenet .ikon{margin-top:2px}
.uzenet--siker{border-color:rgba(127,168,140,.42); background:rgba(62,92,72,.16); color:var(--text)}
.uzenet--siker .ikon{color:var(--forest-300)}
.uzenet--hiba{border-color:rgba(217,97,79,.45); background:rgba(164,40,31,.14)}
.uzenet--hiba .ikon{color:var(--brand-300)}
.uzenet--figyelem{border-color:rgba(224,138,60,.45); background:rgba(224,138,60,.13)}
.uzenet--figyelem .ikon{color:var(--ember)}
.uzenet--info{border-color:rgba(76,127,163,.4); background:rgba(76,127,163,.12)}
.uzenet--info .ikon{color:var(--sky)}
.uzenet-bezar{background:none;border:0;color:var(--muted);cursor:pointer;padding:2px;
  border-radius:5px;flex:none;min-height:auto}
.uzenet-bezar:hover{color:var(--text)}

/* — Toast — */
.toast-terulet{position:fixed; right:max(12px, var(--biztonsag-jobb));
  bottom:calc(var(--mobil-nav-magassag) + var(--biztonsag-alul) + 14px);
  z-index:130; display:flex; flex-direction:column; gap:8px; pointer-events:none; max-width:min(340px,calc(100vw - 24px))}
.toast{
  display:flex; align-items:center; gap:9px; padding:11px 14px; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--line-eros); box-shadow:var(--shadow);
  font-size:14px; pointer-events:auto; animation:becsuszik .28s var(--ease);
}
.toast--siker{border-color:rgba(127,168,140,.5)}
.toast--siker .ikon{color:var(--forest-300)}
.toast--hiba{border-color:rgba(217,97,79,.5)}
.toast--hiba .ikon{color:var(--brand-300)}
.toast.tunik{animation:eltunik .25s var(--ease) forwards}

/* — Modál — */
.modal-hatter{position:fixed; inset:0; z-index:140; background:rgba(10,8,7,.6);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:grid; place-items:center; overflow-y:auto;
  /* Kezdőképernyős módban a modál is a képernyő tetejéig ér — a belső margó
     tartja az állapotsáv és a gesztussáv alatt. */
  padding:calc(16px + var(--biztonsag-felul)) max(16px, var(--biztonsag-jobb))
          calc(16px + var(--biztonsag-alul)) max(16px, var(--biztonsag-bal));
  animation:felbukkan .2s var(--ease)}
.modal{
  width:100%; max-width:520px; background:var(--surface); border:1px solid var(--line-eros);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:20px;
  animation:modal-be .24s var(--ease); overflow-y:auto;
  max-height:calc(100vh - 32px - var(--biztonsag-felul) - var(--biztonsag-alul));
}
.modal--szeles{max-width:760px}
.modal-fej{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:6px}
.modal-fej h3{margin:0; font-size:19px}
.modal-alcim{color:var(--muted); font-size:13.5px; margin:0 0 16px}
.modal-lab{display:flex; gap:8px; justify-content:flex-end; margin-top:20px; flex-wrap:wrap}
.modal-lab .gomb{flex:1 1 auto; min-width:130px}

/* — Tabok — */
.tabok{display:flex; gap:4px; padding:4px; background:var(--surface-2); border-radius:12px;
  border:1px solid var(--line); overflow-x:auto; scrollbar-width:none; position:relative}
.tabok::-webkit-scrollbar{display:none}
.tab{
  flex:1 1 auto; white-space:nowrap; min-height:40px; padding:9px 15px; border:0; border-radius:9px;
  background:transparent; color:var(--muted); font:600 14px var(--szoveg-betu); cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:color .18s var(--ease), background .18s var(--ease);
}
.tab:hover{color:var(--text); text-decoration:none}
.tab.aktiv{background:var(--surface); color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.18)}

/* — Üres állapot — */
.ures{
  text-align:center; padding:38px 20px; color:var(--muted);
  border:1px dashed var(--line-eros); border-radius:var(--radius); background:rgba(128,128,128,.03);
}
.ures-jel{width:54px;height:54px;border-radius:16px;margin:0 auto 14px;display:grid;place-items:center;
  background:var(--surface-2); color:var(--brand-300)}
/* Ahol a csapat CÍMERE tölti ki a jelvényt, ott a bordó alap és a kerek sarok
   a képé — a felület saját háttere és színe nem látszana ki alóla. */
.ures-jel--cimer,.gondolat-jel--cimer{
  background:var(--brand-cimer) !important; overflow:hidden; padding:0;
}
.ures h3{margin:0 0 6px; color:var(--text); font-size:16.5px}
.ures p{margin:0 auto; max-width:44ch; font-size:14px}
.ures .gomb-sor{justify-content:center; margin-top:16px}

/* — Skeleton — */
.skeleton{border-radius:8px; background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface) 37%,var(--surface-2) 63%);
  background-size:400% 100%; animation:csillan 1.3s ease-in-out infinite; height:14px; margin-bottom:9px}

/* — Táblázat (mobilon kártyákra bomlik) — */
.tabla-keret{width:100%}
table.tabla{width:100%; border-collapse:collapse; font-size:14.5px}
table.tabla th{text-align:left; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line)}
table.tabla td{padding:12px; border-bottom:1px solid var(--line); vertical-align:middle}
table.tabla tbody tr:hover{background:var(--surface-2)}
table.tabla tbody tr:last-child td{border-bottom:0}

/* — Tooltip — */
.sugo{position:relative; display:inline-flex}
.sugo::after{
  content:attr(data-sugo); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--surface); color:var(--text); border:1px solid var(--line-eros); border-radius:8px;
  padding:8px 11px; font-size:12.5px; font-weight:500; line-height:1.45; width:max-content; max-width:250px;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; z-index:120;
  transition:opacity .18s var(--ease), transform .18s var(--ease); white-space:normal; text-align:left;
}
.sugo:hover::after,.sugo:focus-visible::after{opacity:1; transform:translateX(-50%) translateY(0)}
.sugo--jobb::after{left:auto; right:0; transform:translateY(4px)}
.sugo--jobb:hover::after{transform:translateY(0)}

/* — Morzsa — */
.morzsa{display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13.5px;
  color:var(--muted); margin-bottom:12px}
.morzsa a{color:var(--muted)}
.morzsa a:hover{color:var(--text)}
.morzsa .ikon{opacity:.55}

/* — Lapozó — */
.lapozo{display:flex; gap:6px; justify-content:center; align-items:center; margin-top:20px; flex-wrap:wrap}
.lapozo a,.lapozo span{min-width:40px; min-height:40px; padding:8px 12px; border-radius:9px;
  border:1px solid var(--line); display:grid; place-items:center; font-size:14px;
  color:var(--muted); text-decoration:none}
.lapozo a:hover{border-color:var(--line-eros); color:var(--text); text-decoration:none}
.lapozo .aktiv{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600}

/* — Keresőmező — */
.kereso{position:relative}
.kereso .ikon{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--faint); pointer-events:none}
.kereso input{padding-left:42px !important}
.kereso-torles{position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--faint); cursor:pointer; padding:6px; border-radius:6px; display:none}
.kereso.van-ertek .kereso-torles{display:block}
.kereso-torles:hover{color:var(--text)}

/* — Számláló-kártya — */
.szamlalo-racs{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px}
.szamlalo{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px; position:relative; overflow:hidden}
.szamlalo::after{content:""; position:absolute; right:-16px; top:-16px; width:70px; height:70px;
  border-radius:50%; background:radial-gradient(circle,var(--brand-glow),transparent 70%); opacity:.5}
.szamlalo-ertek{font-family:var(--cim-betu); font-size:clamp(26px,7vw,34px); font-weight:700;
  line-height:1; letter-spacing:-.02em; display:block}
.szamlalo-cimke{color:var(--muted); font-size:12.5px; margin-top:6px; display:block}
.szamlalo-ikon{color:var(--brand-300); margin-bottom:9px; display:block}

/* — Sávdiagram (statisztika, szavazás) — */
.sav-sor{margin-bottom:13px}
.sav-fej{display:flex; justify-content:space-between; gap:10px; align-items:baseline;
  font-size:13.5px; margin-bottom:5px}
.sav-fej strong{font-weight:600}
.sav-fej span{color:var(--muted); font-size:12.5px; white-space:nowrap}
.sav{height:9px; border-radius:5px; background:var(--surface-2); overflow:hidden}
.sav i{display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,var(--brand),var(--brand-300));
  width:0; transition:width .8s var(--ease)}
.sav--forest i{background:linear-gradient(90deg,var(--forest),var(--forest-300))}
.sav--sky i{background:linear-gradient(90deg,#3A6688,var(--sky))}
.sav--ember i{background:linear-gradient(90deg,#B96F27,var(--ember))}
.sav-sor.vezeto .sav i{box-shadow:0 0 12px var(--brand-glow)}

/* — Idővonal — */
.idovonal{position:relative; padding-left:26px}
.idovonal::before{content:""; position:absolute; left:8px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(to bottom,var(--line-eros),transparent)}
.idovonal-elem{position:relative; padding-bottom:18px}
.idovonal-elem::before{content:""; position:absolute; left:-22px; top:6px; width:9px; height:9px;
  border-radius:50%; background:var(--brand); box-shadow:0 0 0 3px var(--bg)}
.idovonal-elem:last-child{padding-bottom:0}
.idovonal-datum{font-size:12.5px; color:var(--muted); display:block; margin-bottom:2px}
.idovonal-cim{font-weight:600; font-size:15px; display:block}

/* — Lista-sor (általános) — */
.lista-sor{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);
  min-width:0}
.lista-sor:last-child{border-bottom:0}
.lista-sor-fo{flex:1; min-width:0}
.lista-sor-fo strong{display:block; font-size:15px; font-weight:600; line-height:1.35}
.lista-sor-fo small{display:block; color:var(--muted); font-size:12.5px; margin-top:2px}
.lista-sor-akciok{display:flex; gap:6px; flex:none; align-items:center}

/* ─────────────────────────────────────────────
   5. ANIMÁCIÓK
   ───────────────────────────────────────────── */
@keyframes felbukkan{from{opacity:0}to{opacity:1}}
@keyframes eltunik{to{opacity:0; transform:translateX(12px)}}
@keyframes becsuszik{from{opacity:0; transform:translateX(20px)}to{opacity:1; transform:none}}
@keyframes felcsuszik{from{transform:translateY(100%)}to{transform:none}}
@keyframes lehajlik{from{opacity:0; transform:translateY(-6px) scale(.98)}to{opacity:1; transform:none}}
@keyframes modal-be{from{opacity:0; transform:scale(.96)}to{opacity:1; transform:scale(1)}}
@keyframes porog{to{transform:rotate(360deg)}}
@keyframes csillan{0%{background-position:100% 50%}100%{background-position:0 50%}}
@keyframes fel-be{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@keyframes lebeg{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* Belépő stagger: a fő blokkok lépcsőzetesen úsznak be */
.stagger,.stagger-elem{animation:fel-be .42s var(--ease) both}
.stagger-elem:nth-child(1){animation-delay:.00s}
.stagger-elem:nth-child(2){animation-delay:.06s}
.stagger-elem:nth-child(3){animation-delay:.12s}
.stagger-elem:nth-child(4){animation-delay:.18s}
.stagger-elem:nth-child(5){animation-delay:.24s}
.stagger-elem:nth-child(6){animation-delay:.30s}
.stagger-elem:nth-child(n+7){animation-delay:.36s}
.lebego{animation:lebeg 3.4s ease-in-out infinite}

/* KÖTELEZŐ: aki kéri, annak semmi ne mozogjon */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .sav i{transition:none !important}
}

/* ─────────────────────────────────────────────
   6. RESZPONZÍV TÖRÉSPONTOK
   ───────────────────────────────────────────── */
@media (min-width:640px){
  .fejlec{padding:var(--biztonsag-felul) max(20px, var(--biztonsag-jobb)) 0 max(20px, var(--biztonsag-bal))}
  .fotartalom{padding:24px max(20px, var(--biztonsag-jobb)) calc(var(--mobil-nav-magassag) + var(--biztonsag-alul) + 30px) max(20px, var(--biztonsag-bal))}
  .racs--2{grid-template-columns:repeat(2,1fr)}
  .racs--4{grid-template-columns:repeat(4,1fr)}
  .szamlalo-racs{grid-template-columns:repeat(4,1fr)}
  .valaszto-racs{grid-template-columns:repeat(2,1fr)}
  .mezo-parok{grid-template-columns:1fr 1fr}
  .user-szoveg{display:flex}
  .user-nyil{display:block}
  .modal-lab .gomb{flex:0 0 auto}
  .tobb-racs{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:900px){
  :root{--fejlec-magassag:64px}
  .mobil-nav,.tobb-lap,.lap-hatter,.menu-gomb{display:none !important}

  /* v3: az oldalsáv is RÖGZÍTETT. Korábban sticky volt, ezért hosszú oldalnál
     együtt mozgott a tartalommal — most a helyén marad, és ha nem fér ki,
     saját maga görög. */
  .oldalsav{
    display:flex; flex-direction:column; flex:none;
    width:var(--oldalsav-szelesseg); padding:16px 12px 12px;
    position:fixed; top:var(--fejlec-teljes); left:0; bottom:0;
    overflow:hidden;
    border-right:1px solid var(--line);
    background:var(--uveg-hatter);
    backdrop-filter:var(--uveg-elmosas); -webkit-backdrop-filter:var(--uveg-elmosas);
  }
  .oldalsav-lista{display:flex; flex-direction:column; gap:3px; flex:1 1 auto;
    overflow-y:auto; overscroll-behavior:contain; padding-right:2px}
  .oldalsav-lab{margin-top:10px; padding-top:12px; border-top:1px solid var(--line); flex:none}

  /* A fő tartalom kikerüli a rögzített oldalsávot, és nagy képernyőn KÖZÉPRE
     igazítva fut — nem tapad a bal szélhez. */
  .keret{padding-left:var(--oldalsav-szelesseg)}
  .fotartalom{padding:26px 28px 60px; margin:0 auto; max-width:1120px}
  .toast-terulet{bottom:20px; right:20px}
  .racs--3{grid-template-columns:repeat(3,1fr)}
  .valaszto-racs{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:1200px){
  .fotartalom{padding:30px 40px 70px; max-width:1180px}
  .racs--auto{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}

/* Nagyon széles kijelzőn se nyúljon el a szöveg: a sáv marad teljes szélességű,
   a tartalom viszont egy kellemes olvasási sávban, középen ül. */
@media (min-width:1600px){
  .fotartalom{max-width:1280px}
}

/* Nyomtatás: csak a tartalom */
@media print{
  .fejlec,.oldalsav,.mobil-nav,.toast-terulet,.gomb,.lablec{display:none !important}
  body{background:#fff; color:#000}
  .kartya{border:1px solid #ccc; break-inside:avoid}
}

/* ============================================================
   7. OLDALSPECIFIKUS STÍLUSOK
   ============================================================ */

/* ─── Bejelentkezés / jelszócsere ─── */
.belepes-doboz{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 22px; box-shadow:var(--shadow);
}
.belepes-fej{text-align:center; margin-bottom:22px}
.belepes-jel{
  width:72px;height:72px;border-radius:22px;margin:0 auto 16px;display:grid;place-items:center;
  overflow:hidden; background:var(--brand-cimer); color:#fff;
  box-shadow:0 8px 26px var(--brand-glow);
}
/* Ha nem a címer, hanem egy rajzolt ikon áll benne (jelszócsere: lakat), akkor
   a márkaszín-átmenet illik mögé — a címer bordója ott idegen folt lenne. */
.belepes-jel--ikon{background:linear-gradient(150deg,var(--brand),var(--brand-600))}
.belepes-fej h1{font-size:20px; margin:0 0 6px; line-height:1.3}
.belepes-alcim{color:var(--muted); font-size:13.5px; margin:0; line-height:1.5}
.belepes-cim2{font-size:17px; margin:0 0 8px}
.belepes-magyarazat{color:var(--muted); font-size:13.5px; line-height:1.6; margin:0 0 4px}
.belepes-lab{text-align:center; margin:16px 0 0; font-size:14px}
.belepes-lab small{display:block; margin-top:6px; font-size:12.5px}
.belepes-lab .ikon{vertical-align:-3px}
.belepes-info{
  display:flex; gap:9px; align-items:flex-start; margin-top:20px; padding-top:16px;
  border-top:1px solid var(--line); color:var(--muted); font-size:12.5px; line-height:1.55;
}
.belepes-info p{margin:0}
.belepes-info .ikon{flex:none; margin-top:2px; color:var(--sky)}
.belepes-user{
  display:flex; align-items:center; gap:11px; padding:11px 13px; margin-bottom:18px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm);
}
.belepes-user strong{display:block; font-size:14.5px}
.belepes-user small{display:block; color:var(--muted); font-size:12.5px}
.szoveg-gomb{background:none; border:0; color:var(--muted); cursor:pointer;
  font:14px var(--szoveg-betu); text-decoration:underline; padding:8px; min-height:44px}
.szoveg-gomb:hover{color:var(--text)}

/* ─── 403 / 404 oldal ─── */
.hiba-oldal{
  max-width:560px; margin:26px auto; text-align:center; padding:30px 22px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.hiba-jel{width:62px;height:62px;border-radius:18px;margin:0 auto 16px;display:grid;place-items:center;
  background:rgba(164,40,31,.14); color:var(--brand-300)}
.hiba-oldal h2{margin:0 0 10px}
.hiba-magyarazat{color:var(--muted); font-size:14.5px; line-height:1.65; margin:0 auto 14px; max-width:46ch}
.hiba-sajat{font-size:13px; color:var(--faint); margin:0 0 20px}
.hiba-gombok{display:flex; gap:9px; justify-content:center; flex-wrap:wrap}

/* ─── Rendszergazda ─── */
.user-lista{display:flex; flex-direction:column}
.user-sor{display:flex; align-items:flex-start; gap:13px; padding:14px 0; border-bottom:1px solid var(--line)}
.user-sor:last-of-type{border-bottom:0}
.user-sor.inaktiv{opacity:.55}
.user-sor-fo{flex:1; min-width:0}
.user-sor-fo > strong{display:flex; align-items:center; gap:8px; font-size:15.5px; font-weight:600; flex-wrap:wrap}
.user-sor-jelvenyek{display:flex; gap:5px; flex-wrap:wrap; margin:6px 0}
.user-sor-adat{display:block; color:var(--muted); font-size:12.5px; line-height:1.6; word-break:break-word}
.user-sor-akciok{display:flex; gap:5px; flex:none; flex-wrap:wrap; justify-content:flex-end}
.beagyazott-urlap{display:inline-flex; margin:0}
.urlap-oszlopok{display:grid; gap:20px; grid-template-columns:1fr}
.kep-oszlop{min-width:0}
.kep-elonezet{
  width:150px; height:150px; border-radius:50%; margin:0 auto 14px;
  background:var(--surface-2) center/cover no-repeat; border:2px dashed var(--line-eros);
  display:grid; place-items:center; text-align:center; color:var(--faint); font-size:12.5px;
  transition:border-color .2s var(--ease);
}
.kep-elonezet.van-kep{border-style:solid; border-color:var(--brand)}
.kep-elonezet.van-kep .kep-elonezet-uzenet{display:none}
.kep-gomb{cursor:pointer}
.egyszer-doboz{border-color:var(--forest-300)}
.egyszer-racs{display:grid; gap:14px; grid-template-columns:1fr}
.egyszer-cimke{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin-bottom:6px}
.egyszer-ertek{display:flex; align-items:center; gap:8px}
.egyszer-ertek code{flex:1; padding:10px 12px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:8px; font-size:14px; overflow-x:auto; white-space:nowrap}
.nagy-kod{font-size:20px !important; font-weight:700; letter-spacing:.16em; text-align:center}
.kod-kiemelt{display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background:var(--surface-2); border:1px solid var(--line-eros); border-radius:var(--radius-sm); padding:16px}
.kod-kiemelt code{flex:1; min-width:200px; background:none; border:0}
.egyszer-lab{display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12.5px; margin:14px 0 0}
/* A kiadott kód felugró ablaka mindenek fölött — ezt semmi nem takarhatja el. */
.kod-hatter{z-index:160}
.kod-hatter .modal-fej h3{display:flex; align-items:center; gap:8px}
.egyszer-doboz .kartya-fej{align-items:flex-start; gap:12px}
.egyszer-doboz .modal-lab{justify-content:flex-start}
.egyszer-doboz .modal-lab .gomb{flex:0 1 auto}
.masolva{color:var(--forest-300) !important; border-color:var(--forest-300) !important}
.kerelem-sor{display:flex; gap:13px; align-items:flex-start; padding:15px; margin-bottom:10px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); flex-wrap:wrap}
.kerelem-sor.fuggoben{border-color:rgba(224,138,60,.45)}
.kerelem-fo{flex:1 1 240px; min-width:0}
.kerelem-fo strong{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:15px}
.kerelem-fo small{display:block; margin-top:4px; font-size:12.5px}
.kerelem-uzenet{margin:9px 0 0; font-size:13.5px; color:var(--text); font-style:italic;
  display:flex; gap:7px; align-items:flex-start}
.kerelem-uzenet .ikon{flex:none; margin-top:3px; color:var(--muted)}
.kerelem-akciok{display:flex; gap:7px; flex-wrap:wrap}
.szuro-sor{display:grid; gap:11px; grid-template-columns:1fr; margin-bottom:16px; padding:14px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm)}
.szuro-sor .mezo > label{font-size:12.5px; font-weight:500; color:var(--muted)}
.szuro-gombok{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap}
.naplo-lista{font-size:13px}
.naplo-sor{display:grid; gap:4px 12px; padding:10px 0; border-bottom:1px solid var(--line);
  grid-template-columns:1fr; align-items:baseline}
.naplo-sor:last-child{border-bottom:0}
.naplo-ido{color:var(--muted); font-size:12px; white-space:nowrap}
.naplo-muvelet{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px}
.naplo-ki{font-weight:600}
.naplo-reszlet{color:var(--muted); word-break:break-word}
.naplo-ip{font-size:11.5px; font-family:ui-monospace,Menlo,Consolas,monospace}

@media (min-width:640px){
  .egyszer-racs{grid-template-columns:1fr 1fr}
  .szuro-sor{grid-template-columns:repeat(2,1fr)}
  .naplo-sor{grid-template-columns:150px 150px 140px 1fr 110px}
}
@media (min-width:900px){
  .urlap-oszlopok{grid-template-columns:1fr 250px}
  .szuro-sor{grid-template-columns:repeat(4,1fr) auto}
  .user-sor-akciok{justify-content:flex-start}
}

/* ─── Csapat: rajok és őrsök ─── */
.raj-racs{display:grid; gap:16px; grid-template-columns:1fr}
.raj-kartya{margin-bottom:0}
.raj-kartya--halvany{opacity:.82}
.raj-fej{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px}
.raj-cim{min-width:0}
.raj-cim h2{margin:0 0 6px; font-size:18px}
.raj-szam{text-align:right; flex:none; line-height:1.1}
.raj-szam strong{font-family:var(--cim-betu); font-size:26px; font-weight:700; display:block}
.raj-szam small{color:var(--muted); font-size:11.5px}
.raj-vezeto{display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:14px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm)}
.raj-vezeto-szoveg{flex:1; min-width:0}
.raj-vezeto-szoveg strong{display:block; font-size:14px; font-weight:600}
.raj-vezeto-szoveg small{display:block; color:var(--muted); font-size:12px}
.ors-lista{display:flex; flex-direction:column; gap:8px}
.ors-chip{border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2);
  padding:4px; transition:border-color .18s var(--ease), transform .12s var(--ease)}
.ors-chip:hover{border-color:var(--line-eros)}
.ors-chip--athelyezes{border-color:rgba(224,138,60,.5); background:rgba(224,138,60,.07)}
.ors-chip--zart{opacity:.62}
.ors-chip-fo{display:flex; align-items:center; gap:10px; padding:8px; border-radius:8px;
  color:var(--text); text-decoration:none; min-height:44px}
a.ors-chip-fo:hover{background:rgba(128,128,128,.09); text-decoration:none}
.ors-chip-szoveg{flex:1; min-width:0}
.ors-chip-szoveg strong{display:block; font-size:14.5px; font-weight:600; line-height:1.3}
.ors-chip-szoveg small{display:block; color:var(--muted); font-size:12px; margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ors-chip-nyil{color:var(--faint); flex:none}
.athelyezes-jelveny{display:flex; align-items:center; gap:8px; padding:2px 8px 8px; flex-wrap:wrap}
.szoveg-gomb--kicsi{font-size:12.5px; padding:6px 8px; min-height:36px; text-decoration:none;
  display:inline-flex; align-items:center; gap:5px}
.ors-chip > .szoveg-gomb--kicsi{margin:0 0 4px 8px; color:var(--brand-300)}
.raj-erkezo{display:flex; align-items:flex-start; gap:8px; margin-top:14px; padding-top:12px;
  border-top:1px dashed var(--line-eros); color:var(--ember); font-size:12.5px; line-height:1.5}
.raj-erkezo .ikon{flex:none; margin-top:2px}
.athelyezes-kartya{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start; padding:14px;
  border:1px solid rgba(224,138,60,.4); border-radius:var(--radius-sm);
  background:rgba(224,138,60,.07); margin-bottom:10px}
.athelyezes-fo{flex:1 1 260px; min-width:0}
.athelyezes-fo > strong{font-size:16px; display:block; margin-bottom:7px}
.athelyezes-nyil{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:7px}
.athelyezes-nyil .ikon{color:var(--muted)}
.athelyezes-akciok{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-start}
.felulbiralas-jelzes{display:flex; gap:7px; align-items:flex-start; margin:9px 0 0;
  font-size:12.5px; color:var(--sky); line-height:1.5}
.felulbiralas-jelzes .ikon{flex:none; margin-top:2px}

@media (min-width:900px){
  .raj-racs{grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:start}
}

/* ─── Őrs adatlap: névsor és őrsgyűlések ─── */
.gyors-felvitel{display:grid; gap:12px; grid-template-columns:1fr; padding:15px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm)}
.gyors-felvitel .mezo > label{font-size:13px}
.gyors-felvitel-gomb{display:flex; align-items:flex-end}
.gyors-felvitel-gomb .gomb{width:100%}
.gyors-felvitel-segit{grid-column:1/-1; margin:0}
.tag-sor{display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--line)}
.tag-sor:last-child{border-bottom:0}
.tag-sor--inaktiv{opacity:.55}
.tag-fo{flex:1; min-width:0}
.tag-fo > strong{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:15px; font-weight:600}
.tag-fo small{display:block; color:var(--muted); font-size:12.5px; margin-top:3px; line-height:1.5}
.tag-megjegyzes{color:var(--ember) !important; display:flex !important; align-items:center; gap:5px}
.tag-akciok{display:flex; gap:5px; flex:none}
.inaktiv-szekcio{margin-top:22px; padding-top:18px; border-top:1px dashed var(--line-eros)}
.szekcio-cim{display:flex; align-items:center; gap:7px; font-size:14.5px; color:var(--muted); margin:0 0 4px}
.gyules-lista{display:flex; flex-direction:column; gap:10px}
.gyules-sor{display:flex; align-items:center; gap:13px; padding:13px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2)}
.gyules-nap{width:44px; height:44px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:rgba(62,92,72,.24); color:var(--forest-300); font-family:var(--cim-betu);
  font-weight:700; font-size:14px}
.gyules-fo{flex:1 1 180px; min-width:0}
.gyules-fo strong{display:block; font-size:14.5px; font-weight:600}
.gyules-fo small{display:block; color:var(--muted); font-size:12.5px; margin-top:3px}
.gyules-akciok{display:flex; gap:6px; align-items:center; flex-wrap:wrap}

@media (min-width:640px){
  .gyors-felvitel{grid-template-columns:2fr 1.2fr 1.2fr auto}
}

/* ─── Naptár ─── */
.naptar-fej{display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:12px}
.naptar-navigacio{display:flex; align-items:center; gap:10px}
.naptar-navigacio h2{margin:0; font-size:18px; min-width:150px; text-align:center}
.naptar-eszkozok{display:flex; gap:8px; flex-wrap:wrap}
.jelmagyarazat{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; font-size:12px; color:var(--muted)}
.jelm{display:inline-flex; align-items:center; gap:6px}
.jelm i,.pont{width:8px; height:8px; border-radius:50%; display:inline-block; flex:none}
.jelm--orsgyules i,.pont--orsgyules{background:var(--tip-orsgyules)}
.jelm--kulonprogram i,.pont--kulonprogram{background:var(--tip-kulonprogram)}
.jelm--tura i,.pont--tura{background:var(--tip-tura)}
.jelm--mozi i,.pont--mozi{background:var(--tip-mozi)}
.jelm--megbeszeles i,.pont--megbeszeles{background:var(--tip-megbeszeles)}
/* A többnapos jelmagyarázat nem pötty, hanem egy rövid vonal — pont az, amit
   a naptárban is lát az ember. */
.jelm--tobbnapos i{width:22px; height:6px; border-radius:3px; background:var(--muted)}
.naptar-elrendezes{display:grid; gap:14px; grid-template-columns:1fr; align-items:start}
.naptar-keret{padding:12px}
.naptar-nevek{display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-bottom:5px}
.naptar-nevek span{text-align:center; font-size:11px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; padding:4px 0}
.naptar-racs{display:grid; grid-template-columns:repeat(7,1fr); gap:3px}
.naptar-nap{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:3px; min-height:52px; padding:6px 2px 5px; border:1px solid transparent; border-radius:9px;
  background:var(--surface-2); color:var(--text); cursor:pointer; font-family:var(--szoveg-betu);
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
.naptar-nap:hover{border-color:var(--line-eros)}
.naptar-nap.mas-honap{opacity:.35; background:transparent}
.naptar-nap.ma{border-color:var(--brand)}
.naptar-nap.ma .naptar-szam{background:var(--brand); color:#fff; border-radius:50%;
  width:22px; height:22px; display:grid; place-items:center}
.naptar-nap.kivalasztott{background:var(--surface); border-color:var(--brand-300);
  box-shadow:0 0 0 1px var(--brand-glow)}
.naptar-szam{font-size:13px; font-weight:600; line-height:22px; height:22px}

/* ─── Naptári sávok (Sahara v1) ───────────────────────────────
   Minden alkalom egy SÁV a nap dobozában. A többnapos program sávja
   VÉGIGFUT az érintett napokon: a lekerekített vég csak az első és az
   utolsó napon van, közben a sáv belóg a rács hézagjába, így a szem egy
   folytonos vonalat lát, nem hét különálló pöttyöt.

   A hézag 3px (.naptar-racs gap). Az átfutó sáv oldalanként 2px-t lóg ki,
   tehát a hézag közepén összeér a szomszédos nap sávjával. A z-index azért
   kell, mert a DOM-ban későbbi nap háttere egyébként rápaintelne. */
.naptar-nap{overflow:visible}
.naptar-savok{
  display:flex; flex-direction:column; gap:2px; width:100%;
  min-height:8px;
}
.naptar-savok .sav{
  position:relative; z-index:1; display:block; height:5px; border-radius:3px;
  background:var(--line-eros); overflow:hidden;
}
/* A sáv színe a típusát követi — ugyanaz a paletta, mint a jelmagyarázatban. */
.naptar-savok .sav--orsgyules{background:var(--tip-orsgyules)}
.naptar-savok .sav--kulonprogram{background:var(--tip-kulonprogram)}
.naptar-savok .sav--tura{background:var(--tip-tura)}
.naptar-savok .sav--mozi{background:var(--tip-mozi)}
.naptar-savok .sav--megbeszeles{background:var(--tip-megbeszeles)}
/* Az elmaradt őrsgyűlés sávja áthúzott-halvány: ott VOLT alkalom, csak nem lett meg. */
.naptar-savok .sav--elmaradt{opacity:.4}
/* Átfutó sáv: a nem-vég oldalakon szögletes, és belóg a hézagba. */
.naptar-savok .sav--atfuto{border-radius:0; margin-left:-4px; margin-right:-4px}
.naptar-savok .sav--atfuto.sav--kezd{border-radius:3px 0 0 3px; margin-left:0}
.naptar-savok .sav--atfuto.sav--veg{border-radius:0 3px 3px 0; margin-right:0}
.naptar-savok .sav--atfuto.sav--kezd.sav--veg{border-radius:3px}
/* A sáv címe csak a képernyőolvasónak szól. Szándékosan NEM írjuk bele a
   sávba: a típusszínek világos és sötét módban is mások, ott nem tudnánk
   minden esetben olvasható szövegszínt garantálni. A napra koppintva úgyis
   megnyílik a teljes lista az oldalpanelen. */
.sav-cim{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.sav-tobb{font-size:9px; font-style:normal; color:var(--muted); line-height:1.2; text-align:left;
  padding-left:1px}

/* A régi pöttyös megjelenítés stílusa megmarad: a jelmagyarázat és a
   kezdőlap idővonala továbbra is ezt használja. */
.naptar-pontok{display:flex; gap:2.5px; align-items:center; flex-wrap:wrap; justify-content:center;
  max-width:100%; min-height:9px}
.naptar-pontok em{font-size:9px; font-style:normal; color:var(--muted)}
.nap-panel{position:sticky; top:calc(var(--fejlec-teljes) + 14px); max-height:none}
.nap-panel .kartya-fej{margin-bottom:10px}
.nap-esemeny{padding:12px; margin-bottom:9px; border-radius:var(--radius-sm);
  background:var(--surface-2); border-left:3px solid var(--line-eros)}
.nap-esemeny:last-child{margin-bottom:0}
.nap-esemeny--orsgyules{border-left-color:var(--tip-orsgyules)}
.nap-esemeny--kulonprogram{border-left-color:var(--tip-kulonprogram)}
.nap-esemeny--tura{border-left-color:var(--tip-tura)}
.nap-esemeny--mozi{border-left-color:var(--tip-mozi)}
.nap-esemeny--megbeszeles{border-left-color:var(--tip-megbeszeles)}
.nap-esemeny-fej{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px}
.nap-esemeny-ido{font-size:12.5px; color:var(--muted); font-weight:600; white-space:nowrap}
.nap-esemeny > strong{display:block; font-size:14.5px; line-height:1.35; margin-bottom:4px}
.nap-esemeny small{display:block; color:var(--muted); font-size:12.5px; line-height:1.5}
.keret-jelzes{color:var(--ember) !important; margin-top:3px}
.nap-esemeny-gombok{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}

/* ─── Programlista ─── */
.program-lista{display:flex; flex-direction:column; gap:9px}
.program-sor{display:flex; align-items:center; gap:13px; padding:12px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--surface-2); color:var(--text); text-decoration:none}
.program-sor:hover{text-decoration:none}
.program-sor--kulonprogram{border-left:3px solid var(--tip-kulonprogram)}
.program-sor--tura{border-left:3px solid var(--tip-tura)}
.program-sor--mozi{border-left:3px solid var(--tip-mozi)}
.program-sor--megbeszeles{border-left:3px solid var(--tip-megbeszeles)}
.program-datum{width:48px; flex:none; text-align:center; line-height:1.15}
.program-honap{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.program-datum strong{display:block; font-family:var(--cim-betu); font-size:21px; font-weight:700}
.program-datum small{display:block; font-size:10.5px; color:var(--faint)}
.program-fo{flex:1; min-width:0}
.program-fo > strong{display:block; font-size:15px; font-weight:600; line-height:1.35}
.program-jelvenyek{display:flex; gap:5px; flex-wrap:wrap; margin:6px 0}
.program-nyil{color:var(--faint); flex:none}
.program-leiras{font-size:15px; line-height:1.7; color:var(--text); margin-top:6px}
.modszer-lista{display:flex; flex-direction:column; gap:8px}
.modszer-elem{display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--surface-2); color:var(--text); text-decoration:none}
.modszer-elem:hover{border-color:var(--brand-300); text-decoration:none}
.modszer-szam{width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:rgba(164,40,31,.18); color:var(--brand-300); font-family:var(--cim-betu); font-weight:700; font-size:14px}
.modszer-szoveg{flex:1; min-width:0}
.modszer-szoveg strong{display:block; font-size:14px; font-weight:600; line-height:1.35}
.modszer-szoveg small{display:block; color:var(--muted); font-size:12.5px; margin-top:2px}
.modszer-kartya .valaszto-szoveg strong{font-size:13.5px}

@media (min-width:640px){
  .naptar-nap{min-height:72px}
  .naptar-szam{font-size:14px}
  .naptar-savok .sav{height:7px; border-radius:4px}
  .naptar-savok .sav--atfuto{border-radius:0; margin-left:-4px; margin-right:-4px}
  .naptar-savok .sav--atfuto.sav--kezd{border-radius:4px 0 0 4px}
  .naptar-savok .sav--atfuto.sav--veg{border-radius:0 4px 4px 0}
  .naptar-savok .sav--atfuto.sav--kezd.sav--veg{border-radius:4px}
}
@media (min-width:900px){
  .naptar-elrendezes{grid-template-columns:1fr 330px}
  .naptar-nap{min-height:92px; padding:8px 5px}
  .naptar-savok{gap:4px}
  .naptar-savok .sav{height:9px; border-radius:5px}
  /* Nagyobb cellánál nagyobb a hézag-áthidalás is (padding 5px + gap 3px). */
  .naptar-savok .sav--atfuto{margin-left:-7px; margin-right:-7px; border-radius:0}
  .naptar-savok .sav--atfuto.sav--kezd{border-radius:5px 0 0 5px; margin-left:0}
  .naptar-savok .sav--atfuto.sav--veg{border-radius:0 5px 5px 0; margin-right:0}
  .naptar-savok .sav--atfuto.sav--kezd.sav--veg{border-radius:5px}
  .sav-tobb{font-size:10px}
}

/* ─── Szavazás ─── */
.szavazas-kartya{display:block; color:var(--text); text-decoration:none; margin-bottom:0}
.szavazas-kartya:hover{text-decoration:none}
.szavazas-kartya--lezart{opacity:.72}
.szavazas-fej{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap}
.szavazas-fej h3{margin:0; font-size:16px; flex:1 1 auto; min-width:0}
.szavazas-lab{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px}
.szavazat-allapot{font-size:13px; color:var(--muted); margin:0 0 14px;
  display:inline-flex; align-items:center; gap:6px; min-height:20px}
.szavazat-allapot.ment{color:var(--sky)}
.szavazat-allapot.kesz{color:var(--forest-300)}
.szavazat-allapot.hiba{color:var(--brand-300)}
.opcio-eredmenyek{display:flex; flex-direction:column; gap:16px}
.opcio-eredmeny{padding:13px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface-2); transition:border-color .2s var(--ease)}
.opcio-eredmeny.vezeto{border-color:rgba(127,168,140,.45)}
.opcio-valaszto{display:flex; align-items:center; gap:11px; cursor:pointer; margin-bottom:10px; min-height:32px}
.opcio-valaszto.tiltott{cursor:default}
.opcio-valaszto input{position:absolute; opacity:0; width:0; height:0}
.opcio-valaszto input:checked ~ .valaszto-jel{background:var(--brand); border-color:var(--brand)}
.opcio-valaszto input:checked ~ .valaszto-jel::after{transform:scale(1)}
.opcio-valaszto input:focus-visible ~ .valaszto-jel{box-shadow:var(--focus)}
.opcio-valaszto input:disabled ~ .valaszto-jel{opacity:.5}
.opcio-cimke{flex:1; min-width:0}
.opcio-cimke strong{display:block; font-size:14.5px; font-weight:600; line-height:1.35}
.opcio-cimke small{display:block; color:var(--muted); font-size:12.5px; margin-top:2px}
.szavazo-avatarok{margin-top:10px}
.opcio-lista{display:flex; flex-direction:column; gap:9px}
.opcio-sor{display:grid; grid-template-columns:24px 1fr auto; gap:8px; align-items:center}
.opcio-sor .mezo-be{min-height:44px}
.opcio-szam{color:var(--muted); font-size:13px; font-weight:600; text-align:right}
@media (min-width:640px){
  /* A bal oszlop kapja a nagyobb részt: oda három dolog kerül (nap, óra,
     „Egész nap”), a jobbra pedig egy szabad szöveg. */
  .opcio-sor{grid-template-columns:24px minmax(0,1.35fr) minmax(0,1fr) auto}
}

/* ─── Elérhetőségek ─── */
.kontakt-racs{display:grid; gap:11px; grid-template-columns:1fr}
.kontakt-kartya{padding:14px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface-2); transition:border-color .18s var(--ease)}
.kontakt-kartya:hover{border-color:var(--line-eros)}
.kontakt-fej{display:flex; gap:12px; align-items:flex-start; margin-bottom:12px}
.kontakt-nev{flex:1; min-width:0}
.kontakt-nev strong{display:block; font-size:15px; font-weight:600; line-height:1.3}
.kontakt-jelvenyek{display:flex; gap:5px; flex-wrap:wrap; margin-top:6px}
.kontakt-sorok{display:flex; flex-direction:column; gap:6px}
.kontakt-sor{display:flex; align-items:center; gap:6px}
.kontakt-sor a{flex:1; min-width:0; display:flex; align-items:center; gap:9px; padding:8px 10px;
  border-radius:8px; color:var(--text); font-size:13.5px; text-decoration:none; min-height:40px}
.kontakt-sor a:hover{background:rgba(128,128,128,.10); text-decoration:none}
.kontakt-sor a .ikon{color:var(--muted); flex:none}
.kontakt-sor a span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (min-width:640px){ .kontakt-racs{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1200px){ .kontakt-racs{grid-template-columns:repeat(3,1fr)} }

/* ─── Továbbképzés (tudásbázis) ─── */
.tudas-elrendezes{display:grid; gap:16px; grid-template-columns:1fr; align-items:start}
.tudas-menu{padding:14px}
.tudas-kategoria{margin-bottom:16px}
.tudas-kategoria:last-child{margin-bottom:0}
.tudas-kategoria h3{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); margin:0 0 6px; padding:0 8px}
.tudas-link{display:block; padding:9px 10px; border-radius:8px; color:var(--text);
  font-size:13.5px; line-height:1.4; text-decoration:none; min-height:40px}
.tudas-link:hover{background:var(--surface-2); text-decoration:none}
.tudas-link.aktiv{background:rgba(164,40,31,.14); color:var(--brand-300); font-weight:600}
.tudas-menu-lab{margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}
.olvasasi-jog{display:inline-flex; align-items:center; gap:6px; color:var(--faint);
  font-size:12.5px; margin:0; white-space:nowrap}
.cikk-szoveg{font-size:15.5px; line-height:1.75; max-width:72ch}
.cikk-szoveg h3{font-size:19px; margin:1.6em 0 .5em; color:var(--text)}
.cikk-szoveg h3:first-child{margin-top:.3em}
.cikk-szoveg h4{font-size:16px; margin:1.4em 0 .4em}
.cikk-szoveg h5{font-size:14.5px; margin:1.2em 0 .4em; color:var(--muted)}
.cikk-szoveg p{margin:0 0 1em}
.cikk-szoveg ul,.cikk-szoveg ol{margin:0 0 1em; padding-left:1.4em}
.cikk-szoveg li{margin-bottom:.4em}
.cikk-szoveg blockquote{margin:0 0 1em; padding:12px 16px; border-left:3px solid var(--brand);
  background:var(--surface-2); border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.cikk-szoveg blockquote p:last-child{margin-bottom:0}
.cikk-szoveg a{text-decoration:underline; text-underline-offset:2px}
.cikk-szoveg hr{margin:1.6em 0}
.formazo{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:8px}
.formazo-gomb{display:inline-flex; align-items:center; gap:5px; min-height:36px; padding:7px 11px;
  border:1px solid var(--line); border-radius:8px; background:var(--surface-2); color:var(--muted);
  font:600 12.5px var(--szoveg-betu); cursor:pointer}
.formazo-gomb:hover{color:var(--text); border-color:var(--line-eros)}
@media (min-width:900px){
  .tudas-elrendezes{grid-template-columns:264px 1fr}
  .tudas-menu{position:sticky; top:calc(var(--fejlec-teljes) + 14px);
    max-height:calc(100vh - var(--fejlec-teljes) - 40px); overflow-y:auto}
}

/* ─── Statisztika ─── */
.sav-sor--nulla{opacity:.5}
.modszer-link{color:var(--text); text-decoration:none}
.modszer-link:hover{color:var(--brand-300); text-decoration:underline}
.attekintes-leiras{font-size:13.5px; color:var(--muted); line-height:1.6; margin:8px 0 0; max-width:70ch}
a.idovonal-cim{color:var(--text); text-decoration:none}
a.idovonal-cim:hover{color:var(--brand-300); text-decoration:underline}

/* ─── Kezdőlap ─── */
.udvozlo{display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap}
.udvozlo-szoveg{min-width:0}
.udvozlo-napszak{color:var(--muted); font-size:14px; margin:0 0 2px}
.udvozlo-szoveg h1{margin:0 0 9px; font-size:clamp(24px,5.5vw,32px)}
.udvozlo-jelvenyek{display:flex; gap:6px; flex-wrap:wrap}
.teendo-lista{display:flex; flex-direction:column; gap:8px}
.teendo{display:flex; align-items:center; gap:12px; padding:13px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--surface-2); color:var(--text); text-decoration:none;
  transition:border-color .18s var(--ease), transform .12s var(--ease)}
.teendo:hover{text-decoration:none; border-color:var(--line-eros); transform:translateX(2px)}
.teendo--surgos{border-color:rgba(164,40,31,.42); background:rgba(164,40,31,.09)}
.teendo-ikon{width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center;
  background:rgba(164,40,31,.16); color:var(--brand-300)}
.teendo-szoveg{flex:1; min-width:0}
.teendo-szoveg strong{display:block; font-size:14.5px; font-weight:600; line-height:1.35}
.teendo-szoveg small{display:block; color:var(--muted); font-size:12.5px; margin-top:2px}
.ures-teendo{text-align:center; padding:30px 20px; border-color:rgba(127,168,140,.35)}
.ures-teendo h2{font-size:18px; margin:0 0 6px}
.ures-teendo p{color:var(--muted); font-size:14px; margin:0 auto; max-width:46ch}
.ures-teendo .ures-jel{color:var(--forest-300); background:rgba(62,92,72,.20)}
.gondolat{display:flex; gap:16px; align-items:flex-start; background:
  linear-gradient(135deg, rgba(164,40,31,.10), transparent 60%), var(--surface)}
.gondolat-jel{width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:rgba(164,40,31,.16); color:var(--brand-300)}
.gondolat blockquote{margin:0; min-width:0}
.gondolat blockquote p{font-family:var(--cim-betu); font-size:clamp(16px,3vw,19px); line-height:1.55;
  margin:0 0 6px; font-weight:500}
.gondolat cite{color:var(--muted); font-size:13px; font-style:normal}

/* ─── Profil ─── */
.profil-kep-sor{display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap}
.profil-kep-sor .kep-elonezet{width:96px; height:96px; margin:0; flex:none}
.profil-kep-szoveg{flex:1; min-width:200px}

/* ============================================================
   8. ÉRINTŐFELÜLETEK — minden vezérlő elérje a 44×44 px-t.
   Ahol a látvány miatt kisebb az elem (ikongombok), ott egy
   láthatatlan ::after réteg nagyítja fel a kattintható felületet,
   így a sűrű sorok kinézete változatlan marad.
   ============================================================ */
.ikon-gomb,.uzenet-bezar,.kereso-torles,.valaszto-sugo{position:relative}
/* FONTOS: ez ::before, NEM ::after.
   A súgó (.sugo) a saját ::after-jébe rajzolja a buboréklakot. Amíg ez a
   szabály is az ::after-t foglalta, a kettő ugyanazon a pszeudoelemen
   veszekedett: a később álló szabály tartalma („content:''”) kiütötte a súgó
   szövegét, a súgó doboza viszont megmaradt — így a ceruza, a lakat és a kuka
   fölé érve egy ÜRES SZÜRKE NÉGYZET ugrott az ikon elé, eltakarva azt.
   A tapintható felület ::before-ra költöztetésével a súgó megint kiírja a
   szövegét, az ikon pedig végig látszik. */
.ikon-gomb::before,.uzenet-bezar::before,.kereso-torles::before,.valaszto-sugo::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; /* nem látszik, csak az ujjnak szól */
}
.morzsa a,.morzsa strong,.morzsa span{display:inline-flex; align-items:center; min-height:44px}
.tab{min-height:44px}
.szuro-chip{min-height:44px}
.gomb--kicsi{min-height:44px}
.szoveg-gomb--kicsi{min-height:44px}
.formazo-gomb{min-height:40px}
.lapozo a,.lapozo span{min-height:44px; min-width:44px}
.marka{min-height:44px}
.tudas-link{display:flex; align-items:center; min-height:44px}
.kontakt-sor a{min-height:44px}
.legordulo-lap a,.legordulo-lap button{min-height:44px}
.tobb-racs a,.tobb-racs button{min-height:52px}
/* Az SOS telefonszám vészhelyzetben is jól eltalálható legyen */
.tag-fo small a,.lista-sor-fo small a{display:inline-flex; align-items:center; min-height:44px; padding:0 2px}
a.idovonal-cim,a.modszer-link{display:inline-flex; align-items:center; min-height:44px}
.opcio-valaszto{min-height:44px}
a.jelveny{min-height:44px}
.ors-chip-fo{min-height:48px}
.teendo{min-height:48px}
.naptar-nap{min-height:44px}

/* Egérrel használt gépeken a kompaktabb méret is elég */
@media (pointer:fine) and (min-width:900px){
  .morzsa a,.morzsa strong,.morzsa span{min-height:0}
  .tag-fo small a,.lista-sor-fo small a{min-height:0; padding:0}
  .gomb--kicsi{min-height:36px}
  .szuro-chip{min-height:34px}
  .formazo-gomb{min-height:36px}
  a.idovonal-cim{min-height:0; display:block}
  a.modszer-link{min-height:0; display:inline}
  a.jelveny{min-height:0}
}

/* ─── Jelszóházirend magyarázó doboz ─── */
.jelszo-hazirend{padding:13px 15px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface-2); font-size:13px; color:var(--muted)}
.jelszo-hazirend strong{display:flex; align-items:center; gap:7px; color:var(--text);
  font-size:13.5px; margin-bottom:8px}
.jelszo-hazirend ul{margin:0 0 8px; padding-left:1.2em}
.jelszo-hazirend li{margin-bottom:3px}
.jelszo-hazirend small{display:block; color:var(--faint); line-height:1.5}
.jelszo-hazirend code{font-size:12px}

/* ─── Belépési kód magyarázata az admin felületen ─── */
.kod-magyarazat{margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}
.kod-magyarazat p{display:flex; gap:8px; align-items:flex-start; margin:0 0 8px;
  color:var(--muted); font-size:13px; line-height:1.55}
.kod-magyarazat p > span{flex:1; min-width:0}   /* a szöveg egyben maradjon, ne törjön oszlopokra */
.kod-magyarazat strong{color:var(--text)}
.kod-magyarazat p:last-child{margin-bottom:0}
.kod-magyarazat .ikon{flex:none; margin-top:2px; color:var(--forest-300)}

/* ============================================================
   9. v2 — ÚJ KOMPONENSEK
   Minden szín a :root tokenekből jön, hogy a világos mód is jó legyen.
   Mobil-első: az alap szabályok telefonra szólnak.
   ============================================================ */

/* ─── Márkasor a fejlécben ─── */
/* A kiadás- és verziócímke kikerült a fejlécből — a lábléc hozza, halványan.
   Nagyon keskeny kijelzőn a csapatnév is elmarad: a „336.” és a liliom elég,
   a hosszabb névnél pedig a három pont dolgozik. */
@media (max-width:339.98px){
  .marka-szoveg small{display:none}
}

/* ─── Harang és értesítés-panel ─── */
.harang-menu{position:relative}
.harang-gomb{position:relative}
.harang-pott{
  position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--brand); color:#fff; font-size:10.5px; font-weight:700;
  display:grid; place-items:center; border:2px solid var(--surface); line-height:1;
}
.harang-lap{width:min(340px,calc(100vw - 24px)); padding:0; overflow:hidden}
.harang-fej{display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 14px; border-bottom:1px solid var(--line)}
.harang-fej strong{font-size:14px}
.harang-lista{max-height:min(58vh,420px); overflow-y:auto}
.harang-elem{
  display:flex; align-items:flex-start; gap:10px; padding:11px 14px; min-height:auto;
  color:var(--text); text-decoration:none; border-bottom:1px solid var(--line);
  border-left:3px solid transparent;
}
.harang-elem:last-child{border-bottom:0}
.harang-elem:hover{background:var(--surface-2); text-decoration:none}
.harang-elem.olvasatlan{border-left-color:var(--brand); background:rgba(164,40,31,.06)}
.harang-ikon{width:26px;height:26px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:var(--surface-2); color:var(--brand-300)}
.harang-szoveg{flex:1; min-width:0}
.harang-szoveg strong{display:block; font-size:13.5px; font-weight:600; line-height:1.35}
.harang-szoveg small{display:block; color:var(--faint); font-size:11.5px; margin-top:2px}
.harang-lab{display:block; text-align:center; padding:12px; font-size:13.5px; font-weight:600;
  border-top:1px solid var(--line); color:var(--brand-300)}
.harang-lab:hover{background:var(--surface-2); text-decoration:none}
.harang-ures{margin:0; padding:22px 16px; text-align:center; color:var(--muted); font-size:13.5px}

/* ─── Élő frissülés jelzősáv ─── */
.frissules-sav{
  position:sticky; top:var(--fejlec-teljes); z-index:55;
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:var(--surface-2); border-bottom:1px solid var(--line-eros);
  font-size:13.5px; animation:fel-be .3s var(--ease) both;
}
.frissules-sav .ikon{color:var(--sky); flex:none}
.frissules-sav span{flex:1; min-width:0}
[data-frissitheto]{transition:opacity .16s var(--ease)}
[data-frissitheto].halvanyul{opacity:.35}

/* ─── Kattintható statisztika-kártyák ─── */
.szamlalo--kattinthato{
  color:inherit; text-decoration:none; display:block; position:relative;
  transition:transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.szamlalo--kattinthato:hover,.szamlalo--kattinthato:focus-visible{
  text-decoration:none; transform:translateY(-2px);
  border-color:var(--line-eros); box-shadow:var(--shadow);
}
.szamlalo-nyil{
  position:absolute; right:12px; bottom:12px; color:var(--faint);
  opacity:0; transform:translateX(-4px); transition:opacity .16s var(--ease), transform .16s var(--ease);
}
.szamlalo--kattinthato:hover .szamlalo-nyil,
.szamlalo--kattinthato:focus-visible .szamlalo-nyil{opacity:1; transform:translateX(0)}

/* ─── Ma van születésnap ─── */
.unnep-kartya{display:flex; gap:16px; align-items:flex-start; margin-bottom:16px;
  border-color:rgba(224,138,60,.5);
  background:linear-gradient(135deg, rgba(224,138,60,.14), transparent 60%), var(--surface)}
.unnep-jel{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:rgba(224,138,60,.2); color:var(--ember)}
.unnep-szoveg{flex:1; min-width:0}
.unnep-szoveg h2{margin:0 0 4px; font-size:18px}
.unnep-szoveg p{margin:0 0 10px; font-size:14.5px; line-height:1.6}
.lista-sor--unnep{background:rgba(224,138,60,.08); border-radius:var(--radius-sm);
  padding-left:10px; padding-right:10px; margin:0 -10px}

/* ─── Beosztás-sorok az admin űrlapon ─── */
.beosztas-lista{display:flex; flex-direction:column; gap:9px}
.beosztas-sor{
  display:grid; gap:8px; align-items:center; padding:10px;
  grid-template-columns:28px 1fr auto;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2);
}
.beosztas-sor .mezo-be{min-height:44px; grid-column:2 / 3}
.beosztas-sor [data-beosztas-torol]{grid-column:3 / 4; grid-row:1 / 2}
.beosztas-elsodleges{grid-column:1 / 2; grid-row:1 / 2; display:grid; place-items:center;
  cursor:pointer; position:relative; min-height:44px}
.beosztas-elsodleges input{position:absolute; opacity:0; width:0; height:0}
.beosztas-elsodleges .valaszto-jel{border-radius:50%}
.beosztas-elsodleges .valaszto-jel::after{border-radius:50%}
.beosztas-elsodleges input:checked ~ .valaszto-jel{background:var(--brand); border-color:var(--brand)}
.beosztas-elsodleges input:checked ~ .valaszto-jel::after{transform:scale(1)}
.beosztas-elsodleges input:focus-visible ~ .valaszto-jel{box-shadow:var(--focus)}
@media (min-width:640px){
  .beosztas-sor{grid-template-columns:28px minmax(0,150px) minmax(0,1fr) minmax(0,1fr) auto}
  .beosztas-sor .mezo-be{grid-column:auto}
  .beosztas-sor [data-beosztas-torol]{grid-column:auto; grid-row:auto}
}

/* ─── Születésnap-blokk ─── */
.szuletesnap-blokk{margin-top:4px}
.szuletesnap-osszefoglalo{display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface-2); font-size:13.5px}
.szuletesnap-osszefoglalo .ikon{color:var(--ember); flex:none}
.szuletesnap-osszefoglalo > span{flex:1; min-width:0}
.szuletesnap-sor{display:grid; gap:8px; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}
.szuletesnap-sor .mezo-be{min-height:44px}
.szuletesnap-kapcsolo{margin-top:8px; font-size:13.5px}
.szuletesnap-kapcsolo span:last-child{color:var(--muted)}

/* ─── Összecsukható szekció ─── */
.osszecsukhato{position:relative}
.csuk-fej{
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  background:none; border:0; padding:12px 0; margin:0; cursor:pointer; text-align:left;
  color:var(--text); font:inherit; min-height:48px;
}
.csuk-fej--kicsi{padding:9px 0; min-height:44px}
.csuk-cim{display:flex; align-items:center; gap:8px; min-width:0; flex:1;
  font-family:var(--cim-betu); font-weight:600; font-size:16px; letter-spacing:-.01em}
.csuk-fej--kicsi .csuk-cim{font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-family:var(--szoveg-betu)}
.csuk-jobb{display:flex; align-items:center; gap:9px; flex:none; color:var(--muted)}
.csuk-nyil{transition:transform .2s var(--ease); color:var(--faint)}
.osszecsukhato.csukva .csuk-nyil{transform:rotate(-90deg)}
.csuk-test{overflow:hidden; transition:max-height .2s var(--ease)}
.csuk-fej:hover .csuk-cim{color:var(--brand-300)}
.csuk-fej:focus-visible{box-shadow:var(--focus); border-radius:8px}

/* A Csapat oldal rajkártyája is összecsukható fejlécet kapott */
.raj-kartya .csuk-fej{padding:2px 0 12px}
.raj-cim-szoveg{display:flex; flex-direction:column; gap:5px; align-items:flex-start; min-width:0}
.raj-cim-nev{font-size:18px; line-height:1.25}
.raj-kartya .raj-szam{display:flex; flex-direction:column; align-items:flex-end; line-height:1.1}
.admin-csoport{border-bottom:1px solid var(--line)}
.admin-csoport:last-child{border-bottom:0}
.tudas-kategoria .csuk-test{display:flex; flex-direction:column}

/* ─── Szekciócímek és ragadós fejlécek ─── */
.szekcio-cim--fo{color:var(--text); font-size:16px; font-family:var(--cim-betu);
  font-weight:600; margin:0 0 12px}
.szekcio-cim--ragados{
  position:sticky; top:calc(var(--fejlec-teljes) + 4px); z-index:20;
  background:var(--bg); padding:8px 0 6px; margin:14px 0 4px;
  border-bottom:1px solid var(--line); color:var(--text);
  font-family:var(--cim-betu); font-size:14px; text-transform:uppercase; letter-spacing:.06em;
}

/* ─── Jelenléti ív ─── */
.jelenlet-iv{border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface-2); padding:12px; margin-bottom:12px}
.jelenlet-iv:last-child{margin-bottom:0}
.jelenlet-fej{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px;
  padding-bottom:10px; border-bottom:1px solid var(--line)}
.jelenlet-fej > strong{font-family:var(--cim-betu); font-size:16px; font-weight:700}
.jelenlet-fej .gomb-sor{margin-left:auto; margin-top:0}
.jelenlet-allapot{font-size:12.5px; color:var(--muted); min-height:18px}
.jelenlet-allapot.ment{color:var(--sky)}
.jelenlet-allapot.kesz{color:var(--forest-300)}
.jelenlet-allapot.hiba{color:var(--brand-300)}
.jelenlet-lista{display:flex; flex-direction:column; gap:4px}
.jelenlet-sor{
  display:flex; align-items:center; gap:12px; min-height:48px; padding:6px 8px;
  border-radius:9px; cursor:pointer; position:relative;
}
.jelenlet-sor:hover{background:rgba(128,128,128,.08)}
.jelenlet-sor input{position:absolute; opacity:0; width:0; height:0}
.jelenlet-pipa{
  width:32px; height:32px; flex:none; border-radius:9px; display:grid; place-items:center;
  border:1.5px solid var(--line-eros); background:var(--surface); color:transparent;
  transition:background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
/* Az ujjnak szánt, láthatatlan 44×44-es célfelület */
.jelenlet-pipa::after{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:56px; height:44px}
.jelenlet-sor input:checked ~ .jelenlet-pipa{background:var(--forest); border-color:var(--forest); color:#fff}
.jelenlet-sor input:focus-visible ~ .jelenlet-pipa{box-shadow:var(--focus)}
.jelenlet-sor input:disabled ~ .jelenlet-pipa{opacity:.45}
.jelenlet-nev{flex:1; min-width:0; font-size:14.5px; font-weight:500}
.jelenlet-sor input:checked ~ .jelenlet-nev{color:var(--text)}
.jelenlet-sor--tiltott{cursor:default; opacity:.7}
.jelenlet-sor--tiltott:hover{background:none}

/* ─── Alkalom-választó chipek az őrs oldalon ─── */
.alkalom-valaszto{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin}
.alkalom-chip{
  flex:none; min-width:94px; padding:9px 12px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--surface-2); color:var(--text);
  text-decoration:none; text-align:center; position:relative; min-height:56px;
}
.alkalom-chip:hover{border-color:var(--line-eros); text-decoration:none}
.alkalom-chip strong{display:block; font-size:13px; font-weight:600}
.alkalom-chip small{display:block; font-size:11px; color:var(--muted); margin-top:2px}
.alkalom-chip.aktiv{border-color:var(--brand); background:rgba(164,40,31,.10)}
.alkalom-chip.kesz{border-color:rgba(127,168,140,.45)}
.alkalom-pipa{position:absolute; top:5px; right:5px; color:var(--forest-300)}

/* ─── Bökés és sorozat ─── */
.bokes-doboz{display:flex; align-items:center; gap:8px; flex:none; margin-left:auto; flex-wrap:wrap}
.bok-gomb{white-space:nowrap}
.bok-gomb--kesz{opacity:.6; pointer-events:none}
.bok-kez{display:inline-block; transform-origin:70% 80%}
.bok-kez.integet{animation:integetes .42s var(--ease)}
@keyframes integetes{
  0%{transform:rotate(0)} 25%{transform:rotate(-18deg)} 50%{transform:rotate(14deg)}
  75%{transform:rotate(-10deg)} 100%{transform:rotate(0)}
}
.sorozat-lang{
  display:inline-flex; align-items:center; gap:3px; flex:none;
  font-size:13px; font-weight:700; padding:4px 9px; border-radius:999px;
  background:rgba(164,40,31,.14); color:var(--brand-300); border:1px solid rgba(164,40,31,.3);
}
.sorozat-lang--halvany{opacity:.6; animation:lang-pulzal 2.4s ease-in-out infinite}
.sorozat-lang--figyelem{background:rgba(224,138,60,.16); color:var(--ember);
  border-color:rgba(224,138,60,.42); opacity:1; animation:none}
@keyframes lang-pulzal{0%,100%{opacity:.5} 50%{opacity:.85}}
.ranglista-hely{font-family:var(--cim-betu); font-size:17px; font-weight:700;
  color:var(--faint); width:22px; flex:none; text-align:center}

/* ─── Értesítés-lista ─── */
.ertesites-lista{display:flex; flex-direction:column}
.ertesites-sor{
  display:flex; align-items:flex-start; gap:12px; padding:14px 12px;
  border-bottom:1px solid var(--line); border-left:3px solid transparent;
  color:var(--text); text-decoration:none; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.ertesites-sor:last-child{border-bottom:0}
.ertesites-sor:hover{background:var(--surface-2); text-decoration:none}
.ertesites-sor.olvasatlan{border-left-color:var(--brand); background:rgba(164,40,31,.06)}
.ertesites-ikon{width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--surface-2); color:var(--brand-300)}
.ertesites-fo{flex:1; min-width:0}
.ertesites-fo strong{display:block; font-size:14.5px; font-weight:600; line-height:1.4}
.ertesites-fo small{display:block; color:var(--muted); font-size:12.5px; margin-top:3px; line-height:1.5}
.ertesites-sor > .ikon{color:var(--faint); margin-top:8px}
.tabok--halvany{background:transparent; padding:0; gap:6px}
.tabok--halvany .tab{border:1px solid var(--line); background:var(--surface-2)}
.tabok--halvany .tab.aktiv{border-color:var(--brand); background:rgba(164,40,31,.12); color:var(--brand-300)}

/* ─── Tárhely-diagnosztika (Storyk, csak rendszergazdának) ─── */
.tarhely-diag{font-size:13px}
.tarhely-diag summary{cursor:pointer; color:var(--muted); padding:4px 0;
  min-height:36px; display:flex; align-items:center}
.tarhely-diag summary:hover{color:var(--text)}
.tarhely-diag-lista{
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:5px 12px;
  margin:6px 0 0; padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--line);
}
.tarhely-diag-lista dt{color:var(--muted); font-size:12.5px}
.tarhely-diag-lista dd{margin:0; min-width:0; overflow-wrap:anywhere}
.tarhely-diag-lista code{font-size:12.5px}
.tarhely-diag-lista pre{
  margin:6px 0 0; padding:8px 10px; border-radius:8px; background:var(--bg);
  border:1px solid var(--line); font-size:12px; overflow-x:auto; white-space:pre;
}
.tarhely-diag-itelet{margin:10px 0 0; padding:10px 12px; border-radius:var(--radius-sm);
  background:rgba(164,40,31,.12); border:1px solid rgba(217,97,79,.4); line-height:1.5}
/* Keskeny kijelzőn a címke a saját sorába kerül — így nem törik szét a hosszú útvonal. */
@media (max-width:520px){
  .tarhely-diag-lista{grid-template-columns:1fr; gap:2px}
  .tarhely-diag-lista dt{margin-top:6px}
}

/* ─── Részvételi arány ─── */
.reszvetel-reszletek{margin:-4px 0 16px}
.reszvetel-reszletek summary{cursor:pointer; color:var(--muted); font-size:12.5px; padding:4px 0;
  min-height:36px; display:flex; align-items:center}
.reszvetel-reszletek summary:hover{color:var(--text)}
.reszvetel-tagok{display:flex; flex-direction:column; gap:7px; padding:8px 0 4px}
.reszvetel-tag{display:grid; gap:4px 10px; grid-template-columns:1fr auto; align-items:center}
.reszvetel-nev{font-size:13.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.reszvetel-szam{font-size:12px; color:var(--muted); white-space:nowrap; text-align:right}
.reszvetel-tag .sav{grid-column:1 / -1; height:6px}

/* ─── Mobil profil fül és „Több” panel fejléce ─── */
.mobil-elem--profil .avatar{width:22px;height:22px;font-size:9px}
.tobb-fej{display:flex; align-items:center; gap:11px; padding:0 4px 14px; margin-bottom:12px;
  border-bottom:1px solid var(--line)}
.tobb-fej-szoveg{min-width:0}
.tobb-fej-szoveg strong{display:block; font-size:15px; font-weight:600}
.tobb-fej-szoveg small{display:block; color:var(--muted); font-size:12.5px; margin-top:2px}
.user-tobb{color:var(--faint)}

/* ─── Húzásos frissítés jelzője ─── */
.huzas-jelzo{
  position:fixed; top:calc(var(--fejlec-teljes) + 8px); left:50%; transform:translateX(-50%);
  z-index:120; background:var(--surface); border:1px solid var(--line-eros);
  border-radius:999px; padding:8px 16px; font-size:13px; box-shadow:var(--shadow);
}

/* ─── Bejelentő modál ─── */
.bejelentes-modal{max-width:420px}
.bejelentes-hatter{backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
.bejelentes-modal .modal-lab{align-items:center}
.bejelentes-modal .modal-lab .beagyazott-urlap{flex:0 1 auto; min-width:0}
.bejelentes-modal .modal-lab .gomb{flex:0 1 auto}

/* ─── Kevesebb mozgás: minden animáció ki ─── */
@media (prefers-reduced-motion: reduce){
  .bok-kez.integet,.sorozat-lang--halvany,.unnep-jel.lebego{animation:none !important}
  .csuk-test{transition:none !important}
  [data-frissitheto]{transition:none !important}
  .szamlalo--kattinthato{transition:none !important}
  .szamlalo-nyil{opacity:1; transform:none}
}

/* Jelvény gombként is használható (pl. a „+2” beosztás-chip) */
button.jelveny{font-family:var(--szoveg-betu); cursor:pointer; -webkit-appearance:none; appearance:none}
button.jelveny:hover{border-color:var(--line-eros); color:var(--text)}

/* Ragadós szekciócím: hosszú listánál mindig látszik, hol tartunk */
.csuk-fej--ragados{
  position:sticky; top:calc(var(--fejlec-teljes) + 2px); z-index:15;
  background:var(--surface); padding-left:6px; padding-right:6px;
  margin-left:-6px; margin-right:-6px; border-bottom:1px solid var(--line);
}

/* Hiányzó v2 migráció figyelmeztetése (a fejléc alatt, teljes szélességben) */
.migracio-sav{margin:0 0 14px; border-radius:var(--radius-sm)}
.migracio-sav code{font-size:12px}
@media (min-width:900px){ .migracio-sav{margin:0 0 16px} }

/* Több őrsvezető: egymásra csúsztatott kis avatarok az őrs-chipben */
.ors-chip-avatarok{flex:none}
.ors-chip-avatarok .avatar{border-color:var(--surface-2)}

/* ═══════════════════════════════════════════════════════════
   MUNKACSOPORTOK ÉS MUNKATERV (v2.2)
   ═══════════════════════════════════════════════════════════ */
.mcs-tagok{margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
.mcs-tag-racs{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); margin-top:8px}
.mcs-tag{display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid transparent}
.mcs-tag.vezeto{border-color:var(--forest-300)}
.mcs-tag-szoveg{min-width:0}
.mcs-tag-szoveg strong{display:block; font-size:14px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mcs-tag-szoveg small{color:var(--muted); font-size:12px}
.mcs-tag.vezeto .mcs-tag-szoveg small{color:var(--forest-300)}

.mterv-lista{display:flex; flex-direction:column; gap:2px}
.mterv-sor{display:flex; align-items:flex-start; gap:12px; padding:13px 4px;
  border-top:1px solid var(--line)}
.mterv-sor:first-child{border-top:0}
.mterv-fo{flex:1; min-width:0}
.mterv-cim{display:block; font-size:15px; line-height:1.45}
.mterv-sor.kesz .mterv-cim{text-decoration:line-through; color:var(--muted)}
.mterv-leiras{margin-top:5px; font-size:14px; color:var(--muted)}
.mterv-leiras p:last-child{margin-bottom:0}
.mterv-lab{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px}

/* A pipa-karika: gombként a vezetőnek, néma jelzésként mindenki másnak */
.mterv-pipa{
  flex:none; width:28px; height:28px; margin-top:1px; border-radius:50%;
  display:grid; place-items:center; background:transparent; color:transparent;
  border:2px solid var(--line-eros); cursor:pointer; transition:all .16s var(--ease);
}
.mterv-pipa:hover{border-color:var(--forest-300); color:var(--forest-300)}
.mterv-pipa:focus-visible{outline:2px solid var(--brand-300); outline-offset:2px}
.mterv-sor.kesz .mterv-pipa{background:var(--forest); border-color:var(--forest); color:#fff}
.mterv-pipa--zart{cursor:default}
.mterv-pipa--zart:hover{border-color:var(--line-eros); color:transparent}
.mterv-sor.kesz .mterv-pipa--zart:hover{color:#fff}
.mterv-sor.lejart .mterv-pipa{border-color:var(--brand)}

.mterv-akciok{flex:none; display:flex; align-items:center; gap:2px}
.forgat-fel{transform:rotate(180deg)}

@media (max-width:640px){
  .mterv-sor{gap:10px; padding:12px 2px}
  .mterv-akciok{flex-wrap:wrap; justify-content:flex-end; max-width:78px}
}

/* ═══════════════════════════════════════════════════════════
   NAPTÁRSZŰRŐ ÉS ELMARADT ŐRSGYŰLÉS
   A szűrő korábban összecsukott <details> volt egy kártyában — most chip-sáv
   a naptár fölött. Minden chip link (a szűrő az URL-ben utazik), ezért a
   „bekapcsolva” állapot nem :checked, hanem .aktiv osztály.
   ═══════════════════════════════════════════════════════════ */
/* A z-index azért kell, mert a .stagger animáció (animation-fill-mode:both)
   saját rétegkontextust hoz létre: e nélkül a „Több szűrő” legördülője a lentebbi
   kártyák ALÁ kerülne. 56: a tartalom minden ragadós eleme fölött (15/20/55),
   de a rögzített fejléc (60) alatt — így görgetéskor a fejléc marad felül. */
.szuro-fej{display:flex; align-items:center; gap:8px; margin-bottom:8px;
  position:relative; z-index:56}

/* Görgetés-jelzés: a szélen elhalványuló sáv mutatja, hogy arra van még chip.
   A sáv végére érve eltűnik, tehát sosem ígér nem létező tartalmat. */
.szuro-sav-doboz{position:relative; flex:1 1 auto; min-width:0}
.szuro-sav-doboz::before,.szuro-sav-doboz::after{
  content:''; position:absolute; top:0; bottom:0; width:38px; pointer-events:none;
  opacity:0; transition:opacity .2s var(--ease);
}
.szuro-sav-doboz::before{left:0; background:linear-gradient(to right, var(--bg), rgba(0,0,0,0))}
.szuro-sav-doboz::after{right:0; background:linear-gradient(to left, var(--bg), rgba(0,0,0,0))}
.szuro-sav-doboz.van-elozo::before{opacity:1}
.szuro-sav-doboz.van-tobb::after{opacity:1}
/* A sáv görgethető, a „Több szűrő” viszont KÍVÜL marad: az overflow levágná
   a legördülő panelt. */
.szuro-sav{display:flex; align-items:center; gap:7px; min-width:0;
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; padding:2px 1px}
.szuro-sav::-webkit-scrollbar{display:none}
.szuro-chip{
  display:inline-flex; align-items:center; gap:6px; flex:none; white-space:nowrap;
  padding:7px 13px; border-radius:999px; cursor:pointer; user-select:none;
  border:1px solid var(--line-eros); background:var(--surface-2); color:var(--muted);
  font:500 13.5px/1.2 var(--szoveg-betu); text-decoration:none;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.szuro-chip .ikon{opacity:.7}
.szuro-chip:hover{color:var(--text); border-color:var(--faint); text-decoration:none}
.szuro-chip.aktiv{background:var(--brand); border-color:var(--brand); color:#fff}
.szuro-chip.aktiv .ikon{opacity:1}
.szuro-tobb{position:relative; flex:none}
.szuro-pipa{width:16px; height:16px; flex:none; display:grid; place-items:center}
.szuro-allapot{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 16px; color:var(--muted); font-size:12.5px}
@media (max-width:479.98px){
  .szuro-tobb-felirat{display:none}      /* keskeny kijelzőn csak a tölcsér-ikon fér ki */
}
/* Asztali gépen van hely: a chipek inkább törjenek új sorba, mint hogy a sáv
   végén lelógjanak. Görgetni csak telefonon kell. */
@media (min-width:900px){
  .szuro-sav{flex-wrap:wrap; overflow:visible}
}

/* Elmaradt őrsgyűlés-alkalom */
.nap-esemeny.elmaradt{opacity:.72}
.nap-esemeny.elmaradt > strong{text-decoration:line-through}
.elmaradt-urlap{display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-top:9px}
.elmaradt-urlap input[type=text]{flex:1; min-width:150px; font-size:13px; padding:7px 10px}

/* ═══════════════════════════════════════════════════════════
   v2.2 — ÉLMÉNYRÉTEG
   Cél: legyen benne egy kis „játék” érzés a űrlapkitöltés helyett,
   finoman futurisztikus, de MARADJON olvasható és nyugodt. Minden
   mozgás kikapcsol a prefers-reduced-motion alatt (a fájl végén).
   Színt itt sem írunk be kézzel — csak tokent.
   ═══════════════════════════════════════════════════════════ */
:root{
  --neon:#7FD4E8;                       /* hűvös kiegészítő akcent */
  --neon-halvany:rgba(127,212,232,.18);
  --racs:rgba(255,255,255,.028);        /* háttérháló */
  --uveg:rgba(255,255,255,.045);        /* üveges belső fényél */
  --rugo:cubic-bezier(.34,1.32,.5,1);   /* enyhe túllendülés — ettől „él” */
  --emeles:0 14px 34px -14px rgba(0,0,0,.55);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --neon:#2A7D96; --neon-halvany:rgba(42,125,150,.14);
    --racs:rgba(20,17,16,.030); --uveg:rgba(255,255,255,.7);
    --emeles:0 14px 30px -16px rgba(90,60,50,.34);
  }
}
[data-theme="light"]{
  --neon:#2A7D96; --neon-halvany:rgba(42,125,150,.14);
  --racs:rgba(20,17,16,.030); --uveg:rgba(255,255,255,.7);
  --emeles:0 14px 30px -16px rgba(90,60,50,.34);
}

/* Finom mérnöki háló a háttérben — mélységet ad, de nem vonja el a figyelmet */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(var(--racs) 1px, transparent 1px),
                   linear-gradient(90deg, var(--racs) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(1000px 700px at 50% 0, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(1000px 700px at 50% 0, #000 20%, transparent 78%);
}

/* ─── Semmi ne lógjon ki: vízszintes kifutás elleni védőháló ─── */
html{overflow-x:clip}
.kartya, .kartya-fej > div, .fk-feladat-szoveg, .mcs-tag-szoveg,
.mterv-fo, .user-sor-fo, .kontakt-nev{min-width:0}
.kartya-alcim, .mterv-cim, .fk-feladat-szoveg small, .fk-feladat-szoveg strong{overflow-wrap:anywhere}

/* ─── Kártyák: tapintható visszajelzés ─── */
.kartya{transition:border-color .2s var(--ease), box-shadow .25s var(--ease), transform .25s var(--rugo)}
a.kartya:hover, .kattinthato-kartya:hover{border-color:var(--line-eros); box-shadow:var(--emeles); transform:translateY(-2px)}
a.kartya:active, .kattinthato-kartya:active{transform:translateY(0) scale(.99)}

/* ─── Gombok: felső fényél és rugalmas lenyomás ─── */
.gomb{transition:transform .18s var(--rugo), border-color .2s var(--ease), box-shadow .2s var(--ease)}
.gomb--elsodleges{position:relative; overflow:hidden}
.gomb--elsodleges::after{
  content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, var(--uveg), transparent);
}
.gomb:active{transform:scale(.96)}
.ikon-gomb{transition:transform .18s var(--rugo), background-color .2s var(--ease), color .2s var(--ease)}
.ikon-gomb:hover{transform:translateY(-1px)}
.ikon-gomb:active{transform:scale(.92)}

/* ─── Fókusz: jól látható, de nem harsány ─── */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:none; box-shadow:var(--focus);
}

/* ═══════════════════════════════════════════════════════════
   FELADATAIM — a feladatkörök központja
   ═══════════════════════════════════════════════════════════ */
.fk-osszefoglalo{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:16px 18px; margin-bottom:18px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--surface);
  background-image:radial-gradient(560px 180px at 0% 0%, var(--neon-halvany), transparent 70%);
}
.fk-osszefoglalo-fo{display:flex; align-items:center; gap:14px; min-width:0}
.fk-nagy-szam{
  font-family:var(--cim-betu); font-size:38px; line-height:1; font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--text);
  text-shadow:0 0 26px var(--neon-halvany);
}
.fk-osszefoglalo-fo strong{display:block; font-size:15px}
.fk-osszefoglalo-fo small{color:var(--muted); font-size:13px}
.fk-tiszta{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px;
  background:rgba(127,168,140,.14); color:var(--siker); font-size:13.5px; font-weight:600;
  border:1px solid rgba(127,168,140,.32);
}

/* ─── 1. szint: a körök rácsa ─── */
.fk-racs{display:grid; gap:12px; grid-template-columns:1fr; margin-bottom:18px}
@media (min-width:640px){ .fk-racs{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .fk-racs{grid-template-columns:repeat(3,1fr)} }

.fk-kartya{
  display:flex; flex-direction:column; gap:5px; min-width:0;
  padding:16px 16px 14px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  position:relative; overflow:hidden; text-decoration:none;
  animation:fel-be .45s var(--ease) both; animation-delay:calc(var(--sor,0) * .05s);
  transition:transform .28s var(--rugo), border-color .2s var(--ease), box-shadow .25s var(--ease);
}
.fk-kartya::before{                       /* felső akcentcsík — a kör „színe” */
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--fk-szin), transparent 75%);
  opacity:.85;
}
.fk-kartya:hover{transform:translateY(-3px); border-color:var(--fk-szin); box-shadow:var(--emeles);
  text-decoration:none}
.fk-kartya:active{transform:translateY(-1px) scale(.99)}
.fk-kartya--brand{--fk-szin:var(--brand-300)}
.fk-kartya--forest{--fk-szin:var(--forest-300)}
.fk-kartya--sky{--fk-szin:var(--sky)}
.fk-kartya--ember{--fk-szin:var(--ember)}

.fk-fej{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px}
.fk-ikon{
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center; flex:none;
  /* Tartalék a color-mix nélküli böngészőkre — ez marad, ha a következő sor kiesik. */
  background:var(--surface-2); color:var(--fk-szin); border:1px solid var(--line-eros);
  background:color-mix(in srgb, var(--fk-szin) 16%, transparent);
  border-color:color-mix(in srgb, var(--fk-szin) 30%, transparent);
}
.fk-ikon.nagy{width:52px; height:52px; border-radius:16px}
.fk-jelveny{
  min-width:28px; height:28px; padding:0 9px; border-radius:999px; flex:none;
  display:grid; place-items:center; font-size:14px; font-weight:700;
  font-variant-numeric:tabular-nums;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line-eros);
}
.fk-jelveny.surgos{background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 0 0 4px var(--brand-glow)}
.fk-jelveny.kesz{background:rgba(127,168,140,.16); color:var(--siker); border-color:rgba(127,168,140,.34)}
.fk-nev{font-family:var(--cim-betu); font-size:17px; font-weight:600; line-height:1.25}
.fk-egyseg{color:var(--muted); font-size:13.5px; overflow-wrap:anywhere}
.fk-allapot{color:var(--faint); font-size:12.5px; margin-top:2px}
.fk-sav{display:block; height:4px; border-radius:3px; background:var(--surface-2); margin-top:11px; overflow:hidden}
.fk-sav i{display:block; height:100%; border-radius:3px; background:var(--fk-szin);
  transition:width .9s var(--ease)}
.fk-kartya.kesz .fk-sav i{background:var(--siker)}

.fk-sugo{display:flex; gap:8px; align-items:flex-start; color:var(--muted); font-size:13px;
  max-width:62ch; margin:0 0 8px}
.fk-sugo .ikon{flex:none; margin-top:2px; color:var(--neon)}

/* ─── 2. szint: egy kör részletei ─── */
.fk-vissza{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--muted);
  margin-bottom:12px; text-decoration:none}
.fk-vissza:hover{color:var(--text); text-decoration:none}
.fk-fejlec{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background-image:radial-gradient(520px 160px at 0% 0%, var(--neon-halvany), transparent 72%)}
.fk-fejlec--brand{--fk-szin:var(--brand-300)}
.fk-fejlec--forest{--fk-szin:var(--forest-300)}
.fk-fejlec--sky{--fk-szin:var(--sky)}
.fk-fejlec--ember{--fk-szin:var(--ember)}
.fk-fejlec-szoveg{flex:1; min-width:0}
.fk-fejlec-szoveg h2{margin:0; font-size:20px}
.fk-fejlec-szoveg p{margin:2px 0 0; color:var(--muted); font-size:13.5px; overflow-wrap:anywhere}
.fk-halad{padding-top:16px}

.fk-lista{padding-bottom:8px}
.fk-feladat{
  display:flex; align-items:center; gap:12px; padding:13px 12px; margin:0 -6px;
  border-radius:var(--radius-sm); text-decoration:none; color:var(--text);
  border:1px solid transparent; position:relative;
  animation:fel-be .4s var(--ease) both; animation-delay:calc(var(--sor,0) * .045s);
  transition:background-color .18s var(--ease), transform .2s var(--rugo), border-color .2s var(--ease);
}
.fk-feladat + .fk-feladat{margin-top:2px}
.fk-feladat:hover{background:var(--surface-2); border-color:var(--line); transform:translateX(3px);
  text-decoration:none}
.fk-feladat:active{transform:translateX(1px) scale(.995)}
.fk-feladat-jel{width:36px; height:36px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line)}
.fk-feladat.surgos .fk-feladat-jel{background:rgba(164,40,31,.16); color:var(--brand-300);
  border-color:rgba(164,40,31,.34)}
.fk-feladat-szoveg{flex:1; min-width:0}
.fk-feladat-szoveg strong{display:block; font-size:14.5px; font-weight:600; line-height:1.35}
.fk-feladat-szoveg small{display:block; color:var(--muted); font-size:12.5px; margin-top:2px}
.fk-surgos-cimke{
  flex:none; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:4px 9px; border-radius:999px; color:var(--brand-300);
  background:rgba(164,40,31,.14); border:1px solid rgba(164,40,31,.3);
}
.fk-feladat-nyil{flex:none; color:var(--faint); transition:transform .2s var(--rugo)}
.fk-feladat:hover .fk-feladat-nyil{transform:translateX(3px); color:var(--text)}
.fk-ures{text-align:center}

/* ─── Gyors átjárás a többi körre ─── */
.fk-csik{display:flex; gap:10px; overflow-x:auto; padding:2px 2px 10px; scrollbar-width:thin}
.fk-csik-elem{
  display:flex; align-items:center; gap:9px; flex:none; max-width:250px;
  padding:11px 14px; border-radius:999px; text-decoration:none; color:var(--text);
  background:var(--surface); border:1px solid var(--line);
  transition:transform .2s var(--rugo), border-color .2s var(--ease);
}
.fk-csik-elem:hover{transform:translateY(-2px); border-color:var(--fk-szin); text-decoration:none}
.fk-csik-elem .ikon{color:var(--fk-szin); flex:none}
.fk-csik-elem span{display:block; font-size:13.5px; font-weight:600; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fk-csik-elem small{display:block; font-weight:400; font-size:11.5px; color:var(--muted)}
.fk-csik-elem em{
  flex:none; font-style:normal; font-size:12px; font-weight:700; min-width:22px; height:22px;
  border-radius:999px; display:grid; place-items:center;
  background:var(--brand); color:#fff;
}

@media (prefers-reduced-motion: reduce){
  .fk-kartya, .fk-feladat{animation:none !important}
  .fk-kartya:hover, .fk-feladat:hover, .fk-csik-elem:hover,
  a.kartya:hover, .kattinthato-kartya:hover{transform:none !important}
  body::before{display:none}
}

/* ─── Játékosabb részletek: HUD-sarok, fénypászma, lüktető jelvény ───
   Mind dekoráció: pointer-events nélkül, és reduced-motion alatt kikapcsol. */
.fk-kartya::after{                        /* fénypászma, ami hoverre átsuhan */
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg, transparent, var(--uveg), transparent);
  transform:skewX(-16deg); opacity:0; transition:opacity .2s var(--ease);
  pointer-events:none;
}
.fk-kartya:hover::after{opacity:1; animation:fk-paszma .75s var(--ease) forwards}
@keyframes fk-paszma{ from{left:-60%} to{left:120%} }

.fk-kartya .fk-fej::before,               /* bal felső HUD-sarok */
.fk-kartya .fk-fej::after{                /* jobb felső HUD-sarok */
  content:''; position:absolute; top:10px; width:12px; height:12px;
  border-color:var(--fk-szin); opacity:0; transition:opacity .22s var(--ease);
  pointer-events:none;
}
.fk-kartya .fk-fej::before{left:9px; border-left:1.5px solid; border-top:1.5px solid; border-radius:3px 0 0 0}
.fk-kartya .fk-fej::after{right:9px; border-right:1.5px solid; border-top:1.5px solid; border-radius:0 3px 0 0}
.fk-kartya:hover .fk-fej::before,
.fk-kartya:hover .fk-fej::after{opacity:.75}

.fk-kartya:hover .fk-ikon{
  box-shadow:0 0 0 4px color-mix(in srgb, var(--fk-szin) 12%, transparent),
             0 6px 18px -8px var(--fk-szin);
}
.fk-kartya::before{transition:opacity .2s var(--ease), height .2s var(--ease)}
.fk-kartya:hover::before{height:4px; opacity:1}

/* A sürgős darabszám finoman lélegzik — így a szem rátalál, de nem villog */
.fk-jelveny.surgos{animation:fk-lelegzet 2.6s ease-in-out infinite}
@keyframes fk-lelegzet{
  0%,100%{box-shadow:0 0 0 4px var(--brand-glow)}
  50%    {box-shadow:0 0 0 7px rgba(164,40,31,.12)}
}

/* A „kész” kör visszajelzése: zöld él és pipa */
.fk-kartya.kesz{border-color:rgba(127,168,140,.3)}
.fk-kartya.kesz::before{background:linear-gradient(90deg, var(--siker), transparent 75%)}

@media (prefers-reduced-motion: reduce){
  .fk-kartya::after{display:none}
  .fk-jelveny.surgos{animation:none}
}

/* ─── Mobil finomhangolás: se átfedés, se összepréselt szöveg ─── */
/* A kör fejléce: a cím soha ne csússzon a gomb alá — inkább törjön új sorba. */
.fk-fejlec-szoveg{flex:1 1 180px}
.fk-fejlec-szoveg h2{overflow-wrap:anywhere}
.fk-fejlec > .gomb{flex:none}
@media (max-width:560px){
  .fk-fejlec{align-items:flex-start}
  .fk-fejlec > .gomb{width:100%; justify-content:center}
}
/* A sürgősséget keskeny kijelzőn a bal élcsík és a piros ikon jelzi — a
   szöveges címke helyet foglalna a feladat címétől. */
.fk-feladat.surgos{box-shadow:inset 3px 0 0 var(--brand-300)}
@media (max-width:560px){
  .fk-surgos-cimke{display:none}
  .fk-feladat{gap:10px; padding-left:14px}
}

/* ═══════════════════════════════════════════════════════════
   v2.3 — RÁCS- ÉS KÁRTYARENDEZÉS
   A hiba, amit javít: a rácselem automatikus legkisebb mérete `auto`,
   vagyis a tartalma. Egy hosszú e-mail cím így nem elliptizálódik, hanem
   SZÉTFESZÍTI az oszlopot, és a rács kilóg a kártyából.
   A javítás a `min-width:0` a rácselemen — ez pontosan ugyanaz, mint a
   minmax(0,1fr) a sávon, viszont NEM ír felül egyetlen meglévő
   oszlopdefiníciót sem (az első nekifutásom emiatt rontotta el a
   számláló-kártyák és az auto-fill rácsok elrendezését).
   ═══════════════════════════════════════════════════════════ */
.kontakt-racs > *, .fk-racs > *, .racs > *, .szamlalo-racs > *, .valaszto-racs > *,
.mcs-tag-racs > *, .egyszer-racs > *, .raj-racs > *, .tobb-racs > *, .mezo-parok > *,
.urlap-oszlopok > *, .naptar-elrendezes > *, .tudas-elrendezes > *, .szuro-sor > *,
.opcio-sor > *, .naplo-sor > *, .reszvetel-tag > *, .gyors-felvitel > *{min-width:0}

/* ─── Kontaktkártya: egy sorban lévő kártyák egyforma magasak, és a bök
       gomb mindegyiken UGYANOTT, a kártya alján ül. Így a rács rendezett. ─── */
.kontakt-kartya{display:flex; flex-direction:column; gap:12px}
.kontakt-fej{margin-bottom:0; align-items:center}
.kontakt-nev strong{overflow-wrap:anywhere}
.kontakt-nev small{display:block; color:var(--muted); font-size:12.5px; overflow-wrap:anywhere}
/* A név és a jelvények változó magasak (van, akinek három beosztása van), ezért
   a kapcsolati sorokat a kártya ALJÁRA húzzuk. Így egy sorban lévő kártyáknál az
   e-mail, a telefon és a bök gomb pontosan egy vonalban van — ettől lesz rendezett
   a rács ahelyett, hogy minden kártyán máshol kezdődne. */
.kontakt-sorok{margin-top:auto}
.kontakt-lab{
  margin-top:0; padding-top:10px; border-top:1px solid var(--line);
  display:flex; justify-content:flex-end;
}
.kontakt-lab .bokes-doboz{margin-left:0}
.bok-gomb{white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis}

/* ─── Egyéb kártyafejek: a cím és a jobb oldali gomb soha ne fusson egymásra ─── */
.kartya-fej{align-items:center}
.kartya-fej > div:first-child{flex:1 1 220px; min-width:0}
.kartya-fej > .gomb, .kartya-fej > a.gomb, .kartya-fej > button{flex:none}
.kartya-fej h2, .kartya-fej h3{overflow-wrap:anywhere}
/* A saját kártyád lába pontosan olyan magas, mint a bök gombos lábak — így a
   sorban lévő kártyák kapcsolati sorai milliméterre egy vonalban vannak. */
.kontakt-lab--magam{justify-content:flex-end; opacity:.75}
.kontakt-lab--magam .jelveny{display:inline-flex; align-items:center; min-height:44px}
/* Egérrel a kis gomb 36 px magas (lásd a 8. szekció érintőfelület-szabályait),
   ezért a jelzésnek is annyinak kell lennie — különben ez az egy kártya elcsúszik. */
@media (pointer:fine) and (min-width:900px){
  .kontakt-lab--magam .jelveny{min-height:36px}
}

/* ─── Felhasználó- és programsorok: mobilon ne préselődjön össze a szöveg ───
   A gombok eddig a név MELLETT maradtak, ezért egy hosszú név karakterenként
   tördelődött egy 100 px-es oszlopban. Keskeny kijelzőn a gombok külön sorba
   kerülnek, és a teljes szélesség a névé és az adatoké. */
.user-sor-fo, .program-sor-fo, .lista-sor-fo{min-width:0}
.user-sor-fo strong, .program-sor-fo strong, .lista-sor-fo strong{overflow-wrap:anywhere}
.user-sor-adat, .program-sor-fo small{overflow-wrap:anywhere}
@media (max-width:640px){
  /* Az avatar és a név EGY sorban marad (így olvasható a lista), csak a
     műveleti gombok csúsznak külön sorba — azoknak nincs szükségük a névre. */
  .user-sor{flex-wrap:wrap}
  .user-sor-fo{flex:1 1 0; min-width:150px}
  .user-sor-akciok{flex:1 1 100%; justify-content:flex-start; padding-top:4px;
                   border-top:1px solid var(--line); margin-top:2px}
}

/* ============================================================
   v3 — ÜVEGRÉTEG, RÖGZÍTETT SÁVOK, MOBIL FEJLÉC
   A v3 fő grafikai jegye: a felső, az oldalsó és az alsó sáv nem
   festett felület, hanem áttetsző „üveglap”, ami alatt átdereng a
   tartalom. Színt itt sem írunk be kézzel — csak tokent.
   ============================================================ */
:root{
  --uveg-hatter:rgba(28,24,23,.62);
  --uveg-elmosas:saturate(170%) blur(20px);
  --uveg-szegely:rgba(255,255,255,.10);
  --uveg-fenyel:rgba(255,255,255,.18);
  --uveg-lap:rgba(44,37,35,.55);          /* kisebb üveges elemek (gombok) */
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --uveg-hatter:rgba(255,255,255,.72);
    --uveg-szegely:rgba(20,17,16,.10);
    --uveg-fenyel:rgba(255,255,255,.9);
    --uveg-lap:rgba(255,255,255,.7);
  }
}
[data-theme="light"]{
  --uveg-hatter:rgba(255,255,255,.72);
  --uveg-szegely:rgba(20,17,16,.10);
  --uveg-fenyel:rgba(255,255,255,.9);
  --uveg-lap:rgba(255,255,255,.7);
}
/* Ahol a böngésző nem tud elmosni, ott átlátszatlan felület jön — különben
   a sávok olvashatatlanná válnának. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  :root{--uveg-hatter:var(--surface); --uveg-lap:var(--surface-2)}
}

/* ─── Mobil menügomb (bal fönt, üveges) ─── */
.menu-gomb{
  position:relative; flex:none; width:42px; height:42px; min-height:42px;
  display:grid; place-items:center; border-radius:13px; cursor:pointer;
  background:var(--uveg-lap); color:var(--text);
  border:1px solid var(--uveg-szegely);
  backdrop-filter:saturate(160%) blur(10px); -webkit-backdrop-filter:saturate(160%) blur(10px);
  box-shadow:inset 0 1px 0 var(--uveg-fenyel);
  transition:transform .18s var(--rugo), border-color .2s var(--ease), background .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.menu-gomb:hover{border-color:var(--line-eros)}
.menu-gomb:active{transform:scale(.93)}
.menu-vonalak{display:flex; flex-direction:column; gap:4px; width:18px}
.menu-vonalak i{display:block; height:2px; border-radius:2px; background:currentColor;
  transition:transform .28s var(--rugo), opacity .18s var(--ease), width .28s var(--rugo)}
.menu-vonalak i:nth-child(2){width:13px; margin-left:0}
.menu-gomb[aria-expanded="true"] .menu-vonalak i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-gomb[aria-expanded="true"] .menu-vonalak i:nth-child(2){opacity:0; width:18px}
.menu-gomb[aria-expanded="true"] .menu-vonalak i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-pott{position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%;
  background:var(--brand); box-shadow:0 0 0 2px var(--uveg-hatter)}

/* ─── A fejléc mobilon ───
   Egyetlen márkaelem van (lásd layout.php): asztali gépen a menügomb helyén,
   balra igazítva; mobilon a menügomb és a harang KÖZÖTT, középre húzva. */
@media (max-width:899.98px){
  .fejlec{gap:8px}
  .fejlec-bal{flex:1 1 auto}
  .fejlec-jobb{flex:0 0 auto}
  .tema-valto,.user-menu{display:none}
  .marka{flex:1 1 auto; justify-content:center; min-width:0}
  .marka-jel{width:32px; height:32px; border-radius:10px}
  .marka-szoveg{flex:0 1 auto}
}

/* ─── Mobil menü: bal oldali üveges fiók ─── */
.tobb-lap{
  position:fixed; top:0; left:0; bottom:0; right:auto; z-index:90;
  width:min(320px, 86vw);
  display:flex; flex-direction:column;
  background:var(--uveg-hatter);
  backdrop-filter:var(--uveg-elmosas); -webkit-backdrop-filter:var(--uveg-elmosas);
  border-right:1px solid var(--uveg-szegely); border-top:0;
  border-radius:0; box-shadow:14px 0 44px rgba(0,0,0,.42);
  padding:calc(10px + var(--biztonsag-felul)) 12px calc(14px + var(--biztonsag-alul));
  animation:beoldalt .3s var(--ease);
  overflow:hidden;
}
@keyframes beoldalt{from{transform:translateX(-100%); opacity:.4} to{transform:none; opacity:1}}
.tobb-lap .tobb-fej{padding:6px 6px 14px; margin-bottom:10px; border-bottom:1px solid var(--line)}
.tobb-lap .tobb-fej .ikon-gomb{margin-left:auto; flex:none}
.tobb-menu{display:flex; flex-direction:column; gap:2px; flex:1 1 auto;
  overflow-y:auto; overscroll-behavior:contain; padding-right:2px}
.tobb-elem{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:12px; min-height:48px;
  color:var(--muted); font-size:15px; font-weight:500; text-decoration:none;
  animation:fel-be .34s var(--ease) both;
  transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--rugo);
}
.tobb-menu .tobb-elem:nth-child(1){animation-delay:.02s}
.tobb-menu .tobb-elem:nth-child(2){animation-delay:.045s}
.tobb-menu .tobb-elem:nth-child(3){animation-delay:.07s}
.tobb-menu .tobb-elem:nth-child(4){animation-delay:.095s}
.tobb-menu .tobb-elem:nth-child(5){animation-delay:.12s}
.tobb-menu .tobb-elem:nth-child(6){animation-delay:.145s}
.tobb-menu .tobb-elem:nth-child(7){animation-delay:.17s}
.tobb-menu .tobb-elem:nth-child(n+8){animation-delay:.195s}
.tobb-elem:hover{background:var(--surface-2); color:var(--text); text-decoration:none; transform:translateX(3px)}
.tobb-elem.aktiv{color:var(--text); background:var(--surface-2)}
.tobb-elem.aktiv::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:22px; border-radius:0 3px 3px 0; background:var(--brand);
}
.tobb-elem .nav-jelveny{margin-left:auto}
/* A kilépés POST-gomb (CSRF miatt), de a fiók többi menüsorával azonos megjelenésű. */
button.tobb-elem{width:100%; border:0; background:none; cursor:pointer; text-align:left;
  font:500 15px var(--szoveg-betu); animation:none}
.tobb-lab{flex:none; padding-top:12px; margin-top:10px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:8px}
.tobb-lab .gomb{width:100%}
.tobb-kilepes-urlap{margin:0}
.lap-hatter{background:rgba(0,0,0,.55)}

/* ============================================================
   v3 — STORYK
   ============================================================ */

/* ─── Karikasáv ─── */
.story-sav-kartya{padding:14px 6px 10px; overflow:hidden}
.story-sav{
  display:flex; gap:14px; overflow-x:auto; padding:4px 10px 6px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
/* A görgetősáv csak zavarna: a félig kilógó következő karika úgyis elárulja,
   hogy oldalra lehet húzni. */
.story-sav{scrollbar-width:none}
.story-sav::-webkit-scrollbar{height:0; display:none}
.story-elem{
  flex:none; width:74px; display:flex; flex-direction:column; align-items:center; gap:7px;
  background:none; border:0; padding:2px 0; cursor:pointer; color:var(--text);
  text-decoration:none; scroll-snap-align:start;
  font:500 11.5px/1.25 var(--szoveg-betu);
  -webkit-tap-highlight-color:transparent;
}
.story-elem:hover{text-decoration:none}
.story-nev{display:block; max-width:100%; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; color:var(--muted)}
.story-elem:hover .story-nev{color:var(--text)}

/* A karika: PIROS, ha van benne meg nem nézett; SZÜRKE, ha már mindet láttad.
   A gyűrűt maga a háttér adja, az avatar pedig egy vastag, a kártya színével
   megegyező kerettel „kivágja” a közepét. Ez minden böngészőben működik —
   mask-composite nélkül is. */
.story-karika{
  position:relative; display:grid; place-items:center; width:66px; height:66px;
  border-radius:50%; padding:3px; background:var(--line-eros);
  transition:transform .22s var(--rugo), box-shadow .22s var(--ease);
}
.story-karika.uj{
  /* Vörös gyűrű egy borostyán csillanással — a piros a domináns, hogy első
     pillantásra látszódjon: ebben még van meg nem nézett story. */
  background:conic-gradient(from 200deg, var(--brand-300), var(--brand) 30%,
                            var(--ember) 52%, var(--brand) 74%, var(--brand-300));
  box-shadow:0 0 18px -6px var(--brand-glow);
}
.story-karika.latott{background:var(--line-eros)}
.story-karika .avatar{width:60px; height:60px; font-size:19px; border:3px solid var(--surface)}
.story-elem:hover .story-karika,.story-elem:focus-visible .story-karika{transform:scale(1.05)}
.story-elem:active .story-karika{transform:scale(.97)}
.story-karika--uj{background:transparent; border:2px dashed var(--line-eros); padding:1px}
.story-karika--uj .avatar{width:58px; height:58px; border-width:2px}
.story-plusz{
  position:absolute; right:-1px; bottom:-1px; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; background:var(--brand); color:#fff;
  border:2px solid var(--bg); box-shadow:0 3px 10px var(--brand-glow);
}
.story-db{
  position:absolute; right:0; top:1px; min-width:19px; height:19px; padding:0 5px;
  border-radius:999px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line-eros);
  font-size:10.5px; font-weight:700; line-height:1;
}
.story-karika.uj .story-db{background:var(--brand); color:#fff; border-color:var(--brand)}
.story-sav--kompakt .story-elem{width:66px}
.story-sav--kompakt .story-karika{width:60px; height:60px}
.story-sav--kompakt .story-karika .avatar{width:54px; height:54px; font-size:17px}

/* ─── Hozzájárulási kapu és szabálylista ─── */
.story-kapu{text-align:center; max-width:640px; margin-left:auto; margin-right:auto}
.story-kapu-jel{
  width:64px; height:64px; border-radius:20px; margin:4px auto 14px; display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(164,40,31,.22), rgba(224,138,60,.14));
  color:var(--brand-300); border:1px solid rgba(164,40,31,.3);
  animation:lebeg 3.6s ease-in-out infinite;
}
.story-szabaly-lista{list-style:none; margin:12px 0 0; padding:0; text-align:left;
  display:flex; flex-direction:column; gap:10px}
.story-szabaly-lista li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; line-height:1.55}
.story-szabaly-lista li .ikon{flex:none; margin-top:3px; color:var(--siker)}
.story-hj-modal .modal-fej h3{display:flex; align-items:center; gap:8px}
.story-hj-modal{max-width:600px}

/* ─── Feltöltő űrlap ─── */
/* ─── Feltöltő dobozka (Sahara v1) ───
   Egy nagy plusz jel és egy mondat. Ugyanaz a gesztus, mint az új program
   varázslójában: egyetlen, félreérthetetlen felület a „tegyél ide valamit”
   pillanatra. A szaggatott keret mondja meg, hogy ez egy CÉL, nem gomb.

   A `.mezo > label{display:block}` szabály erősebb, mint a komponens saját
   display-e — ezért kell a párja, különben a plusz jel és a szöveg egymás alá
   esne balra igazítva ahelyett, hogy középre rendeződne. */
.mezo > label.feltolto-dobozka{display:flex; margin-bottom:0}
.feltolto-dobozka{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:28px 18px; cursor:pointer; text-align:center;
  border:2px dashed var(--line-eros); border-radius:var(--radius);
  background:var(--surface-2); min-height:176px;
  transition:border-color .2s var(--ease), background .2s var(--ease),
             transform .18s var(--rugo), box-shadow .2s var(--ease);
}
.feltolto-dobozka:hover{
  border-color:var(--brand-300); background:var(--surface);
  box-shadow:0 6px 22px var(--brand-glow);
}
.feltolto-dobozka:active{transform:scale(.99)}
.feltolto-dobozka:focus-within{border-color:var(--brand); box-shadow:var(--focus)}
.feltolto-plusz{
  width:62px; height:62px; border-radius:20px; flex:none; display:grid; place-items:center;
  background:rgba(164,40,31,.14); color:var(--brand-300);
  transition:transform .22s var(--rugo), background .2s var(--ease);
}
.feltolto-dobozka:hover .feltolto-plusz{transform:scale(1.06) rotate(90deg); background:rgba(164,40,31,.2)}
.feltolto-szoveg{min-width:0}
.feltolto-szoveg strong{display:block; font-size:16px; font-weight:600; overflow-wrap:anywhere}
.feltolto-szoveg small{display:block; color:var(--muted); font-size:13px; margin-top:3px}
.feltolto-reszletek{color:var(--faint); font-size:11.5px; line-height:1.5}
/* Ha már van kiválasztott fájl, a dobozka összehúzódik: a helyet az előnézet kapja. */
.feltolto-dobozka.van-fajl{min-height:0; padding:14px 16px; flex-direction:row; text-align:left}
.feltolto-dobozka.van-fajl .feltolto-plusz{width:40px; height:40px; border-radius:13px}
.feltolto-dobozka.van-fajl .feltolto-plusz .ikon{width:20px; height:20px}
.feltolto-dobozka.van-fajl:hover .feltolto-plusz{transform:none}
.feltolto-dobozka.van-fajl .feltolto-szoveg{flex:1}
.feltolto-dobozka.van-fajl .feltolto-szoveg strong{font-size:14px}
.feltolto-dobozka.van-fajl .feltolto-reszletek{display:none}
@media (prefers-reduced-motion: reduce){
  .feltolto-dobozka,.feltolto-plusz{transition:none}
  .feltolto-dobozka:hover .feltolto-plusz{transform:none}
}

.story-elonezet{margin-top:12px; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:#000; position:relative}
.story-elonezet img,.story-elonezet video{width:100%; max-height:46vh; object-fit:contain; display:block}
.story-elonezet-cimke{
  position:absolute; left:10px; bottom:10px; padding:5px 10px; border-radius:999px;
  background:rgba(0,0,0,.55); color:#fff; font-size:12px; font-weight:600;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.story-elonezet-cimke.tul-hosszu{background:var(--brand)}

/* ─── A saját storyjaim ─── */
.story-sajat-racs{display:flex; flex-direction:column; gap:2px}
.story-sajat{display:flex; gap:13px; align-items:flex-start; padding:13px 2px;
  border-top:1px solid var(--line)}
.story-sajat:first-child{border-top:0}
.story-sajat-kep{
  width:56px; height:76px; flex:none; border-radius:11px; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--line); display:grid; place-items:center;
}
.story-sajat-kep img{width:100%; height:100%; object-fit:cover}
.story-sajat-video{display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--muted)}
.story-sajat-video em{font-style:normal; font-size:10.5px; font-weight:700}
.story-sajat-fo{flex:1; min-width:0}
.story-sajat-fo > strong{display:block; font-size:14.5px; line-height:1.35; overflow-wrap:anywhere}
.story-sajat-fo > small{display:block; color:var(--muted); font-size:12.5px; margin-top:2px}
.story-statisztika{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.story-sajat-torles{flex:none; margin:0}
.story-nezo-sor,.story-nezo{display:flex; align-items:center; gap:9px; padding:7px 0;
  font-size:13.5px; min-width:0}
.story-nezo > span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.story-nezo-emoji{flex:none; font-size:15px}
.story-nezo small{margin-left:auto; flex:none}

/* ============================================================
   v3 — STORY-LEJÁTSZÓ (teljes képernyős)
   FIGYELEM: az osztály neve .story-lejatszo — a .story-nezo a „ki nézte meg”
   lista egy sora, az egy másik komponens.
   ============================================================ */
.story-lejatszo{
  position:fixed; inset:0; z-index:160; display:flex; flex-direction:column;
  background:rgba(8,6,6,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  animation:felbukkan .18s var(--ease);
  padding:calc(var(--biztonsag-felul) + 10px) 10px calc(var(--biztonsag-alul) + 10px);
  color:#fff;
}
.story-doboz{
  position:relative; flex:1 1 auto; width:100%; max-width:520px; margin:0 auto;
  display:flex; flex-direction:column; min-height:0;
  border-radius:18px; overflow:hidden; background:#0a0808;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  animation:modal-be .26s var(--ease);
}
.story-savok{display:flex; gap:4px; padding:10px 10px 0; position:absolute; top:0; left:0; right:0; z-index:3}
.story-savok i{flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.28); overflow:hidden;
  display:block; position:relative}
.story-savok i b{position:absolute; inset:0 auto 0 0; width:0; background:#fff; border-radius:3px; display:block}
.story-savok i.kesz b{width:100%}
.story-fej{
  position:absolute; top:22px; left:0; right:0; z-index:3;
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  background:linear-gradient(to bottom, rgba(0,0,0,.6), transparent);
}
.story-fej .avatar{border:2px solid rgba(255,255,255,.6); flex:none}
.story-fej-szoveg{flex:1; min-width:0; line-height:1.25}
.story-fej-szoveg strong{display:block; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.story-fej-szoveg small{display:block; font-size:11.5px; color:rgba(255,255,255,.72);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.story-fej .ikon-gomb{border-color:rgba(255,255,255,.28); color:#fff; background:rgba(0,0,0,.28)}
.story-fej .ikon-gomb:hover{background:rgba(255,255,255,.16); color:#fff}
.story-media{
  flex:1 1 auto; min-height:0; display:grid; place-items:center; background:#000; position:relative;
}
.story-media img,.story-media video{width:100%; height:100%; object-fit:contain; display:block}
.story-lap{position:absolute; top:0; bottom:0; width:34%; z-index:2; background:none; border:0;
  cursor:pointer; -webkit-tap-highlight-color:transparent}
.story-lap--elozo{left:0}
.story-lap--kovetkezo{right:0; width:66%}
.story-lab{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding:14px 12px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.75), transparent);
  display:flex; flex-direction:column; gap:10px;
}
.story-felirat{font-size:14.5px; line-height:1.45; margin:0; text-shadow:0 1px 8px rgba(0,0,0,.6)}
.story-alkalom{font-size:11.5px; color:rgba(255,255,255,.72); margin:0; display:flex;
  align-items:center; gap:6px; flex-wrap:wrap}
.story-akciok{display:flex; align-items:center; gap:6px}
.story-emojik{display:flex; gap:5px; flex:1; flex-wrap:wrap}
.story-emoji{
  width:42px; height:42px; min-height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10); font-size:20px; line-height:1; cursor:pointer;
  display:grid; place-items:center; padding:0;
  transition:transform .2s var(--rugo), background .18s var(--ease), border-color .18s var(--ease);
}
.story-emoji:hover{transform:translateY(-3px) scale(1.08); background:rgba(255,255,255,.2)}
.story-emoji:active{transform:scale(.9)}
.story-emoji.aktiv{background:var(--brand); border-color:var(--brand); transform:scale(1.08)}
.story-emoji.pattan{animation:story-pattan .5s var(--rugo)}
@keyframes story-pattan{0%{transform:scale(1)} 45%{transform:scale(1.42) rotate(-8deg)} 100%{transform:scale(1.08)}}
.story-letoltes{
  flex:none; display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 14px;
  border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.10);
  color:#fff; font:600 13px var(--szoveg-betu); text-decoration:none; cursor:pointer;
}
.story-letoltes:hover{background:rgba(255,255,255,.2); color:#fff; text-decoration:none}
.story-szunet-jel{
  position:absolute; inset:0; display:none; place-items:center; z-index:2; pointer-events:none;
}
.story-doboz.szunetel .story-szunet-jel{display:grid}
.story-szunet-jel span{width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background:rgba(0,0,0,.45); color:#fff; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
.story-ures-nezo{margin:auto; text-align:center; color:rgba(255,255,255,.8); padding:24px}

@media (min-width:900px){
  .story-lejatszo{padding:24px; justify-content:center}
  /* Álló, telefonszerű arány — de a lapozó felületek MARADNAK a dobozon belül,
     különben az overflow:hidden levágná őket, és egérrel nem lehetne lapozni. */
  .story-doboz{flex:0 1 auto; width:min(462px, 100%); height:min(86vh, 820px); border-radius:22px}
  .story-lap{width:26%}
  .story-lap--kovetkezo{width:44%}
}

/* ============================================================
   v3 — TOVÁBBKÉPZÉS: legyen jó móka olvasgatni
   Minden mozgás dekoráció, és a fájl végi reduced-motion blokk kikapcsolja.
   ============================================================ */
.tk-fejlec{
  position:relative; overflow:hidden; padding:22px 20px; margin-bottom:18px;
  border-radius:var(--radius); border:1px solid var(--line); background:var(--surface);
  background-image:radial-gradient(680px 220px at 8% 0%, var(--neon-halvany), transparent 70%),
                   radial-gradient(520px 200px at 96% 100%, rgba(164,40,31,.12), transparent 70%);
}
.tk-fejlec::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg, transparent, var(--uveg), transparent);
  transform:skewX(-16deg); animation:fk-paszma 6.5s var(--ease) 1.2s infinite; pointer-events:none;
}
.tk-fejlec-fo{display:flex; align-items:center; gap:16px; flex-wrap:wrap; position:relative; z-index:1}
.tk-jel{
  width:56px; height:56px; border-radius:18px; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(164,40,31,.22), rgba(127,212,232,.14));
  color:var(--brand-300); border:1px solid var(--line-eros);
  animation:lebeg 4s ease-in-out infinite;
}
.tk-fejlec-szoveg{flex:1; min-width:180px}
.tk-fejlec-szoveg h2{margin:0 0 4px; font-size:20px}
.tk-fejlec-szoveg p{margin:0; color:var(--muted); font-size:13.5px; max-width:60ch}
.tk-szamok{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; position:relative; z-index:1}

/* Olvasási haladásjelző a cikk tetején */
.tk-halad{
  position:sticky; top:calc(var(--fejlec-teljes) + 2px); z-index:18;
  height:3px; border-radius:3px; background:var(--surface-2); overflow:hidden; margin-bottom:10px;
}
.tk-halad i{display:block; height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg, var(--brand), var(--ember)); transition:width .12s linear}

/* A tartalomjegyzék kategóriái: nyíló fiókok, lépcsőzetesen beúszó linkekkel */
.tudas-kategoria{
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:2px 12px;
  background:var(--surface-2); margin-bottom:10px;
  transition:border-color .22s var(--ease), background .22s var(--ease), box-shadow .25s var(--ease);
}
.tudas-kategoria:hover{border-color:var(--line-eros)}
.tudas-kategoria:not(.csukva){box-shadow:inset 3px 0 0 var(--brand)}
.tudas-kategoria .csuk-fej--kicsi{padding:11px 0}
.tudas-kategoria .csuk-cim{color:var(--text); font-weight:700}
.tudas-kategoria:not(.csukva) .csuk-cim{color:var(--brand-300)}
.tudas-kategoria .csuk-test{padding-bottom:6px}
.tudas-kategoria:not(.csukva) .tudas-link{animation:tk-becsuszik .34s var(--ease) both}
.tudas-kategoria .tudas-link:nth-child(1){animation-delay:.02s}
.tudas-kategoria .tudas-link:nth-child(2){animation-delay:.05s}
.tudas-kategoria .tudas-link:nth-child(3){animation-delay:.08s}
.tudas-kategoria .tudas-link:nth-child(4){animation-delay:.11s}
.tudas-kategoria .tudas-link:nth-child(5){animation-delay:.14s}
.tudas-kategoria .tudas-link:nth-child(n+6){animation-delay:.17s}
@keyframes tk-becsuszik{from{opacity:0; transform:translateX(-10px)} to{opacity:1; transform:none}}
.tudas-link{position:relative; padding-left:22px}
.tudas-link::before{
  content:''; position:absolute; left:8px; top:50%; transform:translateY(-50%) scale(.6);
  width:6px; height:6px; border-radius:50%; background:var(--line-eros);
  transition:transform .2s var(--rugo), background .2s var(--ease);
}
.tudas-link:hover{transform:translateX(3px)}
.tudas-link:hover::before{background:var(--brand-300); transform:translateY(-50%) scale(1)}
.tudas-link.aktiv::before{background:var(--brand); transform:translateY(-50%) scale(1.25);
  box-shadow:0 0 0 4px var(--brand-glow)}
.tudas-link{transition:transform .2s var(--rugo), background .18s var(--ease), color .18s var(--ease)}

/* A cikk maga: a bekezdések görgetésre úsznak be */
.cikk{position:relative; overflow:hidden}
.cikk::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--brand), var(--ember) 45%, transparent 85%);
}
.cikk-szoveg > *{animation:tk-fel .5s var(--ease) both}
.cikk-szoveg > *:nth-child(1){animation-delay:.02s}
.cikk-szoveg > *:nth-child(2){animation-delay:.06s}
.cikk-szoveg > *:nth-child(3){animation-delay:.10s}
.cikk-szoveg > *:nth-child(4){animation-delay:.14s}
.cikk-szoveg > *:nth-child(5){animation-delay:.18s}
.cikk-szoveg > *:nth-child(n+6){animation-delay:.22s}
@keyframes tk-fel{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}

/* Görgetésre felbukkanó blokkok (az app.js teszi rájuk a „latszik” osztályt) */
[data-felbukkan]{opacity:0; transform:translateY(18px);
  transition:opacity .55s var(--ease), transform .55s var(--ease)}
[data-felbukkan].latszik{opacity:1; transform:none}

/* A cikk címsorai kapnak egy finom bal élcsíkot, ami hoverre kinő */
.cikk-szoveg h3{position:relative; padding-left:14px}
.cikk-szoveg h3::before{
  content:''; position:absolute; left:0; top:.28em; bottom:.28em; width:3px; border-radius:3px;
  background:var(--brand); transform:scaleY(.55); transform-origin:center;
  transition:transform .3s var(--rugo);
}
.cikk-szoveg h3:hover::before{transform:scaleY(1)}
.cikk-szoveg blockquote{transition:transform .25s var(--rugo), border-color .25s var(--ease)}
.cikk-szoveg blockquote:hover{transform:translateX(4px); border-left-color:var(--ember)}
.cikk-szoveg li{transition:transform .2s var(--ease)}
.cikk-szoveg li:hover{transform:translateX(3px)}

/* Következő / előző cikk — lapozás a tudásbázisban */
.tk-lapozo{display:grid; gap:10px; grid-template-columns:1fr; margin-top:16px}
@media (min-width:640px){ .tk-lapozo{grid-template-columns:1fr 1fr} }
.tk-lapozo-elem{
  display:flex; align-items:center; gap:11px; padding:14px; min-height:64px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  color:var(--text); text-decoration:none;
  transition:transform .24s var(--rugo), border-color .2s var(--ease), box-shadow .25s var(--ease);
}
.tk-lapozo-elem:hover{transform:translateY(-3px); border-color:var(--brand-300);
  box-shadow:var(--emeles); text-decoration:none}
.tk-lapozo-elem .ikon{flex:none; color:var(--brand-300)}
.tk-lapozo-szoveg{min-width:0}
.tk-lapozo-szoveg small{display:block; color:var(--faint); font-size:11.5px;
  text-transform:uppercase; letter-spacing:.06em}
.tk-lapozo-szoveg strong{display:block; font-size:14.5px; line-height:1.35; overflow-wrap:anywhere}
.tk-lapozo-elem--jobb{text-align:right; flex-direction:row-reverse}

@media (prefers-reduced-motion: reduce){
  .tk-fejlec::after,.tk-jel,.story-kapu-jel{animation:none !important}
  .cikk-szoveg > *,.tudas-kategoria .tudas-link{animation:none !important}
  [data-felbukkan]{opacity:1 !important; transform:none !important}
  .story-emoji.pattan{animation:none !important}
  .tobb-elem{animation:none !important}
}

/* ─── Story-csali a kezdőlapon ─── */
.story-csali{display:flex; align-items:center; gap:13px; color:var(--text); text-decoration:none}
.story-csali:hover{text-decoration:none}
.story-csali-jel{
  width:44px; height:44px; border-radius:14px; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(164,40,31,.20), rgba(224,138,60,.12));
  color:var(--brand-300); border:1px solid rgba(164,40,31,.28);
}
.story-csali-szoveg{flex:1; min-width:0}
.story-csali-szoveg strong{display:block; font-size:14.5px; line-height:1.35}
.story-csali-szoveg small{display:block; color:var(--muted); font-size:12.5px; margin-top:2px}
.story-csali > .ikon{flex:none; color:var(--faint)}

/* ─── Story-feltöltés: folyamatjelző (nagy videónál elengedhetetlen) ─── */
.story-halad{margin-top:14px}
.story-halad-sav{height:8px; border-radius:5px; background:var(--surface-2);
  border:1px solid var(--line); overflow:hidden}
.story-halad-sav i{display:block; height:100%; width:0; border-radius:5px;
  background:linear-gradient(90deg, var(--brand), var(--ember));
  transition:width .2s linear}
.story-halad-szoveg{display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-top:6px; font-size:13px}
.story-halad-szoveg span{font-weight:600; font-variant-numeric:tabular-nums}
.story-halad-szoveg small{color:var(--muted); font-variant-numeric:tabular-nums}

/* ══════════════════════════════════════════════════════════════
   v4 — ŐRSI FÜZET, ŐÁMTVT, VEZETŐI PROFIL,
        ELMARADT ŐRSGYŰLÉS AZ ADMINISZTRÁCIÓNÁL,
        SZAVAZÁS: A VEZETŐ IDŐPONT
   ══════════════════════════════════════════════════════════════ */

/* ─── Csali az őrs adatlapján: „Őrsi füzet” ─── */
.fuzet-csali{display:flex; align-items:center; gap:13px; color:var(--text);
  text-decoration:none; margin-bottom:16px}
.fuzet-csali:hover{text-decoration:none}
.fuzet-csali-jel{
  width:44px; height:44px; border-radius:14px; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(76,127,163,.18), rgba(127,168,140,.12));
  color:var(--sky); border:1px solid rgba(76,127,163,.28);
}
.fuzet-csali-szoveg{flex:1; min-width:0}
.fuzet-csali-szoveg strong{display:block; font-size:14.5px; line-height:1.35}
.fuzet-csali-szoveg small{display:block; color:var(--muted); font-size:12.5px; margin-top:2px}
.fuzet-csali > .ikon{flex:none; color:var(--faint)}

/* ─── A füzet bejegyzései ─── */
.fuzet-lista{display:flex; flex-direction:column; gap:10px}
.fuzet-elem{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; padding:13px 15px;
}
.fuzet-fej{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:7px}
.fuzet-fej > strong{font-size:15px; line-height:1.3; flex:1 1 auto; min-width:0}
.fuzet-akciok{display:flex; gap:4px; margin-left:auto; flex:none}
.fuzet-szoveg{margin:0 0 7px; font-size:14px; line-height:1.6; white-space:normal;
  overflow-wrap:anywhere}
.fuzet-elem > small{display:block}

/* Egy gyerek összecsukható blokkja a füzetben */
.fuzet-tag .csuk-cim{display:flex; align-items:center; gap:9px}
.fuzet-uj-jegyzet{margin-top:12px; padding-top:12px; border-top:1px dashed var(--line)}

/* ─── Szavazás: a jelenleg vezető opció a kártyán ─── */
.szavazas-vezeto{
  display:flex; align-items:flex-start; gap:7px; margin:10px 0 0;
  font-size:13px; color:var(--forest-300); line-height:1.45;
}
.szavazas-vezeto .ikon{flex:none; margin-top:1px}
.szavazas-vezeto strong{color:var(--text)}
.szavazas-kartya--lezart .szavazas-vezeto{color:var(--muted)}

/* ─── Jelenlét-adminisztráció: sor + hozzáragasztott „Elmaradt” gomb ─── */
.jelenlet-teendo{display:flex; flex-direction:column}
.jelenlet-teendo--elmaradhat > .program-sor{border-bottom-left-radius:0; border-bottom-right-radius:0}
.elmaradt-urlap--admin{
  padding:10px 12px 11px;
  background:var(--surface); border:1px solid var(--line); border-top:0;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
}
.elmaradt-urlap--admin input[type=text]{flex:1; min-width:150px; font-size:13px; padding:7px 10px}

/* ─── Vezetői profil ─── */
.vezeto-fej{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.vezeto-nev{flex:1; min-width:0}
.vezeto-nev h2{margin:0; font-size:20px; letter-spacing:-.01em}
.vezeto-nev .kontakt-jelvenyek{margin-top:8px}

/* A névre és a képre kattintva megnyílik a profil */
.kontakt-nev-link{color:inherit; text-decoration:none; display:block}
.kontakt-nev-link:hover{text-decoration:none}
.kontakt-nev-link:hover strong{text-decoration:underline; text-underline-offset:2px}
.kontakt-kep-link{display:inline-flex; flex:none; border-radius:50%}
.kontakt-kep-link:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* ─── Értesítés-engedély kártya ─── */
.ertesites-engedely{margin-bottom:16px}
.ertesites-engedely .lista-sor{align-items:center}

/* ══════════════════════════════════════════════════════════════
   v4.1 — ESZKÖZÉRTESÍTÉS (Web Push)
   ══════════════════════════════════════════════════════════════ */

/* „Szóljon hanggal is” — a kártya alapelve a néma jelzés, ez a kivétel kapcsolója */
.push-hang{
  display:flex; align-items:flex-start; gap:11px; cursor:pointer;
  margin:12px 0 0; padding:11px 13px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--surface-2);
}
.push-hang input{position:absolute; opacity:0; width:0; height:0}
.push-hang > span:last-child{flex:1; min-width:0}
.push-hang strong{display:block; font-size:14px; font-weight:600; line-height:1.35}
.push-hang small{display:block; color:var(--muted); font-size:12.5px; margin-top:2px}
.push-hang:hover{border-color:var(--line-eros)}
.push-hang .valaszto-jel{margin-top:1px}

/* Az eszközlista sorai a kártyán belül maradjanak összefogva */
[data-push-eszkozok]{margin-top:4px}
.push-hang input:checked ~ .valaszto-jel{background:var(--brand); border-color:var(--brand)}
.push-hang input:checked ~ .valaszto-jel::after{transform:scale(1)}
.push-hang input:focus-visible ~ .valaszto-jel{box-shadow:var(--focus)}
.push-hang:has(input:checked){border-color:rgba(164,40,31,.45)}

/* Az értesítés-kapcsoló sorában KÉT gomb is van (Próba + be/ki). A .lista-sor
   alapból nem tör sorba, így telefonon a magyarázó szöveg pár pixelre préselődne.
   Csak EZT az egy sort engedjük tördelni — az eszközlista sorai maradnak egysorosak. */
.ertesites-engedely > .lista-sor{flex-wrap:wrap}
.ertesites-engedely > .lista-sor .lista-sor-fo{flex:1 1 220px}
@media (max-width:520px){
  .ertesites-engedely > .lista-sor .gomb{flex:1 1 auto}
}

/* ══════════════════════════════════════════════════════════════
   13. SAHARA v1 — VARÁZSLÓ (lépésről lépésre haladó űrlap)

   Mikor látszik: új program felvételekor, és csak akkor, ha az app.js
   bekapcsolta (`body.varazslo-mod`). JavaScript nélkül a `.varazslo`
   osztály sem kap külön elrendezést: az űrlap sima, hosszú kártya marad,
   minden mezővel — a rögzítés tehát sosem múlik a JavaScripten.

   Mit csinál: a lap tartalmát elhomályosítja egy mintás fátyol, és fölötte
   egyetlen kérdés áll. A lépések oldalirányban csúsznak be és ki.
   ══════════════════════════════════════════════════════════════ */

/* ─── A homályos, mintás háttér ─── */
.varazslo-hatter{
  position:fixed; inset:0; z-index:190;
  background:
    /* Halvány liliom-rácsminta: két elforgatott vonalsereg + két fényfolt.
       Szándékosan nagyon halk — a háttérnek textúrát adunk, nem rajzot. */
    radial-gradient(circle at 18% 22%, var(--hatter-fenylatt), transparent 55%),
    radial-gradient(circle at 82% 78%, var(--hatter-fenylatt2), transparent 55%),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.030) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.030) 0 1px, transparent 1px 22px),
    var(--surface-attetszo);
  backdrop-filter:blur(20px) saturate(118%);
  -webkit-backdrop-filter:blur(20px) saturate(118%);
  animation:varazslo-fatyol .42s var(--ease) both;
}
/* Világos módban a fehér vonalháló nem látszana — ott sötét vonalakkal rajzolunk. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .varazslo-hatter{
    background:
      radial-gradient(circle at 18% 22%, var(--hatter-fenylatt), transparent 55%),
      radial-gradient(circle at 82% 78%, var(--hatter-fenylatt2), transparent 55%),
      repeating-linear-gradient(45deg, rgba(20,17,16,.035) 0 1px, transparent 1px 22px),
      repeating-linear-gradient(-45deg, rgba(20,17,16,.035) 0 1px, transparent 1px 22px),
      var(--surface-attetszo);
  }
}
[data-theme="light"] .varazslo-hatter{
  background:
    radial-gradient(circle at 18% 22%, var(--hatter-fenylatt), transparent 55%),
    radial-gradient(circle at 82% 78%, var(--hatter-fenylatt2), transparent 55%),
    repeating-linear-gradient(45deg, rgba(20,17,16,.035) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(20,17,16,.035) 0 1px, transparent 1px 22px),
    var(--surface-attetszo);
}
@keyframes varazslo-fatyol{
  from{opacity:0; backdrop-filter:blur(0px)}
  to{opacity:1}
}
/* A varázsló ideje alatt a lap mögötte ne görgethető — különben az ujj a
   fátyol alatti tartalmat mozgatná. */
body.varazslo-mod{overflow:hidden}

/* ─── A varázsló kártyája ─── */
body.varazslo-mod .varazslo{
  position:fixed; z-index:200;
  left:50%; top:50%; transform:translate(-50%, -50%);
  width:min(620px, calc(100vw - 24px));
  /* A kártya csak annyi, amennyi a KÉRDÉS — nem nyúlik ki a képernyő aljáig.
     Ha egy lépés mégis hosszabb (kilenc cserkészmódszer), a kártyán belül
     görgethető, a lépegető gombok pedig alul ragadnak. */
  max-height:calc(100dvh - 28px - var(--biztonsag-felul) - var(--biztonsag-alul));
  margin:0; display:flex; flex-direction:column;
  overflow-y:auto; overscroll-behavior:contain;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  animation:varazslo-belep .42s var(--ease) both;
}
/* A dvh-t nem ismerő régebbi böngészőkön a vh a tartalék. */
@supports not (height: 100dvh){
  body.varazslo-mod .varazslo{max-height:calc(100vh - 28px)}
}
@keyframes varazslo-belep{
  from{opacity:0; transform:translate(-50%, -50%) translateY(18px) scale(.97)}
  to{opacity:1; transform:translate(-50%, -50%) translateY(0) scale(1)}
}

/* ─── Haladásjelző ─── */
.varazslo-fej{margin:-4px 0 18px}
.varazslo-sav{height:4px; border-radius:999px; background:var(--surface-2); overflow:hidden}
.varazslo-sav i{
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, var(--brand), var(--brand-300));
  transition:width .45s var(--ease);
}
.varazslo-allapot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:9px 0 0; font-size:12.5px; color:var(--muted);
}
.varazslo-megsem{color:var(--muted); text-decoration:none; font-weight:600}
.varazslo-megsem:hover{color:var(--text)}

/* ─── Egy lépés ─── */
.varazslo-lepes{
  opacity:0; transform:translateX(0);
  transition:opacity .26s var(--ease), transform .26s var(--ease);
}
.varazslo-lepes.lathato{opacity:1; transform:none}
.varazslo-lepes.erkezik-jobbrol{opacity:0; transform:translateX(26px)}
.varazslo-lepes.erkezik-balrol{opacity:0; transform:translateX(-26px)}
.varazslo-lepes.tavozik-balra{opacity:0; transform:translateX(-26px)}
.varazslo-lepes.tavozik-jobbra{opacity:0; transform:translateX(26px)}
.varazslo-lepes[hidden]{display:none}

/* A lépés kérdése nagyobb: ez az egyetlen dolog, amit épp kérdezünk. */
body.varazslo-mod .varazslo-lepes legend{
  font-family:var(--cim-betu); font-size:20px; line-height:1.3; letter-spacing:-.01em;
  color:var(--text); margin-bottom:4px;
}
.varazslo-sugo{color:var(--muted); font-size:13.5px; line-height:1.6; margin:0 0 14px}
.varazslo-kapcsolo{margin-top:2px}
/* A „Csak a vezetőknek” választókártyán a csapat címere áll ikon helyett. */
.valaszto-cimer{border-radius:4px; vertical-align:-3px; display:inline-block}

/* A választókártyák egyesével úsznak be — ettől lesz „élő” a lépésváltás. */
body.varazslo-mod .varazslo-lepes.lathato .valaszto-kartya{
  animation:varazslo-kartya .38s var(--ease) both;
}
body.varazslo-mod .varazslo-lepes.lathato .valaszto-kartya:nth-child(1){animation-delay:.04s}
body.varazslo-mod .varazslo-lepes.lathato .valaszto-kartya:nth-child(2){animation-delay:.09s}
body.varazslo-mod .varazslo-lepes.lathato .valaszto-kartya:nth-child(3){animation-delay:.14s}
body.varazslo-mod .varazslo-lepes.lathato .valaszto-kartya:nth-child(4){animation-delay:.19s}
body.varazslo-mod .varazslo-lepes.lathato .valaszto-kartya:nth-child(n+5){animation-delay:.23s}
@keyframes varazslo-kartya{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:none}
}

/* ─── Lábléc: a lépegető gombok ─── */
body.varazslo-mod .varazslo-lab{
  position:sticky; bottom:0; margin-top:auto;
  background:linear-gradient(to top, var(--surface) 72%, transparent);
  padding-top:14px;
}
body.varazslo-mod .varazslo-tovabb,
body.varazslo-mod [data-varazslo-mentes]{margin-left:auto}

/* ─── Kevés mozgás: minden átmenet elmarad, a rend marad ─── */
@media (prefers-reduced-motion: reduce){
  .varazslo-hatter,
  body.varazslo-mod .varazslo,
  body.varazslo-mod .varazslo-lepes.lathato .valaszto-kartya{animation:none}
  .varazslo-lepes{transition:none; transform:none}
  .varazslo-sav i{transition:none}
}

/* ─── Szavazás-opció: dátum, nem kötelező óra, „egész nap” ─── */
/* A nap és az óra egy sorban áll; az „Egész nap” jelölő alájuk törhet.
   Szándékos: inkább legyen a dátummező kényelmesen széles és a jelölőnégyzet
   elég nagy az ujjnak, mint hogy három dolgot préseljünk egyetlen sorba. */
.opcio-ido-mezok{display:flex; gap:6px; align-items:center; flex-wrap:wrap; flex:1 1 240px; min-width:0}
.opcio-ido-mezok input[type="date"]{flex:1 1 140px; min-width:130px}
.opcio-ido-mezok input[type="time"]{flex:0 1 104px; min-width:92px}
.opcio-ido-mezok input[hidden]{display:none}
.opcio-egesznap{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:12.5px; color:var(--muted); white-space:nowrap; min-height:34px;
}
.opcio-egesznap input{width:16px; height:16px; accent-color:var(--brand); cursor:pointer}
.opcio-egesznap:hover{color:var(--text)}

/* ══════════════════════════════════════════════════════════════
   14. AURORA v2 — FOLYÉKONY ÜVEG

   Mi ez? A rendszer új érzete. A v3 óta üvegesek a SÁVOK; a Sahara v1.2
   ezt kiterjeszti az egész felületre: a kártya, a modál, a legördülő,
   a gomb és a mező is áttetsző réteg lesz, fölötte egy finom
   fénymázzal (specular highlight), alatta lágy, szórt árnyékkal.
   Ettől lesz „folyékony”: a lapok nem festett négyszögek, hanem
   egymás fölött lebegő üvegtáblák.

   Miért a fájl VÉGÉN van? Mert szándékosan RÉTEG: ugyanazokat a
   szelektorokat írja felül, amiket fentebb definiáltunk, és a CSS-ben
   azonos súly mellett a később álló szabály nyer. Így a korábbi
   3000 sort nem kell átírni, és a réteg egyetlen blokk törlésével
   visszavonható.

   Szabályok, amiket itt is tartunk:
    – Színt SOHA nem írunk be kézzel, csak tokent.
    – A világos és a sötét mód mindkettő teljes értékű.
    – Minden animáció kikapcsol prefers-reduced-motion alatt (lásd a
      szakasz végén).
    – Ahol a böngésző nem tud elmosni, ott átlátszatlan felület jön —
      az olvashatóság nem opcionális.
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   14/a. TOKENEK — a kerekítés, az üveg és az árnyék
   ───────────────────────────────────────────── */
:root{
  /* Nagyobb lekerekítés: ez a legerősebb „új érzet”, és egyetlen tokenen
     múlik, mert a komponensek mind ebből dolgoznak. */
  --radius:20px;
  --radius-sm:14px;
  --radius-nagy:28px;           /* nagy felületek: fiók, varázsló, beszélgetés */
  --radius-pill:999px;          /* kapszula: gomb, jelvény, chip */

  /* Üveg: erősebb elmosás és telítés, mint a v3-ban — ettől „mély” a réteg. */
  --uveg-elmosas:saturate(190%) blur(28px);
  --uveg-elmosas-halk:saturate(150%) blur(14px);
  /* SŰRŰ üveg: oda, ahol DOLGOZNI kell — az üzenetablakba írás közben a mögötte
     átderengő szöveg zavaró, nem díszes. Erősebb elmosás, sűrűbb alap, de még
     mindig áttetsző: látszik, hogy egy réteg ül a beszélgetés fölött. */
  --uveg-elmosas-suru:saturate(190%) blur(44px);
  --uveg-hatter-suru:rgba(26,22,21,.94);
  --uveg-kartya:rgba(35,30,28,.62);          /* a kártya üveglapja */
  --uveg-vonal:rgba(255,255,255,.10);
  --uveg-vonal-eros:rgba(255,255,255,.18);

  /* Fénymáz: a lap felső szélén végigfutó csillanás. Nem dísz, hanem ez
     mondja meg a szemnek, hogy a felület ÜVEG és nem festett papír. */
  --fenymaz:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 46%);
  --fenyel-vizszintes:linear-gradient(90deg, transparent, var(--uveg-fenyel), transparent);

  /* Árnyék: két rétegben. A közeli adja a tárgy súlyát, a távoli a lebegést. */
  --arny-lebego:0 1px 2px rgba(0,0,0,.22), 0 10px 30px -12px rgba(0,0,0,.55);
  --arny-emelt:0 2px 6px rgba(0,0,0,.26), 0 22px 54px -18px rgba(0,0,0,.62);
  --emeles:var(--arny-emelt);

  /* Mozgás: a rugó egy hajszállal élesebb lett, a csúszás hosszabb. */
  --rugo-eros:cubic-bezier(.18,1.48,.38,1);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --uveg-hatter-suru:rgba(255,255,255,.95);
    --uveg-kartya:rgba(255,255,255,.72);
    --uveg-vonal:rgba(20,17,16,.10);
    --uveg-vonal-eros:rgba(20,17,16,.18);
    --fenymaz:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 52%);
    --arny-lebego:0 1px 2px rgba(90,60,50,.10), 0 10px 28px -14px rgba(90,60,50,.34);
    --arny-emelt:0 2px 6px rgba(90,60,50,.12), 0 22px 50px -20px rgba(90,60,50,.40);
  }
}
[data-theme="light"]{
  --uveg-hatter-suru:rgba(255,255,255,.95);
  --uveg-kartya:rgba(255,255,255,.72);
  --uveg-vonal:rgba(20,17,16,.10);
  --uveg-vonal-eros:rgba(20,17,16,.18);
  --fenymaz:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 52%);
  --arny-lebego:0 1px 2px rgba(90,60,50,.10), 0 10px 28px -14px rgba(90,60,50,.34);
  --arny-emelt:0 2px 6px rgba(90,60,50,.12), 0 22px 50px -20px rgba(90,60,50,.40);
}

/* A háttér is kap egy harmadik, hideg fényfoltot: mélység a lebegő lapok alá. */
body{
  background-image:
    radial-gradient(1100px 560px at 50% -180px, var(--hatter-fenylatt), transparent 72%),
    radial-gradient(700px 400px at 100% 8%, var(--hatter-fenylatt2), transparent 70%),
    radial-gradient(620px 420px at 0% 62%, var(--neon-halvany), transparent 72%);
}

/* ─────────────────────────────────────────────
   14/b. FELÜLETEK — kártya, modál, legördülő, fiók
   ───────────────────────────────────────────── */
/* A fénymáz HÁTTÉRKÉPKÉNT jön, nem pszeudoelemként.
   Miért? Mert egy `inset:0`-s ::after a tartalom FÖLÉ kerülne, és ahhoz a
   gyerekeket kellene z-indexelni — az pedig eltörné a kártyán belüli modálokat
   (a .modal-hatter position:fixed, amit egy `.kartya > *{position:relative}`
   szabály felülírna). Háttérképként a máz biztosan a szöveg ALATT marad. */
.kartya{
  background-color:var(--uveg-kartya);
  background-image:var(--fenymaz);
  background-repeat:no-repeat;
  background-size:100% 68px;
  backdrop-filter:var(--uveg-elmosas-halk);
  -webkit-backdrop-filter:var(--uveg-elmosas-halk);
  border:1px solid var(--uveg-vonal);
  border-radius:var(--radius);
  box-shadow:var(--arny-lebego);
  padding:20px;
}
.kartya--sik{background-color:transparent; background-image:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-style:dashed; box-shadow:none}
.kartya--kiemelt{border-color:rgba(164,40,31,.45);
  box-shadow:var(--arny-lebego), 0 0 0 1px var(--brand-glow), 0 0 40px -14px var(--brand-glow)}
a.kartya:hover, .kattinthato-kartya:hover{box-shadow:var(--arny-emelt); border-color:var(--uveg-vonal-eros)}

.modal{
  background:var(--uveg-hatter);
  backdrop-filter:var(--uveg-elmosas); -webkit-backdrop-filter:var(--uveg-elmosas);
  border:1px solid var(--uveg-vonal-eros);
  border-radius:var(--radius-nagy);
  box-shadow:var(--arny-emelt);
}
/* A legördülők (értesítés-harang, felhasználó-menü) NEM üvegesek.
   Miért nem? Mert ezek a lap TARTALMA fölé nyílnak, és listát kell bennük
   OLVASNI. Kipróbáltuk sűrű üveggel (0.95 alfa + 44px elmosás): a mögöttes
   szöveg még mindig átütött, és összeolvadt a panel saját soraival — pont a
   legrosszabb helyen. Az üveg a SÁVOKÉ és a lebegő lapoké; egy olvasandó panel
   legyen átlátszatlan.
   Hogy mégse legyen „ráragasztott doboz”, a panelt erős, szórt árnyék és
   határozott perem emeli ki — attól válik el az oldaltól. */
.legordulo-lap{
  background:var(--surface);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border:1px solid var(--uveg-vonal-eros);
  border-radius:var(--radius);
  box-shadow:var(--arny-emelt), 0 0 0 1px var(--uveg-vonal);
  padding:7px;
}
.legordulo-lap a,.legordulo-lap button{border-radius:calc(var(--radius) - 8px)}
/* A harang-panel sorai közti vonal a sűrű alapon halványabbnak hatna, ezért
   itt az erősebb tokent használjuk — így a lista tagolt marad. */
.harang-elem{border-bottom-color:var(--uveg-vonal)}
.harang-fej{border-bottom-color:var(--uveg-vonal-eros)}
/* A harang-panel sorai a panel SZÉLÉIG érnek (elválasztó vonalak, bal oldali
   olvasatlan-jelző), ezért nem kaphat belső margót. A .harang-lap padding:0-ja
   fentebb áll a fájlban, mint a .legordulo-lap padding:7px-e — azonos súly
   mellett a későbbi nyerne, ezért itt újra kimondjuk. */
.harang-lap{padding:0; box-shadow:var(--arny-emelt)}
/* Biztosíték: a panel felülete SOHA ne legyen áttetsző. Ez az egyetlen olyan
   lebegő réteg a rendszerben, amiben listát kell olvasni. */
.harang-lap,.legordulo-lap{background-color:var(--surface)}
.tobb-lap{
  background:var(--uveg-hatter);
  backdrop-filter:var(--uveg-elmosas); -webkit-backdrop-filter:var(--uveg-elmosas);
  border-top:1px solid var(--uveg-vonal-eros);
  border-radius:var(--radius-nagy) var(--radius-nagy) 0 0;
  box-shadow:0 -18px 52px rgba(0,0,0,.46);
}
fieldset{border-radius:var(--radius-sm); border-color:var(--uveg-vonal)}

/* ─────────────────────────────────────────────
   14/c. VEZÉRLŐK — kapszula-gomb, üveges mező, jelvény
   ───────────────────────────────────────────── */
/* FONTOS: a gomb NEM üveg. Üveg az, ami TARTALOM fölött lebeg (sáv, fiók,
   buborék) — a gomb viszont a kártyán ül, és ott az áttetsző fehér a világos
   témában láthatatlanná tenné. Ezért marad a tömör felület; az Aurorából a
   kapszula-forma és a felső fényél jár neki. */
.gomb{
  border-radius:var(--radius-pill);
  background:var(--surface-2);
  border-color:var(--uveg-vonal-eros);
  box-shadow:inset 0 1px 0 var(--uveg-fenyel);
}
.gomb:hover{border-color:var(--uveg-vonal-eros)}
.gomb--elsodleges{
  /* A márkaszín gradiensben: felül világosabb, alul mélyebb — mint egy
     megvilágított kapszula. A ragyogás a gomb ALATT van, nem körülötte. */
  background:linear-gradient(175deg, var(--brand), var(--brand-600));
  border-color:transparent; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 8px 22px -8px var(--brand-glow);
}
.gomb--elsodleges:hover{background:linear-gradient(175deg, var(--brand-600), var(--brand-600))}
.gomb--szellem{background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:none; border-color:var(--uveg-vonal-eros)}
.gomb--szellem:hover{background:var(--uveg-lap)}
.gomb--veszely{background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none}
.gomb--siker{background:linear-gradient(175deg, var(--forest-300), var(--forest)); border-color:transparent}
.gomb--kicsi{border-radius:var(--radius-pill)}
.gomb:active{transform:scale(.955)}

.ikon-gomb{
  border-radius:var(--radius-sm);
  border-color:var(--uveg-vonal-eros);
  background:var(--surface-2);
}
.ikon-gomb:hover{border-color:var(--uveg-vonal-eros)}
/* Halk változat: a buborékok mellé, ahol a keret már zaj lenne. */
.ikon-gomb--halk{border-color:transparent; background:transparent;
  width:34px; height:34px; min-height:34px}
.ikon-gomb--halk:hover{background:var(--surface-2); border-color:var(--uveg-vonal-eros)}
.ikon-gomb--veszely{color:var(--veszely)}
.ikon-gomb--veszely:hover{color:var(--veszely); border-color:rgba(164,40,31,.45)}

.jelveny{border-radius:var(--radius-pill); border-color:var(--uveg-vonal-eros);
  background:var(--surface-2)}
.jelveny--halvany{background:transparent}

/* Mezők: üveges, beljebb ülő felület — a fókusz gyűrűje adja a fényt. */
.mezo input[type=text],.mezo input[type=email],.mezo input[type=password],.mezo input[type=tel],
.mezo input[type=url],.mezo input[type=number],.mezo input[type=date],.mezo input[type=time],
.mezo input[type=datetime-local],.mezo input[type=search],.mezo select,.mezo textarea,
input.mezo-be,select.mezo-be,textarea.mezo-be{
  border-radius:var(--radius-sm);
  border-color:var(--uveg-vonal-eros);
  background:var(--surface-2);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.10);
}
.valaszto-kartya{border-radius:var(--radius-sm); border-color:var(--uveg-vonal-eros);
  background:var(--surface-2)}
.uzenet{border-radius:var(--radius); border-color:var(--uveg-vonal);
  background:var(--uveg-kartya); backdrop-filter:var(--uveg-elmosas-halk);
  -webkit-backdrop-filter:var(--uveg-elmosas-halk)}
.tab{border-radius:var(--radius-pill)}
.jelveny--nagy{border-radius:var(--radius-pill)}

/* ─────────────────────────────────────────────
   14/d. SÁVOK — a mobil navigáció LEBEGŐ üvegpille
   A v3-ban az alsó sáv a kijelző aljához tapadt. Az Aurorában elválik
   tőle: lekerekített kapszula, körülötte levegő, alatta árnyék. Ez a
   második legerősebb jel, hogy a rendszer megújult.
   ───────────────────────────────────────────── */
.mobil-nav{
  left:max(10px, var(--biztonsag-bal)); right:max(10px, var(--biztonsag-jobb));
  bottom:calc(8px + var(--biztonsag-alul));
  height:var(--mobil-nav-magassag); padding-bottom:0;
  border:1px solid var(--uveg-vonal-eros);
  border-radius:var(--radius-nagy);
  box-shadow:var(--arny-emelt);
  overflow:hidden;
}
.mobil-nav::before{border-radius:inherit}
.mobil-elem{border-radius:calc(var(--radius-nagy) - 8px)}
/* Az aktív elem nem felülre húzott csík, hanem alatta ülő fényfolt — ez a
   kapszulán belül nem vágódik el, és nem keveredik a sáv peremével. */
.mobil-elem.aktiv::after{
  content:''; position:absolute; inset:auto 8px 6px 8px; top:6px; z-index:-1;
  width:auto; height:auto; transform:none; border-radius:calc(var(--radius-nagy) - 10px);
  background:var(--uveg-lap); box-shadow:inset 0 1px 0 var(--uveg-fenyel);
}
.mobil-elem.aktiv{color:var(--brand-300)}
/* A tartalom alsó margója a lebegő sávot és a körülötte hagyott levegőt is számolja. */
.fotartalom{
  padding-bottom:calc(var(--mobil-nav-magassag) + var(--biztonsag-alul) + 44px);
}
.fejlec{border-bottom-color:var(--uveg-vonal)}

/* ─────────────────────────────────────────────
   14/e. „AZ ŐRSÖMHÖZ” — a mindig kézre eső gomb

   Mire jó? A rendszerben minden adminisztráció az őrshöz tartozik:
   névsor, őrsgyűlés, jelenléti ív, füzet, ŐMTV. Eddig ehhez a Csapat
   oldalon át kellett navigálni. Az Aurorában egy lebegő gomb MINDEN
   oldalon ott van, és egy koppintással a saját egységedhez visz.
   Aki több őrsöt vezet, listát kap; akinek nincs őrse (pl. rajvezető),
   azt a rajához viszi.
   ───────────────────────────────────────────── */
.orsom-gomb{
  position:fixed; z-index:75;
  right:max(14px, var(--biztonsag-jobb));
  bottom:calc(var(--mobil-nav-magassag) + var(--biztonsag-alul) + 20px);
  display:inline-flex; align-items:center; gap:9px;
  min-height:52px; padding:0 18px 0 15px;
  border:1px solid var(--uveg-vonal-eros); border-radius:var(--radius-pill);
  background:linear-gradient(175deg, var(--brand), var(--brand-600)); color:#fff;
  font:600 14.5px/1 var(--szoveg-betu); text-decoration:none; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), var(--arny-emelt), 0 10px 30px -10px var(--brand-glow);
  transition:transform .2s var(--rugo-eros), box-shadow .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.orsom-gomb:hover{text-decoration:none; transform:translateY(-2px)}
.orsom-gomb:active{transform:scale(.96)}
.orsom-gomb .ikon{flex:none}
.orsom-felirat{white-space:nowrap}
/* Telefonon csak az ikon marad: a lebegő gomb ne takarja a tartalmat. */
@media (max-width:560px){
  .orsom-gomb{padding:0; width:52px; justify-content:center}
  .orsom-felirat{display:none}
}

/* A gomb lapja: az adminisztráció rövid útjai. Ugyanaz a fiók-minta, mint a
   mobil menünél — alulról csúszik fel, üvegen. */
.orsom-lap{
  position:fixed; z-index:96;
  left:max(10px, var(--biztonsag-bal)); right:max(10px, var(--biztonsag-jobb));
  bottom:calc(10px + var(--biztonsag-alul));
  max-width:460px; margin:0 auto;
  background:var(--uveg-hatter);
  backdrop-filter:var(--uveg-elmosas); -webkit-backdrop-filter:var(--uveg-elmosas);
  border:1px solid var(--uveg-vonal-eros); border-radius:var(--radius-nagy);
  box-shadow:var(--arny-emelt);
  padding:12px;
  animation:felcsuszik .26s var(--ease);
}
.orsom-lap-fej{display:flex; align-items:center; gap:10px; padding:4px 6px 10px;
  border-bottom:1px solid var(--uveg-vonal); margin-bottom:8px}
.orsom-lap-fej strong{font-family:var(--cim-betu); font-size:15px; display:block; line-height:1.25}
.orsom-lap-fej small{display:block; color:var(--muted); font-size:12px}
.orsom-lap-fej > div{flex:1; min-width:0}
.orsom-lap-lista{display:grid; gap:6px}
.orsom-lap-lista a{
  display:flex; align-items:center; gap:12px; min-height:52px; padding:11px 13px;
  border-radius:var(--radius-sm); border:1px solid transparent;
  color:var(--text); font:500 14.5px var(--szoveg-betu); text-decoration:none;
}
.orsom-lap-lista a:hover{background:var(--uveg-lap); border-color:var(--uveg-vonal); text-decoration:none}
.orsom-lap-lista a strong{display:block; font-size:14.5px; font-weight:600; line-height:1.3}
.orsom-lap-lista a small{display:block; color:var(--muted); font-size:12px; font-weight:400}
.orsom-lap-lista a > span{min-width:0}
.orsom-lap-lista .ikon{color:var(--brand-300); flex:none}
.orsom-lap-lista .nav-jelveny{margin-left:auto}

/* Asztali gépen nincs alsó sáv, tehát a gomb lejjebb ülhet. */
@media (min-width:900px){
  .orsom-gomb{bottom:calc(22px + var(--biztonsag-alul))}
  .orsom-lap{right:max(14px, var(--biztonsag-jobb)); left:auto; bottom:calc(86px + var(--biztonsag-alul));
    width:360px; margin:0}
}

/* ─────────────────────────────────────────────
   14/f. JELENLÉTI ÍV — a felszólító sáv
   10 perccel az alkalom vége után nem csak értesítés megy az eszközre,
   hanem az alkalmazás tetején is itt áll a felszólítás.
   ───────────────────────────────────────────── */
.felszolitas{
  display:flex; align-items:center; gap:13px; flex-wrap:wrap;
  margin:0 0 16px; padding:14px 16px;
  border:1px solid rgba(224,138,60,.42); border-radius:var(--radius);
  background:var(--uveg-kartya);
  backdrop-filter:var(--uveg-elmosas-halk); -webkit-backdrop-filter:var(--uveg-elmosas-halk);
  box-shadow:var(--arny-lebego);
  animation:felbukkan .34s var(--ease);
}
.felszolitas-jel{
  flex:none; width:42px; height:42px; border-radius:var(--radius-sm); display:grid; place-items:center;
  background:rgba(224,138,60,.16); color:var(--ember);
  box-shadow:inset 0 1px 0 var(--uveg-fenyel);
}
.felszolitas-szoveg{flex:1 1 220px; min-width:0}
.felszolitas-szoveg > strong{display:block; font-size:15px; line-height:1.3}
.felszolitas-szoveg > small{display:block; color:var(--muted); font-size:13px; margin-top:2px}
.felszolitas-gombok{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

/* ─────────────────────────────────────────────
   14/g. BESZÉLGETÉS — buborékok, reakciók, üzenetablak

   Hol látszik? Az ŐÁMTVT/ŐMTV részletoldalán és az őrsi füzetben.
   A felépítés mindkettőnél ugyanaz (lib/beszelgetes.php):
     .beszelgetes               — a folyam
       .beszelgetes-nap         — „Ma” / „Tegnap” / dátum csík
       .buborek-sor             — egy üzenet sora (avatar + tartalom + gombok)
         .buborek-avatar
         .buborek-oldal
           .buborek-szerzo      — ki és mikor
           .buborek             — maga a buborék
           .reakcio-sor         — a reakciók
         .buborek-akciok        — szerkesztés / törlés
     .szerkeszto                — az üzenetablak alul
   ───────────────────────────────────────────── */

/* A beszélgetés kártyája: a fejléc ragad, a folyam alatta fut. */
.beszelgetes-kartya{padding:0; overflow:visible; background-image:none}
.beszelgetes-fej{
  /* A fix fejléc ALÁ ragad — ugyanaz a minta, mint a .csuk-fej--ragados-nál.
     A 41 azért kell, hogy a reakció-választó (30) se tudjon fölé úszni: a
     beszélgetés címsora maradjon mindig olvasható, mint egy csevegőablakban. */
  position:sticky; top:calc(var(--fejlec-teljes) + 2px); z-index:41;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 18px; border-bottom:1px solid var(--uveg-vonal);
  border-radius:var(--radius) var(--radius) 0 0;
  /* Sűrű üveg: a cím alá becsúszó üzenetek ne derengjenek át a feliraton. */
  background:var(--uveg-hatter-suru);
  backdrop-filter:var(--uveg-elmosas-suru); -webkit-backdrop-filter:var(--uveg-elmosas-suru);
}
.beszelgetes-jel{
  flex:none; width:40px; height:40px; border-radius:var(--radius-sm); display:grid; place-items:center;
  background:linear-gradient(160deg, var(--brand), var(--brand-600)); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 6px 16px -8px var(--brand-glow);
}
.beszelgetes-fej-szoveg{flex:1 1 180px; min-width:0}
.beszelgetes-fej-szoveg > strong{display:block; font-family:var(--cim-betu); font-size:15.5px;
  line-height:1.3; overflow-wrap:anywhere}
.beszelgetes-fej-szoveg > small{display:block; color:var(--muted); font-size:12.5px; margin-top:1px}
.beszelgetes-fej-akciok{display:flex; align-items:center; gap:6px; flex-wrap:wrap}

.beszelgetes{display:flex; flex-direction:column; gap:14px; padding:18px}
/* A kártya padding:0 — az üres állapot és a sima szöveg ezért kap saját margót. */
.beszelgetes-kartya > .ures{margin:18px}
.beszelgetes-kartya > .mezo-hiba{margin:0 18px 10px}
/* Görgethető folyam (őrsi füzet): a legfrissebb üzenet alul, az app.js odagörget. */
.beszelgetes--gorgetheto{max-height:min(62vh, 560px); overflow-y:auto; overscroll-behavior:contain;
  scroll-behavior:smooth}
.beszelgetes--szuk{padding:4px 0 10px; gap:12px}

.beszelgetes-nap{display:flex; align-items:center; gap:10px; margin:2px 0; color:var(--faint)}
.beszelgetes-nap::before,.beszelgetes-nap::after{content:''; flex:1; height:1px; background:var(--uveg-vonal)}
.beszelgetes-nap span{
  font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 11px; border-radius:var(--radius-pill);
  border:1px solid var(--uveg-vonal-eros); background:var(--surface-2);
}

/* Egy üzenet sora */
/* Az avatar a SZERZŐ NEVÉVEL egy vonalban áll, nem a buborék aljánál: a
   reakciósáv miatt az alsó igazítás elcsúsztatná a névtől, és a szem nem
   találná meg, kihez tartozik az üzenet. */
.buborek-sor{display:flex; align-items:flex-start; gap:9px; max-width:100%}
.buborek-sor--sajat{flex-direction:row-reverse}
.buborek-avatar{flex:none; margin-top:2px}
.buborek-oldal{min-width:0; max-width:min(620px, 84%); display:flex; flex-direction:column; gap:5px}
.buborek-sor--sajat .buborek-oldal{align-items:flex-end}

.buborek-szerzo{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;
  padding:0 4px; font-size:12.5px; color:var(--muted)}
.buborek-szerzo strong{font-size:13px; font-weight:600; color:var(--text)}
.buborek-szerep{color:var(--faint)}
.buborek-szerep::before{content:'· '}
.buborek-ido{color:var(--faint); font-size:11.5px; white-space:nowrap}

/* A buborék maga */
.buborek{
  position:relative;
  padding:12px 15px;
  border:1px solid var(--uveg-vonal);
  border-radius:var(--radius);
  background-color:var(--uveg-kartya);
  background-image:var(--fenymaz);
  background-repeat:no-repeat;
  background-size:100% 40px;
  backdrop-filter:var(--uveg-elmosas-halk); -webkit-backdrop-filter:var(--uveg-elmosas-halk);
  box-shadow:var(--arny-lebego);
  font-size:14.5px; line-height:1.6;
  /* A „farok” oldalán kisebb a kerekítés: ettől tartozik a buborék az avatarhoz. */
  border-bottom-left-radius:7px;
}
/* A saját üzenet márkaszínű. A festés a HÁTTÉRKÉPBEN van (a máz helyett), így a
   két gradiens nem veszekszik egymással. */
.buborek-sor--sajat .buborek{
  border-bottom-left-radius:var(--radius); border-bottom-right-radius:7px;
  background-image:linear-gradient(170deg, rgba(164,40,31,.30), rgba(164,40,31,.14));
  background-size:100% 100%;
  border-color:rgba(164,40,31,.42);
}
/* Világos módban halkabb a kitöltés, hogy a sötét szöveg kontrasztja maradjon AA. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .buborek-sor--sajat .buborek{
    background-image:linear-gradient(170deg, rgba(164,40,31,.14), rgba(164,40,31,.07));
  }
}
[data-theme="light"] .buborek-sor--sajat .buborek{
  background-image:linear-gradient(170deg, rgba(164,40,31,.14), rgba(164,40,31,.07));
}
.buborek-jelvenyek{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:7px}
.buborek-cim{margin:0 0 4px; font-family:var(--cim-betu); font-size:15px; font-weight:600;
  line-height:1.3; overflow-wrap:anywhere}
.buborek-szoveg{overflow-wrap:anywhere}
.buborek-szoveg p:last-child{margin-bottom:0}
.buborek-lab{margin:8px 0 0; font-size:11.5px; color:var(--faint); display:flex; align-items:center; gap:4px}
.buborek-csatolmany{margin-top:10px}

/* Dokumentum-„csatolmány”: az ŐÁMTVT és az ŐMTV lényege maga a link. */
.doksi-csatolmany{
  display:flex; align-items:center; gap:11px; padding:10px 12px; min-height:52px;
  border:1px solid var(--uveg-vonal-eros); border-radius:var(--radius-sm);
  background:var(--surface-2); color:var(--text); text-decoration:none;
  transition:border-color .18s var(--ease), transform .18s var(--rugo);
}
.doksi-csatolmany:hover{text-decoration:none; border-color:var(--brand-300); transform:translateY(-1px)}
.doksi-ikon{flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:rgba(76,127,163,.18); color:var(--sky)}
.doksi-szoveg{min-width:0; flex:1; line-height:1.3}
.doksi-szoveg > strong{display:block; font-size:13.5px; font-weight:600}
.doksi-szoveg > small{display:block; color:var(--muted); font-size:12px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.doksi-nyil{flex:none; color:var(--faint)}

/* Szerkesztés / törlés a buborék mellett — halkan, csak ha a szerző nézi. */
/* A gombok a BUBORÉK tetejével egy vonalban állnak (a szerzősor alatt), nem a
   névvel — így nem versenyeznek a névvel a szem figyelméért. */
.buborek-akciok{display:flex; flex-direction:column; gap:2px; flex:none; margin-top:20px;
  opacity:.5; transition:opacity .18s var(--ease)}
.buborek-sor:hover .buborek-akciok,
.buborek-akciok:focus-within{opacity:1}
.buborek-akciok .beagyazott-urlap{display:block}

/* Akikre még várunk */
.beszelgetes-varakozok{
  display:flex; align-items:flex-start; gap:9px; margin:2px 4px 0;
  padding:11px 14px; border-radius:var(--radius-sm);
  border:1px dashed var(--uveg-vonal-eros); background:var(--surface-2);
  color:var(--muted); font-size:13px; line-height:1.5;
}
.beszelgetes-varakozok .ikon{flex:none; margin-top:2px; color:var(--ember)}

/* ─── Reakciók ─── */
.reakcio-sor{display:flex; align-items:center; gap:5px; flex-wrap:wrap; padding:0 3px; position:relative}
.buborek-sor--sajat .reakcio-sor{justify-content:flex-end}
.reakcio-chip,.reakcio-plusz,.reakcio-gomb{
  display:inline-flex; align-items:center; gap:4px; cursor:pointer;
  border:1px solid var(--uveg-vonal-eros); border-radius:var(--radius-pill);
  background:var(--surface-2); color:var(--text);
  font:600 12.5px/1 var(--szoveg-betu); padding:5px 9px; min-height:30px;
  transition:transform .18s var(--rugo-eros), border-color .18s var(--ease), background .18s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.reakcio-chip:hover,.reakcio-plusz:hover,.reakcio-gomb:hover{border-color:var(--uveg-vonal-eros)}
.reakcio-chip:active,.reakcio-gomb:active{transform:scale(.9)}
.reakcio-chip.aktiv{border-color:var(--brand); background:rgba(164,40,31,.16); color:var(--brand-300)}
.reakcio-db{font-variant-numeric:tabular-nums; font-size:12px}
.reakcio-plusz{padding:5px 8px; color:var(--muted)}
.reakcio-plusz[aria-expanded="true"]{border-color:var(--brand-300); color:var(--brand-300)}
.reakcio-sor[data-csak-olvas] .reakcio-chip{cursor:default}
/* A választó: öt emoji egy üveg kapszulában, a chip fölé emelve. */
.reakcio-valaszto{
  position:absolute; bottom:calc(100% + 6px); left:0; z-index:30;
  display:flex; align-items:center; gap:3px; padding:5px;
  border:1px solid var(--uveg-vonal-eros); border-radius:var(--radius-pill);
  background:var(--uveg-hatter);
  backdrop-filter:var(--uveg-elmosas); -webkit-backdrop-filter:var(--uveg-elmosas);
  box-shadow:var(--arny-emelt);
  animation:reakcio-be .22s var(--rugo-eros);
}
.buborek-sor--sajat .reakcio-valaszto{left:auto; right:0}
.reakcio-valaszto .reakcio-gomb{
  width:40px; height:40px; min-height:40px; padding:0; justify-content:center;
  border-color:transparent; background:transparent; font-size:20px; line-height:1;
}
.reakcio-valaszto .reakcio-gomb:hover{background:var(--uveg-lap); transform:scale(1.14)}
.reakcio-valaszto .reakcio-gomb.aktiv{background:rgba(164,40,31,.18); border-color:var(--brand)}
@keyframes reakcio-be{
  from{opacity:0; transform:translateY(6px) scale(.92)}
  to{opacity:1; transform:none}
}

/* ─── Üzenetablak (a „szerkesztő”) ─── */
/* Az üzenetablak NEM ragad a képernyő aljára: ott a lebegő mobil-sáv ül, és a
   kettő egymásra csúszna. A görgethető folyam miatt amúgy is a képernyőn marad. */
.szerkeszto{
  display:block; margin:0; padding:12px 18px 16px;
  border-top:1px solid var(--uveg-vonal);
  border-radius:0 0 var(--radius) var(--radius);
  /* Sűrű üveg: írás közben a mögötte álló üzenetek ne kavarjanak bele a
     szövegbe. Ez az egyetlen hely a beszélgetésben, ahol GÉPELNI kell. */
  background:var(--uveg-hatter-suru);
  backdrop-filter:var(--uveg-elmosas-suru); -webkit-backdrop-filter:var(--uveg-elmosas-suru);
}
.szerkeszto--szuk{position:static; padding:10px 0 2px; border-radius:0; background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none; border-top:1px dashed var(--uveg-vonal)}
.szerkeszto-fej{margin-bottom:9px}
.szerkeszto-fej > strong{display:block; font-family:var(--cim-betu); font-size:14.5px}
.szerkeszto-fej > small{display:block; color:var(--muted); font-size:12.5px; margin-top:2px; line-height:1.5}
.szerkeszto-sor{display:flex; align-items:flex-end; gap:8px}
.szerkeszto-sor--masodik{margin-top:7px; padding-right:52px}
.szerkeszto-be{
  flex:1 1 auto; min-width:0; width:100%;
  padding:12px 15px; min-height:46px; max-height:180px;
  border:1px solid var(--uveg-vonal-eros); border-radius:var(--radius-pill);
  background:var(--surface-2); color:var(--text);
  font:15px/1.45 var(--szoveg-betu); resize:none; overflow-y:auto;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
textarea.szerkeszto-be{border-radius:var(--radius); min-height:46px}
.szerkeszto-be:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-glow)}
.szerkeszto-be::placeholder{color:var(--faint)}
.szerkeszto-kuld{
  flex:none; width:46px; height:46px; min-height:46px; display:grid; place-items:center;
  border:0; border-radius:50%; cursor:pointer;
  background:linear-gradient(175deg, var(--brand), var(--brand-600)); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 8px 20px -8px var(--brand-glow);
  transition:transform .18s var(--rugo-eros), opacity .18s var(--ease);
}
.szerkeszto-kuld{position:relative}
.szerkeszto-kuld:hover{transform:scale(1.06)}
.szerkeszto-kuld:active{transform:scale(.92)}
/* Betöltés közben a repülő-ikon helyére pörgő karika jön. A `.tolt` osztályt az
   app.js teszi rá (urlapBetoltoAllapot), ugyanúgy, mint a sima gombokra. */
.szerkeszto-kuld.tolt{pointer-events:none; opacity:.75}
.szerkeszto-kuld.tolt .ikon{visibility:hidden}
.szerkeszto-kuld.tolt .gomb-spinner{display:block; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%)}
.szerkeszto-reszletek{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:9px;
  padding-right:52px}
.szerkeszto-kis-mezo{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted)}
.szerkeszto-kis-mezo > span{white-space:nowrap}
.szerkeszto-kis-mezo input,.szerkeszto-kis-mezo select{
  padding:7px 11px; min-height:38px; border-radius:var(--radius-pill);
  border:1px solid var(--uveg-vonal-eros); background:var(--surface-2); color:var(--text);
  font:13.5px var(--szoveg-betu); max-width:190px;
}
.szerkeszto-kis-mezo.hibas input{border-color:var(--brand-300)}
.szerkeszto-segit{display:block; color:var(--faint); font-size:12px; margin:8px 0 0; line-height:1.5;
  padding-right:52px}
.szerkeszto-segit .ikon{vertical-align:-2px; margin-right:2px}

/* ─── Beszélgetés-lista (az ŐÁMTVT „postafiókja”) ─── */
.beszelgetes-lista{display:flex; flex-direction:column; gap:9px; margin-bottom:18px}
.beszelgetes-elem{
  position:relative;
  display:flex; align-items:center; gap:12px; padding:13px 15px;
  border:1px solid var(--uveg-vonal); border-radius:var(--radius);
  background:var(--uveg-kartya);
  backdrop-filter:var(--uveg-elmosas-halk); -webkit-backdrop-filter:var(--uveg-elmosas-halk);
  box-shadow:var(--arny-lebego);
  color:var(--text); text-decoration:none;
  transition:transform .2s var(--rugo), border-color .18s var(--ease), box-shadow .2s var(--ease);
}
.beszelgetes-elem:hover{text-decoration:none; transform:translateY(-2px);
  border-color:var(--uveg-vonal-eros); box-shadow:var(--arny-emelt)}
.beszelgetes-elem--var{border-color:rgba(164,40,31,.40)}
.beszelgetes-elem--var::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:26px; border-radius:0 3px 3px 0; background:var(--brand);
}
.beszelgetes-elem-fo{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.beszelgetes-elem-cim{display:flex; align-items:baseline; gap:8px; justify-content:space-between}
.beszelgetes-elem-cim strong{font-family:var(--cim-betu); font-size:15px; line-height:1.3;
  overflow-wrap:anywhere}
.beszelgetes-elem-cim small{color:var(--faint); font-size:11.5px; white-space:nowrap; flex:none}
.beszelgetes-elem-elonezet{color:var(--muted); font-size:13px; line-height:1.45;
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.beszelgetes-elem-jelzok{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:3px}
.beszelgetes-elem-nyil{flex:none; color:var(--faint)}
@media (max-width:520px){
  .beszelgetes-elem-nyil{display:none}
}

/* ─────────────────────────────────────────────
   14/h. TARTALÉKOK — ahol nincs elmosás, és ahol kevés mozgás kell
   ───────────────────────────────────────────── */
/* Ha a böngésző nem tud elmosni, minden üveglap átlátszatlanra vált: az
   olvashatóság soha nem múlhat egy CSS-képességen. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  :root{--uveg-kartya:var(--surface); --uveg-hatter-suru:var(--surface)}
  .buborek-sor--sajat .buborek{background:rgba(164,40,31,.22)}
}
@media (prefers-reduced-motion: reduce){
  .orsom-gomb,.orsom-lap,.felszolitas,.reakcio-valaszto{animation:none; transition:none}
  .orsom-gomb:hover,.szerkeszto-kuld:hover,.doksi-csatolmany:hover,
  .beszelgetes-elem:hover,.reakcio-valaszto .reakcio-gomb:hover{transform:none}
  .beszelgetes--gorgetheto{scroll-behavior:auto}
}

/* ─────────────────────────────────────────────
   14/i. SAHARA v1.2 — JELENLÉT: SZEMÉLYESEN VAGY ONLINE

   A sor már nem egyetlen <label>: a pipa és a név egy belső label, a
   mód-gombok pedig mellette állnak. (Egy gomb nem ülhet label belsejében,
   mert akkor a rá kattintás a pipát is átbillentené.)

   A mód-váltó csak akkor látszik, ha az illető ott VOLT — enélkül olyan
   kérdésre kérne választ, ami fel sem merül. Telefonon viszont mindig ott
   marad a helye, hogy a sor ne ugráljon pipáláskor.
   ───────────────────────────────────────────── */
.jelenlet-sor{
  display:flex; align-items:center; gap:10px; min-height:52px; padding:5px 8px;
  border-radius:var(--radius-sm); position:relative; cursor:default;
}
.jelenlet-jelolo{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:12px;
  cursor:pointer; min-height:42px;
}
.jelenlet-sor--tiltott .jelenlet-jelolo{cursor:default}
.jelenlet-nev small{display:block; color:var(--muted); font-size:12px; font-weight:400; line-height:1.3}

/* A pipa 44×44-es célfelülete a LABEL-hez tartozik, nem az egész sorhoz —
   különben a mód-gombok fölött is a pipát találná el az ujj. */
.jelenlet-pipa::after{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:56px; height:44px}

/* ─── A mód-váltó: két összeragasztott kapszula-gomb ─── */
.jelenlet-mod{
  flex:none; display:flex; align-items:center; gap:2px; padding:2px;
  border:1px solid var(--uveg-vonal); border-radius:var(--radius-pill);
  background:var(--surface); opacity:0; visibility:hidden;
  transition:opacity .16s var(--ease);
}
.jelenlet-sor.jelen .jelenlet-mod{opacity:1; visibility:visible}
/* Egérrel a sor fölé érve akkor is előjön, ha még nincs pipa: így látszik,
   hogy egyetlen koppintással „online”-ként is fel lehet venni valakit. */
.jelenlet-sor:hover .jelenlet-mod{opacity:1; visibility:visible}
.jelenlet-sor--tiltott .jelenlet-mod{opacity:.5}
.jelenlet-sor--tiltott:hover .jelenlet-mod{opacity:.5}
.jelenlet-sor--tiltott:not(.jelen) .jelenlet-mod{visibility:hidden}

.jelenlet-mod-gomb{
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  padding:6px 11px; min-height:34px; border:0; border-radius:var(--radius-pill);
  background:transparent; color:var(--muted);
  font:600 12px/1 var(--szoveg-betu); white-space:nowrap;
  transition:background .16s var(--ease), color .16s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.jelenlet-mod-gomb:hover{color:var(--text); background:var(--surface-2)}
.jelenlet-mod-gomb.aktiv{background:var(--forest); color:#fff}
.jelenlet-mod-gomb.aktiv .ikon{color:#fff}
.jelenlet-mod-gomb[disabled]{cursor:default; pointer-events:none}
.jelenlet-mod-gomb .ikon{flex:none}

/* Telefonon a felirat elmarad — az ikon és az aktív kitöltés elég,
   és így két gomb is kényelmesen elfér a név mellett. */
@media (max-width:520px){
  .jelenlet-mod-gomb{padding:7px 10px}
  .jelenlet-mod-gomb span{display:none}
  .jelenlet-mod{opacity:1; visibility:visible}
  .jelenlet-sor:not(.jelen) .jelenlet-mod{opacity:.35}
}

/* ─── „Kikre vonatkozott?” sáv a jelenléti ív fölött ─── */
.jelenlet-kore{
  display:flex; align-items:center; gap:9px; margin:0 0 12px; padding:10px 13px;
  border:1px solid var(--uveg-vonal); border-radius:var(--radius-sm);
  background:var(--surface-2); color:var(--muted); font-size:13px; line-height:1.5;
}
.jelenlet-kore .ikon{flex:none; color:var(--sky)}
.jelenlet-kore strong{color:var(--text); font-weight:600}

/* ─────────────────────────────────────────────
   14/j. MUNKACSOPORT (v7) — FELADATKIOSZTÁS ÉS DIAGRAMOK

   A munkacsoport-oldal három nézetre bomlik: Munkaterv (mit?),
   Kinek mi a dolga (ki?), Áttekintés (hogy állunk?). Az itteni
   komponensek a második és a harmadik nézetet szolgálják ki.
   ───────────────────────────────────────────── */

/* ─── A munkaterv-pont alatt: kire van kiosztva? ─── */
.feladat-sor{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin-top:8px; padding-top:8px; border-top:1px dashed var(--uveg-vonal);
}
.feladat-cimke{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px 3px 3px; border-radius:var(--radius-pill);
  border:1px solid var(--uveg-vonal); background:var(--surface-2);
  font-size:12.5px; max-width:100%;
}
.feladat-nev{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:14ch}

/* ─── Összegző számok (mindkét nézet tetején) ─── */
.feladat-osszegzo{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px;
}
.feladat-szam{
  padding:12px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--uveg-vonal); background:var(--surface-2); text-align:center;
}
.feladat-szam strong{
  display:block; font-family:var(--cim-betu); font-size:26px; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.feladat-szam span{display:block; color:var(--muted); font-size:12.5px; margin-top:2px}
.feladat-szam--lejart{border-color:rgba(164,40,31,.40)}
.feladat-szam--lejart strong{color:var(--brand-300)}
.feladat-szam--kesz{border-color:rgba(127,168,140,.40)}
.feladat-szam--kesz strong{color:var(--forest-300)}

/* ─── Egy ember és a feladatai ─── */
.feladat-ember{padding:16px 18px}
.feladat-ember.van-lejart{border-color:rgba(164,40,31,.40)}
.feladat-ember-fej{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.feladat-ember-nev{flex:1; min-width:0}
.feladat-ember-nev strong{display:block; font-family:var(--cim-betu); font-size:15.5px; line-height:1.3}
.feladat-ember-nev small{display:block; color:var(--muted); font-size:12.5px; margin-top:1px}

.feladat-lista{display:flex; flex-direction:column; gap:4px; margin-top:12px}
.feladat-elem{
  display:flex; align-items:center; gap:11px; padding:8px 10px;
  border-radius:var(--radius-sm); min-height:46px;
  transition:background .16s var(--ease);
}
.feladat-elem:hover{background:var(--surface-2)}
.feladat-elem.lejart{background:rgba(164,40,31,.07)}
.feladat-elem.kesz .feladat-elem-fo strong{text-decoration:line-through; color:var(--muted)}
.feladat-elem-fo{
  flex:1; min-width:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.feladat-elem-fo strong{font-size:14.5px; font-weight:600; overflow-wrap:anywhere}

/* ─── Kiosztó modál ─── */
.kioszto-lista{display:flex; flex-direction:column; gap:6px; max-height:min(46vh, 380px); overflow-y:auto}
.kioszto-sor{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 10px;
  border:1px solid var(--uveg-vonal); border-radius:var(--radius-sm); background:var(--surface-2);
}
.kioszto-sor.aktiv{border-color:var(--brand); background:rgba(164,40,31,.08)}
.kioszto-jelolo{display:flex; align-items:center; gap:9px; flex:1 1 180px; min-width:0;
  cursor:pointer; min-height:40px}
.kioszto-jelolo input{position:absolute; opacity:0; width:0; height:0}
.kioszto-jelolo input:focus-visible ~ .valaszto-jel{box-shadow:var(--focus)}
.kioszto-jelolo input:checked ~ .valaszto-jel{background:var(--brand); border-color:var(--brand)}
.kioszto-jelolo input:checked ~ .valaszto-jel::after{transform:scale(1)}
.kioszto-nev{font-size:14px; font-weight:600; min-width:0; overflow-wrap:anywhere}
.kioszto-nev small{display:block; color:var(--muted); font-size:11.5px; font-weight:400}
.kioszto-hatarido{flex:none}
.kioszto-hatarido input{
  padding:7px 11px; min-height:38px; border-radius:var(--radius-pill);
  border:1px solid var(--uveg-vonal-eros); background:var(--surface); color:var(--text);
  font:13px var(--szoveg-betu);
}

/* ─── Diagramok (szerveroldali SVG) ─── */
.diagram-doboz{margin-top:4px}
.diagram{display:block; width:100%; height:auto; max-height:180px; overflow:visible}
.diagram-cimkek{
  display:flex; justify-content:space-around; gap:4px; margin-top:2px;
  color:var(--faint); font-size:11.5px; text-align:center;
}
.diagram-cimkek span{flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.diagram-jelmagyarazat{
  display:flex; gap:14px; flex-wrap:wrap; margin-top:10px;
  color:var(--muted); font-size:12.5px;
}
.diagram-jelmagyarazat span{display:inline-flex; align-items:center; gap:6px}
.diagram-jelmagyarazat i{width:11px; height:11px; border-radius:3px; flex:none}

/* A pipa kitöltött állapota a feladat-listában is kell — a meglévő szabály a
   .mterv-sor.kesz-re szól, itt viszont .feladat-elem.kesz a sor osztálya.
   Az `aria-pressed` a forrás: az mondja meg, be van-e nyomva a gomb, és a
   képernyőolvasó is ezt olvassa fel. */
.feladat-elem.kesz .mterv-pipa,
.mterv-pipa[aria-pressed="true"]{background:var(--forest); border-color:var(--forest); color:#fff}
.feladat-elem.lejart .mterv-pipa{border-color:var(--brand)}

/* Halk jelvény: a nyitott feladatok száma a fülön, ha nincs lejárt. */
.nav-jelveny--halk{background:var(--surface-2); color:var(--muted); border:1px solid var(--uveg-vonal)}

@media (max-width:520px){
  .kioszto-hatarido{flex:1 1 100%}
  .kioszto-hatarido input{width:100%}
  .feladat-nev{max-width:10ch}
}

/* ─── Poszt-feladat kártyája a program oldalán (v7) ─── */
.poszt-kartya{border-color:rgba(224,138,60,.42)}
.poszt-kartya.kesz{border-color:rgba(127,168,140,.42)}
.poszt-kartya .kartya-fej h2 .ikon{color:var(--ember)}
.poszt-kartya.kesz .kartya-fej h2 .ikon{color:var(--forest-300)}

/* ═══════════════════════════════════════════════════════════════════════════
   ŐRSGYŰLÉS-NAPLÓ (Amazonas v1.3)

   Az őrs oldalán a tanév MINDEN lezajlott őrsgyűlése itt van. Ennek a
   felületnek egy dolgot kell tudnia: egy pillantásból derüljön ki, melyik
   alkalomnál tartunk, melyik van kitöltve, és hol kell még dolgozni.

   A három állapotnak három SZÍNE van, és mindhármat SZÖVEG is kíséri (nem csak
   szín) — színvakon és fekete-fehér nyomtatásban is olvasható marad:
     kitöltve  → erdőzöld, pipával
     nincs kész→ parázs (ember), felkiáltóval
     elmaradt  → halvány, áthúzott dátummal
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Tanév-lapozó ─── */
.naplo-tanev{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; margin-bottom:14px;
  padding:8px 10px; border-radius:var(--radius-sm);
  border:1px solid var(--uveg-vonal, var(--line)); background:var(--surface-2);
}
.naplo-tanev-cim{display:inline-flex; align-items:center; gap:6px; font-size:14px}
.naplo-tanev-cim small{color:var(--muted); font-weight:500; font-size:12px}

/* ─── Tanév-összesítő: a számok, amiket a vezető keres ─── */
.naplo-osszesito{
  display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center;
  margin-bottom:14px; padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.naplo-tetel{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--muted);
}
.naplo-tetel strong{color:var(--text); font-size:15px; font-weight:650}
.naplo-tetel small{color:var(--faint)}
.naplo-tetel .ikon{flex:none}
.naplo-tetel--kesz .ikon{color:var(--forest-300)}
.naplo-tetel--hianyzo{color:var(--ember)}
.naplo-tetel--hianyzo strong{color:var(--ember)}
.naplo-tetel--elmaradt{color:var(--faint)}

/* ─── Léptető: egy alkalommal előre, egy alkalommal hátra ─── */
.naplo-lepteto{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  flex-wrap:wrap; margin-bottom:12px;
}
/* A dátum egy sorban maradjon: a „10. 09. (P)” három sorba tördelve kör alakú
   pacni lenne a pill-lekerekítéstől, és olvashatatlanul nézne ki. */
.naplo-lepteto .gomb{white-space:nowrap}
.naplo-lepteto-kozep{
  font-size:12.5px; color:var(--faint); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ─── Jelmagyarázat ─── */
.naplo-jelmagyarazat{
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center;
  margin-bottom:8px; font-size:12px; color:var(--muted);
}
.naplo-jelmagyarazat > span{display:inline-flex; align-items:center; gap:5px}
.naplo-pont{
  width:9px; height:9px; border-radius:50%; flex:none;
  border:1px solid var(--line-eros);
}
.naplo-pont--kesz{background:var(--forest-300); border-color:var(--forest-300)}
.naplo-pont--hianyzo{background:var(--ember); border-color:var(--ember)}
.naplo-pont--elmaradt{background:transparent; border-style:dashed}

/* ─── A dátumok, hónapokra bontva ─── */
.naplo-honapok{display:flex; flex-direction:column; gap:12px}
.naplo-honap-cim{
  margin:0 0 6px; font-size:12px; font-weight:650; letter-spacing:.04em;
  text-transform:uppercase; color:var(--faint);
}

/* A chipek állapotai. Az .alkalom-chip alapjait (és a .kesz keretét) a jelenléti
   ív szekciója adja feljebb — itt csak a napló állapotai jönnek hozzá. */
.alkalom-chip.kesz small{color:var(--forest-300); font-weight:600}
.alkalom-chip.hianyzo{border-color:rgba(224,138,60,.42)}
.alkalom-chip.hianyzo small{color:var(--ember)}
.alkalom-chip.elmaradt{opacity:.62; border-style:dashed}
.alkalom-chip.elmaradt strong{text-decoration:line-through}
/* A kijelölés MINDIG erősebb, mint az állapot — ez mondja meg, hol állunk. */
.alkalom-chip.aktiv{
  border-color:var(--brand); background:rgba(164,40,31,.10);
  box-shadow:0 0 0 1px var(--brand) inset;
}
.alkalom-chip.aktiv.elmaradt{opacity:1}

/* ─── A kiválasztott alkalom feje ─── */
.naplo-fej{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px;
  margin:18px 0 10px; padding-top:14px;
  border-top:1px solid var(--line);
}
.naplo-fej-cim{
  display:inline-flex; align-items:center; gap:7px;
  margin:0; font-size:16px; font-weight:650;
}
.naplo-fej-cim .ikon{color:var(--brand-300); flex:none}
.naplo-fej-ido{
  display:inline-flex; align-items:center; gap:5px;
  font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums;
}

@media (max-width:560px){
  /* Mobilon a léptető legyen nagy és kézhez álló: ez a leggyakoribb mozdulat.
     Két egyenlő gomb egymás mellett, a számláló pedig fölöttük, külön sorban. */
  .naplo-lepteto{display:grid; grid-template-columns:1fr 1fr}
  .naplo-lepteto .gomb{justify-content:center; min-width:0}
  .naplo-lepteto-kozep{grid-column:1 / -1; order:-1; text-align:center}
  .naplo-tanev{justify-content:center}
  .naplo-tanev-cim{order:-1; flex:1 1 100%; justify-content:center; text-align:center}
}

/* ─── Ugrósáv: az oldalon belüli navigáció (Amazonas v1.3) ───
   Hosszú oldalak fejébe. Vízszintesen csúsztatható, mobilon is egy mozdulat.
   Nem „menü”: nem nyit új oldalt, csak odavisz, ami már ott van lentebb. */
.ugrosav{
  display:flex; gap:8px; overflow-x:auto; padding:2px 0 8px;
  margin-bottom:14px; scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.ugrosav-elem{
  flex:none; display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; min-height:40px;
  border-radius:var(--radius-pill);
  border:1px solid var(--uveg-vonal-eros, var(--line-eros));
  background:var(--surface-2); color:var(--text);
  font-size:13.5px; font-weight:550; text-decoration:none; white-space:nowrap;
}
.ugrosav-elem:hover{text-decoration:none; border-color:var(--brand); color:var(--text)}
.ugrosav-elem .ikon{flex:none; color:var(--brand-300)}
.ugrosav-szam{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 5px;
  border-radius:var(--radius-pill); background:var(--uveg-lap, var(--line));
  font-size:11.5px; font-weight:650; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
/* Az ugrósáv célpontjai ne ragadjanak a fejléc alá: a horgony felett legyen hely. */
#jelenlet,#nevsor,#gyulesek{scroll-margin-top:84px}

/* ─────────────────────────────────────────────
   15. AKTIVITÁS (v8) — pages/aktivitas.php
   Ez az egyetlen oldal, ahol a SZÍN önálló jelentést hordoz, nem díszít:
   négy besorolás, négy szín, és mindenhol ugyanaz.

     borostyán (ember)  — Fejleszteni kéne
     zöld      (forest) — Ez viszi a csapatot
     kék       (sky)    — Kiaknázatlan lehetőség
     szürke    (halvany)— Elhagyható

   A márkaszín (bordó) SZÁNDÉKOSAN nem szerepel a négy között: az a rendszer
   saját színe, és ha egy besorolás is azt kapná, összemosódna a kettő.
   A variánsokat egyetlen tokennel oldjuk meg (--akt-szin, --akt-halo), hogy
   ne kelljen minden komponenst négyszer leírni.
   ───────────────────────────────────────────── */
.akt-doboz, .akt-cimke, .akt-chip, .akt-merce, .akt-legenda-elem{
  --akt-szin:var(--muted);
  --akt-halo:rgba(130,130,130,.14);
}
.akt-doboz--forest, .akt-cimke--forest, .akt-chip--forest,
.akt-merce--forest, .akt-legenda-elem--forest{
  --akt-szin:var(--forest-300); --akt-halo:rgba(62,92,72,.20);
}
.akt-doboz--ember, .akt-cimke--ember, .akt-chip--ember,
.akt-merce--ember, .akt-legenda-elem--ember{
  --akt-szin:var(--ember); --akt-halo:rgba(224,138,60,.17);
}
.akt-doboz--sky, .akt-cimke--sky, .akt-chip--sky,
.akt-merce--sky, .akt-legenda-elem--sky{
  --akt-szin:var(--sky); --akt-halo:rgba(76,127,163,.17);
}
.akt-doboz--halvany, .akt-cimke--halvany, .akt-chip--halvany,
.akt-merce--halvany, .akt-legenda-elem--halvany{
  --akt-szin:var(--faint); --akt-halo:rgba(130,130,130,.12);
}

/* — A döntési doboz: bal oldalán vastag színcsík, tetején halvány derengés — */
.akt-doboz{
  border-left:4px solid var(--akt-szin);
  background:
    linear-gradient(180deg, var(--akt-halo), transparent 120px),
    var(--surface);
}
.akt-doboz .kartya-fej h2{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.akt-doboz .kartya-fej h2 .ikon{color:var(--akt-szin)}

/* — Egy funkció sora a dobozban — */
.akt-sor{padding:13px 0; border-bottom:1px solid var(--line)}
.akt-sor:last-child{border-bottom:0; padding-bottom:0}
.akt-sor-fej{display:flex; justify-content:space-between; gap:10px;
  align-items:baseline; flex-wrap:wrap; margin-bottom:7px}
.akt-sor-fej strong{display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:15px}
.akt-sor-fej .ikon{color:var(--muted); flex:none}
.akt-sor-szam{color:var(--muted); font-size:12.5px; white-space:nowrap;
  font-variant-numeric:tabular-nums}
.akt-miert{margin:7px 0 0; color:var(--muted); font-size:13.5px; max-width:70ch}
.akt-jel{margin:7px 0 0; font-size:13px; color:var(--ember);
  display:flex; align-items:flex-start; gap:6px}
.akt-jel .ikon{flex:none; margin-top:2px}

/* — Lefedettség-mérce. Ugyanaz a forma, mint a .sav, csak laposabb és színezhető — */
.akt-merce{height:8px; border-radius:4px; background:var(--surface-2); overflow:hidden}
.akt-merce i{display:block; height:100%; border-radius:4px; background:var(--akt-szin);
  transition:width .6s var(--ease)}

/* — Besorolás-pirula — */
.akt-cimke{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  padding:3px 9px; border-radius:var(--radius-pill, 999px);
  background:var(--akt-halo); color:var(--akt-szin);
  border:1px solid var(--akt-szin); font-size:11.5px; font-weight:650;
}
.akt-cimke .ikon{flex:none}

/* — Hasznosság: öt pötty — */
.akt-pontok{display:inline-flex; gap:3px; align-items:center}
.akt-pontok i{width:7px; height:7px; border-radius:50%; background:var(--line-eros)}
.akt-pontok i.tele{background:var(--brand-300)}

/* — Növekedés / csökkenés — */
.akt-fel{color:var(--forest-300); font-weight:600; font-variant-numeric:tabular-nums}
.akt-le{color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums}

/* — Jelmagyarázat — */
.akt-legenda{display:grid; gap:10px; grid-template-columns:1fr}
.akt-legenda-elem{
  border:1px solid var(--line); border-left:3px solid var(--akt-szin);
  border-radius:var(--radius-sm); padding:11px 13px; background:var(--akt-halo);
}
.akt-legenda-fej{display:flex; align-items:center; gap:7px; font-weight:650;
  font-size:14px; color:var(--akt-szin)}
.akt-legenda-fej .ikon{flex:none}
.akt-legenda-db{margin-left:auto; font-variant-numeric:tabular-nums;
  background:var(--surface); color:var(--text); border-radius:var(--radius-pill, 999px);
  min-width:22px; height:22px; display:inline-flex; align-items:center;
  justify-content:center; font-size:12px; padding:0 6px}
.akt-legenda-leiras{display:block; margin-top:5px; color:var(--muted); font-size:13px}

/* — Napi aktivitás oszlopdiagram. Nincs hozzá JavaScript: a magasságot a PHP
     írja be, és a böngésző rajzolja. Képernyőolvasónak a konténer aria-label-je
     mondja meg, mi ez; a pontos számok a címkékben (title) vannak. — */
.akt-oszlopok{
  display:flex; align-items:flex-end; gap:2px; height:120px;
  padding:10px 0 0; overflow-x:auto; scrollbar-width:thin;
}
.akt-oszlop{flex:1 1 4px; min-width:4px; height:100%; display:flex; align-items:flex-end}
.akt-oszlop i{
  display:block; width:100%; border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,var(--brand-300),var(--brand));
}

/* — Apró címkék (terület-chipek) — */
.akt-chipek{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 2px}
.akt-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:var(--radius-pill, 999px);
  background:var(--akt-halo); border:1px solid var(--line-eros);
  color:var(--text); font-size:12.5px;
}
.akt-chip .ikon{flex:none; color:var(--akt-szin)}
.akt-chip b{font-variant-numeric:tabular-nums; color:var(--muted); font-weight:650}

.akt-alcim{font-size:13px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); font-weight:650; margin:16px 0 8px}
.akt-labjegyzet{margin:12px 0 0; color:var(--faint); font-size:12.5px; line-height:1.6}
.akt-labjegyzet code{background:var(--surface-2); padding:1px 5px; border-radius:5px; font-size:11.5px}

/* — Táblázatok. Mobilon vízszintesen csúsztathatók: hét oszlopot nem lehet
     telefonra zsúfolni úgy, hogy olvasható is maradjon. — */
.akt-gorgo{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
table.akt-tabla{min-width:880px}
/* A magyarázó szöveg oszlopa ne nyomódjon össze egy szó szélességűre: inkább
   csússzon oldalra a táblázat, mint hogy minden sor húsz soros legyen. */
table.akt-tabla th:first-child, table.akt-tabla td:first-child{min-width:250px}
table.akt-tabla th:nth-child(4), table.akt-tabla td:nth-child(4),
table.akt-tabla th:nth-child(5), table.akt-tabla td:nth-child(5){min-width:135px}
table.akt-tabla td{vertical-align:top}
table.akt-tabla td small{display:block; margin-top:3px; font-size:12px; line-height:1.45}
table.akt-tabla td strong a{color:inherit}
.akt-tabla .akt-merce{margin-bottom:4px; min-width:90px}
.akt-halk td{opacity:.62}
.akt-ember{display:flex; align-items:center; gap:10px}
.akt-ember strong{display:block; font-size:14.5px}

/* — A számlálók kiemelő színe. Alapból a márkaszín; itt az összkép négy
     számlálója különbözik, hogy ránézésre szét lehessen választani őket. — */
.szamlalo--forest .szamlalo-ikon{color:var(--forest-300)}
.szamlalo--forest::after{background:radial-gradient(circle,rgba(62,92,72,.45),transparent 70%)}
.szamlalo--sky .szamlalo-ikon{color:var(--sky)}
.szamlalo--sky::after{background:radial-gradient(circle,rgba(76,127,163,.42),transparent 70%)}
.szamlalo--ember .szamlalo-ikon{color:var(--ember)}
.szamlalo--ember::after{background:radial-gradient(circle,rgba(224,138,60,.40),transparent 70%)}

/* — A kijelölt szűrőgomb (időszak-előzetek, rendezés) — */
.gomb--szellem.aktiv{border-color:var(--brand); color:var(--brand-300);
  background:var(--hatter-fenylatt)}

@media (min-width:640px){
  .akt-legenda{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .akt-legenda{grid-template-columns:repeat(5,1fr)}
  .akt-oszlopok{height:150px}
}