:root {
    --color-navy: #101c3d;
    --color-navy-light: #16234a;
    /* rgba()-hoz vesszővel tagolt RGB-triplet — lásd .chart-axis-arrow-line/
       .chart-axis-arrow-head (ugyanez a szín, csak áttetszőn). */
    --color-navy-rgb: 16, 28, 61;
    --color-gold: #c9a227;
    --color-gold-light: #e0bd4f;
    /* rgba()-hoz vesszővel tagolt RGB-triplet — lásd .chart-area. Ugyanaz az
       érték, mint a --color-gold fent, csak rgba()-kompatibilis formában. */
    --color-gold-rgb: 201, 162, 39;
    /* Sötét szövegszín arany hátterű elemekhez (chip-active, gomb stb.) —
       korábban 2 majdnem azonos hardkódolt szín volt (#201a05 / #241d06),
       most egységesen ez. */
    --color-on-gold: #201a05;
    /* Kizárólag az Arany/Mix/Ezüst fül-pill (.asset-tab) használja — Ezüst
       fülön KIZÁRÓLAG maga a fül-pill vált ezüst-színűre (lásd
       [data-asset="silver"] lent); a "Befektetési időszak (év)" és a "Havi
       alapbefektetés" chipjei, valamint minden más gomb (Számítás, PDF,
       fókusz-keret, grafikon stb.) mindig --color-gold marad, fültől
       függetlenül. */
    --color-tab-accent: var(--color-gold);
    --color-on-tab-accent: var(--color-on-gold);
    /* Az egyfémes grafikon vonalának (.chart-line-value) és alsó kitöltött
       sávjának (.chart-area) színe — Ezüst fülön mindkettő ezüst-tónusú lesz
       (lásd [data-asset="silver"] lent). Mix-nél nincs felülírás (a Mix-
       grafikon saját, rögzített színű vonalakat használ, lásd
       .chart-line-value-silver, és nincs .chart-area kitöltése sem). */
    --color-chart-accent: var(--color-gold);
    --color-chart-accent-rgb: var(--color-gold-rgb);
    /* Ezüst árnyalat — a [data-asset="silver"] felülírásban ÉS a Mix fül-pill
       kétszínű (fél arany / fél ezüst) hátterében is ugyanez az egy érték
       számít, lásd .asset-tab:has(input[value="mix"]) lent. */
    --color-silver: #9AA5B1;
    /* Eredetileg a form-oldali "irányító" elemek (chipek, Számítás gomb,
       kapcsolók) is ezt a közös kék színt használták, de a felhasználó
       kérésére ezek visszaálltak aranyra (lásd .chip.chip-active,
       .chip-radio:has(input:checked), .lumpsum-check input:checked ~
       .lumpsum-check-circle — a .calc-form .btn-primary felülírás pedig meg
       is szűnt, az alap .btn-primary aranya érvényesül). Mostantól
       KIZÁRÓLAG a "PDF letöltése" gomb (.btn-pdf, lásd lent) használja, hogy
       megegyezzen a fejléc (.topbar) --color-navy/--color-navy-light
       színével. */
    --color-control-blue: var(--color-navy);
    --color-control-blue-light: var(--color-navy-light);
    --color-on-control-blue: #ffffff;
    /* Halvány kék háttér — a felhasználó által feltöltött színminta alapján,
       MINDEN oldalon (nem csak a Szimulátoron), mert ez a közös body{}
       háttere (lásd lent). */
    --color-bg: #eef3fb;
    --color-card: #ffffff;
    --color-card-border: #e6e8ee;
    --color-text: #1c2333;
    --color-text-muted: #6b7280;
    --color-positive: #1a7f45;
    --color-negative: #b3261e;
    /* rgba()-hoz — a Hírek "Rendszer" kategória-jelvényéhez (50%-os
       átlátszóság, lásd .news-category-badge-rendszer). */
    --color-negative-rgb: 179, 38, 30;
    /* Csak a Hírek "Rendezvények" kategóriájához (jelvény + chip-radio
       kijelölt szín) — nincs máshol a site-on kék UI-elem. */
    --color-blue: #2563eb;
    --color-blue-rgb: 37, 99, 235;
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow-card: 0 1px 3px rgba(16, 28, 61, 0.06), 0 1px 2px rgba(16, 28, 61, 0.04);
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Ezüst fül aktív állapota (lásd partials/asset_tabs.php, data-asset a
   <main>-en) — a --color-tab-accent/--color-on-tab-accent változókon
   keresztül KIZÁRÓLAG az Arany/Mix/Ezüst fül-pill maga (lásd .asset-tab) és
   a mezők fókusz-kerete (.calc-form input:focus) vált ezüst-tónusúra. A
   --color-chart-accent/--color-chart-accent-rgb (grafikonvonal + kitöltés)
   szintén ezüstre vált. A "Befektetési időszak (év)"/"Havi alapbefektetés"
   chipjei, a Számítás gomb és a kapcsolók (.chip, .chip-radio,
   .calc-form .btn-primary, .lumpsum-check) SZÁNDÉKOSAN NEM követik ezt —
   azok mindig arany (--color-gold) maradnak, fültől függetlenül (a
   felhasználó kérésére, miután egy korábbi kísérletben ideiglenesen a közös
   --color-control-blue "irányító" színt kapták — lásd megjegyzését lent). Az
   "Aktuális érték" kártya száma (.stat-card-accent .stat-value) VISZONT
   a fém-témát követi (--color-tab-accent) — arany fülön arany, itt ezüst.
   [data-asset="mix"]-nél SZÁNDÉKOSAN nincs felülírás (a Mix mindig
   arany-témájú marad, a Mix-grafikonnak pedig saját, kétszínű kitöltése
   van, lásd ChartSvg::renderMix()). */
[data-asset="silver"] {
    --color-tab-accent: var(--color-silver);
    --color-on-tab-accent: #1c2226;
    --color-chart-accent: var(--color-silver);
    --color-chart-accent-rgb: 154, 165, 177;
}

/* ============================================================
   TIPOGRÁFIAI ALAPMÉRET

   A projekt MINDEN betűmérete rem-ben van megadva, ezért a gyökérméret
   egyetlen pontból, arányosan skálázza az egész tipográfiát — nem kell
   88 helyen külön állítgatni.

   Alapból a böngésző alapértelmezett 16px-je érvényes (tablet/asztali
   nem skálázódik fel). Telefonon (keskeny képernyőn) viszont 15%-kal
   nagyobb betű van beállítva, mert ott a felhasználó közelebbről olvas.
   ============================================================ */
html { font-size: 16px; }

@media (max-width: 640px) {
    html { font-size: 18.4px; }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    overflow-x: hidden;
}

a {
    color: inherit;
}

/* Topbar */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 24px;
    background: var(--color-navy);
    color: #fff;
}

.brand {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    /* A "GGHungary" felirat mostantól /login-ra vivő link, ha még senki
       sincs bejelentkezve — de vizuálisan ugyanúgy nézzen ki, mint eddig
       (nincs alávonás), ne tűnjön hagyományos linknek. */
    text-decoration: none;
}

.brand span {
    color: var(--color-gold-light);
}

.topbar-account {
    position: relative;
}

.topbar-account-toggle {
    /* Egy <button> a böngésző saját alap-színét/betűtípusát kapja, NEM
       örökli automatikusan a szülőtől (ellentétben egy sima <div>-vel,
       mint amilyen a másik ág "GGHungary" márkaneve) — enélkül a
       "color: inherit" / "font-family: inherit" nélkül feketén jelenne
       meg a span-en kívüli rész. A font-weight/font-size viszont a
       .brand osztályból jön, NEM a "font: inherit" rövidített formából —
       az a font-weight/font-size-t is felülírná, eltüntetve a vastag,
       nagyobb betűstílust. Opacity sincs itt megadva — nyugalmi
       állapotban pixel-pontosan ugyanúgy nézzen ki, mint a sima
       "GGHungary" márkanév. */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
}

.topbar-account-toggle:hover {
    text-decoration: underline;
}

/* 2026-09-14: a menü EGYETLEN kártya (a felhasználó kérésére — a korábbi,
   Help Desk/Kapcsolatok közötti két-kártyás szétválasztásnál a résben
   átlátszott a lap háttere/szövege, ami hibának hatott). A kártyán belüli
   sorok normál, egyenletes távolságra vannak egymástól; a kártya tetején/
   alján (padding-top/bottom) van csak kicsivel nagyobb térköz, mint a
   kártya oldalain (padding-left/right), a felhasználó kérésére. */
.topbar-account-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    min-width: 220px;
    padding: 10px 6px;
    overflow: hidden;
    z-index: 20;
}

.topbar-account-menu[hidden] {
    display: none;
}

.topbar-account-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 9px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.97rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.topbar-account-menu-item:hover {
    background: var(--color-bg);
}

/* Ikon-csík mód (2026-09-19, a felhasználó kifejezett kérésére, mobil
   képernyőn) — amikor a "Link gyűjtemény" almenüje oldalra (jobbra)
   nyílna, de a teljes, feliratozott menü szélessége miatt nincs hely
   mellette, a topbar.php JS-e (positionFlyout()) erre az osztályra vált:
   a menü csak az ikon-buborékokra szűkül (a feliratok/csoport-címkék
   eltűnnek), így a mobil képernyő nagy része felszabadul az almenünek. */
.topbar-account-menu.is-collapsed {
    min-width: 0;
    width: max-content;
}

.topbar-account-menu.is-collapsed .topbar-account-menu-item {
    justify-content: center;
    padding: 11px;
    gap: 0;
}

.topbar-account-menu.is-collapsed .topbar-account-menu-item-label,
.topbar-account-menu.is-collapsed .topbar-account-menu-group-caption,
.topbar-account-menu.is-collapsed .link-gy-trigger-chevron {
    display: none;
}

/* Kör alakú ikon-buborék minden menüsor előtt (2026-09-14, "v3"
   elrendezés) — alapból halvány szürke, a kiemelt sorok (Saját adataim,
   Meghívó, Kijelentkezés) saját színű tintet kapnak lejjebb. */
.topbar-account-menu-item-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-bg);
}

.topbar-account-menu-item-chip svg {
    width: 14px;
    height: 14px;
    color: var(--color-text-muted);
}

/* "Saját adataim" — mindig az első sor, saját fiók, ezért vizuálisan
   kiemelt (arany szín). A "mindig látható, személyes" csoport (Saját
   adataim, admin nézetben + Help Desk) és az "admin jogkörhöz kötött
   kezelői" csoport (Kapcsolatok, Rendezvények, ...) elkülönítése mostantól
   nem egy hairline vonallal, hanem két külön kártyával történik — lásd
   .topbar-account-menu-section és partials/topbar.php (2026-09-14). */
.topbar-account-menu-item-primary {
    color: var(--color-gold);
    font-weight: 700;
    border-radius: 9px 9px 0 0;
}

.topbar-account-menu-item-primary .topbar-account-menu-item-chip {
    background: rgba(var(--color-gold-rgb), 0.15);
}

.topbar-account-menu-item-primary .topbar-account-menu-item-chip svg {
    color: var(--color-gold);
}

/* Help Desk + Kapcsolatok pár — vizuálisan elkülönül a fölötte/alatta lévő
   sortól, hajszálvékony vonallal + apró "ADMIN" felirattal a pár fölött (a
   felhasználó kifejezett kérésére, 2026-09-14, screenshot alapján pontosan
   ez a kinézet). A pár BELSEJÉBEN (Help Desk és Kapcsolatok között) a
   távolság nem változik, csak a pár előtt/után jelenik meg a vonal. */
.topbar-account-menu-group-caption {
    margin-top: 4px;
    padding: 10px 14px 2px;
    border-top: 1px solid var(--color-card-border);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* "Online szerződések" gyűjtőmenü (2026-09-24) — a sorra kattintva a menün
   belül, a sor alatt nyílik le a két almenüpont. */
.topbar-submenu-chevron {
    margin-left: auto;
    padding-left: 4px;
    font-size: 20px;
    line-height: 1;
    color: var(--color-text-muted);
    transition: transform 0.15s ease;
}

.topbar-account-submenu {
    display: flex;
    flex-direction: column;
    padding: 2px 0 6px 52px;
}

.topbar-account-submenu[hidden] {
    display: none;
}

.topbar-account-submenu-item {
    padding: 8px 14px 8px 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
}

.topbar-account-submenu-item:hover {
    color: var(--color-gold);
}

.topbar-account-menu.is-collapsed .topbar-account-submenu,
.topbar-account-menu.is-collapsed .topbar-submenu-chevron {
    display: none;
}

.topbar-account-menu-item-group-end {
    border-bottom: 1px solid var(--color-card-border);
    padding-bottom: 9px;
    margin-bottom: 4px;
}

/* "Link gyűjtemény" kapcsolt almenüje — a sor MELLETT (jobbra) nyílik ki,
   hozzá vizuálisan kapcsolódva egy "beszédbuborék"-szerű háromszög-
   csatlakozóval (2026-09-19, a felhasználó kifejezett kérésére, mockup
   alapján). Felül a "Link hozzáadása" gomb (ez nyitja meg a teljes
   szerkesztő ablakot, #linkGyOverlay), alatta a mentett linkek,
   kattinthatóan. A `.topbar-account-menu` `overflow: hidden`-je levágná
   egy CSS-only oldalra-nyíló panelt, ezért a topbar.php JS-e megnyitáskor
   kiemeli a `document.body` alá, `position: fixed`-del, a kattintott sor
   `getBoundingClientRect()`-jéből számolt pontos koordinátákkal — így
   sosem vágódik le, és keskeny nézeten (nincs elég hely jobbra) a JS a
   `.link-gy-flyout-flip` osztállyal balra nyitja helyette. */
.link-gy-trigger-chevron {
    margin-left: auto;
    padding-left: 4px;
    font-size: 20px;
    line-height: 1;
    color: var(--color-text-muted);
}

.link-gy-flyout {
    position: fixed;
    /* 2026-09-24, felhasználói kérés: eddig fix 220px széles volt, ami
       hosszabb linkneveket levágott "…"-tal még akkor is, ha egyébként
       bőven volt hely mellette (lásd screenshot). Mostantól a doboz a
       TARTALOMHOZ igazodik (nő, ha kell) — "minden link férjen ki, ha van
       hely" a felhasználó szó szerinti kérése, ezért SZÁNDÉKOSAN nincs
       önkényes felső korlát (pl. 420px), csak a tényleges elérhető hely
       (viewport szélessége) szab határt — ez adja a "kisebb képernyőn
       legyen dinamikus" részt is: keskeny nézeten automatikusan szűkül,
       és a lenti .link-gy-flyout-link "…"-ja veszi át a szerepet, ha egy
       névnek MÉG a teljes viewport szélesség mellett sem lenne elég hely.
       220px-es minimum alatt nem megy, hogy rövid listáknál se tűnjön
       összenyomottnak. A JS (positionFlyout()) a tényleges renderelt
       szélességet (offsetWidth) olvassa ki, nem feltételez fix értéket,
       tehát ez a változás vele automatikusan összhangban van. */
    width: max-content;
    min-width: 220px;
    max-width: calc(100vw - 24px);
    z-index: 1200;
    padding: 10px;
    background: var(--color-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
}

.link-gy-flyout[hidden] { display: none; }

.link-gy-flyout::before {
    content: "";
    position: absolute;
    top: 14px;
    left: -7px;
    width: 12px;
    height: 12px;
    background: var(--color-bg);
    border-left: 1px solid var(--color-card-border);
    border-bottom: 1px solid var(--color-card-border);
    transform: rotate(45deg);
}

.link-gy-flyout.link-gy-flyout-flip::before {
    left: auto;
    right: -7px;
    border-left: none;
    border-bottom: none;
    border-right: 1px solid var(--color-card-border);
    border-top: 1px solid var(--color-card-border);
}

.link-gy-flyout-add {
    display: block;
    width: 100%;
    padding: 8px;
    margin-bottom: 6px;
    border: none;
    border-radius: 8px;
    background: var(--color-gold);
    color: var(--color-navy);
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
}

.link-gy-flyout-add:hover { background: var(--color-gold-light); }

.link-gy-flyout-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 180px;
    overflow-y: auto;
}

.link-gy-flyout-link {
    display: block;
    padding: 7px 8px;
    border-radius: 7px;
    color: var(--color-text);
    font-weight: 600;
    /* 2026-09-19, a felhasználó kifejezett kérésére: pontosan a bal oldali
       account-menü sorainak betűmérete (.topbar-account-menu-item —
       0.97rem), hogy a linkgyűjtemény szövege ne tűnjön aprónak a menü
       többi sorához képest. */
    font-size: 0.97rem;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link-gy-flyout-link:hover { background: rgba(16, 28, 61, 0.06); }

.link-gy-flyout-empty {
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
    margin: 4px 0 2px;
}

/* Kijelentkezés — mindig az utolsó sor, elválasztva és halványan
   figyelmeztető (piros) színnel jelezve, hogy ez egy kilépő akció. */
.topbar-account-menu-item-logout {
    margin-top: 4px;
    padding-top: 11px;
    border-top: 1px solid var(--color-card-border);
    color: var(--color-negative);
}

.topbar-account-menu-item-logout:hover {
    background: rgba(179, 38, 30, 0.08);
}

.topbar-account-menu-item-logout .topbar-account-menu-item-chip {
    background: rgba(179, 38, 30, 0.1);
}

.topbar-account-menu-item-logout .topbar-account-menu-item-chip svg {
    color: var(--color-negative);
}

/* 2026-10-11: "Teszt" menüpont (tesztelő tagnak / főadminnak) — a Szimulátor Pro fül megjelenése: kékes háttér, arany szegély.
   Közvetlenül a Kilépés fölött áll. */
.topbar-account-menu-item.topbar-account-menu-item-test {
    background: #1c2c5f;
    border: 1.5px solid var(--color-gold);
    border-radius: 12px;
    color: var(--color-gold-light);
    margin-top: 4px;
}
.topbar-account-menu-item.topbar-account-menu-item-test:hover { background: #24387a; color: #fff; }
.topbar-account-menu-item-test .topbar-account-menu-item-chip { background: rgba(var(--color-gold-rgb), 0.18); }
.topbar-account-menu-item-test .topbar-account-menu-item-chip svg { color: var(--color-gold-light); }

/* "Meghívó" — az egyetlen menüpont, ahol a felhasználó MÁS EMBEREKET hív
   be a rendszerbe, ezért arany tintű buborékot kap, mint a "Saját
   adataim" — a sor háttere viszont a felhasználó kérésére fehér marad. */
.topbar-account-menu-item-highlight .topbar-account-menu-item-chip {
    background: rgba(var(--color-gold-rgb), 0.15);
}

.topbar-account-menu-item-highlight .topbar-account-menu-item-chip svg {
    color: var(--color-gold);
}

/* margin-left:auto — a felhasználó kérésére a menü (fülek + nyelvváltó)
   akkor is a jobb szélhez tapadjon, ha a .topbar (szülő) flex-wrap miatt
   saját, önálló sorba törik (pl. admin névvel + "Letöltve" jelvénnyel a bal
   oldalon, szűkebb ablaknál): a .topbar-on lévő justify-content:space-between
   ugyanis EGYETLEN elemből álló törtsorban flex-start-ra esik vissza (ez a
   flexbox-spec viselkedése), tehát balra csúszna — az auto-margin viszont
   soronként külön-külön is mindig a rendelkezésre álló helyet szívja fel,
   ezért ez a hiba nélküli megoldás. */
.topbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 18px;
    font-size: 0.9rem;
    margin-left: auto;
}

.topbar-tab {
    white-space: nowrap;
}

.topbar-user {
    color: rgba(255, 255, 255, 0.7);
}

.topbar-link {
    text-decoration: none;
    color: #fff;
    opacity: 0.85;
}

.topbar-link:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Fülsáv: a két fő nézet (Szimulátor / Vizsga) közötti váltó a fejlécben. */

.topbar-tabs {
    display: flex;
    gap: 4px;
}

.topbar-tab {
    position: relative;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 16px;
    border-radius: 999px;
    transition: background 0.15s, color 0.15s;
}

/* Hírek olvasatlan-jelvény — CSAK bejelentkezve látszik (lásd
   partials/topbar.php), a felhasználó küldött referenciaképe alapján:
   piros kör, fehér félkövér szám, a fülsávban jobb felül átlógva. A
   .topbar-menu-item-en belül (mobil hamburger-lista) viszont a szöveg
   mellé, inline kerül — ott nincs értelme abszolút pozíciós "átlógásnak",
   mert a sor teljes szélességű, nem egy kis pill. */
.topbar-news-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #d92d20;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--color-navy);
}

.topbar-news-badge[hidden] {
    display: none !important;
}

.topbar-menu-item .topbar-news-badge,
.topbar-account-menu-item .topbar-news-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    box-shadow: none;
    vertical-align: middle;
}

/* A bejelentkezett név melletti olvasatlan-jelvény (2026-09-17 óta,
   legutóbb 2026-09-18-án véglegesítve, a felhasználó kifejezett
   kérésére) — korábban a névhez (topbar-account-toggle) rögzített,
   lebegő "értesítés-pötty" volt (top/right offset, absolute pozíció),
   de ez rövid nevek (pl. "admin") mellett, ha volt "LETÖLTÉS/LETÖLTVE"
   gomb is a sorban, belelógott a gomb szövegébe. Mostantól a
   .topbar-brand-group flex-sorának NORMÁL, önálló eleme (lásd
   partials/topbar.php — a span a .topbar-account div UTÁN, a Letöltés
   gomb ELŐTT van a DOM-ban), a szülő `gap` tulajdonsága (14px) adja a
   távolságot MINDKÉT szomszédja felé — ez a jelvény szélességétől
   (1 vagy 2 számjegy) FÜGGETLENÜL mindig egyenlő, dinamikusan
   alkalmazkodó térköz, és soha nem takarhat/lóghat bele semmibe. A
   `.topbar-brand-group { align-items: center }` gondoskodik a
   függőleges középre igazításról — ugyanaz a mértani középpont, amihez a
   névszöveg (GGHungary/admin) és a Letöltés gomb is igazodik (lásd
   .topbar-download-btn) — a jelvény mérete (18px) jóval a sor tényleges
   magassága alatt van, ezért vizuálisan pontosan a szöveg/gomb közös
   függőleges közepén ül, nem attól függetlenül lebeg.
   2026-09-19, a felhasználó kifejezett kérésére: a jelvény MAGASSÁGA
   pontosan egyezzen a jobb oldali Hírek fülön lévő jelvényével
   (.topbar-tab .topbar-news-badge, ami a fülsáv tetejéhez képest
   `top: -6px`-re lebeg, lásd lentebb) — CDP-vel mérve, 1400px asztali
   nézetben, a két jelvény teteje között 15.8px eltérés volt (a mostani
   jelvény lejjebb ült, mert a normál flex-sor közepéhez igazodik, nem a
   fejléc tetejéhez). A `position: relative; top: -16px;` ezt az
   eltérést szünteti meg — RELATÍV pozíció, tehát a normál flex-flow
   RÉSZE marad (a szomszédok `gap`-je nem változik, csak a jelvény
   RENDERELT helye tolódik felfelé), nem esik vissza az elavult, a
   szomszédba lelógó absolute-pozíciós hibába. */
.topbar-account-badge {
    position: relative;
    top: -16px;
    box-shadow: none;
    flex-shrink: 0;
}

.topbar-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.topbar-tab.is-active {
    background: var(--color-gold);
    color: #201a05;
}

/* Nyelvváltó — csak a MÁSIK nyelv linkje jelenik meg (ha HU-n vagyunk,
   csak "EN" linkelt, ha EN-en vagyunk, csak "HU"), sosem mindkettő
   egyszerre — ez helyet spórol, ezért nincs is elválasztó vonal/extra
   margó a fülsor és e között (lásd partials/topbar.php,
   assets/js/simulator-offline.js, assets/js/bemutato-offline.js). */

.topbar-lang {
    display: flex;
    position: relative;
}

.topbar-lang-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    cursor: pointer;
    line-height: 1;
}

.topbar-lang-toggle:hover {
    background: rgba(255, 255, 255, 0.16);
}

.topbar-lang-flag {
    font-size: 1.1rem;
    line-height: 1;
}

/* Téma-váltó (lámpa) — a nyelvváltó zászló mellett, ugyanolyan méretű gomb (lásd partials/topbar.php). A felhasználó kérése: ha a lámpa
   VILÁGÍT (arany izzó), akkor sötét mód van; ha nem világít (halvány körvonal), akkor világos mód (ez az alapértelmezett). */
.topbar-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    cursor: pointer;
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
}
.topbar-theme-toggle:hover { background: rgba(255, 255, 255, 0.16); }
.topbar-theme-toggle:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.topbar-theme-toggle svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; }
html[data-theme="dark"] .topbar-theme-toggle { color: var(--color-gold-light); }
html[data-theme="dark"] .topbar-theme-toggle .bulb-glass { fill: var(--color-gold-light); stroke: var(--color-gold-light); }
html[data-theme="dark"] .topbar-theme-toggle svg { filter: drop-shadow(0 0 4px rgba(224, 189, 79, 0.55)); }

.topbar-lang-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 6px;
    z-index: 20;
}

.topbar-lang-menu[hidden] {
    display: none;
}

.topbar-lang-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--color-text, #1a2340);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 8px 12px;
    border-radius: 8px;
    white-space: nowrap;
}

.topbar-lang-menu-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* Hamburger menü — a felhasználó kérésére csak keskeny nézeten (mobil
   álló/fekvő, tablet álló — lásd @media (max-width: 960px) lent) váltja fel
   a .topbar-tabs folytatólagosan tördelő fülsorát, ami ott túl zsúfoltnak
   bizonyult. Asztali/tablet-fekvő nézeten (960px fölött) ez rejtve marad, a
   .topbar-tabs változatlanul látszik. A minta pontosan a
   bemutato/style.css .bemutato-menu-jét követi (checkbox + label +
   :checked ~ panel, nincs hozzá JS) — csak a fejléc sötétkék hátteréhez
   igazítva fehér a 3 csík (a bemutató oldalfejléce fehér, ott navy). */
.topbar-menu {
    position: relative;
    display: none;
}

.topbar-menu-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.topbar-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    height: 22px;
    cursor: pointer;
}

.topbar-menu-btn span {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: #fff;
}

.topbar-menu-panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 210px;
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    z-index: 30;
}

.topbar-menu-input:checked ~ .topbar-menu-panel {
    display: block;
}

.topbar-menu-item {
    display: block;
    padding: 10px 16px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}

.topbar-menu-item:hover {
    background: var(--color-bg);
}

.topbar-menu-item.is-active {
    background: var(--color-gold);
    color: #201a05;
}

/* Layout */

.layout {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 28px;
    max-width: 1600px;
    margin: 24px auto;
    padding: 0 24px;
    align-items: start;
}

/* A #turboNoteBand a .layout ALATT, önálló, teljes szélességű elemként —
   ugyanazzal a max-width/padding-gel, mint a .layout, hogy a szélei
   pontosan a két oszlop alá illeszkedjenek. A felhasználó kérésére a
   Turbo-magyarázat a képernyőn többé NEM jelenik meg automatikusan itt
   (csak a Turbo mód melletti info-ikonra kattintva, lásd #turboField
   [data-info-panel]) — ez a sáv a live/offline nézetben ezért mindig
   üresen marad, csak a letölthető/nyomtatható PDF-összesítőben szerepel a
   szövege (lásd assets/js/simulator-offline.js buildTurboNoteHtml()). Az
   üres állapot nem ad hozzá extra függőleges margót/paddingot. */
.turbo-note-band {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Grid-elemek alapból NEM zsugorodnak a saját tartalmuk minimális szélessége
   alá (böngésző-alapértelmezés: min-width:auto) — telefonon, ahol a .layout
   egyetlen oszlopra vált (lásd lejjebb), ez Mix módban ténylegesen
   túlcsordulást okozott: a Mix-specifikus extra tartalom (kettős
   gramm-kijelzés/jelmagyarázat) miatt a közös oszlop szélesebbre kényszerült
   a képernyőnél, és az Arany/Ezüst fül is ugyanígy szélesedett volna, ha
   bármikor hasonlóan széles tartalmat kapna. A min-width:0 feloldja ezt —
   a tartalom ehelyett normálisan tördelődik/görgethetővé válik a saját
   dobozán belül, nem tolja szét az egész oszlopot. */
.form-column,
.results-panel {
    min-width: 0;
}

.layout-single {
    grid-template-columns: minmax(0, 640px);
    justify-content: center;
}

/* A form-panelt (és az offline shell megfelelőjét) a fölötte lévő
   al-navigációval (Befektetés / Életjáradék) egy vizuális egységbe fogja
   össze — lásd partials/simulator_subnav.php. */
.form-column {
    display: flex;
    flex-direction: column;
}

.subnav-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.subnav-tab {
    flex: 1;
    text-align: center;
    border: 1px solid var(--color-card-border);
    background: #fff;
    border-radius: 999px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.subnav-tab:hover {
    border-color: var(--color-tab-accent);
}

.subnav-tab.is-active {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: #fff;
}

.subnav-tab-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.subnav-tab-disabled:hover {
    border-color: var(--color-card-border);
}

/* Arany / Mix / Ezüst fülek. Az aktív fül háttere szándékosan
   var(--color-tab-accent)-ból jön (nem var(--color-navy)-ból) — ez a saját,
   kizárólag a .asset-tab által használt változó (lásd :root), ezért Ezüst
   fülön ez a pill automatikusan ezüst-színűre vált (lásd [data-asset="silver"]
   lejjebb), míg Arany/Mix-en változatlanul arany marad, mert a
   --color-tab-accent alapértéke var(--color-gold). A "Befektetési időszak
   (év)"/"Havi alapbefektetés" chipjei EZT a felülírást NEM követik, mindig
   --color-gold-ot használnak (lásd .chip, .chip-radio lejjebb). */
/* margin-top: 0 — az Arany/Mix/Ezüst fülek teteje a felhasználó kérésére
   pontosan a jobb oldali eredmény-doboz (.results-panel) felső szélével
   essen egybe. (Korábban 24px volt, hogy a fülek a most már megszűnt
   VIZSGÁLT IDŐSZAK sávval legyenek egy vonalban — az a sáv azóta lejjebb,
   a .form-meta-box-ba költözött, ez a kompenzáció már nem indokolt.) */
.asset-tab-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    margin-bottom: 14px;
}

.asset-tab {
    flex: 1;
    text-align: center;
    border: 1px solid var(--color-card-border);
    background: #fff;
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.asset-tab input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.asset-tab:hover {
    border-color: var(--color-tab-accent);
}

.asset-tab.is-active,
.asset-tab:has(input:checked) {
    background: var(--color-tab-accent);
    border-color: var(--color-tab-accent);
    color: var(--color-on-tab-accent);
}

/* A Mix fül aktív állapotban két színű: bal fele arany, jobb fele ezüst —
   ez felülírja a fenti egyszínű .asset-tab.is-active hátteret, kizárólag a
   value="mix" rádiógombot tartalmazó pillnél (lásd partials/asset_tabs.php,
   offline-szimulator.html). */
.asset-tab:has(input[value="mix"]).is-active,
.asset-tab:has(input[value="mix"]):has(input:checked) {
    background: linear-gradient(to right, var(--color-gold) 50%, var(--color-silver) 50%);
    border-color: transparent;
    color: var(--color-on-gold);
}

.layout-wide {
    grid-template-columns: minmax(0, 1100px);
    justify-content: center;
}

/* A grid-elem alapból nem zsugorodik a tartalma min-content szélessége alá
   (ugyanaz a jelenség, mint a fenti .form-column/.results-panel esetén) —
   a hirek.php/admin_helpdesk.php széles .news-table-wrap táblázata emiatt
   az EGÉSZ oldalt (fejlécet, füleket is) jobbra tolta mobilon, nem csak a
   táblázaton belül görgetett. A min-width:0 engedi zsugorodni a .panel-t a
   viewportig, a tényleges görgetést a .news-table-wrap végzi belül. */
.layout-wide > .panel {
    min-width: 0;
}

/* A "Kapcsolatok" (admin_registrations.php) tábla sok oszlopos (10) — 1100px-en
   mindig levágódik a jobb szélén. Oldal-szűkített felülírás (csak ezen az
   oldalon, a többi .layout-wide admin nézetet nem érinti). A .layout globális
   1600px-es max-szélessége korábban is levágta a táblát szélesebb (pl. 1728px+)
   asztali ablakban is — ezért itt a KÜLSŐ .layout max-width-öt is felülírjuk,
   nem csak a belső grid-oszlopot, hogy a tábla ténylegesen kihasználhassa a
   szélesebb asztali képernyőket is. */
.layout.layout-registrations-wide {
    max-width: 1900px;
}

.layout-wide.layout-registrations-wide {
    grid-template-columns: minmax(0, 1900px);
}

/* A "Hírek" (admin_news.php) táblázat "Műveletek" oszlopa (Szerkesztés +
   Törlés gomb egymás mellett) ugyanígy levágódott a 1100px-es .layout-wide
   szélességen — ugyanaz a felülírás, csak erre az oldalra. */
.layout.layout-news-wide {
    max-width: 1900px;
}

.layout-wide.layout-news-wide {
    grid-template-columns: minmax(0, 1900px);
}

/* hirek.php (nyilvános Hírek-lista) — a felhasználó kérésére ugyanolyan
   széles legyen, mint a Szimulátor/Tanulószoba/Vizsga (.layout/.study-layout
   1600px-es max-width-je), NE a .layout-wide alapértelmezett, szűkebb
   1100px-es korlátja. Szándékosan külön névvel, NEM a fenti
   .layout-news-wide-t újrahasznosítva — az az admin_helpdesk.php 1900px-es
   táblázatához tartozik, más célra. */
.layout-wide.layout-public-news-wide {
    grid-template-columns: minmax(0, 1600px);
}

/* Rendezvénynaptár (rendezveny-naptar/index.php + admin_events.php) — a
   felhasználó kérésére ugyanolyan széles, mint a Szimulátor/Tanulószoba/
   Vizsga/Hírek (.layout 1600px), ne a .layout-wide 1100px-es korlátja. */
.layout-wide.layout-events-wide {
    grid-template-columns: minmax(0, 1600px);
}

/* informaciok.php — ugyanaz a minta, mint a fenti .layout-public-news-wide:
   a felhasználó kifejezett kérésére ("teljes képernyős nézet") ugyanolyan
   1600px-es szélesség, mint a Szimulátor/Tanulószoba/Vizsga/Hírek. */
.layout-wide.layout-info-wide {
    grid-template-columns: minmax(0, 1600px);
}

/* Az Ügyfélszolgálat kártya (2026-09-24, felhasználói kérés) MINDIG legfelül,
   a bankszámla-rácstól ELKÜLÖNÜLVE — szándékosan NEM a .info-accounts-grid
   auto-fit oszlopainak egyike (egyetlen sornyi adat lenne benne, szélesen
   ugyanolyan szétnyújtva nézne ki, mint egy bankszámla-kártya, ami
   félrevezető méretet sugallna); max-width-del összefogott, önálló blokk. */
.info-support-block {
    max-width: 420px;
    margin-top: 16px;
    margin-bottom: 24px;
    /* 2026-09-24, felhasználói kérés: ez a halvány vonal korábban a törölt
       intro-szöveg (.form-intro-text) alján volt — most ide, az
       Ügyfélszolgálat és a bankszámla-kártyák KÖZÉ került. Ugyanaz a
       szín/vastagság, mint a .form-intro-text-é volt, hogy a többi hasonló
       oldal elválasztó vonalával vizuálisan egyezzen. */
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-card-border);
}

.info-support-block .section-title {
    margin-top: 0;
}

/* Az "Információk" oldal bankszámla-kártyái — a felhasználó kifejezett
   kérésére ("dinamikus legyen") auto-fit/minmax rács: a rendelkezésre
   álló szélességtől függően magától rendeződik 1/2/3 oszlopba, nincs
   fix admin-jellegű töréspont. min 320px, hogy mobilon is olvasható
   maradjon egy oszlopban, max 1fr, hogy szélesen egyenletesen ossza
   szét a helyet. */
/* "Bankszámlaszámok" fejléc-sor + PDF letöltés gomb (informaciok.php). */
.info-accounts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 10px;
}

.info-accounts-head .section-title {
    margin: 0;
}

.info-accounts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

.info-account-card .section-title {
    margin-top: 0;
}

/* 2026-09-24, felhasználói kérés: "minden szövegdoboz egyforma mélységű
   legyen" — a grid alapból egyenlő magasra nyújtja a .info-account-card
   kártyákat soronként, DE a bennük lévő .alert-info doboz saját
   tartalmának hosszától függően ennél rövidebb is lehetett (a kártya
   aljában üres hely maradt, a doboz maga nem nyúlt ki odáig). Flex
   oszloppal a doboz (flex:1) mindig kitölti a kártya teljes, sortársaihoz
   igazított magasságát. */
.info-account-card {
    display: flex;
    flex-direction: column;
}

.info-account-card .alert-info {
    flex: 1;
}

/* ---------- egyszerű adattáblázat (admin nézetek) ---------- */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-card-border);
    white-space: nowrap;
}

/* Csak a "Kapcsolatok" oldal (admin_registrations.php) táblázatai kérik
   középre igazítva — a többi .data-table-et használó admin nézet (pl.
   admin_news.php, admin_events.php) hosszabb, szabadszavas oszlopainál a
   balra igazítás olvashatóbb, ezért ott szándékosan nem érintjük. */
.data-table-center th,
.data-table-center td {
    text-align: center;
}

.data-table th {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.data-table tbody tr:hover {
    background: var(--color-bg);
}

/* Táblázatba ágyazott gombok (pl. "Törlés") a globális .btn nagy, önálló
   gombméretét örökölnék alapból — soron belül ez túl nagynak hat, ezért
   itt kisebbre vesszük. */
.data-table .btn {
    padding: 6px 16px;
    font-size: 0.85rem;
    margin-top: 0;
}

/* admin_suggestions.php — mobilon a Javaslatok táblázat 5 oszlopa (köztük
   egy hosszú, szabadszavas üzenet-mezővel) vízszintes görgetésre
   kényszerítette a felhasználót, és a kezdeti nézet a táblázat közepére
   volt "beugorva" — semmi nem volt egyértelműen teljes egészében látható.
   640px alatt "kártyás" elrendezésre váltunk: minden sor egy önálló doboz,
   a mezők egymás alatt, a data-label attribútum adja a felirat-szöveget. */
@media (max-width: 640px) {
    .admin-suggestions-table thead {
        display: none;
    }

    .admin-suggestions-table,
    .admin-suggestions-table tbody,
    .admin-suggestions-table tr,
    .admin-suggestions-table td {
        display: block;
        width: 100%;
    }

    .admin-suggestions-table tr {
        margin-bottom: 14px;
        padding: 10px 12px;
        border: 1px solid var(--color-card-border);
        border-radius: var(--radius-sm);
    }

    /* A fenti "tr { display:block }" szabály nagyobb fajlagossággal bír, mint
       a böngésző [hidden] alapértelmezett display:none-ja, ezért enélkül a
       válasz-sor mobilon MINDIG látszana, kattintás nélkül is. */
    .admin-suggestions-table tr[hidden] {
        display: none;
    }

    .admin-suggestions-table tbody tr:not(.admin-suggestion-answer-row) + tr.admin-suggestion-answer-row {
        margin-top: -14px;
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .admin-suggestions-table td {
        white-space: normal;
        border-bottom: none;
        padding: 4px 0;
    }

    .admin-suggestions-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        color: var(--color-text-muted);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 600;
        margin-bottom: 2px;
    }

    .admin-suggestions-table .admin-suggestion-message-cell {
        width: 100%;
        max-width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        text-align: left;
        box-sizing: border-box;
    }
}

/* Jelentkezők-szám az admin rendezvény-táblában — szürke "pill", hogy jól
   látszódjon: ide lehet kattintani a résztvevő-listáért, nem csak egy
   sima szám. */
.admin-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--color-bg);
    border: 1px solid var(--color-card-border);
    color: var(--color-navy);
    font-weight: 700;
    text-decoration: none;
}

.admin-count-badge:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);
}

/* Ha legalább valaki fizetett, a "Fizetve" jelvény zöldes tónust kap —
   így távolról, pötty nélkül is látszik, hogy van már befizetés. */
.admin-count-badge.is-paid {
    background: #e6f4ec;
    border-color: var(--color-positive);
    color: var(--color-positive);
}

.admin-count-badge.is-paid:hover {
    background: var(--color-positive);
    color: #fff;
}

/* Kör alakú pipa-gomb admin táblákban (rendezvény "Fizetve" / "Jelen volt")
   — ugyanaz a vizuális minta, mint a tanulószoba kérdés-pipáié
   (study-question-check), csak ide, a megosztott style.css-be másolva,
   mert az admin oldalak nem töltik be a study.css-t. */
.admin-check-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid #b6bac4;
    background: #fff;
    border-radius: 50%;
    color: #b6bac4;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.admin-check-circle:hover {
    border-color: var(--color-gold);
}

.admin-check-circle.is-checked {
    background: var(--color-positive);
    border-color: var(--color-positive);
    color: #fff;
    cursor: default;
}

/* Ugyanaz a kör-gomb, csak piros változat — az admin "Javaslatok" táblában
   az IP letiltás/feloldás kétirányú kapcsolójához (lásd admin_suggestions.php).
   Ellentétben a fenti .is-checked-kel (Fizetve/Jelen volt, egyirányú, ott
   cursor:default), ez mindig kattintható marad — letiltva PIROS/pipált,
   klikkre feloldja; feloldva üres kör, klikkre letiltja. */
.admin-check-circle-danger.is-checked {
    background: var(--color-negative);
    border-color: var(--color-negative);
    color: #fff;
    cursor: pointer;
}

/* ---------- ikon-gombok (admin táblák — pl. Javaslatok törlése) ---------- */

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    transition: background 0.15s;
}

.icon-btn svg {
    width: 18px;
    height: 18px;
}

.icon-btn:hover {
    background: var(--color-bg);
}

.icon-btn:disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.icon-btn-danger {
    color: var(--color-negative);
}

.icon-btn-danger:hover {
    background: rgba(179, 38, 30, 0.1);
}

/* Egysoros, "…"-ra vágott javaslat-szöveg az admin táblában — rákattintva a
   teljes szöveg egy felugró ablakban olvasható (lásd admin_suggestions.php
   openInfo()). Gombként épül fel (nem <span>), hogy billentyűzettel is
   elérhető legyen. */
.admin-suggestion-message-cell {
    display: block;
    max-width: 360px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.admin-suggestion-message-cell:hover {
    text-decoration: underline;
}

/* ---------- fejléc "LETÖLTÉS" gomb (Szimulátor offline mentése — minden oldalon) ---------- */

.topbar-brand-group {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.topbar-download-btn {
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    color: #fff;
    font-weight: 700;
    /* A méret története: eredeti 0.78rem → 25%-kal kisebb 0.585rem → majd a
       felhasználó kérésére 10%-kal nagyobb (0.585 * 1.1 = 0.6435rem). Ez az
       EGYETLEN szabály minden felületen (asztali/tablet/mobil), nincs hozzá
       breakpoint-specifikus felülírás, tehát mindenhol egységesen érvényesül. */
    font-size: 0.6435rem;
    letter-spacing: 0.01em;
    /* 2026-09-18: a felhasználó kifejezett kérésére a gomb és a névszöveg
       (GGHungary/admin) igazítása a MÉRTANI (doboz szerinti) függőleges
       közepükre épül, NEM a szöveg optikai/tinta-alapú közepére — korábban
       egy ~3px-es translateY() tolta lejjebb a teljes gombot egy
       tinta-alapú méréshez igazítva, ez a felhasználó szerint úgy hatott,
       mintha a gomb ALJÁT igazítanánk a név aljához, ezért megszűnt. A
       .brand (1.15rem/700) és a .topbar-download-btn (0.6435rem/700,
       szimmetrikus 4.5px 9px padding) dobozmagassága gyakorlatilag
       megegyezik, ezért a szülő .topbar-brand-group `align-items: center`
       szabálya önmagában, transform nélkül is pontosan a mértani közepükre
       igazítja mindkét szöveget. */
    padding: 4.5px 9px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.topbar-download-btn:hover { border-color: var(--color-gold-light); color: var(--color-gold-light); }
.topbar-download-btn:disabled { opacity: 0.6; cursor: default; }
.topbar-download-btn.is-complete { background: var(--color-positive); border-color: var(--color-positive); color: #fff; }
.topbar-download-btn.is-complete:hover { border-color: var(--color-positive); color: #fff; }

.panel {
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-card);
}

.form-panel {
    background: #f8f9fb;
    position: sticky;
    top: 20px;
}

.panel-title {
    margin: 0 0 18px;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Form */

.calc-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.calc-form label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-top: 14px;
}

/* A "Befektetési időszak" (a form legelső látható mezője — előtte csak a
   rejtett csrf_token/currency input van, ezért NEM :first-child) és a
   doboz felső széle közötti térköz a felhasználó kérésére a felére
   csökkent — a többi mező feletti 14px-es margó (fenti szabály)
   változatlan marad. A pénznem-kapcsoló bevezetése óta a "Befektetési
   időszak" label már NEM közvetlen .calc-form gyermek, hanem a
   .form-label-row-ba került (lásd partials/calculator_page.php) — a
   szelektor emiatt erre a sorra, ezen belül az első labelre szűkült,
   KÜLÖNBEN a ".calc-form > label:first-of-type" a sorrendben ténylegesen
   első közvetlen-gyermek labelre (az "Egyösszegű befizetés" sorra) illett
   volna, azt húzva szorosan a Turbo mód alá — ez volt a valós hibajelentés. */
.calc-form > .form-label-row:first-of-type > label:first-of-type {
    margin-top: -5px;
}

/* A "/javaslat" oldal is a közös .calc-form osztályt használja (lásd
   javaslat/index.php), de a fenti negatív margó CSAK a Szimulátor
   kalkulátor "Befektetési időszak" mezőjéhez lett szabva — a javaslat-
   űrlap első labelje (KERESZTNÉV) elé nem hidden honeypot-label kerül
   közvetlen gyermekként, hanem az valóban az első látható mező, ezért a
   fenti szabály ide is lefutott, és a bevezető szöveg majdnem ráragadt a
   "KERESZTNÉV" feliratra. A .suggestion-form-mal (lásd javaslat/index.php
   <form>) felülírjuk vissza a normál 14px-es margóra, a kalkulátort
   érintetlenül hagyva. */
.suggestion-form > label:first-of-type {
    margin-top: 14px;
}

.calc-form input[type="month"],
.calc-form input[type="number"],
.calc-form input[type="text"],
.calc-form input[type="search"],
.calc-form input[type="password"],
.calc-form input[type="time"],
.calc-form input[type="date"],
.calc-form input[type="datetime-local"],
.calc-form input[type="file"],
.calc-form select,
.calc-form textarea {
    padding: 10px 12px;
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    background: #fff;
    color: var(--color-text);
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

/* .calc-form select — a projektben ez az első natív <select> (lásd
   partner-jelentkezes.php telefon-előtag választó); a többi mezővel
   megegyező szélesség/keret mellett a natív nyíl-ikonhoz elég helyet kell
   hagyni jobb oldalon, különben a szöveg alá lógna. */
.calc-form select {
    width: 100%;
    cursor: pointer;
}

.calc-form textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.5;
}

.calc-form input:focus,
.calc-form select:focus,
.calc-form textarea:focus {
    outline: 2px solid var(--color-tab-accent);
    outline-offset: 1px;
}

/* A natív idő/dátum-választó ikon alapból szürke és stílusidegen —
   ez halványítja, majd hoverre kiemeli, hogy jobban illeszkedjen a
   mező többi részéhez. */
.calc-form input[type="time"]::-webkit-calendar-picker-indicator,
.calc-form input[type="date"]::-webkit-calendar-picker-indicator,
.calc-form input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
}

.calc-form input[type="time"]::-webkit-calendar-picker-indicator:hover,
.calc-form input[type="date"]::-webkit-calendar-picker-indicator:hover,
.calc-form input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.field-hint {
    display: block;
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* A saját display:block felülírná a natív hidden-attribútum display:none-ját
   (lásd a .form-field[hidden] szabály azonos kommentjét lejjebb) — enélkül
   pl. az offline-szimulator.html #offline-turbo-disabled-hint eleme akkor
   is látszott, ha a JS .hidden = true-ra állította (Arany/Ezüst fülön). */
.field-hint[hidden] {
    display: none;
}

/* "Saját adataim" oldal alsó akció-sorai (jelszó-csere, fiók törlése) —
   vékony, ikonos linkek, a Kijelentkezés itt szándékosan NEM szerepel,
   mert az már elérhető a topbar lenyíló fiók-menüjében (lásd
   .topbar-account-menu-item), felesleges lenne duplikálni. */
.account-action-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 22px;
}

.account-action-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-positive);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    background: rgba(26, 127, 69, 0.1);
    border-radius: 999px;
    padding: 9px 16px;
}

.account-action-link:hover {
    background: rgba(26, 127, 69, 0.18);
}

.account-action-link svg {
    width: 15px;
    height: 15px;
    color: var(--color-positive);
    flex-shrink: 0;
}

/* "Saját adataim" cím a fiok/sajat-adataim.php tetején — a felhasználó
   kérésére ugyanolyan betűméretű, mint a topbar lenyíló menü azonos
   szövegű első sora (.topbar-account-menu-item-primary), fehér háttérrel.
   Oldal-specifikus felülírás, NEM a megosztott .panel-title alapértéke,
   hogy más .panel-title-t használó oldalakat (pl. admin_news.php,
   admin_events.php) ne érintsen. */
.account-profile-title {
    background: var(--color-card);
    font-size: 1.08rem;
}

/* Bevezető leíró szöveg a "Meghívó" és "Partneri ajánlólink" oldalak (admin
   + ügyfél verzió is) tetején — külön class-szal opt-in, NEM a bare
   .field-hint viselkedésének módosítása, hogy más .field-hint-et használó
   oldalakat ne érintsen. Nagyobb, sötétebb szöveg + elválasztó vonal, hogy
   ne "ragadjon rá" a következő mezőcímkére. */
.form-intro-text {
    font-size: 0.95rem;
    color: var(--color-text);
    line-height: 1.55;
    margin: 8px 0 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-card-border);
}

/* Ugyanezen oldalak sikeres-állapot zöld doboza — több légtér, hogy a
   cím/szöveg/link/gomb ne tömörüljön össze. Külön class-szal opt-in,
   más .alert-success dobozokat (jelszó-visszaállítás stb.) nem érint. */
.alert-success-roomy {
    margin: 0 0 28px;
    padding: 22px 24px;
}

.alert-success-roomy strong {
    display: block;
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.alert-success-roomy p {
    margin: 0 0 16px;
    line-height: 1.5;
}

.alert-success-roomy p:last-child {
    margin-bottom: 0;
}

/* "Vissza" navigáció — EGYSÉGES, vékony gomb-szerű megjelenés MINDEN
   felületen (2026-09-18, a felhasználó kifejezett kérésére: "tervezd át a
   vissza gombot, legyen vékony de mégis sokkal jobban olvasható, gomb
   szerű, de vékony legyen") — korábban ez sima szöveg-link volt (több
   helyen eltérő stílussal: alávonás hover-en, néha SVG-nyíllal, néha
   szöveges "←"/"«" jellel), most mindenhol ugyanaz a kontúros, kis
   pill-gomb, vékony (nem nagy .btn-block magasságú) kitöltéssel. Lásd
   .btn-back a "Saját adataim" panel tetején (ott .account-back-link volt
   korábban) ÉS a Hírek/Javaslatok chat-panelek szál-nézetén (ott
   .chat-back volt) ÉS minden .field-hint-be ágyazott "Vissza a ...-hoz"
   linknél. */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-navy);
    background: #fff;
    border: 1px solid var(--color-card-border);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-back:hover {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: #fff;
}

.btn-back svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Az "Adatvédelem" akció-link gombként viselkedik (nem <a> navigáció),
   hogy a tartalom egy lenyíló panelben jelenjen meg ugyanezen az oldalon,
   navigáció nélkül. */
.account-action-link-button {
    border: none;
    width: auto;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.account-privacy-panel {
    margin-top: 8px;
    border: 1px solid var(--color-card-border);
    border-radius: 12px;
    background: var(--color-bg);
    max-height: 420px;
    overflow-y: auto;
}

.account-privacy-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    position: sticky;
    top: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-card-border);
}

.account-privacy-panel-header h3 {
    margin: 0;
    font-size: 0.95rem;
}

.account-privacy-panel-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 2px 6px;
}

.account-privacy-panel-close:hover {
    color: var(--color-text);
}

.account-privacy-panel-body {
    padding: 4px 16px 16px;
    font-size: 0.88rem;
}

.chip-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 6px;
}

.chip {
    border: 1px solid var(--color-card-border);
    background: #fff;
    border-radius: 999px;
    /* 12px 14px: a renderelt magasság ~42-44px, 3 oszlopos grid-hez */
    padding: 12px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    text-align: center;
}

/* A felhasználó kérésére visszaálltunk az eredeti, mindig arany "irányító"
   színre (egy korábbi kísérletben ideiglenesen közös kék volt, lásd
   --color-control-blue megjegyzését a :root-ban) — a "gombok" (chipek,
   Számítás gomb, kapcsolók) megint mindig aranyak, függetlenül az aktív
   fültől (Ezüst fülön sem vált ezüstre), csak a fül-pill maga (lásd fent
   .asset-tab) és a grafikon/számok követik a fém-témát. */
.chip:hover {
    border-color: var(--color-gold);
}

.chip.chip-active {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-on-gold);
}

.toggle-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.toggle-option {
    position: relative;
    flex: 1;
    text-align: center;
    border: 1px solid var(--color-card-border);
    background: #fff;
    border-radius: var(--radius-sm);
    /* 44px+ érintési célterület, lásd .chip megjegyzését. */
    padding: 13px 14px;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-muted);
}

.toggle-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggle-option:has(input:checked) {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: #fff;
}

/* Csúszó kapcsoló (toggle-switch) — az Egyösszegű befizetés ÉS a Turbo mód
   közös komponense (lásd partials/calculator_page.php, offline-szimulator.html):
   mindkettő egy egyszerű be/ki jelölőnégyzetet jelenít meg csúszó gombként,
   hogy a form tömör és egységes maradjon (nincs többé külön KI/BE gombpár
   vagy infó-tooltip a Turbónál). A .lumpsum-check-circle
   osztálynév a régi kör-pipa elnevezés maradványa (lásd calculator_page.php/
   offline-szimulator.html) — most már a kapcsoló SÁVJÁT (track) jelöli, a
   csúszó "gomb" a ::after pszeudo-elem. */
/* Nincs "gap" — a felhasználó kérésére a Turbo módnál az info-ikonnak
   közvetlenül a szöveg után, felső indexként (nem egy egyenletes flex-réssel
   elválasztva) kell állnia; ezt a .info-icon-btn saját margin-left:2px-je adja
   (lásd lent), a kapcsolót pedig a .lumpsum-check-circle margin-left:auto-ja
   tolja a sor jobb szélére — együtt ugyanazt az elrendezést adják, mint egy
   gap tenné, csak a szöveg/ikon köze szándékosan szoros marad. */
.lumpsum-check {
    display: flex;
    width: 100%;
    align-items: center;
    margin-top: 14px;
    cursor: pointer;
}

.lumpsum-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* .lumpsum-check ELŐTAGGAL (nem önálló osztályként) — a Turbo mezőnél (lásd
   fent) a szöveg/kör mostantól saját <label for="..."> elem (nem <span>),
   hogy az info-ikon beférjen közéjük kattintás-átbillentés nélkül; emiatt
   a .calc-form label szabály (magasabb specificitású, mert elem+osztály)
   közvetlenül ILLESZKEDNE ezekre is — a szülőre hivatkozó előtag itt azért
   kell, hogy ez a szabály mindenképp felülírja azt. */
.lumpsum-check .lumpsum-check-circle {
    flex-shrink: 0;
    /* margin-left: auto — a .lumpsum-check korábban justify-content:
       space-between-nel tolta a kapcsolót a sor jobb szélére; ez a Turbo
       mezőnél (lásd fent) megszűnt, mert a felhasználó kérésére az info-ikon
       most közvetlenül a szöveg után, felső indexként áll (nem középen a
       szöveg és a kapcsoló közt) — a kapcsolót emiatt innen kell jobbra
       tolni, hogy a sima Egyösszegű befizetés kapcsolónál (nincs info-ikon)
       is ugyanott maradjon, mint eddig. */
    margin-left: auto;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: #d8dbe3;
    position: relative;
    margin-top: 0;
    transition: background 0.15s;
}

.lumpsum-check-circle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 28, 61, 0.3);
    transition: left 0.15s;
}

/* Lásd .chip.chip-active fenti megjegyzését — ez is mindig arany, nem a
   fül fém-témáját (--color-tab-accent) követi. */
.lumpsum-check input:checked ~ .lumpsum-check-circle {
    background: var(--color-gold);
}

.lumpsum-check input:checked ~ .lumpsum-check-circle::after {
    left: 23px;
}

.lumpsum-check .lumpsum-check-text {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text);
    margin-top: 0;
    cursor: pointer;
}

/* A "Befektetési időszak" felirat és a pénznem-kapcsoló (Ft/€) egy sorban —
   lásd partials/calculator_page.php #currencyToggle kommentjét: a
   felhasználó kifejezett kérésére a kapcsoló a felirattal EGY SORBAN áll,
   a sor jobb szélére igazítva (a label a bal szélen marad, mint minden más
   mezőcímke a formon). */
.form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* A kapcsoló (26px) magasabb, mint a puszta szöveg-label valaha volt —
       enélkül a lenti chip-sor lejjebb csúszna, mint az eredeti (kapcsoló
       nélküli) elrendezésben. Ez a negatív margó pontosan visszaállítja a
       chip-sor eredeti Y-pozícióját (lásd .currency-toggle margin-top:0
       lent — enélkül a specificitás miatt a ".calc-form label" 14px-es
       margója nyerne, ami még tovább növelte volna a sor magasságát). */
    margin-bottom: -11.8px;
}

/* Pénznem-kapcsoló (Ft/€) — lásd partials/calculator_page.php
   #currencyToggle kommentjét. A gomb maga a korábban jóváhagyott "fehér
   csúszka, benne a zászlóval" mintát követi: a csúszka mindig fehér marad,
   a track színe (szürke/navy) jelzi az állapotot. */
.currency-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

/* A .calc-form label általános 14px-es margin-top-ja (lásd fent) itt nem
   kell — a .form-label-row-ban a szöveges labellel egy sorban, vízszintesen
   középre igazítva áll, nem önálló mezőcímkeként. Magasabb specificitású
   szelektor kell (elem+osztály, ugyanaz a súly mint a ".calc-form label"),
   különben az a szabály nyer és visszaállítja a 14px-et — pontosan ez volt
   a valós hibajelentés (a kapcsoló sora ettől lett indokolatlanul magas). */
label.currency-toggle {
    margin-top: 0;
}

.currency-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* A méretek (46x26 sáv, 20x20 gomb, 3px<->23px mozgás) SZÁNDÉKOSAN
   pontosan megegyeznek a .lumpsum-check-circle (Turbo mód / Egyösszegű
   befizetés) kapcsolójával — a felhasználó kérésére ugyanaz az arány/méret,
   csak zászlóval a gomb belsejében. */
.currency-toggle-track {
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: #d8dbe3;
    transition: background 0.15s;
}

.currency-toggle-input:checked ~ .currency-toggle-track {
    background: var(--color-navy, #101c3d);
}

/* A gomb feje (knob) MINDIG üres, fehér kör — sosem tartalmaz zászlót,
   lásd a felhasználó jóváhagyott mintaképét. Alap (Ft) állapotban a bal
   oldalon áll, € állapotban jobbra csúszik. */
.currency-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 28, 61, 0.3);
    transition: left 0.15s;
}

.currency-toggle-input:checked ~ .currency-toggle-track .currency-toggle-knob {
    left: 23px;
}

/* A zászló-jelvény KÜLÖN kör, a fehér gombbal MINDIG ellentétes oldalon —
   Ft állapotban jobbra (a magyar zászlóval), € állapotban balra (az EU
   zászlóval) áll, tehát a kettő együtt, egymással szinkronban cserél
   oldalt. A felhasználó kifejezett kérésére a zászló SÍK CSS-sel van
   kirajzolva (nem emoji-glyph) — az emoji ugyanis hullámzó/árnyékolt
   3D-hatással jelent meg a legtöbb rendszeren, a jóváhagyott mintakép
   viszont sima, lapos színfelületeket mutat. */
.currency-toggle-flag-badge {
    position: absolute;
    top: 3px;
    left: 23px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(16, 28, 61, 0.3);
    transition: left 0.15s, background 0.15s;
    /* Alapállapot (Ft): sík magyar trikolór — egyenlő piros/fehér/zöld sáv. */
    background: linear-gradient(
        to bottom,
        #cd2a3e 0%, #cd2a3e 33.333%,
        #ffffff 33.333%, #ffffff 66.666%,
        #436f4d 66.666%, #436f4d 100%
    );
}

.currency-toggle-input:checked ~ .currency-toggle-track .currency-toggle-flag-badge {
    left: 3px;
    /* € állapot: sík EU-kék alap, a csillagokat a .eu-star-ring adja. */
    background: #039;
}

/* A 12 ötágú ★ csillag valódi Unicode szimbólum (nem emoji-zászló, lásd
   fent) — csak € állapotban látszik, lásd partials/calculator_page.php:
   a 12 span egyenként 30 fokonként van a kör mentén elforgatva
   (translate(-50%,-50%) a badge középpontjára állítja, majd
   rotate+translateY+ellen-rotate viszi a kerület mentén, felállva tartva a
   csillagot — ez a szokásos "óramutató körül" CSS-minta). */
.eu-star-ring {
    position: absolute;
    inset: 0;
    display: none;
}

.currency-toggle-input:checked ~ .currency-toggle-track .eu-star-ring {
    display: block;
}

.eu-star {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 3.2px;
    line-height: 1;
    color: #fc0;
}

/* A "Havi alapbefektetés" és "Turbo mód" mezőket egy-egy .form-field
   csoportba fogja össze (lásd partials/calculator_page.php), hogy Egyösszegű
   befizetés esetén együtt lehessen szürkíteni őket — a belső elrendezés
   (label/chip-row/input közti térköz) ugyanaz marad, mint amikor még
   közvetlenül a .calc-form flex-gyerekei voltak. */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* A .form-field display:flex-e felülírná a natív hidden-attribútum
   display:none-ját (azonos specificitás, de az author-szabály nyer) —
   az Egyösszegű befizetés összeg-mezőjének elrejtéséhez (lásd calculator.js
   syncLumpSumState()) ez a szabály kell, hogy a hidden ténylegesen hasson. */
.form-field[hidden] {
    display: none;
}

/* Egyösszegű befizetés esetén a havi összeg / Turbo mezők vizuálisan
   letiltott állapotba kerülnek (lásd assets/js/calculator.js) — az érték
   megmarad, csak nem szerkeszthető/kattintható, amíg be van pipálva. */
.form-field-dimmed {
    opacity: 0.45;
    pointer-events: none;
}

/* Csak szoftveres képernyőolvasóknak — az Egyösszegű befizetés összege
   mezőnek (lásd #lumpSumAmountField/#offline-lumpsum-amount-field lent)
   kell egy valódi <label>, de a felhasználó kérésére a mező a kapcsoló
   szövegéhez SOKKAL közelebb álljon, felirat nélkül (a kapcsoló szövege
   már megmondja, mi ez) — ez a szabály kiveszi a labelt a vizuális
   folyásból (position:absolute), hogy a .form-field-en belüli gap ne
   számoljon vele, de a tartalma megmarad kattintható/felolvasható. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Automatikus időszak-választó (chip-radio) és időszak-kijelzők */

.chip-radio-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 6px;
}

/* Keskeny mobilnézeten (2026-09-18, a felhasználó kifejezett kérésére: a
   Hírek/Rendezvények/Rendszer pirula mindhárom FÉRJEN KI egy sorban,
   arányosan kisebb szöveggel/pirulával, ne törjön új sorra) a 3 egyenlő
   (1fr) oszlop marad, de a pirula betűmérete/kitöltése lecsökken — ugyanaz
   a ~0.68rem, mint a .news-category-badge kis jelvényeié. Csak ezt az EGY
   osztályt módosítja, ezért minden .chip-radio-row használatot érint
   (számológép időszak-választó, admin_partner_link.php lejárat-választó
   is), de ez elfogadható: arányosan kisebb pirula minden 3-oszlopos
   választónál egyformán jó. */
@media (max-width: 480px) {
    .chip-radio-row {
        gap: 6px;
    }

    .chip-radio-row .chip-radio {
        padding: 8px 6px;
        font-size: 0.7rem;
    }
}

.chip-radio {
    position: relative;
    border: 1px solid var(--color-card-border);
    background: #fff;
    border-radius: 999px;
    /* 44px+ érintési célterület, lásd .chip megjegyzését. */
    padding: 12px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    text-align: center;
}

.chip-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Lásd .chip.chip-active fenti megjegyzését — ez is mindig arany, nem
   követi a fül fém-témáját. */
.chip-radio:hover {
    border-color: var(--color-gold);
}

.chip-radio:has(input:checked) {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-on-gold);
}

/* "+ Új üzenet" gomb (admin_helpdesk.php / javaslat/index.php, 2026-09-17)
   — a felhasználó kifejezett kérésére NEM a normál .btn méretét kapja
   (az "túl vastag" volt), hanem pontosan a .chip-radio pirula
   méretezését (padding/betűméret) — vizuálisan egy súlycsoportban a
   Hírek/Rendezvények/Rendszer kategória-chipekkel. */
.btn-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    padding: 12px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    background: var(--color-gold);
    color: var(--color-on-gold);
}

.btn-chip:hover {
    filter: brightness(1.03);
}

/* A felhasználó kérésére a "Befektetési paraméterek" cím + Referencia dátum +
   Vizsgált időszak együtt a form ALJÁRA költözött, egy önálló dobozba (lásd
   .form-meta-box lent és .form-meta-title fenti margóját) — a
   referencia-dátum itt egyszerű szövegsorként ül közvetlenül a cím alatt. */
.period-info {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* A "VIZSGÁLT IDŐSZAK" sor — csak akkor látszik (nem hidden), ha már történt
   számítás (lásd partials/calculator_page.php $showPeriodSelected és a JS
   megfelelője, assets/js/simulator-offline.js updatePeriodSelectedLine()) —
   a felhasználó kérésére a hónap itt SZÁMMAL, nem betűvel jelenik meg
   (View::numMonth() / fmt.numMonth()). */
.period-info-computed {
    margin: 10px 0 0;
}

.period-info .stat-label {
    text-transform: none;
    letter-spacing: normal;
}

/* A felhasználó kérésére a "VIZSGÁLT IDŐSZAK" érték (.period-info-computed,
   sibling a fenti .period-info-vel, ezért kell külön felsorolni) ugyanolyan
   kicsi betűméretű, mint a fölötte lévő Referencia dátum értéke — enélkül a
   .stat-value-sm alapértelmezett (nagyobb, félkövér, lásd lent) mérete
   érvényesülne rajta. */
.period-info .stat-value-sm,
.period-info-computed .stat-value-sm {
    font-size: 0.78rem;
}

/* A .form-meta-box (lásd lent) keskeny — a "Referencia dátum: 2026.
   augusztus" szöveg NEM fér ki mindig egy sorban, ezért a felirat/érték
   (.period-info-text) itt tördelődhet; az info-ikon a .stat-label szó után,
   ahhoz tapadva jelenik meg (lásd .info-icon-btn lent), nem a sor végén. */
.period-info-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
}

.period-info-text {
    min-width: 0;
}

.period-info .field-hint {
    flex-basis: 100%;
    width: 100%;
}

/* Info-ikon a referencia-dátum ÉS a Turbo mód melletti magyarázathoz — a
   felhasználó kérésére a korábban mindig látható magyarázó szöveg
   (.field-hint) KATTINTÁSRA jelenik meg/tűnik el (lásd assets/js/calculator.js
   és simulator-offline.js initOfflineShell() — a [data-info-toggle] gomb a
   legközelebbi [data-info-group] ősön belüli [data-info-panel] elem
   hidden-attribútumát kapcsolja). Kattintásra épül, nem csak :hover-re, hogy
   touch-eszközön is működjön (ugyanez az elv, mint a .study-question-check
   gombnál). A felhasználó kérésére KICSI, a hozzá tartozó szó után
   közvetlenül álló felső index (superscript) — ezért:
   - vertical-align: super — inline környezetben (pl. .period-info-text-ben
     a .stat-label után) ez emeli a szöveg-alapvonal fölé;
   - align-self: flex-start — flex környezetben (pl. .lumpsum-check, ahol a
     .info-icon-btn flex-elem és a vertical-align hatástalan) ez adja meg
     ugyanezt a "felül áll" hatást a többi (középre igazított) elemhez képest. */
.info-icon-btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    border: 1px solid var(--color-text-muted);
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: 0.6rem;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    vertical-align: super;
}

.info-icon-btn:hover,
.info-icon-btn:focus-visible {
    border-color: var(--color-text);
    color: var(--color-text);
    outline: none;
}

/* "Számítás" + "PDF letöltése" (felső doboz) és "Befektetési paraméterek" +
   Referencia dátum + Vizsgált időszak (alsó doboz) — a felhasználó kérésére
   a form ALJÁN, EGYMÁS ALATT, két külön szövegdobozban (lásd
   partials/calculator_page.php, offline-szimulator.html) — egymás mellett a
   bal oszlop szélességénél (asztalin/tableten/mobilon egyaránt) túl
   keskenynek bizonyult a "Referencia dátum: ..." sorhoz. */
.form-bottom-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
}

.form-actions-box,
.form-meta-box {
    flex: 1 1 0;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-md);
    padding: 16px;
}

.form-actions-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.form-actions-box .btn {
    margin-top: 0;
    width: 100%;
}

.form-meta-title {
    margin: 0 0 8px;
    font-size: 0.82rem;
}

/* A "PDF letöltése" gomb SZÁNDÉKOSAN kék (--color-control-blue, ami
   PONTOSAN a fejléc --color-navy színe — lásd a --color-control-blue
   megjegyzését a :root-ban), amíg a mellette lévő "Számítás" (.btn-primary)
   arany marad — ez a projekt EGYETLEN megmaradt control-blue felhasználása. */
.btn-pdf {
    background: var(--color-control-blue);
}

/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 999px;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.btn-block {
    width: 100%;
}

/* Szándékosan mindig arany (lásd .chip.chip-active fenti megjegyzését) —
   nem követi a fül fém-témáját. */
.btn-primary {
    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
    color: var(--color-on-gold);
    margin-top: 22px;
}

.btn-primary:hover {
    filter: brightness(1.03);
}

/* Korábban itt a Szimulátor "Számítás" gombja (.calc-form .btn-primary)
   egy külön szabállyal felülírta az alap .btn-primary aranyát a közös kék
   "irányító" színre — a felhasználó kérésére ez megszűnt, a "Számítás"
   gomb megint az alap .btn-primary aranyszínét örökli, ugyanúgy, mint a
   többi oldal (regisztráció, bejelentkezés, Javaslat stb.) elsődleges
   gombjai. */

.btn-secondary {
    background: var(--color-navy);
    color: #fff;
    margin-top: 16px;
}

.btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    filter: none;
}

/* Javaslatok admin oldal: a "Válaszolok" gomb zöldre vált, amint van már
   mentett válasz — így távolról, a szöveg elolvasása nélkül is látszik,
   melyik javaslatra érkezett már válasz. */
.admin-suggestion-answer-toggle.is-answered {
    background: var(--color-positive);
}

/* Hírek admin oldal: "Mentés" (kék, .btn-secondary) / "Publikálás" (zöld) —
   két külön gomb dönti el a publikálási állapotot egy checkbox helyett. */
.btn-publish {
    background: var(--color-positive);
    color: #fff;
}

/* Results */

.results-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.results-empty {
    color: var(--color-text-muted);
    padding: 40px 10px;
    text-align: center;
}

.result-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.result-block-secondary {
    border-top: 1px dashed var(--color-card-border);
    padding-top: 20px;
    opacity: 0.92;
}

.result-block-title {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* KIZÁRÓLAG a letölthető/nyomtatható PDF-összesítőn jelenik meg (lásd
   simulator-offline.js buildResultBlockHtml() printPayment ága) — a
   képernyőn megjelenő eredménypanelen a .result-block-title marad, ezt a
   sort ott sosem használjuk. A belső .stat-value/.stat-label osztályok
   (lásd JS) újrahasznosítása biztosítja, hogy a betűméret/vastagság
   MINDEN képernyőméreten automatikusan szinkronban maradjon az alatta
   lévő kártyákkal, duplikált szám nélkül:
   - az összeg maga (.stat-value) ugyanakkora/félkövér, mint "Befektetett
     összeg" száma;
   - a zárójeles "(Rendszeres havi befizetés)" a .stat-label kis, NEM
     félkövér méretét kapja, mint "Befektetett összeg" felirata, DE saját
     szövegként mondatkezdő nagybetűvel (nem a .stat-label örökölt
     text-transform:uppercase-ával) — a felhasználó kifejezett kérésére;
   - a jobb oldali mód (Turbo/Normál) is a .stat-label kis méretét kapja,
     de a felhasználó kérésére félkövér és FEKETE (nem a .stat-label
     örökölt halvány/szürke színe) marad.
   A bal oldali összeg a felhasználó kérésére pontosan a lentebbi
   .stat-card padding-jével egyvonalban kezdődik — ez a padding-left érték
   a .stat-card padding-jével szinkronban tartandó minden breakpointon
   (lásd az @media (min-width:861px) and (max-width:1300px) blokkban lévő
   .calc-payment-amount felülírást is). align-items:center (nem baseline)
   biztosítja, hogy a zárójeles kiegészítő szöveg és a jobb oldali mód is
   függőlegesen a mellette lévő nagy szám vízszintes mértani közepéhez
   igazodjon, ne az alapvonalhoz. */
.calc-payment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* display:inline-flex + align-items:center — a szám (.stat-value, 24px) és
   a zárójeles kiegészítő (.stat-label, 12px) EGYMÁSHOZ KÉPEST pontosan
   függőlegesen középre kerüljön (a felhasználó kérése: "a teljes szöveg az
   előtte lévő szám vízszintes mértani közepén legyen") — vertical-align
   helyett, mert az csak közelítőleg, nem pixelpontosan középre igazít
   eltérő betűméretű inline elemeknél. */
.calc-payment-amount {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 18px;
}

/* Kettős osztály (.calc-payment-suffix.stat-label) a specificitás miatt —
   a .stat-label szabály (text-transform:uppercase, color:muted) KÉSŐBB áll
   a fájlban, egyetlen osztályos szelektorral ugyanolyan specificitású, tehát
   simán felülírná ezeket; a kettős osztály magasabb specificitással biztosan
   nyer. Mondatkezdő nagybetűs, NEM csupa nagybetűs írásmód a felhasználó
   kifejezett kérésére. */
.calc-payment-suffix.calc-payment-suffix {
    text-transform: none;
    white-space: nowrap;
}

.calc-payment-mode.calc-payment-mode {
    color: var(--color-text);
    font-weight: 700;
    white-space: nowrap;
}

/* Flex, nem grid: ha nem fér ki mindhárom kártya egy sorba, az utolsó,
   "árván" maradó kártya a saját sorában középre kerül (grid auto-fit
   esetén balra tapadva maradna) — miközben teljesen kitöltött sorban a
   kártyák továbbra is egyenletesen kitöltik a rendelkezésre álló helyet,
   ugyanúgy, mint eddig. */
.stat-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.stat-card {
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 240px;
    max-width: 360px;
}

/* A felhasználó kérésére visszaállt a korábbi sötétkék háttér — a doboz
   megint kiemelkedik a mellette lévő (Befektetett összeg / Nyereség)
   dobozok közül. A szám továbbra is a fém-témát követi (arany fülön arany,
   ezüstön ezüst — lásd --color-tab-accent), a felirat pedig egy halvány,
   világos árnyalatot kap, hogy olvasható maradjon a sötét háttéren. */
.stat-card-accent {
    background: var(--color-navy);
    border-color: var(--color-navy);
}

.stat-card-accent .stat-label {
    color: rgba(255, 255, 255, 0.65);
}

.stat-card-accent .stat-value {
    color: var(--color-tab-accent);
}

.stat-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}

/* white-space:nowrap — a felhasználó kérésére a szám és a mögötte álló
   mértékegység (" Ft" / "%" / "g") SOSE szakadhat külön sorra: a
   View::huf()/hufSigned() sima szóközzel tördeli az ezres-csoportokat és a
   mértékegység elé is (nem nbsp-vel), tehát alapból (white-space:normal)
   bármelyik szóköznél törhetne a sor — szűk kártyaszélességen (lásd lentebb,
   fekvő tablet/kislaptop sáv) ez konkrétan az utolsó szóköznél történt, az
   "Ft" magára ugrott egy második sorra. Innentől a teljes érték EGY,
   tördelhetetlen darabként viselkedik; a lentebbi szabályok gondoskodnak
   róla, hogy a kártya mindig elég széles/a betű elég kicsi legyen ahhoz,
   hogy ez sose okozzon vízszintes túlcsordulást. */
.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
}

.stat-positive .stat-value {
    color: var(--color-positive);
}

.stat-negative .stat-value {
    color: var(--color-negative);
}

/* .stat-card variánsa a rendezvénynaptár kártyáihoz — ugyanaz a
   .stat-grid flex-wrap konténer, de szélesebb kártyák, mert cím +
   dátum + helyszín + leírás + gomb fér bele, nem csak egy szám. */
.event-card {
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 300px;
    max-width: 360px;
}

.event-card .btn {
    margin-top: 10px;
}

/* Rendezvénynaptár — havi rács-nézet. Ugyanazokat a színeket/komponens-
   stílusokat használja, mint a többi oldal (.btn-secondary a hónapváltó
   nyilaknak, .field-hint a jelmagyarázatnak stb.), csak a rács-elrendezés
   új. */
.events-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.events-calendar-nav .btn {
    margin-top: 0;
    padding: 10px 18px;
    font-size: 0.85rem;
}
.events-nav-btn { display: inline-flex; align-items: center; gap: 6px; }
.events-year-month { scroll-margin-top: 12px; }
.events-year-month.is-current .events-year-month-title { color: var(--color-gold, #c9a227); }
/* A naptár fejléce (Havi/Éves váltó + dátum/nyilak) görgetéskor is látszik, a tartalom alá megy */
.events-calendar-head { position: sticky; top: 0; z-index: 6; background: var(--color-card, #fff); padding: 8px 0 2px; margin: 0 0 8px; }
.events-calendar-head .events-view-switch { margin-bottom: 8px; }
.events-calendar-head .events-calendar-nav { margin-bottom: 6px; }
/* Mobil: ← Október 2026 → egyetlen sorban, a gombokon csak nyíl (a felirat title/aria-label) */
@media (max-width: 640px) {
    .events-calendar-nav { flex-wrap: nowrap; gap: 8px; }
    .events-calendar-nav .events-nav-btn { padding: 0; width: 46px; height: 46px; justify-content: center; flex: none; }
    .events-calendar-nav .events-nav-btn .evn-txt { display: none; }
    .events-calendar-nav .events-nav-btn .evn-arrow { font-size: 1.25rem; line-height: 1; }
    .events-calendar-title { flex: 1 1 auto; min-width: 0; font-size: 1.15rem; }
}

.events-calendar-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-navy);
    text-align: center;
}

.events-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.events-calendar-weekday {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    padding-bottom: 6px;
}

.events-calendar-day {
    display: block;
    min-height: 64px;
    background: var(--color-bg);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-sm);
    padding: 8px;
    text-decoration: none;
    color: inherit;
}

.events-calendar-day.is-empty {
    background: none;
    border-color: transparent;
}

.events-calendar-day.is-today {
    border: 2px solid var(--color-gold);
}

.events-calendar-day.is-selected {
    background: #fff8e6;
}

/* A teljes cella kattintható (nem csak a napszám) — lásd
   partials/events_calendar.php. Ez adja hozzá a látható jelzést, hogy
   ide lehet kattintani. */
.events-calendar-day.is-link {
    cursor: pointer;
}

.events-calendar-day.is-link:hover {
    border-color: var(--color-gold);
    background: #fff8e6;
}

.events-calendar-day-number {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text);
}

.events-calendar-dot {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 8px;
}

.events-calendar-dot.is-available { background: var(--color-navy); }
.events-calendar-dot.is-low { background: var(--color-gold); }
.events-calendar-dot.is-full { background: var(--color-negative); }

.events-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--color-card-border);
}

.events-calendar-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.events-calendar-legend-item .events-calendar-dot {
    margin-top: 0;
}

@media (max-width: 640px) {
    .events-calendar-day { min-height: 44px; padding: 6px 4px; }
    .events-calendar-weekday { font-size: 0.65rem; }
    .events-calendar-day-number { font-size: 0.75rem; }
}

/* A grafikon UTÁN következő másodlagos statisztika-blokk (árfolyam-
   emelkedés/hozam/hónapok + fém-összetétel csík) közös, enyhén a fém
   témaszínével tónusozott doboza — lásd partials/calculator_page.php
   render_result_block()/render_mix_result_block() és a JS-tükrük
   (assets/js/simulator-offline.js). A benti .stat-grid/.stat-card
   szándékosan ugyanaz az osztály, mint a fenti fő szám-kártyáknál — így a
   betűméret/dobozstílus automatikusan szinkronban marad azzal. */
.stat-secondary-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: rgba(var(--color-chart-accent-rgb), 0.07);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-md);
    padding: 16px;
}

/* Ebben a sorban (a fenti fő 3 kártyával ellentétben) a felirat/érték
   jobbra rendezett — csak erre a sorra vonatkozik, a .stat-card alap
   (bal-igazított) stílusát a fenti fő kártyáknál nem érinti. */
.stat-secondary-panel .stat-card {
    text-align: right;
    align-items: flex-end;
    padding: 22px 24px;
}

.stat-value-sm {
    font-size: 1.05rem;
    font-weight: 700;
}

/* A Turbo-magyarázat — KIZÁRÓLAG akkor jelenik meg, ha az aktuális eredmény
   Turbo módban készült (lásd $showTurboStats/showTurboStats a PHP- és
   JS-oldalon). Szándékosan a .result-block UTOLSÓ eleme (a
   .stat-secondary-panel UTÁN, nem abban) — ez zárja le a kártyát, ugyanúgy,
   ahogy a lap alján a .disclaimer zárja le az egész oldalt. */
.stat-closing-note {
    margin: 18px 0 0;
}

/* A fém-összetétel csík — Arany/Ezüst fülön egyetlen, a fém témaszínével
   (lásd --color-chart-accent, Ezüst fülön automatikusan ezüstre vált)
   teli sáv, a gramm-összeggel a végén; Mix fülön a két fém aránya szerint
   (jelenlegi érték alapján, lásd render_mix_result_block()) megosztott
   sáv. Szándékosan nincs fölötte cím-szöveg — a színek/számok önmagukban
   egyértelműek. */
.metal-bar-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.metal-bar-track {
    flex: 1 1 auto;
    height: 16px;
    border-radius: 999px;
    overflow: hidden;
    background: #e7e9ee;
}

.metal-bar-track-solid {
    background: var(--color-chart-accent);
}

/* Ugyanaz a méret, mint a .stat-value (a fenti számkártyák/százalékok),
   hogy vizuálisan szinkronban legyen velük. */
.metal-bar-end-label {
    flex: none;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-chart-accent);
    white-space: nowrap;
}

.metal-bar-track-split {
    display: flex;
}

/* Mix módban a bal oldalon az Ezüst, jobb oldalon az Arany jelenik meg —
   ez szándékosan fordítottja a fülek sorrendjének (Arany/Mix/Ezüst),
   kifejezett felhasználói kérésre. A Mix mindig arany-témájú marad (lásd
   projektkonvenció fent), ezért az ezüst rész itt is rögzített színt kap,
   nem a --color-chart-accent változóból származót. */
.metal-bar-fill-silver {
    background: #9AA5B1;
    height: 100%;
}

.metal-bar-fill-gold {
    background: var(--color-chart-accent);
    height: 100%;
}

.metal-bar-side {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.metal-bar-side.is-right {
    align-items: flex-end;
}

/* Mix fülön a gramm-összeg (nem százalék, lásd render_mix_result_block()) —
   ugyanaz a méret, mint a .stat-value/.metal-bar-end-label. Szándékosan
   NINCS alatta "Arany"/"Ezüst" felirat — a szín önmagában jelöli, melyik
   fémről van szó (lásd .metal-bar-amount-gold/-silver lent), így a szám
   egy sorban marad, ugyanolyan egyszerű, mint az Arany/Ezüst fülön. */
.metal-bar-amount {
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
}

.metal-bar-amount-gold {
    color: var(--color-chart-accent);
}

.metal-bar-amount-silver {
    color: #9AA5B1;
}

@media (max-width: 480px) {
    .metal-bar-wrap {
        gap: 8px;
    }
    .metal-bar-end-label,
    .metal-bar-amount {
        font-size: 1.05rem;
    }
}

/* Chart */

.chart-wrap {
    background: #f8f9fb;
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-md);
    /* Felül kevesebb padding, mint a többi oldalon — a felhasználó kérésére,
       hogy a grafikon csúcsa fölötti üres hely csökkenjen (lásd
       .chart-wrap .section-title lent és app/ChartSvg.php $padTop-ját is,
       ami ugyanezt a célt szolgálja az SVG-n belül). */
    padding: 4px 18px 16px;
}

/* Egységes, apró szekcím-cím — a chart-wrap h4-je és a mérföldkő-sáv fölötti
   cím is ezt használja, hogy vizuálisan összetartozzanak. */
.section-title {
    margin: 0 0 10px;
    font-size: 0.95rem;
}

/* Csak a grafikon fölötti címre szűkített felülírás (a mérföldkő-sávét NEM
   érinti, az a .stat-secondary-panel-ben van, nem a .chart-wrap-ben) — a
   felhasználó kérésére szűkebb a cím alatti térköz, hogy a grafikon
   csúcsa fölötti üres hely a felére csökkenjen. */
.chart-wrap .section-title {
    margin-bottom: 2px;
}

.portfolio-chart {
    width: 100%;
    height: auto;
    display: block;
}

/* A grafikon a szürke doboz szélétől szélig ér (a doboz oldalsó paddingját kiegyenlíti). */
.chart-wrap .portfolio-chart:not(.pro-chart) {
    width: calc(100% + 36px);
    margin-left: -18px;
    margin-right: -18px;
}

.chart-area {
    fill: rgba(var(--color-chart-accent-rgb), 0.18);
    stroke: none;
}

.chart-line {
    fill: none;
    stroke-width: 2.5;
}

.chart-line-value {
    stroke: var(--color-chart-accent);
}

/* Mix módban a második (ezüst) érték-vonal — Mix mindig arany-témájú marad
   (lásd [data-asset="silver"] felülírás lent, ami [data-asset="mix"]-et nem
   érinti), ezért ez rögzített, nem a --color-gold változóból származó szín. */
.chart-line-value-silver {
    stroke: #9AA5B1;
}

/* A "Befizetések" referenciavonal — szaggatott, halvány szürke, hogy jól
   elkülönüljön a folytonos érték-vonal(ak)tól, de ne vonja el róluk a
   figyelmet. Ugyanaz a szürke, mint a Mix-mód ezüst vonala (#9AA5B1),
   mert az egy már bevett, semleges "másodlagos vonal" szín ebben a
   diagramban. */
.chart-line-invested {
    stroke: #9AA5B1;
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
}

/* Mix-grafikon kitöltése (lásd ChartSvg::mixAreaPolygons()/
   mixAreaPolygonsSvg()): a "közös" sáv (0-tól a kisebbik fém értékéig)
   alapszíne ugyanaz, mint az "Értéknövekedés alakulása" doboz háttere
   (lásd .stat-secondary-panel lent, --color-chart-accent-rgb), de
   annál JÓVAL sötétebb — a felhasználó két lépésben kért sötétítést
   (25%, majd 50%) nem volt észrevehető ilyen halvány (0.07-0.13 közti)
   alfa-tartományban fehér háttéren, ezért itt egy jóval nagyobb,
   ténylegesen látható ugrással (0.25 alfa, közel a .chart-area-mix-gold/
   -silver 0.3-as "többlet" sávjának erősségéhez) van beállítva. Efölött
   szakaszonként az éppen magasabb fém saját (halványított) színe
   jelenik meg. */
.chart-area-mix-common {
    fill: rgba(var(--color-chart-accent-rgb), 0.25);
    stroke: none;
}

.chart-area-mix-gold {
    fill: var(--color-gold);
    fill-opacity: 0.3;
    stroke: none;
}

.chart-area-mix-silver {
    fill: #9AA5B1;
    fill-opacity: 0.3;
    stroke: none;
}

/* A dátumfeliratok szándékosan NEM az SVG-n belül (text elemként) vannak, hanem
   sima HTML-ként alatta — így a betűméretük mindig a képernyő tényleges pixeleiben
   értendő, nem az SVG viewBox-ában, tehát keskeny (mobil) képernyőn sem zsugorodik
   olvashatatlanra az SVG-vel arányosan. */
.chart-axis-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* :not(.chart-legend-source) — enélkül a lenti "content: none" a forrás-
   span-en sosem érvényesülne (ez a szabály "span" miatt specifikusabb),
   és a forrás-szöveg első sora egy láthatatlan, 18px széles "szellem-pöttyöt"
   kapna maga elé, ami csak az első sort tolta jobbra sortöréskor. */
.chart-legend span:not(.chart-legend-source)::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 3px;
    margin-right: 6px;
    vertical-align: middle;
}

/* A jelmagyarázat-feliratok (pl. "Portfólió értéke") NE törjenek szét szó
   közben, ha szűk a hely — inkább az egész .chart-legend-source kerüljön
   új sorba (lásd @media (max-width: 1240px) lejjebb). */
.legend-value,
.legend-value-silver,
.legend-invested {
    white-space: nowrap;
}

.legend-value::before {
    background: var(--color-chart-accent);
}

.legend-value-silver::before {
    background: #9AA5B1;
}

/* A "Befizetések" jelmagyarázat-jelölője a diagramon látható szaggatott
   vonalat mutatja (nem tömör sávot, mint a többi jelölő) — ezért itt a
   közös ::before szabály tömör hátterét felülírjuk egy szaggatott felső
   szegéllyel. */
.legend-invested::before {
    height: 0;
    background: none;
    border-top: 2px dashed #9AA5B1;
}

/* Az adatforrás-jelzés a jelmagyarázat sorába kerül (nem külön sorba) — ez
   NEM egy szín-jelölős legend-elem (lásd a fenti :not(.chart-legend-source)
   kizárást), jobbra tolt, kicsit halványabb kiegészítésként jelenik meg
   ugyanabban a sorban. */
.chart-legend-source {
    margin-left: auto;
}

/* Alerts */

.alert {
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 0.9rem;
    margin-bottom: 14px;
}

.alert ul {
    margin: 0;
    padding-left: 18px;
}

/* A hosszú, SMTP-hiba esetén megjelenő nyers linkek (pl.
   fiok/regisztracio.php megerősítő-link fallback, admin_meghivo.php
   meghívó-link fallback) enélkül kilógtak a dobozból keskenyebb
   kártyákon (pl. .login-card) — ez minden .alert-en belüli linkre
   vonatkozik, nem csak ott. */
.alert a {
    word-break: break-all;
}

.alert-error {
    background: #fdecea;
    color: var(--color-negative);
    border: 1px solid #f5c2be;
}

.alert-info {
    background: #eef2fb;
    color: #33456e;
    border: 1px solid #c9d5f0;
}

.alert-success {
    background: #e9f7ee;
    color: var(--color-positive);
    border: 1px solid #b9e3c6;
}

/* Auth page */

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.auth-card {
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 36px 32px;
    width: 100%;
    max-width: 360px;
}

.auth-card .brand {
    color: var(--color-navy);
    text-align: center;
    display: block;
    margin-bottom: 20px;
    font-size: 1.3rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
}

.auth-form label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-top: 14px;
}

.auth-form input {
    padding: 10px 12px;
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
}

/* Admin import */

.advanced-import {
    margin-top: 24px;
    border-top: 1px dashed var(--color-card-border);
    padding-top: 14px;
}

.advanced-import summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-muted);
}

/* Footer */

/* max-width/padding megegyezik a .layout-éval (lásd fent) — enélkül ez a
   sáv keskenyebb/beljebb volt, mint a fölötte lévő teljes szélességű
   dobozok (pl. a Turbo-magyarázat .alert-je), ami vizuálisan elcsúszottnak
   tűnt. */
.disclaimer {
    max-width: 1600px;
    margin: 8px auto 32px;
    padding: 0 24px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    text-align: center;
}

/* Responsive */

/* Tablet: a paraméterek panel keskenyebb lesz (nem a fix 340px), de a két oszlop
   megmarad egymás mellett — így pl. álló tableten sem kell a teljes űrlapon
   végiggörgetni ahhoz, hogy az eredmény látszódjon, miközben marad elég hely
   az eredmény-kártyáknak is. */
@media (min-width: 641px) and (max-width: 860px) {
    .layout {
        grid-template-columns: 260px 1fr;
        gap: 16px;
    }

    /* A felhasználó kérésére álló tableten az "ÉV"/"yr" felirat a szám
       MELLETT marad (nem alá törik), minden nyelven — ugyanaz a
       sor-elrendezés + kicsinyített felirat, mint amit a lenti fekvő
       mobil sáv már bevált mintaként használ (lásd @media (orientation:
       landscape) and (max-height: 500px) lejjebb — az onnan UTÁNA álló
       szabály emiatt ma már csak megismétli ugyanezt, nem felülír semmit).
       Korábban itt szám-fölé/ÉV-alá tördelés volt (az egységes chip-magasság
       miatt, mert a 260px-es keskenyebb paraméterpanelen "15 ÉV"/"20 ÉV"/
       "25 ÉV" néha tört, "3 ÉV"/"5 ÉV"/"10 ÉV" nem) — ezt oldja meg helyette
       a kicsinyített .chip-radio-suffix, ami minden chipnél egy sorban
       kifér. FONTOS: justify-content: center — sor-irányban az align-items
       csak a KERESZTtengelyt (függőleges) középre, a justify-content adja a
       FŐtengely (vízszintes) középre igazítást; enélkül a span a teljes
       chip-szélességet kitöltötte (block-szintű flex-konténerként), a
       tartalom pedig balra igazodva állt benne — ez az egyjegyű "3 év"/
       "5 év" chipeknél volt szembetűnő (sokkal több üres hely a jobb
       oldalon, mint a balon), mert a kétjegyű "10/15/20/25 év" tartalma
       közelebb töltötte ki a sor szélességét, így kevésbé látszott. */
    .chip-radio > span {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .chip-radio-suffix {
        font-size: 0.62rem;
    }
}

/* Fekvő MOBIL nézet — a fenti (641-860px) "tablet álló" sáv mostantól már
   maga is sor-elrendezést ad (lásd .chip-radio > span fent), ez a szabály
   emiatt ott csak megismétli ugyanazt (nem felülír semmit). Külön szabályra
   mégis szükség van, mert ez SZÉLESSÉGTŐL FÜGGETLENÜL, kizárólag az
   ALACSONY (max ~500px) viewport-magasság alapján illeszkedik — így a
   641px-nél keskenyebb fekvő telefonokat (pl. iPhone SE ~568px) is lefedi,
   ahol a fenti sáv nem aktív, de a natív (media query nélküli) elrendezés
   esetleg mégsem férne ki kényelmesen. */
@media (orientation: landscape) and (max-height: 500px) {
    .chip-radio > span {
        flex-direction: row;
        justify-content: center;
        gap: 4px;
    }

    .chip-radio-suffix {
        font-size: 0.62rem;
    }
}

/* Fekvő tablet / kis laptop sáv: az asztali .layout alapból 420px-es bal
   oszlopa (lásd fent) ezen a köztes szélességen (pl. 1024px-es iPad
   fekvő nézet) túl sokat vinne el a jobb oldali eredmény-panelből — a 3
   fő szám-kártya emiatt egymás alá esne, ahelyett hogy egy sorban
   férne el. Itt egy köztes, keskenyebb bal oszloppal (a korábbi,
   1600px-es szélesítés előtti 340px-hez közeli érték) visszaadjuk a
   jobb oldalnak a helyet. 1300px fölött (valódi asztali méret) már
   bőven elfér a 420px is. */
@media (min-width: 861px) and (max-width: 1300px) {
    .layout {
        grid-template-columns: 340px 1fr;
        gap: 22px;
    }

    /* A köztes (tablet-fekvő/kis-laptop) sávon szűkebb a padding, mint az
       alábbi, 861px-től felfelé MINDEN szélességre (tehát asztali gépre is)
       érvényes szabályban — itt kevesebb hely jut soronként, ezért itt
       szorosabb a kártya. Lásd a stabil, sosem-tördelő elrendezés
       indoklását lent. */
    .stat-grid {
        gap: 6px;
    }

    .stat-card {
        padding: 10px;
    }

    /* A .calc-payment-amount bal oldali behúzásának ezen a sávon is
       pontosan a .stat-card fenti, szűkebb padding-jét kell követnie
       (lásd a base szabály kommentjét), különben a letölthető PDF-en (a
       #calcSheet fix 688px-es szélessége FÜGGETLEN a böngésző tényleges
       ablakszélességétől, de ez a media query a böngésző viewport-jára
       reagál, nem a calc-sheet szélességére) a nyomtatási kép ezen a
       köztes böngésző-ablakméreten elcsúszna. */
    .calc-payment-amount {
        padding-left: 10px;
    }
}

/* .layout-wide (pl. Hírek /hirek, admin "wide" nézetek) — a fenti két
   tablet-sávos .layout felülírás (641-860px, 861-1300px) a keskeny,
   kétoszlopos (260px/340px + 1fr) rácsot adná vissza ezeknél az oldalaknál
   is, mert itt csak EGY grid-elem van (az az első, keskeny oszlopba esne —
   ez okozta, hogy a Hírek lista asztali/tablet nézetben is összeszűkült).
   Nagyobb specificitású szabály (.layout.layout-wide) tartja meg helyettük
   az egyoszlopos, a teljes rendelkezésre álló szélességet kitöltő
   elrendezést ugyanezen a két köztes sávon is — a felette lévő cap (pl.
   .layout-wide 1100px, .layout-news-wide 1900px) csak 1300px fölött
   érvényesül, ide szándékosan nem hozunk be külön értéket. */
@media (min-width: 641px) and (max-width: 1300px) {
    .layout.layout-wide {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A .stat-card nagyobb (240px/360px) alapértelmezett mérete/tördelése a
   felhasználó kérésére a 861px-től induló SZÉLES sávban (tehát tabletTŐL
   ASZTALI GÉPIG, felső korlát nélkül) sosem engedhet 2+1-es (vagy annál
   rosszabb) tördelést — akkor sem, ha a beírt összeg extrém nagy (pl.
   egyösszegű befizetésnél több trilliós tétel). Korábban egy rugalmas
   flex-basis/max-width megoldás csak a tablet-sávra volt korlátozva, ezért
   ELÉG nagy összegnél ASZTALI GÉPEN is bekövetkezett ugyanaz a "doboz
   elcsúszik" hiba, amit a tablet-sávban már kijavítottunk — a felhasználó
   kifejezetten kérte, hogy a DOBOZOK mérete/elrendezése SOSE változzon/
   csússzon el, egyetlen nézetben (asztali/tablet/telefon) se, helyette a
   SZÖVEG legyen arányosan kisebb. Ezért itt a 3 kártya mostantól
   garantáltan MINDIG egy sorban, egyenlő szélességben marad (flex-wrap:
   nowrap + flex:1 1 0 + min-width:0 + max-width:none, tehát nincs
   "hypothetical size" alapú tördelési döntés, ami a valós
   betűtípus-szélességtől vagy a beírt összeg nagyságától függne) — a
   tartalom hosszától teljesen független, kiszámítható elrendezés. A
   tényleges "befér-e a szöveg" kérdést innentől KIZÁRÓLAG az
   assets/js/simulator-offline.js fitStatValues() oldja meg (minden
   újraszámoláskor/átméretezéskor lefut, és csak akkor, csak annyival
   csökkenti az adott .stat-value betűméretét, amennyi a tényleges
   beféréshez kell — az eredeti méretből indulva). 861px alatt (mobil/
   keskeny tablet-álló) a kártyák a base .stat-card szabály szerint
   (flex-wrap:wrap) SZÁNDÉKOSAN továbbra is egymás alá stacked-elhetnek —
   ott bőven elég hely jut egyetlen, teljes szélességű kártyának is,
   nincs szükség az egy-soros kikényszerítésre. */
@media (min-width: 861px) {
    .stat-grid {
        flex-wrap: nowrap;
    }

    .stat-card {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }
}

/* Tabletnyi és telefonos szélességeken (1300px alatt) a márkanév +
   LETÖLTÉS gomb + mind a 6 fejléc-fül + HU/EN váltó együtt szélesebb,
   mint amennyi egy sorban elfér. A felhasználó kifejezett kérésére ez itt
   SOSE törhet két sorba (korábban egy "folytatólagos tördelés" mintát
   követett, ami pl. iPad-szélességeken — konkrétan ~960-1020px között,
   ahol a "EN" nyelvváltó magában egy második sorra esett — még mindig két
   sort eredményezett) — ehelyett a fülek oldalsó paddingje és a sor saját
   (.topbar) elemközi térköze FOLYAMATOSAN, lineárisan zsugorodik 1300px
   (eredeti, teljes méret) és 960px (a lenti @media(max-width:960px)-nél a
   hamburgerre váltás határa) között, hogy a teljes sor mindvégig kiférjen
   egyetlen sorban. A .topbar-brand-group/.topbar-actions/.topbar-tabs
   dobozai display:contents-szel feloldódnak, így a márkanév, a LETÖLTÉS
   gomb, mind a 6 fül és a nyelvváltó KÖZVETLENÜL a .topbar flex-sorának
   elemei lesznek, és a .topbar saját gap-je adja az összes elemköztük a
   térközt. (A pontos clamp()-értékek egy 913px-en — 961px-es tesztszélesség
   mínusz a .topbar 2×24px oldalsó paddingje — végzett méréssel lettek
   kalibrálva: ott az összes elem egy sorban ~969px-et igényelt eredeti
   méretekkel, tehát legalább ~56px megtakarítás kellett; a lenti két
   szabály ennél bőven nagyobb, ~100px+ tartalékkal dolgozik.) A
   justify-content:flex-start megelőzi, hogy a (csak 2 elemre tervezett)
   space-between egy részlegesen töltött sorban szétnyújtsa az elemeket;
   1300px fölött (valódi asztali méret) ez a szabály nem fut, ott marad az
   eredeti, két blokkos (márkanév balra / fülek+nyelvváltó jobbra)
   elrendezés — a clamp() 1300px-en pont az eredeti fix értékekre esik
   (8px gap / 16px fül-padding), tehát nincs ugrás a határon. */
@media (max-width: 1300px) {
    .topbar {
        justify-content: flex-start;
        gap: clamp(4px, calc(-7.29px + 1.176vw), 8px);
    }

    .topbar-brand-group,
    .topbar-actions,
    .topbar-tabs {
        display: contents;
    }

    /* A felhasználó kérésére a menü (Szimulátor fültől kezdve mindegyik fül
       + a nyelvváltó) akkor is a jobb szélhez igazodjon, ha a fenti
       display:contents miatt minden elem közvetlenül a .topbar flex-sorába
       kerül — enélkül a justify-content:flex-start miatt az egész sor
       (márkanév + fülek + nyelvváltó) balra tömörülne, üres hellyel jobbra,
       amikor MINDEN elem kifér egy sorban (ami a lenti zsugorodó
       padding/gap miatt innentől mindig így van). A margin-left:auto a
       "Szimulátor" fülre (az első fül, mindig ez az első elem a
       márkanév/LETÖLTÉS gomb után) felszívja a köztük lévő szabad helyet,
       így a fülsor+nyelvváltó a jobb szélre tolódik. */
    .topbar-tabs .topbar-tab:first-child {
        margin-left: auto;
    }

    /* A padding mellett a fülek betűmérete is folyamatosan zsugorodik
       (1300px-en 0.9rem/14.4px → 960px-en 12.8px, kb. 11%-os csökkenés) —
       ez korábban szándékosan KI volt zárva (lásd a fenti eredeti indoklást
       betűméret-kicsinyítés helyett), de a felhasználó kifejezett kérésére
       most bekerül, mert valós iPad-en (Safari, más betű-renderelés, mint a
       helyi teszteléshez használt headless Chrome) a puszta padding-
       zsugorítás önmagában nem bizonyult elég tartaléknak — a betűméret
       enyhe zsugorítása extra biztonsági ráhagyást ad, még mindig jól
       olvasható méretben. */
    .topbar-tab {
        padding-left: clamp(8px, calc(-14.59px + 2.353vw), 16px);
        padding-right: clamp(8px, calc(-14.59px + 2.353vw), 16px);
        font-size: clamp(12.8px, calc(8.28px + 0.4706vw), 14.4px);
    }
}

/* Mobil (álló ÉS fekvő) és tablet álló nézeten a felhasználó szerint a fenti
   folytatólagos tördelés (2-4 sorra törő fülsor) túl zsúfolt/csúnya —
   ezért 960px alatt a .topbar-tabs teljesen eltűnik, helyette a nyelvváltó
   elé (balra tőle) egy hamburger-gomb (.topbar-menu) kerül, ami lenyíló
   listaként adja ugyanazt a 6 linket (lásd partials/topbar.php). A 960px-es
   határ SZÁNDÉKOSAN szűkebb, mint a fenti 1300px-es töréspont: egy tipikus
   nagy telefon FEKVŐ nézete (~930px CSS-szélesség) még ide essen, egy
   valódi tablet FEKVŐ nézete (~1024px+) viszont már ne — azt a felhasználó
   kifejezetten nem kérte, ott marad a fenti fülsor. Mivel idelent sokkal
   kevesebb elem van (csak a márkanév + hamburger + nyelvváltó), a
   fentebbi (1300px-es) display:contents/flex-start "folytatólagos tördelés"
   itt már nem kell — visszaáll az eredeti, két blokkos (márkanév balra /
   hamburger+nyelvváltó jobbra) elrendezés, ezért ennek a szabálynak a FENTI
   1300px-es blokk UTÁN kell állnia (azonos specificitásnál a later-wins
   elv miatt). */
@media (max-width: 960px) {
    .topbar {
        justify-content: space-between;
    }

    .topbar-brand-group,
    .topbar-actions {
        display: flex;
    }

    .topbar-tabs {
        display: none;
    }

    .topbar-menu {
        display: block;
    }
}


/* Tabletnyi és annál keskenyebb (de még nem telefon-egyoszlopos) szélességeken
   a 3 eredmény-kártya elfér egymás mellett, de a rendszer saját betűtípusa
   (pl. iPadOS-en San Francisco) néhány nagyobb összegnél ("14 402 879 Ft")
   szélesebb lehet, mint amennyi elfér — ezért itt kicsit kisebb a szám
   mérete, hogy sose törjön két sorba. A letölthető Szimulátor-PDF
   (.calc-sheet) szándékosan KIVÉTEL ez alól — ott a pdf-export.js már
   ellenőrzötten, eszközfüggetlenül a teljes méretnél is elfér (lásd
   lentebb), ezt a képernyő-válaszos szabályt nem szabad ráengedni, mert az
   megint eszközfüggővé tenné a PDF kinézetét. */
@media (max-width: 1240px) {
    .stat-value { font-size: 1.35rem; }

    /* Ugyanezen a szélesség alatt a jelmagyarázat sora (Portfólió értéke /
       Befizetések / esetleg Ezüst is Mix módban) már nem fér el egy sorban
       az adatforrás-szöveggel együtt — anélkül, hogy ez a szabály ne
       futna, a hosszú forrás-mondat csúnyán, szó közben törne két sorra, a
       jobbra tolt "margin-left: auto" pozíció miatt pedig félrecsúszva. Itt
       inkább a teljes forrás-span saját, önálló sorba kerül, a kártya teljes
       szélességében — így a hosszú mondat szépen, balra igazítva, normálisan
       tördelődik, a legend-elemek pedig (lásd fent, white-space: nowrap)
       változatlanul egy sorban maradnak fölötte. Asztali nézetben (1240px
       fölött, ahol elég hely van) minden a Befizetések után, egy sorban
       marad — lásd az alap .chart-legend-source szabályt. */
    .chart-legend-source {
        flex-basis: 100%;
        margin-left: 0;
        margin-top: 2px;
    }
}

/* A felhasználó kifejezett kérésére a .stat-value betűmérete MÁR NEM
   viewport-szélesség alapú (média lekérdezéses) becsléssel zsugorodik — egy
   korábbi próbálkozás ez volt (clamp() a 861-1300px sávban), de a helyi
   teszthez használt headless Chrome-on jól működő arány a valódi iPad
   Safari eltérő rendszer-betűtípusán MÁS eredményt adott (túl korán vagy túl
   későn zsugorított), ráadásul MINDIG zsugorított egy kicsit akkor is, ha a
   konkrét (rövidebb) összeg simán kifért volna az eredeti méretben. Ehelyett
   lásd assets/js/simulator-offline.js fitStatValues() — az minden
   újraszámoláskor és ablak-átméretezéskor lefut, és KIZÁRÓLAG akkor
   csökkenti (inline style-lyal) az adott kártya .stat-value betűméretét, ha
   a TÉNYLEGESEN renderelt szöveg ténylegesen nem férne ki — az eredeti,
   ITT (illetve a fenti @media(max-width:1240px)) megadott méretből indulva,
   minden eszközön (asztali/tablet/telefon) egységesen. */

.calc-sheet .stat-value {
    font-size: 1.5rem;
}

/* A letölthető/nyomtatható összesítő FIX 688px szélessége (lásd
   .calc-sheet.pdf-export-offscreen fent) miatt a 3 fő szám-kártya
   (Befektetett összeg / Aktuális érték / Nyereség) — és ugyanígy a
   másodlagos statisztika-sor 3 kártyája — a .stat-card alap "flex: 1 1
   240px"-es basisával nem férne el egy sorban (240px*3 + 2*14px gap =
   748px > 688px): flex-wrap:wrap miatt az utolsó kártya külön sorba,
   középre esett — emiatt a letöltött/nyomtatott lap NEM az asztali
   nézettel megegyező, egysoros elrendezést mutatta. Itt kikényszerítjük
   az egysoros elrendezést — a .stat-card már eleve örökölt flex-shrink:1
   tulajdonsága ekkor automatikusan összenyomja a 3 kártyát a
   rendelkezésre álló szélességbe. Szándékosan csak a .calc-sheet-re
   vonatkozik (a fix szélesség miatt eszközfüggetlen — ugyanígy néz ki
   iPadről/telefonról nyomtatva is), a képernyőn megjelenő eredmény-panelt
   nem érinti. */
.calc-sheet .stat-grid {
    flex-wrap: nowrap;
}

/* A letölthető/nyomtatható összesítő mindig egyetlen A4 oldalra kell hogy
   férjen (lásd pdf-export.js renderToPdf) — ha a tartalom (pl. Turbo módban,
   ahol a záró Turbo-magyarázat doboz is hozzáadódik) magasabb, mint amennyi
   egy oldalon elférne, a teljes kép arányosan zsugorodik, ami az OLDALSÓ
   margót is szükségtelenül megnöveli (a felhasználó kifejezetten szűk,
   kb. 1 cm-es oldalsó margót kért). Ezért itt — KIZÁRÓLAG a .calc-sheet-en
   belül, a képernyőn megjelenő eredmény-panelt nem érintve — valamivel
   tömörebbek a dobozok közötti térközök, hogy kevésbé (vagy egyáltalán ne)
   legyen szükség erre a zsugorodásra. */
.calc-sheet .result-block {
    gap: 10px;
}

.calc-sheet .calc-period-band {
    margin: 10px 0 14px;
}

.calc-sheet .stat-secondary-panel {
    gap: 10px;
    padding: 12px 16px;
}

.calc-sheet .stat-closing-note {
    margin-top: 10px;
}

.calc-sheet .calc-foot {
    margin-top: 12px;
    padding-top: 8px;
}

/* Telefon: nincs elég szélesség két oszlophoz, egymás alá kerülnek. */
@media (max-width: 640px) {
    .layout {
        grid-template-columns: 1fr;
    }

    .form-panel {
        position: static;
    }
}

@media (max-width: 560px) {
    .topbar {
        padding: 14px 16px;
    }

    .topbar-actions {
        gap: 10px 16px;
        font-size: 0.85rem;
    }

    .topbar-tab {
        padding: 7px 12px;
        font-size: 0.85rem;
    }

    .layout,
    .layout-single {
        padding: 0 14px;
        margin: 16px auto;
    }

    .panel {
        padding: 18px;
    }
}

/* ============================================================
   LETÖLTHETŐ KALKULÁCIÓ-ÖSSZESÍTŐ — képernyőn rejtve. PDF-exportáláskor
   (lásd assets/js/pdf-export.js) a .pdf-export-offscreen osztály teszi
   átmenetileg "láthatóvá", de a képernyőn kívülre pozicionálva, fix
   szélességgel — ugyanaz a mechanizmus és indoklás, mint a Vizsga oldal
   .cert-sheet blokkjánál (assets/css/quiz.css) — két, egymástól
   független oldal, nem éri meg közös fájlba vonni.

   A fix szélesség önmagában NEM elég a pixel-pontos egyezéshez: a
   `--font-sans` a rendszer saját betűtípusát használja (San Francisco
   iOS-en, Roboto Androidon, Segoe UI Windowson stb.), és ezek eltérő
   karakterszélessége miatt UGYANAZ a szöveg eszközönként máshol törhet
   sorba, még fix pixelszélesség mellett is. Ezért az összesítő saját,
   helyben tárolt betűtípust kap (Inter, SIL OFL licenc,
   assets/fonts/inter-latin*.woff2) — ugyanaz a betű render­elődik minden
   eszközön, függetlenül az operációs rendszer alapértelmezésétől. */

@font-face {
    font-family: 'GGPrintSans';
    font-style: normal;
    font-weight: 100 900;
    font-display: block;
    src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'GGPrintSans';
    font-style: normal;
    font-weight: 100 900;
    font-display: block;
    src: url('/assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.calc-sheet {
    display: none;
    font-family: 'GGPrintSans', var(--font-sans);
}

/* A sorrend számít: ennek a .calc-sheet UTÁN kell jönnie, hogy azonos
   specificitás mellett ez nyerjen a cascade-ben (nincs !important). */
.calc-sheet.pdf-export-offscreen {
    display: block;
    position: fixed;
    top: 0;
    left: -10000px;
    width: 688px;
    padding: 0;
    color: var(--color-text);
}

/* Az összesítő fejléce/hero sávja/lábléce. */

.calc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-navy);
}

/* Az ügyfél neve (üres, ha nem adták meg) — a márkanév helyén. */
.calc-brand {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-navy);
    letter-spacing: -0.01em;
}

/* A dátum — a korábbi statikus "Szimulátor · Befektetési kalkuláció"
   felirat helyén. */
.calc-kicker {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    font-weight: 600;
}

/* Referencia dátum + vizsgált időszak — egyetlen helyen, csak itt (lentebb
   nem ismétlődik meg). Az ügyfél/dátum ide korábban tervezett elhelyezését
   a fejlécbe (calc-brand/calc-kicker) helyeztük át, hogy ez a sáv kizárólag
   az időszak-adatoké lehessen. */
.calc-period-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 20px;
    margin: 16px 0 20px;
    padding: 12px 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, #101c3d 0%, #1c2f5e 100%);
    color: #fff;
    text-align: right;
}

/* A felhasználó kérésére: a "VIZSGÁLT IDŐSZAK" sáv jobb szélén megjelenő
   GGHungary márkanév (ugyanaz a "GG" arany + "Hungary" fehér minta, mint a
   topbar .brand-je, lásd partials/topbar.php) — csak a letölthető PDF
   összesítőben (calc-sheet), a képernyős nézetben nem jelenik meg. */
.calc-period-band-logo {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.calc-period-band-logo span {
    color: var(--color-gold-light);
}

.calc-meta-lbl {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(255, 255, 255, 0.6);
    margin-right: 6px;
}

.calc-meta-val {
    font-size: 0.92rem;
    font-weight: 600;
}

/* A lábléc figyelmeztetése elé kerülő, kézzel kipipálható/X-elhető
   négyzet — a munkatárs nyomtatás után tollal jelölheti, hogy felhívta
   rá az ügyfél figyelmét. */
.calc-foot {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 18px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--color-card-border);
}

.calc-checkbox {
    flex: none;
    width: 12px;
    height: 12px;
    margin-top: 2px;
    border: 1.5px solid var(--color-text-muted);
    border-radius: 2px;
}

.calc-foot-text {
    font-size: 0.7rem;
    line-height: 1.5;
    color: #9aa1ad;
}

/* Apró, nagybetűs elválasztó-felirat — az ügyfél neve (calc-head) és az
   üzletkötő-blokk (calc-broker) fölött, ugyanazzal a stílussal, mint a
   calc-meta-lbl, csak sötét háttér nélküli kontextusban. */
.calc-eyebrow {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: 2px;
}

/* Üzletkötő sor a lap alján: "Üzletkötő: Név, telefonszám email-cím" —
   a név/telefonszám sima szöveg, kizárólag az email valódi
   <a href="mailto:.."> link (lásd assets/js/simulator-offline.js
   buildCalcSheetHtml), hogy a pdf-export.js a végleges PDF-ben is
   kattinthatóvá tudja tenni. */
.calc-broker {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-card-border);
    font-size: 0.8rem;
    color: var(--color-text);
}

.calc-broker a {
    color: var(--color-navy);
    font-weight: 600;
    text-decoration: underline;
}

/* ============================================================
   GATE-WRAP — a bejelentkező kapuk (.gate-box, lásd
   nemesfem-vizsga/style.css, bemutato/style.css) sötétkék, teljes
   magasságú hátterének újrafelhasználása a fiok/ modul oldalain (lásd
   fiok/regisztracio.php, bejelentkezes.php, stb.) — ott a .panel marad a
   fehér kártya (nem .gate-box), mert a fiok/ formjai bővebbek, mint egy
   sima jelszómező.
   ============================================================ */

.gate-wrap {
    min-height: calc(100vh - 65px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-navy);
    padding: 24px;
}

/* ============================================================
   NÉVBEKÉRŐ FELUGRÓ ABLAK — a bejelentkező kapuk (.gate-box, lásd
   nemesfem-vizsga/style.css, bemutato/style.css) vizuális nyelvének
   újrafelhasználása, overlay-ként a Szimulátor oldal fölött. A
   window.GGExportPdf.promptForName() építi fel (assets/js/pdf-export.js)
   — a Vizsga oldal (quiz.css) ugyanezt a szabálykészletet duplikálja.
   ============================================================ */

.gg-name-overlay {
    position: fixed;
    inset: 0;
    background: rgba(16, 28, 61, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1000;
}

/* A Link gyűjtemény ablaka (2026-09-18) a DOM-ban véglegesen jelen van
   és a `hidden` attribútummal nyílik/csukódik (lásd partials/topbar.php)
   — az eddigi .gg-name-overlay használatok mind JS-createElement-tel
   épültek fel/tűntek el, sosem `hidden` attribútummal, ezért eddig soha
   nem derült ki, hogy a fenti `display: flex` szabály (szerzői stílus)
   MINDIG felülírja a böngésző `[hidden] { display: none }` alap-
   szabályát (ugyanolyan specifikusság, a szerzői stílus nyer) — emiatt a
   `hidden` attribútum önmagában hatástalan volt: az ablak MINDIG látszott
   (a "Bezárás" gomb is emiatt tűnt hatástalannak, valójában csak nem
   látszott a hatása). Ez a szabály (nagyobb specifikusság: osztály +
   attribútum) felülbírálja a fentit, amikor a `hidden` jelen van. */
.gg-name-overlay[hidden] {
    display: none;
}

.gg-name-box {
    background: var(--color-card);
    border-radius: 18px;
    padding: 36px 32px 30px;
    width: 100%;
    max-width: 380px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

/* Hosszú szabad szöveghez (pl. admin_suggestions.php teljes javaslat-nézet) —
   a sima .gg-name-box nincs magasság-korlátozva/görgetve, mert eddig csak
   rövid, fix megerősítő szövegekhez kellett. */
.gg-name-box-scrollable { max-height: 80vh; overflow-y: auto; }
.gg-name-box h2 { font-size: 20px; margin: 0 0 8px; color: var(--color-navy); }
.gg-name-box p { font-size: 13.5px; color: var(--color-text-muted); margin: 0 0 20px; }
.gg-name-box label { display: block; text-align: left; font-size: 13px; font-weight: 700; color: var(--color-text); margin-bottom: 6px; }

.gg-name-box input[type="text"],
.gg-name-box input[type="email"],
.gg-name-box input[type="tel"] {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--color-card-border);
    font-size: 15px;
    margin-bottom: 14px;
}

/* Az üzletkötő-mezők (Kalkulátor PDF, lásd assets/js/pdf-export.js
   promptForName offerBroker) fölötti apró elválasztó felirat. */
.gg-name-box p.gg-name-section-label {
    margin: 4px 0 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-card-border);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    text-align: left;
}

/* "Emailben is kérem" opt-in sor — a checkbox + felirat egy sorban, a
   feltételesen megjelenő email-mező (lásd assets/js/pdf-export.js
   promptForName) pedig alatta, csak ha be van pipálva. */
.gg-name-box label.gg-name-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 14px;
    cursor: pointer;
}

/* Az "emailben is kérem" opció ideiglenesen letiltva (lásd
   assets/js/pdf-export.js promptForName) — halványabb, nem-kattintható
   megjelenés, hogy egyértelmű legyen: ez most nem elérhető. */
.gg-name-checkbox-label.is-disabled {
    opacity: 0.5;
    cursor: default;
}

.gg-name-checkbox-label input[type="checkbox"] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    accent-color: var(--color-gold);
    cursor: pointer;
}

.gg-name-email-field {
    margin-top: -6px;
}

.gg-name-email-error {
    margin: -10px 0 14px;
    font-size: 12px;
    color: var(--color-negative);
    text-align: left;
}

.gg-name-email-result {
    font-size: 13px;
    margin: -8px 0 16px;
}

.gg-name-email-result.is-ok { color: var(--color-positive); }
.gg-name-email-result.is-bad { color: var(--color-negative); }

.gg-name-box button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: var(--color-gold);
    color: var(--color-navy);
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
}

.gg-name-box button:hover { background: var(--color-gold-light); }

.gg-name-box button.gg-name-cancel {
    display: block;
    width: auto;
    margin-top: 16px;
    padding: 4px;
    background: none;
    color: var(--color-text-muted);
    font-weight: 700;
    font-size: 12.5px;
}

/* ============================================================
   LINK GYŰJTEMÉNY — személyes, fiókonkénti (admin/ügyfél) linklista, a
   topbar account-menüből nyitható (.gg-name-overlay/.gg-name-box
   mintájára), 2026-09-18. Minden admin/ügyfél saját maga rendezi és
   nevezi el a linkjeit — ezek automatikusan új sorként jelennek meg a
   topbar account-menüjében a "Link gyűjtemény" sor alatt.
   ============================================================ */

.link-gy-box { text-align: left; }
.link-gy-box h2 { text-align: center; }

/* Kártyás lista (2026-09-19, a felhasználó kifejezett kérésére, mockup
   alapján — Javaslatok/linkgy-sor-szerkesztes-javaslat-v3-2026-09-19.png
   "V3" változata) — felül mindig a "hozzáadás" űrlap (Név fölül, Link
   alatta, teljes szélességű Mentés gomb), ALATTA a mentett linkek
   kártyái. Minden kártyán a NÉV kattintható link (megnyitja az URL-t új
   fülön), alatta halvány, monospace URL-szöveg — a "✎ Szerkesztés" gomb
   nyitja ki a kártya alján a Név+Link szerkesztő űrlapot (MINDKÉT mező
   módosítható). */
.link-gy-add-form button[type="submit"] {
    width: 100%;
    margin-bottom: 0;
}

.link-gy-empty {
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
    padding: 14px 0 2px;
}

.link-gy-list {
    margin-top: 18px;
    padding-top: 4px;
    border-top: 1px solid var(--color-card-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 320px;
    overflow-y: auto;
}

.link-gy-card {
    border: 1.5px solid var(--color-card-border);
    border-radius: 12px;
    padding: 14px 16px;
}

.link-gy-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.link-gy-card-main {
    min-width: 100px;
    flex: 1 1 auto;
}

.link-gy-card-name {
    display: block;
    color: var(--color-navy);
    font-weight: 800;
    /* 2026-09-19: ugyanaz a betűméret, mint a bal oldali account-menü
       soraié (.topbar-account-menu-item — 0.97rem), a felhasználó
       kifejezett kérésére. */
    font-size: 0.97rem;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.link-gy-card-name:hover { color: var(--color-gold); }

.link-gy-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    /* Ha nem fér ki a névvel egy sorban, saját sorára kerül (a szülő
       .link-gy-card-top flex-wrap:wrap-ja miatt) — az `auto` margó ekkor
       is a sor jobb szélére tolja, nem esik vissza a bal oldalra. */
    margin-left: auto;
}

/* Ikon-only Szerkesztés gomb (2026-09-19, a felhasználó kifejezett
   kérésére — "a név, szerkesztés, fel, le, törlés egy sorba legyen"):
   a korábbi "✎ Szerkesztés" szöveges gomb helyhiány miatt egy sorba nem
   fért el a többi gombbal + a névvel mobilon, ezért ugyanolyan 30×30px-es
   ikon-négyzet lett, mint a Fel/Le/Törlés — a link (URL) emiatt is csak a
   szerkesztő panelen látszik/módosítható, a kártya nézetben nem. */
.link-gy-box button.link-gy-edit-toggle,
.link-gy-box button.link-gy-arrow-btn,
.link-gy-box button.link-gy-delete-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    border: 1.5px solid var(--color-card-border);
    border-radius: 8px;
    background: #fff;
    color: var(--color-navy);
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.link-gy-edit-toggle:hover,
.link-gy-arrow-btn:hover:not(:disabled) {
    border-color: var(--color-gold);
}

.link-gy-card.is-editing .link-gy-edit-toggle {
    border-color: var(--color-gold);
    color: var(--color-on-gold, var(--color-navy));
    background: var(--color-gold);
}

.link-gy-arrow-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.link-gy-box button.link-gy-delete-btn {
    color: var(--color-negative);
}

.link-gy-delete-btn:hover { border-color: var(--color-negative); }

.link-gy-edit-form {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--color-card-border);
}

.link-gy-edit-form label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: 5px;
}

.link-gy-edit-form input[type="text"] {
    margin-bottom: 10px;
    padding: 9px 11px;
    font-size: 13.5px;
}

.link-gy-edit-form input[type="text"]:last-of-type { margin-bottom: 12px; }

.link-gy-box button.link-gy-save-btn {
    width: 100%;
    margin: 0;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: var(--color-gold);
    color: var(--color-navy);
    font-weight: 800;
    font-size: 13.5px;
    cursor: pointer;
}

.link-gy-save-btn:hover { background: var(--color-gold-light); }

/* Publikus /hirek lista (hirek.php) — egyszerű, szöveg-alapú, a "UI
   minimalism" elvet követve: nincs saját kártya-dizájn, csak tagolás. */
.news-item {
    padding: 18px 0;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.news-item:last-child {
    border-bottom: none;
}

.news-item-title {
    margin: 0 0 4px;
    font-size: 1.05rem;
}

.news-item-date {
    margin: 0 0 10px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.news-item-body {
    font-size: 0.95rem;
    line-height: 1.5;
}

/* adatvedelem.php — a hosszú, sok szekciós GDPR/Cookie-szöveg tagolásához. */
.news-item-body h3 {
    margin: 24px 0 8px;
    font-size: 1.05rem;
    color: var(--color-navy);
}

.news-item-body h3:first-child {
    margin-top: 0;
}

.news-item-body ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.news-item-body li {
    margin-bottom: 4px;
}

/* Formázott hír (app/NewsFormatter.php) — a szerkesztő (.rte-area) és a
   megjelenítés (hirek.php, admin nézet, PDF) KÖZÖS stílusa, hogy a
   szerkesztés közben látott kép egyezzen a közzétettel. A bekezdések között
   nincs külön térköz (mint a régi, sima szöveges híreknél): egy üres sor
   csak akkor van, ha a szerkesztő beírt egyet. */
.news-rich {
    white-space: normal;
    overflow-wrap: anywhere;
}

.news-rich p,
.news-rich div {
    margin: 0;
}

.news-rich ul,
.news-rich ol {
    margin: 4px 0;
    padding-left: 24px;
}

.news-rich li {
    margin-bottom: 2px;
}

/* admin_helpdesk.php — a Hírek űrlap formázó szerkesztője (assets/js/rich-editor.js). */
.rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.rte-toolbar[hidden],
.rte-area[hidden] {
    display: none;
}

.rte-btn {
    width: 34px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-navy);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

.rte-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

.rte-btn.is-active {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: #fff;
}

.rte-btn svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Az "Automatikus formázás" gomb: ikon + szöveg (a többi gomb csak ikon). */
.rte-btn.rte-btn-wide {
    width: auto;
    padding: 0 12px;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.rte-btn sub {
    font-size: 0.6em;
    line-height: 0;
}

.rte-sep {
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: var(--color-card-border);
}

.rte-area {
    min-height: 240px;
    max-height: 60vh;
    overflow: auto;
    padding: 10px 12px;
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.5;
    resize: vertical;
}

.rte-area:focus {
    outline: 2px solid var(--color-tab-accent);
    outline-offset: 1px;
}

/* admin_registrations.php — Munkatársak/Ügyfelek/Érdeklődők fülváltó. */
.admin-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-subtab {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border: 1px solid var(--color-card-border);
}

.admin-subtab.is-active {
    background: var(--color-navy);
    color: #fff;
    border-color: var(--color-navy);
}

/* A 3 fül (Munkatársak/Ügyfelek/Érdeklődők) hamburger-gombbá nyílik —
   eredetileg (2026-09-18) csak mobilon, majd a felhasználó kifejezett
   kérésére EGYSÉGESEN, minden képernyőméreten így válasszon, nem csak
   keskeny nézeten. Ugyanaz a checkbox+label+panel minta (nincs hozzá JS),
   mint amit a partials/topbar.php .topbar-menu-je használ. */
.contact-tabs-menu {
    position: relative;
}

.contact-tabs-menu-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.contact-tabs-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    height: 22px;
    cursor: pointer;
}

.contact-tabs-menu-btn span {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: var(--color-navy);
}

.contact-tabs-menu .admin-subtabs {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% - 12px);
    right: 0;
    min-width: 200px;
    margin-bottom: 0;
    padding: 8px;
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    z-index: 20;
}

.contact-tabs-menu-input:checked ~ .admin-subtabs {
    display: flex;
}

/* Ügyfelek/Érdeklődők fülön az új kontakt felvétele — a meglévő .calc-form
   osztályt (lásd admin_suggestions.php válasz-mezője) használja a
   label/input alapstílushoz, ez csak a köré rakott dobozt/térközt adja. */
.admin-add-contact-form {
    max-width: 420px;
    margin-bottom: 28px;
    padding: 16px;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
}

.gg-name-box button.gg-name-cancel:hover { background: none; color: var(--color-navy); }

/* ============================================================
   BEJELENTKEZŐ OLDAL (fiok/bejelentkezes.php) — a felhasználó két
   referenciaképe alapján (Képek/belépési kép.png, Képek/háttér.png):
   hegyi naplemente háttérkép + sötét, "üveg-hatású" (glassmorphism)
   kártya, ikonos mezők. Szándékosan ÚJ, saját osztálykészlet (nem a
   .gate-wrap/.panel párost bővíti), hogy a többi fiok/ oldal (regisztráció
   stb.) változatlan maradjon — csak a bejelentkezés kapta ezt a dizájnt.
   ============================================================ */

.login-hero {
    min-height: calc(100vh - 65px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--color-navy) url('/assets/images/login-background.jpg') center / cover no-repeat;
    background: var(--color-navy) image-set(url('/assets/images/login-background.webp') type('image/webp'), url('/assets/images/login-background.jpg') type('image/jpeg')) center / cover no-repeat;
}

.login-card {
    width: 100%;
    max-width: 460px;
    background: rgba(16, 28, 61, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    padding: 36px 30px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    color: #fff;
}

.login-card-brand {
    text-align: center;
    font-weight: 800;
    font-size: 1.7rem;
    letter-spacing: 0.02em;
    margin-bottom: 26px;
}

.login-card-brand span {
    color: var(--color-gold-light);
}

/* A hibaüzenet/siker-doboz a világos alapértelmezett .alert-error/.alert-success
   helyett sötét kártyához illő, áttetsző változatot kap — csak ezen a
   kártyán belül, a többi oldalon a világos verzió marad érintetlen. */
.login-card .alert-error {
    background: rgba(217, 45, 32, 0.18);
    color: #ffb4ab;
    border-color: rgba(217, 45, 32, 0.4);
}

.login-card .alert-success {
    background: rgba(34, 197, 94, 0.18);
    color: #86e0a8;
    border-color: rgba(34, 197, 94, 0.4);
}

/* A meghívásos regisztráció (fiok/regisztracio.php) a .login-card
   dobozon belül a megszokott .calc-form mező-elrendezést használja (a
   felhasználó kérésére "ugyanaz a design", mint a bejelentkezésnél, de a
   ~9 mezőt nem erőltetjük az ikonos .login-field mintára) — a
   .calc-form label/.field-hint világos háttérre szánt szürke színe itt
   olvashatatlan lenne a sötét, áttetsző kártyán, ezért felülírjuk. Az
   input mezők (fehér háttér, sötét szöveg) változatlanul jól látszanak. */
.login-card .calc-form label,
.login-card .field-hint {
    color: rgba(255, 255, 255, 0.75);
}

.login-card .calc-form input[readonly] {
    background: rgba(255, 255, 255, 0.55);
    cursor: not-allowed;
}

/* Rövid, egyszavas cím a form fölött (fiok/regisztracio.php) — a hosszú
   adatvédelmi bevezető szöveg helyett, a felhasználó kifejezett kérésére. */
.login-card-heading {
    margin: 0 0 18px;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
}

/* Hírlevél-feliratkozás csúszó kapcsolója (fiok/sajat-adataim.php,
   admin_sajat_adataim.php) — a .lumpsum-check (partials/calculator_page.php)
   szerkezetét követi, DE szándékosan ZÖLD a bekapcsolt állapot (nem arany),
   hogy egyértelműen "aktív feliratkozás" jelentése legyen, ne a pénzügyi
   kalkulátor arany márka-színét idézze. Ugyanaz a zöld, mint a
   .login-card .alert-success szövegszíne (#22c55e alapszín). */
.toggle-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin-top: 14px;
}

.toggle-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggle-switch-track {
    flex-shrink: 0;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: #d8dbe3;
    position: relative;
    transition: background 0.15s;
}

.toggle-switch-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 28, 61, 0.3);
    transition: left 0.15s;
}

.toggle-switch input:checked ~ .toggle-switch-track {
    background: #22c55e;
}

.toggle-switch input:checked ~ .toggle-switch-track::after {
    left: 23px;
}

.toggle-switch-text {
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text);
    margin-top: 0;
    cursor: pointer;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.login-field {
    position: relative;
    display: flex;
    align-items: center;
}

.login-field-icon {
    position: absolute;
    left: 16px;
    display: flex;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
}

.login-field input {
    width: 100%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 14px 44px 14px 46px;
    color: #fff;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.login-field input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.login-field input:focus {
    outline: none;
    border-color: var(--color-gold);
    background: rgba(255, 255, 255, 0.11);
}

.login-password-toggle {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    padding: 4px;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    display: flex;
}

.login-password-toggle:hover {
    color: #fff;
}

/* A felhasználó kérésére az "Emlékezz rám" (valójában sosem működő,
   dekoratív) jelölőnégyzet eltűnt — a sor immár csak a jelszó-emlékeztető
   linket tartalmazza, ezért középre igazítva. */
.login-options-row {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    margin: 2px 0 4px;
}

.login-forgot-link {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: underline;
}

.login-forgot-link:hover {
    color: var(--color-gold-light);
}

.login-submit-btn {
    margin-top: 6px;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 999px;
    background: var(--color-gold);
    color: #201a05;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: filter 0.15s;
}

.login-submit-btn:hover {
    filter: brightness(1.06);
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 18px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
    text-transform: lowercase;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
}

.login-register-hint {
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    margin: 0;
}

.login-register-hint a {
    color: var(--color-gold-light);
    font-weight: 700;
    margin-left: 4px;
}

.login-guest-form {
    margin: 0;
    text-align: center;
}

.login-guest-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-gold-light);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}

.login-guest-btn:hover {
    text-decoration: underline;
}

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

/* ============================================================
   HÍREK LISTA-NÉZET (hirek.php) — a felhasználó kérésére csak dátum+cím
   listázódik, a teljes szöveg kattintásra (?id=) nyílik meg (lásd
   .news-item-detail lentebb, ami a meglévő .news-item stílust örökli).
   ============================================================ */

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

.news-list-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

/* hirek.php — a lista most valódi &lt;table&gt; (2026-09-14, "V5"
   újratervezés) — lásd .news-table lentebb. A javaslat/index.php "Saját
   javaslataim" listája viszont továbbra is ezt a flex-alapú
   .news-list-item/.news-list-link mintát használja (nem tábla), ezért
   ezek a szabályok NEM törölhetők/módosíthatók szabadon, csak bővíthetők. */
.news-list-author {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* hirek.php táblázatában a szerző neve egy sorban marad (2026-09-28,
   felhasználói kérés: "Borsodi / Csaba" két sorba tört) — a hosszabb címet
   a címoszlop töri, nem a névoszlop. */
.news-table-list td.news-list-author {
    white-space: nowrap;
}

/* Cím melletti kategória-/állapot-címkék (2026-09-14, "V5" újratervezés):
   "ÚJ" (piros, az adott hír EGYEDI megnyitásáig marad látható, lásd
   hirek.php $isNew), "FONTOS" (piros, az admin állítja be a hír
   szerkesztésekor, lásd admin_news.php is_important), "HÍREK" (arany,
   alapértelmezett kategória-címke minden nem-fontos hírnél — jelenleg
   nincs több kategória, ez egy statikus címke). */
.news-tag {
    display: inline-block;
    flex-shrink: 0;
    padding: 2px 7px;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.03em;
    text-align: center;
    border-radius: 999px;
    box-sizing: border-box;
    white-space: nowrap;
}

.news-tag-new,
.news-tag-important {
    color: #fff;
    background: var(--color-negative, #dc2626);
}

.news-tag-category {
    color: #201a05;
    background: var(--color-gold);
}

.news-delete-form {
    margin: 0;
    flex-shrink: 0;
}

.news-list-item:last-child {
    border-bottom: none;
}

.news-list-link {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 16px 4px;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
}

/* hirek.php — Kedvenc csillag (lista- és részletnézetben egyaránt). Sima
   gomb, nincs saját form-keret, hogy a hír-listasorba/címsorba simuljon. */
.news-favorite-form {
    margin: 0;
    flex-shrink: 0;
}

/* Kontúros csillag (2026-09-17, a felhasználó kifejezett kérésére: "ne a
   teljes csillag legyen fekete/sötét, csak a széle") — jelöletlen
   állapotban csak a körvonal látszik (fill:none, stroke:currentColor),
   kedvencnél a teljes csillag arannyal kitöltött. */
.news-favorite-star {
    display: inline-flex;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 6px;
    color: var(--color-text-muted);
}

.news-favorite-star svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linejoin: round;
}

.news-favorite-star:hover {
    color: var(--color-gold, #c9a13b);
}

.news-favorite-star.is-favorite {
    color: var(--color-gold, #c9a13b);
}

.news-favorite-star.is-favorite svg {
    fill: currentColor;
}

.news-item-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.news-item-title-row .news-item-title {
    margin: 0;
}

/* hirek.php — Összes/Kedvencek fülváltó, ugyanaz a vizuális minta, mint az
   admin .admin-subtab-nál, csak nem admin-kontextusban. */
.public-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.public-subtab {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border: 1px solid var(--color-card-border);
}

.public-subtab.is-active {
    background: var(--color-navy);
    color: #fff;
    border-color: var(--color-navy);
}

.news-list-link:hover .news-list-title {
    color: var(--color-gold-dark, var(--color-gold));
    text-decoration: underline;
}

.news-list-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.news-list-date svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.news-list-title {
    font-weight: 700;
    font-size: 0.98rem;
}

/* Már elolvasott hír (bejelentkezve, nincs "Új" jelvény): a cím nem vastag —
   felhasználói kérés, 2026-10-05. Vendégnél nincs olvasottság-követés, ott marad. */
.news-list-title.is-read {
    font-weight: 400;
}

/* hirek.php — valódi táblázat (2026-09-14, "V5" újratervezés, a
   felhasználó kifejezett kérésére, pontosan a jóváhagyott mintakép
   szerint): tömör, üzleti táblázat-fejléc díszítő rendező-nyilakkal,
   alulhúzott fülváltó a korábbi pirula-fülek helyett. */
/* hirek.php mobil nézetben a táblázat szélesebb a viewportnál, ami az
   EGÉSZ oldalt oldalra tolta (topbar is elcsúszott) — a .news-table-wrap
   a görgetést a táblázatra korlátozza, az oldal többi része fixen marad. */
.news-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Csak a hirek.php listájának (nem az admin_helpdesk.php azonos alapú táblájának): a tartalmi szélesség
   (cqw) a lenti, keskeny kijelzős "cím első oszlop" szabályhoz kell. */
.news-table-wrap-list {
    container-type: inline-size;
}

.news-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

@media (max-width: 640px) {
    .news-table-wrap {
        margin: 0 -4px;
    }

    .news-table {
        min-width: 560px;
    }
}

.news-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 0.68rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f7f8fa;
    border-bottom: 1px solid var(--color-card-border);
    border-top: 1px solid var(--color-card-border);
}

.news-table-sort-arrow {
    margin-left: 4px;
    opacity: 0.5;
    font-size: 0.6rem;
}

.news-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #f2f3f5;
    color: var(--color-text);
    vertical-align: middle;
}

.news-table tr:hover td {
    background: #fafbfd;
}

/* A teljes sorra kattintva megnyílik a hír, nem csak a címre (2026-09-18,
   a felhasználó kifejezett kérésére) — a JS a `[data-href]` attribútumot
   olvassa, itt csak a vizuális jelzés (kéz-kurzor). */
.news-row-clickable {
    cursor: pointer;
}

/* "Mai hírek" jelölés (2026-09-17, a felhasználó kifejezett kérésére: "Pl
   legyen egy vonás vagy valami") — arany vonás a sor bal szélén + kis
   jelvény a dátum mellett, a mai (published_at szerint) híreknél. */
.news-row-today td {
    background: rgba(var(--color-gold-rgb), 0.10);
}

.news-row-today:hover td {
    background: rgba(var(--color-gold-rgb), 0.14);
}

/* Fontos hír (2026-09-28, felhasználói kérés): nincs "Fontos" felirat és nincs csík, helyette vastag piros felkiáltójel.
   A mai hírnek nincs csíkja, csak erősebb (10%-os) sárga háttere. */
/* Fontos hír: felkiáltójel a sor elején (a bal margóban, a csillag előtt) — nem tolja el a sor tartalmát. */
.news-table-list td.news-title-cell { position: relative; }
.news-table-list th:first-child,
.news-table-list td.news-title-cell { padding-left: 30px; }
.news-important-mark {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--color-negative, #dc2626);
}
.news-important-mark svg { width: 10px; height: 24px; display: block; }

/* A műveletek cella normál táblázatcella marad (nem flex), különben a sor kiemelő háttere/csíkja a cellánál rövidebb. */
.news-table-list td.news-table-actions {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}
.news-table-list td.news-table-actions .news-delete-form {
    display: inline-block;
    vertical-align: middle;
}

/* Csillag a cím előtt (a sor elején): a kedvencnek jelöléshez. */
.news-title-cell-inner {
    display: flex;
    align-items: center;
    gap: 6px;
}
.news-title-cell-inner .news-favorite-form {
    align-self: flex-start;
    margin-left: -6px;
}

.news-today-badge {
    display: inline-block;
    padding: 1px 7px;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-on-gold);
    background: var(--color-gold);
    border-radius: 999px;
}

.news-table-title-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

/* Hosszú hírcímek: a sor akkor is törjön, ha a széles képernyőn kiférne — így a cím 2 rövidebb sorban olvasható,
   nem egyetlen nagyon hosszú sorban (felhasználói kérés, 2026-09-28). Kiegyenlített sortörés. */
.news-table-list .news-table-title-link {
    display: block;
    max-width: 30em;
    text-wrap: pretty;
}

/* a cím és az "Új" jelvény egy szövegfolyamban: a jelvény közvetlenül az utolsó szó után áll */
.news-table-list .news-table-title-link .news-tag {
    margin-left: 8px;
    vertical-align: middle;
}

.news-table-title-link:hover .news-list-title {
    color: var(--color-gold-dark, var(--color-gold));
    text-decoration: underline;
}

.news-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    white-space: nowrap;
}

.news-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(var(--color-navy-rgb), 0.12);
}

/* Hagyományos alul-vonalas fül-sáv (2026-09-17) — nincs buborék-háttér,
   csak felirat: 50%-os szín alapból, aktív állapotban 100%-os szín +
   arany aláhúzás. Piktogram kizárólag az "Összesen" fül előtt van. */
.news-subtab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 2px 12px;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(var(--color-navy-rgb), 0.5);
    text-decoration: none;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
}

.news-subtab-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.news-subtab-icon svg {
    width: 100%;
    height: 100%;
}

.news-subtab.is-active {
    color: var(--color-navy);
    border-bottom-color: var(--color-gold);
}

/* Nézet-választó lenyíló menü (2026-09-28, felhasználói kérés) — telefonon és álló
   táblagépen a fülsor (.news-subtabs) helyett; nagyobb kijelzőn rejtve marad. A hirek.php
   <details> elemére épül (nincs hozzá szükséges JS, csak a kívülre kattintás-bezárás). */
.news-view-dropdown {
    display: none;
    position: relative;
    margin-bottom: 18px;
}

.news-view-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: 340px;
    box-sizing: border-box;
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-navy);
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: 12px;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.news-view-dropdown-toggle::-webkit-details-marker {
    display: none;
}

.news-view-dropdown-chevron {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--color-gold);
    transition: transform 0.15s ease;
}

.news-view-dropdown[open] .news-view-dropdown-chevron {
    transform: rotate(180deg);
}

.news-view-dropdown-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    width: 100%;
    max-width: 340px;
    box-sizing: border-box;
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.news-view-dropdown-item {
    display: block;
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
}

.news-view-dropdown-item + .news-view-dropdown-item {
    border-top: 1px solid var(--color-card-border);
}

.news-view-dropdown-item:hover {
    background: var(--color-bg);
}

.news-view-dropdown-item.is-active {
    background: var(--color-gold);
    color: var(--color-on-gold, #201a05);
}

/* A "Hírek" cím és a nézet-választó egy sorban (2026-09-28, felhasználói kérés). Nagy
   kijelzőn a lenyíló rejtett, a sor csak a címet tartalmazza — a térköz ugyanaz, mint
   korábban a .panel-title alsó margója volt. */
.news-heading-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 18px;
}

.news-heading-row .panel-title {
    margin: 0;
    flex: 0 0 auto;
}

.news-heading-row .news-view-dropdown {
    margin-bottom: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 260px;
}

.news-heading-row .news-view-dropdown-toggle {
    padding: 10px 14px;
}

.news-heading-row .news-view-dropdown-panel {
    min-width: 200px;
}

@media (max-width: 1100px) {
    /* Telefonon/álló táblagépen a lista első oszlopa (hír címe + "Új" jelvény) a teljes
       látható szélességet kapja, a többi oszlop (kategória, "MAI", dátum, szerző, műveletek)
       jobbra tolódik, oldalirányban görgetve érhető el (2026-09-28, felhasználói kérés:
       a cím ne töredezzen sok sorra). */
    .news-table-list {
        min-width: 0;
        width: auto;
    }

    .news-table-list th:first-child,
    .news-table-list td:first-child {
        min-width: 100cqw;
        box-sizing: border-box;
    }

    .news-table-list th:not(:first-child),
    .news-table-list td:not(:first-child) {
        white-space: nowrap;
    }

    .news-subtabs {
        display: none;
    }

    .news-view-dropdown {
        display: block;
    }

    /* Telefonon/álló táblagépen a "Hírek" felirat nem látszik (2026-09-28, felhasználói
       kérés: zavaró) — a nézet-választó tölti ki a sort; a képernyőolvasónak megmarad. */
    .news-heading-row .panel-title {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .news-heading-row .news-view-dropdown {
        max-width: 340px;
    }

    .news-heading-row .news-view-dropdown-panel {
        min-width: 0;
    }

    /* Az értesítés-kapcsoló nem kényszerül külön sorba (2026-09-28, felhasználói kérés: "ahol elfér, ott a
       választóval egy sorban") — a .news-heading-row flex-wrap:wrap gondoskodik róla, hogy csak akkor törjön
       saját sorra, ha ténylegesen nem fér ki; a margin-left:auto (alap .news-push-box szabály) ilyenkor is
       jobbra igazítva tartja a saját sorában. */
}

/* admin_helpdesk.php (2026-09-14, a korábbi admin_suggestions.php +
   admin_news.php egyesítve) — körvonalas állapot-pirulák, pontosan a
   jóváhagyott mintakép szerint: zöld (megválaszolva/publikálva), navy
   (válaszra vár), szürke (piszkozat). Ugyanazt a .news-table
   táblázat-alapot használja, mint a hirek.php, csak a hír-lista tömör
   .news-tag címkéi helyett ezek KÖRVONALAS pirulák. */
.hd-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1.5px solid transparent;
    background: none;
    cursor: default;
    font-family: inherit;
}

button.hd-pill {
    cursor: pointer;
}

.hd-pill-green {
    color: var(--color-positive);
    border-color: var(--color-positive);
    background: rgba(26, 127, 69, 0.06);
}

.hd-pill-navy {
    color: var(--color-navy);
    border-color: var(--color-navy);
    background: rgba(16, 28, 61, 0.05);
}

.hd-pill-gray {
    color: var(--color-text-muted);
    border-color: var(--color-card-border);
    background: #f5f6f8;
}

.hd-pill-red {
    color: var(--color-negative);
    border-color: var(--color-negative);
    background: rgba(179, 38, 30, 0.06);
}

button.hd-pill-red {
    cursor: pointer;
}

/* admin_registrations.php ("Kapcsolatok") — táblázat helyett kártyás lista,
   a felhasználó kifejezett kérésére (2026-09-14, "V1" mintakép): NINCS
   színes monogram-avatar a név előtt, csak a név + másodlagos adatok +
   pirula-státuszok egy sorban. Kereső + rendezés a lista fölötti
   eszköztárban. Mindhárom fül (Munkatársak/Ügyfelek/Érdeklődők) ugyanezt a
   kártya-vázat használja, csak a jobb oldali pirulák/mezők térnek el
   fülenként. */
.contact-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.contact-search-input {
    flex: 1 1 220px;
    min-width: 180px;
    border: 1.5px solid var(--color-card-border);
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 0.88rem;
}

.contact-sort-select {
    border: 1.5px solid var(--color-card-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    background: #fff;
}

/* Ha sok a regisztráció, a lista ne nőjön a végtelenségig — a felhasználó
   kifejezett kérésére (2026-09-14) ugyanaz a "rögzített magasság + belső
   görgetés" minta, mint az admin_helpdesk.php két oszlopánál
   (.hd-col-body): kb. 5 kártyányi magasság után a doboz befagy, azon túl a
   lista SAJÁT görgetősávval jelenik meg, az oldal többi része fixen marad.
   Kevés elemnél (a max-height alatt) nincs látható változás. */
/* overflow:auto (mindkét tengelyen), NEM csak overflow-y (2026-09-19,
   kilencedik kör, a felhasználó kifejezett kérésére: mobilon a kártyák
   NE külön-külön görgethessenek vízszintesen — ez korábban azt
   eredményezte, hogy soronként MÁS pozícióba lehetett görgetni egy-egy
   kártyát, összevissza nézetet adva —, hanem EGYSZERRE, EGYÜTT mozogjon
   az egész lista jobbra-balra. Ehhez a vízszintes görgetés a KÖZÖS
   listakonténerre került át (lásd lentebb, a .contact-card már NEM kap
   saját overflow-x-et), így egyetlen közös görgetősáv van az egész
   listához, nem kártyánként egy-egy külön. */
.contact-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 620px;
    overflow: auto;
    padding-right: 4px;
}

/* flex-wrap:nowrap (2026-09-18, a felhasználó kifejezett kérésére, harmadik
   kör): a kártya korábban (flex-wrap:wrap) keskenyebb szélességen 2 sorra
   tört (a name+sub blokk és a pirulák/gomb külön sorba kerültek, mert
   együtt nem fértek el) — ez vizuálisan "egymás alattinak" hatott. Most a
   kártya EGYSÉGESEN, minden szélességen SOSEM tör sorba. `width:
   max-content` + `min-width:100%` (2026-09-19, kilencedik kör): a kártya
   legalább a lista szélességét kitölti (asztali nézeten, ahol a tartalom
   ennél keskenyebb, így is a teljes sorszélességet látja a felhasználó,
   mint eddig), de ha a tartalom ennél szélesebb (mobilon), a kártya
   TÚLNYÚLIK a listakonténer szélén — ezt fogja össze/görgeti a fenti
   .contact-card-list KÖZÖS overflow:auto-ja, nem a kártya saját, egyedi
   görgetése (lásd fentebb). */
.contact-card {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--color-card-border);
    border-radius: 12px;
    padding: 14px 18px;
}

/* 2026-09-18, negyedik kör, a felhasználó kifejezett kérésére: az Email/
   Vizsga pirulák minden sorban ugyanabban a (vízszintes) pozícióban
   álljanak, függetlenül attól, hogy egy adott sor neve/e-mailje/telefonja
   rövidebb vagy hosszabb — ehhez a "main" blokknak FIX szélességűnek kell
   lennie (nem a saját tartalmához igazodó auto méretűnek), hogy minden
   kártyán pontosan ugyanott érjen véget és kezdődjön a pirula-oszlop —
   ugyanaz az elv, mint egy táblázat oszlopszélessége. Ha egy sor tartalma
   ennél szélesebb lenne, a .contact-card flex-wrap:nowrap +
   overflow-x:auto-ja (lásd fentebb) gondoskodik a vízszintes görgetésről,
   nem a pirulák elcsúsznak. */
/* 2026-09-18, ötödik kör, a felhasználó kifejezett kérésére: az e-mail/
   telefon/dátum ("sub" sor) NE a név alatt, külön sorban álljon, hanem
   MELLETTE, ugyanabban a sorban — a .contact-card-main flex-es sorrá
   válik (nem block-elemek stack-elve), a name+sub egy vízszintes sorba
   kerül. A 340px helyett jóval szélesebb (620px) fix méret kell, hogy a
   tipikus "Név · GGszám · email · telefon · dátum" tényleg kiférjen egy
   sorban, ne törjön azonnal — ha mégis hosszabb lenne (pl. nagyon hosszú
   e-mail), a .contact-card-main saját flex-wrap:wrap-je csak akkor tör
   sort, ha ODABENT sem fér ki, a kártya (.contact-card) pedig szükség
   esetén vízszintesen görgethető (lásd fentebb). A notes-sor (ügyfelek/
   érdeklődők, ha van megjegyzés — a 2. .contact-card-sub) ugyanígy
   csatlakozik ehhez a sorhoz, csak túl hosszú tartalomnál törik le. */
/* NEM flex-wrap:wrap (2026-09-18, hatodik kör, a felhasználó kifejezett
   kérésére: "van ahol egy sorban van minden név, van ahol nem, legyen
   egységes") — flex-wrap:wrap mellett a rövidebb nevű sorok mindent
   kifértek egy sorban, a hosszabbak 2 sorra törtek, soronként eltérő
   megjelenést adva. Most MINDIG egy sorban marad (nowrap), egységesen —
   ha nem fér ki, a .contact-card (lásd fentebb) saját vízszintes
   görgetése kezeli, minden sornál ugyanúgy. */
/* A 620px korábban egy BECSLÉS volt a legszélesebb "Név · GGszám · email ·
   telefon · dátum" sorhoz — ha egy adott listában volt ennél szélesebb sor
   (pl. hosszú e-mail cím), az kilógott a fix dobozból és ráfolyt a
   pirulákra (2026-09-19, tizedik kör, a felhasználó kifejezett kérésére:
   "soha ne csússzon rá az email az előző sorra, mindig a legszélesebbhez
   állítsd be"). A `--contact-main-width` CSS-változót lentebb egy kis JS
   (lásd admin_registrations.php) számolja ki FUTÁSKOR: minden aktuális
   lista legszélesebb .contact-card-main-jához igazítja — így mindig
   pontosan annyi hely van, amennyi a leghosszabb sornak kell, se több, se
   kevesebb, és minden kártyán ugyanakkora (az oszlop-igazítás emiatt nem
   sérül). A 620px csak a JS lefutása előtti/JS nélküli tartalék. */
.contact-card-main {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    column-gap: 10px;
    flex: 0 0 var(--contact-main-width, 620px);
    min-width: 0;
}

.contact-card-name {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--color-text);
    white-space: nowrap;
}

/* A listasorban mostantól CSAK a név + GG-szám látszik, az email/telefon/
   dátum (korábban a .contact-card-sub sor) a névre kattintva jelenik meg
   egy felugró ablakban (2026-09-19, a felhasználó kifejezett kérésére:
   "csak név és GG szám látszódjon... email és telefon egy ablakba jöjjön
   elő, ha rákattint a névre — így jobban elfér minden"). A gomb-alap
   CSS-reset (border:none, háttér:none, padding:0, font öröklés) miatt a
   `<button>` pontosan úgy néz ki, mint a korábbi egyszerű szöveg, csak
   kattintható és aláhúzott pöttyözött vonala jelzi, hogy van mögötte
   további tartalom. */
.contact-card-name-btn {
    display: inline;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

.contact-card-name-btn:hover {
    color: var(--color-navy);
}

.contact-card-name .contact-card-secondary-id {
    font-weight: 500;
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

/* A névre kattintva felugró részletek-ablak tartalma (lásd .gg-name-box) —
   a box alapból középre igazított szöveget használ, ez balra igazítja a
   label/érték sorokat, olvashatóbban. */
.contact-details-list {
    text-align: left;
    margin: 0 0 20px;
}

.contact-details-list p {
    font-size: 14px;
    color: var(--color-text);
    margin: 0 0 10px;
}

.contact-details-list p:last-child {
    margin-bottom: 0;
}

.contact-details-list strong {
    color: var(--color-text-muted);
    font-weight: 700;
    margin-right: 6px;
}

/* Email/telefon a felugró ablakban valódi mailto:/tel: link (2026-09-19,
   a felhasználó kifejezett kérésére: "lehessen írni vagy hívni") — a
   navy szín + aláhúzás jelzi, hogy kattintható, eltérően a dátum/
   megjegyzés egyszerű szövegétől. */
.contact-details-list a {
    color: var(--color-navy);
    font-weight: 700;
    text-decoration: underline;
}

.contact-card-sub {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow-wrap: anywhere;
}

/* Sorba rendezve, egymás MELLETT (2026-09-18, nyolcadik kör — visszaáll a
   hetedik kör oszlopos elrendezéséről, a felhasználó kifejezett kérésére:
   "az Email, a Vizsga, Törlés egymás mellett legyen" — DE minden sorban
   (kártyán) a megfelelő pirula pontosan ugyanabban a vízszintes
   pozícióban álljon, azaz minden Email egymás ALATT (a lista soraiban
   lefelé), minden Vizsga egymás alatt, stb. Ehhez minden pozíció
   (1: email/ellenőrzés-pirula, 2: vizsga/hozzáférés-pirula, 3: Törlés,
   ha engedélyezett) FIX szélességű oszlopot kap — ugyanaz az elv, mint a
   .contact-card-main-nál (lásd fentebb): nem a tartalomhoz igazodó auto
   méret, hanem egy állandó szélesség, ami minden kártyán azonos, így a
   pirulák függőlegesen, kártyáról kártyára pontosan egy vonalba esnek,
   függetlenül attól, hogy egy adott sorban van-e Törlés vagy sem (annak
   hiánya csak eggyel kevesebb oszlopot jelent, a meglévők pozíciója nem
   csúszik). */
.contact-card-status {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.contact-card-status form {
    margin: 0;
}

.contact-card-status > *,
.contact-card-status form > .hd-pill {
    flex: 0 0 110px;
    width: 110px;
    box-sizing: border-box;
    text-align: center;
}

/* admin_helpdesk.php — Hírek (bal oszlop, 2/3: form+lista egymás alatt) +
   Javaslatok/Chat (jobb oszlop, 1/3, teljes magasságban) — 2026-09-17
   átalakítás a felhasználó kifejezett kérésére: a jobb oszlop alja
   PONTOSAN egy vonalban a bal oszlop aljával. A .hd-cols grid
   align-items:stretch-je miatt a bal oszlop (.hd-col-left) TERMÉSZETES
   magassága határozza meg a sor magasságát, a jobb oldali chat-panel ezt
   automatikusan felveszi (height:100%) — nincs hardkódolt pixel-magasság
   (korábban mindkét oszlop fix 480px volt, ez megszűnt, mert a bal oszlop
   mostantól tartalom-függő magasságú). A hír-lista saját, korlátozott
   magasságú dobozon belül görgethető (.hd-news-list-panel .hd-col-body),
   független a jobb oszlop stretch-elt magasságától. A .hd-cols a
   .layout-wide grid-je alatt él, ezért ugyanaz a min-width:0
   zsugorodás-védelem kell neki, mint a .layout-wide > .panel-nek (lásd
   fentebb .news-table-wrap mellett). */
.layout-wide > .hd-cols {
    min-width: 0;
}

/* CSS Grid, NEM Flexbox (2026-09-18, hetedik kör — visszatérés Grid-re,
   de RÁCS-OSZLOPOKKAL, nem a korábban elvetett grid-row:1/-1 trükkel).
   A korábbi (2026-09-18, harmadik átalakítás) Flexbox-os 2/1 arány
   (.hd-col-left{flex:2}, .hd-chat-panel{flex:1}) NEM adott pontos 2:1
   szélesség-arányt — élesben mérve (CDP getBoundingClientRect) 852px:
   476px jött ki a várt 885px:443px helyett —, mert a flex-basis:0%
   százalékos feloldása pontatlan volt abban a konkrét kontextusban, hogy
   a .hd-cols maga is egy CSS Grid (.layout-wide) rácseleme. Emiatt a
   felhasználó két, egymásra épülő kérése (2. — a Hírek szélessége
   egyezzen a fölötte lévő két mezőével; 4. — a Hírek "tényleges" teljes
   szélessége) nem tudott teljesülni pontosan. `grid-template-columns:
   2fr 1fr` ugyanezt a 2:1 arányt MATEMATIKAILAG PONTOSAN adja (ellenőrizve:
   885.33px / 442.66px), mert a Grid track-méretezés nem ugyanazzal a
   flex-basis-feloldási hibával számol. Az `align-items:stretch` az
   ALAPÉRTELMEZETT (javaslat/index.php-n ez kell — lásd lentebb
   .hd-col-left > *:last-child), admin_helpdesk.php-n a lenti
   @media (min-width:901px) szabály `start`-ra módosítja, hogy a bal/jobb
   oszlop magassága EGYMÁSTÓL FÜGGETLEN maradjon (2026-09-18, harmadik kör
   kifejezett kérése: "ha bezárok egy panelt, a másik oldalon ne legyen
   nagy üres tér" — ez a korábban elvetett grid-row:1/-1 trükkel NEM volt
   elérhető, mert az a bal oldali sor-sávokat felfújta a jobb oszlop
   magasságához; ez a rács-OSZLOPOKAT használó megoldás nem sávol sorokat
   át, ezért ez a hiba itt nem áll fenn). */
.hd-cols {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: stretch;
}

/* Mobilon (≤900px) VISSZA Flexbox-ra, NEM Grid marad (2026-09-19, tizedik
   kör, a felhasználó kifejezett kérésére: "a Hírek becsúszik az Üzenetek
   alá" — valós iPhone-on jelentkező hiba, amit a headless Chrome nem
   reprodukált, de a gyanú a `.hd-col-left { display: contents; }` +
   CSS Grid kombináció ismert WebKit/Safari hibájára esik — a Safari-nak
   régóta vannak renderelési hibái pont a display:contents + Grid
   együttesénél (a contents-szé vált gyermekek néha nem kapnak önálló
   grid-cellát, hanem ugyanarra a helyre esnek, ami pontosan az
   "egymás alá csúszás" tünetét adná). Mobilon a 2:1 arány-pontosság
   (amiért a Grid egyáltalán kellett, lásd fentebb) irreleváns, hiszen
   egyoszlopos az elrendezés — ezért itt biztonságosabb visszaváltani a
   korábban már bevált (a teljes session alatt valós iPhone-on
   ellenőrzött) Flexbox+display:contents kombinációra, ami sosem okozott
   ilyen problémát. */
@media (max-width: 900px) {
    .hd-cols {
        display: flex;
        flex-direction: column;
    }
}

.hd-cols > .panel,
.hd-cols > .hd-col-left {
    min-width: 0;
}

/* A fenti szabály csak a .hd-cols KÖZVETLEN gyermekeire vonatkozik — mivel
   a .hd-newsform-panel/.hd-news-list-panel most a .hd-col-left wrapper
   UNOKÁI (nem a .hd-cols közvetlen gyermekei), ez a szabály rájuk nem
   érvényesült, ezért a bennük lévő 560px min-width-es .news-table (lásd
   .news-table-wrap) kifeszítette a teljes bal oszlopot — ez okozta a
   "mobilon elcsúszott struktúra" hibát (2026-09-18, felfedezve és
   javítva: CDP-screenshottal ellenőrizve, hogy a page 866px-re nyúlt egy
   390px-es mobil viewporton). Ugyanez a min-width:0 kell minden
   .hd-col-left-gyereknek is, hogy a belső, saját overflow-x:auto-val
   görgethető táblázat NE nyújtsa ki a flex-oszlopot. */
.hd-col-left > * {
    min-width: 0;
}

/* admin_helpdesk.php: a bal oszlop (Új hír + Hírek lista) és a jobb oszlop
   (Üzenetek) alja pontosan egy vonalban legyen két oszlopos (asztali)
   nézetben, AMÍG az Üzenetek panel ténylegesen nyitva van (a felhasználó
   kifejezett kérésére, 2026-09-19, kilencedik kör: "alul a sorméret
   legyen egyforma, ha két ablakos nézet van" — a .hd-col-left UTOLSÓ
   látható gyermeke ilyenkor felnő a stretch-elt magasságig, lásd lentebb
   .hd-col-left > *:last-child).
   TIZEDIK kör, KÉT független ügynökkel is megerősítve (CDP-méréssel: a
   panelek SOSEM lógnak/fedik át ténylegesen, külön rács-oszlopban vannak
   — de a "mindig stretch" szabály önmagában azt eredményezte, hogy ha
   KIZÁRÓLAG az Üzenetek van becsukva, a doboza mégis stretch-elve maradt
   a bal oszlop teljes (nyitott) magasságáig — üres, tartalom nélküli
   fehér terület, ami úgy néz ki, "mintha nem záródna be grafikusan" —
   ez a felhasználó jelen kérésének pontos tünete): a stretch csak addig
   ésszerű, amíg VAN mivel egy vonalba hozni az Üzenetek alját (azaz amíg
   nyitva van és valódi tartalmat mutat) — becsukott állapotban nincs mit
   igazítani, ezért ilyenkor visszaváltunk `start`-ra, hogy az Üzenetek
   doboza a SAJÁT (összecsukott fejléc-only) magasságára zsugorodjon,
   ahelyett hogy mesterségesen magas maradna. */
@media (min-width: 901px) {
    .hd-cols:has(#suggestionsToggle[aria-expanded="false"]) {
        align-items: start;
    }
}

/* Hír megtekintése (admin_helpdesk.php, $viewingNews !== null) — a Hírek
   lista MINDEN képernyőméreten eltűnik (2026-09-18, nyolcadik kör, a
   felhasználó kifejezett kérésére: "ugyanúgy mint amikor admin mobilos
   nézetben lép be a hírekbe" — korábban ez a viselkedés csak mobilra volt
   szűkítve, lásd lentebb @media (max-width:900px), most már asztalira is
   érvényes), hiszen felesleges görgetést/zajt jelentene a hír tartalma
   mellett. Az Üzenetek panel viszont ASZTALI nézeten NEM tűnik el (csak
   mobilon, lásd lentebb) — ha nyitva van, egy 2 oszlopos elrendezés
   marad (Hír megtekintése | Üzenetek). */
.hd-cols.hd-cols-viewing-news .hd-news-list-panel {
    display: none;
}

@media (min-width: 901px) {
    /* A stretch önmagában csak a .hd-col-left dobozát nyújtja az Üzenetek
       magasságáig — a benne lévő (egyetlen látható) hír-kártyának is
       fel kell nőnie eddig, hogy a KÁRTYA alja (nem csak a láthatatlan
       doboz alja) érjen egy vonalba az Üzenetek aljával. A `:last-child`
       trükk (lásd lentebb) itt nem talál, mert a DOM-ban a (most
       display:none-ná vált) Hírek lista panel a valódi utolsó gyermek. */
    .hd-cols.hd-cols-viewing-news .hd-newsform-panel {
        flex: 1;
    }
}

/* A .hd-col-left wrapper visszakerült (2026-09-18, harmadik kör) — enélkül
   nem lenne mihez képest 2:1 arányban osztani a bal/jobb oszlopot, és
   javaslat/index.php-nak is szüksége van rá a bal oldali "Van ötleted?"
   panel + stretch-trükk miatt. A szélesség-arányt mostantól a .hd-cols
   `grid-template-columns:2fr 1fr`-je adja (lásd fentebb), ezért itt nincs
   szükség saját flex/grid méretezésre. Mobilon (≤900px, lásd lentebb)
   admin_helpdesk.php-n `display:contents`-szé válik, hogy a benne lévő 2
   panel (hd-newsform-panel, hd-news-list-panel) valódi testvérként
   viselkedjen a .hd-cols rácsában, és az `order` szabadon átrendezhesse
   őket az Üzenetek köré — javaslat/index.php-n ez a szűkített szabály nem
   fut, ott a wrapper mobilon is doboz marad. */
.hd-col-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.hd-chat-panel {
    min-width: 0;
}

/* Dinamikus Hírek-szélesség (2026-09-18, ötödik kör, a felhasználó
   kifejezett kérésére: "A hírek csak akkor legyen teljes szélesség és
   tényleges teljes szélesség, ha fölötte MINDKÉT ablak zárva van,
   különben nem" — ez felülírja az előző kör egy-feltételes szabályát).
   A Hírek lista (.hd-news-list-panel, a .hd-col-left UTOLSÓ gyermeke)
   csak akkor nő a SAJÁT dobozánál szélesebbre, ha MIND az Új hír
   bejegyzés (#newsFormToggle), MIND az Üzenetek (#suggestionsToggle)
   össze van csukva — a két láncolt :has() ÉS-kapcsolatként működik. Az
   Üzenetek oszlop (.hd-chat-panel, flex:1, lásd fentebb) szélessége
   SOSEM változik, mindig a szokásos 1/3-ot kapja. Mivel a
   .hd-col-left-nek nincs overflow-rejtése, a szélesebb gyermek egyszerűen
   túlnyúlik a 2/3-os oszlop jobb szélén, az Üzenetek oszlop ALATT/mögött
   folytatódva. A calc(150% + 24px) pontosan a 2fr/1fr/24px gap arány
   matematikai inverze (levezetve: ha a bal oszlop szélessége
   (W-24)×2/3, ennek 150%-a + 24px = W, azaz a teljes .hd-cols szélesség,
   FÜGGETLENÜL W tényleges értékétől) — ezért működik pontosan minden
   képernyőméreten, nem közelítés. Mivel ez csak asztali (2 oszlopos)
   elrendezésben értelmezhető, @media (min-width: 901px)-re szűkítve fut —
   mobilon (lásd lentebb) a .hd-cols már eleve egyoszlopos, ott ez a
   szabály félrevezető (visszahozná a korábbi vízszintes túlfolyás-hibát)
   volna, ezért ott nem fut. */
@media (min-width: 901px) {
    .hd-cols:has(#newsFormToggle[aria-expanded="false"]):has(#suggestionsToggle[aria-expanded="false"]) .hd-news-list-panel {
        width: calc(150% + 24px);
    }
}

/* Ha a jobb oszlop (chat-panel) tartalma természetesen magasabb, mint a
   bal oszlopé (javaslat/index.php egyetlen kompakt "Új üzenet" formja egy
   hosszabb beszélgetés mellett) — 2026-09-17, a felhasználó kifejezett
   kérésére: a bal oszlop UTOLSÓ eleme (a fehér kártya) nyúljon ki a sor
   teljes (stretch-elt) magasságáig, hogy a két kártya alja MINDIG egy
   vonalban legyen. admin_helpdesk.php-n (align-items:flex-start, lásd
   fentebb) ez a szabály hatástalan, mert a bal oszlop már nincs
   stretch-elve. */
.hd-col-left > *:last-child {
    flex: 1;
}

.hd-col-panel {
    display: flex;
    flex-direction: column;
}

/* A min-width:0 "leszivárgás" flex-kontextusban minden egyes flex-elem
   határon újra kell — a .hd-news-list-panel maga már min-width:0 (lásd
   fentebb), de a SAJÁT (oszlop-irányú flex) gyermekei (.hd-col-head-row,
   #newsListBody — ugyanígy #newsFormBody, #suggestionsBody a másik két
   összecsukható panelnél) ÚJRA flex-elemek, és nekik IS saját
   min-width:0 kell, különben a bennük lévő 560px-es .news-table (lásd
   .news-table-wrap) ezen a belső határon feszíti ki a szélességet — ez
   okozta a mobil nézet "elcsúszott struktúra" hibáját (2026-09-18,
   CDP-vel felderítve: a panel computed min-width helyesen 0px volt, mégis
   852px szélesre rendereltt, mert a gyermeke NEM örökölte automatikusan). */
.hd-col-panel > *,
#newsFormBody,
#newsListBody,
#suggestionsBody {
    min-width: 0;
}

.hd-news-list-panel .hd-col-body {
    max-height: 420px;
    overflow-y: auto;
}

/* flex-wrap:wrap + row-gap (2026-09-18, mobil-hiba javítása: a Hírek
   lista fejlécében a rendező <select> + nyíl-gomb keskeny mobil nézeten
   kilógott a jobb szélen túlra) — ha a cím + jobb oldali vezérlők együtt
   nem férnek egy sorban, a vezérlők SAJÁT sorba törnek a cím alá, ahelyett
   hogy vízszintesen túlfolynának a viewporton. */
.hd-col-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 10px;
    margin-bottom: 16px;
}

.hd-col-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.hd-sort-select {
    border: 1.5px solid var(--color-card-border);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text);
    background: #fff;
}

.badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #c0392b;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0 6px;
    margin-left: 3px;
    vertical-align: middle;
}

/* A jelvényt tartalmazó cím (pl. "ÜZENETEK") vízszintes középre igazítva
   a nagybetűs felirathoz — a puszta vertical-align:middle a nagyméretű,
   csupa nagybetűs cím sormagasságához képest lejjebb csúszva jelent meg
   (2026-09-18, a felhasználó kifejezett kérésére). */
.panel-title:has(.badge-count) {
    display: flex;
    align-items: center;
}

@media (max-width: 900px) {
    /* admin_helpdesk.php mobil sorrendje (2026-09-18, a felhasználó
       kifejezett kérésére): Új hír → Üzenetek → Hírek lista — az Üzenetek
       a két hír-panel KÖZÉ kerül, mert helytakarékossági szempontból az
       admin számára fontosabb, mint a hír-lista visszaolvasása. Ehhez a
       .hd-col-left wrapper `display:contents`-szé válik (kizárólag
       admin_helpdesk.php-n, a :has(.hd-newsform-panel) szűkítés miatt) —
       ez kiveszi a wrappert a doboz-modellből, a benne lévő 2 panel a
       .hd-cols VALÓDI (nem becsomagolt) gyermekévé válik, így az `order`
       szabadon átrendezheti őket az Üzenetek köré. javaslat/index.php-n
       ez a szabály nem fut, ott a wrapper mobilon is doboz marad
       (nincs szüksége újrarendezésre, csak 1 panelt fog össze). */
    .hd-cols:has(.hd-newsform-panel) .hd-col-left {
        display: contents;
    }

    .hd-cols:has(.hd-newsform-panel) .hd-newsform-panel {
        order: 1;
    }

    .hd-cols:has(.hd-newsform-panel) .hd-chat-panel {
        order: 2;
    }

    .hd-cols:has(.hd-newsform-panel) .hd-news-list-panel {
        order: 3;
    }

    .hd-chat-panel .hd-col-body.chat-contact-list {
        max-height: 340px;
    }

    /* A hír-lista ugyanígy kb. 5 sornyira korlátozva mobilon (a fenti,
       minden szélességre érvényes 420px-es max-height ennél többet, kb.
       8 sort engedett volna). */
    .hd-news-list-panel .hd-col-body {
        max-height: 300px;
    }

    /* Ha valaki mobilon megnyit egy üzenet-szálat — admin az
       admin_helpdesk.php-n, ügyfél a javaslat/index.php-n —, a többi panel
       fölösleges görgetést okozna a szál elérése előtt — a felhasználó
       kifejezett kérésére (2026-09-18) ilyenkor eltűnik minden más, csak a
       szál-nézet (chat-panel) látszik. A hd-col-left-thread-open osztályt
       admin_helpdesk.php az Új hír ÉS a Hírek lista panelre is ráteszi
       (mindkettő eltűnjön), javaslat/index.php a saját .hd-col-left
       wrapperére — kizárólag akkor, ha van aktív szál (admin: $activeThread,
       ügyfél: $mode==='detail'). Asztali nézeten (>900px) ez a szabály nem
       fut, ott minden panel egymás mellett marad, mint eddig. */
    .hd-col-left-thread-open {
        display: none;
    }

    /* Ha admin mobilon megnyit egy publikált hírt megtekintésre — a
       Hírek lista ÉS az Üzenetek panel is eltűnik itt (lásd lentebb, a
       Hírek lista eltüntetése mostantól minden képernyőméreten fut, az
       Üzenetek eltüntetése viszont csak mobilon marad, lásd alább). */
    .hd-cols.hd-cols-viewing-news .hd-chat-panel {
        display: none;
    }

    /* Üzenet-beviteli mező (admin válasz egy szálra, admin_helpdesk.php;
       ügyfél válasz, javaslat/index.php) mobilon feleakkora magasságú —
       a felhasználó kifejezett kérésére (2026-09-18), helytakarékossági
       okból. A .chat-compose textarea `rows` attribútuma (asztali gépen
       12) NEM reszponzív, ezért itt CSS-magassággal írjuk felül; a
       resize:vertical (lásd fentebb .chat-compose textarea) miatt a
       felhasználó szükség esetén kézzel visszanövelheti. */
    .chat-compose textarea {
        height: 130px;
    }
}

/* Nyíl-ikonos összecsukó gomb — 2026-09-18, a felhasználó kifejezett
   kérésére a korábbi szöveges "Összecsukás" gomb helyett (admin_helpdesk.php
   mindhárom összecsukható panelje: Új hír form, Hírek lista, Üzenetek).
   A látható szöveg megszűnt, csak egy lefelé mutató nyíl van — a
   nyitott/zárt állapotot a nyíl elforgatása (nyitva: felfelé, zárva: lefelé)
   és az aria-label/aria-expanded jelzi (accessibility). A JS
   (admin_helpdesk.php végén) a .is-collapsed osztályt kapcsolja. */
.hd-collapse-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1px solid var(--color-card-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-navy);
    cursor: pointer;
    padding: 0;
}

.hd-collapse-toggle svg {
    width: 18px;
    height: 18px;
    transform: rotate(180deg);
    transition: transform 0.15s;
}

.hd-collapse-toggle.is-collapsed svg {
    transform: rotate(0deg);
}

/* Kategória-jelvények (Hírek/Rendezvények/Rendszer, 2026-09-17) — a
   felhasználó kifejezett kérésére 50%-os háttér-átlátszóság, szándékosan
   eltér a fenti .hd-pill-* család ~5-6%-os konvenciójától, ezért ÚJ
   osztály, nem azok bővítése. Mindhárom variánsnál sötét (navy) szöveg,
   mert 50%-os alfa mellett mindhárom szín (arany/kék/piros) elég
   világosra keveredik a fehér panel-háttérrel ahhoz, hogy fehér szöveg
   ne legyen elég kontrasztos. */
.news-category-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--color-navy);
}

.news-category-badge-hirek {
    background: rgba(var(--color-gold-rgb), 0.5);
}

.news-category-badge-rendezveny {
    background: rgba(var(--color-blue-rgb), 0.5);
}

.news-category-badge-rendszer {
    background: rgba(var(--color-negative-rgb), 0.5);
}

/* Kategória-specifikus chip-radio szín, [data-category] attribútumra
   szűkítve, hogy SEMMILYEN más .chip-radio használatot (pl.
   admin_partner_link.php lejárat-választója, a számológép időszak-
   választója) ne érintsen — azok a site-szintű "chip-radio mindig arany"
   szabály szerint maradnak (lásd fentebb .chip-radio:has(input:checked)).
   A felhasználó kérésére a NEM kijelölt gombokon is látszik egy halvány
   (10%-os) szín-utalás, nem csak kijelöléskor — a :has(input:checked)
   szabály nagyobb specificitása (attribútum + pszeudo-osztály) miatt a
   teljes szín felülírja ezt kijelöléskor. */
.chip-radio[data-category="hirek"] {
    background: rgba(var(--color-gold-rgb), 0.1);
    border-color: rgba(var(--color-gold-rgb), 0.4);
}

.chip-radio[data-category="rendezveny"] {
    background: rgba(var(--color-blue-rgb), 0.1);
    border-color: rgba(var(--color-blue-rgb), 0.4);
}

.chip-radio[data-category="rendszer"] {
    background: rgba(var(--color-negative-rgb), 0.1);
    border-color: rgba(var(--color-negative-rgb), 0.4);
}

.chip-radio[data-category="hirek"]:has(input:checked) {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-on-gold);
}

.chip-radio[data-category="rendezveny"]:has(input:checked) {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: #fff;
}

.chip-radio[data-category="rendszer"]:has(input:checked) {
    background: var(--color-negative);
    border-color: var(--color-negative);
    color: #fff;
}

/* A "Javaslat" (javaslat/index.php) címzett-választójánál a "Hibabejelentés"
   opció piros — a felhasználó kifejezett kérésére (2026-09-18), hogy a
   "probléma jellegű" üzenet vizuálisan is elüljön a "Vezetőknek" száműtól.
   [data-recipient] attribútumra szűkítve, ugyanúgy, mint a fenti
   [data-category] szabályoknál — más .chip-radio használatot nem érint. */
.chip-radio[data-recipient="hibabejelentes"] {
    background: rgba(var(--color-negative-rgb), 0.1);
    border-color: rgba(var(--color-negative-rgb), 0.4);
}

.chip-radio[data-recipient="hibabejelentes"]:has(input:checked) {
    background: var(--color-negative);
    border-color: var(--color-negative);
    color: #fff;
}

/* Javaslatok — valódi többüzenetes chat (2026-09-17), megosztott "chat-"
   prefixű (nem "hd-") osztályok, mert a publikus javaslat/index.php is
   használja őket, nem csak az admin_helpdesk.php. */
.chat-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-navy);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    flex-shrink: 0;
}

.chat-avatar-sm {
    width: 28px;
    height: 28px;
    font-size: 0.68rem;
}

/* admin_helpdesk.php szál-lista (Üzenetek) — 2026-09-18, a felhasználó
   kifejezett kérésére: a monogram-avatar helyett/mellett gyors, első
   pillantásra látható jelzés arról, vár-e válaszra a szál. Szürke, amíg az
   ügyfél üzenete a legutóbbi (admin válaszra vár); zöld pipa, ha az admin
   már válaszolt (vagy a szál lezárva) — ugyanaz a feltétel, mint ami a
   mellette lévő "Válaszra vár"/"Megválaszolva" pirulát is vezérli. */
.chat-avatar-pending {
    background: var(--color-text-muted);
}

.chat-avatar-answered {
    background: var(--color-positive);
}

.chat-avatar-answered svg {
    width: 18px;
    height: 18px;
}

/* NEM flex:1 (2026-09-18, a felhasználó kifejezett kérésére) — korábban a
   maradék hely kitöltésével a válasz-doboz mindig a panel (stretch-elt)
   aljára lett tolva, akár messze a beszélgetés alá, ha a bal oszlop
   (pl. javaslat/index.php nagy "Új üzenet" formja) tette magasabbá a
   sort. Így a doboz mindig KÖZVETLENÜL a legutóbbi üzenet alatt van; egy
   esetleges maradék üres hely a panel ALJÁN jelenik meg, a doboz UTÁN —
   hosszú beszélgetésnél a max-height + overflow-y:auto gondoskodik a
   belső görgetésről, hogy a panel ne nőjön a végtelenségig. */
.chat-messages {
    max-height: 480px;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-bubble {
    display: flex;
    gap: 10px;
    max-width: 85%;
}

.chat-bubble-admin {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-bubble-customer {
    align-self: flex-start;
}

.chat-bubble-customer .chat-avatar {
    background: var(--color-gold);
    color: var(--color-on-gold);
}

.chat-bubble-content {
    background: #f5f6f8;
    border-radius: 12px;
    padding: 8px 12px;
}

.chat-bubble-admin .chat-bubble-content {
    background: rgba(var(--color-gold-rgb), 0.15);
}

.chat-bubble-text {
    margin: 0;
    font-size: 0.85rem;
    white-space: pre-wrap;
}

.chat-bubble-time {
    display: block;
    margin-top: 4px;
    font-size: 0.65rem;
    color: var(--color-text-muted);
}

/* Válasz/üzenetíró doboz (2026-09-17, a felhasználó kifejezett kérésére:
   "mindenhol nagy legyen, ahova üzenetet ír az ember") — nagy, jól
   olvasható szövegmező, a küldés gomb ALATTA, teljes szélességben, nem
   mellette összepréselve. */
.chat-compose {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-card-border);
}

.chat-compose textarea {
    width: 100%;
    resize: vertical;
}

.chat-contact-list {
    display: flex;
    flex-direction: column;
}

.chat-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--color-card-border);
    text-decoration: none;
    color: inherit;
}

.chat-contact.is-unanswered {
    background: #f6f8fb;
}

.chat-contact-main {
    flex: 1;
    min-width: 0;
}

.chat-contact-name {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-text);
}

.chat-closed-notice {
    text-align: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-card-border);
}

.chat-contact-snippet {
    display: block;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-contact-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.chat-contact-time {
    font-size: 0.68rem;
    color: var(--color-text-muted);
}

/* Admin "Új üzenet" — tag-kereső találati lista (admin_helpdesk.php
   ?compose=1) checkbox-listája, a .chat-contact sorok mintájára. */
.compose-customer-list {
    display: flex;
    flex-direction: column;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--color-card-border);
    border-radius: 10px;
}

.compose-customer-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-card-border);
    cursor: pointer;
}

.compose-customer-option:last-child {
    border-bottom: none;
}

.compose-customer-option input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.compose-customer-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.compose-customer-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-text);
}

.compose-customer-email {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* A korábbi keresésből "pinnelve" maradt (már kipipált) címzettek halvány
   háttérrel emelkednek ki az új keresési találatok közül (2026-09-19, a
   felhasználó kifejezett kérésére: "látszódjon, hogy lássa az admin, hogy
   már be van jelölve") — a checkbox saját kipipált állapota már jelzi ezt,
   ez a háttérszín pedig akkor is szembetűnő, ha a lista hosszú és a
   checkbox kívül esik az első pillantáson. */
.compose-customer-option.is-preselected {
    background: rgba(16, 28, 61, 0.05);
}

/* Hír PDF-letöltés sheet (hirek.php) — a .calc-sheet/.calc-sheet.pdf-
   export-offscreen mintája (lásd fentebb), ugyanazzal a "sorrend számít"
   cascade-triükkel: a .pdf-export-offscreen szabálynak KÉSŐBB kell jönnie
   azonos specificitás mellett. */
.news-pdf-sheet {
    display: none;
    font-family: 'GGPrintSans', var(--font-sans);
}

.news-pdf-sheet.pdf-export-offscreen {
    display: block;
    position: fixed;
    top: 0;
    left: -10000px;
    width: 688px;
    padding: 24px;
    background: #fff;
    color: var(--color-text);
}

.news-pdf-meta {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.news-pdf-body {
    white-space: pre-wrap;
}

/* Bankszámlaszámok PDF-lapja (informaciok.php) — a .news-pdf-sheet mintája:
   képernyőn rejtett, a pdf-export.js a .pdf-export-offscreen osztállyal a képernyőn
   kívülre, fix szélességgel teszi a fényképezés idejére (sorrend számít). A lap
   CSAK a bankszámla-adatokat tartalmazza, kártyánként rendezve. */
.info-pdf-sheet {
    display: none;
    font-family: 'GGPrintSans', var(--font-sans);
}

.info-pdf-sheet.pdf-export-offscreen {
    display: block;
    position: fixed;
    top: 0;
    left: -10000px;
    width: 688px;
    padding: 24px;
    background: #fff;
    color: var(--color-text);
}

.info-pdf-sheet h1 {
    margin: 18px 0 16px;
    font-size: 1.7rem;
    color: var(--color-navy);
}

.info-pdf-card {
    margin-bottom: 16px;
    border: 1px solid var(--color-card-border);
    border-radius: 12px;
    overflow: hidden;
    break-inside: avoid;
}

.info-pdf-card h2 {
    margin: 0;
    padding: 10px 16px;
    background: var(--color-navy);
    color: #fff;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.info-pdf-table {
    width: 100%;
    border-collapse: collapse;
}

.info-pdf-table td {
    padding: 8px 16px;
    border-top: 1px solid var(--color-card-border);
    font-size: 0.92rem;
    line-height: 1.35;
    vertical-align: top;
}

.info-pdf-table tr:first-child td {
    border-top: 0;
}

.info-pdf-table td:first-child {
    width: 34%;
    color: var(--color-text-muted);
}

.info-pdf-table td:last-child {
    font-weight: 700;
    color: var(--color-text);
}

.info-pdf-note {
    margin: 0;
    padding: 9px 16px 11px;
    background: rgba(var(--color-gold-rgb), 0.08);
    border-top: 1px solid var(--color-card-border);
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.hd-btn-mini {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 6px;
    background: var(--color-navy);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    margin-right: 6px;
}

.news-item-detail {
    padding-top: 8px;
}

/* ============================================================
   JAVASLAT — "Saját javaslataim" (javaslat/index.php) és az admin
   válasz-sor (admin_suggestions.php).
   ============================================================ */

.suggestion-history-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.suggestion-history-item:last-child {
    border-bottom: none;
}

.suggestion-history-date {
    margin: 0 0 4px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.suggestion-history-message {
    margin: 0;
    font-size: 0.95rem;
}

.suggestion-history-answer {
    margin-top: 10px;
    padding: 10px 14px;
    background: #eef2fb;
    border: 1px solid #c9d5f0;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.suggestion-history-answer p {
    margin: 4px 0 0;
    white-space: pre-wrap;
}

.suggestion-history-pending {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.admin-suggestion-answer-row td {
    background: var(--color-bg);
}

.admin-suggestion-answer-row textarea {
    width: 100%;
    box-sizing: border-box;
}

/* javaslat/index.php "Saját javaslataim" lista — a .news-list-item alapot
   bővíti egy törlés-gombbal (a hír-listánál nincs ilyen, ott nem törölhet
   senki, itt viszont a saját javaslatát a tag igen). */
.suggestion-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.suggestion-list-item .news-list-link {
    flex: 1;
    min-width: 0;
}

.suggestion-delete-form {
    flex: none;
    margin: 0;
}

/* ============================================================
   PARTNERI AJÁNLÓLINK — jelentkezőlap (partner-jelentkezes.php)

   A kitöltő űrlap maga a szokásos .calc-form/.panel nyelvet használja
   (lásd fent), ehhez itt nem kell semmi külön. Az alábbi szabályok
   KIZÁRÓLAG a PDF-generáláskor, láthatatlanul (képernyőn kívülre
   pozicionálva) felépített 5 "lap"-hoz kellenek — lásd
   assets/js/partner-apply.js. Mind az 5 lap PONTOSAN 1241×1754px
   (A4, 150dpi — megegyezik az assets/js/pdf-export.js
   MATERIAL_PAGE_DPI=150 feltételezésével és a statikus
   assets/data/partner-szerzodes-pages/page-*.png fájlok tényleges
   méretével), hogy az 5 lap egyetlen PDF-ben egyforma oldalméretet
   kapjon. ============================================================ */

.partner-pdf-page {
    position: fixed;
    top: 0;
    left: -10000px;
    width: 1241px;
    height: 1754px;
    background: #ffffff;
    font-family: var(--font-sans);
    color: var(--color-text);
    box-sizing: border-box;
    overflow: hidden;
}

.partner-pdf-page img {
    position: absolute;
    top: 0;
    left: 0;
    width: 1241px;
    height: 1754px;
}

.partner-pdf-field {
    position: absolute;
    display: flex;
    align-items: center;
    padding-left: 6px;
    box-sizing: border-box;
    /* 2026-09-24, felhasználói kérés: 15px -> 17.25px -> 19.8375px (két
       15%-os növelés), DE a felhasználó ezután is jelezte, hogy a szöveg
       vizuálisan nem tölti ki eléggé a rubrika magasságát. Két független
       ellenőrzés (valódi böngészős méréssel, Range.getBoundingClientRect)
       kiderítette a TÉNYLEGES korlátot: nem a font-size volt önmagában
       elégtelen, hanem hogy a legszűkebb rubrika (az 1. oldal "Jutalék
       mértéke" mezője, 248px széles, lásd partner-apply.js
       overlayFieldsForPage() case 1) tipikus tartalommal
       ("23,33% 23,33% 29,20%") ennél nagyobb font-size-nál (kb. 22.5px
       fölött) már túlcsordulna és az overflow:hidden miatt észrevétlenül
       levágódna. 21.5px a legnagyobb érték, ami ezt biztonságos
       tartalékkal (~4-5%) még elkerüli, macOS/Windows/Android eltérő
       rendszerbetűtípus-metrikái mellett is. (A body-ról örökölt
       line-height:1.5 NEM okoz problémát — mérve nincs hatással a
       ténylegesen renderelt szövegmagasságra ennél az elemnél.)
       FONTOS, KÜLÖN NEM JAVÍTOTT KOCKÁZAT: a "Jutalék mértéke" mező
       szabadszöveges (max. 100 karakter, admin_partner_link.php /
       fiok/partneri-regisztracio.php commission_note mezője) — egy ennél
       hosszabb, egyedi szöveg MÁR A JELENLEGI méretnél is csendben
       levágódhat a 248px-es dobozban; ez a font-size-tól függetlenül
       fennálló, korábbról örökölt hiba, nincs itt kezelve. */
    font-size: 21.5px;
    color: #1c2333;
    white-space: nowrap;
    overflow: hidden;
}

/* Az eredeti dokumentum "☐" jelölőnégyzeteibe illesztett "X" — a
   .partner-pdf-field-től eltérően középre igazított (nem balra), hogy
   pontosan a négyzet belsejébe kerüljön. */
.partner-pdf-check {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 700;
    color: #1c2333;
    line-height: 1;
}


/* A partneri link lejárati-idő választója (admin_partner_link.php) pontosan
   4 opciót mutat egy sorban — a .chip-radio-row alap 3-oszlopos rácsa itt
   nem jó (3+1 törne), ezért ez a kiegészítő osztály 4 oszlopra bővíti,
   KIZÁRÓLAG ott, ahol expliciten hozzáadjuk (a kalkulátor 6 éves
   választója változatlanul 3 oszlopos marad). */
.chip-radio-row-4col {
    grid-template-columns: repeat(4, 1fr);
}

/* GG Mix vételi ajánlat (gg-mix-jelentkezes.php) — a 2. szerződő mezői egy
   `<div id="party2Fieldset">`-be vannak csomagolva (hogy egyetlen JS-hívással
   eltűnjön/megjelenjen), DE a `.calc-form` maga `display:flex; flex-direction:
   column` (lásd fent) — ez az "egy mező = egy sor" elrendezést KIZÁRÓLAG a
   KÖZVETLEN gyermekeire adja. A csomagoló div emiatt egyetlen flex-itemként
   viselkedett, a benne lévő label/input elemek pedig a böngésző alapértelmezett
   inline/inline-block folyásába estek vissza — összement, egymás mellé
   tördelt mezőket eredményezve. Ez a szabály ugyanazt a flex-elrendezést adja
   a csomagoló divnek is, hogy a benne lévő mezők pontosan úgy nézzenek ki,
   mintha közvetlenül a .calc-form gyermekei lennének. */
.calc-form .mix-party-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Lásd lejjebb a .radio-plain-row[hidden] szabály azonos indoklását — a
   fenti feltétel nélküli `display: flex` enélkül felülírná a JS-sel
   beállított `hidden` attribútumot (párzőFieldset/customAmountWrap
   elrejtésekor a mező akkor is látszana). */
.mix-party-group[hidden] {
    display: none;
}

/* Igazolvány típusa (partner-jelentkezes.php) — a felhasználó kifejezett
   kérésére NEM a .chip-radio "pill gomb" stílust követi, hanem sima, kis
   kör alakú natív rádiógombokat mutat egymás mellett. */
.radio-plain-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 8px 0 16px;
}

/* A böngésző alap `[hidden] { display: none }` szabályát a fenti,
   feltétel nélküli `display: flex` felülírná (ugyanaz a specificitás, de az
   author-stílus mindig megelőzi a UA-stílust) — enélkül egy JS-sel `hidden`-re
   állított .radio-plain-row (lásd gg-mix-jelentkezes.php fémválasztó sorai)
   láthatatlanul is helyet foglalna ÉS ténylegesen látszana is, mert a
   `display:flex` nyerne a `display:none` fölött. Ugyanaz a minta, mint a
   .form-field[hidden] / .field-hint[hidden] szabályoknál lejjebb. */
.radio-plain-row[hidden] {
    display: none;
}

.radio-plain {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    cursor: pointer;
}

.radio-plain input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-gold, #c9a227);
    margin: 0;
}

/* A felhasználó kifejezett kérésére KIZÁRÓLAG az igazolvány-típus
   választónál (nem az újabb, telefon-előtag rádiógomboknál, amik a
   .radio-plain alap arany accent-color-át öröklik) legyen fekete a pötty. */
#docTypeRadioRow input[type="radio"] {
    accent-color: #000;
}

/* Egyedi lenyíló lista a BIC/SWIFT mezőhöz (partner-jelentkezes.php) — a
   natív <datalist>-nél sem az irány (fent/lent), sem a nagybetűsítés, sem
   a szélesség nem volt stílusozható, ezért ez a saját, JS-vezérelt verzió
   váltotta (lásd assets/js/partner-apply.js initBicCombobox()). */
.bic-combobox {
    position: relative;
}

.bic-combobox-list {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: 100%;
    overflow-y: auto;
    margin: 4px 0 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(16, 28, 61, 0.18);
    z-index: 20;
}

/* A lista MINDIG felfelé nyílik (felhasználói kérés) — a max-height-et a
   JS (positionList()) állítja be minden megnyitáskor, a mező fölött
   ténylegesen rendelkezésre álló hely alapján, hogy ha elég a hely, a
   teljes lista görgetés nélkül látszódjon. */
.bic-combobox-list--above {
    top: auto;
    bottom: 100%;
    margin: 0 0 4px;
}

.bic-combobox-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    cursor: pointer;
    text-transform: uppercase;
}

.bic-combobox-item:hover,
.bic-combobox-item.is-active {
    background: var(--color-bg);
}

.bic-combobox-code {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text);
}

.bic-combobox-name {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* 2026-09-24: "Szimulátor Pro" fül (sötétkék, arany keretes) + "ÚJ" jelvény. */
.topbar-tab-pro {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1c2c5f;
    border: 1.5px solid var(--color-gold);
    color: var(--color-gold-light);
}
.topbar-tab-pro:hover { background: #24387a; color: #fff; }
.topbar-tab-pro.is-active { background: var(--color-gold); color: #201a05; }
.topbar-pro-new {
    background: var(--color-gold);
    color: #201a05;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.topbar-tab-pro.is-active .topbar-pro-new,
.topbar-menu-item.is-active .topbar-pro-new { background: #201a05; color: var(--color-gold-light); }

/* 2026-09-24: időzítetten zárolt "Szimulátor Pro" fül — 30%-os átlátszóság,
   buborék hover/fókusz esetén (a buborék a halvány elemen KÍVÜL van, hogy ne
   halványodjon vele). */
.topbar-pro-lock { position: relative; display: inline-flex; cursor: not-allowed; outline: none; }
.topbar-tab-pro.is-locked { opacity: 0.3; pointer-events: none; }
.topbar-pro-lock-ico { width: 13px; height: 13px; display: block; }
.topbar-tab-pro.is-locked .topbar-pro-new { padding: 3px 7px; }
.topbar-pro-tip {
    position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    z-index: 60; white-space: nowrap; background: #fff; color: #101c3d;
    border: 2px solid var(--color-gold); border-radius: 12px; padding: 8px 14px;
    font-size: 0.82rem; font-weight: 700; box-shadow: 0 8px 22px rgba(16, 28, 61, 0.3);
    opacity: 0; visibility: hidden; transition: opacity 0.15s;
}
.topbar-pro-lock:hover .topbar-pro-tip,
.topbar-pro-lock:focus .topbar-pro-tip,
.topbar-pro-lock:focus-within .topbar-pro-tip { opacity: 1; visibility: visible; }
.topbar-menu-item-locked { display: block; cursor: not-allowed; }
.topbar-menu-item-locked-name { opacity: 0.3; display: inline-flex; align-items: center; gap: 8px; }
.topbar-menu-item-locked small { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--color-text-muted); font-weight: 600; }

/* Hírek: értesítések (push) gomb — csak bejelentkezve, ha a böngésző támogatja (assets/js/news-push.js). */
/* A "Hírek" cím sorában, jobbra (2026-09-28, felhasználói kérés: egy sorban legyen a címmel). Keskeny
   kijelzőn, ha nem fér el, a lenyíló alá törik. */
.news-push-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0 0 0 auto;
}

.news-push-box[hidden] {
    display: none;
}

/* Kapcsoló (2026-09-28, felhasználói kérés): bekapcsolva zöld + "Értesítések be", kikapcsolva szürke + "Értesítések ki". */
.news-push-switch {
    display: inline-flex;
    /* A gomb (kapcsoló) jobbra, a szöveg tőle balra (2026-09-28, felhasználói kérés) — a DOM-sorrend
       (előbb a kapcsoló, utána a felirat, ez a beszédszintetizátoroknak/Tab-sorrendnek jó) változatlan,
       csak a MEGJELENÍTÉS fordított. */
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
    padding: 4px 2px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-navy);
    background: none;
    border: none;
    cursor: pointer;
}

.news-push-track {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: #c9ced8;
    transition: background 0.18s ease;
}

.news-push-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.18s ease;
}

.news-push-switch[data-state="on"] .news-push-track {
    background: #22a559;
}

.news-push-switch[data-state="on"] .news-push-thumb {
    transform: translateX(20px);
}

.news-push-switch:not([data-state="on"]) {
    color: var(--color-text-muted);
}

.news-push-switch:focus-visible .news-push-track {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

.news-push-switch:disabled {
    opacity: 0.6;
    cursor: default;
}

.news-push-switch[hidden] {
    display: none;
}

/* Olvasottság-szűrő: Mind / Olvasatlan / Olvasott (2026-10-05) — háromállású, szegmentált választó; sima linkek; a "Hírek" cím mellett, balra. */
.news-read-filter {
    display: inline-flex;
    margin: 0 0 0 6px;
    padding: 3px;
    gap: 2px;
    background: rgba(var(--color-navy-rgb), 0.07);
    border-radius: 999px;
}

.news-read-filter-item {
    padding: 6px 14px;
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(var(--color-navy-rgb), 0.6);
    text-decoration: none;
    border-radius: 999px;
    white-space: nowrap;
}

.news-read-filter-item.is-active {
    color: var(--color-navy);
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.news-read-filter-item:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

.news-push-status {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* =====================================================================================================
   Hírek lista — kártyák (2026-10-09, felhasználói kérés: ugyanolyan szép, mint a Heti jelentés hírei)
   A hirek.php listája; a többi oldal (pl. admin_helpdesk) továbbra is a .news-table-t használja.
   ===================================================================================================== */
.nl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; margin-top: 18px; }
.nl-card {
    position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; cursor: pointer;
    background: var(--color-card); border: 1px solid var(--color-card-border); border-left: 4px solid var(--color-gold);
    border-radius: var(--radius-lg); padding: 16px 18px 14px; box-shadow: var(--shadow-card);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.nl-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16, 28, 61, 0.12); }
.nl-cat-rendezveny { border-left-color: #6d8bd0; }
.nl-cat-rendszer { border-left-color: #8e97ad; }
.nl-card.nl-important { border-left-color: var(--color-negative, #dc2626); }
.nl-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-height: 26px; }
.nl-kick { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold-dark, var(--color-gold)); }
.nl-cat-rendezveny .nl-kick { color: #4f6fb8; }
.nl-cat-rendszer .nl-kick { color: var(--color-text-muted); }
.nl-imp { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-negative, #dc2626); }
.nl-top .nl-fav { margin-left: auto; }
.nl-title { margin: 0; font-size: 1.1rem; line-height: 1.28; font-weight: 800; color: var(--color-heading, var(--color-navy)); text-wrap: pretty; overflow-wrap: anywhere; }
.nl-title a { color: inherit; text-decoration: none; }
.nl-card:hover .nl-title a { color: var(--color-gold-dark, var(--color-gold)); }
.nl-card.nl-read .nl-title { font-weight: 600; }
.nl-text { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nl-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; }
.nl-meta { font-size: 0.8rem; color: var(--color-text-muted); display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 6px; min-width: 0; }
.nl-meta svg { width: 14px; height: 14px; flex: none; }
.nl-foot .news-delete-form { margin: 0; flex: none; }
html[data-theme="dark"] .nl-cat-rendezveny .nl-kick { color: #7ea1ff; }
html[data-theme="dark"] .nl-card:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); }
@media (max-width: 700px) { .nl-grid { grid-template-columns: minmax(0, 1fr); } }

/* Hírek lista — főhír + további hírek oldalsáv (a Heti összefoglaló elrendezése) */
.nl-lead { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: stretch; }
.nl-lead.nl-lead-solo { grid-template-columns: minmax(0, 1fr); }
.nl-lead-card { background: #faf7f0; border-color: #efe6cc; border-left-width: 5px; padding: 22px 26px 18px; gap: 10px; }
.nl-lead-card .nl-title { font-size: 1.85rem; line-height: 1.15; letter-spacing: -0.015em; margin: 4px 0 4px; }
.nl-lead-card .nl-text { font-size: 1.02rem; line-height: 1.65; color: var(--color-text); display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.nl-side { background: #faf7f0; border: 1px solid #efe6cc; border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-card); min-width: 0; }
.nl-side-head { margin: 0 0 8px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.nl-side-item { display: block; padding: 10px 12px; margin: 0 -12px; border-radius: 12px; text-decoration: none; color: inherit; transition: background .15s; }
.nl-side-item:hover { background: rgba(var(--color-gold-rgb), 0.14); }
.nl-side-item b { display: block; margin-top: 2px; line-height: 1.3; font-size: 0.97rem; color: var(--color-heading, var(--color-navy)); overflow-wrap: anywhere; }
.nl-side-item b.is-read { font-weight: 600; }
/* Az aznapi hír a jobb oldali sávban (2026-10-15): külön "Ma" csoport elválasztóval; NINCS háttérszín (az a kijelölés/hover színe) —
   csak arany sáv balra. */
.nl-side-item.nl-side-today { position: relative; background: transparent; padding-left: 16px; }
/* egyenes, alig lekerekített sáv (nem a kártya sarkait követő ív) */
.nl-side-item.nl-side-today::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 2px; background: var(--color-gold, #c9a227); }
.nl-side-item.nl-side-today:hover { background: rgba(var(--color-gold-rgb), 0.14); }
.nl-side-item small { display: block; margin-top: 2px; font-size: 0.76rem; color: var(--color-text-muted); }
.nl-lead + .nl-grid { margin-top: 20px; }
html[data-theme="dark"] .nl-lead-card, html[data-theme="dark"] .nl-side { background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .nl-lead-card { border-left-color: var(--color-gold); }
html[data-theme="dark"] .nl-lead-card.nl-important { border-left-color: var(--color-negative, #dc2626); }
@media (max-width: 900px) { .nl-lead { grid-template-columns: minmax(0, 1fr); } .nl-lead-card .nl-title { font-size: 1.45rem; } }
.nl-group { margin-top: 28px; }
.nl-group-head { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 1.15rem; font-weight: 800; color: var(--color-heading, var(--color-navy)); }
.nl-group-head::after { content: ""; flex: 1; height: 1px; background: var(--color-card-border); }
.nl-group-count { order: 2; font-size: 0.75rem; font-weight: 800; padding: 2px 10px; border-radius: 999px; background: rgba(var(--color-gold-rgb), 0.18); color: var(--color-gold-dark, var(--color-gold)); }
.nl-group .nl-grid { margin-top: 12px; }
.nl-side-head-sep { margin-top: 18px; padding-top: 16px; border-top: 1px solid #efe6cc; }
html[data-theme="dark"] .nl-side-head-sep { border-top-color: rgba(255, 255, 255, 0.1); }
/* A csoportok (hónap / múlt hónap / régebbi) hírei egymás alatt, a főhír + oldalsáv teljes szélességében */
.nl-grid.nl-grid-wide { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.nl-grid-wide .nl-card { padding: 16px 24px 14px; }
.nl-grid-wide .nl-text { -webkit-line-clamp: 2; line-clamp: 2; }
.nl-side-scroll { max-height: 346px; overflow-y: auto; margin-right: -10px; padding-right: 10px; }
.nl-side-scroll { min-height: 8px; }
.nl-side .nl-side-scroll + .nl-side-head-sep { margin-top: 14px; }
/* A csoportok (hónap / múlt hónap / régebbi) pontosan olyan szélesek, mint a főhír doboza (2/3); a jobb oldali 1/3-ban a Rendezvények / Rendszer blokk áll */
.nl-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 28px; }
.nl-split .nl-group { margin-top: 0; }
.nl-split .nl-side-extra { position: sticky; top: 90px; }
.nl-split.nl-split-solo { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .nl-split { grid-template-columns: minmax(0, 1fr); } .nl-split .nl-side-extra { position: static; } }
/* A csoportok hírei csempék (nem hosszú sorok): a 2/3 széles oszlopban 3-2 csempe egymás mellett */
.nl-grid.nl-grid-tiles { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.nl-grid-tiles .nl-card { padding: 16px 18px 14px; }
.nl-grid-tiles .nl-text { -webkit-line-clamp: 3; line-clamp: 3; }
/* Az asztali nézetben a főhír mezőjében megnyitott hír */
.nl-lead-card { scroll-margin-top: 90px; }
.nl-back { margin-left: auto; border: 1px solid var(--color-card-border); background: var(--color-card); color: var(--color-text-muted); border-radius: 999px; padding: 4px 14px; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.nl-back:hover { border-color: var(--color-gold); color: var(--color-gold-dark, var(--color-gold)); }
.nl-open-body { font-size: 1.02rem; line-height: 1.65; color: var(--color-text); overflow-wrap: anywhere; }
.nl-open-body p, .nl-open-body ul, .nl-open-body ol { margin: 0 0 0.8em; }
.nl-open-body a { color: var(--color-gold-dark, var(--color-gold)); font-weight: 600; }
.nl-openpage { font-size: 0.8rem; font-weight: 700; color: var(--color-gold-dark, var(--color-gold)); text-decoration: none; }
.nl-openpage:hover { text-decoration: underline; }
.nl-lead-card.nl-opened { cursor: default; }
/* "Ezen a héten" / "Múlt héten": legfeljebb 4 hír látszik, több esetén görgethető (346 px = 4 sor). */
/* A Rendezvények / Rendszer blokk egy síkban a hónap-csoport csempéivel: a csoportcím fent, alatta egy sorban a csempék és a blokk. */
.nl-split { row-gap: 12px; }
.nl-split .nl-group { display: contents; }
.nl-split .nl-group-head { grid-column: 1; grid-row: 1; margin: 0; }
.nl-split .nl-grid { grid-column: 1; grid-row: 2; margin-top: 0; }
.nl-split .nl-side-extra { grid-column: 2; grid-row: 2; align-self: start; }
@media (max-width: 900px) {
    .nl-split .nl-group-head, .nl-split .nl-grid, .nl-split .nl-side-extra { grid-column: 1; grid-row: auto; }
}
/* A Rendezvények / Rendszer blokk soha nem magasabb a mellette lévő csempe-sornál: ami nem fér el, görgethető (asztali, kétoszlopos nézetben). */
.nl-split .nl-side-extra { position: relative; top: auto; padding: 0; align-self: stretch; min-height: 150px; overflow: hidden; }
.nl-split .nl-side-extra-in { position: absolute; inset: 0; overflow-y: auto; padding: 20px 22px; }
@media (max-width: 900px) {
    .nl-split .nl-side-extra { min-height: 0; overflow: visible; }
    .nl-split .nl-side-extra-in { position: static; overflow: visible; }
}
/* Állandó méret asztali nézetben: a főhír + oldalsáv sor magassága mindig 5 hírnyi (600 px); ami nem fér el, a dobozon belül görgethető, a sor soha nem nő meg.
   A hónap-csoportok 5 csempénél (3+2) többnél szintén görgethetők. Telefonon/tableten nincs fix magasság. */
@media (min-width: 901px) {
    .nl-lead { height: 600px; }
    .nl-lead .nl-lead-card { height: 100%; min-height: 0; overflow-y: auto; }
    .nl-lead .nl-side { height: 100%; min-height: 0; overflow-y: auto; }
    .nl-lead .nl-side-scroll { max-height: none; overflow: visible; margin-right: 0; padding-right: 0; }
    .nl-split .nl-grid.nl-grid-scroll { max-height: 392px; overflow-y: auto; padding-right: 6px; align-content: start; }
}
/* Csak fel-le görgethető dobozok: vízszintes görgetés nincs (a sáv elemeinek negatív margója miatt jelent meg). */
.nl-lead .nl-lead-card, .nl-lead .nl-side, .nl-split .nl-side-extra-in, .nl-split .nl-grid.nl-grid-scroll, .nl-side-scroll { overflow-x: hidden; }
/* Hosszú szó / webcím soha nem csúszhat ki a hír dobozából (telefonon sem): tördelés bárhol */
.nl-card, .nl-side-item, .nl-lead-card .nl-text, .nl-text, .nl-title, .nl-meta { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.nl-lead > *, .nl-split > *, .nl-grid > * { min-width: 0; }
/* A hír külön oldalán a hosszú webcím / szó ne lógjon ki a kártyából (telefonon sem) */
.news-item-body, .news-item-body a, .news-item-title, .news-item-detail { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

/* Hírek fejléc (2026-10-09, felhasználói kérés): nincs "Hírek" felirat; a Mind / Olvasatlan / Olvasott választó és a fülek (Összes, Hírek, Rendezvények, …) EGY sorban, jobbra az értesítés-kapcsoló. */
.news-heading-row .panel-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (min-width: 1101px) {
    .news-heading-row { align-items: flex-end; gap: 10px 26px; border-bottom: 1px solid rgba(var(--color-navy-rgb), 0.12); }
    .news-heading-row .news-read-filter { margin: 0 0 6px 0; }
    .news-heading-row .news-subtabs { margin: 0; border-bottom: 0; flex: 0 1 auto; gap: 22px; order: 1; }
    .news-heading-row .news-read-filter { order: 2; }
    .news-heading-row .news-push-box { order: 3; }
    .news-heading-row .news-push-box { margin: 0 0 8px auto; }
}
/* Ha nincs főhír vagy nincs csoport, a jobb oldali dobozok akkor is a jobb oldali oszlopban maradnak (nem nyúlnak teljes szélesre), és sosem tűnnek el. */
.nl-lead.nl-lead-nolead .nl-side { grid-column: 2; }
.nl-split.nl-split-solo { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.nl-split.nl-split-solo .nl-side-extra { grid-column: 2; grid-row: 1; }
@media (max-width: 900px) { .nl-lead.nl-lead-nolead .nl-side, .nl-split.nl-split-solo .nl-side-extra { grid-column: 1; } .nl-split.nl-split-solo { grid-template-columns: minmax(0, 1fr); } }
.nl-lead-empty { cursor: default; }
.nl-lead-empty .nl-text { font-size: 1rem; color: var(--color-text-muted); }
/* A Rendezvények / Rendszer doboz asztalon mindig az alap (teljes) magasságú: 392 px, akkor is, ha kevés hír van benne vagy a csempe-sor alacsonyabb. */
@media (min-width: 901px) {
    .nl-split .nl-side-extra { min-height: 392px; }
}
/* (2026-10-09) A hónap / múlt hónap / régebbi csoportok SOHA nem görgethetők: a csempék az oldal aljáig tartanak, az oldal görget. */
.nl-split .nl-grid.nl-grid-scroll { max-height: none; overflow: visible; padding-right: 0; }
/* A Rendezvények / Rendszer doboz 3 hír magas (a hírek fölött a fejléc), belül görgethető; a csempék mellett felül áll. */
@media (min-width: 901px) {
    .nl-split .nl-side-extra { height: 171px; min-height: 0; align-self: start; }
}

/* ---- Hírek: archív sorok, Kedvencek nézet, Fontos kiemelés, asztali fülsor (2026-10-09) ---- */
.nl-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.nl-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-width: 0; cursor: pointer;
    background: var(--color-card); border: 1px solid var(--color-card-border); border-left: 4px solid var(--color-gold);
    border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow-card);
}
.nl-row:hover { border-color: rgba(var(--color-gold-rgb), 0.6); }
.nl-row.nl-cat-rendezveny { border-left-color: #6d8bd0; }
.nl-row.nl-cat-rendszer { border-left-color: #8e97ad; }
.nl-row.nl-important { border-left-color: var(--color-negative, #dc2626); }
.nl-row-title { flex: 1 1 240px; min-width: 0; font-weight: 700; color: var(--color-heading, var(--color-navy)); text-decoration: none; overflow-wrap: anywhere; }
.nl-row.nl-read .nl-row-title { font-weight: 600; }
.nl-row-title:hover { color: var(--color-gold-dark, var(--color-gold)); text-decoration: underline; }
.nl-row-date, .nl-row-author { font-size: 0.8rem; color: var(--color-text-muted); white-space: nowrap; }
.nl-row .news-delete-form, .nl-row .news-favorite-form { margin: 0; flex: none; }
/* régebbi (a múlt hónapnál korábbi) hírek: soronként, görgethető lista */
.nl-rows-old { max-height: 330px; overflow-y: auto; overflow-x: hidden; padding-right: 6px; }
/* Kedvencek: külön nézet, soronként, vissza-gombbal */
.nl-favs { margin-top: 18px; }
.nl-favs-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nl-favs-head .nl-group-head { flex: 1 1 200px; margin: 0; }
.nl-back-link { display: inline-block; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--color-card-border); background: var(--color-card); color: var(--color-heading, var(--color-navy)); font-size: 0.85rem; font-weight: 700; text-decoration: none; }
.nl-back-link:hover { border-color: var(--color-gold); color: var(--color-gold-dark, var(--color-gold)); }
/* Fontos nézet / megnyitott fontos hír: piros extra színezet */
/* Asztali gépen és fekvő táblagépen a Hírek / Rendezvények / Rendszer fül nem kell (a telefonos/álló táblagépes lenyíló marad) */
@media (min-width: 1101px) {
    .news-subtab-hirek, .news-subtab-rendezveny, .news-subtab-rendszer { display: none; }   /* az Összes fül marad: aki megszokta, oda léphet */
    .news-subtab-osszes .news-subtab-icon { display: none; }   /* a Fontos / Kedvencek fülekhez hasonlóan ikon nélkül */
}
.nl-split .nl-rows { grid-column: 1; grid-row: 2; margin-top: 0; }
@media (max-width: 900px) { .nl-split .nl-rows { grid-column: 1; grid-row: auto; } }

/* Fontos mód (2026-10-09): a Fontos fülre kattintva a fontos hírek köré piros keret kerül, a többi hír is látszik. */
.news-subtab.news-subtab-fontos.is-active {
    color: var(--color-negative, #dc2626); border: 2px solid var(--color-negative, #dc2626); border-radius: 999px;
    padding: 4px 14px; margin: 0 0 6px;
}
.nl-fontos-mode .nl-card.nl-important:not(.nl-lead-card), .nl-fontos-mode .nl-row.nl-important, .nl-fontos-mode .nl-side-item.nl-important {
    border: 2px solid var(--color-negative, #dc2626);
}
.nl-fontos-mode .nl-side-item.nl-important { border-radius: 12px; margin-bottom: 6px; }
.nl-fontos-mode .nl-card.nl-important:not(.nl-lead-card) { border-left-width: 6px; }
html[data-theme="dark"] .nl-fontos-mode .nl-card.nl-important:not(.nl-lead-card), html[data-theme="dark"] .nl-fontos-mode .nl-row.nl-important,
html[data-theme="dark"] .nl-fontos-mode .nl-side-item.nl-important { border-color: #ff6350; }

/* Telefonon (álló/fekvő) és álló táblagépen (1100 px és kisebb) a Fontos nézet SZŰR: csak a fontos hírek látszanak, az "ablak és hír mindig látszik" szabály itt nem érvényes.
   Asztalon / fekvő táblagépen a Fontos mód csak kiemel (lásd fent). */
.nl-fontos-empty { display: none; }
@media (max-width: 1100px) {
    .nl-fontos-mode .nl-card:not(.nl-important), .nl-fontos-mode .nl-row:not(.nl-important), .nl-fontos-mode .nl-side-item:not(.nl-important) { display: none; }
    .nl-fontos-mode .nl-side:not(:has(.nl-important)) { display: none; }
    .nl-split.nl-fontos-mode:not(:has(.nl-grid .nl-important, .nl-rows .nl-important)) .nl-group-head { display: none; }
    .nl-fontos-empty { display: block; }
    .nl-split.nl-fontos-mode .nl-group-count { display: none; }   /* a számláló az összes hírre vonatkozna */
}
/* A Rendezvények / Rendszer doboz pontosan olyan magas, mint a mellette álló hírek doboza (csempék / sorok) — nem lóg túl rajta; ami nem fér el, belül görgethető. */
/* A Rendezvények / Rendszer doboz csak EGY hír-doboz (csempe) magas (172 px), akárhány sorból áll a mellette lévő lista; belül görgethető. */

/* Rendezvények/Rendszer doboz hír nélkül is ugyanolyan magas (a JS az utoljára mért csempe-magasságot használja; JS nélkül ez az alap) */
@media (min-width: 901px) { .nl-split.nl-split-solo .nl-side-extra { height: 250px; } }

/* Csillag (kedvenc) az oldalsáv (Ezen a héten / Múlt héten) és a Rendezvények/Rendszer doboz hírein is (2026-10-09) */
.nl-side-wrap { position: relative; }
.nl-side-wrap .nl-side-fav { position: absolute; top: 6px; right: -4px; margin: 0; z-index: 1; }
.nl-side-wrap .nl-side-item { padding-right: 40px; }
@media (max-width: 1100px) { .nl-fontos-mode .nl-side-wrap:not(:has(.nl-important)) { display: none; } }

/* Üres eredmény-állapot (nincs kiválasztott év/összeg): a doboz-szerkezet látszik, csak üresen; a diagram helye fix magasságú, halvány keret */
.result-block-empty .chart-empty { min-height: 230px; border: 1px dashed var(--color-card-border, #e6e8ee); border-radius: 12px; }

/* 2026-10-12: Üzenet — címzett-választó a Design system szerint (Tervek/Design system): tokenek, arany a kijelölés színe,
   pirula/kártya a --radius-md sugárral, 0,8rem/600 muted címke, arany fókusz, letiltott = .4 átlátszóság.
   Csak ezt az űrlapot érinti (.suggestion-form). */
.suggestion-form .sug-label {
    display: block;
    margin: 18px 0 8px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.sug-recipients {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}
.chip-radio.sug-rec {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;               /* a három kártya egyforma magas, a tartalom a közepükön */
    gap: 2px;
    min-height: 64px;
    padding: 12px 10px;                /* szimmetrikus: a név mindig mértanilag középen */
    border: 1px solid var(--d-input-border, #d3dcee);
    border-radius: var(--radius-md, 12px);
    background: var(--d-inset, #eef3fb);   /* halvány kékes árnyalat a tiszta fehér helyett (sötét módban a süllyesztett felület) */
    color: var(--color-text);
    box-shadow: var(--shadow-card, none);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.chip-radio.sug-rec:hover { border-color: var(--color-gold); }
.chip-radio.sug-rec:has(input:focus-visible) { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.chip-radio.sug-rec:has(input:checked) {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-on-gold, #201a05);
}
.sug-rec-name { display: block; width: 100%; text-align: center; font-size: 0.9rem; font-weight: 700; line-height: 22px; color: inherit; overflow-wrap: anywhere; }
.sug-rec-sub { display: block; width: 100%; text-align: center; font-size: 0.74rem; font-weight: 500; line-height: 18px; color: inherit; opacity: .8; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.sug-rec-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.sug-rec-all {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-heading, var(--color-navy));
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.sug-rec-all:hover { color: var(--color-gold); }
/* Magyarázó sor a címzettek alatt */
.sug-rec-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--color-card-border);
    border-left: 3px solid var(--color-gold);
    border-radius: var(--radius-sm, 8px);
    background: rgba(var(--color-gold-rgb, 201, 162, 39), .08);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--color-text);
}
.sug-rec-note svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--color-gold); }
/* Üzenet-mező: Design system beviteli mező (8px sugár, 1px keret, arany fókusz) */
.suggestion-form textarea {
    margin-top: 16px;
    min-height: 220px;
    padding: 12px 14px;
    border: 1px solid var(--d-input-border, #d3dcee);
    border-radius: var(--radius-md, 12px);
    background: var(--d-inset, #f4f7fd);
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.5;
}
.suggestion-form textarea:focus { outline: 2px solid var(--color-gold); outline-offset: 1px; background: var(--d-input, #fff); }
.suggestion-form button[type="submit"] { margin-top: 18px; }
.suggestion-form button[type="submit"]:disabled { opacity: .4; cursor: not-allowed; filter: none; }
@media (max-width: 560px) {
    .sug-recipients { grid-template-columns: 1fr; }
    .chip-radio.sug-rec { min-height: 52px; }
}

/* 2026-10-12: Help Desk — szál-lista szűrő-gombok (Mind / Válaszra vár / Megválaszolva). Design system: pill, arany kijelölés. */
.hd-list-filter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0 8px; }
.hd-filter-chip {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 36px; padding: 4px 6px;
    border: 1px solid var(--d-input-border, #d3dcee); border-radius: 999px;
    background: var(--d-inset, #eef3fb); color: var(--color-text);
    font: inherit; font-size: clamp(.6rem, calc(1.6vw + 4.2px), .8rem); font-weight: 700; line-height: 1.2;
    text-align: center; white-space: nowrap; cursor: pointer;
}
/* A piros szám a gomb jobb felső sarkán ül (nem a szöveg mellett), így a három felirat mindig pontosan középen marad. */
.hd-filter-chip .badge-count { position: absolute; top: -7px; right: -2px; margin: 0; box-shadow: 0 0 0 2px var(--color-card, #fff); }
.hd-filter-chip.is-active { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-on-gold, #201a05); }
@media (max-width: 340px) { .hd-list-filter { gap: 4px; } .hd-filter-chip { padding: 4px 2px; font-size: .55rem; } }
.hd-filter-chip:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

/* 2026-10-12: Help Desk — rendezés (balra) + "Lezártak" kapcsoló (jobbra) egy sorban. */
.hd-list-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.hd-list-tools .hd-closed-toggle { margin-top: 0; flex: 0 0 auto; }
.hd-list-tools .toggle-switch-text { font-size: .8rem; font-weight: 700; white-space: nowrap; }
/* A "Lezártak" kapcsoló: a felirat balra, a kapcsoló jobbra; bekapcsolva arany (nem zöld). */
.hd-closed-toggle .toggle-switch-text { order: 1; }
.hd-closed-toggle .toggle-switch-track { order: 2; }
.hd-closed-toggle input:checked ~ .toggle-switch-track { background: var(--color-gold); }

/* 2026-10-12: Szerviz link (hibakereső) — a tag oldala (diagnosztika.php) és a főadmin szál-panelje (admin_helpdesk.php). */
.diag-body { background: var(--color-bg, #eef3fb); }
.diag-wrap { max-width: 980px; margin: 0 auto; padding: 26px 16px 48px; }
.diag-brand { font-weight: 800; letter-spacing: .02em; color: var(--color-heading, #101c3d); margin-bottom: 6px; }
.diag-title { margin: 0 0 6px; font-size: 1.4rem; color: var(--color-heading, #101c3d); }
.diag-lead { margin: 0 0 18px; color: var(--color-muted, #5b6788); }
.diag-card { background: var(--color-card, #fff); border: 1px solid var(--color-card-border, #e6e8ee); border-radius: 16px; padding: 18px; }
.diag-running { display: flex; align-items: center; gap: 12px; margin: 8px 0 18px; color: var(--color-muted, #5b6788); font-weight: 600; }
.diag-bar { flex: 0 0 160px; height: 8px; border-radius: 999px; background: var(--d-input-border, #dbe3f3); overflow: hidden; }
.diag-bar i { display: block; height: 100%; width: 0; background: var(--color-gold); transition: width .2s; }
.diag-result { border: 1.5px solid var(--color-gold); }
.diag-rhead { margin-bottom: 10px; }
.diag-rhead small { display: block; margin-top: 4px; color: var(--color-muted, #5b6788); }
.diag-badge { display: inline-block; border-radius: 999px; padding: 3px 12px; font-size: .78rem; font-weight: 800; margin-left: 6px; }
.diag-badge-ok { background: #e4f6ec; color: #1f9d55; }
.diag-badge-warn { background: #fdeceb; color: #c0392b; }
.diag-rows { display: block; }
.diag-row { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(140px, 1fr) 2fr; gap: 6px 14px; padding: 9px 10px; border-top: 1px solid var(--color-card-border, #e6e8ee); }
.diag-row:first-child { border-top: 0; }
.diag-row.diag-warn { background: #fff3f2; }
.diag-row.diag-warn .diag-l { color: #c0392b; font-weight: 800; }
.diag-v { font-weight: 600; }
.diag-f { color: var(--color-muted, #5b6788); }
.diag-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.diag-actions .btn { width: auto; }
.diag-privacy { margin: 0; flex: 1; min-width: 220px; font-size: .8rem; color: var(--color-muted, #5b6788); }
.diag-error { margin-top: 12px; color: #c0392b; font-weight: 700; }
.diag-done { text-align: center; }
.diag-done-icon { width: 72px; height: 72px; border-radius: 50%; background: #1f9d55; color: #fff; font-size: 2.2rem; display: flex; align-items: center; justify-content: center; margin: 8px auto 14px; }
.diag-done h2 { margin: 0 0 6px; color: var(--color-heading, #101c3d); }
@media (max-width: 640px) {
    .diag-row { grid-template-columns: 1fr; gap: 2px; }
    .diag-row .diag-f:empty { display: none; }
    .diag-actions .btn { width: 100%; }
}

/* Főadmin szál-panel: szerviz linkek és eredmények (admin_helpdesk.php). */
.diag-panel { margin-top: 16px; border: 1px solid var(--color-card-border, #e6e8ee); border-radius: 14px; padding: 12px; background: var(--d-inset, #f4f7fd); }
.diag-panel h3 { margin: 0 0 8px; font-size: .95rem; color: var(--color-heading, #101c3d); }
.diag-link { border-top: 1px solid var(--color-card-border, #e6e8ee); padding: 10px 0; }
.diag-link:first-of-type { border-top: 0; }
.diag-linkrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.diag-linkrow input { flex: 1; min-width: 160px; font-size: .78rem; }
.diag-state { font-size: .72rem; font-weight: 800; border-radius: 999px; padding: 2px 10px; background: #eef1f8; color: var(--color-muted, #5b6788); }
.diag-state.got { background: #e4f6ec; color: #1f9d55; }
.diag-state.exp { background: #f1f1f1; color: #777; }
.diag-panel .diag-rows { margin-top: 8px; background: var(--color-card, #fff); border-radius: 10px; border: 1px solid var(--color-card-border, #e6e8ee); }
.diag-panel .diag-row { grid-template-columns: 1.2fr 1fr 2fr; font-size: .84rem; }
.diag-panel .diag-envline { margin: 8px 0 0; font-size: .78rem; color: var(--color-muted, #5b6788); }
.diag-head-btn { display: inline-flex; align-items: center; gap: 6px; }
/* A "hidden" attribútum erősebb legyen a diag-elemek display-szabályainál. */
.diag-running[hidden], .diag-actions[hidden], .diag-card[hidden], .diag-error[hidden] { display: none !important; }
/* A főadmin panel a keskeny jobb oszlopban van: a sorok egymás alatt (felirat + érték egy sorban, a javítási lépés alatta). */
.diag-panel .diag-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 10px; }
.diag-panel .diag-l { flex: 1 1 auto; }
.diag-panel .diag-v { flex: 0 0 auto; text-align: right; }
.diag-panel .diag-f { flex: 1 1 100%; font-size: .78rem; }
.diag-panel .diag-f:empty { display: none; }
.diag-panel .diag-linkrow input { width: 100%; flex: 1 1 100%; }
.chat-bubble-text .diag-msg-link { color: inherit; font-weight: 700; text-decoration: underline; word-break: break-all; }

/* Megnyitott hír (hirek.php ?id=) — cikk/blog nézet (2026-10-13): kategória-jelvény, nagy cím, szerző+dátum sor,
   olvasható szélességű törzsszöveg. Csak a .na-* osztályokra hat, a lista és az admin előnézet változatlan. */
.na-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.na { max-width: 760px; margin: 0 auto; padding: 8px 0 12px; }
.na-head { padding: 18px 0 20px; border-bottom: 1px solid var(--color-border, #e5e7eb); }
.na-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.na-title { margin: 0 0 18px; font-size: clamp(1.55rem, 1.1rem + 1.8vw, 2.35rem); line-height: 1.18; font-weight: 800; letter-spacing: -0.015em; color: var(--color-heading, var(--color-navy)); text-wrap: balance; overflow-wrap: anywhere; }
.na-meta { display: flex; align-items: center; gap: 12px; }
.na-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-navy, #101c3d); color: var(--color-gold-light, #e0bd4f); font-weight: 800; font-size: 1.05rem; }
.na-meta-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.na-author { font-weight: 700; font-size: 0.95rem; color: var(--color-heading, var(--color-navy)); }
.na-date { font-size: 0.82rem; color: var(--color-text-muted); }
.na-fav { margin-left: auto !important; }
.na-fav .news-favorite-star { padding: 8px; border-radius: 50%; border: 1px solid var(--color-border, #e5e7eb); }
.na-fav .news-favorite-star svg { width: 22px; height: 22px; }
.na-body { padding: 26px 0 8px; font-size: 1.08rem; line-height: 1.78; color: var(--color-text, #27304a); overflow-wrap: anywhere; }
.na-body p, .na-body div { margin: 0 0 1.05em; }
.na-body h2, .na-body h3 { margin: 1.7em 0 0.5em; line-height: 1.25; color: var(--color-heading, var(--color-navy)); }
.na-body h2 { font-size: 1.4rem; } .na-body h3 { font-size: 1.15rem; }
.na-body ul, .na-body ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.na-body li { margin-bottom: 0.4em; }
.na-body a { color: var(--color-gold-dark, #8a6d0a); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; overflow-wrap: anywhere; word-break: break-word; }
.na-body a:hover { color: var(--color-navy); }
.na-body blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--color-gold, #c9a227); color: var(--color-text-muted); font-style: italic; }
.na-body img { max-width: 100%; height: auto; border-radius: 12px; }
.na-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--color-border, #e5e7eb); }
html[data-theme="dark"] .na-body { color: #d6dcf0; }
html[data-theme="dark"] .na-body a:hover { color: #fff; }
html[data-theme="dark"] .na-avatar { background: #1c2c5f; }
@media (max-width: 600px) {
    .na { padding-top: 0; }
    .na-body { font-size: 1.02rem; line-height: 1.7; }
    .na-avatar { width: 38px; height: 38px; }
}

/* Főhír mezőjében megnyitott cikk: a felső sor (kategória + "Megnyitás külön oldalon" + "Vissza") a görgetett kártyában is látszik. */
.nl-lead-card.nl-opened .nl-top { position: sticky; top: 0; z-index: 2; padding: 6px 0 8px; background: #faf7f0; box-shadow: 0 -22px 0 #faf7f0; justify-content: flex-start; }
.nl-lead-card.nl-opened .nl-top .nl-kick { margin-right: auto; }
.nl-lead-card.nl-opened .nl-title a { cursor: pointer; }
html[data-theme="dark"] .nl-lead-card.nl-opened .nl-top { background: var(--color-card); box-shadow: 0 -22px 0 var(--color-card); }
@media (max-width: 1024px) { .nl-lead-card.nl-opened .nl-top { position: static; box-shadow: none; padding: 0; } }

/* Hírszerkesztő: helyesírás-ellenőrzés (assets/js/news-spellcheck.js) */
.spell-box { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--color-card-border, #d7dce8); border-radius: 12px; background: var(--color-card, #fff); }
.spell-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.spell-ok { background: var(--color-gold, #c9a227); color: #201a05; border: 0; }
.spell-status { font-size: 0.88rem; color: var(--color-text-muted); }
.spell-status.ok { color: #1f7a3d; font-weight: 700; }
.spell-status.warn { color: #9a6a00; font-weight: 700; }
.spell-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.spell-list label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.92rem; cursor: pointer; }
.spell-list del { color: #b3261e; } .spell-list ins { color: #1f7a3d; text-decoration: none; font-weight: 700; }
.spell-kind { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); border: 1px solid currentColor; border-radius: 999px; padding: 0 7px; }
mark.sp-fix { background: #fff2b3; color: inherit; border-radius: 4px; padding: 0 2px; box-shadow: 0 0 0 1px #e0bd4f; }
mark.sp-fix.sp-off { background: transparent; box-shadow: none; }
html[data-theme="dark"] mark.sp-fix { background: rgba(224,189,79,.28); }
.btn-publish[disabled] { opacity: .5; cursor: not-allowed; }

/* Fém-jelzés a hírkártyán / cikkben, kiemelt számok, fontos hír sávja */
.nl-metal { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; }
.nl-metal i { width: 9px; height: 9px; border-radius: 50%; background: #999; box-shadow: 0 0 0 2px rgba(0,0,0,.06); }
.nl-metal-arany i { background: #d4af37; } .nl-metal-ezust i { background: #aeb6c4; box-shadow: 0 0 0 2px rgba(80,90,110,.25); }
.nl-metal-tech i { background: #7c5cd6; }
.nl-metals { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; }
.na-impbar { margin: -8px 0 0; padding: 6px 12px; background: var(--color-negative, #c0392b); color: #fff; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 10px 10px 0 0; }
.na-important .na-head { border-top: 0; }
.na-facts { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.na-fact { flex: 1 1 140px; max-width: 240px; padding: 14px 16px; border: 1px solid var(--color-border, #e5e7eb); border-left: 4px solid var(--color-gold, #c9a227); border-radius: 12px; background: var(--color-card, #faf7f0); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.na-fact b { font-size: 1.7rem; line-height: 1.1; font-weight: 800; color: var(--color-heading, var(--color-navy)); letter-spacing: -0.01em; }
.na-fact span { font-size: 0.9rem; font-weight: 700; color: var(--color-text-muted); }
@media (max-width: 600px) { .na-fact { flex: 1 1 100%; max-width: none; } .na-fact b { font-size: 1.45rem; } }

.spell-box [hidden] { display: none !important; }
.spell-list label { text-transform: none; letter-spacing: 0; font-weight: 400; }
.spell-ctx { color: var(--color-text-muted); font-size: 0.85rem; }

/* Hírszerkesztő: hírkép-generálás (assets/js/news-image.js) + kép a kártyán / cikkben */
.nimg-box { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--color-card-border, #d7dce8); border-radius: 12px; background: var(--color-card, #fff); }
.nimg-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.nimg-status { font-size: 0.88rem; color: var(--color-text-muted); }
.nimg-status.ok { color: #1f7a3d; font-weight: 700; } .nimg-status.warn { color: #9a6a00; font-weight: 700; }
.nimg-current { margin-top: 10px; } .nimg-current img { display: block; max-width: 260px; width: 100%; border-radius: 10px; border: 1px solid var(--color-border, #e5e7eb); }
.nimg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.nimg-slot { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 3px solid transparent; background: #e9edf6; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); }
.nimg-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nimg-slot:hover { border-color: var(--color-gold, #c9a227); }
.nimg-slot.is-chosen { border-color: var(--color-gold, #c9a227); box-shadow: 0 0 0 2px rgba(201,162,39,.35); }
.nimg-slot.is-chosen:after { content: "✓"; position: absolute; right: 8px; top: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--color-gold, #c9a227); color: #201a05; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.nimg-wait { cursor: progress; animation: nimgPulse 1.4s ease-in-out infinite; } .nimg-fail { cursor: default; }
@keyframes nimgPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.nimg-box [hidden] { display: none !important; }
.nl-img { display: block; margin: 10px 0 2px; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: #e9edf6; }
.nl-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.nl-card:hover .nl-img img { transform: scale(1.03); }
.na-figure { margin: 22px 0 0; } .na-figure img { display: block; width: 100%; height: auto; border-radius: 14px; }

/* ===== Hírek lista — "107 Magazin" design (2026-10-13) =====
   Csak a megjelenés változik (nagy lekerekítés, lágy árnyék, színes fém-sáv a kártyák tetején); a felosztás, a felső fülek,
   az olvasottság-szűrő és a kapcsolók érintetlenek. Csak a lista oldal (nl-*) osztályaira hat. */
.layout-public-news-wide .nl-card,
.layout-public-news-wide .nl-lead-card,
.layout-public-news-wide .nl-side,
.layout-public-news-wide .nl-row { border: 0; border-radius: 22px; box-shadow: 0 12px 34px rgba(16, 28, 61, 0.10); }
.layout-public-news-wide .nl-lead-card { background: var(--color-card); }
.layout-public-news-wide .nl-lead-card .nl-title { font-size: 2.2rem; }
.layout-public-news-wide .nl-side { background: var(--color-card); }
.layout-public-news-wide .nl-side-head-sep { border-top-color: var(--color-card-border); }
/* kártya: felső sáv (alap: arany; fém és fontos hír szerint más) — a bal oldali sáv megszűnik */
.layout-public-news-wide .nl-grid .nl-card,
.layout-public-news-wide .nl-card:not(.nl-lead-card) { border-left: 0; border-top: 6px solid var(--color-gold, #c9a227); padding-top: 16px; }
.layout-public-news-wide .nl-card.nl-cat-rendezveny { border-top-color: #6d8bd0; }
.layout-public-news-wide .nl-card.nl-cat-rendszer { border-top-color: #8e97ad; }
.layout-public-news-wide .nl-card:has(.nl-metal-ezust) { border-top-color: #aeb6c4; }
.layout-public-news-wide .nl-card:has(.nl-metal-tech) { border-top-color: #7c5cd6; }
.layout-public-news-wide .nl-card:has(.nl-metal-arany) { border-top-color: #d4af37; }
.layout-public-news-wide .nl-card.nl-important:not(.nl-lead-card) { border-top-color: var(--color-negative, #dc2626); }
/* a főhír marad az eddigi bal oldali sávval, hogy kiemelt maradjon */
.layout-public-news-wide .nl-lead-card { border-left: 5px solid var(--color-gold, #c9a227); }
.layout-public-news-wide .nl-lead-card.nl-important { border-left-color: var(--color-negative, #dc2626); }
/* Rendszer doboz */
.layout-public-news-wide .nl-side-extra { background: #fff7dc; }
/* régebbi hírek: sorok külön lekerekített csempék */
.layout-public-news-wide .nl-row { border-left: 4px solid var(--color-gold, #c9a227); }
.layout-public-news-wide .nl-row.nl-important { border-left-color: var(--color-negative, #dc2626); }
html[data-theme="dark"] .layout-public-news-wide .nl-card,
html[data-theme="dark"] .layout-public-news-wide .nl-lead-card,
html[data-theme="dark"] .layout-public-news-wide .nl-side,
html[data-theme="dark"] .layout-public-news-wide .nl-row { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); }
html[data-theme="dark"] .layout-public-news-wide .nl-side-extra { background: rgba(224, 189, 79, 0.10); }

/* Hírszerkesztő: két eszköz-gomb egy sorban */
.edit-tools { margin-top: 14px; }
.edit-tools-row { display: flex; gap: 10px; flex-wrap: wrap; }
.edit-tools-row .btn { flex: 1 1 200px; margin: 0; }
.edit-tools .spell-box, .edit-tools .nimg-box { margin-top: 8px; padding: 0; border: 0; background: transparent; }
.nimg-clear { margin-top: 8px; border: 1px solid var(--color-card-border, #d7dce8); background: var(--color-card, #fff); color: var(--color-text-muted); border-radius: 999px; padding: 4px 12px; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.edit-tools [hidden] { display: none !important; }

/* Hírek lista: halványkék oldalháttér (107 Magazin) — a külső fehér doboz nem látszik, a kártyák közvetlenül a háttéren állnak.
   A felső fülsor, az olvasottság-szűrő és a kapcsolók elrendezése változatlan. */
.panel.news-list-panel { background: transparent; border: 0; box-shadow: none; padding-left: 0; padding-right: 0; }

.edit-tools-row .btn { flex: 1 1 150px; }
.spell-kind-punct { color: #7a5e07; } .spell-kind-case { color: #3a5aa8; } .spell-kind-typo { color: #a8412c; }

/* Fém-címke: kattintható (az összes ilyen fémről szóló hír) */
.nl-metal[data-fem], a.nl-metal { cursor: pointer; text-decoration: none; border-radius: 99px; padding: 1px 6px 1px 2px; margin-left: -2px; transition: background .15s, color .15s; }
.nl-metal[data-fem]:hover, a.nl-metal:hover { background: rgba(201, 162, 39, 0.16); color: var(--color-heading, var(--color-navy)); text-decoration: underline; }

/* Fém-pöttyök a cím sorában (kicsi, vonalban a címmel) */
.nl-metals-inline { display: inline-flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; vertical-align: middle; margin-left: 6px; font-weight: 400; }
.nl-metals-inline .nl-metal { font-size: 0.62rem; padding: 1px 6px 1px 4px; border-radius: 99px; background: rgba(120, 130, 160, 0.12); margin-left: 0; }
.nl-metals-inline .nl-metal i { width: 8px; height: 8px; }
.nl-title .nl-metals-inline { font-size: 0.62rem; }
.nl-metals-inline { flex-wrap: nowrap; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.nl-metals-inline { margin-left: 4px; gap: 4px; }
.nl-metals-inline .nl-metal { padding: 0 5px 0 3px; gap: 3px; letter-spacing: 0.02em; font-size: 0.58rem; }
.nl-metals-inline .nl-metal i { width: 7px; height: 7px; box-shadow: none; }

/* Hírszerkesztő: fém-jelölő (nagyon szolid, nem kötelező) */
.metal-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 12px; }
.metal-pick-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); margin-right: 2px; }
.metal-pick-item { position: relative; display: inline-flex; cursor: pointer; margin: 0; }
.metal-pick-item input { position: absolute; opacity: 0; pointer-events: none; }
.metal-pick-item .nl-metal { border: 1px solid var(--color-card-border, #d7dce8); border-radius: 99px; padding: 2px 9px 2px 6px; background: transparent; opacity: .65; transition: opacity .15s, background .15s, border-color .15s; font-size: 0.7rem; }
.metal-pick-item:hover .nl-metal { opacity: 1; }
.metal-pick-item input:checked + .nl-metal { opacity: 1; background: rgba(201, 162, 39, 0.16); border-color: var(--color-gold, #c9a227); color: var(--color-heading, var(--color-navy)); }
.metal-pick-item input:focus-visible + .nl-metal { outline: 2px solid var(--color-gold, #c9a227); outline-offset: 2px; }

/* Hírszerkesztő: a CÍM felirat és a fém-jelölők egy sorban, egy vonalban (2026-10-13) */
.title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.title-row > label { margin: 0; }
.title-row .metal-pick { margin: 0; }
.calc-form .title-row > label, .calc-form .title-row .metal-pick-item { margin: 0; }
.title-row + input[type="text"] { margin-top: 6px; }

/* Hírszerkesztő CÍM-sor: a felirat és a három fém-jelölő azonos magasságú, középre igazított dobozban (nem függ az általános label-szabályoktól) */
.title-row { align-items: center; }
.title-row > label { display: inline-flex !important; align-items: center; height: 24px; line-height: 1; margin: 0 !important; padding: 0 !important; }
.title-row .metal-pick { align-items: center; margin: 0 !important; }
.title-row .metal-pick-item { margin: 0 !important; display: inline-flex; align-items: center; }
.title-row .metal-pick-item .nl-metal { box-sizing: border-box; height: 24px; line-height: 1; padding-top: 0; padding-bottom: 0; }
/* Oldalsó lista: a fém-címke a kategória mellett, ugyanabban a sorban */
.nl-side-item .nl-kick .nl-metal { margin-left: 8px; vertical-align: middle; font-size: 0.66rem; }
.title-row > label { position: relative; top: 1.5px; }   /* optikai igazítás: a nagybetűs felirat a 24px-es jelölők szövegével egy vonalba kerül (pixelre mérve) */

/* Kapcsolatok (Munkatársak): állapot-szűrő a Hírek olvasottság-szűrőjének designjával + küldési idők */
.reg-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; margin: 4px 0 12px; }
.reg-filter-row .news-read-filter { margin: 0; }
.contact-card[hidden] { display: none !important; }
.contact-send-times { font-size: 0.82rem; color: var(--color-text-muted, #6a7491); margin-top: 2px; }
.contact-send-times [hidden] { display: none; }
.reg-filter-row .news-read-filter { margin-left: auto; }   /* mindig jobb oldalon, tördelésnél is */
.reg-filter-row .news-read-filter { margin-left: 0; }
.reg-filter-row .reg-count { margin: 0 0 0 auto; text-align: right; }   /* a darabszám jobb oldalon */

/* ===== Kapcsolatok / Munkatársak: bal szűrősáv + táblázat tömeges műveletekkel (2026-10-15) ===== */
.reg-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; }
.reg-main { min-width: 0; }
.reg-filter-toggle { display: none; }
.reg-filters { background: rgba(var(--color-navy-rgb), 0.04); border-radius: 16px; padding: 16px; position: sticky; top: 12px; }
.reg-filters h5 { margin: 16px 0 6px; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted, #6a7491); }
.reg-filters h5:first-child { margin-top: 0; }
.reg-filters label { display: flex; align-items: center; gap: 9px; padding: 6px 2px; font-weight: 700; font-size: 0.92rem; cursor: pointer; margin: 0; }
.reg-filters label span { flex: 1; }
.reg-filters label em { font-style: normal; font-weight: 700; font-size: 0.8rem; color: var(--color-text-muted, #6a7491); }
.reg-filters input[type="checkbox"], .reg-filters input[type="radio"], .reg-table input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--color-gold, #c9a227); flex: none; margin: 0; }
.reg-count-row { margin: 2px 0 10px; }
.reg-bulk { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--color-navy, #101c3d); color: #fff; border-radius: 14px; padding: 10px 16px; margin: 0 0 12px; box-shadow: 0 8px 22px rgba(16, 28, 61, 0.25); }
.reg-bulk[hidden] { display: none; }
.reg-bulk b { color: var(--color-gold, #e0bd4f); margin-right: 4px; }
.reg-bulk-btn { background: rgba(255, 255, 255, 0.13); color: #fff; border: 0; border-radius: 999px; padding: 7px 14px; font: 700 0.84rem inherit; font-family: inherit; cursor: pointer; margin: 0; }
.reg-bulk-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.24); }
.reg-bulk-btn:disabled { opacity: 0.4; cursor: default; }
.reg-bulk-btn i { font-style: normal; opacity: 0.75; }
.reg-bulk-danger { background: rgba(179, 38, 30, 0.55); }
.reg-bulk-msg { margin-left: auto; font-size: 0.82rem; color: #cfd8f2; }
.reg-table-wrap { overflow-x: auto; }
.reg-table { width: 100%; border-collapse: collapse; }
.reg-table th { text-align: left; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted, #6a7491); padding: 9px 10px; background: rgba(var(--color-navy-rgb), 0.05); white-space: nowrap; }
.reg-table td { padding: 11px 10px; border-bottom: 1px solid var(--color-card-border, #dbe2f0); vertical-align: middle; }
.reg-table tbody tr:nth-child(even) td { background: rgba(var(--color-navy-rgb), 0.025); }
.reg-table tbody tr.is-sel td { background: rgba(201, 162, 39, 0.14); }
.reg-table tbody tr[hidden] { display: none; }
.reg-table .c-sel { width: 34px; }
.reg-table .reg-name { display: block; font-weight: 800; color: var(--color-navy); text-align: left; background: none; border: 0; padding: 0; font-size: 1rem; }
.reg-table .reg-sub { display: block; font-size: 0.82rem; color: var(--color-text-muted, #6a7491); word-break: break-word; }
.reg-table .c-gg { color: var(--color-text-muted, #6a7491); white-space: nowrap; }
@media (max-width: 1000px) {
    /* tablet: a szűrők a lista fölé kerülnek, lenyithatók (három oszlopban) */
    .reg-shell { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .reg-filter-toggle { display: inline-flex; align-self: start; width: max-content; background: rgba(var(--color-navy-rgb), 0.07); border: 0; border-radius: 999px; padding: 8px 16px; font: 700 0.9rem inherit; font-family: inherit; color: var(--color-navy); cursor: pointer; margin: 0; }
    .reg-filters { display: none; position: static; }
    .reg-filters.is-open { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; }
    .reg-filters h5, .reg-fgroup:first-child h5 { margin-top: 0; }
}
/* Kapcsolatok (Munkatársak) mobilon: PONT UGYANAZ a táblázat, mint számítógépen (fejléc: NÉV / E-MAIL · KÜLDVE · ÚJRA · E-MAIL · VIZSGA · TESZTELŐ; szöveges jelzők), 2026-11-05
   — nem kártya és nem rövidített jelzők. Ha nem fér ki, a táblázat oldalra húzható. */
@media (max-width: 900px) {
    .reg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
    #regTable { width: max-content; min-width: 100%; }
    #regTable td, #regTable th { white-space: nowrap; padding-left: 8px; padding-right: 8px; }
    #regTable td.c-name .reg-name { white-space: nowrap; }
}
@media (max-width: 700px) {
    .reg-filters.is-open { grid-template-columns: minmax(0, 1fr); gap: 14px 0; }
    .reg-bulk { top: 4px; padding: 9px 12px; }
    .reg-bulk-msg { margin-left: 0; width: 100%; }
}

/* Kapcsolatok: szűrő-választók (vékony, arany jelölés — nem vastag fekete gyűrű), soronkénti műveletek, rövid jelzők */
.reg-filters input[type="checkbox"], .reg-filters input[type="radio"] { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; flex: none; border: 1.5px solid #aab3c8; background: #fff; cursor: pointer; display: inline-grid; place-content: center; transition: border-color .12s, background .12s; }
.reg-filters input[type="checkbox"] { border-radius: 5px; }
.reg-filters input[type="radio"] { border-radius: 50%; }
.reg-filters input[type="checkbox"]:checked { background: var(--color-gold, #c9a227); border-color: var(--color-gold, #c9a227); }
.reg-filters input[type="checkbox"]:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.reg-filters input[type="radio"]:checked { border-color: var(--color-gold, #c9a227); }
.reg-filters input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-gold, #c9a227); }
.reg-filters input:focus-visible { outline: 2px solid rgba(201, 162, 39, 0.5); outline-offset: 2px; }
.reg-table .c-act { text-align: right; white-space: nowrap; }
.reg-acts { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.reg-acts .hd-pill { cursor: pointer; margin: 0; }
.reg-chk { min-width: 46px; text-align: center; font-size: 0.95rem; }
.reg-fgroup + .reg-fgroup { margin-top: 16px; }
.reg-fgroup h5 { margin-top: 0; }
@media (min-width: 901px) { .reg-acts { flex-wrap: nowrap; } }

.reg-bulk[hidden] { display: flex; }   /* a kék sáv mindig látszik */
.reg-bulk { top: 0; }

/* Kék sáv: sárga összesítő szám + Mind / Nem igazolt / Nem vizsgázott (törlés nincs) */
.reg-bulk .reg-total { color: var(--color-gold, #e0bd4f); font-size: 1.5rem; font-weight: 800; line-height: 1; margin-right: 6px; min-width: 1.4em; }
.reg-bulk .reg-bulk-btn.is-active { background: #fff; color: var(--color-navy, #101c3d); }
.reg-table .c-act { text-align: right; white-space: nowrap; }
.reg-acts { display: inline-flex; gap: 6px; justify-content: flex-end; }
.reg-acts .hd-pill { cursor: pointer; margin: 0; }
.reg-bulk .reg-total { font-size: 1rem; margin-right: 4px; min-width: 1.2em; }   /* apró, sárga szám */

.reg-sort { margin-left: auto; display: inline-flex; gap: 6px; }
.reg-table tr.just-sent td { background: rgba(224, 189, 79, 0.28) !important; transition: background 1s; }
@media (max-width: 700px) { .reg-sort { margin-left: 0; width: 100%; } }

/* Névre kattintva: profilkártya (monogram, név, GG, elérhetőség, küldés ideje, jelzők) */
.gg-name-box.cc-box { max-width: 420px; width: calc(100% - 32px); padding: 22px 24px; text-align: left; border-radius: 20px; }
.cc-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.cc-av { width: 62px; height: 62px; border-radius: 50%; background: var(--color-navy, #101c3d); color: var(--color-gold-light, #e0bd4f); font-weight: 800; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; flex: none; }
.cc-name { font-size: 1.25rem; font-weight: 800; color: var(--color-navy, #101c3d); line-height: 1.2; }
.cc-gg { color: var(--color-text-muted, #6a7491); font-size: 1rem; margin-top: 2px; }
.cc-contact { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; font-size: 1.02rem; }
.cc-contact a { color: var(--color-text, #1d2744); text-decoration: none; word-break: break-word; }
.cc-contact a:hover { color: var(--color-gold, #c9a227); text-decoration: underline; }
.cc-sent { color: var(--color-text-muted, #6a7491); margin-bottom: 14px; }
.cc-notes { margin: 0 0 14px; padding: 10px 12px; background: rgba(var(--color-navy-rgb), 0.05); border-radius: 10px; font-size: 0.92rem; }
.cc-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.cc-pill { display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 800; border: 1px solid; white-space: nowrap; }
.cc-pill-green { color: #1d8a55; background: #eef8f2; border-color: #b7dcc6; }
.cc-pill-gray { color: #586382; background: #f1f3f9; border-color: #dfe3ee; }
.cc-close { width: 100%; margin: 0; }

.reg-bulk .reg-sort { margin-left: 4px; }   /* a rendezés a szám mellett, balra */

/* Hírszerkesztő: "Fontosnak jelölt" kapcsoló + "Helyesírás és formázás" gomb egy sorban (2026-10-15). */
.imp-spell-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.imp-spell-row .btn { flex: 0 0 auto; margin: 0; padding: 10px 22px; }

/* Rendezvénynaptár (2026-10-15): széles rács esemény-címkékkel, szabad hely = ZÖLD, Heti / Havi / Éves nézetváltó. */
.events-calendar-dot.is-available { background: var(--color-positive, #1a7f45); }
.events-view-switch { display: flex; width: max-content; max-width: 100%; margin: 0 0 16px auto; padding: 3px; gap: 2px; background: rgba(16, 28, 61, 0.08); border-radius: 999px; }
.events-view-switch a { padding: 7px 18px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 0.88rem; color: var(--color-text-muted); white-space: nowrap; }
.events-view-switch button { padding: 7px 18px; border: 0; background: none; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; font-size: 0.88rem; color: var(--color-text-muted); white-space: nowrap; }
.events-view-switch button.is-on,
.events-view-switch a.is-on { background: var(--color-card, #fff); color: var(--color-navy); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.events-calendar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.events-calendar-day { min-height: 118px; min-width: 0; }
.events-calendar-day .events-calendar-dot { display: none; }
.events-calendar-chip { display: block; margin-top: 5px; padding: 3px 8px; border-radius: 7px; font-size: 0.74rem; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; background: var(--color-positive, #1a7f45); }
.events-calendar-chip.is-low { background: var(--color-gold); color: #1a1405; }
.events-calendar-chip.is-full { background: var(--color-negative); }
.events-calendar-more { display: block; margin-top: 4px; font-size: 0.72rem; font-weight: 700; color: var(--color-text-muted); }


.events-year-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.events-year-month { padding: 12px 14px; background: var(--color-card, #fff); border: 1px solid var(--color-card-border); border-radius: var(--radius-sm); }
.events-year-month-title { display: block; margin-bottom: 8px; font-weight: 800; color: var(--color-navy); text-decoration: none; }
.events-year-mgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; font-size: 0.74rem; }
.events-year-mgrid em { font-style: normal; font-weight: 800; color: var(--color-text-muted); }
.events-year-mgrid a, .events-year-mgrid span { padding: 4px 0; border-radius: 6px; text-decoration: none; color: var(--color-text); }
.events-year-mgrid a:hover { background: #fff8e6; }
.events-year-mgrid .has { color: #fff; font-weight: 800; background: var(--color-positive, #1a7f45); }
.events-year-mgrid .has.is-low { background: var(--color-gold); color: #1a1405; }
.events-year-mgrid .has.is-full { background: var(--color-negative); }
.events-year-mgrid .is-today { box-shadow: inset 0 0 0 2px var(--color-gold); }

@media (max-width: 1100px) { .events-year-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .events-year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .events-calendar-day { min-height: 56px; }
    .events-calendar-chip, .events-calendar-more { display: none; }
    .events-calendar-day .events-calendar-dot { display: block; }
    .events-view-switch { margin-left: 0; }
}
@media (max-width: 420px) { .events-year-grid { grid-template-columns: minmax(0, 1fr); } }

/* Naptár + Rendezvényeim (2026-10-15, a 163. terv): bal oldalt a naptár, jobb oldalt a saját rendezvények sávja és a kiválasztott rendezvény "szobája"
   (Fontos információk + alatta a chat). */
.ev-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; min-width: 0; }
/* A bal oszlop panelei közvetlenül a rácsba kerülnek: a Naptár és a Rendezvényeim doboz egy sorban, egyforma magas. */
.ev-left { display: contents; }
.ev-right { min-width: 0; grid-column: 2; grid-row: 1; }
.ev-right > .panel { height: 100%; box-sizing: border-box; }
/* Sztenderd mélység: az éves nézet magassága minden nézetben (havi, szoba, Rendezvényeim). */
/* A teljes rendezvény-sor kattintható (JS: rendezveny-naptar/index.php, data-href). */
.my-ev { position: relative; cursor: pointer; }
@media (min-width: 1101px) {
    .ev-left > .panel:nth-child(1), .ev-right > .panel { min-height: 1120px; }
}
.ev-left > .panel { grid-column: 1; min-width: 0; margin-top: 0 !important; }
.ev-left > .panel:nth-child(1) { grid-row: 1; }
.ev-left > .panel:nth-child(2) { grid-row: 2; }
.ev-right .panel + .panel { margin-top: 24px; }
.my-ev { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 10px; background: var(--color-card, #fff); border: 1px solid var(--color-card-border); border-radius: var(--radius-sm); }
.my-ev.is-selected { background: #fff8e6; box-shadow: inset 4px 0 0 var(--color-gold); }
.my-ev-date { flex: none; width: 52px; text-align: center; line-height: 1.1; }
.my-ev-date b { display: block; font-size: 1.45rem; color: var(--color-navy); }
.my-ev-date span { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; color: var(--color-text-muted); }
.my-ev-main { flex: 1; min-width: 0; }
.my-ev-title { font-weight: 800; color: var(--color-navy); }
.my-ev-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.my-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; border: 1px solid; }
.my-chip.is-ok { color: #1d8a55; background: #eef8f2; border-color: #b7dcc6; }
.my-chip.is-wait { color: #9a6a00; background: #fff7e0; border-color: #ecd48a; }
.my-chip.is-mute { color: #586382; background: #f1f3f9; border-color: #dfe3ee; }
.my-ev-act { flex: none; display: flex; align-items: center; gap: 8px; }
.ev-row-form { margin: 0; }
/* Admin lista: a Belépés mindig ugyanabban az oszlopban áll (fix 2 oszlop: Belépés | Archivál / kuka), nem csúszik a sor szélességével. */
.my-ev-act-admin { display: grid; grid-template-columns: 112px 104px; gap: 8px; align-items: center; justify-items: stretch; }
.my-ev-act-admin > .btn { width: 100%; box-sizing: border-box; text-align: center; justify-content: center; }
.my-ev-act-admin .ev-row-form { grid-column: 2; display: flex; justify-content: center; }
.my-ev-act-admin .ev-row-form .btn { width: 100%; box-sizing: border-box; text-align: center; }
.ev-row-form .btn { margin-top: 0; padding: 8px 14px; font-size: 0.82rem; }
.ev-list-bar { position: static; margin-bottom: 14px; }
.ev-list-bar .reg-bulk-btn i { font-style: normal; opacity: 0.75; margin-left: 4px; }
.ev-list[hidden], .ev-list-empty[hidden] { display: none; }
.ev-trash { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--color-card-border); background: var(--color-card, #fff); color: var(--color-negative, #b3261e); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ev-trash:hover { background: var(--color-negative, #b3261e); color: #fff; border-color: transparent; }
.my-ev-act .btn { margin-top: 0; padding: 8px 16px; font-size: 0.82rem; white-space: nowrap; }
.ev-room-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 14px; }
.ev-room-head .events-view-switch { margin: 0; }
.ev-room-head .btn { margin-top: 0; padding: 8px 16px; font-size: 0.82rem; }
.ev-room-title { font-size: 1.25rem; font-weight: 800; color: var(--color-navy); }
.ev-lock { background: #fff7e0; border: 1px dashed #ecd48a; border-radius: var(--radius-sm); padding: 16px 18px; font-weight: 600; }
.ev-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ev-info > div { background: var(--color-bg); border-radius: var(--radius-sm); padding: 10px 12px; }
.ev-info span { display: block; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; color: var(--color-text-muted); }
.ev-info b { display: block; margin-top: 2px; }
.ev-desc { margin: 14px 0 0; }
.ev-pane[hidden] { display: none; }
/* A rendezvény nézet minden fülön (Információ / Chat / lezárt / zárolt) ugyanolyan mély, mint a chat. */
.ev-room { box-sizing: border-box; }
.ev-chat { margin-top: 0; }
.ev-admin-note { margin-top: 14px; padding: 14px 16px; background: #f1f6ff; border-left: 5px solid var(--color-navy); border-radius: var(--radius-sm); }
.ev-admin-note span { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; color: var(--color-text-muted); }
.ev-admin-note p { margin: 6px 0 0; }
.ev-admin-note-body { margin-top: 6px; }
.ev-saved { margin-left: 10px; color: var(--color-positive, #1a7f45) !important; letter-spacing: 0.04em; }
.ev-note-form { margin-top: 18px; }
.ev-note-form > label { display: block; margin-bottom: 6px; font-weight: 700; }
.ev-note-form .rte textarea { width: 100%; box-sizing: border-box; }
.ev-registrants { margin-top: 26px; }
.ev-reg-scroll { overflow-x: auto; }
.ev-reg-table th.ev-reg-c, .ev-reg-table td.ev-reg-c { text-align: center; }
.ev-reg-table .reg-name { font-size: 0.98rem; }
.ev-registrants .reg-bulk { position: static; }
.ev-reg-table .reg-sub { word-break: break-word; }
.ev-reg-c { text-align: center; width: 1%; white-space: nowrap; }
.ev-reg-form { margin: 0; display: inline; }
.ev-note-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ev-note-actions .btn { margin-top: 0; }
.ev-chat { margin-top: 18px; border: 1px solid var(--color-card-border); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-card, #fff); }
.ev-chat-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--color-bg); }
.ev-chat-msgs { padding: 12px 14px; height: clamp(380px, 62vh, 700px); overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.ev-msg { display: flex; gap: 10px; }
.ev-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--color-navy); color: var(--color-gold); font-weight: 800; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; }
.ev-msg.is-admin .ev-av { background: var(--color-gold); color: #1a1405; }
.ev-bub { display: inline-block; margin-top: 2px; padding: 8px 12px; background: var(--color-bg); border-radius: 4px 12px 12px 12px; max-width: 100%; overflow-wrap: anywhere; }
.ev-msg.is-mine { flex-direction: row-reverse; text-align: right; }
.ev-msg.is-mine .ev-bub { background: #fff3cf; border-radius: 12px 4px 12px 12px; text-align: left; }
.ev-msg.is-admin .ev-bub { background: #e9f0ff; }
.ev-chat-msgs { cursor: text; }
.ev-chat-send { display: flex; gap: 10px; align-items: flex-end; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--color-card-border); }
.ev-chat-send textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent; color: inherit; padding: 6px 2px; font: inherit; line-height: 1.45; max-height: 200px; }
.ev-chat-send .btn { margin-top: 0; padding: 9px 18px; flex: none; }
.ev-lock.is-past { margin-top: 18px; }
.ev-del { margin: 0; display: inline; }
.ev-del button { background: none; border: 0; color: var(--color-negative); cursor: pointer; font-weight: 700; font-size: 0.78rem; }
@media (max-width: 1100px) {
    .ev-split { grid-template-columns: minmax(0, 1fr); }
    .ev-left > .panel, .ev-right { grid-column: 1; grid-row: auto !important; }
    .ev-right > .panel { height: auto; }
    .ev-split.is-mine-first .ev-right { order: -1; }
}
@media (max-width: 640px) {
    .ev-info { grid-template-columns: minmax(0, 1fr); }
    .my-ev { flex-wrap: wrap; }
}
.ev-msg .field-hint { display: inline; }

/* ---- Hírek: Felsorolás | Hírportál választó + felsorolás (hónapokra bontva) — 2026-10-29, "Hírek lista 232" ---- */
.news-style-switch { display: inline-flex; padding: 3px; gap: 2px; background: rgba(var(--color-navy-rgb), 0.07); border-radius: 999px; flex: none; }
.news-style-item { display: inline-flex; align-items: center; gap: 7px; padding: 6px 15px; font-size: 0.88rem; font-weight: 700; color: rgba(var(--color-navy-rgb), 0.6); text-decoration: none; border-radius: 999px; white-space: nowrap; }
.news-style-item svg { width: 15px; height: 15px; flex: none; }
.news-style-item.is-active { color: var(--color-navy); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.news-style-item:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
html[data-theme="dark"] .news-style-item.is-active { background: var(--d-surface-2); color: var(--color-heading); }
@media (min-width: 1101px) { .news-heading-row .news-style-switch { margin: 0 0 6px 0; order: 0; } }
.nl-ml { margin-top: 6px; }
.nl-ml-group { margin-bottom: 22px; }
.nl-ml-group .nl-group-head { margin-bottom: 10px; }
.nl-rows.nl-rows-ml { gap: 0; margin-top: 0; background: var(--color-card); border: 1px solid var(--color-card-border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-card); }
.layout-public-news-wide .nl-rows-ml .nl-row.nl-row-c, .nl-rows-ml .nl-row.nl-row-c {
    border: 0; border-bottom: 1px solid var(--color-card-border); border-radius: 0; box-shadow: none; background: transparent;
    padding: 8px 16px; gap: 6px 10px; flex-wrap: nowrap;
}
.nl-rows-ml .nl-row.nl-row-c:last-child { border-bottom: 0; }
.nl-rows-ml .nl-row.nl-row-c:hover { background: rgba(var(--color-gold-rgb), 0.07); }
.nl-rows-ml .nl-row-c .nl-row-title { flex: 1 1 auto; font-weight: 500; font-size: 0.95rem; }
.nl-rows-ml .nl-row-c.nl-read .nl-row-title { font-weight: 500; }
.nl-rows-ml .nl-row-c .nl-row-date { width: 34px; text-align: right; flex: none; }
.nl-rows-ml .nl-row-c .nl-metal { flex: none; }
.nl-rows-ml .nl-row-c .news-delete-form { margin-left: 2px; }
.nl-fontos-mode .nl-rows-ml .nl-row.nl-important { border: 0; border-bottom: 1px solid var(--color-card-border); border-left: 4px solid var(--color-negative, #dc2626); background: rgba(220, 38, 38, 0.06); }
/* A hosszú hírcím NEM tör több sorba, SEHOL (felsorolás, Kedvencek, régebbi hírek sorai): egy sorban marad.
   Érintőképernyőn (telefon, tablet) ha nem fér ki, CSAK az adott blokk hírsorai (pl. egy hónap hírei, együtt) görgethetők jobbra-balra; a hónap neve, a menü, a szűrők és az oldal többi része a helyén marad.
   A sorok egyforma szélesek (a legszélesebbhez igazodnak), így a nap és a kuka egy vonalban áll. Egérrel (asztalon) a cím végén három pont áll, a teljes cím a sor fölé víve látszik. */
.nl-row-tw { flex: 1 1 auto; min-width: 0; }
.nl-row-tw .nl-row-title { white-space: nowrap; overflow-wrap: normal; word-break: normal; flex: none; }
@media (hover: hover) and (pointer: fine) {
    .nl-row-tw { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (hover: none), (pointer: coarse) {
    .nl-rows.nl-rows-ml, .nl-rows.nl-rows-fav { overflow-x: auto; overflow-y: hidden; display: grid; grid-template-columns: minmax(max-content, 1fr); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
    .nl-row-tw { min-width: max-content; }
    .nl-rows-ml .nl-row, .nl-rows-fav .nl-row { flex-wrap: nowrap; }
}
@media (hover: none), (pointer: coarse) {
    .nl-split .nl-rows-old { overflow-x: auto; display: grid; grid-template-columns: minmax(max-content, 1fr); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
    .nl-split .nl-rows .nl-row { flex-wrap: nowrap; }
}
@media (max-width: 640px) {
    .layout-public-news-wide .nl-rows-ml .nl-row.nl-row-c { padding: 10px 12px; gap: 6px 8px; }
    .nl-rows-ml .nl-row-c .nl-metal { font-size: 0; gap: 0; }   /* telefonon csak a fém színes pöttye (a neve a címkén / kattintásra elérhető) */
    .nl-rows-ml .nl-row-c .nl-metal i { width: 11px; height: 11px; }
}
@media (max-width: 1100px) {
    .nl-ml.nl-fontos-mode .nl-ml-group:not(:has(.nl-important)) { display: none; }
    .nl-ml.nl-fontos-mode .nl-group-count { display: none; }
}


/* A széles (oldalra görgethető) hírlistában az iPhone ne nagyítsa fel automatikusan a betűket — marad az eredeti betűméret. */
.nl-ml, .nl-ml *, .nl-favs, .nl-favs *, .nl-rows-old, .nl-rows-old * { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }