/* ==========================================================================
   SANC.HU – közös stílusok
   Színek, betűk egy helyen (:root). Sötét módban automatikusan átvált.
   ========================================================================== */

:root {
    --grafit: #1f2328; /* fejléc, fő szövegszín */
    --fejlec-hatter: #2C3A7D; /* VILÁGOS mód: fejléc + lenyíló almenü háttere */
    --szoveg: #1f2328;
    --szoveg-2: #4b535c;
    --halvany: #878787;
    --papir: #F1F1F1; /* oldal háttere */
    --lap: #ffffff; /* dobozok */
    --vonal: #dfe3e7;
    --sanc: #ff830c; /* a SANC narancs: helyek, fő gombok */
    --sanc-sotet: #b55300; /* narancs szöveg fehér alapon (olvasható kontraszt) */
    --sanc-halvany: #fff1e4;
    --betelt: #c4372c;
    --szabad: #2f7d4f;
    --betu: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
    --kijelzo: "Bebas Neue", "Barlow", sans-serif;
    --kiemelt-hatter: var(--grafit); /* kiválasztott nap, téma stb. */
    --kiemelt-szoveg: #fff;
    --szelesseg: 1120px;
    --kerekites: 10px;
    color-scheme: light;
}

/* Sötét mód: vagy a felhasználó választotta (data-theme="dark"), vagy nincs választás és a rendszer sötét.
   A két blokk szándékosan ugyanaz, CSS-ben ezt nem lehet egy szabályba vonni. */
:root[data-theme="dark"] {
    --fejlec-hatter: #1f2328; /* sötét mód: fejléc háttere */
    --szoveg: #eceff2;
    --szoveg-2: #b9c0c8;
    --halvany: #8d96a0;
    --papir: #2E3236;
    --lap: #212529;
    --vonal: #2f353b;
    --sanc: #ff9233;
    --sanc-sotet: #ffa555;
    --sanc-halvany: #3a2614;
    --betelt: #ff6b5e;
    --szabad: #5cc58a;
    --kiemelt-hatter: var(--sanc);
    --kiemelt-szoveg: #1f1205;
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --fejlec-hatter: #1f2328; /* sötét mód (rendszer szerint): fejléc háttere */
        --szoveg: #eceff2;
        --szoveg-2: #b9c0c8;
        --halvany: #8d96a0;
        --papir: #14171a;
        --lap: #1d2125;
        --vonal: #2f353b;
        --sanc: #ff9233;
        --sanc-sotet: #ffa555;
        --sanc-halvany: #3a2614;
        --betelt: #ff6b5e;
        --szabad: #5cc58a;
        --kiemelt-hatter: var(--sanc);
        --kiemelt-szoveg: #1f1205;
        color-scheme: dark;
    }
}

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

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

body {
    margin: 0;
    font-family: var(--betu);
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--szoveg);
    background: var(--papir);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--sanc-sotet); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
    outline: 3px solid var(--sanc);
    outline-offset: 2px;
    border-radius: 4px;
}

img { max-width: 100%; display: block; }

.sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ugras {
    position: absolute; left: 1rem; top: -3rem; z-index: 50;
    background: var(--lap); color: var(--szoveg); padding: .5rem 1rem; border-radius: 6px;
}
.ugras:focus { top: .5rem; }

/* ---------- Fejléc ---------- */

.fejlec {
    background: var(--fejlec-hatter);
    color: #fff;
    border-bottom: 3px solid var(--sanc);
    position: sticky;
    top: 0;
    z-index: 20;
}

.fejlec-belso {
    max-width: var(--szelesseg);
    margin: 0 auto;
    padding: 0 16px;
    min-height: 96px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.logo {
    font-family: var(--kijelzo);
    font-size: 3.1rem;
    line-height: 1;
    letter-spacing: .02em;
    color: #fff;
    text-decoration: none;
    padding-top: 4px;
}
.logo span { color: var(--sanc); font-size: .55em; margin-left: 0px; }
.logo { display: flex; align-items: center; }
/* labda a logó előtt: a fejléc alsó szélén picit túllóg (a transform nem tolja el a fejléc magasságát) */
.logo-labda {
    width: 88px; height: 88px;            /* labda mérete */
    margin-right: .9rem;                  /* távolság a SANC felirattól */
    transform: translateY(16px);          /* ennyivel lóg lejjebb: nagyobb szám = jobban kilóg alul */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35));
    position: relative; z-index: 1;       /* a narancs csík fölött legyen */
    flex-shrink: 0;
}
@media (max-width: 900px) {
    .logo-labda { width: 60px; height: 60px; transform: translateY(2px); }
}

.fomenu {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.fomenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: .25rem;
}

.fomenu ul a {
    display: block;
    white-space: nowrap;
    color: #d6dbe0;
    text-decoration: none;
    font-weight: 500;
    padding: .55rem .7rem;
    border-radius: 6px;
}
.fomenu ul a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.fomenu ul a.aktiv { color: #fff; box-shadow: inset 0 -3px 0 var(--sanc); border-radius: 6px 6px 0 0; }

/* --- Edzések almenü (napok) ---
   Asztalon: rávitt egérre / billentyűs fókuszra legördül a menüpont alól. */
.fomenu li.almenus { position: relative; }
.fomenu ul.almenu {
    position: absolute; top: 100%; left: 0; z-index: 30;
    display: none; flex-direction: column; gap: 0;
    min-width: 11rem; padding: .35rem;
    background: var(--fejlec-hatter);
    border: 1px solid #666666; border-top: 3px solid var(--sanc);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 24px rgb(0 0 0 / .25);
}
.fomenu li.almenus:hover > ul.almenu,
.fomenu li.almenus:focus-within > ul.almenu { display: flex; }
.fomenu ul.almenu a { padding: .45rem .7rem; font-size: .98rem; }
.fomenu ul.almenu a.aktiv-nap { color: var(--sanc); }   /* a kiválasztott almenüpont: csak a színe narancs */
/* elválasztó vonal az almenüben (Edzéseim | Mind | napok) */
.fomenu ul.almenu li.almenu-elvalaszto { height: 1px; margin: .3rem .5rem; background: #4a525b; }

/* a még régi oldalra mutató menüpontok egy apró jelet kapnak */
.fomenu ul a.regi::after {
    content: "";
    display: inline-block;
    width: .4em; height: .4em;
    margin-left: .35em;
    vertical-align: .25em;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    opacity: .6;
}

.fiok { display: flex; align-items: center; gap: .75rem; }

.fiok-nev {
    display: flex; align-items: center; gap: .5rem;
    color: #fff; text-decoration: none; font-weight: 500; white-space: nowrap;
}
/* szűkebb asztali képernyőn a név helyett csak a kép / monogram látszik */
@media (min-width: 901px) and (max-width: 1180px) {
    .fiok-nev span:not(.monogram) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .fomenu ul a { padding: .55rem .5rem; }
}

.fiok-nev img, .monogram {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border:1px solid var(--sanc);
    flex-shrink: 0; /* ne nyomódjon össze */
}

.monogram {
    font-size: 1.9rem; /* a nagy négyzethez arányos */
}

.monogram {
    display: inline-grid; place-items: center;
    background: #343a41; font-size: .8rem; font-weight: 700;
}

.kilep {
    font: inherit; font-size: .95rem;
    color: #d6dbe0; background: none;
    border: 1px solid #4a525b; border-radius: 6px;
    padding: .3rem .7rem; cursor: pointer;
}
.kilep:hover { color: #fff; border-color: #fff; }

.menu-gomb {
    display: none;
    margin-left: auto;
    background: none; border: 0; padding: 10px; cursor: pointer;
}
.menu-ikon, .menu-ikon::before, .menu-ikon::after {
    display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px;
    transition: transform .2s ease;
}
.menu-ikon { position: relative; }
.menu-ikon::before, .menu-ikon::after { content: ""; position: absolute; left: 0; }
.menu-ikon::before { top: -7px; }
.menu-ikon::after { top: 7px; }
.menu-gomb[aria-expanded="true"] .menu-ikon { background: transparent; }
.menu-gomb[aria-expanded="true"] .menu-ikon::before { transform: translateY(7px) rotate(45deg); }
.menu-gomb[aria-expanded="true"] .menu-ikon::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
    .js .menu-gomb { display: block; }
    .fejlec-belso { flex-wrap: wrap; gap: 0 1rem; }
    .fomenu {
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        padding: .25rem 0 1rem;
        /* a fejléc ragad, ezért a hosszú menü a saját dobozában görgethető, így az alja (profil, kilépés) is elérhető */
        max-height: calc(100dvh - 110px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .js .fomenu:not(.nyitva) { display: none; }
    .fomenu ul { flex-direction: column; }
    .fomenu ul a { padding: .35rem .5rem; font-size: 1.05rem; line-height: 1.3; }   /* mobilmenü: sűrű sorok */
    .fomenu ul a.aktiv { box-shadow: inset 4px 0 0 var(--sanc); border-radius: 0; padding-left: 1rem; }
    /* mobilon az almenü mindig látszik, az Edzések alatt egy sorban, kis gombokként */
    .fomenu ul.almenu {
        position: static; display: flex; flex-direction: row; flex-wrap: wrap; gap: .35rem;
        min-width: 0; padding: .1rem 0 .4rem 1rem;
        background: none; border: 0; box-shadow: none;
    }
    .fomenu ul.almenu a {
        padding: .2rem .75rem; font-size: .92rem; min-height: 32px; display: grid; place-items: center;
        border: 1px solid #3a4148; border-radius: 999px;
    }
    .fomenu ul.almenu a.aktiv-nap { box-shadow: none; background: var(--sanc); border-color: var(--sanc); color: #1f1205; }
    .fomenu ul.almenu li.almenu-elvalaszto { width: 1px; height: auto; align-self: stretch; margin: .2rem .15rem; }   /* mobilon függőleges vonal */
    /* mobilon a profil és a kilépés a menü tetején, hogy görgetés nélkül is látsszon */
    .fiok { order: -1; border-bottom: 1px solid #3a4148; padding: .25rem 0 .6rem; margin-bottom: .35rem; gap: .6rem; }
    .fiok .fiok-nev { margin-right: auto; }   /* balra a profil, jobbra a téma és a kilépés */
    .fejlec-tema { display: none; }           /* a fejlécből eltűnik … */
    .fiok .fiok-tema { display: block; }      /* … és a menü tetején jelenik meg (a .fiok előtag kell: a lenti alap "display: none" később jön) */
}

/* ---------- Oldal ---------- */

.oldal {
    flex: 1;
    width: 100%;
    max-width: var(--szelesseg);
    margin: 0 auto;
    padding: 1.75rem 16px 3rem;
}

.oldal-fej {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-bottom: 1.25rem;
}

h1 {
    font-family: var(--kijelzo);
    font-weight: 300;
    font-size: clamp(2.4rem, 6vw, 3.4rem);
    line-height: .95;
    letter-spacing: .01em;
    margin: 0;
 margin-top:5px;
}

h2 { font-size: 1.25rem; font-weight: 600; margin: 0 0 .75rem; }

.alcim { color: var(--szoveg-2); margin: .35rem 0 0; }

.lablec {
    width: 100%;
    margin: 0;
    padding: 1.5rem max(16px, calc((100% - var(--szelesseg)) / 2 + 16px)) 1rem; /* teljes szélességű sáv, a tartalom középen */
    background: color-mix(in srgb, var(--szoveg) 5%, var(--papir)); /* lábléc háttere: picit eltér a papírtól */

    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: center;
    text-align: center;
    color: var(--halvany);
    font-size: .9rem;
    border-top: 1px solid var(--vonal);
}
.lablec a { color: inherit; }

/* ---------- Gombok, űrlapok ---------- */

.gomb {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    font: inherit; font-weight: 600;
    min-height: 44px;
    padding: .5rem 1.1rem;
    border-radius: 8px;
    border: 2px solid var(--sanc);
    background: var(--sanc);
    color: #1f1205;
    text-decoration: none;
    cursor: pointer;
}
.gomb:hover { background: #ff9533; border-color: #ff9533; text-decoration: none; }
    .gomb.masodlagos {
        background: var(--h-eros);
        color:var(--h-eros-szoveg);
        border-color: var(--vonal);
    }
.gomb.masodlagos:hover { border-color: var(--szoveg-2); }

.mezo { display: flex; flex-direction: column; gap: .3rem; }
.mezo label, .mezo .cimke { font-weight: 600; font-size: .95rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="tel"], input[type="url"], input:not([type]), select, textarea {
    font: inherit;
    width: 100%;
    min-height: 44px;
    padding: .5rem .75rem;
    color: var(--szoveg);
    background: var(--lap);
    border: 1px solid var(--vonal);
    border-radius: 8px;
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { border-color: var(--sanc); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sanc) 30%, transparent); }

.mezo-hiba { color: var(--betelt); font-size: .92rem; font-weight: 500; }
.mezo-hiba:empty { display: none; }
.input-validation-error { border-color: var(--betelt) !important; }

.pipa { display: flex; align-items: flex-start; gap: .55rem; font-size: .98rem; cursor: pointer; }
.pipa input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--sanc); flex-shrink: 0; }

.uzenet-hiba {
    background: color-mix(in srgb, var(--betelt) 12%, var(--lap));
    border-left: 4px solid var(--betelt);
    padding: .75rem 1rem;
    border-radius: 6px;
}

/* ==========================================================================
   Belépés
   ========================================================================== */

.belepes {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr);
}

.belepes-kep {
    position: relative;
    background: var(--grafit) center / cover no-repeat;  
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem 2.5rem;
    isolation: isolate;
}
.belepes-kep::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(20, 23, 26, .55) 0%, rgba(20, 23, 26, .15) 40%, rgba(20, 23, 26, .85) 100%);
}

.belepes-logo {
    font-family: var(--kijelzo);
    font-size: clamp(4rem, 9vw, 7.5rem);
    line-height: .85;
    margin: 0;
    font-weight: 400;
}
.belepes-logo span { color: var(--sanc); font-size: .4em; }
.belepes-szlogen { font-size: 1.2rem; margin: .5rem 0 0; color: #e8ebee;  }

.szamok {
    display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem;
    margin: 0; padding: 0; list-style: none;
}
.szamok b {
    display: block;
    font-family: var(--kijelzo);
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--sanc);
}
.szamok span { color: #dfe3e7; font-size: .98rem; }

.belepes-urlap {
    background: var(--lap);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}
.belepes-urlap form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 1.1rem; }
.belepes-urlap h1 { font-size: 2.6rem; }
.belepes-urlap .gomb { width: 100%; margin-top: .25rem; }
.belepes-linkek { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .98rem; }

@media (max-width: 820px) {
    .belepes { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .belepes-kep { min-height: 42vh; padding: 1.25rem 16px 1.5rem; }
    .szlogen-tobbi { display: none; }   /* mobilon a szlogenből csak a "Röplabdabarátok oldala" marad */
    .belepes-urlap { align-items: flex-start; padding: 2rem 16px 3rem; }
    .szamok b { font-size: 2.1rem; }
}

/* ==========================================================================
   Edzések
   ========================================================================== */

.nap-valaszto {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -16px 1rem;
    padding: 2px 16px 6px;
}
.nap-valaszto::-webkit-scrollbar { display: none; }
.nap-valaszto a {
    flex: 0 0 auto;
    min-width: 3.1rem;
    min-height: 44px;
    display: grid; place-items: center;
    padding: 0 .9rem;
    border-radius: 999px;
    border: 1px solid var(--vonal);
    background: var(--lap);
    color: var(--szoveg);
    text-decoration: none;
    font-weight: 600;
}
.nap-valaszto a:hover { border-color: var(--szoveg-2); }
.nap-valaszto a[aria-current="true"] { background: var(--kiemelt-hatter); border-color: var(--kiemelt-hatter); color: var(--kiemelt-szoveg); }
/* térképes nézet kapcsoló a napok sorának végén (Edzések oldal) */
.nap-valaszto .terkep-kapcsolo {
    flex: 0 0 auto; min-height: 44px; margin-left: auto;
    display: inline-flex; align-items: center; gap: .4rem; padding: 0 .9rem;
    border-radius: 999px; border: 1px solid var(--vonal); background: var(--lap); color: var(--szoveg);
    font: 600 1rem var(--betu); cursor: pointer;
}
.nap-valaszto .terkep-kapcsolo svg { width: 18px; height: 18px; }
.nap-valaszto .terkep-kapcsolo:hover { border-color: var(--szoveg-2); }
.nap-valaszto .terkep-kapcsolo[aria-pressed="true"] { background: var(--sanc); border-color: var(--sanc); color: #1f1205; }

.edzes-elrendezes {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.szurok {
    position: sticky;
    top: 80px;
    background: var(--lap);
    border: 1px solid var(--vonal);
    border-radius: var(--kerekites);
    padding: 1.1rem;
}
.szurok summary {
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    display: flex; justify-content: space-between; align-items: center;
}
.szurok summary::-webkit-details-marker { display: none; }
.szurok summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--halvany); }
.szurok[open] summary::after { content: "–"; }
.szurok-tartalom { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.szuro-szam {
    display: inline-grid; place-items: center;
    min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; margin-left: .35rem;
    border-radius: 999px; background: var(--sanc); color: #1f1205; font-size: .8rem;
}
.szuro-gombok { display: flex; gap: .5rem; }
.szuro-gombok .gomb { flex: 1; }

@media (min-width: 901px) {
    .szurok summary { pointer-events: none; }
    .szurok summary::after { display: none; }
}

@media (max-width: 900px) {
    .edzes-elrendezes { grid-template-columns: 1fr; gap: 1.25rem; }
    .szurok { position: static; }
}

/* --- az edzéslista feje (cím + napválasztó): görgetéskor fent marad, a főmenü alatt ---
   A --fejlec-m a főmenü magassága (JavaScript méri; alapból 63px = 60px + 3px narancs csík),
   a --lista-fej-m ennek a fejnek a magassága – ez alá kerül a szűrőpanel. */
.lista-fej {
    position: sticky;
    top: var(--fejlec-m, 63px);
    z-index: 15;
    background: var(--papir);
    margin: -1.75rem -16px 1rem;
    padding: 1.25rem 16px .5rem;
    border-bottom: 1px solid var(--vonal);
}
.lista-fej .oldal-fej { margin-bottom: .75rem; }
.lista-fej .nap-valaszto { margin-bottom: 0; }
.edzes-elrendezes .szurok { top: calc(var(--fejlec-m, 63px) + var(--lista-fej-m, 0px) + 1rem); }
@media (max-width: 600px) {
    /* mobilon kevés a hely: a magyarázó sor elmarad, a cím kisebb */
    .lista-fej .alcim { display: none; }
    .lista-fej h1 { font-size: 2.2rem; }
    .lista-fej .oldal-fej { align-items: center; margin-bottom: .5rem; }
    .lista-fej .oldal-fej .gomb { min-height: 38px; padding: .3rem .85rem; font-size: .92rem; }
}

.talalat-szam { color: var(--halvany); margin: 0 0 1rem; }

/* --- egy nap blokkja --- */

.nap-blokk { margin-bottom: 2rem; }

.nap-cim {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: 0 0 .6rem;
    font-weight: 400;
}
.nap-cim .nap-nev { font-family: var(--kijelzo); font-size: 1.9rem; line-height: 1; }
.nap-cim .nap-datum { color: var(--halvany); font-size: 1rem; }
.nap-cim .ma { color: var(--sanc-sotet); font-weight: 700; font-size: .95rem; }

.edzes-lista {
    list-style: none; margin: 0; padding: 0;
    background: var(--lap);
    border: 1px solid var(--vonal);
    border-radius: var(--kerekites);
    overflow: hidden;
}
.edzes-lista > li + li { border-top: 1px solid var(--vonal); }

.edzes {
    position: relative;
    display: grid;
    grid-template-columns: 4.6rem 128px minmax(0, 1fr) auto;   /* idő, kép (16:9), adatok, létszám */
    align-items: center;
    gap: .25rem 1rem;
    padding: .9rem 1.1rem .9rem .9rem;
    color: inherit;
    text-decoration: none;
    background: var(--h-hatter, var(--lap));   /* az edzés hangulatszíne (kép nélkül: sima lap) */
}
.edzes:hover { background: color-mix(in srgb, var(--h-eros, var(--sanc)) 8%, var(--h-hatter, var(--lap))); }
.edzes:hover .edzes-nev { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.edzes-ido {
    font-family: var(--kijelzo);
    font-size: 2rem;
    line-height: 1;
    letter-spacing: .02em;
}

.edzes-kep {
    width: 128px; height: 72px;   /* 16:9 */
    border-radius: 8px;
    object-fit: cover;
    background: var(--kep-szin, #8a8f95);
}

.edzes-adatok { min-width: 0; }
.edzes-nev { display: block; font-weight: 700; font-size: 1.08rem; line-height: 1.3; margin: 0; overflow-wrap: anywhere; }
.edzes-hely { display: block; color: var(--szoveg-2); font-size: .97rem; margin: .1rem 0 0; }

.cimkek { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.cimke {
    font-size: .82rem; font-weight: 600;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--papir);
    color: var(--szoveg-2);
    border: 1px solid var(--vonal);
}
.cimke.zart { background: var(--sanc-halvany); border-color: transparent; color: var(--sanc-sotet); }
.cimke.uzenet::before { content: ""; display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: currentColor; margin-right: .3em; vertical-align: .1em; }

/* --- a létszám: egy pötty = egy hely a pályán --- */

.letszam { text-align: right; min-width: 9.5rem; }
/* 12 hely egy sorban, a 6. után kis rés: két térfél a háló két oldalán */
.helyek {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 3px;
    max-width: 134px;
}
.helyek i:nth-child(12n+6) { margin-right: 5px; }
.helyek i {
    width: 8px; height: 8px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--szoveg-2) 55%, transparent);
}
.helyek i.foglalt { background: var(--sanc); border-color: var(--sanc); }

.helyek-sav {   /* nagy létszámnál pöttyök helyett sáv */
    width: 132px; height: 8px; border-radius: 4px; margin-left: auto;
    background: color-mix(in srgb, var(--szoveg-2) 18%, transparent);
    overflow: hidden;
}
.helyek-sav span { display: block; height: 100%; background: var(--sanc); }

.letszam-szoveg { display: block; font-size: .92rem; color: var(--szoveg-2); margin-top: .25rem; }
.letszam-szoveg b { font-weight: 700; font-size: 1.05rem; }   /* szabad helyek / várólista száma */
.letszam-szoveg.betelt { color: var(--betelt); font-weight: 600; }
.letszam-szoveg.szabad { color: var(--szabad); }

/* --- elmaradó alkalom --- */
.edzes.elmarad .edzes-kep { filter: grayscale(1); opacity: .6; }
.edzes.elmarad .edzes-ido, .edzes.elmarad .edzes-nev { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--halvany); }
.edzes.elmarad .helyek, .edzes.elmarad .helyek-sav { opacity: .35; }
.elmarad-jel { color: var(--betelt); font-weight: 700; font-size: .92rem; }

@media (max-width: 600px) {
    .edzes {
        grid-template-columns: 96px minmax(0, 1fr);
        grid-template-areas:
            "kep adatok"
            "kep letszam";
        padding: .85rem 1rem .85rem .85rem;
        gap: .2rem .85rem;
        align-items: start;
    }
    .edzes-kep { grid-area: kep; width: 96px; height: 54px; }   /* mobilon is 16:9 */
    .edzes-adatok { grid-area: adatok; }
    .letszam { grid-area: letszam; text-align: left; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; margin-top: .35rem; }
    .letszam-szoveg { margin-top: 0; white-space: nowrap; }
    .helyek-sav { margin-left: 0; width: 96px; }
    /* mobilon az időpont a név elé kerül */
    .edzes-ido { display: none; }
    .edzes-nev .mobil-ido { font-family: var(--kijelzo); font-weight: 400; font-size: 1.35rem; margin-right: .4rem; letter-spacing: .02em; }
}
@media (min-width: 601px) {
    .mobil-ido { display: none; }
}

.ures {
    background: var(--lap);
    border: 1px dashed var(--vonal);
    border-radius: var(--kerekites);
    padding: 2rem 1.5rem;
    text-align: center;
}
.ures p { margin: 0 0 1rem; color: var(--szoveg-2); }

/* ---------- Főoldal ---------- */

.udvozlo { margin-bottom: 2rem; }
.fooldal-racs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.szekcio-fej { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .75rem; }
.szekcio-fej h2 { margin: 0; }

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

/* ==========================================================================
   Téma-váltó gomb a fejlécben
   ========================================================================== */

.tema-gomb-urlap { margin: 0; }
.fiok-tema { display: none; }   /* a menübeli témakapcsoló csak mobilon látszik */
.tema-gomb {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid #4a525b;
    background: none;
    color: #d6dbe0;
    cursor: pointer;
}
.tema-gomb:hover { color: #fff; border-color: #fff; }

/* világosban a hold látszik (sötétre vált), sötétben a nap */
.ikon-nap { display: none; }
:root[data-theme="dark"] .ikon-hold { display: none; }
:root[data-theme="dark"] .ikon-nap { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .ikon-hold { display: none; }
    :root:not([data-theme]) .ikon-nap { display: block; }
}

.fiok-nev.aktiv span:not(.monogram) { text-decoration: underline; text-decoration-color: var(--sanc); text-decoration-thickness: 3px; text-underline-offset: 6px; }

@media (max-width: 900px) {
    .js .menu-gomb { margin-left: auto; }   /* a témakapcsoló a menübe költözött, így a menü gomb kerül jobbra */
    .fomenu { order: 5; }
}

/* ==========================================================================
   Profil
   ========================================================================== */

.profil-fej {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}
.profil-fej h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); overflow-wrap: anywhere; }
.profil-fej .alcim { margin-top: .4rem; overflow-wrap: anywhere; }
.profil-fej { flex-wrap: wrap; }
.profil-elonezet { margin-left: auto; white-space: nowrap; }   /* "Profilom előnézete": a fejléc jobb szélén (keskeny képernyőn alá törik) */
.profil-fej .alcim span { color: var(--halvany); }

.profil-kep {
    flex: 0 0 auto;
    width: 96px; height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--sanc);
}
.monogram-nagy {
    display: grid; place-items: center;
    background: var(--grafit); color: #fff;
    font-family: var(--kijelzo); font-size: 2.6rem; padding-top: 4px;
}

.profil-elrendezes {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.profil-menu {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    border-left: 2px solid var(--vonal);
}
.profil-menu a {
    color: var(--szoveg-2);
    text-decoration: none;
    font-weight: 500;
    padding: .45rem 0 .45rem 1rem;
    margin-left: -2px;
    border-left: 2px solid transparent;
}
.profil-menu a:hover { color: var(--szoveg); border-left-color: var(--sanc); }

.profil-szakaszok { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }

.szakasz {
    background: var(--lap);
    border: 1px solid var(--vonal);
    border-radius: var(--kerekites);
    padding: 1.4rem 1.5rem 1.5rem;
    scroll-margin-top: 84px;
}
.szakasz > h2 { font-size: 1.35rem; }
.halvany-szakasz { background: transparent; border-style: dashed; }

.segito { color: var(--halvany); font-size: .95rem; margin: -.25rem 0 1rem; }
.mezo .segito { margin: 0; }

.uzenet-ok {
    background: color-mix(in srgb, var(--szabad) 13%, var(--lap));
    border-left: 4px solid var(--szabad);
    padding: .7rem 1rem;
    border-radius: 6px;
    margin: 0 0 1rem;
    font-weight: 500;
}
.szakasz .uzenet-hiba { margin-bottom: 1rem; }

.mezo-racs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
}
.mezo-racs .szeles { grid-column: 1 / -1; }

.csoport {
    border: 0;
    border-top: 1px solid var(--vonal);
    margin: 1.5rem 0 0;
    padding: 1.25rem 0 0;
}
.csoport legend { font-weight: 700; padding: 0 .5rem 0 0; }
.csoport .segito { margin-top: .25rem; }

.kapcsolok {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem 1.25rem;
}
.kapcsolok.egy-oszlop { grid-template-columns: 1fr; margin-top: .75rem; }

.urlap-lab {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    margin-top: 1.5rem;
}
.keskeny-urlap { max-width: 380px; display: flex; flex-direction: column; gap: 1rem; }
.keskeny-urlap .urlap-lab { margin-top: .25rem; }

/* --- téma választó kártyák --- */

.tema-valaszto {
    border: 0; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.tema-kartya { position: relative; cursor: pointer; display: flex; flex-direction: column; gap: .5rem; }
.tema-kartya input { position: absolute; opacity: 0; pointer-events: none; }
.tema-nev { font-weight: 600; font-size: .98rem; }

.tema-minta {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    border: 2px solid var(--vonal);
    overflow: hidden;
    padding: 22% 10% 0;
}
/* mini oldal: fejléc-sáv + két sor */
.tema-minta::before { content: ""; position: absolute; inset: 0 0 auto; height: 16%; background: #1f2328; border-bottom: 2px solid #ff830c; }
.tema-minta i { display: block; height: 14%; border-radius: 3px; margin-bottom: 7%; }
.tema-minta i:nth-child(1) { width: 55%; }
.tema-minta i:nth-child(3) { width: 75%; }

.minta-vilagos { background: #f2f4f6; }
.minta-vilagos i { background: #fff; border: 1px solid #dfe3e7; }
.minta-vilagos i:nth-child(1) { background: #1f2328; border: 0; }

.minta-sotet { background: #14171a; }
.minta-sotet i { background: #1d2125; border: 1px solid #2f353b; }
.minta-sotet i:nth-child(1) { background: #eceff2; border: 0; }

/* fél világos, fél sötét */
.minta-auto { background: linear-gradient(105deg, #f2f4f6 50%, #14171a 50%); }
.minta-auto i { background: linear-gradient(105deg, #fff 50%, #1d2125 50%); border: 1px solid #8a8f95; }
.minta-auto i:nth-child(1) { background: linear-gradient(105deg, #1f2328 50%, #eceff2 50%); border: 0; }

.tema-kartya:hover .tema-minta { border-color: var(--szoveg-2); }
.tema-kartya input:checked + .tema-minta { border-color: var(--sanc); box-shadow: 0 0 0 2px var(--sanc); }
.tema-kartya input:checked ~ .tema-nev::before { content: "✓ "; color: var(--sanc-sotet); }
.tema-kartya input:focus-visible + .tema-minta { outline: 3px solid var(--sanc); outline-offset: 3px; }

.js .js-rejt { display: none; }
.mentve-jel { color: var(--szabad); font-weight: 600; }

/* --- plakett ikonok --- */

.ikon-racs {
    border: 0; margin: 0 0 1.25rem; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: .5rem;
}
.ikon-valaszto { position: relative; cursor: pointer; }
.ikon-valaszto input { position: absolute; opacity: 0; pointer-events: none; }
.ikon-valaszto img, .ikon-valaszto span {
    width: 100%; aspect-ratio: 1;
    display: grid; place-items: center;
    padding: 1px;
    border-radius: 8px;
    border: 2px solid var(--vonal);
    background: var(--papir);
    object-fit: contain;
    font-size: .85rem; font-weight: 600; color: var(--szoveg-2);
}
.ikon-valaszto:hover img, .ikon-valaszto:hover span { border-color: var(--szoveg-2); }
.ikon-valaszto input:checked + img, .ikon-valaszto input:checked + span { border-color: var(--sanc); box-shadow: 0 0 0 2px var(--sanc); }
.ikon-valaszto input:focus-visible + img, .ikon-valaszto input:focus-visible + span { outline: 3px solid var(--sanc); outline-offset: 2px; }

@media (max-width: 900px) {
    .profil-elrendezes { grid-template-columns: 1fr; gap: 1rem; }
    .profil-menu {
        position: static;
        flex-direction: row;
        border-left: 0;
        overflow-x: auto;
        scrollbar-width: none;
        gap: .4rem;
        margin: 0 -16px;
        padding: 2px 16px 6px;
    }
    .profil-menu::-webkit-scrollbar { display: none; }
    .profil-menu a {
        flex: 0 0 auto;
        white-space: nowrap;
        border: 1px solid var(--vonal);
        border-radius: 999px;
        background: var(--lap);
        padding: .5rem .9rem;
        margin: 0;
        min-height: 44px;
        display: grid; place-items: center;
    }
    .profil-menu a:hover { border-color: var(--szoveg-2); }
}

@media (max-width: 600px) {
    .profil-fej { gap: 1rem; }
    .profil-kep { width: 72px; height: 72px; }
    .monogram-nagy { font-size: 2rem; }
    .szakasz 
    {
        padding: 1.1rem 1rem 1.25rem;

    }
    .mezo-racs, .kapcsolok { grid-template-columns: 1fr; }
    .tema-valaszto { gap: .6rem; }
    .tema-nev { font-size: .9rem; }
}

/* ==========================================================================
   Edzés részletei
   ========================================================================== */

.link-gomb {
    font: inherit; font-size: .95rem; font-weight: 600;
    background: none; border: 0; padding: .25rem 0;
    color: var(--sanc-sotet);
    cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}
.link-gomb:hover { text-decoration-thickness: 2px; }
.link-gomb.veszely { color: var(--betelt); }
summary.link-gomb { list-style: none; display: inline-block; }
summary.link-gomb::-webkit-details-marker { display: none; }

.gomb.teljes { width: 100%; }
.nagy-gomb { min-height: 52px; font-size: 1.1rem; }

.halvany-szam { color: var(--halvany); font-weight: 500; margin-left: .25rem; font-size:1.8rem; }
.halvany { color: var(--halvany); }

/* --- fej --- */

.edzes-fej {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 1rem;
}
.edzes-fej-kep img {
    width: 132px; height: 132px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--kep-szin);
}
.edzes-fej.elmarad .edzes-fej-kep img { filter: grayscale(1); opacity: .6; }

/* --- borítóképes fejléc: a kép kitölti a sávot, a szöveg alul, sötét átmeneten --- */
.edzes-fej.boritos {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(220px, 34vw, 340px);
    padding: 1.5rem 1.75rem;
    border-radius: 14px;
    overflow: hidden;
    background: var(--kep-szin);
    color: #fff;
}
.boritokep {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 35%;
}
.edzes-fej.boritos::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(20, 23, 26, .15) 0%, rgba(20, 23, 26, .25) 40%, rgba(20, 23, 26, .85) 100%);
}
.edzes-fej.boritos .edzes-fej-szoveg { flex: 1; min-width: 0; }
.edzes-fej.boritos h1 { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.edzes-fej.boritos .mikor-nap { color: var(--sanc); }
.edzes-fej.boritos .mikor-datum { color: #fff; }
.edzes-fej.boritos .mikor-ido { background: var(--sanc); color: #1f1205; }
.edzes-fej.boritos .edzes-hol { color: #e8ebee; }
.edzes-fej.boritos .edzes-hol a { color: #ffb066; }
.edzes-fej.boritos .cimke { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); color: #fff; }
.edzes-fej.boritos .cimke.zart { background: var(--sanc); border-color: var(--sanc); color: #1f1205; }
.edzes-fej.boritos .kedvenc-urlap { position: absolute; top: 1rem; right: 1rem; }
.edzes-fej.boritos .kedvenc-gomb { background: rgba(20, 23, 26, .55); border-color: rgba(255, 255, 255, .35); color: #fff; backdrop-filter: blur(4px); }
.edzes-fej.boritos .kedvenc-gomb.be { border-color: var(--sanc); }
.edzes-fej.boritos.elmarad .boritokep { filter: grayscale(1); }
.edzes-fej.boritos.elmarad h1 { color: #c9ced4; }

.edzes-mikor {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem;
    margin: 0 0 .35rem;
    font-family: var(--kijelzo);
    line-height: 1;
}
.mikor-nap { font-size: 2rem; color: var(--sanc-sotet); }
.mikor-datum { font-size: 2rem; }
.mikor-ido { font-size: 2rem; padding: .1rem .5rem 0; border-radius: 6px; background: var(--kiemelt-hatter); color: var(--kiemelt-szoveg); }
.edzes-fej.elmarad .mikor-ido { background: var(--halvany); }

.edzes-fej h1 { font-size: clamp(2rem, 5vw, 3rem); overflow-wrap: anywhere; }
.edzes-fej.elmarad h1 { text-decoration: line-through; text-decoration-thickness: 3px; color: var(--halvany); }
.edzes-hol { margin: .4rem 0 .5rem; color: var(--szoveg-2); font-size: 1.05rem; }
.edzes-hol a { margin-left: .5rem; font-weight: 600; }
.cimke.elmarad-cimke { background: var(--betelt); border-color: var(--betelt); color: #fff; }

.kedvenc-gomb {
    display: inline-flex; align-items: center; gap: .4rem;
    font: inherit; font-weight: 600; font-size: .95rem;
    min-height: 40px;
    padding: .3rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--vonal);
    background: var(--lap);
    color: var(--szoveg-2);
    cursor: pointer;
}
.kedvenc-gomb svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.kedvenc-gomb:hover { border-color: var(--szoveg-2); }
.kedvenc-gomb.be { color: var(--sanc-sotet); border-color: var(--sanc); }
.kedvenc-gomb.be svg { fill: var(--sanc); stroke: var(--sanc); }

.alkalom-lapozo {
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin: 0 0 1.25rem;
    font-weight: 600;
}
.alkalom-lapozo a { text-decoration: none; }
.alkalom-lapozo a:hover { text-decoration: underline; }
.alkalom-lapozo .jobbra { margin-left: auto; }

/* --- két hasáb: jobb oldalon a jelentkezés és a névsor, bal oldalon a többi --- */

.edzes-racs {
    display: grid;
    /* bal: jelentkezés + névsor (keskenyebb), jobb: az edzésről + hozzászólások (szélesebb) */
    grid-template-columns: minmax(300px, 1fr) minmax(0, 1.5fr);
    gap: 1.75rem;
    align-items: start;
}
.edzes-bal, .edzes-jobb { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.edzes-jobb { grid-column: 1; grid-row: 1; }   /* (a "jobb" doboz a jelentkezésé – most a bal oldalon) */
.edzes-bal { grid-column: 2; grid-row: 1; }    /* (a "bal" doboz az edzésről + hozzászólásoké – most a jobb oldalon) */

.szakasz h3 { font-size: 1.05rem; margin: 1.25rem 0 .5rem; }
.kis-szakasz p { margin: 0 0 .75rem; }

/* --- jelentkezés kártya --- */

/* --- hangulatszínek a borítóképből (Services/Hangulat.cs) ---
   Az oldal a .edzes-racs (a beállítások oldalon a .beallitas-oldal, a listában az .edzes sor) elemre írja ki a --hv-* (világos) és --hs-* (sötét) változókat.
   Itt a téma szerint kiválasztjuk a megfelelőt; ha nincs kép, az alap színek maradnak. */
.edzes-racs, .beallitas-oldal, .edzes-lista .edzes, .cs-kartya {
    --h-hatter: var(--hv-hatter, var(--h-alap, var(--lap)));
    --h-eros: var(--hv-eros, var(--sanc));
    --h-eros-szoveg: var(--hv-eros-szoveg, #1f1205);
    --h-kartya: var(--hv-hatter, var(--papir));   /* névsor kártyák háttere (kép nélkül: az eddigi szürke) */
    --h-nev: var(--hv-eros, var(--szoveg));       /* névsorban a név színe (kép nélkül: sima szövegszín) */
}
:root[data-theme="dark"] .edzes-racs, :root[data-theme="dark"] .beallitas-oldal, :root[data-theme="dark"] .edzes-lista .edzes, :root[data-theme="dark"] .cs-kartya {
    --h-hatter: var(--hs-hatter, var(--h-alap, var(--lap)));
    --h-eros: var(--hs-eros, var(--sanc));
    --h-eros-szoveg: var(--hs-eros-szoveg, #1f1205);
    --h-kartya: var(--hs-hatter, var(--papir));
    --h-nev: var(--hs-eros, var(--szoveg));
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .edzes-racs, :root:not([data-theme]) .beallitas-oldal, :root:not([data-theme]) .edzes-lista .edzes, :root:not([data-theme]) .cs-kartya {
        --h-hatter: var(--hs-hatter, var(--h-alap, var(--lap)));
        --h-eros: var(--hs-eros, var(--sanc));
        --h-eros-szoveg: var(--hs-eros-szoveg, #1f1205);
        --h-kartya: var(--hs-hatter, var(--papir));
        --h-nev: var(--hs-eros, var(--szoveg));
    }
}

.jelentkezes-kartya {
    background: var(--h-hatter);
    border: 1px solid var(--h-halvany);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
/* a fő gomb (Jelentkezem) a hangulat erős színével */
.jelentkezes-kartya .gomb:not(.masodlagos) {
    background: var(--h-eros);
    border-color: var(--h-eros);
    color: var(--h-eros-szoveg);
}
.jelentkezes-kartya .gomb:not(.masodlagos):hover { filter: brightness(1.08); }
.letszam-nagy {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
    margin-bottom: .75rem;
}
.letszam-nagy .szam { font-family: var(--kijelzo); font-size: 3.4rem; line-height: .9; }
.letszam-nagy .per { font-family: var(--kijelzo); font-size: 2rem; color: var(--halvany); }
.letszam-nagy .mi { display: block; color: var(--szoveg-2); font-size: .95rem; }
.letszam-allapot { font-weight: 700; }
.betelt-jel { color: var(--betelt); }
.szabad-jel { color: var(--szabad); }

/* a pálya: egy pötty egy hely, két térfél, középen a háló */
.palya {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 1rem;
    border-radius: 8px;
    /* a hangulatszínhez igazodik (ha nincs, a --h-eros a SANC narancs) */
    background: color-mix(in srgb, var(--h-eros, var(--sanc)) 10%, var(--h-hatter, var(--lap)));
    border: 1px solid color-mix(in srgb, var(--h-eros, var(--sanc)) 30%, var(--vonal));
}
.terfel {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(var(--oszlop), minmax(0, 22px));
    justify-content: center;
    gap: 6px;
}
.palya i {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--h-eros, var(--szoveg-2)) 50%, transparent);
}
.palya i.foglalt { background: var(--h-eros, var(--sanc)); border-color: var(--h-eros, var(--sanc)); }
.palya .halo {
    align-self: stretch;
    width: 2px;
    background: repeating-linear-gradient(var(--h-eros, var(--szoveg-2)) 0 4px, transparent 4px 8px);
    opacity: .7;
}
.helyek-sav.nagy { width: 100%; height: 12px; border-radius: 6px; margin: 0 0 1rem; }
.helyek-sav.nagy span { background: var(--h-eros, var(--sanc)); }

.jel-allapot { margin: 0 0 .75rem; font-weight: 500; }
.jel-allapot.ok { color: var(--szabad); }
.jel-muvelet .segito { margin: .6rem 0 0; }
.figyelmeztet { color: var(--sanc-sotet) !important; }

/* --- névsor: kis fekvő kártyák --- */

.nevsor { list-style: none; margin: 0; padding: 0; counter-reset: sor; display: flex; flex-direction: column; gap: .5rem; }
.nevsor > li {
    display: flex; align-items: center; gap: .75rem;
    padding: .1rem .1rem .1rem .1rem;
    border: 1px solid var(--vonal);
    border-radius: 10px;
    background: var(--h-kartya, var(--papir));   /* az edzés hangulatszíne */
    counter-increment: sor;
}
/* sorszám: nagy, jól látható – hányadik vagy */
ol.nevsor > li::before {
    content: counter(sor);
    flex: 0 0 2.1rem;
    text-align: center;
    font-family: var(--kijelzo);
    font-size: 3rem;
    line-height: 1;
    padding-top: 3px;
    color: var(--halvany);
    font-variant-numeric: tabular-nums;
}
.varolista > li::before {
    color: var(--halvany) !important;
    -webkit-text-stroke: 0.5px var(--szoveg-2);
    font-size: 1rem !important;
}

/* lemondott: a helyén marad, de szürkén, sorszám nélkül */
ol.nevsor > li.lemondott { counter-increment: none; background: transparent; border-style: dashed; }
ol.nevsor > li.lemondott::before { content: "–"; color: var(--vonal); }
.nevsor > li.lemondott .avatar, .nevsor > li.lemondott .plakett 
{
    filter: grayscale(1); opacity: .55; 

}

.nevsor > li.lemondott .avatar-keret {
    display: none;
}

.nevsor > li.lemondott .nev {
    color: color-mix(in srgb, var(--szoveg) 24%, transparent);
    font-weight: 600;
}
.nevsor > li.lemondott .nev a { color: inherit; }
.nevsor > li.en { border-color: var(--h-eros, var(--sanc)); border-width: 2px; background: color-mix(in srgb, var(--h-eros, var(--sanc)) 10%, var(--h-kartya, var(--lap))); }
.nevsor > li.en::before { color: var(--sanc-sotet); }

.avatar {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
   border:1px var(--sanc) solid;
}
.nevsor .avatar {
    width: 54px; height: 54px;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--szoveg) 42%, transparent);   /* vékony keret a kép körül */
}
.monogram-kicsi {
    display: inline-grid; place-items: center;
    background: var(--papir); color: var(--szoveg-2);
    border: 1px solid var(--vonal);
    font-size: .75rem; font-weight: 700;
}
.nevsor .monogram-kicsi { background: var(--lap); font-size: 1.2rem; }
.monogram-kicsi.vendeg { border-style: dashed; }

.nev-blokk { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
    .nev-blokk .nev {
        font-weight: 600;
        font-size: 1.1rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
        text-transform: uppercase;
    }
.nev-blokk .nev a { color: inherit; text-decoration: none; }
.nevsor > li:not(.lemondott) .nev-blokk .nev { color: var(--h-nev, var(--szoveg)); }   /* név: az edzés erős színe */
.nev-blokk .nev a:hover { text-decoration: underline; }
.nev-info { font-size: .85rem; color: var(--halvany); display: flex; align-items: center; gap: .35rem .5rem; flex-wrap: wrap; }
/* a kép kerete: ehhez igazodik a plakett */
.avatar-keret { position: relative; flex: 0 0 auto; display: block; line-height: 0; margin-right: 4px; }

/* támogatói plakett: a profilkép jobb alsó sarkán, félig rálógva */
.plakett {
    position: absolute;
    right: -20px; bottom: 20px;
    width: 38px; height: 38px;
    padding: 1px;
    border-radius: 50%;

 
    object-fit: contain;

}
.te-jel {
    font-size: .75rem; font-weight: 700;
    padding: .3rem .7rem; margin-left: .35rem;
    border-radius: 999px;
    background: var(--sanc); color: #1f1205;
    vertical-align: 2px;
}

/* állapot: telt színes címke */
.allapot {
    display: inline-block;
    padding: .12rem .55rem;
    border-radius: 6px;
    font-size: .8rem; font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.4;
}
.allapot.ok { background: var(--szabad); color: #fff; }
.allapot.fix { background: transparent; color: var(--szoveg-2); box-shadow: inset 0 0 0 0.4px var(--szoveg-2);  }
.allapot.lemondta { background: transparent; color: var(--halvany); box-shadow: inset 0 0 0 1.5px var(--vonal); }
.allapot.keso { background: color-mix(in srgb, var(--betelt) 15%, var(--lap)); color: var(--betelt); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--betelt) 45%, transparent); }
.allapot.vendeg { background: var(--sanc); color: #1f1205; }
.allapot.varo { background: transparent; color: var(--szoveg-2); box-shadow: inset 0 0 0 1.5px var(--halvany); }
:root[data-theme="dark"] .allapot.ok { color: #0f2318; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .allapot.ok { color: #0f2318; }
}

.jel-ido { font-variant-numeric: tabular-nums; }
.arany { font-weight: 600; display:none; }
.arany.alacsony { color: var(--betelt); }
.arany.magas { color: var(--szabad); }

.gomb.kicsi { min-height: 36px; padding: .3rem .85rem; font-size: .92rem; border-width: 1.5px; }
.sor-muvelet { margin: 0; }

/* kártya jobb oszlopa: állapotcímke a jobb felső, kuka a jobb alsó sarokban */
.nevsor > li { align-items: stretch; }
.nevsor > li > .avatar-keret, .nevsor > li > .nev-blokk { align-self: center; }
ol.nevsor > li::before { align-self: center; }
.kartya-jobb {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: .4rem;
}
.kartya-jobb .allapot { white-space: nowrap; }

/* kis kuka gomb a levételhez */
.kuka-gomb {
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1.5px solid color-mix(in srgb, var(--betelt) 55%, var(--vonal));
    background: var(--lap);
    color: var(--betelt);
    cursor: pointer;
}
.kuka-gomb:hover { background: var(--betelt); border-color: var(--betelt); color: #fff; }

.nevsor-cim { color: var(--szoveg-2); }
.varolista > li { opacity: .85; background: var(--papir); }   /* a várólista az alap háttérrel, nem a hangulatszínnel */

.lemondtak { margin-top: 1rem; }
.lemondtak summary { cursor: pointer; color: var(--szoveg-2); font-weight: 600; }
.lemondott-lista { gap: 0; }
.lemondott-lista > li { gap: .5rem; flex-wrap: wrap; background: none; border: 0; border-top: 1px solid var(--vonal); border-radius: 0; padding: .45rem 0; }
.lemondott-lista > li:first-child { border-top: 0; }
.lemondott-lista .nev { text-decoration: line-through; color: var(--halvany); }
.lemondott-lista .mikor { margin-left: auto; color: var(--halvany); font-size: .88rem; }
.cimke.keso { background: color-mix(in srgb, var(--betelt) 14%, var(--lap)); color: var(--betelt); border-color: transparent; }

.vendeg-felvetel { margin-top: 1.25rem; border-top: 1px solid var(--vonal); padding-top: 1rem; }
.vendeg-felvetel summary { cursor: pointer; font-weight: 600; color: var(--sanc-sotet); }
.vendeg-urlap { margin-top: .75rem; display: flex; flex-direction: column; gap: .4rem; }
.vendeg-urlap label { font-weight: 600; font-size: .95rem; }
.vendeg-urlap .sor { display: flex; gap: .5rem; }
.vendeg-urlap .sor input { flex: 1; min-width: 0; }

/* --- összecsukható szakasz (mobilon) --- */
.osszecsukhato > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.osszecsukhato > summary::-webkit-details-marker { display: none; }
.osszecsukhato > summary h2 { margin: 0; }
.osszecsukhato > summary::after {
    content: ""; flex: 0 0 auto;
    width: .6rem; height: .6rem;
    border-right: 2px solid var(--szoveg-2); border-bottom: 2px solid var(--szoveg-2);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}
.osszecsukhato[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.osszecsukhato-tartalom { margin-top: .75rem; }
@media (min-width: 901px) {
    .osszecsukhato > summary { cursor: default; pointer-events: none; }
    .osszecsukhato > summary::after { display: none; }
}

/* --- leírás --- */

.hosszu-szoveg {
    max-width: 70ch;
    overflow-wrap: anywhere;
    line-height: 1.2em;
    color: color-mix(in srgb, var(--szoveg) 55%, var(--papir));
}
.adatok {
    display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.25rem;
    margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--vonal);
}
.adatok dt { color: var(--halvany); font-size: .95rem; }
.adatok dd { margin: 0; }

/* --- értékelés --- */

.ertekeles {
    background: var(--h-eros);
    color: var(--h-eros-szoveg);
}
.csillagok { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; }
.csillag {
    background: none; border: 0; padding: 4px; cursor: pointer;
    color: color-mix(in srgb, var(--h-hatter) 40%, transparent);
}
.csillag svg { fill: currentColor; display: block; }
.csillag.be { color: var(--sanc); }
/* rámutatáskor az adott és az előtte lévő csillagok világítanak */
.csillagok:hover .csillag { color: var(--sanc); }
.csillagok .csillag:hover ~ .csillag { color: color-mix(in srgb, var(--szoveg-2) 40%, transparent); }
.csillagok .link-gomb { margin-left: 1rem; }
.ertekelesem { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.csillag-sor { font-size: 1.6rem; color: var(--sanc); letter-spacing: 2px; }
.ures-csillag { color: color-mix(in srgb, var(--szoveg-2) 30%, transparent); }

/* Edzés oldal – az értékelés utáni "Köszönjük…" üzenet */
.ertekeles .uzenet-ok {
    background: var(--h-eros);
    color: var(--h-eros-szoveg);
    border-left-color: var(--h-eros-szoveg);
}

/* --- hozzászólások --- */

.uj-hozzaszolas { margin-bottom: 1.25rem; }
.uj-hozzaszolas .urlap-lab { margin-top: .6rem; justify-content: flex-end; }
.hozzaszolas-lista { list-style: none; margin: 0; padding: 0; }
.hozzaszolas {
    display: flex; gap: .75rem;
    padding: 1rem 0;
    border-top: 1px solid var(--vonal);
    scroll-margin-top: 84px;
}
.hozzaszolas .avatar { width: 82px; height: 82px; }   /* hozzászólás avatar mérete */
.hozzaszolas .monogram-kicsi { font-size: 1.05rem; }
.hozzaszolas-test { flex: 1; min-width: 0; }
.hozzaszolas-fej { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; margin-bottom: .2rem; }
.hozzaszolas-fej .nev { font-weight: 700; }
.hozzaszolas-fej .nev a { color: inherit; text-decoration: none; }
.hozzaszolas-fej time { color: var(--halvany); font-size: .88rem; }
.hozzaszolas-szoveg { overflow-wrap: anywhere; }
.hozzaszolas-szoveg.athuzott { text-decoration: line-through; color: var(--halvany); }
.hozzaszolas-link { margin-top: .3rem; font-size: .95rem; overflow-wrap: anywhere; }
.hozzaszolas.sajat .hozzaszolas-fej .nev::after { content: " (te)"; color: var(--halvany); font-weight: 500; }
.hozzaszolas-muveletek { display: flex; gap: 1rem; align-items: flex-start; margin-top: .3rem; }
.hozzaszolas-muveletek form { margin: 0; }
.hozzaszolas-muveletek details[open] { flex-basis: 100%; }
.hozzaszolas-muveletek details textarea { margin-top: .5rem; }
.hozzaszolas-muveletek details .urlap-lab { margin-top: .5rem; }

/* --- szervezőknek --- */

.szervezo-panel { 
    border-style: dashed; 
    background-color:var(--h-hatter);
    border:1px solid var(--halvany);
}
.szervezo-gombok {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1rem;
    
}
    .szervezo-gombok form {
        margin: 0;

    }
.link-sor { display: flex; gap: 1.25rem; flex-wrap: wrap; font-weight: 600; }

@media (max-width: 900px) {
    /* mobilon egy hasáb, ebben a sorrendben: jelentkezés, névsor, értékelés, leírás, hozzászólások, fix, szervező */
    /* stretch: minden doboz teljes szélességű (asztali nézetből az align-items: start itt összehúzta volna) */
    .edzes-racs { display: flex; flex-direction: column; gap: 1.25rem; align-items: stretch; }
    .edzes-bal, .edzes-jobb { display: contents; }
    .jelentkezes-kartya { order: 2; }
    .resztvevok { order: 1; }
    .ertekeles { order: 3; }
    .erosseg { order: 6; }   /* a mezőny erőssége: a fix tagság után (a DOM-ban utána van), a szervezőknek előtt */
    .leiras { order: 4; }
    .hozzaszolasok { order: 5; }
    #fix { order: 6; }
    .szervezo-panel { order: 7; }
    .megosztas-szakasz { order: 8; }   /* a megosztás a legalján */
     /* a megosztás a legalján */
    .edzes-fej { grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; }
    .edzes-fej-kep img { width: 96px; height: 96px; }
    .kedvenc-urlap { grid-column: 1 / -1; }
    .edzes-fej.boritos { padding: 1.25rem; margin: -1.75rem -16px 1rem; border-radius: 0; }
    .edzes-fej.boritos .kedvenc-gomb span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

@media (max-width: 600px) {
    .edzes-fej { grid-template-columns: 72px minmax(0, 1fr); }
    .edzes-fej-kep img { width: 72px; height: 72px; border-radius: 10px; }
    .mikor-nap, .mikor-datum, .mikor-ido { font-size: 1.6rem; }
    .letszam-nagy .szam { font-size: 2.8rem; }
    .palya { gap: 8px; padding: 10px; }
    .nevsor .avatar { width: 56px; height: 56px; }
    ol.nevsor > li::before { flex-basis: 1.7rem; font-size: 1.7rem; }
    /* keskeny kártyán a hosszú állapotcímke törhet két sorba, hogy a névnek több hely maradjon */
    .kartya-jobb { max-width: 6.5rem; }
    .kartya-jobb .allapot { white-space: normal; text-align: center; }
    .nevsor .nev-blokk .nev { overflow-wrap: break-word; hyphens: auto; font-size: 1rem; }
    .nevsor > li { gap: .55rem; }
    .nevsor .avatar { width: 50px; height: 50px; }
    ol.nevsor > li::before { flex-basis: 1.3rem; font-size: 1.5rem; }
    .terfel { gap: 4px; }
}

/* ==========================================================================
   Alkalom kezelése (szervezőknek) – /edzes/{id}/kezeles
   ========================================================================== */

.kezeles-fej .vissza { margin: 0 0 .5rem; font-weight: 600; }
.kezeles-fej .vissza a { text-decoration: none; }
.kezeles-fej .alcim b { color: var(--szoveg); }

.kezeles-racs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.75rem;
    align-items: start;
}
.kezeles-racs .naplo-szakasz { grid-column: 1 / -1; }

/* pipálós névsor a levételhez */
.pipa-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pipa-lista > li { padding: .5rem 0; border-top: 1px solid var(--vonal); }
.pipa-lista > li:first-child { border-top: 0; }
.pipa-lista .pipa > span { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }

/* piros, telt gomb a végleges műveletekhez */
.gomb.veszely-tele { background: var(--betelt); border-color: var(--betelt); color: #fff; }
.gomb.veszely-tele:hover { filter: brightness(1.08); background: var(--betelt); border-color: var(--betelt); }

.korlevel-urlap { display: flex; flex-direction: column; gap: 1rem; }
.korlevel-urlap .kinek { margin-top: 0; display: flex; flex-direction: column; gap: .5rem; }
.korlevel-urlap .urlap-lab { margin-top: 0; }

/* napló */
.naplo-valaszto { margin-bottom: 1rem; max-width: 360px; }
.naplo-lista { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.naplo-lista > li {
    display: grid;
    grid-template-columns: 7.5rem 12rem minmax(0, 1fr);
    gap: .2rem 1rem;
    padding: .45rem 0;
    border-top: 1px solid var(--vonal);
}
.naplo-lista > li:first-child { border-top: 0; }
.naplo-lista time { color: var(--halvany); font-variant-numeric: tabular-nums; white-space: nowrap; }
.naplo-ki { font-weight: 600; overflow-wrap: anywhere; }
.naplo-mit { overflow-wrap: anywhere; color: var(--szoveg-2); }

.veszely-szakasz { border-color: color-mix(in srgb, var(--betelt) 45%, var(--vonal)); }
.veszely-szakasz h2 { color: var(--betelt); }

@media (max-width: 900px) {
    .kezeles-racs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .naplo-lista > li { grid-template-columns: minmax(0, 1fr); }
    .naplo-lista time { font-size: .85rem; }
}

/* ==========================================================================
   Edzés beállításai (/edzes-beallitas) – új edzés is
   ========================================================================== */

/* szám, dátum, idő mezők ugyanúgy nézzenek ki, mint a többi */
input[type="number"], input[type="date"], input[type="time"] {
    font: inherit; width: 100%; min-height: 44px; padding: .5rem .75rem;
    color: var(--szoveg); background: var(--lap);
    border: 1px solid var(--vonal); border-radius: 8px;
}

/* bal: az űrlap, jobb: fix tagok, statisztika, törlés (mobilon egymás alatt) */
.beallitas-racs {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1.25rem 1.75rem;
    align-items: start;
}
.beallitas-racs > .beallitas-adatok:only-child { grid-column: 1 / -1; max-width: 760px; background:gray !important; }
/* az adatok doboz az edzés hangulatszínét kapja.
   Kép nélkül a --h-alap: a lapszínnél kicsit sötétebb szürke, hogy a (lapszínű) mezők kiváljanak belőle.
   Sötét módban ugyanez kicsit világosabb a lapnál. A 8%-ot nyugodtan állítsd. */
.beallitas-oldal { --h-alap: color-mix(in srgb, var(--szoveg) 8%, var(--lap)); }
.beallitas-adatok {
    background: var(--h-hatter);
    border-color: color-mix(in srgb, var(--h-eros) 35%, var(--vonal));
    box-shadow: 0 14px 36px rgba(15, 20, 25, .18), 0 3px 8px rgba(15, 20, 25, .10);
}
.beallitas-adatok > h2 { color: var(--h-eros); }
.beallitas-oldalso { display: flex; flex-direction: column; gap: 1.25rem; }
.beallitas-oldalso > .szakasz { margin: 0; }
@media (max-width: 900px) {
    .beallitas-racs { grid-template-columns: minmax(0, 1fr); }
}
.beallitas-urlap .csoport:first-of-type { margin-top: .5rem; }
.beallitas-urlap .mezo-racs { margin-top: .75rem; }
.beallitas-urlap .csoport > .pipa + .pipa { margin-top: .5rem; }
.beallitas-urlap .csoport > .pipa:first-of-type { margin-top: .75rem; }

/* választó sor (Minden héten / Egyszeri, Nyílt / Zárt) */
.valaszto-sor { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: .75rem; }

/* ami csak az egyik választásnál kell, a másiknál eltűnik (JavaScript nélkül is működik) */
.beallitas-urlap:has(#ism-egyszer:checked) .csak-heti,
.beallitas-urlap:has(#ism-heti:checked) .csak-egyszeri,
.beallitas-urlap:has(#lat-nyilt:checked) .csak-zart,
.beallitas-urlap:has(#lat-zart:checked) .csak-nyilt { display: none; }
.lathatosag-csoport > .mezo { margin-top: .75rem; max-width: 420px; }

.allapot-cimke {
    display: inline-block; margin-left: .5rem; padding: .05rem .5rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .03em;
    border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--halvany); color: var(--szoveg-2);
    vertical-align: middle;
}

/* tagkereső legördülő */
.tagkereso { position: relative; }
.tag-talalatok {
    position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin: .2rem 0 0; padding: .25rem 0;
    list-style: none; background: var(--lap); border: 1px solid var(--vonal); border-radius: 8px;
    box-shadow: 0 8px 24px rgb(0 0 0 / .14); max-height: 300px; overflow-y: auto;
}
.tag-talalatok > li { padding: .5rem .75rem; cursor: pointer; display: flex; gap: .5rem; align-items: baseline; }
.tag-talalatok > li span { color: var(--halvany); font-size: .9rem; }
.tag-talalatok > li:hover, .tag-talalatok > li[aria-selected="true"] { background: var(--sanc-halvany); color: #1f1205; }
.tag-talalatok > li.nincs { color: var(--halvany); cursor: default; background: none; }

/* fix tagok listája */
.fej-szam { color: var(--halvany); font-weight: 500; margin-left: .25rem; }
.fix-lista { list-style: none; margin: 0 0 1rem; padding: 0; }
.fix-lista > li {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem 0; border-top: 1px solid var(--vonal);
}
.fix-lista > li:first-child { border-top: 0; }
.fix-lista .fix-sorszam { min-width: 2rem; font-weight: 700; color: var(--szoveg-2); font-variant-numeric: tabular-nums; }
.fix-lista .fix-nev { flex: 1; min-width: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.fix-lista .fix-varo .fix-sorszam, .fix-lista .fix-varo .fix-nev { color: var(--halvany); }
.fix-lista .fix-gombok { display: flex; gap: .25rem; margin: 0; }
.fix-lista.kerelmek > li { flex-wrap: wrap; }
.ikon-gomb {
    width: 36px; height: 36px; display: inline-grid; place-items: center;
    font: inherit; font-size: .85rem; color: var(--szoveg-2); background: transparent;
    border: 1px solid var(--vonal); border-radius: 8px; cursor: pointer;
}
.ikon-gomb:hover:not(:disabled) { border-color: var(--szoveg-2); color: var(--szoveg); }
.ikon-gomb:disabled { opacity: .35; cursor: default; }
.ikon-gomb.veszely:hover { border-color: var(--betelt); color: var(--betelt); }
.fix-uj { display: flex; gap: .5rem; align-items: flex-end; margin-top: .5rem; }
.fix-uj .mezo { flex: 1; min-width: 0; }
.fix-uj .gomb { min-height: 44px; }

/* statisztika */
.stat-racs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0 0 1rem; }
.stat-racs > div { background: var(--papir); border-radius: 8px; padding: .6rem .75rem; }
.stat-racs dt { font-size: .85rem; color: var(--halvany); }
.stat-racs dd { margin: 0; font-family: var(--kijelzo); font-size: 1.8rem; line-height: 1.1; }
.alkalom-tortenet summary { cursor: pointer; font-weight: 600; }
.alkalom-tortenet ul { margin: .5rem 0 0; padding-left: 1.25rem; max-height: 320px; overflow-y: auto; font-size: .95rem; }

/* --- edzés beállításai: a borítókép doboza (a jobb hasáb tetején, a fix tagok fölött) --- */
.borito-szakasz { padding: .75rem; background: var(--h-hatter, var(--lap)); border-color: color-mix(in srgb, var(--h-eros, var(--sanc)) 35%, var(--vonal)); }
.borito-kep { position: relative; }
.borito-kep img {
    display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    height:200px;
    border-radius: 8px; background: var(--papir);
}
.borito-uj {   /* "Új kép" jelzés a kép sarkában, amíg nincs elmentve */
    position: absolute; left: .5rem; bottom: .5rem;
    padding: .15rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 700;
    background: var(--h-eros, var(--sanc)); color: var(--h-eros-szoveg, #1f1205);
}
.borito-uj[hidden] { display: none; }
.borito-gombok { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .75rem; }
.borito-valaszto { position: relative; cursor: pointer; }
.borito-valaszto input[type="file"] {   /* a fájlválasztó láthatatlan, a gomb felirata látszik */
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%;
}
.borito-valaszto:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sanc) 35%, transparent); }
.borito-szakasz .segito { margin: .5rem 0 0; font-size: .88rem; }
.borito-szakasz .uzenet-hiba, .borito-szakasz .uzenet-ok { margin: .75rem 0 0; }
.borito-szakasz.tolt img { opacity: .5; }

/* ==========================================================================
   Főoldal – három hasáb: faliújság | edzések | versenyek, tagok
   Asztalon (1200px fölött) három hasáb; közepes képernyőn felül az edzések,
   alatta a faliújság és a jobb hasáb egymás mellett; mobilon egymás alatt.
   ========================================================================== */
.oldal.szeles { max-width: 1440px; }   /* a főoldal szélesebb, hogy kiférjen a három hasáb */

.fooldal-fej { margin-bottom: 1.5rem; }
.fej-gombok { display: flex; gap: .6rem; flex-wrap: wrap; }

.fooldal-racs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kozep" "fali" "jobb";
    gap: 1.5rem;
    align-items: start;
}
.fo-kozep { grid-area: kozep; display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; container-type: inline-size; }
.fo-fali { grid-area: fali; min-width: 0; }
.fo-jobb { grid-area: jobb; display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
@media (min-width: 760px) {
    .fooldal-racs { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "kozep kozep" "fali jobb"; }
}
@media (min-width: 1200px) {
    .fooldal-racs {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, .9fr);   /* faliújság | edzések | jobb hasáb */
        grid-template-areas: "fali kozep jobb";
    }
}

/* a dobozok */
.fo-doboz {
    background: var(--lap);
    border: 1px solid var(--vonal);
    border-radius: var(--kerekites);
    padding: 1.1rem 1.15rem 1.25rem;
    scroll-margin-top: 84px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}
/* a főoldali szakaszok címei (Faliújság, Edzéseid, Versenyek, Napi bemutatkozó, Legújabb tagjaink…): itt közösen állíthatók */
    .fo-doboz > h2, .fo-doboz .szekcio-fej h2 {
        font-size: 1.5rem;
        text-shadow: 4px 3px 10px rgba(0,0,0,0.24);
        text-transform:uppercase;
    }
.fo-doboz .szekcio-fej a { font-weight: 600; font-size: .95rem; white-space: nowrap; }
.fo-doboz > .segito { margin: -.4rem 0 .9rem; }
.fo-doboz .nap-blokk { margin-bottom: 1.25rem; }
.fo-doboz .nap-blokk:last-child { margin-bottom: 0; }
.fo-doboz .nap-cim .nap-nev { font-size: 1.5rem; }

/* keskeny középső hasábban az edzéssorok a mobilos elrendezést kapják (konténer szerint) */
@container (max-width: 620px) {
    .edzes {
        grid-template-columns: 96px minmax(0, 1fr);
        grid-template-areas: "kep adatok" "kep letszam";
        padding: .85rem 1rem .85rem .85rem;
        gap: .2rem .85rem;
        align-items: start;
    }
    .edzes-kep { grid-area: kep; width: 96px; height: 54px; }
    .edzes-adatok { grid-area: adatok; }
    .letszam { grid-area: letszam; text-align: left; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; margin-top: .35rem; }
    .letszam-szoveg { margin-top: 0; white-space: nowrap; }
    .helyek-sav { margin-left: 0; width: 96px; }
    .edzes-ido { display: none; }
    .mobil-ido { display: inline; }
    .edzes-nev .mobil-ido { font-family: var(--kijelzo); font-weight: 400; font-size: 1.35rem; margin-right: .4rem; letter-spacing: .02em; }
}

/* --- fülek a "fedezz fel" dobozban --- */
.fo-fulek { display: flex; gap: .35rem; flex-wrap: wrap; margin: 0 0 1rem; }
.fo-fulek a {
    padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--vonal);
    color: var(--szoveg); text-decoration: none; font-weight: 600; font-size: .92rem;
}
.fo-fulek a:hover { border-color: var(--szoveg-2); }
.fo-fulek a[aria-current="true"] { background: var(--kiemelt-hatter); border-color: var(--kiemelt-hatter); color: var(--kiemelt-szoveg); }

/* --- edzéskártyák (felfedezés): kép felül, alatta az adatok, az edzés hangulatszínével --- */
.edzes-kartyak { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .9rem; }
.edzes-kartya {
    --hk-hatter: var(--hv-hatter, var(--papir));
    display: flex; flex-direction: column; height: 100%;
    border: 1px solid var(--vonal); border-radius: var(--kerekites); overflow: hidden;
    background: var(--hk-hatter); color: inherit; text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}
:root[data-theme="dark"] .edzes-kartya { --hk-hatter: var(--hs-hatter, var(--papir)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .edzes-kartya { --hk-hatter: var(--hs-hatter, var(--papir)); } }
.edzes-kartya:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgb(0 0 0 / .12); }
.edzes-kartya img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; }
.ek-test { display: flex; flex-direction: column; gap: .15rem; padding: .65rem .8rem .8rem; }
.ek-mikor { font-family: var(--kijelzo); font-size: 1.25rem; line-height: 1.05; letter-spacing: .02em; }
.ek-nev { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.ek-hely { color: var(--szoveg-2); font-size: .9rem; }
.ek-letszam { font-size: .9rem; color: var(--szabad); margin-top: .2rem; display: flex; flex-wrap: wrap; gap: .25rem .6rem; }
.ek-letszam.betelt { color: var(--betelt); font-weight: 600; }
.ek-uzenet { color: var(--halvany); }

/* --- faliújság --- */
.fali-iras { margin-bottom: 1.25rem; }
.fali-iras textarea { min-height: 4.5rem; }
.fali-iras .urlap-lab { margin-top: .6rem; justify-content: flex-end; }
.fali-opciok { margin-top: .5rem; }
.fali-opciok summary { cursor: pointer; color: var(--szoveg-2); font-size: .92rem; font-weight: 600; }
.fali-opciok .mezo { margin-top: .6rem; }

.fali-lista { list-style: none; margin: 0; padding: 0; }
.fali-uzenet { padding: 1rem 0; border-top: 1px solid var(--vonal); scroll-margin-top: 84px; }
.fali-uzenet:first-child { border-top: 0; padding-top: .25rem; }
.fali-fej { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.fali-fej .avatar { width: 64px; height: 64px; border-radius: 4px; }
.fali-fej .monogram-kicsi { font-size: .9rem; }

.fali-fej .plakett 
{
    width: 44px; 
    height: 44px; 
    right: -22px; 
    top : -8px; 
    padding: 1px; 

}
.fali-ki { display: flex; flex-direction: column; min-width: 0; }
.fali-nev { font-weight: 700; color: var(--szoveg); text-decoration: none; overflow-wrap: anywhere; }
a.fali-nev:hover { text-decoration: underline; }
.fali-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; color: var(--halvany); font-size: .85rem; }
.fali-szoveg { overflow-wrap: anywhere; line-height: 1.14; font-size: 1rem; }   /* a faliújság üzenetek szövege */
.fali-uzenet.csoportos { background: linear-gradient(90deg, color-mix(in srgb, var(--sanc) 6%, transparent), transparent 60%); }

/* üzenethez kapcsolt edzés: kis kártya az edzés hangulatszínével */
.fali-edzes {
    --hk-hatter: var(--hv-hatter, var(--papir));
    display: flex; gap: .7rem; align-items: center; margin-top: .65rem; padding: .45rem;
    border: 1px solid var(--vonal); border-radius: 8px; background: var(--hk-hatter);
    color: inherit; text-decoration: none; font-size: .92rem;
}

:root[data-theme="dark"] .fali-edzes { --hk-hatter: var(--hs-hatter, var(--papir)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .fali-edzes { --hk-hatter: var(--hs-hatter, var(--papir)); } }
.fali-edzes img { width: 96px; height: 54px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.fali-edzes > span { display: flex; flex-direction: column; min-width: 0; }
.fali-edzes > span > span { color: var(--szoveg-2); }
.fali-edzes > span > span b { color: var(--szabad); font-weight: 700; }
.fali-edzes:hover b:first-child { text-decoration: underline; }
.fali-edzes.mult { opacity: .6; }

.fali-lab { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .6rem; font-size: .9rem; }
.szavaz { display: flex; align-items: center; gap: .3rem; margin: 0; }
.szavaz-gomb {
    width: 34px; height: 34px; display: inline-grid; place-items: center;
    border: 1px solid var(--vonal); border-radius: 999px; background: transparent;
    color: var(--halvany); cursor: pointer;
}
.szavaz-gomb:hover { color: var(--szoveg); border-color: var(--szoveg-2); }
.szavaz-gomb.aktiv { color: #fff; background: var(--szabad); border-color: var(--szabad); }
.szavaz-gomb.nem.aktiv { background: var(--betelt); border-color: var(--betelt); }
.szavazat { min-width: 1.8rem; text-align: center; font-weight: 700; color: var(--szoveg-2); font-variant-numeric: tabular-nums; }
.fali-szerk summary { cursor: pointer; color: var(--szoveg-2); font-weight: 600; }
.fali-szerk[open] { flex-basis: 100%; order: 5; }
.fali-szerk form { margin-top: .5rem; }
.fali-szerk .urlap-lab { margin-top: .5rem; }
.fali-torles { margin: 0; }

/* --- versenyek --- */
.verseny-lista { list-style: none; margin: 0; padding: 0; }
.verseny-lista > li + li { border-top: 1px solid var(--vonal); }
.verseny-lista a { display: flex; gap: .85rem; padding: .7rem 0; color: inherit; text-decoration: none; }
.verseny-lista a:hover b { text-decoration: underline; }
.verseny-datum {
    flex: 0 0 52px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: 8px; background: var(--grafit); color: #fff; line-height: 1;
}
.vd-honap { font-size: .92rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sanc); font-weight: 700; }
.vd-nap { font-family: var(--kijelzo); font-size: 1.7rem; }
.verseny-adat { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.verseny-adat b { overflow-wrap: anywhere; }
.verseny-adat .halvany { color: var(--halvany); font-size: .88rem; }
.verseny-hir { font-size: .88rem; color: var(--szoveg-2); }
.verseny-adat .cimkek { margin-top: .2rem; }

/* --- a nap tagja --- */
.napi-tag h2 { margin-bottom: .75rem; }   /* a betűméret a közös szakaszcímből jön */
.napi-tag-kartya { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; color: inherit; text-decoration: none; }
.napi-tag-kartya img {
    width: 300px; height: 300px; object-fit: cover; border-radius: 50%;
    border: 4px solid var(--sanc); box-shadow: 0 4px 14px rgb(0 0 0 / .15); margin-bottom: .5rem;
}
.napi-tag-nev { font-family: var(--kijelzo); font-size: 1.8rem; line-height: 1; }
.napi-tag-kartya:hover .napi-tag-nev { color: var(--sanc-sotet); }
.napi-tag-szamok { display: flex; justify-content: center; gap: 1.25rem; margin: .9rem 0; text-align: center; }
.napi-tag-szamok div { display: flex; flex-direction: column-reverse; }
.napi-tag-szamok dt { font-size: .78rem; color: var(--halvany); }
.napi-tag-szamok dd { margin: 0; font-family: var(--kijelzo); font-size: 1.7rem; line-height: 1; }
.napi-tag-bemutat {
    margin: 0 0 1rem; padding: .7rem .9rem; border-left: 3px solid var(--sanc);
    background: var(--papir); border-radius: 0 8px 8px 0; font-size: .93rem; color: var(--szoveg-2); font-style: italic;
}
.napi-tag .gomb { width: 100%; }

/* --- legújabb tagok --- */
.uj-tagok { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem .5rem; }
.uj-tagok a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem; color: inherit; text-decoration: none; }
.uj-tagok .avatar { width: 74px; height: 74px; border-radius: 50%; border: 2px solid var(--vonal); }
.uj-tagok .monogram-kicsi { font-size: 1.1rem; }
.uj-tagok a:hover .avatar { border-color: var(--sanc); }
.ut-nev { font-weight: 600; font-size: .88rem; line-height: 1.2; overflow-wrap: anywhere; }
.ut-info { font-size: .78rem; color: var(--halvany); }
@media (max-width: 600px) {
    .fo-doboz { padding: .9rem .85rem 1rem; }
    .fo-doboz .edzes-lista { margin: 0 -.35rem; }
    .fej-gombok .gomb { flex: 1; }
}

/* --- faliújság: új üzenet szakasz, SANC narancs keretben --- */
.fali-iras {
    border: 2px solid var(--sanc);
    border-radius: var(--kerekites);
    padding: .85rem .95rem 1rem;
    background: color-mix(in srgb, var(--sanc) 4%, var(--lap));
    margin-bottom: 1.5rem;
}
.fali-uj-cim { font-size: 1rem; margin: 0 0 .5rem; color: var(--sanc-sotet); }
:root[data-theme="dark"] .fali-uj-cim { color: var(--sanc); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .fali-uj-cim { color: var(--sanc); } }

/* --- edzéshez kötött üzenet: az egész üzenet az edzés hangulatszínével (kép nélkül: halvány szürke) --- */
.fali-uzenet.edzeshez {
    --hk-hatter: var(--hv-hatter, var(--papir));
    --hk-eros: var(--hv-eros, var(--sanc));
    background: var(--hk-hatter);
    border: 1px solid color-mix(in srgb, var(--hk-eros) 30%, var(--vonal));
    border-radius: var(--kerekites);
    padding: .9rem .95rem;
    margin: .75rem 0;
}
:root[data-theme="dark"] .fali-uzenet.edzeshez { --hk-hatter: var(--hs-hatter, var(--papir)); --hk-eros: var(--hs-eros, var(--sanc)); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .fali-uzenet.edzeshez { --hk-hatter: var(--hs-hatter, var(--papir)); --hk-eros: var(--hs-eros, var(--sanc)); }
}
.fali-uzenet.edzeshez + .fali-uzenet { border-top: 0; }   /* a színes doboz után nem kell elválasztó vonal */
/* a kapcsolt edzés kis kártyája a színes dobozon belül világosabb, hogy kiváljon */
.fali-uzenet.edzeshez .fali-edzes {
    background: color-mix(in srgb, var(--lap) 75%, transparent);
    border-color: color-mix(in srgb, var(--hk-eros) 35%, var(--vonal));
}
.fali-uzenet.edzeshez .fali-edzes > span > b { color: var(--hk-eros); }

/* --- főoldal: idővonal a következő 7 napról (Edzéseid doboz teteje) ---
   Vízszintes vonal, rajta naponta egy kerek pötty: üres, ha nincs edzésed, az edzés színével teli, ha van.
   Keskeny dobozban (mobil) függőleges lesz. */
.idovonal {
    --iv-potty: 18px;
    list-style: none; margin: 0 0 1.25rem; padding: 0;
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    position: relative;
}
.idovonal::before {   /* a vonal a pöttyök közepén */
    content: ""; position: absolute; left: calc(100% / 14); right: calc(100% / 14);
    top: calc(2.6rem + var(--iv-potty) / 2 - 1px); height: 2px;
    background: var(--vonal);
}
.iv-nap {
    --hk-eros: var(--hv-eros, var(--sanc));
    position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0;
}
:root[data-theme="dark"] .iv-nap { --hk-eros: var(--hs-eros, var(--sanc)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .iv-nap { --hk-eros: var(--hs-eros, var(--sanc)); } }
.iv-fej { height: 2.6rem; display: flex; flex-direction: column; justify-content: flex-end; line-height: 1.15; }
.iv-napnev { font-weight: 700; font-size: .85rem; }
.iv-datum { font-size: .75rem; color: var(--halvany); }
.iv-nap.ma .iv-napnev { color: var(--sanc-sotet); }
.iv-potty {
    position: relative; z-index: 1;
    width: var(--iv-potty); height: var(--iv-potty); border-radius: 50%;
    background: var(--lap); border: 2px solid color-mix(in srgb, var(--szoveg-2) 45%, transparent);
    margin: 0 0 .4rem;
}
.iv-nap.van .iv-potty {   /* edzésnap: teli pötty az edzés színével */
    background: var(--hk-eros); border-color: var(--hk-eros);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--hk-eros) 22%, transparent);
}
.iv-edzesek { display: flex; flex-direction: column; gap: .3rem; width: 100%; padding: 0 .15rem; }
.iv-edzesek a { display: flex; flex-direction: column; color: inherit; text-decoration: none; font-size: .6rem; line-height: 1.2; }
.iv-edzesek a b { color: var(--hk-eros); font-size: .95rem; }
.iv-edzesek a span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.iv-edzesek a:hover span { text-decoration: underline; }
.iv-edzesek a.elmarad { opacity: .6; text-decoration: line-through; }

/* keskeny dobozban függőleges idővonal: balra a pöttyök, mellettük a nap és az edzések */
@container (max-width: 520px) {
    .idovonal { --iv-cimke: 7.2rem; grid-template-columns: minmax(0, 1fr); gap: .15rem; }   /* a nap neve + dátum oszlop szélessége */
    .idovonal::before { left: calc(var(--iv-cimke) + .7rem + var(--iv-potty) / 2 - 1px); right: auto; top: .6rem; bottom: .6rem; width: 2px; height: auto; }
    .iv-nap { display: grid; grid-template-columns: var(--iv-cimke) var(--iv-potty) minmax(0, 1fr); column-gap: .7rem; align-items: start; text-align: left; min-height: 1.9rem; }
    .iv-fej { height: auto; flex-direction: row; align-items: baseline; gap: .35rem; justify-content: flex-start; padding-top: .05rem; white-space: nowrap; }
    .iv-potty { margin: .1rem 0 0; }
    .iv-edzesek { padding: 0; }
    .iv-edzesek a { flex-direction: row; gap: .45rem; align-items: baseline; font-size: .9rem; }
    .iv-edzesek a span { -webkit-line-clamp: 1; }
}
.szavaz.tolt { opacity: .6; pointer-events: none; }

/* versenyek: a főkép a sor fölött, teljes szélességben */
.verseny-lista a { flex-wrap: wrap; }
.verseny-kep {
    flex-basis: 100%; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
    border-radius: 8px; background: var(--papir);
}

/* versenyek: a város a dátum mellett, kiemelve */
.verseny-varos {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--sanc-sotet);
}
:root[data-theme="dark"] .verseny-varos { color: var(--sanc); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .verseny-varos { color: var(--sanc); } }

/* tagkereső legördülő: avatar + név + város */
.tag-talalatok > li { align-items: center; gap: .65rem; padding: .4rem .75rem; }
.tt-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--papir); }
.tt-monogram {
    display: inline-grid; place-items: center; border: 1px solid var(--vonal);
    color: var(--szoveg-2); font-size: .85rem; font-weight: 700;
}
.tag-talalatok > li .tt-szoveg { display: flex; flex-direction: column; min-width: 0; color: inherit; font-size: inherit; line-height: 1.25; }
.tag-talalatok > li .tt-szoveg b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-talalatok > li .tt-szoveg span { color: var(--halvany); font-size: .85rem; }
.tag-talalatok > li[aria-selected="true"] .tt-szoveg span, .tag-talalatok > li:hover .tt-szoveg span { color: #5b4a3a; }

/* főoldal "fedezz fel" doboz: magától lapoz (site.js). Lent egy vékony csík mutatja, mikor jön a következő lap. */
.fo-lap:not([hidden]) { animation: lap-be .35s ease; }
@keyframes lap-be { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.lapozo-csik { height: 3px; margin-top: 1rem; border-radius: 2px; background: var(--vonal); overflow: hidden; }
.lapozo-csik span { display: block; height: 100%; width: 0; background: var(--sanc); transition: width .1s linear; }
.lapozo-kezi .lapozo-csik { display: none; }   /* ha valaki maga választott fület, vagy nincs JavaScript-es lapozás */
html:not(.js) .lapozo-csik { display: none; }

/* ==========================================================================
   Edzés oldal: létszám egy sorban, kisebb pöttyök, névsor nézetváltó    box-shadow: 0 14px 36px rgba(15, 20, 25, .1), 0 3px 8px rgba(15, 20, 25, .10);
    background:var(--sotet);
   ========================================================================== */
.letszam-sor { margin: 0 0 .6rem; }   /* "8 / 12 hely foglalt · 4 szabad hely" – sima szöveg */

/* kisebb foglaltsági pöttyök a pályán */
.palya { padding: 8px 10px; gap: 8px; }
.terfel { grid-template-columns: repeat(var(--oszlop), minmax(0, 14px)); gap: 4px; }
.palya i { border-width: 1.5px; }

.resztvevok {
    /*box-shadow: 0 14px 36px rgba(15, 20, 25, .1), 0 3px 8px rgba(15, 20, 25, .10);*/
    background: transparent;
    border:none !important;
}
    /* a Résztvevők cím és mellette a nézetváltó */
    .resztvevok-fej {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem 1rem;
        flex-wrap: wrap;
        margin-bottom: .75rem;
    }

        .resztvevok-fej h2 {
            margin: 0;
        }

    .nezet-valto {
        display: inline-flex;
        border: 1px solid var(--vonal);
        border-radius: 999px;
        padding: 2px;
        background: var(--lap);
    }

        .nezet-valto button {
            font: inherit;
            font-size: .88rem;
            font-weight: 600;
            cursor: pointer;
            padding: .3rem .8rem;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: var(--szoveg-2);
        }

            .nezet-valto button[aria-pressed="true"] {
                background: var(--kiemelt-hatter);
                color: var(--kiemelt-szoveg);
            }

    html:not(.js) .nezet-valto {
        display: none;
    }
    /* a nézetváltó alatt a kisebb "Mind / Ott lesz" kapcsoló */
    .nevsor-kapcsolok { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
    .nezet-valto.kicsi button { font-size: .76rem; padding: .18rem .65rem; }
    /* "Ott lesz": a lemondottak elrejtése a névsorból (a várólista marad) */
    .resztvevok.csak-bent ol.nevsor > li.lemondott { display: none; }
    /* LISTA nézet (alap): csak sorszám – név – státusz, egy sorban, kép, dátumok és kuka nélkül */
    .nevsor-lista .nevsor {
        gap: .3rem;
    }

        .nevsor-lista .nevsor > li {
            align-items: center;
            padding: .25rem .6rem .25rem .2rem;
            min-height: 0;
        }

    .nevsor-lista ol.nevsor > li::before {
        font-size: 1.5rem;
        flex-basis: 2rem;
        padding-top: 0;
    }

    .nevsor-lista .avatar-keret,
    .nevsor-lista .nev-info,
    .nevsor-lista .sor-muvelet {
        display: none;
    }

    .nevsor-lista .nev-blokk {
        gap: 0;
    }

        .nevsor-lista .nev-blokk .nev {
            font-size: 1rem;
        }

    .nevsor-lista .kartya-jobb {
        flex-direction: row;
        align-items: center;
        max-width: none;
    }

        .nevsor-lista .kartya-jobb .allapot {
            white-space: nowrap;
        }

    .nevsor-lista .varolista > li::before {
        font-size: 1rem !important;
    }
    /* --- faliújság: összecsukható "Új üzenet írása" és lapozás --- */
    details.fali-iras > summary {
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;
    }

        details.fali-iras > summary::-webkit-details-marker {
            display: none;
        }

        details.fali-iras > summary::after {
            content: "+";
            font-size: 1.4rem;
            line-height: 1;
        }

    details.fali-iras[open] > summary {
        margin-bottom: .6rem;
    }

        details.fali-iras[open] > summary::after {
            content: "–";
        }

    details.fali-iras:not([open]) {
        padding-top: .6rem;
        padding-bottom: .6rem;
    }

    .fali-lapozo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        margin-top: 1rem;
    }

        .fali-lapozo[hidden] {
            display: none;
        }

        .fali-lapozo button:disabled {
            opacity: .4;
            cursor: default;
        }

    .fali-lapszam {
        color: var(--halvany);
        font-size: .9rem;
        font-variant-numeric: tabular-nums;
    }

    .fali-csik {
        margin-top: .6rem;
    }

        .fali-csik[hidden] {
            display: none;
        }

    .fali-uzenet[hidden] {
        display: none;
    }
    /* ==========================================================================
   Tag profil (/tag/123)
   ========================================================================== */
    .tag-fej {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 1.5rem 2rem;
        align-items: center;
        background: var(--lap);
        border: 1px solid var(--vonal);
        border-radius: var(--kerekites);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    /* --tag-szin: a profilkép átlagszíne (Pages/Tag.cshtml, a .tag-oldal-on). A --tag-alap ennek sötétebb árnyalata;
       ezt keverjük a lap színébe, így világos és sötét módban is olvasható marad a szöveg. */
    .tag-oldal[style*="--tag-szin"] {
        --tag-alap: color-mix(in srgb, var(--tag-szin) 50%, #000);   /* sötétítés: kisebb % = sötétebb */
    }
    .tag-oldal[style*="--tag-szin"] .tag-fej {
        background: linear-gradient(90deg, color-mix(in srgb, var(--tag-alap) 36%, var(--lap)), color-mix(in srgb, var(--tag-alap) 18%, var(--lap)));
        border-color: color-mix(in srgb, var(--tag-alap) 45%, var(--lap));
    }
    /* a többi szakasz (Közelgő edzések, Játszótársak, Értékelése, Számokban…): egyszínű, halványabb */
    .tag-oldal[style*="--tag-szin"] .szakasz {
        background: color-mix(in srgb, var(--tag-alap) 16%, var(--lap));
        border-color: color-mix(in srgb, var(--tag-alap) 35%, var(--lap));
    }

    .tag-kep-keret {
        position: relative;
        line-height: 0;
    }

    .tag-kep {
        width: 320px;
        height: 320px;
        object-fit: cover;
        border-radius: 16px; /* a profilkép mérete */
        border: 4px solid var(--sanc);
        box-shadow: 0 6px 20px rgb(0 0 0 / .15);
        background: var(--papir);
    }

    .tag-monogram {
        display: grid;
        place-items: center;
        font-family: var(--kijelzo);
        font-size: 5rem;
        color: var(--szoveg-2);
        line-height: 1;
    }

    .tag-plakett {
        width: 156px;
        height: 156px;
        right: -60px;
        top: -14px;
    }

    .tag-fej h1 {
        margin: 0;
    }

    .tag-becenev {
        margin: .25rem 0 0;
        color: var(--szoveg-2);
        font-style: italic;
    }

    .tag-hol {
        display: flex;
        flex-wrap: wrap;
        gap: .25rem 1.25rem;
        margin: .6rem 0 0;
        color: var(--szoveg-2);
    }

        .tag-hol span {
            display: inline-flex;
            align-items: center;
            gap: .3rem;
        }

    .tag-cimkek {
        margin-top: .9rem;
    }

        .tag-cimkek .cimke {
            font-size: .88rem;
            padding: .2rem .7rem;
        }

    .cimke.tag-csapat {
        background: var(--sanc);
        border-color: var(--sanc);
        color: #1f1205;
    }

    .cimke.tag-tamogato {
        background: var(--sanc-halvany);
        border-color: transparent;
        color: var(--sanc-sotet);
    }

    .tag-fej-gombok {
        display: flex;
        flex-wrap: wrap;
        gap: .6rem;
        margin-top: 1.1rem;
    }

        .tag-fej-gombok:empty {
            display: none;
        }

    .tag-racs {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
        gap: 1.5rem;
        align-items: start;
    }

    .tag-fo, .tag-oldalso {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        min-width: 0;
    }

        .tag-fo > .szakasz, .tag-oldalso > .szakasz {
            margin: 0;
        }

    .tag-kozelgo {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .tag-kozelgo li + li {
            border-top: 1px solid var(--vonal);
        }

        .tag-kozelgo a {
            display: grid;
            grid-template-columns: 11rem minmax(0, 1fr);
            gap: .1rem 1rem;
            padding: .55rem 0;
            color: inherit;
            text-decoration: none;
        }

        .tag-kozelgo time {
            font-family: var(--kijelzo);
            font-size: 1.2rem;
            grid-row: span 2;
            color: var(--sanc-sotet);
        }

        .tag-kozelgo a:hover b {
            text-decoration: underline;
        }

        .tag-kozelgo .halvany {
            color: var(--halvany);
            font-size: .9rem;
        }
    /* akikkel együtt játszott: kis névjegyek; aki az átlagnál többször, narancs számmal */
    .tarsak {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: .6rem;
    }

        .tarsak a {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            grid-template-rows: auto auto;
            column-gap: .6rem;
            align-items: center;
            padding: .45rem;
            border: 1px solid var(--vonal);
            border-radius: 10px;
            color: inherit;
            text-decoration: none;
            background: var(--papir);
        }

            .tarsak a:hover {
                border-color: var(--sanc);
            }

        .tarsak .avatar-keret {
            grid-row: span 2;
            margin-right: 0;
        }

        .tarsak .avatar {
            width: 68px;
            height: 68px;
            border-radius: 8px;
            border: 1px solid #888888;
        }

        .tarsak .monogram-kicsi {
            font-size: .95rem;
        }

        .tarsak .plakett {
            width: 40px;
            height: 40px;
            right: -6px;
            bottom: -6px;
            padding: 1px;
        }

    .tars-nev {
        font-weight: 400;
        font-size: .96rem;
        line-height: 1.0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tars-db {
        font-size: .8rem;
        color: var(--halvany);
    }

    .tarsak .gyakori .tars-db {
        color: var(--sanc-sotet);
        font-weight: 700;
    }

    .tag-adatok {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: .35rem 1rem;
        margin: 0;
    }

        .tag-adatok dt {
            color: var(--halvany);
            font-size: .9rem;
        }

        .tag-adatok dd {
            margin: 0;
            overflow-wrap: anywhere;
        }

    .tag-oldalso .stat-racs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .tag-oldalso .stat-racs + .tag-adatok {
            margin-top: .5rem;
        }
    /* szintértékelés: öt lépcső, az átlag szerinti kiemelve */
    .szint-skala {
        list-style: none;
        margin: 0 0 .4rem;
        padding: 0;
        display: flex;
        gap: 4px;
    }

        .szint-skala li {
            flex: 1;
            height: 10px;
            border-radius: 5px;
            background: var(--vonal);
        }

            .szint-skala li.be {
                background: color-mix(in srgb, var(--sanc) 55%, var(--vonal));
            }

            .szint-skala li.aktiv {
                background: var(--sanc);
            }

    .szint-nev {
        margin: 0 0 .9rem;
    }

    .ertekel-urlap {
        display: flex;
        flex-direction: column;
        gap: .35rem;
    }

        .ertekel-urlap label {
            font-weight: 600;
            font-size: .92rem;
        }

    @media (max-width: 900px) {
        .tag-racs {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    @media (max-width: 600px) {
        .tag-fej {
            grid-template-columns: minmax(0, 1fr);
            justify-items: center;
            text-align: center;
            padding: 1.25rem 1rem;
        }

        .tag-kep {
            width: 180px;
            height: 180px;
        }

        .tag-hol, .tag-cimkek, .tag-fej-gombok {
            justify-content: center;
        }

        .tag-kozelgo a {
            grid-template-columns: minmax(0, 1fr);
        }

        .tag-kozelgo time {
            grid-row: auto;
        }
    }
    /* tag profil – "Hová készül": edzéskártya-sorok (időpont | kép | adatok), az edzés hangulatszínével */
    .tag-kozelgo {
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

        .tag-kozelgo li + li {
            border-top: 0;
        }

        .tag-kozelgo a {
            --hk-hatter: var(--hv-hatter, var(--papir));
            --hk-eros: var(--hv-eros, var(--sanc));
            display: grid;
            grid-template-columns: 6.5rem 112px minmax(0, 1fr);
            gap: .25rem .9rem;
            align-items: center;
            padding: .55rem .7rem;
            border: 1px solid color-mix(in srgb, var(--hk-eros) 25%, var(--vonal));
            border-radius: 10px;
            background: var(--hk-hatter);
        }

    :root[data-theme="dark"] .tag-kozelgo a {
        --hk-hatter: var(--hs-hatter, var(--papir));
        --hk-eros: var(--hs-eros, var(--sanc));
    }

    @media (prefers-color-scheme: dark) {
        :root:not([data-theme]) .tag-kozelgo a {
            --hk-hatter: var(--hs-hatter, var(--papir));
            --hk-eros: var(--hs-eros, var(--sanc));
        }
    }

    .tag-kozelgo a:hover {
        border-color: var(--hk-eros);
    }

    .tag-kozelgo time {
        grid-row: auto;
        display: flex;
        flex-direction: column;
        line-height: 1.05;
        color: var(--hk-eros);
        font-family: inherit;
        font-size: inherit;
    }

    .tk-nap {
        font-weight: 700;
        font-size: .9rem;
    }

    .tk-ido {
        font-family: var(--kijelzo);
        font-size: 1.6rem;
    }

    .tag-kozelgo img {
        width: 112px;
        height: 63px;
        object-fit: cover;
        border-radius: 6px;
    }

    .tk-adat {
        display: flex;
        flex-direction: column;
        min-width: 0;
        gap: .1rem;
    }

        .tk-adat > b {
            overflow-wrap: anywhere;
        }

    .tk-letszam {
        font-size: .88rem;
        color: var(--szabad);
    }

        .tk-letszam.betelt {
            color: var(--betelt);
            font-weight: 600;
        }

    @media (max-width: 600px) {
        .tag-kozelgo a {
            grid-template-columns: 84px minmax(0, 1fr);
        }

        .tag-kozelgo time {
            grid-column: 1 / -1;
            flex-direction: row;
            gap: .5rem;
            align-items: baseline;
        }

        .tag-kozelgo img {
            width: 84px;
            height: 47px;
        }
    }
    /* tag profil: a bemutatkozás a fejlécben, a név jobb oldalán (keskenyebb képernyőn alatta) */
    .tag-fej {
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr);
        align-items: start;
    }

    .tag-bemutat {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        gap: .3rem;
        padding-left: 1.5rem;
        border-left: 1px solid var(--vonal);
    }

    .tag-bemutat-cim {
        font-size: .85rem;
        font-weight: 700;
        color: var(--halvany);
    }

    .tag-bemutat-szoveg {
        margin: 0;
        font-style: italic;
        color: var(--szoveg-2);
        line-height: 1.45;
        overflow-wrap: anywhere;
        max-height: 17.5em;
        overflow: hidden; /* kb. 6–7 sor; ami ezen túl van, a "több" gombbal látszik */
    }

        .tag-bemutat-szoveg.nyitva {
            max-height: none;
        }

        .tag-bemutat-szoveg.ures-szoveg {
            color: var(--halvany);
        }

    .tobb-gomb {
        align-self: flex-start;
        font-size: .9rem;
    }

        .tobb-gomb[hidden] {
            display: none;
        }

    @media (max-width: 1100px) {
        .tag-fej {
            grid-template-columns: auto minmax(0, 1fr);
        }

        .tag-bemutat {
            grid-column: 1 / -1;
            padding-left: 0;
            border-left: 0;
            padding-top: 1rem;
            border-top: 1px solid var(--vonal);
        }
    }

    @media (max-width: 600px) {
        .tag-fej {
            grid-template-columns: minmax(0, 1fr);
        }

        .tag-bemutat {
            text-align: left;
        }
    }
    /* edzés oldal: tetszik / nem tetszik a hozzászólásoknál (a gombok stílusa a faliújságéval közös: .szavaz-gomb) */
    .hozzaszolas-szavazat {
        margin-top: .4rem;
    }

        .hozzaszolas-szavazat .szavaz-gomb {
            width: 30px;
            height: 30px;
        }

        .hozzaszolas-szavazat .szavazat {
            font-size: .9rem;
        }
    /* ==========================================================================
   Tagjaink (/tagok): szűrők balra (mint az edzéslistán), jobbra a tagok kártyái
   ========================================================================== */
    .tag-szerep-szuro {
        margin-top: 0;
        display: flex;
        flex-direction: column;
        gap: .45rem;
    }

    .tag-kartyak {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: .8rem;
    }

    .tag-kartya {
        display: flex;
        gap: .85rem;
        align-items: flex-start;
        height: 100%;
        padding: .8rem;
        background: var(--lap);
        border: 1px solid var(--vonal);
        border-radius: var(--kerekites);
        color: inherit;
        text-decoration: none;
    }

        .tag-kartya:hover {
            border-color: var(--sanc);
        }

            .tag-kartya:hover .tk-nev {
                text-decoration: underline;
            }

        .tag-kartya .avatar {
            width: 122px;
            height: 122px;
            border-radius: 10px;
        }
        /* a kártyák képe */
        .tag-kartya .monogram-kicsi {
            font-size: 1.3rem;
        }

        /* Tagjaink: a támogatói plakett az avatar sarkán */
        .tag-kartya .plakett {
            width: 59px;
            height: 59px;
            right: -27px;
            top: -12px;
            padding: 1px;
        }

    .tk-szoveg {
        display: flex;
        flex-direction: column;
        gap: .2rem;
        min-width: 0;
    }

    .tk-nev {
        font-weight: 700;
        font-size: 1.05rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .tk-info {
        display: flex;
        flex-wrap: wrap;
        gap: .1rem .6rem;
        color: var(--halvany);
        font-size: .85rem;
    }

    .tag-kartya .cimkek {
        margin-top: .2rem;
    }

    .tag-kartya .cimke {
        font-size: .75rem;
    }

    .tk-bemutat {
        font-size: .85rem;
        font-style: italic;
        color: var(--szoveg-2);
        margin-top: .2rem;
        line-height: 1.35;
    }

    .lapozo-sor {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-top: 1.5rem;
    }
    /* ==========================================================================
   Szervezői vezérlőpult (/szervezoknek)
   ========================================================================== */
    .pult-admin {
        margin: -.5rem 0 1rem;
        font-size: .92rem;
    }

    .pult-teendok {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem 1.5rem;
        margin: 0 0 1.25rem;
        padding: .75rem 1rem;
        border-radius: var(--kerekites);
        border: 1px solid color-mix(in srgb, var(--sanc) 45%, var(--vonal));
        background: var(--sanc-halvany);
        color: #1f1205;
    }

    .pult-racs {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.15fr);
        gap: 1.5rem;
        align-items: start;
    }

    .pult-oldalso {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

        .pult-oldalso > .szakasz, .pult-racs > .szakasz {
            margin: 0;
        }

    @media (max-width: 900px) {
        .pult-racs {
            grid-template-columns: minmax(0, 1fr);
        }
    }
    /* egy edzés sora: kép | adatok | gombok, az edzés hangulatszínével */
    .pult-lista {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: .6rem;
    }

    .pult-edzes {
        --hk-hatter: var(--hv-hatter, var(--papir));
        --hk-eros: var(--hv-eros, var(--sanc));
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr) auto;
        gap: .5rem 1rem;
        align-items: center;
        padding: .7rem;
        border-radius: 10px;
        background: var(--hk-hatter);
        border: 1px solid color-mix(in srgb, var(--hk-eros) 25%, var(--vonal));
    }

    :root[data-theme="dark"] .pult-edzes {
        --hk-hatter: var(--hs-hatter, var(--papir));
        --hk-eros: var(--hs-eros, var(--sanc));
    }

    @media (prefers-color-scheme: dark) {
        :root:not([data-theme]) .pult-edzes {
            --hk-hatter: var(--hs-hatter, var(--papir));
            --hk-eros: var(--hs-eros, var(--sanc));
        }
    }

    .pult-edzes > img {
        width: 112px;
        height: 63px;
        object-fit: cover;
        border-radius: 6px;
    }

    .pe-adat {
        display: flex;
        flex-direction: column;
        gap: .2rem;
        min-width: 0;
    }

    .pe-fej {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .3rem .6rem;
    }

    .pe-nev {
        font-weight: 700;
        font-size: 1.05rem;
        color: var(--hk-eros);
        text-decoration: none;
        overflow-wrap: anywhere;
    }

        .pe-nev:hover {
            text-decoration: underline;
        }

    .pe-info {
        display: flex;
        flex-wrap: wrap;
        gap: .1rem .8rem;
        font-size: .88rem;
        color: var(--szoveg-2);
    }

    .pe-szamok {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .2rem .9rem;
        font-size: .88rem;
    }

    .pe-kov {
        color: inherit;
        text-decoration: none;
    }

        .pe-kov:hover b {
            text-decoration: underline;
        }

    .cimke.kerelem {
        background: var(--sanc);
        border-color: var(--sanc);
        color: #1f1205;
        text-decoration: none;
    }

    .pe-gombok {
        display: flex;
        flex-direction: column;
        gap: .35rem;
    }

    .pult-inaktiv {
        margin-top: 1rem;
    }

        .pult-inaktiv summary {
            cursor: pointer;
            font-weight: 600;
            color: var(--szoveg-2);
            margin-bottom: .6rem;
        }

        .pult-inaktiv .pult-edzes {
            opacity: .75;
        }

    @media (max-width: 700px) {
        .pult-edzes {
            grid-template-columns: 84px minmax(0, 1fr);
        }

            .pult-edzes > img {
                width: 84px;
                height: 47px;
                align-self: start;
            }

        .pe-gombok {
            grid-column: 1 / -1;
            flex-direction: row;
            flex-wrap: wrap;
        }
    }
    /* csoportok, versenyek listája */
    .pult-csoportok {
        list-style: none;
        margin: 0 0 .75rem;
        padding: 0;
    }

        .pult-csoportok li + li {
            border-top: 1px solid var(--vonal);
        }

        .pult-csoportok a {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: .2rem .5rem;
            padding: .55rem 0;
            color: inherit;
            text-decoration: none;
        }

            .pult-csoportok a:hover b {
                text-decoration: underline;
            }

        .pult-csoportok .halvany {
            flex-basis: 100%;
            color: var(--halvany);
            font-size: .85rem;
        }

    .cimke.tilto {
        background: color-mix(in srgb, var(--betelt) 12%, var(--lap));
        color: var(--betelt);
        border-color: transparent;
    }
    /* ==========================================================================
   Csoportok (/csoportok): felül a csoportjaid és az új csoport, alatta a kiválasztott csoport
   ========================================================================== */
    .csop-elrendezes {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(300px, 2fr);
        gap: 1.25rem;
        align-items: start;
    }
    /* bal: kártyák 3/4, jobb: részletek 1/4 */
    .csop-bal {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
        align-items: start;
    }
        /* egymás alatt: Csoportjaid, alatta az új csoport */
        .csop-bal > .szakasz, .csop-jobb .szakasz {
            margin: 0;
        }

    .csop-reszlet {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    #uj summary {
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        #uj summary::-webkit-details-marker {
            display: none;
        }

        #uj summary::after {
            content: "+";
            font-size: 1.4rem;
            color: var(--halvany);
        }

    #uj details[open] summary::after {
        content: "–";
    }

    #uj summary h2 {
        margin: 0;
    }

    .csop-uj-urlap {
        display: flex;
        flex-direction: column;
        gap: .75rem;
        margin-top: .9rem;
    }

        .csop-uj-urlap .csoport {
            margin-top: 0;
            padding-top: .5rem;
            display: flex;
            flex-direction: column;
            gap: .45rem;
        }
    /* a csoportjaid: választható "chipek" */
    .csop-chipek {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: .6rem;
    }

        .csop-chipek a {
            display: flex;
            flex-direction: column;
            height: 100%;
            box-sizing: border-box;
            padding: .6rem .85rem;
            border: 1px solid var(--vonal);
            border-radius: 10px;
            color: inherit;
            text-decoration: none;
            background: var(--papir);
            line-height: 1.25;
        }

            .csop-chipek a span {
                font-size: .8rem;
                color: var(--halvany);
            }

            .csop-chipek a.tilto {
                border-color: color-mix(in srgb, var(--betelt) 40%, var(--vonal));
            }

            .csop-chipek a:hover {
                border-color: var(--sanc);
            }

            .csop-chipek a[aria-current="true"] {
                background: var(--kiemelt-hatter);
                border-color: var(--kiemelt-hatter);
                color: var(--kiemelt-szoveg);
            }

                .csop-chipek a[aria-current="true"] span {
                    color: inherit;
                    opacity: .8;
                }
    /* a kiválasztott csoport */
    .csop-fej {
        margin-bottom: 1.25rem;
    }

    .csop-fej-sor {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .4rem .75rem;
    }

        .csop-fej-sor h2 {
            margin: 0;
            font-size: 1.35rem;
        }

    .csop-fej .halvany {
        color: var(--halvany);
        margin: .4rem 0 0;
    }

    .csop-atnevez {
        margin-top: .75rem;
    }

        .csop-atnevez summary {
            cursor: pointer;
            font-weight: 600;
            color: var(--szoveg-2);
        }

    .sor-urlap {
        display: flex;
        gap: .5rem;
        margin-top: .5rem;
        max-width: 460px;
    }

        .sor-urlap input {
            flex: 1;
        }

    .csop-racs {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
        align-items: start;
    }
        /* a keskeny jobb hasábban egymás alatt */
        .csop-racs > .szakasz, .csop-oldalso > .szakasz {
            margin: 0;
        }

    .csop-oldalso {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .csop-tag-fel {
        margin-bottom: 1rem;
        max-width: 520px;
    }
    /* tagok: két hasábban, kép + név + (admin) város */
    .csop-tagok {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: .4rem .9rem;
    }

        .csop-tagok > li {
            padding: .3rem 0;
            border-bottom: 1px solid var(--vonal);
        }

    .csop-tag {
        display: flex;
        align-items: center;
        gap: .6rem;
        min-width: 0;
    }

        .csop-tag .avatar {
            width: 44px;
            height: 44px;
            border-radius: 8px;
        }

        .csop-tag .monogram-kicsi {
            font-size: .9rem;
        }

    .csop-tag-szoveg {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.25;
    }

        .csop-tag-szoveg a {
            color: inherit;
            font-weight: 600;
            text-decoration: none;
            overflow-wrap: anywhere;
        }

            .csop-tag-szoveg a:hover {
                text-decoration: underline;
            }

        .csop-tag-szoveg .halvany {
            font-size: .8rem;
            color: var(--halvany);
        }

    .csop-tagok.valaszthato .pipa {
        align-items: center;
    }

    .csop-tag-muveletek {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem;
        margin-top: 1rem;
        padding-top: .75rem;
        border-top: 1px solid var(--vonal);
    }

    .csop-valassz {
        text-align: center;
        padding: 1rem;
    }

    @media (max-width: 900px) {
        .csop-elrendezes {
            grid-template-columns: minmax(0, 1fr);
        }
    }
    /* csoport adminjai: SANC narancs háttér */
    .csop-tagok > li.admin {
        background: var(--sanc);
        border-bottom-color: transparent;
        border-radius: 8px;
        padding: .3rem .5rem;
        color: #1f1205;
    }

        .csop-tagok > li.admin .csop-tag-szoveg a,
        .csop-tagok > li.admin .csop-tag-szoveg .halvany {
            color: #1f1205;
        }

        .csop-tagok > li.admin .pipa input {
            accent-color: var(--grafit);
        }
    /* csoportkártya: van-e aktív edzése (zöld) vagy nincs (szürke) */
    .csop-chipek a .csop-edzes-jel {
        align-self: flex-start;
        margin-top: .3rem;
        padding: .05rem .5rem;
        border-radius: 999px;
        font-size: .72rem;
        font-weight: 700;
        color: var(--szoveg-2);
        background: var(--vonal);
    }

        .csop-chipek a .csop-edzes-jel.aktiv {
            background: var(--szabad);
            color: #fff;
        }

    .csop-chipek a[aria-current="true"] .csop-edzes-jel {
        opacity: 1;
        color: var(--szoveg-2);
    }

        .csop-chipek a[aria-current="true"] .csop-edzes-jel.aktiv {
            color: #fff;
        }
    /* tiltó csoport neve: vörös (csoportkártyák, a csoport címe, a vezérlőpult listája) */
    .csop-tilto-nev, .csop-chipek a.tilto b {
        color: var(--betelt);
    }

    .csop-chipek a.tilto[aria-current="true"] b {
        color: #ff8a80;
    }
    /* sötét (kiválasztott) háttéren világosabb vörös */
    /* vezérlőpult: csoportok egysoros listája – név balra, a jelzés jobbra */
    .pult-csoportok.egysoros a {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: .75rem;
    }

    .pult-csoportok.egysoros b {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pult-csoportok .csop-edzes-jel {
        flex-shrink: 0;
        padding: .05rem .5rem;
        border-radius: 999px;
        font-size: .72rem;
        font-weight: 700;
        color: var(--szoveg-2);
        background: var(--vonal);
        white-space: nowrap;
    }

        .pult-csoportok .csop-edzes-jel.aktiv {
            background: var(--szabad);
            color: #fff;
        }
    /* Edzés beállításai – "Melyik csoport?" címke, mellette jobbra az "Új csoport létrehozása" link */
    .mezo-fej {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: .5rem;
        flex-wrap: wrap;
    }

        .mezo-fej a {
            font-size: .85rem;
            font-weight: 600;
        }
    /* az épp létrehozott csoport kártyája egyszer felvillan */
    .csop-chipek a.uj-csoport {
        animation: csop-uj 1.6s ease-out 1;
    }

    @keyframes csop-uj {
        0%, 30% {
            box-shadow: 0 0 0 4px var(--sanc);
        }

        100% {
            box-shadow: 0 0 0 0 transparent;
        }
    }
    /* ==========================================================================
   Csoportok – a kiválasztott csoport egyetlen panelben, erős árnyékkal
   ========================================================================== */
    .csop-panel {
        gap: 0;
        background: var(--lap);
        border: 1px solid var(--vonal);
        border-radius: var(--kerekites);
        overflow: hidden;
        box-shadow: 0 14px 36px rgba(15, 20, 25, .18), 0 3px 8px rgba(15, 20, 25, .10); /* a panel árnyéka */
    }
        /* a panelen belüli szakaszok nem külön dobozok, csak vonallal elválasztva */
        .csop-panel .szakasz, .csop-panel .csop-racs, .csop-panel .csop-oldalso {
            gap: 0;
        }

        .csop-panel .szakasz {
            border: 0;
            border-radius: 0;
            background: none;
            margin: 0;
            padding: 1.2rem 1.4rem;
        }

        .csop-panel .csop-racs > .szakasz, .csop-panel .csop-oldalso > .szakasz {
            border-top: 1px solid var(--vonal);
        }

        .csop-panel .veszely-szakasz {
            background: color-mix(in srgb, var(--betelt) 5%, var(--lap));
        }
        /* a fejléc: sötét sáv (tiltó csoportnál vörös), nagy névvel és adatokkal */
        .csop-panel .csop-fej {
            background: var(--kiemelt-hatter);
            color: var(--kiemelt-szoveg);
            padding: 1.4rem 1.4rem 1.2rem;
        }

        .csop-panel.tilto .csop-fej {
            background: var(--betelt);
            color: #fff;
        }

        .csop-panel .csop-fej h2 {
            margin: .45rem 0 .9rem;
            font-size: 1.7rem;
            line-height: 1.15;
            color: inherit;
            overflow-wrap: anywhere;
        }

    .csop-tipus {
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        opacity: .75;
    }

    .csop-adatok {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin: 0;
    }

        .csop-adatok > div {
            padding: .4rem .7rem;
            border-radius: 8px;
            background: rgba(255, 255, 255, .12);
            min-width: 4.5rem;
        }

        .csop-adatok dt {
            font-size: .7rem;
            text-transform: uppercase;
            letter-spacing: .05em;
            opacity: .7;
        }

        .csop-adatok dd {
            margin: 0;
            font-weight: 700;
            font-size: 1.05rem;
        }

    .csop-panel .csop-atnevez summary {
        color: inherit;
        opacity: .85;
    }

    .csop-panel .csop-fej .uzenet-ok, .csop-panel .csop-fej .uzenet-hiba {
        margin: .9rem 0 0;
        color: var(--szoveg);
    }
    /* az üzenet a saját (világos) dobozában olvasható maradjon */

/* Edzés – felírás: tagkereső a "Vendéget hozok / felírok valakit" mezőben, és "felírta" a lista nézetben */
.vendeg-urlap .tagkereso { position: relative; flex: 1; min-width: 0; }
.vendeg-urlap .tagkereso input[type="text"] { width: 100%; }
.felirta-kicsi { display: none; }
.nevsor-lista .felirta-kicsi { display: inline; margin-left: .4rem; font-size: .8rem; font-weight: 400; color: var(--halvany); }

/* ==========================================================================
   Főoldal – "Edzéseid" kártyák: a kép alatt nagy létszámszám, pöttyök az edzés (sötét) színével
   (_EdzesNapok.cshtml, ViewData["NagyLetszam"])
   ========================================================================== */
.edzes-kep-oszlop { grid-area: kep; display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.kep-letszam { display: flex; align-items:flex-start; gap: .25rem; color: var(--h-eros, var(--sanc)); font-size: 1.1rem; font-weight: 600; line-height: 1; margin-top:10px;}
.kep-letszam b { font-family: var(--kijelzo); font-size: 2.6rem; font-weight: 400; line-height: .9; }   /* a nagy szám */
.edzes.nagy-letszam .helyek i.foglalt { background: var(--h-eros, var(--sanc)); border-color: var(--h-eros, var(--sanc)); }
.edzes.nagy-letszam .helyek-sav span { background: var(--h-eros, var(--sanc)); }
/* főoldal "Edzéseid": előbb a "N szabad hely", utána a pöttyök */
.edzes.nagy-letszam .letszam {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .75rem;
}

.edzes.nagy-letszam .letszam-szoveg {
    order: -1;
}

/* főoldal "Edzéseid": a "Zárt" / csoport címke az edzés sötét színével */
.edzes.nagy-letszam .cimke.zart {
    background: var(--h-eros, var(--sanc));
    color: var(--h-eros-szoveg, #1f1205);
    border-color: transparent;
}

/* ==========================================================================
   Edzés oldal – "Az edzésről": fent a szervezők (fejléc), lent a megtekintések (lábléc), saját háttérrel
   ========================================================================== */
/* a szakasz széléig érő fejléc és lábléc: a szakasznak nincs belső margója, csak a középső résznek */
.szakasz.leiras {
    padding: 0;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
}
.leiras > .osszecsukhato { padding: 1.2rem 1.5rem 1.4rem; }
.leiras-fej {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .6rem;
    padding: .75rem 1.5rem;
    background: color-mix(in srgb, var(--szoveg) 5%, var(--papir)); /* lábléc háttere: halvány */
}
.leiras-fej-cimke { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.leiras-fej-nevek { font-weight: 700; font-size: 1.05rem; }
.leiras-fej a { color: inherit; }

.leiras-lab {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem 1rem;
    padding: .65rem 1.5rem;
    background: color-mix(in srgb, var(--szoveg) 5%, var(--papir)); /* lábléc háttere: halvány */
    border-top: 1px solid var(--vonal);
    color: var(--szoveg-2);
    font-size: .88rem;
}
    .leiras-lab b {
        color: var(--szoveg);
        padding: 6px;
        border: 1px solid gray;
        border-radius: 50%;
        background: color-mix(in srgb, var(--papir) 15%, var(--papir)); /* lábléc háttere: halvány */
    }

/* "asztalon-is": nagy képernyőn is összecsukható (alapból nyitva) – pl. az edzés leírása */
@media (min-width: 901px) {
    .osszecsukhato.asztalon-is > summary {
        cursor: pointer;
        pointer-events: auto;
    }

        .osszecsukhato.asztalon-is > summary::after {
            display: block;
        }
}

/* "Az edzésről": a szervezők és a legutóbbi látogatók linkjei aláhúzás nélkül (rámutatva igen) */
.leiras-fej a, .leiras-lab a { color: inherit; text-decoration: none; }
.leiras-fej a:hover, .leiras-lab a:hover { text-decoration: underline; }
/* edzés oldal: a hozzászólás "Elküldöm" gombja átlátszó háttérrel */
.uj-hozzaszolas .gomb {
    background: transparent;
    border: 1px solid currentColor;
    color: var(--szoveg);
    font-weight: 300;
}

    .uj-hozzaszolas .gomb:hover {
        background: color-mix(in srgb, var(--szoveg) 8%, transparent);
    }

.megosztas-szakasz .gomb {
    background: transparent;
    border: 1px solid currentColor;
    color: var(--szoveg);
    font-weight:300;
}

.kis-szakasz .gomb {
    background: transparent;
    border: 1px solid currentColor;
    color: var(--szoveg);
    font-weight: 300;
}



/* ==========================================================================
   Profil – profilkép feltöltése, e-mail cím csere
   ========================================================================== */
.profilkep-sor { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 1.5rem; }
.profilkep-sor > div { flex: 1; min-width: 220px; }
.profilkep-sor p { margin: 0 0 .75rem; }
.profilkep-nagy { width: 140px; height: 140px; border-radius: 12px; object-fit: cover; flex-shrink: 0; display: grid; place-items: center; }   /* a kép mérete */
/* a fájlválasztó gombnak látszik: a valódi mező láthatatlanul ráfekszik */
.fajl-gomb { position: relative; overflow: hidden; cursor: pointer; margin-bottom: .5rem; }
.fajl-gomb input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fajl-gomb:focus-within { outline: 2px solid var(--sanc); outline-offset: 2px; }
.fajl-gomb.toltodik { opacity: .6; pointer-events: none; }
.fajl-gomb.toltodik::after { content: " – feltöltés…"; }
html.js .fajl-kuld { display: none; }   /* JavaScripttel a kiválasztás után magától feltölt */
.profilkep-sor .urlap-lab { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.profilkep-sor .urlap-lab form { margin: 0; }

.email-csere-sor { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0 0 1rem; }
.email-csere-sor dt { color: var(--halvany); }
.email-csere-sor dd { margin: 0; overflow-wrap: anywhere; }
.email-megerosites .urlap-lab { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ==========================================================================
   Regisztráció, aktiválás, elfelejtett jelszó (a belépő oldal elrendezésével)
   ========================================================================== */
.belepes-logo-link { color: inherit; text-decoration: none; }
.belepes-urlap .reg-urlap { max-width: 440px; }   /* a regisztrációs űrlap szélessége */
.fiok-doboz { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 1rem; }
.fiok-doboz h1 { font-size: 2.4rem; margin: 0; }
.fiok-doboz p { margin: 0; }
.fiok-urlap { display: flex; flex-direction: column; gap: 1rem; }
.fiok-doboz .gomb { width: 100%; }

.reg-kep { display: flex; align-items: center; gap: 1rem; }
.reg-kep > div { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.reg-kep-kep { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid var(--sanc); }   /* a profilkép előnézete */
.reg-kep-ures { display: block; background: var(--papir); border-style: dashed; border-color: var(--vonal); }
.reg-kep-kep[hidden] { display: none; }
.belepes-urlap .reg-kep .gomb { width: auto; margin: 0; }
.reg-nem { border: 0; padding: 0; margin: 0; }
.reg-nem legend { font-weight: 600; font-size: .95rem; margin-bottom: .35rem; }
.reg-nem .valaszto-sor { display: flex; gap: 1.5rem; }
.reg-csapda { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Szabályzat (/szabalyzat) – a szöveg a Content/szabalyzat.md fájlból
   ========================================================================== */
.szabalyzat { max-width: 780px; margin: 0 auto; line-height: 1.65; }
.szabalyzat h1 { margin: 0 0 .4rem; }
.szabalyzat h2 { margin: 2.5rem 0 .8rem; padding-top: 1.2rem; border-top: 2px solid var(--sanc); scroll-margin-top: 84px; }
.szabalyzat h3 { margin: 1.6rem 0 .5rem; font-size: 1.12rem; }
.szabalyzat p { margin: 0 0 .85rem; }
.szabalyzat ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.szabalyzat li { margin: .3rem 0; }
.szabalyzat > p:nth-of-type(1) { color: var(--halvany); font-size: .92rem; }   /* "Hatályos: …" */
.szabalyzat-ugro { max-width: 780px; margin: 0 auto 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.szabalyzat-ugro a { padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--vonal); background: var(--lap); color: inherit; text-decoration: none; font-weight: 600; font-size: .92rem; }
.szabalyzat-ugro a:hover { border-color: var(--sanc); }
.lablec-linkek { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.lablec-build { font-size: .7rem; opacity: .6; margin-top: .25rem; }   /* "Powered by MesterCom. Build v…" a lábléc alján */
.lablec-jog { font-size: .75rem; opacity: .8; max-width: 80ch; margin-top: -.25rem; line-height:.9rem }   /* jogi apróbetű a felirat alatt */
.belepes-szabalyzat { margin: 0; font-size: .85rem; text-align: center; }
.belepes-szabalyzat a { color: var(--halvany); }

/* Profil – regisztráció törlése */
.torles-nyito > summary { cursor: pointer; font-weight: 600; color: var(--betelt); margin-bottom: .5rem; }
.torles-lista { margin: .5rem 0 1.25rem; padding-left: 1.2rem; line-height: 1.55; }
.torles-lista li { margin: .3rem 0; }
#torles .uzenet-hiba ul { margin: .4rem 0; }

/* Főoldal – versenyek: a leírás eleje, legfeljebb 3 sorban */
.verseny-leiras {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 12; line-clamp: 12; overflow: hidden;
    font-size: .86rem; line-height: 1.45; color: var(--szoveg-2); margin-top: .15rem;
}

/* ==========================================================================
   Verseny adatlap (/verseny/12) és szerkesztés (/verseny-szerkeszt/12)
   ========================================================================== */
.verseny-fej { position: relative; border-radius: var(--kerekites); overflow: hidden; background: var(--grafit); color: #fff; margin-bottom: 1.25rem; }
.verseny-fokep { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }   /* a főkép magassága (16:7) */
.verseny-fej-szoveg {
    display: flex; align-items: flex-end; gap: 1rem; padding: 1.25rem 1.5rem;
}
.verseny-fej:not(.kep-nelkul) .verseny-fej-szoveg {
    position: absolute; inset: auto 0 0 0;
    background: linear-gradient(180deg, transparent, rgba(15, 18, 21, .85));
    padding-top: 3.5rem;
}
.verseny-fej h1 { margin: 0; color: #fff; font-size: clamp(1.6rem, 3.5vw, 2.4rem); line-height: 1.1; }
.verseny-fej-datum {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 4.2rem; height: 4.2rem; border-radius: 10px; background: #fff; color: var(--grafit); line-height: 1;
}
.verseny-fej-datum .vd-nap { font-size: 2rem; }
.verseny-fej-sor { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .4rem 0 0; color: #e3e7eb; }
.verseny-fej-sor .cimke { background: rgba(255, 255, 255, .18); color: #fff; border-color: transparent; }
.verseny-fej > .verseny-fej-szoveg > div:nth-child(2) { flex: 1; min-width: 0; }
.verseny-szerk-gomb { flex-shrink: 0; }

.verseny-racs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 1.25rem; align-items: start; }
.verseny-fo, .verseny-oldalso { display: flex; flex-direction: column; gap: 1.25rem; }
.verseny-fo > .szakasz, .verseny-oldalso > .szakasz { margin: 0; }
.verseny-hir-doboz { border-left: 4px solid var(--sanc); background: color-mix(in srgb, var(--sanc) 8%, var(--lap)); }
.verseny-hir-cimke { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sanc-sotet, var(--sanc)); margin-bottom: .3rem; }
.verseny-adatok { display: grid; grid-template-columns: auto 1fr; gap: .45rem .9rem; margin: 0; }
.verseny-adatok dt { color: var(--halvany); font-size: .88rem; }
.verseny-adatok dd { margin: 0; overflow-wrap: anywhere; }
.verseny-dokok { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.verseny-dokok li > a, .verseny-dokok li > span:last-child { display: flex; align-items: center; gap: .6rem; }
.verseny-dokok li { display: flex; align-items: center; gap: .6rem; }
.verseny-dokok a { color: inherit; font-weight: 600; text-decoration: none; }
.verseny-dokok a:hover span:last-child { text-decoration: underline; }
.dok-ikon {
    flex-shrink: 0; width: 2.6rem; height: 2rem; border-radius: 6px; display: grid; place-items: center;
    background: var(--sanc); color: #1f1205; font-size: .7rem; font-weight: 800; letter-spacing: .03em;
}
.verseny-dokok li.nincs { color: var(--halvany); }
.verseny-dokok li.nincs .dok-ikon { background: var(--vonal); color: var(--halvany); }
.verseny-statisztika { font-size: .85rem; margin: 0; text-align: center; }

/* verseny szerkesztése – "A verseny" (alapadatok) szakasz sötétebb háttérrel */
.verseny-urlap section[aria-labelledby="alap-cim"] {
    background: color-mix(in srgb, var(--szoveg) 0%, var(--lap));
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.verseny-szerk-racs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 1.25rem; align-items: start; }
.verseny-szerk-racs > div > .szakasz, .verseny-szerk-oldalso > .szakasz { margin: 0; }
.verseny-szerk-oldalso { display: flex; flex-direction: column; gap: 1.25rem; }
.verseny-szerk-oldalso .szakasz { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.verseny-szerk-kep { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.verseny-szerk-kep.ures { display: grid; place-items: center; background: var(--papir); border: 2px dashed var(--vonal); color: var(--halvany); font-size: .9rem; }
.verseny-szerk-kep[hidden] { display: none; }
.verseny-dok-mezo { width: 100%; }
.verseny-dok-meglevo { display: flex; align-items: center; gap: 1rem; font-size: .9rem; }
.verseny-dok-meglevo .pipa { font-size: .85rem; }
.verseny-mentes { margin: 1.25rem 0; display: flex; gap: .5rem; }
.verseny-torles { margin-top: 2rem; }

@media (max-width: 900px) {
    .verseny-racs, .verseny-szerk-racs { grid-template-columns: minmax(0, 1fr); }
    .verseny-fokep { aspect-ratio: 16 / 9; }
    .verseny-fej-szoveg { flex-wrap: wrap; }
}
.oldal > .vissza { margin: 0 0 .75rem; font-weight: 600; }
.oldal > .vissza a { text-decoration: none; }

/* ==========================================================================
   Versenynaptár (/versenyek) – kártyák főképpel, rajta a dátum és a város
   ========================================================================== */
.vn-eszkozok { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.vn-fulek { display: inline-flex; border: 1px solid var(--vonal); border-radius: 999px; padding: 3px; background: var(--lap); }
.vn-fulek a { padding: .4rem 1.1rem; border-radius: 999px; font-weight: 600; color: var(--szoveg-2); text-decoration: none; }
.vn-fulek a[aria-current="page"] { background: var(--kiemelt-hatter); color: var(--kiemelt-szoveg); }
.vn-kereso { display: flex; gap: .5rem; }
.vn-kereso input { width: min(260px, 60vw); }

.vn-racs { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; }   /* kártya legkisebb szélessége */
.vn-kartya {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
    background: var(--lap); border: 1px solid var(--vonal); border-radius: var(--kerekites);
    color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}
.vn-kartya:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15, 20, 25, .14); }
.vn-kartya:hover .vn-nev { text-decoration: underline; }

.vn-kep { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--grafit); }
.vn-kep img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.vn-kep.kep-nelkul { background: linear-gradient(135deg, var(--grafit), color-mix(in srgb, var(--sanc) 55%, var(--grafit))); }
.vn-kep-nev {
    position: absolute; inset: auto 1rem 1rem 1rem; color: #fff; font-family: var(--kijelzo); font-size: 1.8rem; line-height: 1;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; opacity: .9;
}
.vn-datum {   /* a dátum címke a kép bal felső sarkában */
    position: absolute; top: .75rem; left: .75rem; width: 4.4rem; height: 4.6rem; border-radius: 9px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
    background: #fff; color: var(--grafit); box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.vn-datum .vd-nap { font-size: 2.75rem; }
.vn-varos {   /* a város címke a kép jobb felső sarkában */
    position: absolute; right: .75rem; top: .75rem; display: inline-flex; align-items: center; gap: .3rem;
    padding: .25rem .65rem; border-radius: 999px; background: rgba(20, 23, 26, .58); color: #fff;
    font-size: .82rem; font-weight: 600; backdrop-filter: blur(4px);
    border-color:black;
}
.vn-test { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem 1rem; flex: 1; }
.vn-ido { font-size: .85rem; font-weight: 600; color: var(--sanc-sotet, var(--sanc)); }
.vn-nev { font-size: 1.12rem; line-height: 1.25; }
.vn-hir { font-size: .86rem; padding: .3rem .55rem; border-left: 3px solid var(--sanc); background: color-mix(in srgb, var(--sanc) 8%, var(--lap)); }
.vn-leiras {
    font-size: .88rem; line-height: 1.45; color: var(--szoveg-2);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.vn-test .cimkek { margin-top: auto; padding-top: .3rem; }
.cimke.vn-eredmeny { background: var(--szabad); border-color: var(--szabad); color: #fff; }
.vn-kartya.elmult .vn-kep img { filter: saturate(.75); }
.vn-kartya.elmult .vn-ido { color: var(--halvany); }

/* Hozzászólások: az avatarokat egy halvány függőleges vonal köti össze (mögöttük fut).
   Minden hozzászólás a saját avatarja közepétől a következő avatar közepéig húz egy szakaszt. */
.hozzaszolas { position: relative; --hz-avatar: 72px; --hz-felso: 1rem; }   /* = az avatar mérete és a hozzászólás felső paddingje */
.hozzaszolas:not(:last-child)::before {
    content: ""; position: absolute; z-index: 0;
    left: calc(var(--hz-avatar) / 2 - 1px);
    top: calc(var(--hz-felso) + var(--hz-avatar) / 2);
    bottom: calc(-1 * (var(--hz-felso) + var(--hz-avatar) / 2));
    width: 1px; border-radius: 2px;
    background: color-mix(in srgb, var(--sanc) 75%, transparent);   /* a vonal színe */
}
.hozzaszolas > .avatar { position: relative; z-index: 1; flex-shrink: 0; }
/* az avatar kerete a hozzászólásban: a támogatói plakett a jobb felső sarkán, kicsit kifelé */
.hozzaszolas > .hz-avatar { position: relative; z-index: 1; flex-shrink: 0; align-self: flex-start; line-height: 0; }
.hz-plakett { top: -12px; right: -14px; bottom: auto; width: 34px; height: 34px; }

/* főoldali idővonal: a nap neve link (az adott napi edzéskeresőre) */
a.iv-napnev { color: inherit; text-decoration: none; }
a.iv-napnev:hover { text-decoration: underline; color: var(--sanc-sotet, var(--sanc)); }

/* edzés oldal: a várólistások neve sima szövegszínű (világos témában fekete), nem az edzés színe */
.nevsor.varolista > li:not(.lemondott) .nev-blokk .nev { color: var(--szoveg); }

/* Tagprofil – elérhetőség a fejlécben, a név és a város alatt */
.tag-elerhetoseg { display: flex; flex-direction: column; gap: .2rem; margin: .35rem 0 .2rem; }
.tag-eler-sor { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.tag-eler-sor a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.tag-eler-sor a:hover { text-decoration: underline; }
.tag-eler-sor svg { flex-shrink: 0; opacity: .8; }
.tag-eler-megj { font-size: .82rem; color: var(--halvany); }
@media (max-width: 600px) {
    .tag-elerhetoseg { align-items: center; }
    .tag-eler-sor { justify-content: center; }
}

/* ===================================================================== Térkép (Pages/Shared/_Terkep.cshtml)
   Magyarország körvonala (Data/MagyarTerkep.cs), városonként egy kör: a mérete az edzések számával nő
   (a sugarat a _Terkep.cshtml Sugar() függvénye adja: 7 + 6·√db, legfeljebb 34). */
.terkep-doboz { margin-bottom: 1.25rem; }
.hu-terkep { margin: 0; position: relative; }
.hu-terkep svg { display: block; width: 100%; height: auto; max-height: 420px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hu-terkep.nagyitott svg { touch-action: none; cursor: grab; }
.hu-terkep.nagyitott svg:active { cursor: grabbing; }
/* nagyítás gombok a térkép jobb felső sarkában */
.hu-gombok { position: absolute; top: .4rem; right: .4rem; display: flex; flex-direction: column; gap: 4px; }
.hu-gombok button { width: 34px; height: 34px; padding: 0; border: 1px solid var(--vonal); border-radius: 8px; background: var(--lap);
                    color: var(--szoveg); font: 600 1.2rem/1 var(--betu); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.hu-gombok button:hover { border-color: var(--sanc); color: var(--sanc-sotet); }
.hu-gombok button[hidden] { display: none; }
/* "Ctrl + görgetés" súgó: akkor villan fel, ha nagyítás nélkül görget valaki a térkép fölött */
.hu-sugo { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .2s;
           background: rgba(0,0,0,.35); color: #fff; font-weight: 600; border-radius: var(--kerekites); }
.hu-terkep.sugo-latszik .hu-sugo { opacity: 1; }
/* a kisebb városok neve csak 2× nagyítás felett (site.js: .reszletes) */
.hu-nev.kis { display: none; }
.hu-terkep.reszletes .hu-nev.kis { display: inline; }
.hu-terkep .hu-nev.takart, .hu-terkep.reszletes .hu-nev.takart { display: none; }   /* másik névvel ütközne (site.js) */
/* a térkép színei egy helyen (sötét módban lent felülírva) */
.hu-terkep {
    --hu-fold-1: #fbf8ef;   /* az ország színe középen … */
    --hu-fold-2: #ece6d3;   /* … és a szélén (sugaras átmenet) */
    --hu-hatar: #a39a86;    /* országhatár */
    --hu-hegy: #b9a26e;     /* hegységek elmosott foltja */
    --hu-viz: #7fb4de;      /* folyók, tavak körvonala */
    --hu-to: #b8d8f0;       /* tavak kitöltése */
    --hu-viznev: #4f8fc0;   /* Duna, Tisza felirat */
    --hu-hegynev: #8d7b4f;  /* hegységnevek */
    --hu-felirat-alap: var(--lap);   /* a városnevek körüli "glória" */
}
.hu-fold-1 { stop-color: var(--hu-fold-1); }
.hu-fold-2 { stop-color: var(--hu-fold-2); }
.hu-hatar { fill: none; stroke: var(--hu-hatar); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hu-hegy { fill: var(--hu-hegy); opacity: .42; }
.hu-folyo { fill: none; stroke: var(--hu-viz); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hu-to { fill: var(--hu-to); stroke: var(--hu-viz); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hu-viznev { fill: var(--hu-viznev); font: italic 600 15px var(--betu); letter-spacing: .12em; text-anchor: middle; pointer-events: none; }
.hu-hegynev { fill: var(--hu-hegynev); font: italic 500 13px var(--betu); letter-spacing: .04em; text-anchor: middle; pointer-events: none; display: none; }
.hu-terkep.reszletes .hu-hegynev { display: inline; }
.hu-pont circle { fill: var(--sanc); fill-opacity: .82; stroke: #fff; stroke-width: 2.5; transition: fill-opacity .15s, stroke-width .15s; }
.hu-pont:hover circle, .hu-pont:focus-visible circle { fill-opacity: 1; stroke: var(--szoveg); stroke-width: 3; }
.hu-pont.kiemelt circle { fill: var(--grafit, #2b3036); fill-opacity: 1; stroke: var(--sanc); stroke-width: 4; }
.hu-szam { fill: #fff; font: 700 17px var(--betu); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.hu-nev { fill: var(--szoveg); font: 600 19px var(--betu); text-anchor: middle; pointer-events: none;
          paint-order: stroke; stroke: var(--hu-fold-1); stroke-width: 5px; stroke-linejoin: round; }
.hu-terkep figcaption { margin-top: .4rem; }
.hu-terkep .hu-hianyzo { color: var(--halvany); }
:root[data-theme="dark"] .hu-terkep {
    --hu-fold-1: #30363c; --hu-fold-2: #252a2f; --hu-hatar: #5d666f; --hu-hegy: #6b6046;
    --hu-viz: #3f6f94; --hu-to: #2a4a63; --hu-viznev: #7fb4de; --hu-hegynev: #a8996f;
}
:root[data-theme="dark"] .hu-pont circle { stroke: var(--lap); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hu-terkep {
        --hu-fold-1: #30363c; --hu-fold-2: #252a2f; --hu-hatar: #5d666f; --hu-hegy: #6b6046;
        --hu-viz: #3f6f94; --hu-to: #2a4a63; --hu-viznev: #7fb4de; --hu-hegynev: #a8996f;
    }
    :root:not([data-theme="light"]) .hu-pont circle { stroke: var(--lap); }
}

/* ===================================================================== Támogatás (Pages/Tamogatas.cshtml) */
.tamogatas { max-width: 760px; margin: 0 auto; line-height: 1.65; text-align: justify; }
.tamogatas h1 { margin: 0 0 1rem; text-align: left; }
.tam-koszones { font-size: 1.25rem; font-weight: 600; margin: 0 0 1rem; }
.tam-kedvezmenyezett { display: flex; flex-direction: column; align-items: center; gap: .1rem; margin: 1.6rem 0 1rem; text-align: center; }
.tam-kedvezmenyezett span { color: var(--szoveg-2); font-size: .9rem; }
.tam-kedvezmenyezett strong { font-size: 1.25rem; }
.tam-kedvezmenyezett small { color: var(--halvany); font-size: .82rem; }
.tam-modok { list-style: none; margin: 0 auto 1.8rem; padding: 0; max-width: 520px; border: 1px solid var(--vonal); border-radius: var(--kerekites); overflow: hidden; }
.tam-modok li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; background: var(--lap); }
.tam-modok li + li { border-top: 1px solid var(--vonal); }
.tam-mod-nev { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--szoveg-2); }
.tam-szamla { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.tam-szamla strong { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tam-masol { border: 1px solid var(--vonal); background: transparent; color: var(--szoveg-2); border-radius: 6px; padding: .15rem .55rem; font: 600 .82rem var(--betu); cursor: pointer; }
.tam-masol:hover { border-color: var(--sanc); color: var(--sanc-sotet); }
.tam-alairas { margin-top: 1.4rem; text-align: left; }
.tam-labda { display: block; margin: 1rem auto 2rem; width: min(320px, 70%); height: auto; mix-blend-mode: multiply; border-radius: var(--kerekites); }
:root[data-theme="dark"] .tam-labda { mix-blend-mode: normal; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tam-labda { mix-blend-mode: normal; } }
@media (max-width: 560px) {
    .tamogatas { text-align: left; }
    .tam-modok li { flex-direction: column; align-items: flex-start; gap: .4rem; }
    .tam-szamla { justify-content: flex-start; }
}

/* figyelmeztetés (nem hiba): pl. létszámcsökkentés az edzés beállításain */
.uzenet-figyelem {
    background: color-mix(in srgb, #e0a100 14%, var(--lap));
    border-left: 4px solid #e0a100;
    padding: .7rem 1rem;
    border-radius: 6px;
    margin: 0 0 1rem;
    font-weight: 500;
}
.mezo-figyelem { display: block; margin-top: .3rem; font-size: .88rem; color: #9a6b00; }
.mezo-figyelem[hidden] { display: none; }
:root[data-theme="dark"] .mezo-figyelem { color: #f0c04a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mezo-figyelem { color: #f0c04a; } }

/* ===================================================================== A mezőny erőssége (edzés oldal, #erosseg)
   Számítás: Data/MezonyErosseg.cs. Teljes szélességű sor a két hasáb alatt; a színek az edzés hangulatszínei (--h-eros). */
/* a két hasáb alatti teljes szélességű sorok, ebben a sorrendben: mezőny erőssége, megosztás, szervezőknek
   (mobilon a .edzes-racs flex oszlop, ott az order értékek döntenek) */
.edzes-racs > .erosseg, .edzes-racs > .megosztas-szakasz, .edzes-racs > .szervezo-panel { grid-column: 1 / -1; }
.erosseg-tartalom { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.6fr); gap: 1.5rem 2.5rem; align-items: center; }
.erosseg-szint { margin: 0 0 .15rem; font-size: 1rem; }
.erosseg-szint strong { font: 400 2.6rem/1 var(--kijelzo); letter-spacing: .02em; color: var(--h-eros, var(--sanc)); }
.erosseg-szint span { color: var(--halvany); font-weight: 600; margin-left: .25rem; }
.erosseg-alap { margin: 0 0 .9rem; font-size: .85rem; }
/* skála: 0–100, a szintek helyével és nevével. A sáv az edzés halvány színétől (Kezdő) az erős színéig (Superhero) megy át;
   a pöttyben a pontszám (% jel nélkül). */
.erosseg-skala { position: relative; height: 30px; margin: .3rem .9rem 2.1rem; }
.erosseg-skala::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 10px; transform: translateY(-50%); border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--h-eros, var(--sanc)) 14%, var(--lap)), var(--h-eros, var(--sanc)));
}
.erosseg-szintjel { position: absolute; top: 38px; transform: translateX(-50%); font-size: .72rem; font-weight: 600; color: var(--halvany); white-space: nowrap; }
.erosseg-szintjel:last-child { transform: translateX(-100%); }   /* Superhero a jobb szélen: ne lógjon ki */
.erosseg-szintjel::before { content: ""; position: absolute; left: 50%; top: -12px; width: 1px; height: 7px; background: var(--halvany); }
.erosseg-szintjel:last-child::before { left: auto; right: 0; }
.erosseg-jelolo { position: absolute; top: 50%; z-index: 1; width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 50%;
                  display: grid; place-items: center; font: 700 .75rem/1 var(--betu);
                  background: var(--h-eros, var(--sanc)); color: var(--h-eros-szoveg, #fff);
                  border: 3px solid var(--lap); box-shadow: 0 0 0 1px var(--h-eros, var(--sanc)), 0 2px 6px rgba(0,0,0,.2); }
/* Tag oldal, "Értékelése" kártya: a szintpont pöttye a jobb felső sarokban (ugyanaz a stílus, mint az .erosseg-jelolo) */
#ertekeles { position: relative; }
.ertekeles-pont { position: absolute; top: 1rem; right: 1rem;
                  width: 44px; height: 44px; border-radius: 50%;
                  display: grid; place-items: center;
                  font: 400 1.5rem/1 var(--kijelzo); letter-spacing: .02em; padding-top: 2px;   /* a szám betűtípusa: a címek Bebas Neue-ja */
                  background: var(--h-eros, var(--sanc)); color: var(--h-eros-szoveg, #fff);
                  border: 3px solid var(--lap); box-shadow: 0 0 0 1px var(--h-eros, var(--sanc)), 0 2px 6px rgba(0,0,0,.2); }
.erosseg-grafikon { margin: 0; }
.erosseg-grafikon svg { display: block; width: 100%; height: auto; max-height: 220px; }
.eg-racs { stroke: var(--vonal); stroke-width: 1; stroke-dasharray: 2 3; }
.eg-alap { stroke: var(--halvany); stroke-width: 1; }
.eg-tengely { fill: var(--halvany); font: 10px var(--betu); text-anchor: end; }
.eg-oszlop rect { fill: var(--h-eros, var(--sanc)); fill-opacity: .55; }
.eg-oszlop.aktualis rect { fill-opacity: 1; }
.eg-oszlop.varhato rect { fill-opacity: .22; stroke: var(--h-eros, var(--sanc)); stroke-width: 1.5; stroke-dasharray: 3 2; }
.eg-oszlop:hover rect { fill-opacity: .85; }
.eg-ertek { fill: var(--szoveg-2); font: 600 11px var(--betu); text-anchor: middle; }
.eg-oszlop.aktualis .eg-ertek { fill: var(--szoveg); font-weight: 700; }
.eg-ertek.nincs { fill: var(--halvany); }
.eg-datum { fill: var(--halvany); font: 10.5px var(--betu); text-anchor: middle; }
.eg-oszlop.aktualis .eg-datum { fill: var(--szoveg); font-weight: 600; }
.erosseg-megjegyzes { font-size: .75rem; line-height: 1.4; color: var(--halvany); margin: .8rem 0 0; }
@media (max-width: 760px) {
    .erosseg-tartalom { grid-template-columns: 1fr; }
}

/* ==========================================================================
   VISSZAÁLLÍTVA (okt. 20.): ezek a szabályok egy korábbi összefésülésnél kimaradtak a fájlból –
   verseny-lapozó, versenynaptár "Mind" nézet, megosztás szakasz, edzés névjegye, üres szavazat
   ========================================================================== */
/* Főoldal – verseny-lapozó: egyszerre egy kártya, alatta ‹ Előző · 3 / 12 · Következő › */
.verseny-lapozo.lapozva > li { border-top: 0; }
.verseny-lapozo > li[hidden] { display: none; }
.kartya-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .6rem; }
.kartya-nav[hidden] { display: none; }
.kartya-nav button:disabled { opacity: .4; cursor: default; }
.kartya-nav [data-kartya-szam] { font-size: .9rem; font-variant-numeric: tabular-nums; }
/* lezajlott verseny a főoldalon: félig elszürkítve, mint a versenynaptár "Mind" nézetében */
.verseny-lapozo li.elmult > a { opacity: .55; filter: grayscale(.7); transition: opacity .15s ease, filter .15s ease; }
.verseny-lapozo li.elmult > a:hover { opacity: .85; filter: none; }
.cimke.verseny-lezajlott { margin-left: .4rem; font-size: .72rem; }

/* Versenynaptár, "Mind" nézet: a lezajlottak félig elszürkülnek, a közelgők SANC színű keretet kapnak */
.vn-racs.mind .vn-kartya.elmult { opacity: .55; filter: grayscale(.7); }
.vn-racs.mind .vn-kartya.elmult:hover { opacity: .85; filter: none; }
.vn-racs.mind .vn-kartya:not(.elmult) { border: 2px solid var(--sanc); }

/* ==========================================================================
   Edzés oldal – Megosztás (szürke szakasz a hozzászólások alatt)
   ========================================================================== */
.megosztas-szakasz { background: color-mix(in srgb, var(--szoveg) 5%, var(--papir)); border-color: transparent; }   /* a szürke háttér */
.megosztas-sor { display: flex; flex-direction: column; gap: .3rem; }
.megosztas-sor + .megosztas-sor { margin-top: 1.2rem; }
.megosztas-sor > label { font-weight: 700; color: var(--sanc-sotet, var(--sanc)); }
.masol-sor { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.masol-sor input { flex: 1 1 260px; min-width: 0; font-size: .92rem; background: var(--lap); }

/* ==========================================================================
   Edzés névjegye (/edzes-nevjegy/123) – nyilvános, megosztható bemutató
   ========================================================================== */
.nevjegy-oldal { min-height: 100vh; padding: 2rem 16px; background: var(--papir); }
.nevjegy { max-width: 760px; margin: 0 auto; background: var(--lap); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 50px rgba(15, 20, 25, .2); border: 2px solid var(--hv-eros, var(--sanc)); }
.nevjegy-kep {
    position: relative; aspect-ratio: 16 / 8; background: var(--grafit) center / cover no-repeat;
    display: flex; flex-direction: column; justify-content: space-between; padding: 1.25rem 1.5rem; color: #fff; isolation: isolate;
}
.nevjegy-kep::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 23, 26, .55), rgba(20, 23, 26, .05) 45%, rgba(20, 23, 26, .5)); }
.nevjegy-logo { font-family: var(--kijelzo); font-size: 3.2rem; line-height: .9; color: #fff; text-decoration: none; }
.nevjegy-logo span { color: var(--sanc); font-size: .45em; }
.nevjegy-bemutatja { font-weight: 600; font-size: 1.05rem; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.nevjegy-test { padding: 1.5rem 1.75rem 2rem; display: flex; flex-direction: column; gap: .6rem; text-align: center; align-items: center; }
.nevjegy-test h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.nevjegy-test p { margin: 0; }
.nevjegy-hely { font-size: 1.1rem; color: var(--szoveg-2); }
.nevjegy-ido b { color: var(--hv-eros, var(--sanc)); }
.nevjegy-letszam { font-weight: 600; color: var(--szabad); }
.nevjegy-leiras { text-align: left; align-self: stretch; margin: .5rem 0; padding-top: .8rem; border-top: 1px solid var(--vonal); }
.nevjegy-gomb { min-width: 260px; margin-top: .5rem; }
.nevjegy-megjegyzes { font-size: .88rem; color: var(--halvany); max-width: 420px; }

/* kedvelések: nullánál nincs kiírva semmi */
.szavazat:empty { display: none; }

/* ==========================================================================
   Csapatok (Pages/Csapatok.cshtml, Csapat.cshtml, CsapatSzerkeszt.cshtml)
   ========================================================================== */
.cs-kereso { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.25rem; }
.cs-kereso input[type="search"] { flex: 0 1 380px; min-width: 0; }
/* szűrő pipák "pirulaként": a bepipált narancs */
.cs-szurok { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: .5rem; }
.cs-szuro { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border: 1px solid var(--vonal); border-radius: 999px;
            background: var(--lap); font-size: .92rem; font-weight: 600; cursor: pointer; }
.cs-szuro:has(input:checked) { background: var(--sanc); border-color: var(--sanc); color: #1f1205; }
.cs-szuro input { margin: 0; accent-color: #1f1205; }
/* lista: kártyák – szélesek és alacsonyak: balra a szöveg, jobbra a kép (a HTML-ben a kép van elöl, ezért row-reverse);
   az egész kártya link a csapatoldalra */
.cs-racs { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 1.1rem; }
.cs-kartya > a { display: flex; flex-direction: row-reverse; align-items: stretch; height: 100%; min-height: 170px; border-radius: 4px; overflow: hidden;
                 background: var(--lap); border: 1px solid var(--vonal); color: var(--szoveg); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.cs-kartya > a:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15, 20, 25, .14); }
.cs-kartya > a:hover .cs-kartya-nev { text-decoration: underline; }
.cs-kartya.sajat > a { border: 2px solid var(--sanc); }
.cs-kartya-kep-doboz { position: relative; display: block; flex: 0 0 38%; background: var(--grafit); }   /* a kép szélessége */
.cs-kartya-kep { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-kartya-kep.ures { display: grid; place-items: center; color: rgba(255, 255, 255, .9); font: 400 2.8rem var(--kijelzo); letter-spacing: .05em; }
.cs-friss { position: absolute; top: .55rem; right: .55rem; padding: .2rem .6rem; border-radius: 999px; background: var(--sanc); color: #1f1205;
            font-size: .75rem; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.cs-kartya-szoveg { display: flex; flex-direction: column; gap: .2rem; padding: .8rem 1rem .85rem; flex: 1; min-width: 0; text-align: left; }
.cs-kartya-nev { font-size: 1.15rem; color: var(--h-nev, var(--szoveg)); }
.cs-kartya-letszam { font-weight: 400; color: var(--halvany); margin-left: .3rem; }   /* a név mögött: ugyanakkora, halványabb */
.cimke.cs-friss-cimke { background: var(--sanc); color: #1f1205; }
.cs-kartya-sor { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .7rem; font-size: .88rem; color: var(--szoveg-2); }
.cs-kartya-hozz { display: block; font-size: .85rem; color: var(--halvany); }
.cs-kartya-hozz.friss { color: var(--sanc-sotet, var(--sanc)); font-weight: 600; }
.cs-kartya-cimkek { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.cs-kartya-tovabb { margin-top: auto; padding-top: .4rem; font-weight: 700; font-size: .9rem; color: var(--h-nev, var(--sanc-sotet, var(--sanc))); }
/* hangulatszín a csapatkép átlagszínéből (Pages/Csapatok.cshtml.cs → --hv-*/--hs-* változók; kép nélkül az alapszínek) */
.cs-kartya > a { background: var(--h-hatter, var(--lap)); }
/* a háttér magából a kép átlagszínéből keveredik: balra halványabb, a kép felé erősebb (a %-ok az erősség) */
.cs-kartya[style*="--cs-szin"] > a {
    background: linear-gradient(90deg, color-mix(in srgb, var(--cs-szin) 14%, var(--lap)), color-mix(in srgb, var(--cs-szin) 32%, var(--lap)));
}
.cs-kartya[style*="--hv-eros"] > a { border-color: color-mix(in srgb, var(--h-eros) 45%, transparent); }
.cs-kartya.sajat > a { border-color: var(--sanc); }   /* a saját csapat kerete akkor is narancs, ha van hangulatszín */
.cimke.cs-keres { background: color-mix(in srgb, var(--szabad) 16%, var(--lap)); color: var(--szabad); }
/* csapatoldal: fejléc */
.cs-fej { position: relative; border-radius: 16px; overflow: hidden; background: var(--grafit); color: #fff; margin-bottom: 1.5rem; }
.cs-fokep { display: block; width: 100%; max-height: 380px; object-fit: cover; }
.cs-fej-szoveg { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; padding: 1.2rem 1.4rem; }
.cs-fej:not(.kep-nelkul) .cs-fej-szoveg { position: absolute; inset: auto 0 0 0; background: linear-gradient(0deg, rgba(20, 23, 26, .85), rgba(20, 23, 26, 0)); padding-top: 3rem; }
.cs-fej h1 { margin: 0; color: #fff; font-size: clamp(1.7rem, 4vw, 2.6rem); }
.cs-fej-sor { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .3rem 0 0; color: rgba(255, 255, 255, .85); }
.cs-fej-jobb { display: flex; align-items: center; gap: .7rem; }
.cs-szavaz { background: rgba(255, 255, 255, .92); color: var(--szoveg); border-radius: 999px; padding: .2rem .5rem; }
:root[data-theme="dark"] .cs-szavaz { background: rgba(30, 34, 38, .92); }
.cs-szavaz .szavazat { font-weight: 700; }
/* csapatoldal: két hasáb */
.cs-oldal-racs { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 1.5rem; align-items: start; }
.cs-fo, .cs-oldalso { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.cs-tagok { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.cs-tagok li { display: flex; align-items: center; gap: .65rem; }
.cs-tagok .avatar { width: 64px; height: 64px; border-radius: 10px; }   /* a tagok képe: kétszer akkora, lekerekített négyzet */

    .cs-tagok li:not(.menedzser) .avatar {
        border: none;
    }

.cs-tagok .monogram-kicsi { font-size: 1.2rem; }
.cs-tagok li.menedzser .avatar 
{ box-shadow: 0 0 0 2px var(--sanc); 
}
 
.cs-tag-szoveg { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.cs-tag-szoveg a { color: inherit; text-decoration: none; }
.cs-tag-szoveg a:hover { text-decoration: underline; }
.cs-tag-szoveg .halvany { font-size: .85rem; }
.cs-tartalek-cim { margin: 1rem 0 .5rem; font-size: .95rem; color: var(--szoveg-2); }
.cimke.cs-tag-cimke { background: color-mix(in srgb, var(--sanc) 16%, var(--lap)); color: var(--sanc-sotet, var(--sanc)); font-size: .72rem; }
.cs-kilepes { margin-top: 1rem; }
/* a csapattagok hozzászólása kiemelve */
/* --cs-szin: a csapatkép átlagszíne (Pages/Csapat.cshtml írja ki); kép nélkül a SANC narancs */
.hozzaszolas.csapattag .hozzaszolas-test {
    background: color-mix(in srgb, var(--cs-szin, var(--sanc)) 10%, var(--lap));
    border: 1px solid color-mix(in srgb, var(--cs-szin, var(--sanc)) 50%, var(--lap));
    );
    border-radius: 8px;
    padding: .5rem .75rem;
}
.hozzaszolas.csapattag .avatar {
    width: 104px;
    height: 104px;
    border-radius: 8px;
}
/* szerkesztő */
/* egy hasáb, középen: fent az adatok, alatta a tagok (így a tagok sorai elég szélesek a három hasábhoz), legalul a törlés */
.cs-szerk-racs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; max-width: 920px; margin: 0 auto; }
.cs-szerk-racs > .veszely-szakasz { grid-column: 1 / -1; }
.cs-szerk-kep { margin-top: 1rem; }
.cs-szerk-kep .cimke-felirat { display: block; font-weight: 600; margin-bottom: .35rem; }
.cs-tag-fel { display: flex; flex-direction: column; gap: .5rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--vonal); }
.cs-tag-fel > label { font-weight: 600; }
.cs-tag-fel-sor { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.cs-tag-fel-sor input[type="text"] { flex: 1 1 160px; min-width: 0; }
/* a tagok szerkesztése: tagonként egy külön kártya, három hasábbal
   (név + poszt | mez, tartalék, menedzser | mentés, kivétel) */
.cs-tag-szerk { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .7rem; container-type: inline-size; }
.cs-tag-szerk > li {
    display: grid; grid-template-columns: minmax(14rem, 1fr) auto 7.5rem; align-items: center; gap: .6rem 1.5rem;
    padding: .8rem 1rem; border: 1px solid var(--vonal); border-radius: 10px; background: var(--papir);
}
.cs-tag-szerk > li.menedzser { border-left: 4px solid var(--sanc); }
.cs-tag-bal { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.cs-tag-nev { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.cs-tag-nev a { color: inherit; }
.cs-tag-szerk li.menedzser .cs-tag-nev { color: var(--sanc-sotet, var(--sanc)); }
.cs-tag-bal input { width: 100%; max-width: 18rem; padding: .3rem .5rem; font-size: .9rem; }
.cs-tag-kozep { display: flex; align-items: center; gap: .5rem 1rem; }
.cs-tag-kozep .pipa { white-space: nowrap; margin: 0; }
.cs-mez-mezo { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--szoveg-2); white-space: nowrap; }
.cs-mez-mezo input { width: 3.4rem; padding: .3rem .4rem; font-size: .9rem; text-align: center; }
.cs-tag-jobb { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; text-align: center; }
.cs-tag-jobb form { margin: 0; }
/* ha keskeny a hely (telefon): név + poszt fent, alatta a mez és a pipák, legalul a gombok egy sorban */
@container (max-width: 600px) {
    .cs-tag-szerk > li { grid-template-columns: 1fr; gap: .55rem; }
    .cs-tag-kozep { flex-wrap: wrap; }
    .cs-tag-jobb { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (max-width: 860px) {
    .cs-oldal-racs, .cs-szerk-racs { grid-template-columns: 1fr; }
    .cs-fej:not(.kep-nelkul) .cs-fej-szoveg { position: static; background: var(--grafit); }
}


/* ======================================================================
   Admin mód: kapcsoló a fejlécben, narancs sáv a fejléc alatt
   ====================================================================== */
.admin-kapcsolo-urlap { margin: 0; }
.admin-kapcsolo {
    display: inline-flex; align-items: center; gap: .4rem;
    height: 40px; padding: 0 .8rem;
    border-radius: 999px;
    border: 1px solid #4a525b;
    background: none;
    color: #d6dbe0;
    font: inherit; font-weight: 600; font-size: .9rem; letter-spacing: .02em;
    cursor: pointer;
}
.admin-kapcsolo:hover { color: #fff; border-color: #fff; }
.admin-kapcsolo-potty { width: .6rem; height: .6rem; border-radius: 50%; background: #6b737c; }
.admin-kapcsolo.be { background: var(--sanc); border-color: var(--sanc); color: #1f1205; }
.admin-kapcsolo.be .admin-kapcsolo-potty { background: #1f1205; box-shadow: 0 0 0 3px rgba(31, 18, 5, .2); }

.admin-sav {
    background: var(--sanc);
    color: #1f1205;
}
.admin-sav-belso {
    max-width: var(--szelesseg); margin: 0 auto; padding: .45rem 16px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem;
    font-size: .95rem;
}
.admin-sav form { margin: 0; }
.admin-sav .gomb.kicsi { padding-top: .2rem; padding-bottom: .2rem; }
@media (max-width: 700px) { .admin-sav-reszlet { display: none; } }
/* adminnál két elemmel több van a fejlécben (Admin menü + kapcsoló): asztalon a név helyett csak a profilkép látszik,
   és a menüpontok kicsit közelebb kerülnek egymáshoz, hogy minden kiférjen a fejléc szélességébe */
@media (min-width: 901px) {
    .fejlec.van-admin .fejlec-belso { gap: 1rem; }
    .fejlec.van-admin .fiok-nev span:not(.monogram) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .fejlec.van-admin .fomenu ul a { padding-left: .5rem; padding-right: .5rem; }
}
.admin-sav .gomb.masodlagos { background: #1f1205; color: #fff; border-color: #1f1205; }

/* ======================================================================
   Admin felület (/admin)
   ====================================================================== */
.admin-szamok {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem;
    margin-bottom: 1.5rem;
}
.admin-szam, .admin-szam > a {
    display: flex; flex-direction: column; gap: .15rem;
    color: inherit; text-decoration: none;
}
.admin-szam {
    background: var(--lap); border: 1px solid var(--vonal); border-radius: var(--kerekites);
    padding: .85rem 1rem;
}
.admin-szam b { font-family: var(--kijelzo); font-weight: 400; font-size: 2.1rem; line-height: 1; color: var(--sanc-sotet); }
.admin-szam span { color: var(--szoveg-2); font-size: .9rem; line-height: 1.3; }
.admin-racs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; align-items: start; }
.admin-tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.admin-tabla th { text-align: left; font-weight: 600; color: var(--szoveg-2); font-size: .85rem; padding: .4rem .5rem; border-bottom: 2px solid var(--vonal); }
.admin-tabla td { padding: .5rem; border-bottom: 1px solid var(--vonal); vertical-align: top; overflow-wrap: anywhere; }
.admin-tabla td .cimke { margin-right: .3rem; }
.admin-ido { white-space: nowrap; color: var(--szoveg-2); }
.admin-sql { margin-top: 1rem; }
.admin-sql summary { cursor: pointer; font-weight: 600; }
.admin-sql pre { background: var(--papir); border: 1px solid var(--vonal); border-radius: 8px; padding: .75rem; overflow-x: auto; font-size: .85rem; }
.cimke.aktiv, a.cimke.aktiv { background: var(--kiemelt-hatter); color: var(--kiemelt-szoveg); border-color: transparent; }
a.cimke { text-decoration: none; }
a.cimke:hover { border-color: var(--sanc); }
@media (max-width: 900px) {
    .admin-racs { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================================
   Hírek: főoldali doboz, lista (/hirek), cikk (/hir/12), szerkesztő
   ====================================================================== */
.hir-mini-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hir-mini-lista li { border-top: 1px solid var(--vonal); }
.hir-mini-lista li:first-child { border-top: 0; }
.hir-mini-lista a { display: flex; gap: .75rem; align-items: flex-start; padding: .6rem 0; color: inherit; text-decoration: none; }
.hir-mini-lista a:hover b { color: var(--sanc-sotet); }
.hir-mini-lista img { width: 96px; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.hir-mini-lista .elso a { flex-direction: column; padding-top: 0; }
.hir-mini-lista .elso img { width: 100%; border-radius: 8px; }
.hir-mini-lista .elso b { font-size: 1.15rem; }
.hm-szoveg { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.hm-szoveg b { line-height: 1.3; overflow-wrap: anywhere; }
.hm-datum { color: var(--halvany); font-size: .85rem; display: flex; align-items: center; gap: .4rem; }
.hm-kivonat { color: var(--szoveg-2); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fo-hirek-lab { margin: .6rem 0 0; }

.hir-tagfelho { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.25rem; }
.hir-tagfelho .cimke { font-size: .9rem; padding: .2rem .65rem; }
.hir-tagfelho .cimke .halvany { font-weight: 500; }
.hir-tagfelho .cimke.aktiv .halvany { color: inherit; opacity: .75; }

.hir-kartyak { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.hir-kartyak.kicsi { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.hir-kartya {
    display: flex; flex-direction: column; height: 100%;
    background: var(--lap); border: 1px solid var(--vonal); border-radius: var(--kerekites); overflow: hidden;
    color: inherit; text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.hir-kartya:hover { border-color: var(--sanc); transform: translateY(-2px); text-decoration: none; }
.hir-kartya.nem-lathato { border-style: dashed; }
.hir-kartya.nem-lathato img { opacity: .6; }
.hir-kartya img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; }
.hk-test { display: flex; flex-direction: column; gap: .35rem; padding: .85rem 1rem 1rem; }
.hk-datum { color: var(--halvany); font-size: .85rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.hk-cim { font-weight: 700; font-size: 1.1rem; line-height: 1.3; overflow-wrap: anywhere; }
.hir-kartyak.kicsi .hk-cim { font-size: 1rem; }
.hk-kivonat { color: var(--szoveg-2); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.hir-lapozo { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.5rem; }
@media (prefers-reduced-motion: reduce) { .hir-kartya, .hir-kartya:hover { transition: none; transform: none; } }

.hir-cikk { max-width: 760px; margin: 0 auto; }
.hir-cikk-fej { margin-bottom: 1.25rem; }
.hir-cikk-datum { color: var(--halvany); margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; }
.hir-cikk-fej h1 { overflow-wrap: anywhere; }
.hir-cikk-bevezeto { font-size: 1.2rem; line-height: 1.5; color: var(--szoveg-2); margin: .9rem 0 0; }
.hir-cikk-szerzo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: 1rem; }
.hir-szerzo { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: inherit; }
.hir-szerzo img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.hir-cikk-szerzo .gomb { margin-left: auto; }
.hir-cikk-kep { width: 100%; height: auto; border-radius: var(--kerekites); margin: 0 0 1.5rem; display: block; }
.hir-cikk-szoveg { font-size: 1.08rem; line-height: 1.7; overflow-wrap: anywhere; }
.hir-cikk-szoveg h2 { font-size: 1.45rem; margin: 2rem 0 .6rem; }
.hir-cikk-szoveg h3 { font-size: 1.2rem; margin: 1.5rem 0 .5rem; }
.hir-cikk-szoveg p { margin: 0 0 1.1rem; }
.hir-cikk-szoveg ul { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.hir-cikk-szoveg li { margin: .25rem 0; }
.hir-cikk-szoveg a { color: var(--sanc-sotet); }
.hir-cikk-tagek { margin-top: 1.5rem; }
.hir-tobbi { max-width: 760px; margin: 2.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--vonal); }

.hir-szoveg-mezo { min-height: 22rem; }
.hir-tag-javaslat { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .35rem; font-size: .9rem; }
.hir-tag-javaslat button.cimke { cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600; }
.hir-tag-javaslat button.cimke:hover { border-color: var(--sanc); }
.hir-sugo dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; margin: 0; font-size: .9rem; }
.hir-sugo dt { white-space: nowrap; }
.hir-sugo dd { margin: 0; color: var(--szoveg-2); }
.hir-sugo code { background: var(--papir); padding: .05rem .3rem; border-radius: 4px; font-size: .85rem; }

/* --- hír: tetszik / nem tetszik, hozzászólások száma, hozzászólások --- */
.hir-reakciok {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
    margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--vonal);
}
.hir-reakciok .szavazat:empty { display: inline-block; min-width: .5rem; }
.hir-hsz-szam { font-weight: 600; color: var(--sanc-sotet); }
.hir-hozzaszolasok { max-width: 760px; margin: 1.5rem auto 0; }
.hir-szamok { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .9rem; color: var(--halvany); font-size: .85rem; font-variant-numeric: tabular-nums; }
.hir-szamok > span { display: inline-flex; align-items: center; gap: .3rem; }
.hir-szamok svg { flex-shrink: 0; }
.hk-test .hir-szamok { margin-top: .15rem; }

/* --- felmérő levelek válasza (/valasz/{kulcs}) és a vezérlőpult "Még fut" gombja --- */
.valasz-doboz { max-width: 440px; }
.valasz-edzes {
    display: flex; flex-direction: column; gap: .15rem;
    padding: .85rem 1rem; border: 1px solid var(--vonal); border-left: 4px solid var(--sanc);
    border-radius: var(--kerekites); background: var(--lap);
}
.valasz-edzes b { font-size: 1.1rem; }
.valasz-edzes span { color: var(--szoveg-2); }
.valasz-gombok { display: flex; flex-direction: column; gap: .75rem; margin: 0; }
.valasz-gomb {
    display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; text-align: left;
    width: 100%; padding: .9rem 1rem; cursor: pointer;
    font: inherit; color: var(--szoveg); background: var(--lap);
    border: 1px solid var(--vonal); border-radius: var(--kerekites);
}
.valasz-gomb b { font-size: 1.05rem; }
.valasz-gomb span { color: var(--szoveg-2); font-size: .92rem; line-height: 1.4; }
.valasz-gomb:hover, .valasz-gomb:focus-visible { border-color: var(--sanc); }
.valasz-gomb.fo { border-color: var(--sanc); background: var(--sanc-halvany); }
.pe-megfut { margin: 0; display: contents; }
.admin-halott h3 { font-size: 1.05rem; margin: 1rem 0 .5rem; }
.admin-tabla .szam { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- admin: felmérés táblázatai (/admin/edzesek, /admin/tagok) --- */
.admin-szuro {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem;
    background: var(--lap); border: 1px solid var(--vonal); border-radius: var(--kerekites);
    padding: .9rem 1rem; margin-bottom: 1rem;
}
.admin-szuro .mezo { min-width: 160px; flex: 0 1 200px; }
.admin-szuro .mezo:first-child { flex: 1 1 260px; }
.admin-szuro .mezo > span { font-weight: 600; font-size: .85rem; color: var(--szoveg-2); }
.admin-szuro .pipa { align-self: center; }
.admin-szuro-gombok { display: flex; gap: .5rem; margin-left: auto; }
.admin-fulek { margin-bottom: 1rem; }
.admin-talalat { margin: 0 0 .5rem; }
.admin-tabla-keret { overflow-x: auto; border: 1px solid var(--vonal); border-radius: var(--kerekites); background: var(--lap); }
.admin-felmeres { min-width: 860px; }
.admin-felmeres th { position: sticky; top: 0; background: var(--lap); }
.admin-felmeres td, .admin-felmeres th { padding-left: .75rem; padding-right: .75rem; }
.admin-felmeres tr.all td { opacity: .65; }
.admin-felmeres tr.hibas td { background: color-mix(in srgb, var(--betelt) 6%, transparent); }
.admin-felmeres .allapot { white-space: nowrap; }
.admin-al { display: block; color: var(--halvany); font-size: .82rem; line-height: 1.35; margin-top: .1rem; }
.admin-levelek { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; }
.admin-levelek li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; }
.admin-levelek li.hibas { color: var(--betelt); }
.admin-levelek .admin-ido { min-width: 3.6rem; }
.cimke.valasz { background: color-mix(in srgb, var(--szabad) 14%, var(--lap)); color: var(--szoveg); border-color: color-mix(in srgb, var(--szabad) 45%, transparent); }
@media (max-width: 700px) {
    .admin-szuro .mezo { flex: 1 1 100%; }
    .admin-szuro-gombok { margin-left: 0; }
}

/* --- admin: nem létező e-mail cím, de aktív tag --- */
.admin-figyelem { border-left: 4px solid var(--betelt); }
.cimke.hiba-cimke { background: var(--betelt); color: #fff; border-color: var(--betelt); font-weight: 700; letter-spacing: .02em; }
.admin-megoldva { display: flex; gap: .4rem; align-items: center; margin: 0; }
.admin-megoldva input[type="text"] { min-width: 180px; padding: .35rem .5rem; font-size: .9rem; }

/* --- figyelmeztetés: a tag e-mail címe nem létezik (db/011) --- */
.email-hiba-sav { background: color-mix(in srgb, var(--betelt) 12%, var(--lap)); border-bottom: 2px solid var(--betelt); color: var(--szoveg); }
.email-hiba-sav-belso {
    max-width: var(--szelesseg); margin: 0 auto; padding: .7rem 16px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; font-size: .95rem;
}
.email-hiba-sav b { color: var(--betelt); }

/* a plakettekre kattintva bárhol a Támogatás oldal jön fel (site.js) */
.plakett { cursor: pointer; }

/* doboz alján egy "tovább" link (pl. a főoldali felfedező doboz: Minden edzés) */
.fo-doboz-lab { margin: .9rem 0 0; text-align: right; }
.fo-doboz-lab a { font-weight: 700; color: var(--sanc-sotet, var(--sanc)); text-decoration: none; }
.fo-doboz-lab a:hover { text-decoration: underline; }

/* Profil oldal admin módban (más tag profilja): figyelmeztető címke a név fölött */
.admin-szerkeszt-jel { display: inline-block; margin: 0 0 .35rem; padding: .15rem .6rem; border-radius: 999px; background: var(--sanc); color: #fff; font-size: .8rem; font-weight: 700; }