/* /Components/Academy/AcademyProgressBar.razor.rz.scp.css */
/* A haladás-sáv — a kurzus-oldal „Haladásod 60% kész · 3 / 5 lecke elvégezve" sávja. */

.academy-progress[b-p4es54sbdg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
}

.academy-progress__value[b-p4es54sbdg] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    min-inline-size: 0;
}

/* ⚠️ A százalék SZÖVEG, nem csak ív — a `--color-primary-text` (#B01268) fehéren 6.70:1.
   A dekoratív #FF3EAA itt bukna (3.22:1), és a DesignSurfaceContrastGate ki is számolná. */
.academy-progress__percent[b-p4es54sbdg] {
    font: var(--text-h2);
    color: var(--color-primary-text);
    white-space: nowrap;
}

.academy-progress__caption[b-p4es54sbdg] {
    font: var(--text-sm);
    color: var(--color-text-muted);
}

/* A sáv maga: a kitöltés DEKORATÍV: az érték a látható számban és az aria-value*-ban utazik. */
.academy-progress__track[b-p4es54sbdg] {
    flex: 1 1 200px;
    block-size: 8px;
    border-radius: var(--radius-pill);
    background-color: var(--color-border);
    overflow: hidden;
}

.academy-progress__fill[b-p4es54sbdg] {
    display: block;
    block-size: 100%;
    background-color: var(--color-primary);
    transition: inline-size var(--duration-base) var(--ease-out);
}

/* Mobilon a sáv a szám ALÁ kerül: egy sorban a 200 px-es minimum kiszorítaná a kísérőszöveget. */
@media (max-width: 599.98px) {
    .academy-progress[b-p4es54sbdg] {
        flex-direction: column;
        align-items: stretch;
    }

    .academy-progress__track[b-p4es54sbdg] {
        flex: 0 0 auto;
    }
}
/* /Components/Academy/LessonRow.razor.rz.scp.css */
/* Egy leckesor a „Modul tartalma” listában.

   ⚠️ NINCS „zárolt” állapot-stílus, és ez szándékos: a szerver a LECKE-szintű fokozatos
   feloldást nem kényszeríti ki (a 2026-09-26-i sorrendi zár MODUL-szintű, D6), tehát nincs olyan sor, amit tiltottként lenne szabad megfesteni. A két
   módosító (`--done`, `--next`) mindkettője ÁLLAPOT, nem jogosultság. */

.lesson-row[b-u3p0ymjp8h] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    /* ⚠️ A sor HORGONY-CÉL: a fejléc „Folytatás" gombja ide ugrik. Enélkül a böngésző a sort a
       nézet LEGTETEJÉRE görgetné, ahol egy ragadós fejléc alá csúszhat, és mindenképp úgy néz ki,
       mintha a sor fölött nem lenne lista. */
    scroll-margin-block-start: var(--space-5);
}

.lesson-row + .lesson-row[b-u3p0ymjp8h] {
    margin-block-start: var(--space-3);
}

/* A soron következő sor kiemelése. ⚠️ A keret NEM az egyetlen hordozó: a sor „Soron következő”
   badge-et is visel, tehát az információ nincs csak színnel kódolva. */
.lesson-row--next[b-u3p0ymjp8h] {
    border-color: var(--cat-academy-solid);
    background-color: var(--cat-academy-subtle);
}

.lesson-row--done .lesson-row__title[b-u3p0ymjp8h] {
    color: var(--color-text-muted);
}

.lesson-row__marker[b-u3p0ymjp8h] {
    display: grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    border-radius: var(--radius-pill);
    background-color: var(--color-surface-muted);
    font: var(--text-xs);
    color: var(--color-text-muted);
}

/* Feliratot (pipát) HORDOZÓ kitöltés — a -solid token fehér ikonnal.
   ⚠️ `color:`, nem `stroke:`. Az `Icon` komponens `stroke="currentColor"`-t visz, tehát a szülő
   SZÖVEGSZÍNÉBŐL veszi a színt; egy `svg { stroke: … }` szabályból viszont `svg[b-hash]` lesz, és
   az a GYEREKKOMPONENS svg-jére nem illeszkedik. (`stroke:` csak ott jó, ahol az alakzat ugyanabban
   a komponensben él — pl. ProgressRing.) A `--cat-academy-solid` (#7C3AED) fehér ikonnal 5.70:1. */
.lesson-row--done .lesson-row__marker[b-u3p0ymjp8h] {
    background-color: var(--cat-academy-solid);
    color: var(--color-text-inverse);
}

.lesson-row__body[b-u3p0ymjp8h] {
    min-inline-size: 0;
}

.lesson-row__title[b-u3p0ymjp8h] {
    margin: 0;
    font: var(--text-h3);
    color: var(--color-text);
}

.lesson-row__description[b-u3p0ymjp8h] {
    margin: var(--space-1) 0 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.lesson-row__meta[b-u3p0ymjp8h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    font: var(--text-xs);
    color: var(--color-text-muted);
}

.lesson-row__task[b-u3p0ymjp8h] {
    margin: var(--space-2) 0 0;
    font: var(--text-sm);
    color: var(--color-text);
}

.lesson-row__task-label[b-u3p0ymjp8h] {
    font-weight: 600;
    color: var(--color-text-muted);
}

.lesson-row__actions[b-u3p0ymjp8h] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
}

.lesson-row__video[b-u3p0ymjp8h],
.lesson-row__toggle[b-u3p0ymjp8h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    /* ⚠️ 44 px a minimális tapintási méret (WCAG 2.5.8) — mobilon a két vezérlő egymás alatt áll. */
    min-block-size: var(--size-touch-target);
    padding-inline: var(--space-4);
    border-radius: var(--radius-control);
    font: var(--text-sm);
    white-space: nowrap;
}

.lesson-row__video[b-u3p0ymjp8h] {
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
}

.lesson-row__video:hover[b-u3p0ymjp8h] {
    background-color: var(--color-surface-muted);
}

.lesson-row__toggle[b-u3p0ymjp8h] {
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}

/* A MEGNYOMOTT kapcsoló. ⚠️ Az `aria-pressed` attribútumra illeszkedik, nem egy külön
   osztályra: így a látható állapot és a képernyőolvasónak kimondott állapot nem tud szétcsúszni
   — ha valaki elfelejtené az egyiket, a másik sem áll elő. */
.lesson-row__toggle[aria-pressed="true"][b-u3p0ymjp8h] {
    border-color: var(--cat-success-solid);
    background-color: var(--cat-success-subtle);
    color: var(--cat-success-text);
}

/* ⚠️ Attribútumra illeszkedik, nem `:disabled`-re: a gomb `disabled` nélkül tilt (design-system
   `aria-disabled`-szabály), tehát a `:disabled` sosem illeszkedne. */
.lesson-row__toggle[aria-busy="true"][b-u3p0ymjp8h] {
    cursor: progress;
    opacity: .7;
}

/* Az előnézet: a design-system tiltott állapota (40 %). Fókuszálható marad, a kattintás a sor
   alatti magyarázatot nyitja. */
.lesson-row__toggle[aria-disabled="true"]:not([aria-busy="true"])[b-u3p0ymjp8h] {
    cursor: not-allowed;
    opacity: .4;
}

/* A jelölés hibája a sor TELJES szélességében, a vezérlők ALATT — a két-három szavas gomb
   mellett a mondat betűnként törne. A `1 / -1` mindkét rács-alakban (asztali három sáv, mobil
   két sáv) a teljes sort jelenti. */
.lesson-row__failure[b-u3p0ymjp8h] {
    grid-column: 1 / -1;
}

/* Mobilon egy oszlop: a három sávos rács 360 px-en a címet két-három betűre nyomná. */
@media (max-width: 599.98px) {
    .lesson-row[b-u3p0ymjp8h] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .lesson-row__actions[b-u3p0ymjp8h] {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .lesson-row__video[b-u3p0ymjp8h],
    .lesson-row__toggle[b-u3p0ymjp8h] {
        flex: 1 1 auto;
    }
}
/* /Components/Academy/ModuleNoteCard.razor.rz.scp.css */
/* A saját jegyzet kártyája — a kurzus-oldal jobb oldali sávjának legalsó eleme. */

.module-note__stack[b-qxwn0ofgal] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ⚠️ SIMA SZÖVEG, megtartott sortörésekkel. A `pre-wrap` a felhasználó saját tördelését őrzi, a
   `overflow-wrap: anywhere` pedig egy szóköz nélküli, bemásolt URL-t is a 320 px-es sávban tart —
   nélküle az oldalsáv vízszintesen kilógna. A szín a törzsszöveg tokenje, nem a pink. */
.module-note__text[b-qxwn0ofgal] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--color-text);
}

.module-note__meta[b-qxwn0ofgal] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

/* A két gomb egy sorban, és a keskeny sávban (vagy mobilon) egymás alá törik. */
.module-note__actions[b-qxwn0ofgal] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.module-note__loading[b-qxwn0ofgal] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
}

/* A pörgő jel DEKORATÍV (`aria-hidden`), a jelentést a mellette álló szöveg viszi. */
.module-note__spinner[b-qxwn0ofgal] {
    inline-size: 16px;
    block-size: 16px;
    border: 2px solid var(--color-border);
    border-block-start-color: var(--color-primary);
    border-radius: 50%;
    animation: module-note-spin-b-qxwn0ofgal 0.8s linear infinite;
}

@keyframes module-note-spin-b-qxwn0ofgal {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .module-note__spinner[b-qxwn0ofgal] {
        animation: none;
    }
}
/* /Components/Account/AccountPlanRow.razor.rz.scp.css */
/*
    A „Fiók típusa" sor másodlagos állapotai.

    ⚠️ A hiba- és az üres alak SORON BELÜL marad: egy lap-szintű hibapanel itt azt üzenné, hogy a
    Fiók adatok kártya egésze nem töltött be — pedig csak a csomag-hívás bukott el.
*/

.account-plan__none[b-jfvgeqzhjo],
.account-plan__error[b-jfvgeqzhjo] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    font: var(--text-sm);
    color: var(--color-text-muted);
}

/* Gomb kinézetre link — de gomb marad, mert nem navigál, hanem újratölt. */
.account-plan__retry[b-jfvgeqzhjo] {
    padding: 0;
    font: inherit;
    color: var(--color-primary-text);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
}
/* /Components/Account/AuthenticatorQrCode.razor.rz.scp.css */
/*
    A 2FA QR-kódja.

    ⚠️ Méret: 12rem (192 px) — a 4 modulos csendes zónával egy tipikus otpauth-URI (41–53
    modul) ~3,6–4,7 px/modul, amit egy telefonkamera képernyőről biztosan olvas. Keskeny
    nézetben sem nő a konténer fölé (`min(100%, …)`), és nem is zsugorodik olvashatatlanra.

    ⚠️ A színek szándékosan NEM követnek semmilyen kiemelést: fekete modul fehér alapon.
*/

.qr[b-6mbkoxynhs] {
    margin: 0;
    inline-size: min(100%, 12rem);
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
}

.qr__image[b-6mbkoxynhs] {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1;
}

.qr__background[b-6mbkoxynhs] {
    fill: var(--color-surface);
}

.qr__modules[b-6mbkoxynhs] {
    fill: var(--color-text);
}
/* /Components/Account/InfoRow.razor.rz.scp.css */
/*
    A címke/érték sor.

    ⚠️ MOBILON EGYMÁS ALÁ. Két oszlopban a hosszú e-mail cím és az időzóna-azonosító
    (`Europe/Budapest`) a 40 %-os címke-oszlop mellett négy sorra törne — a lista olvashatatlan
    lenne pont azon a képernyőn, ahol a legkevesebb hely van.
*/

.info-row[b-cnygajlznk] {
    display: grid;
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.info-row:last-child[b-cnygajlznk] {
    border-bottom: none;
}

.info-row__label[b-cnygajlznk] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.info-row__value[b-cnygajlznk] {
    margin: 0;
    font: var(--text-body);
    color: var(--color-text);
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    .info-row[b-cnygajlznk] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-1);
    }
}
/* /Components/Account/PasswordChangeGate.razor.rz.scp.css */
.pwgate[b-dyiwxcu947] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-inline-size: 640px;
}

.pwgate__title[b-dyiwxcu947] {
    margin: 0;
    font: var(--text-h1);
}

.pwgate__actions[b-dyiwxcu947] {
    margin: 0;
}
/* /Components/Account/RecoveryCodesPanel.razor.rz.scp.css */
/*
    A helyreállító kódok panelje.

    ⚠️ A kódok RÁCSBAN, monospace-ben: papírra írásnál a szem soronként ugrik, és két hasonló
    karakter (0/O) összekeverése egy elveszett helyreállítási lehetőség. Ugyanaz a döntés, mint az
    admin másodfaktor-lapján.
*/

.codes[b-87hsjkm9mx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.codes__list[b-87hsjkm9mx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-7);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface-muted);
}

.codes__list code[b-87hsjkm9mx] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1rem;
    letter-spacing: 0.08em;
    user-select: all;
}

.codes__tools[b-87hsjkm9mx],
.codes__actions[b-87hsjkm9mx] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.codes__feedback[b-87hsjkm9mx] {
    min-block-size: 1.25em;
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.codes__ack[b-87hsjkm9mx] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font: var(--text-body);
    cursor: pointer;
}

.codes__ack input[b-87hsjkm9mx] {
    inline-size: 20px;
    block-size: 20px;
    margin-block-start: 2px;
    flex: none;
}

@media (max-width: 479.98px) {
    .codes__tools > *[b-87hsjkm9mx],
    .codes__actions > *[b-87hsjkm9mx] {
        inline-size: 100%;
    }
}
/* /Components/Account/SecurityTipList.razor.rz.scp.css */
/*
    A biztonsági tippek listája.

    ⚠️ A színek a KATEGÓRIA-tokenekből jönnek, nem beégetett hex-ből, és a felirat mindig a
    `-text` token (≥ 4.5:1). A `#FF3EAA` itt sehol nem hordoz szöveget.

    ⚠️ A `.tips__icon` `color:` deklarációja az inline SVG `stroke="currentColor"`-jára hat — az
    ikon a kör szövegszínét veszi fel. A `-text` tokenek maradnak, mert a `-solid` a `-subtle`
    háttéren már 3:1 alatt lehet.
*/

.tips[b-f02s1x4jd2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tips__item[b-f02s1x4jd2] {
    display: grid;
    grid-template-columns: var(--size-icon-md) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.tips__icon[b-f02s1x4jd2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-icon-md);
    height: var(--size-icon-md);
    border-radius: var(--radius-pill);
}

.tips__item--ok .tips__icon[b-f02s1x4jd2] {
    color: var(--cat-success-text);
    background: var(--cat-success-subtle);
}

.tips__item--warning .tips__icon[b-f02s1x4jd2] {
    color: var(--cat-warning-text);
    background: var(--cat-warning-subtle);
}

.tips__item--action .tips__icon[b-f02s1x4jd2] {
    color: var(--color-primary-text);
    background: var(--color-primary-subtle);
}

.tips__item--info .tips__icon[b-f02s1x4jd2] {
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
}

.tips__title[b-f02s1x4jd2] {
    margin: 0;
    font: var(--text-body);
    color: var(--color-text);
}

.tips__detail[b-f02s1x4jd2] {
    margin: var(--space-1) 0 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.tips__action[b-f02s1x4jd2] {
    display: inline-block;
    margin-top: var(--space-2);
    font: var(--text-sm);
    color: var(--color-primary-text);
}

/*
    A kattintható sor (a terv jobbra mutató jellel rajzolja). A LINK a cím; a `::after` réteg a
    sort teljes egészében célfelületté nyújtja. A cím a szövegszínt tartja (`--color-text`), nem a
    pinket — a sor sorként olvasódik, és a kontraszt így ≥ 4.5:1.
*/
.tips__item--link[b-f02s1x4jd2] {
    position: relative;
    grid-template-columns: var(--size-icon-md) minmax(0, 1fr) auto;
    border-radius: var(--radius-control);
}

.tips__row-link[b-f02s1x4jd2] {
    color: var(--color-text);
    text-decoration: none;
}

.tips__row-link[b-f02s1x4jd2]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-control);
}

.tips__row-link:hover[b-f02s1x4jd2],
.tips__row-link:focus-visible[b-f02s1x4jd2] {
    text-decoration: underline;
}

.tips__chevron[b-f02s1x4jd2] {
    display: inline-flex;
    align-self: center;
    color: var(--color-text-muted);
}
/* /Components/Account/SettingToggleRow.razor.rz.scp.css */
/*
    A kapcsoló-sor.

    ⚠️ A bekapcsolt kapcsoló kitöltése a DEKORATÍV pink (`--color-primary`): nem hordoz feliratot,
    tehát a 3.22-es kontraszt-korlát nem érinti. Az állás SZÖVEGE mellette áll, alap szövegszínnel.
*/

.toggle-row[b-cor19xsel1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-block-start: 1px solid var(--color-border);
}

.toggle-row:first-child[b-cor19xsel1] {
    border-block-start: none;
    padding-block-start: 0;
}

.toggle-row__text[b-cor19xsel1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: 0;
}

.toggle-row__title[b-cor19xsel1] {
    font: var(--text-h3);
}

.toggle-row__body[b-cor19xsel1],
.toggle-row__meta[b-cor19xsel1],
.toggle-row__help[b-cor19xsel1] {
    margin: 0;
    max-inline-size: 62ch;
}

.toggle-row__body[b-cor19xsel1] {
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.toggle-row__meta[b-cor19xsel1],
.toggle-row__help[b-cor19xsel1] {
    color: var(--color-text-muted);
    font: var(--text-xs);
}

.toggle-row__control[b-cor19xsel1] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.toggle-row__state[b-cor19xsel1] {
    font: var(--text-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.toggle-row__switch[b-cor19xsel1] {
    position: relative;
    inline-size: 44px;
    block-size: 24px;
    padding: 0;
    border: 1px solid var(--color-border-input);
    border-radius: 999px;
    background: var(--color-surface-muted);
    cursor: pointer;
    transition: background-color 120ms ease-out, border-color 120ms ease-out;
}

.toggle-row.is-on .toggle-row__switch[b-cor19xsel1] {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.toggle-row__knob[b-cor19xsel1] {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    inline-size: 18px;
    block-size: 18px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.25);
    transition: transform 120ms ease-out;
}

.toggle-row.is-on .toggle-row__knob[b-cor19xsel1] {
    transform: translateX(20px);
}

.toggle-row__switch[aria-busy="true"][b-cor19xsel1] {
    cursor: progress;
    opacity: 0.7;
}

/*
    ⚠️ Mozgás-érzékenységre a csúszás elmarad — az állást az `aria-checked`, a szöveg és a szín
    hordozza, tehát semmi nem vész el.
*/
@media (prefers-reduced-motion: reduce) {
    .toggle-row__switch[b-cor19xsel1],
    .toggle-row__knob[b-cor19xsel1] {
        transition: none;
    }
}

@media (max-width: 767.98px) {
    .toggle-row[b-cor19xsel1] {
        flex-direction: column;
        align-items: stretch;
    }

    .toggle-row__control[b-cor19xsel1] {
        justify-content: space-between;
    }
}
/* /Components/Account/TwoFactorCard.razor.rz.scp.css */
/*
    A 2FA-kártya.

    ⚠️ A kikapcsolt doboz a terven halvány pink: itt a háttér `--color-primary-subtle` (dekoratív
    kitöltés), a SZÖVEG `--color-text` / `--color-text-muted`, az ikon `--color-primary-text`.
    A `#FF3EAA` semmilyen szöveget nem hordoz (`DesignSurfaceContrastGate`).
*/

.twofa-card__box[b-r8wsep3gmu] {
    display: grid;
    grid-template-columns: var(--size-icon-lg) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
    margin-block-end: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

.twofa-card__box--off[b-r8wsep3gmu] {
    background-color: var(--color-primary-subtle);
}

.twofa-card__box--info[b-r8wsep3gmu] {
    background-color: var(--color-surface-muted);
}

.twofa-card__icon[b-r8wsep3gmu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--size-icon-lg);
    block-size: var(--size-icon-lg);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
}

/*
    Az ikon vonala `currentColor`-ral rajzol, tehát a `color:` deklaráció a kontraszt-kapu
    szemében SZÖVEGSZÍN: a `--color-primary-text`, nem a dekoratív pink (az 3,22:1 lenne).
*/
.twofa-card__icon--off[b-r8wsep3gmu] {
    color: var(--color-primary-text);
}

.twofa-card__icon--info[b-r8wsep3gmu] {
    color: var(--color-text-muted);
}

.twofa-card__box-title[b-r8wsep3gmu] {
    margin: 0;
    font: var(--text-body);
    font-weight: 600;
    color: var(--color-text);
}

.twofa-card__box-detail[b-r8wsep3gmu] {
    margin: var(--space-1) 0 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.twofa-card__on[b-r8wsep3gmu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.twofa-card__row[b-r8wsep3gmu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font: var(--text-body);
}

.twofa-card__actions[b-r8wsep3gmu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.twofa-card__empty h3[b-r8wsep3gmu] {
    margin: 0 0 var(--space-2);
    font: var(--text-h3);
}

.twofa-card__empty p[b-r8wsep3gmu] {
    margin: 0 0 var(--space-3);
}

@media (max-width: 479.98px) {
    .twofa-card__actions > *[b-r8wsep3gmu] {
        inline-size: 100%;
    }
}
/* /Components/Account/TwoFactorReauthDialog.razor.rz.scp.css */
/*
    A jelszó + kód párbeszéd. A CSS-izoláció komponensenkénti, ezért a `ConfirmDialog` szabályai
    ide nem érnek el — a hasonlóság szándékos duplikáció, nem hiba: ugyanaz a felület, ugyanazok a
    tokenek (a biztonságos gomb tömör sötét, a destruktív körvonalas, piros SZÖVEGGEL).
*/

.reauth[b-5p3214yv7o] {
    position: fixed;
    inset: 0;
    z-index: var(--z-dialog);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.reauth__backdrop[b-5p3214yv7o] {
    position: absolute;
    inset: 0;
    background-color: var(--overlay-backdrop);
}

.reauth__panel[b-5p3214yv7o] {
    position: relative;
    inline-size: min(520px, 100%);
    max-block-size: calc(100dvh - (2 * var(--space-4)));
    overflow-y: auto;
    padding: var(--space-5);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-overlay);
}

/* Az őrszem fókuszálható, de nem látszik és nem foglal helyet. */
.reauth__sentinel[b-5p3214yv7o] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.reauth__title[b-5p3214yv7o] {
    margin: 0;
    font: var(--text-h2);
}

.reauth__body[b-5p3214yv7o] {
    margin: var(--space-3) 0 0;
    color: var(--color-text);
    font: var(--text-body);
}

.reauth__form[b-5p3214yv7o] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-block-start: var(--space-4);
}

.reauth__toggle[b-5p3214yv7o] {
    margin: 0;
}

.reauth__link-button[b-5p3214yv7o] {
    min-block-size: var(--size-touch-target);
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary-text);
    font: var(--text-sm);
    text-decoration: underline;
    cursor: pointer;
}

.reauth__actions[b-5p3214yv7o] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
}

.reauth__button[b-5p3214yv7o] {
    min-block-size: var(--size-touch-target);
    padding-inline: var(--space-4);
    border-radius: var(--radius-control);
    font: var(--text-body);
    cursor: pointer;
}

.reauth__button--safe[b-5p3214yv7o] {
    border: 1px solid var(--color-text);
    background-color: var(--color-text);
    color: var(--color-text-inverse);
    font-weight: 600;
}

.reauth__button--confirm[b-5p3214yv7o] {
    border: 1px solid var(--color-border-input);
    background-color: var(--color-surface);
    color: var(--color-text);
}

.reauth__button--danger[b-5p3214yv7o] {
    border: 1px solid var(--color-danger-text);
    background-color: var(--color-surface);
    color: var(--color-danger-text);
}

.reauth__button[aria-busy="true"][b-5p3214yv7o] {
    cursor: progress;
}

@media (max-width: 479.98px) {
    .reauth__actions[b-5p3214yv7o] {
        flex-direction: column-reverse;
    }

    .reauth__button[b-5p3214yv7o] {
        inline-size: 100%;
    }
}
/* /Components/Admin/AdminAccessDenied.razor.rz.scp.css */
.denied[b-o3w5vy5vw6] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background-color: var(--color-surface-muted);
}

.denied--full[b-o3w5vy5vw6] {
    min-block-size: 100dvh;
}

.denied__card[b-o3w5vy5vw6] {
    inline-size: min(560px, 100%);
    padding: var(--space-6);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
}

/* A „hol vagyok" jelzés az admin-felület sárga sávjának a testvére — de itt csak SZÖVEG. */
.denied__eyebrow[b-o3w5vy5vw6] {
    margin: 0 0 var(--space-2);
    color: var(--cat-warning-text);
    font: var(--text-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.denied__title[b-o3w5vy5vw6] {
    font: var(--text-h1);
}

.denied__body[b-o3w5vy5vw6] {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font: var(--text-body);
}

.denied__actions[b-o3w5vy5vw6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
}
/* /Components/Admin/AdminGuard.razor.rz.scp.css */
.guard[b-pc43twj1k5] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 100dvh;
    color: var(--color-text-muted);
    font: var(--text-body);
}
/* /Components/Admin/AdminSecurityBanner.razor.rz.scp.css */
/*
   A „Tudomásul vettem" nem navigáció, hanem művelet — ezért `<button>`, és nem `<a>`. Link
   alakban a képernyőolvasó oldalváltást ígérne, ami nem történik meg.
*/
.banner__dismiss[b-i0m5svejsp] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
/* /Components/Admin/AuditFilterBar.razor.rz.scp.css */
/*
    Az audit-napló szűrősávja.

    ⚠️ A CSS-izoláció komponensenkénti, ezért a chip- és mező-stílusok részben ismétlik az
    `IdeaFilterBar`-t. A megosztás egy közös osztálykészletet igényelne az `app.css`-ben —
    azt a design rendszer szintjén kell eldönteni, nem egy képernyő kedvéért.
*/

.audit-filters[b-e2mc45jedt] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}

.audit-filters__row[b-e2mc45jedt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.audit-filters__row + .audit-filters__row[b-e2mc45jedt] {
    margin-top: var(--space-4);
}

.audit-filters__field[b-e2mc45jedt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.audit-filters__field label[b-e2mc45jedt] {
    font: var(--text-xs);
    color: var(--color-text-muted);
}

.audit-filters__field select[b-e2mc45jedt],
.audit-filters__field input[b-e2mc45jedt] {
    width: 100%;
    min-height: 40px;
    padding: 0 var(--space-3);
    font: var(--text-body);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
}

.audit-filters__hint[b-e2mc45jedt] {
    margin: 0;
    font: var(--text-xs);
    color: var(--color-text-muted);
}

/* A hibaüzenet SZÖVEGGEL is közli magát — a piros keret önmagában nem információ. */
.audit-filters__error[b-e2mc45jedt] {
    margin: 0;
    font: var(--text-xs);
    color: var(--color-danger-text);
}

.audit-filters__field input[aria-invalid="true"][b-e2mc45jedt] {
    border-color: var(--color-danger);
}

.audit-filters__submit[b-e2mc45jedt] {
    display: flex;
    align-items: flex-end;
    padding-bottom: 2px;
}

.audit-filters__active[b-e2mc45jedt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.audit-filters__active-label[b-e2mc45jedt] {
    margin: 0;
    font: var(--text-xs);
    color: var(--color-text-muted);
}

.audit-filters__chips[b-e2mc45jedt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
    ⚠️ A chip halvány pink hátteret kap, a felirata viszont a `-text` tokent: a `#FF3EAA`
    kizárólag dekoratív, feliratot hordozó felületként bukna a kontraszt-küszöbön.
*/
.audit-filters__chip[b-e2mc45jedt] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 32px;
    padding: 0 var(--space-3);
    font: var(--text-xs);
    color: var(--color-primary-text);
    background: var(--color-primary-subtle);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.audit-filters__chip.is-invalid[b-e2mc45jedt] {
    color: var(--color-danger-text);
    background: var(--color-surface-muted);
    border-color: var(--color-danger);
}

.audit-filters__chip-x[b-e2mc45jedt] {
    font-size: 1rem;
    line-height: 1;
}

.audit-filters__chip:focus-visible[b-e2mc45jedt] {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .audit-filters__row[b-e2mc45jedt] {
        grid-template-columns: 1fr;
    }

    .audit-filters__submit[b-e2mc45jedt] {
        padding-bottom: 0;
    }
}
/* /Components/Admin/BlueprintBlockEditor.razor.rz.scp.css */
/*
   A verzió-piszkozat szerkesztője.

   ⚠️ A rács mobilon EGY oszlopra esik. A blokk-sor hat mezőt hordoz; vízszintes görgetésbe
   kényszerítve a telefonon szerkesztő admin a „Vége (mp)" mezőt nem is találná meg.
*/
.block-editor[b-dmpl213a22] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.block-editor__summary[b-dmpl213a22] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.block-editor__count[b-dmpl213a22] {
    margin: 0;
    font: var(--text-body);
    color: var(--color-text);
}

.block-editor__list[b-dmpl213a22] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.block-editor__fields[b-dmpl213a22] {
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
}

.block-editor__legend[b-dmpl213a22] {
    padding-inline: var(--space-2);
    font: var(--text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.block-editor__grid[b-dmpl213a22] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
}

.block-editor__field[b-dmpl213a22] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: 0;
}

.block-editor__field--wide[b-dmpl213a22] {
    grid-column: 1 / -1;
}

.block-editor__field label[b-dmpl213a22] {
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.block-editor__field input[b-dmpl213a22],
.block-editor__field select[b-dmpl213a22],
.block-editor__field textarea[b-dmpl213a22] {
    inline-size: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    font: var(--text-body);
    background-color: var(--color-surface);
    color: var(--color-text);
}

.block-editor__field textarea[b-dmpl213a22] {
    resize: vertical;
}

.block-editor__row-actions[b-dmpl213a22],
.block-editor__actions[b-dmpl213a22] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
}

@media (max-width: 640px) {
    .block-editor__grid[b-dmpl213a22] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Admin/ElevationPrompt.razor.rz.scp.css */
/*
   A step-up párbeszéd — a ConfirmDialog szerkezetét követi.

   ⚠️ A CSS SZÁNDÉKOSAN duplikált (a CSS-izoláció komponensenkénti, tehát a `.confirm__*`
   szabályok ide nem érnek el). Egy közös, globális dialógus-osztály a két párbeszéd hangnemét
   összekötné: a ConfirmDialog-on a BIZTONSÁGOS gomb a hangsúlyos (destruktív megerősítés), itt
   viszont a MEGERŐSÍTÉS az, mert a felhasználó azért nyitotta meg, hogy folytassa a mentést.
*/

.elevate[b-7bp5ninlhf] {
    position: fixed;
    inset: 0;
    z-index: var(--z-dialog);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.elevate__backdrop[b-7bp5ninlhf] {
    position: absolute;
    inset: 0;
    background-color: var(--overlay-backdrop);
}

.elevate__panel[b-7bp5ninlhf] {
    position: relative;
    inline-size: min(520px, 100%);
    max-block-size: calc(100dvh - (2 * var(--space-4)));
    overflow-y: auto;
    padding: var(--space-5);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-overlay);
}

/* Fókuszálható, de nem látszik és nem foglal helyet. */
.elevate__sentinel[b-7bp5ninlhf] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.elevate__title[b-7bp5ninlhf] {
    font: var(--text-h2);
}

.elevate__body[b-7bp5ninlhf] {
    margin-block-start: var(--space-3);
    color: var(--color-text);
    font: var(--text-body);
}

.elevate__lead[b-7bp5ninlhf] {
    margin: 0 0 var(--space-2);
}

.elevate__field[b-7bp5ninlhf] {
    margin-block-start: var(--space-4);
}

.elevate__field label[b-7bp5ninlhf] {
    display: block;
    font-weight: 600;
}

.elevate__hint[b-7bp5ninlhf] {
    margin: var(--space-1) 0 var(--space-2);
    color: var(--color-text-muted);
    font: var(--text-sm);
}

/* A kód monospace és tágas betűzésű: az elgépelés itt egy elutasított mentést jelent. */
.elevate__field input[b-7bp5ninlhf] {
    inline-size: 100%;
    min-block-size: var(--size-touch-target);
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.125rem;
    letter-spacing: 0.15em;
}

.elevate__link[b-7bp5ninlhf] {
    margin-block-start: var(--space-3);
    font: var(--text-sm);
}

.elevate__actions[b-7bp5ninlhf] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
}

.elevate__button[b-7bp5ninlhf] {
    min-block-size: var(--size-touch-target);
    padding-inline: var(--space-4);
    border-radius: var(--radius-control);
    font: var(--text-body);
    cursor: pointer;
}

.elevate__button--safe[b-7bp5ninlhf] {
    border: 1px solid var(--color-border-input);
    background-color: var(--color-surface);
    color: var(--color-text);
}

/* A folytatás a hangsúlyos: tömör sötét felület fehér felirattal (18.88:1). */
.elevate__button--confirm[b-7bp5ninlhf] {
    border: 1px solid var(--color-text);
    background-color: var(--color-text);
    color: var(--color-text-inverse);
    font-weight: 600;
}

.elevate__button[disabled][b-7bp5ninlhf] {
    opacity: 0.55;
    cursor: not-allowed;
}

.elevate__button[aria-busy="true"][b-7bp5ninlhf] {
    cursor: progress;
}

@media (max-width: 479.98px) {
    .elevate__actions[b-7bp5ninlhf] {
        flex-direction: column-reverse;
    }

    .elevate__button[b-7bp5ninlhf] {
        inline-size: 100%;
    }
}
/* /Components/Admin/IdeaBlockEditor.razor.rz.scp.css */
/*
   Az ötlet-blokkok szerkesztője — a stepper szerkezetét tükrözi, hogy az admin ugyanazt lássa,
   amit a felhasználó kap.
*/
.idea-blocks[b-qdsll0wfpf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.idea-blocks__count[b-qdsll0wfpf] {
    margin: 0;
    font: var(--text-body);
}

.idea-blocks__list[b-qdsll0wfpf] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.idea-blocks__item[b-qdsll0wfpf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
}

.idea-blocks__head[b-qdsll0wfpf] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ⚠️ Dekoratív sorszám-kör: a sorrendet az `<ol>` hordozza, nem ez a szám. */
.idea-blocks__marker[b-qdsll0wfpf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 28px;
    block-size: 28px;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary-subtle);
    color: var(--color-primary-text);
    font: var(--text-xs);
}

.idea-blocks__label[b-qdsll0wfpf] {
    margin: 0;
    font: var(--text-body);
    font-weight: 700;
}

.idea-blocks__kind[b-qdsll0wfpf],
.idea-blocks__caption[b-qdsll0wfpf] {
    color: var(--color-text-muted);
    font: var(--text-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.idea-blocks__blueprint-guidance[b-qdsll0wfpf],
.idea-blocks__override[b-qdsll0wfpf] {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.idea-blocks__field[b-qdsll0wfpf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: 0;
}

.idea-blocks__field label[b-qdsll0wfpf] {
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.idea-blocks__field input[b-qdsll0wfpf],
.idea-blocks__field select[b-qdsll0wfpf],
.idea-blocks__field textarea[b-qdsll0wfpf] {
    inline-size: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    font: var(--text-body);
    background-color: var(--color-surface);
    color: var(--color-text);
}

.idea-blocks__field textarea[b-qdsll0wfpf] {
    resize: vertical;
}

.idea-blocks__position[b-qdsll0wfpf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
    align-items: end;
}

.idea-blocks__override[b-qdsll0wfpf] {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .idea-blocks__position[b-qdsll0wfpf] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Brand/AudienceSegmentSection.razor.rz.scp.css */
/*
    Célcsoport szegmensek — kártyás rács.

    ⚠️ A rács `auto-fill`-lel tördel, nem médiaküszöbökkel: a szekció a Célközönség lap
    kártyájában ül, aminek a szélessége a bal menü állapotától is függ — egy viewport-küszöb
    nyitott menü mellett hibás oszlopszámot adna.
*/

.segments__grid[b-8n2cxqmcl8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.segments__card[b-8n2cxqmcl8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
}

.segments__row[b-8n2cxqmcl8] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/*
    A DEKORATÍV ikon. ⚠️ A színe `--color-primary-text`, nem a nyers `#FF3EAA`: a `color:`
    deklarációt a `DesignSurfaceContrastGate` a világos felülethez MÉRI, és a pink ott 3,22:1. Az ikon halvány pink
    korongon ül, hogy a terv pink hangulata megmaradjon a kontraszt-szabály feladása nélkül.
*/
.segments__icon[b-8n2cxqmcl8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    background-color: var(--color-primary-subtle);
    color: var(--color-primary-text);
}

.segments__icon svg[b-8n2cxqmcl8] {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.segments__field[b-8n2cxqmcl8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    /* A `min-inline-size: 0` nélkül a flex-elem nem zsugorodik, és a rács vízszintesen kifut. */
    min-inline-size: 0;
    flex: 1 1 auto;
}

.segments__name[b-8n2cxqmcl8] {
    inline-size: 100%;
    padding: var(--space-2);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--text-body);
}

.segments__error[b-8n2cxqmcl8] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-danger-text);
}

.segments__delete[b-8n2cxqmcl8] {
    flex: none;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: var(--color-danger-text);
    font: var(--text-body);
    cursor: pointer;
}

.segments__delete:hover[b-8n2cxqmcl8] {
    background-color: var(--color-surface-muted);
}

/* ── A szaggatott „hozzáadás" kártya ─────────────────────────────────────── */

.segments__card--add[b-8n2cxqmcl8] {
    padding: 0;
    border-style: dashed;
    background-color: var(--color-surface-muted);
}

.segments__add[b-8n2cxqmcl8] {
    inline-size: 100%;
    /* A gomb a teljes kártyát kitölti: a szaggatott keret maga a kattintható felület. */
    min-block-size: 3.5rem;
    padding: var(--space-3);
    border: 0;
    border-radius: var(--radius-card);
    background-color: transparent;
    color: var(--color-primary-text);
    font: var(--text-body);
    cursor: pointer;
}

.segments__add:hover[b-8n2cxqmcl8] {
    background-color: var(--color-primary-subtle);
}

.segments__confirm[b-8n2cxqmcl8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
}

.segments__count[b-8n2cxqmcl8] {
    margin-block-start: var(--space-3);
    margin-block-end: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

/* ── Érintős eszköz: teljes értékű célpontok ──────────────────────────────
   ⚠️ A minta a `TagInput`/`SearchableMultiSelect` bevált párja, nem új ötlet: durva
   mutatónál 44×44, egérrel a tömör alak marad.

   ⚠️ MÉRT HIÁNY VOLT. A `.segments__delete` SEMMILYEN méret-deklarációt nem vitt: a
   16 px-es X-ikon + 4/8 px padding + 1 px keret ~26 px magas és ~34 px széles célpontot
   adott — a `design-system.md` 44×44-es minimuma alatt MINDKÉT tengelyen, és ez a fájl
   egyetlen `@media` blokkot sem tartalmazott. A törlés visszafordíthatatlan művelet, tehát
   ez az a gomb, amit a legkevésbé szabad elvéteni. */
@media (pointer: coarse) {
    .segments__delete[b-8n2cxqmcl8] {
        min-inline-size: var(--size-touch-target);
        min-block-size: var(--size-touch-target);
    }
}
/* /Components/Brand/BrandAiSummaryPlaceholder.razor.rz.scp.css */
/* „Az AI jelenleg így lát" — helytartó, amíg a Fázis 4 meg nem építi. */

.ai-summary-placeholder__note[b-p4favsk1jy] {
    font: var(--text-sm);
    color: var(--color-text-muted);
    margin-block-end: 0;
}
/* /Components/Brand/BrandAudienceCard.razor.rz.scp.css */
/* „Célközönség" kártya — a demográfia sor, majd a három előnézetes lista. */

.audience-card__segment[b-evepl6rjgq] {
    margin: 0;
    font: var(--text-h3);
}

.audience-card__demography[b-evepl6rjgq] {
    margin: 0 0 var(--space-3);
    font: var(--text-body);
    color: var(--color-text-muted);
}
/* /Components/Brand/BrandEditorShell.razor.rz.scp.css */
.brand-editor[b-fjottalkfa] {
    display: flex;
    flex-direction: column;
    gap: var(--space-grid-gap);
}
/* /Components/Brand/BrandGoalsCard.razor.rz.scp.css */
/*
    „Marketing célok" kártya.

    ⚠️ A cél előtti pötty DEKORATÍV pink kitöltés (`--cat-brand-solid`), és `aria-hidden` — a
    jelentést a cél NEVE viszi. Feliratot ez a felület nem hordozhat: a `#FF3EAA` fehér szöveggel
    3,22:1, ami bukik.
*/

.goals-card__list[b-6apoixmjq5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding-inline-start: 0;
    list-style: none;
}

.goals-card__goal[b-6apoixmjq5] {
    display: flex;
    align-items: start;
    gap: var(--space-3);
}

.goals-card__dot[b-6apoixmjq5] {
    flex: 0 0 auto;
    inline-size: 10px;
    block-size: 10px;
    margin-block-start: 7px;
    border-radius: var(--radius-pill);
    background-color: var(--cat-brand-solid);
}

.goals-card__description[b-6apoixmjq5] {
    display: block;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.goals-card__empty[b-6apoixmjq5] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}
/* /Components/Brand/BrandOnboardingSteps.razor.rz.scp.css */
.onboarding-steps[b-lzw9iygccf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding-inline-start: var(--space-5);
}
/* /Components/Brand/BrandOverviewCardFrame.razor.rz.scp.css */
/*
    A lábléc-link („Összes … megtekintése →").

    ⚠️ A link színe NEM pink: a `#FF3EAA` fehéren 3,22:1, ami normál méretű szöveghez bukik — és a
    képernyőtervek pont ezt a hibát ismétlik. A hangsúlyt a felső szegély és a nyíl adja, a szín
    marad a semleges szövegszín.
*/

.overview-card__see-all[b-oc492xqv8v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--color-border);
    color: var(--color-text);
    font: var(--text-sm);
    min-block-size: var(--size-touch-target);
    text-decoration: none;
}

.overview-card__see-all:hover[b-oc492xqv8v],
.overview-card__see-all:focus-visible[b-oc492xqv8v] {
    text-decoration: underline;
}
/* /Components/Brand/BrandPreferencesCard.razor.rz.scp.css */
/*
    „Tartalompreferenciák" — teljes szélességű blokk, öt aloszloppal.

    ⚠️ Az oszlopok `auto-fit`-tel törnek: mobilon egymás alá kerülnek, nem vízszintesen görgethető
    sávvá válnak. Az öt fix oszlop 360 px-en olvashatatlanná préselődne.
*/

.preferences-card__columns[b-virjfgi6yt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-5);
    align-items: start;
}

.preferences-card__column[b-virjfgi6yt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.preferences-card__label[b-virjfgi6yt] {
    font: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.preferences-card__frequency[b-virjfgi6yt] {
    margin: 0;
    font: var(--text-body);
}

.preferences-card__missing[b-virjfgi6yt] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}
/* /Components/Brand/BrandPreviewList.razor.rz.scp.css */
/*
    Előnézetes lista — felirat, pill-ek, „+N további".

    ⚠️ Egyetlen szín sem pink SZÖVEG: a pill felirata a semleges szövegszínt viszi, a halvány
    kategória-háttéren is (a `DesignSurfaceContrastGate` mindkét felületen méri a kontrasztot).
*/

.preview-list[b-m1u9fqo189] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.preview-list__label[b-m1u9fqo189] {
    font: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.preview-list__items[b-m1u9fqo189] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding-inline-start: 0;
    list-style: none;
}

.preview-list__item[b-m1u9fqo189] {
    background-color: var(--cat-brand-subtle);
    color: var(--color-text);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-3);
    font: var(--text-sm);
}

.preview-list__more[b-m1u9fqo189],
.preview-list__empty[b-m1u9fqo189] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}
/* /Components/Brand/BrandServicesCard.razor.rz.scp.css */
/* „Szolgáltatások" kártya — előnézet, „+N további", majd az aktív/szüneteltetett bontás. */

.services-card__list[b-n02dvo73g1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding-inline-start: 0;
    list-style: none;
}

.services-card__service[b-n02dvo73g1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    background-color: var(--color-surface-muted);
    border-radius: var(--radius-control);
    padding: var(--space-2) var(--space-3);
}

.services-card__name[b-n02dvo73g1] {
    font: var(--text-body);
    color: var(--color-text);
}

.services-card__more[b-n02dvo73g1],
.services-card__counts[b-n02dvo73g1],
.services-card__empty[b-n02dvo73g1] {
    margin: var(--space-3) 0 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}
/* /Components/Brand/BrandSummaryCard.razor.rz.scp.css */
/*
    „Márka összefoglaló" kártya.

    ⚠️ A hiányzó mező szövege NEM pink és nem piros: a kitöltetlenség nem hiba, hanem következő
    lépés. Piros hibaszínnel az első belépéskor a fél kártya „elromlottnak" látszana.
*/

.summary-card__name[b-9yjnx44t8s] {
    font: var(--text-h2);
    margin: 0;
}

.summary-card__industries[b-9yjnx44t8s] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    padding-inline-start: 0;
    list-style: none;
}

.summary-card__meta[b-9yjnx44t8s],
.summary-card__introduction[b-9yjnx44t8s] {
    margin: var(--space-2) 0 0;
    font: var(--text-body);
    color: var(--color-text);
}

.summary-card__missing[b-9yjnx44t8s] {
    margin: var(--space-2) 0 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.summary-card__facts[b-9yjnx44t8s] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: var(--space-3) 0 0;
}

.summary-card__facts dt[b-9yjnx44t8s] {
    font: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.summary-card__facts dd[b-9yjnx44t8s] {
    margin: 0;
    font: var(--text-body);
}
/* /Components/Content/AiCreditMeter.razor.rz.scp.css */
/* AiCreditMeter — kredit-mérősáv. */

.credit-meter[b-etr3wmdkik] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* A sáv DEKORATÍV: a jelentést a szöveg hordozza, ezért aria-hidden. */
.credit-meter__bar[b-etr3wmdkik] {
    height: 8px;
    border-radius: var(--radius-pill);
    background-color: var(--color-surface-muted);
    overflow: hidden;
}

.credit-meter__fill[b-etr3wmdkik] {
    display: block;
    height: 100%;
    /* #FF3EAA — kizárólag dekoratív kitöltés, felirat nem áll rajta. */
    background-color: var(--color-primary);
}

.credit-meter__text[b-etr3wmdkik],
.credit-meter__cost[b-etr3wmdkik] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text);
}

.credit-meter__muted[b-etr3wmdkik] {
    color: var(--color-text-muted);
}

.credit-meter__short[b-etr3wmdkik] {
    display: block;
    color: var(--color-danger-text);
}

.credit-meter__renewal[b-etr3wmdkik] {
    margin: 0;
    font: var(--text-xs);
    color: var(--color-text-muted);
}

/* ── A bal menü lábléce: SÖTÉT felület (--color-sidebar, #000D20) ──────────────
   ⚠️ Itt a `-inverse` token-család a helyes szín-forrás, és ez MÉRT tulajdonság, nem elnevezés:
   a `DesignSurfaceContrastGate` minden `-inverse` tokenre kiszámolja, hogy a sidebaron ≥ 4,5:1 ÉS a világos
   alapfelületen < 4,5:1. A --color-text (#111111) itt láthatatlan lenne (1,03), a --color-text-muted
   (#666666) pedig 3,29 — bukna. */

.credit-meter--sidebar[b-etr3wmdkik] {
    gap: var(--space-1);
    /* A lábléc többi eleme (admin belépési pont, terméknév) alá kerül — a térköz itt él, mert a
       MainLayout scoped CSS-e a gyerek-komponens elemeit nem tudja megcímezni. */
    margin-block-end: var(--space-3);
}

.credit-meter--sidebar .credit-meter__text[b-etr3wmdkik],
.credit-meter--sidebar .credit-meter__cost[b-etr3wmdkik] {
    font: var(--text-xs);
    color: var(--color-text-inverse);
}

.credit-meter--sidebar .credit-meter__muted[b-etr3wmdkik],
.credit-meter--sidebar .credit-meter__renewal[b-etr3wmdkik] {
    color: var(--color-text-muted-inverse);
}

/* ⚠️ A sáv HÁTTERE is cserél: a --color-surface-muted (#F5F5F5) a sötét sávon az üres részt
   világosabbra festené, mint a pink kitöltést — a mérősáv fordítva látszana. */
.credit-meter--sidebar .credit-meter__bar[b-etr3wmdkik] {
    background-color: rgb(255 255 255 / .16);
}

/* ⚠️ A link a sötét sávon: a felirat a --color-text-inverse (18,88:1), aláhúzva. Pink feliratot
   IDE lehetne tenni (a #FF3EAA a #000D20-on 6,05 — megfelel), de ez a link az ÜRES ÁLLAPOT
   kijárata, és a lábléc egyetlen kattintható eleme mellett (⚙ Adminisztráció) áll: két külön
   hangsúly-szín ugyanabban a 100 px-es sávban a fontosabbat halkítaná. */
.credit-meter--sidebar a[b-etr3wmdkik] {
    color: var(--color-text-inverse);
}
/* /Components/Content/CalendarDayCard.razor.rz.scp.css */
/* CalendarDayCard — a heti terv egy napja.

   ⚠️ A rácsot NEM ez a fájl adja: a `role="row"` elem a LAP saját jelölése, tehát a lap scoped CSS-e
   stílusozza. A Blazor scoped CSS (`[b-hash]`) a komponens SAJÁT jelöléséhez tapad — a lapból
   írt `.calendar__grid > div` szabály erre a cellára nem illeszkedne, mert az itt
   keletkezik. A kártya tehát a saját belsejét stílusozza, a helyét a szülő rácsa dönti el.

   ⚠️ Pink `color:` sehol. A kategória-színt a `Badge` viszi (`-subtle` háttér + `-text` felirat),
   a CTA-t a `Button` (`--color-primary-strong`, fehér felirattal). */

.calendar-day[b-gegx3z7big] {
    display: flex;
    min-inline-size: 0;

    /* ⚠️ A cella a rács Tab-megállója: a globális `:focus-visible` gyűrű rajta jelenik meg, és a
       lekerekítés nélkül szögletes keret ülne a lekerekített kártya körül. */
    border-radius: var(--radius-card);
}

.calendar-day__card[b-gegx3z7big] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-3);
    min-inline-size: 0;
    padding: var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);

    /* ⚠️ A 7 oszlopos sáv alján (1440 px) a szövegdoboz 109,7 px: egy-egy hosszú magyar szó
       („Bizalomépítő", „bizonytalanságot.") 0,6–7,7 px-szel kilógott a kártyából. A `break-word`
       CSAK a sorba nem férő szót töri (öröklődik a kártya minden szövegére); 1280/1536/1920-on a
       cellák és a szövegelemek mérete változatlan maradt (mérve, 2026-09-26). A `hyphens: auto` SZÁNDÉKOSAN nincs itt: a
       mérő Chromiumban a `lang="hu"` mellett is hatástalan volt (nincs magyar szótár), ahol pedig
       van, ott minden sorvégi szót elválasztana — az már a kép lényegi változása lenne. */
    overflow-wrap: break-word;
}

/* A pihenőnap visszafogott — de NEM üres, és nem is halványabb a kelleténél: a szövege
   ugyanazzal a `--color-text-muted`-tel megy, ami fehéren 5.74. */
.calendar-day--rest .calendar-day__card[b-gegx3z7big] {
    background-color: var(--color-surface-muted);
    box-shadow: none;
}

/* ⚠️ A mai nap kiemelése VASTAG KERET, nem szín: a keret kontraszttól függetlenül látszik, és a
   „MA” felirat amúgy is ott van — a szín itt megerősítés, nem hordozó. */
.calendar-day--today .calendar-day__card[b-gegx3z7big] {
    border-color: var(--color-text);
    border-width: 2px;
    padding: calc(var(--space-4) - 1px);
}

.calendar-day__head[b-gegx3z7big] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.calendar-day__chips[b-gegx3z7big] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

/* A napnév verzálban — a KISBETŰS szöveg marad a DOM-ban, l. a CalendarDayNames doksiját. */
.calendar-day__chips[b-gegx3z7big]  .badge {
    text-transform: uppercase;
    letter-spacing: .04em;
}

.calendar-day__date[b-gegx3z7big] {
    margin: 0;
    font: var(--text-xs);
    color: var(--color-text-muted);
}

.calendar-day__title[b-gegx3z7big] {
    margin: 0;
    font: var(--text-h3);
    color: var(--color-text);
}

.calendar-day__goal[b-gegx3z7big] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.calendar-day__pillar[b-gegx3z7big] {
    margin: 0;
    font: var(--text-xs);
    color: var(--color-text-muted);
}

.calendar-day__pillar-label[b-gegx3z7big] {
    color: var(--color-text);
}

.calendar-day__body[b-gegx3z7big] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--color-border);
}

.calendar-day__idea-label[b-gegx3z7big] {
    margin: 0;
    font: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.calendar-day__idea[b-gegx3z7big] {
    margin: 0;
    font: var(--text-h3);
    color: var(--color-text);
}

.calendar-day__justification[b-gegx3z7big] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.calendar-day__reasoning[b-gegx3z7big] {
    font: var(--text-xs);
    color: var(--color-text-muted);
}

.calendar-day__reasoning summary[b-gegx3z7big] {
    color: var(--color-text);
    cursor: pointer;
}

.calendar-day__reasoning p[b-gegx3z7big] {
    margin: var(--space-2) 0 0;
}

.calendar-day__rest-note[b-gegx3z7big],
.calendar-day__missing[b-gegx3z7big] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.calendar-day__actions[b-gegx3z7big] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.calendar-day__remaining[b-gegx3z7big] {
    margin: 0;
    font: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
}

/* ── Mobil: nap-listás nézet ──────────────────────────────────────────────
   A design-system kimondja: „A 7 oszlopos tartalomnaptár mobilon nem működik → nap-listás
   nézet.” A rács egyoszlopossá válása a LAP dolga; itt a kártya belseje áll át fekvő
   elrendezésre, hogy a lista görgethető maradjon, ne hét teljes képernyő. */
@media (max-width: 767.98px) {
    .calendar-day__card[b-gegx3z7big] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: var(--space-4);
        align-items: start;
    }

    .calendar-day__actions[b-gegx3z7big] {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .calendar-day__actions > *[b-gegx3z7big] {
        flex: 1 1 12rem;
    }

    .calendar-day__body[b-gegx3z7big] {
        padding-block-start: 0;
        border-block-start: 0;
    }
}

@media (max-width: 479.98px) {
    .calendar-day__card[b-gegx3z7big] {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-3);
    }

    .calendar-day__body[b-gegx3z7big] {
        padding-block-start: var(--space-3);
        border-block-start: 1px solid var(--color-border);
    }
}
/* /Components/Content/CalendarStoryStrip.razor.rz.scp.css */
/* CalendarStoryStrip — a naptár alsó, story-ötleteket mutató sávja.

   ⚠️ A rács itt a KOMPONENS saját jelölése (a `<ul>` ebben a fájlban keletkezik), tehát a scoped
   CSS illeszkedik rá — szemben a nap-kártyák rácsával, ami a lapé. */

/* ⚠️⚠️ AZ OSZLOPSZÁM A TARTALOMBÓL DŐL EL, NEM EGY TÖRÉSPONTBÓL — és ez MÉRT hiba javítása.
   A régi `repeat(7, minmax(0, 1fr))` 1024 px fölött FIX hét oszlopot adott: 1280 px-en (264 px-es
   bal menü mellett) egy nap ~95 px tartalomszélességet kapott, a „Megcsináltam" gomb viszont egy
   szó (nem törhető) plusz a `Button` 24–24 px-es belső margója — a gomb kilógott a napjából, és a
   szomszéd nap gombja RÁFEDETT (a11y-fókusz-felmérés 2026-09-25, #9; WCAG 2.4.12, és fókusz
   nélkül is vizuális hiba). A `min-inline-size: 0` a napon ezt nem előzte meg, hanem engedte.

   Most: LEGFELJEBB hét oszlop (a `calc` a hetedét adja), de egy oszlop sosem keskenyebb a
   `--story-day-min`-nél — ha hét nem fér ki, a sáv magától kevesebb oszlopra törik, bármilyen
   szélességen, a 1024-es töréspont nélkül. A minimum `rem`-ben, hogy a böngésző betűméret-
   nagyításával együtt nőjön — pontosan úgy, ahogy a gomb felirata. */
.story-strip__grid[b-sw3neyloj6] {
    --story-day-min: 12rem;

    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(max(var(--story-day-min), calc((100% - 6 * var(--space-3)) / 7)), 1fr)
    );
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.story-strip__day[b-sw3neyloj6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-inline-size: 0;
    padding: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
}

.story-strip__day--rest[b-sw3neyloj6] {
    background-color: var(--color-surface-muted);
}

.story-strip__name[b-sw3neyloj6] {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.story-strip__ideas[b-sw3neyloj6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ⚠️ A kártya OSZLOP lett: a cím, a leírás, a jelölő és a visszajelzés egymás alatt áll. A
   `gap` nem kozmetika — a gomb és a felirat összeérve a tapintási cél összefolyna a szöveggel. */
.story-strip__idea[b-sw3neyloj6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.story-strip__idea-title[b-sw3neyloj6] {
    display: block;
    font: var(--text-sm);
    color: var(--color-text);
}

.story-strip__idea-description[b-sw3neyloj6] {
    display: block;
    font: var(--text-xs);
    color: var(--color-text-muted);
}

.story-strip__pause[b-sw3neyloj6] {
    margin: 0;
    font: var(--text-xs);
    color: var(--color-text-muted);
}

/* A megjelölt állapot jelölése. ⚠️ A `Badge` a SAJÁT scope-horgonyát viseli, tehát ide csak a
   BURKOLÓ span stílusa írható — a badge belsejét a `Badge.razor.css` birtokolja. */
.story-strip__done[b-sw3neyloj6] {
    display: inline-flex;
    align-items: center;
}

/* ⚠️ A KÉT MAGYARÁZÓ MONDAT a sáv alján. Halvány, de NEM eltüntetett: a visszavonás hiánya
   következmény, amit a felhasználónak a kattintás előtt látnia kell. */
.story-strip__note[b-sw3neyloj6] {
    margin: var(--space-3) 0 0;
    font: var(--text-xs);
    color: var(--color-text-muted);
}

/* ⚠️ SZÖVEG-tokennel, nem a dekoratív pinkkel: a `--cat-warning-text` feliratot hordoz, tehát
   kontraszt-kötelezett. A `#FF3EAA` kizárólag dekoratív kitöltés lehet. */
.story-strip__note--warn[b-sw3neyloj6] {
    margin-block-start: var(--space-1);
    color: var(--cat-warning-text);
}

/* ⚠️ A tapintási célméretről NEM ez a fájl gondoskodik, és ez SZÁNDÉKOS. A jelölő a `Button`
   komponens, aminek a saját stíluslapja `min-block-size: var(--size-touch-target)`-et ír elő —
   FELTÉTEL NÉLKÜL, nem csak `pointer: coarse` alatt. Egy ittani felülírás vagy hatástalan lenne
   (a `.button` a `Button` scope-horgonyát viseli, tehát `::deep` nélkül nem is illeszkedik), vagy
   egy MÁSODIK, elcsúszni képes másolatot hozna létre ugyanarra a szabályra. */

/* Mobilon lista — ugyanaz a szabály, mint a nap-kártyáknál. */
@media (max-width: 767.98px) {
    .story-strip__grid[b-sw3neyloj6] {
        grid-template-columns: minmax(0, 1fr);
    }

    .story-strip__day[b-sw3neyloj6] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-3);
    }
}
/* /Components/Content/ContentPlanBlockList.razor.rz.scp.css */
/* ContentPlanBlockList — a generált terv blokkjai. */

.plan-blocks[b-lu6yue8wty] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.plan-blocks__item[b-lu6yue8wty] {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

/* ⚠️ A sorszám FELIRAT a pink felületen, tehát --color-primary-strong (fehér szöveggel 5.75:1).
   A dekoratív #FF3EAA-n a fehér 3.22:1 — bukná az AA-t. */
.plan-blocks__marker[b-lu6yue8wty] {
    display: grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    font: var(--text-xs);
    color: var(--color-text-inverse);
    background-color: var(--color-primary-strong);
    border-radius: var(--radius-pill);
}

.plan-blocks__body[b-lu6yue8wty] {
    min-width: 0;
}

.plan-blocks__label[b-lu6yue8wty] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: baseline;
    margin: 0 0 var(--space-1);
    font: var(--text-h3);
    color: var(--color-text);
}

.plan-blocks__position[b-lu6yue8wty],
.plan-blocks__edited[b-lu6yue8wty] {
    font: var(--text-xs);
    color: var(--color-text-muted);
}

.plan-blocks__edited[b-lu6yue8wty] {
    padding: 0 var(--space-2);
    color: var(--cat-content-text);
    background-color: var(--cat-content-subtle);
    border-radius: var(--radius-pill);
}

.plan-blocks__text[b-lu6yue8wty] {
    margin: 0;
    font: var(--text-body);
    color: var(--color-text);
    white-space: pre-wrap;
}

.plan-blocks__missing[b-lu6yue8wty] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

/* A blokk szerkesztője — gombos mentés, nem autosave (l. a komponens fejlécét). */
.plan-blocks__editor[b-lu6yue8wty] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.plan-blocks__actions[b-lu6yue8wty] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

/* ⚠️ Zöld, mert ez az EGYETLEN visszaigazolás, hogy a szöveg a szerveren van. A pink itt
   félrevezető lenne: az a márka dekoratív színe, nem a sikeré. */
.plan-blocks__saved[b-lu6yue8wty] {
    margin: 0;
    font: var(--text-sm);
    color: var(--cat-success-text);
}
/* /Components/Content/ContentPlanRow.razor.rz.scp.css */
/* Egy „Terveim"-sor.

   ⚠️ SOR, nem kártya-rács — és ez a szerver lapméretével egy döntés: az ötletek kártyái rácsban
   állnak (24-es lap), a tervek egymás alatti sorokban (20-as lap), mert itt a felhasználó
   SCANNEL: állapot, cím, mikor volt. Rácsban ugyanez a három adat háromszor annyi képernyőt
   foglalna, és a legfrissebb terv is kicsúszna a hajtás alá.

   ⚠️ Reszponzív az elejétől: mobilon az akció a saját sorába kerül és teljes szélességű lesz —
   egy jobbra igazított gomb 360 px-en a címet két karakterre nyomná össze. */

.plan-row[b-z6esdkd6jn] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "top    top"
        "title  action"
        "note   action";
    gap: var(--space-2) var(--space-4);
    align-items: start;
    padding: var(--space-card);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.plan-row__top[b-z6esdkd6jn] {
    grid-area: top;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.plan-row__time[b-z6esdkd6jn] {
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.plan-row__title[b-z6esdkd6jn] {
    grid-area: title;
    margin: 0;
    font: var(--text-h3);
}

.plan-row__title a[b-z6esdkd6jn] {
    color: var(--color-text);
    text-decoration: none;
}

.plan-row__title a:hover[b-z6esdkd6jn],
.plan-row__title a:focus-visible[b-z6esdkd6jn] {
    text-decoration: underline;
}

.plan-row__note[b-z6esdkd6jn] {
    grid-area: note;
    margin: 0;
    font: var(--text-body);
    color: var(--color-text-muted);
}

.plan-row__action[b-z6esdkd6jn] {
    grid-area: action;
    align-self: center;
}

@media (max-width: 640px) {
    .plan-row[b-z6esdkd6jn] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "top"
            "title"
            "note"
            "action";
    }

    .plan-row__action[b-z6esdkd6jn] {
        justify-self: stretch;
    }
}
/* /Components/Content/IdeaBlockStepper.razor.rz.scp.css */
/* Függőleges, idősávos stepper. A számozott kör DEKORATÍV pink kitöltés fehér számmal — a
   sorrendet az `<ol>` hordozza, nem a szín. A szám kicsi és bold, tehát a WCAG „nagy szöveg"
   kivétele nem alkalmazható rá: a kör ezért a --color-primary-strong tokent kapja, amin a fehér
   5.75:1. */

.idea-stepper[b-jqqf0gmvd7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.idea-stepper__item[b-jqqf0gmvd7] {
    display: flex;
    gap: var(--space-3);
}

.idea-stepper__marker[b-jqqf0gmvd7] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 28px;
    block-size: 28px;
    font: var(--text-xs);
    color: var(--color-text-inverse);
    background-color: var(--color-primary-strong);
    border-radius: var(--radius-pill);
}

.idea-stepper__body[b-jqqf0gmvd7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: 0;
}

.idea-stepper__label[b-jqqf0gmvd7] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    font: var(--text-h3);
}

.idea-stepper__position[b-jqqf0gmvd7] {
    font: var(--text-xs);
    color: var(--color-text-muted);
    padding: var(--space-1) var(--space-2);
    background-color: var(--color-surface-muted);
    border-radius: var(--radius-pill);
}

.idea-stepper__example[b-jqqf0gmvd7] {
    margin: 0;
    padding-inline-start: var(--space-3);
    font: var(--text-body);
    color: var(--color-text);
    border-inline-start: 2px solid var(--color-primary);
}

.idea-stepper__guidance[b-jqqf0gmvd7] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}
/* /Components/Content/IdeaCard.razor.rz.scp.css */
/* Az Ötlettár lista-kártyája. Egységes magasság a rácsban: a kártya flex-oszlop, az akciósor
   `margin-block-start: auto`-val a talpra ül — enélkül a különböző hosszúságú leírások miatt a
   „Mentés" gombok sora fűrészfogas lenne. */

.idea-card[b-o4u27q6g79] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-card);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.idea-card__body[b-o4u27q6g79] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.idea-card__format[b-o4u27q6g79] {
    margin: 0;
}

.idea-card__title[b-o4u27q6g79] {
    margin: 0;
    font: var(--text-h3);
}

.idea-card__title a[b-o4u27q6g79] {
    color: var(--color-text);
    text-decoration: none;
}

.idea-card__title a:hover[b-o4u27q6g79],
.idea-card__title a:focus-visible[b-o4u27q6g79] {
    text-decoration: underline;
}

.idea-card__description[b-o4u27q6g79] {
    margin: 0;
    font: var(--text-body);
    color: var(--color-text-muted);
}

.idea-card__pillars[b-o4u27q6g79],
.idea-card__platforms[b-o4u27q6g79] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.idea-card__platform[b-o4u27q6g79] {
    font: var(--text-xs);
    color: var(--color-text-muted);
    padding: var(--space-1) var(--space-2);
    background-color: var(--color-surface-muted);
    border-radius: var(--radius-pill);
}

.idea-card__meta[b-o4u27q6g79] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: 0;
}

.idea-card__meta dt[b-o4u27q6g79] {
    font: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.idea-card__meta dd[b-o4u27q6g79] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text);
}

/* A pötty DEKORATÍV: a nehézség szövegesen is ott áll mellette. */
.idea-card__dot[b-o4u27q6g79] {
    display: inline-block;
    inline-size: 8px;
    block-size: 8px;
    margin-inline-end: var(--space-2);
    border-radius: var(--radius-pill);
    vertical-align: middle;
}

.idea-card__dot--easy[b-o4u27q6g79] {
    background-color: var(--cat-success-solid);
}

.idea-card__dot--medium[b-o4u27q6g79] {
    background-color: var(--cat-warning-solid);
}

.idea-card__dot--advanced[b-o4u27q6g79] {
    background-color: var(--cat-academy-solid);
}

.idea-card__actions[b-o4u27q6g79] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-3);
    margin-block-start: auto;
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--color-border);
}
/* /Components/Content/IdeaFilterBar.razor.rz.scp.css */
/* Az Ötlettár szűrősávja. Mobilon a legördülők egymás alá kerülnek — öt kontroll egy sorban
   360 px-en olvashatatlanul összenyomódna. */

.idea-filters[b-zfelx0o545] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    background-color: var(--color-surface-muted);
    border-radius: var(--radius-card);
}

.idea-filters__row[b-zfelx0o545] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.idea-filters__field[b-zfelx0o545] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: 180px;
}

.idea-filters__field label[b-zfelx0o545],
.idea-filters__search label[b-zfelx0o545] {
    font: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.idea-filters select[b-zfelx0o545],
.idea-filters input[type="search"][b-zfelx0o545] {
    min-block-size: var(--size-touch-target);
    padding: var(--space-2) var(--space-3);
    font: var(--text-body);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
}

.idea-filters__missing[b-zfelx0o545] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.idea-filters__check[b-zfelx0o545] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-end;
    min-block-size: var(--size-touch-target);
}

.idea-filters__check label[b-zfelx0o545] {
    font: var(--text-body);
    color: var(--color-text);
    text-transform: none;
    letter-spacing: normal;
}

.idea-filters__check input[b-zfelx0o545] {
    inline-size: 20px;
    block-size: 20px;
}

.idea-filters__search[b-zfelx0o545] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2);
}

.idea-filters__search label[b-zfelx0o545] {
    flex: 1 0 100%;
}

.idea-filters__search input[b-zfelx0o545] {
    flex: 1 1 240px;
}

.idea-filters__active[b-zfelx0o545] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.idea-filters__active-label[b-zfelx0o545] {
    margin: 0;
    font: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.idea-filters__chips[b-zfelx0o545] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A chip a leggyakoribb érintési célméret-sértő a rendszerben — kimondottan 44 px. */
.idea-filters__chip[b-zfelx0o545] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--size-touch-target);
    padding: var(--space-1) var(--space-3);
    font: var(--text-sm);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.idea-filters__chip:hover[b-zfelx0o545] {
    background-color: var(--color-border);
}

.idea-filters__chip-x[b-zfelx0o545] {
    font-size: var(--size-icon-md);
    line-height: 1;
}

@media (max-width: 767.98px) {
    .idea-filters__field[b-zfelx0o545] {
        flex: 1 1 100%;
    }
}
/* /Components/Content/IdeaFormatTabs.razor.rz.scp.css */
/* Kategória-fülek. Mobilon vízszintesen görgethető sáv `scroll-snap`-pel — hét fül 360 px-en
   nem fér el, és a becsomagolt, kétsoros fülsor a lista tetejét tolná le. */

/* ⚠️⚠️ A FÜLSOR GÖRGETŐ TÁROLÓ, TEHÁT LEVÁG — a fókuszgyűrűt is. Az `overflow-x: auto` a
   függőleges túlcsordulást is levágja (a CSS a másik tengelyt `auto`-ra kényszeríti), a gyűrű
   pedig 4 px-rel az elemen KÍVÜL áll (`outline-offset` + `outline`, ill. a `box-shadow`). A
   fülek eddig a tároló bal és felső élén álltak: az aktív „Összes" fül gyűrűjének felső és bal
   oldala hiányzott (mérve: 266/507 px ≥ 3:1 — WEAK; fókusz-audit, utómérés). A belső párna a
   gyűrűnek ad helyet; a negatív margó ugyanennyit vesz vissza, így a fülek a helyükön maradnak.
   (A `scroll-padding` itt nem elég: az csak a görgetés célpontját tolja beljebb, a tároló
   szélén álló első fül ELŐTT nincs mit görgetni.) */
.idea-tabs[b-c8dscqt8ub] {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding: var(--space-2);
    margin-block-start: calc(-1 * var(--space-1));
    margin-inline: calc(-1 * var(--space-1));
    padding: var(--space-1) var(--space-1) var(--space-1);
    border-block-end: 1px solid var(--color-border);
}

.idea-tabs__tab[b-c8dscqt8ub] {
    flex: 0 0 auto;
    scroll-snap-align: start;

    /* WCAG 2.5.5 — érintési célméret. */
    min-block-size: var(--size-touch-target);
    padding: var(--space-2) var(--space-4);

    font: var(--text-sm);
    color: var(--color-text-muted);
    background: none;
    border: 0;
    border-block-end: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.idea-tabs__tab:hover[b-c8dscqt8ub] {
    color: var(--color-text);
}

/* Az aktív fül aláhúzása DEKORATÍV pink; a felirat a szöveg-token pinkjét kapja, mert a
   #FF3EAA fehéren 3.10:1 — normál méretű felirathoz kevés. */
.idea-tabs__tab--active[b-c8dscqt8ub] {
    color: var(--color-primary-text);
    font-weight: 600;
    border-block-end-color: var(--color-primary);
}
/* /Components/Content/PlanScript.razor.rz.scp.css */
/*
    A forgatási script TIPOGRÁFIÁJA ÉS TÉRKÖZE — színt ez a fájl NEM deklarál.

    ⚠️⚠️ A SZÍN-TILALOM ITT SZERKEZETI, NEM STÍLUS-KÉRDÉS. A `DesignSurfaceContrastGate`
    kimondott rése az, hogy egy szövegszín olyan szabályban, ami maga nem deklarál hátteret, nem
    mérhető a hordozó felülethez: CSS-ből statikusan nem eldönthető, min áll. Ennek a nézetnek
    KÉT hordozó felülete van — képernyőn a sötét (`--color-sidebar`), papíron a FEHÉR —, tehát itt
    a rés nem elméleti, hanem a nézet lényege. Ezért minden szín EGY fájlban,
    a `PlanScriptPage.razor.css`-ben él, ahol a szűkített nyomtatási teszt
    (`PlanScriptContrastTests`) mindkét médiumon végig tudja mérni. Egy `color:` ebbe a fájlba
    írva nem apró következetlenség: az a kapu megvakítása — és a teszt ezért mondja ki pirosan.

    ⚠️ A BETŰMÉRET NEM TOKENBŐL JÖN, és ez mért hiány, nem hanyagság. A legnagyobb tipográfia-token
    a `--text-display` (32/40, kis képernyőn 26/34) — az ASZTALI címsorok mérete. Ez a nézet
    kartávolságból, állványra tett telefonról, forgatás közben olvasandó; a design-system saját
    szava rá a „nagy betű". A globális token-készlet bővítése egyetlen nézet kedvéért a
    token-réteget hígítaná (a `--text-*` skála a hat modul KÖZÖS tipográfiája), ezért a skála itt
    HELYI, a `--font-sans`-ból építve — ugyanúgy egyetlen médium saját skálája, mint egy
    nyomtatási stíluslap.
*/

.script[b-l9ky7vk82f] {
    /* Helyi skála — l. a fájl fejlécének magyarázatát. */
    --script-text: 1.75rem;
    --script-line: 2.5rem;

    /*
        ⚠️ A GÖRGETŐ NEM ITT VAN, hanem a lap `.script-shell`-jén — mert a művelet-sávnak is bele
        kell esnie. Két görgető (a váz és ez a cikk) egymásba tolva két görgetősávot adna
        telefonon, és a felhasználó a felvétel közben nem tudná, melyiket fogta meg. A blokkok
        `scroll-snap-align`-ja a legközelebbi görgető ősre hat — az a váz.
    */
    display: block;
    padding: var(--space-6) var(--space-5) var(--space-8);
    font: var(--text-body);
}

.script__head[b-l9ky7vk82f] {
    margin-block-end: var(--space-7);
}

.script__title[b-l9ky7vk82f] {
    font: var(--text-display);
}

.script__meta[b-l9ky7vk82f] {
    margin: var(--space-2) 0 0;
    font: var(--text-sm);
}

.script__blocks[b-l9ky7vk82f] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.script__block[b-l9ky7vk82f] {
    /*
        Egy blokk — egy képernyő. A `min-block-size` a görgető magasságához mér, tehát a blokk
        akkor is kitölti a kijelzőt, ha rövid: forgatás közben a következő blokk NEM kandikálhat
        be alulról, mert az elvinné a szemet a mondat közepéről.
    */
    min-block-size: 100dvh;
    scroll-snap-align: start;
    padding-block: var(--space-6);
}

.script__label[b-l9ky7vk82f] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
    margin-block-end: var(--space-5);
    font: var(--text-h2);
}

.script__ordinal[b-l9ky7vk82f] {
    font: var(--text-h1);
}

.script__position[b-l9ky7vk82f] {
    font: var(--text-sm);
}

.script__text[b-l9ky7vk82f] {
    margin: 0;
    /* ⚠️ Itt a nagy betű: EZT mondja ki a felhasználó a kamerába. */
    font-family: var(--font-sans);
    font-size: var(--script-text);
    font-weight: 400;
    line-height: var(--script-line);
}

.script__missing[b-l9ky7vk82f] {
    margin: 0;
    font: var(--text-body);
}

.script__tail[b-l9ky7vk82f] {
    margin-block-start: var(--space-7);
    padding-block-start: var(--space-5);
}

.script__tail-title[b-l9ky7vk82f] {
    margin-block-end: var(--space-3);
    font: var(--text-h3);
}

.script__tail .script__text[b-l9ky7vk82f] {
    /* A kiposztolási blokkok nem a kamerába mondandók — a script-méret itt zajt adna. */
    font: var(--text-body);
}

.script__tags[b-l9ky7vk82f] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font: var(--text-body);
}

/*
    ── Nyomtatás — ugyanaz az adat, más médium ──────────────────────────────────

    ⚠️ A BLOKK-MAGASSÁG FELOLDÁSA A LEGFONTOSABB SOR. Képernyőn minden blokk legalább egy
    kijelzőnyi (`min-block-size: 100dvh`); papíron ez blokkonként EGY oldalt jelentene, vagyis egy
    hatblokkos tervből hat majdnem üres lapot. A görgető feloldása a lap dolga
    (`PlanScriptPage.razor.css`) — ott van a `.script-shell`.
*/
@media print {
    .script[b-l9ky7vk82f] {
        padding: 0;
    }

    .script__block[b-l9ky7vk82f] {
        /* Egy blokk NE törjön ketté két oldal között — a design-system nyomtatási szabálya. */
        min-block-size: 0;
        break-inside: avoid;
        padding-block: var(--space-4);
        scroll-snap-align: none;
    }

    .script__text[b-l9ky7vk82f] {
        /* Papíron a kartávolság-méret oldalakat pazarolna; a törzsszöveg elég. */
        font: var(--text-body);
    }

    .script__tail[b-l9ky7vk82f] {
        break-inside: avoid;
        margin-block-start: var(--space-5);
    }
}
/* /Components/Content/RecommendationCard.razor.rz.scp.css */
.recommendation[b-73hq5rvq3r] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
}

.recommendation__head[b-73hq5rvq3r] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

/* ⚠️ A HELYEZÉS SZÁM, nem szín-kód: a rangsor jelentése nem múlhat azon, hogy a felhasználó
   megkülönböztet-e két pinket. A pink itt dekoratív keret-kitöltés, a szám a `--color-text`-en
   marad — a pink FELIRAT fehéren 3,22:1, tehát normál szöveghez nem elég. */
.recommendation__rank[b-73hq5rvq3r] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--cat-brand-subtle);
    font: var(--text-h3);
    color: var(--color-text);
}

.recommendation__title[b-73hq5rvq3r] {
    margin: 0;
    font: var(--text-h3);
    color: var(--color-text);
}

.recommendation__pillars[b-73hq5rvq3r] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.recommendation__justification[b-73hq5rvq3r] {
    margin: 0;
    font: var(--text-body);
    color: var(--color-text);
}

/* A pillanatkép-sáv: idő · nehézség balra, platformok a sor végén (a rajz szerint). Keskeny
   kártyán a flex-wrap alá tördeli a platformokat — vízszintes görgetés nincs. */
.recommendation__meta[b-73hq5rvq3r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin: 0;

    /* ⚠️ A HIERARCHIA: az indoklás a döntés alapja, a sáv csak kiegészítő tény. A sáv ezért
       kisebb (`--text-sm`/`-xs`), halványabb (`--color-text-muted`), és a rajz szerint egy
       LÉGRÉS választja le az indoklásról (elválasztó vonal a rajzon nincs): a kártya közös
       `gap`-je mellett a sáv az indoklás folytatásának, egy ötödik sorának látszana. */
    margin-block-start: var(--space-2);
}

.recommendation__fact dd[b-73hq5rvq3r] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.recommendation__fact--platforms[b-73hq5rvq3r] {
    margin-inline-start: auto;
}

/* ⚠️ Keskeny nézetben a platformok BALRA kerülnek. A `margin-inline-start: auto` a tördelt,
   önálló sorban a jobb szélre lökné a pill-eket — a szem balról olvas, és a jobbra úszó,
   magányos sor a kártyától leváltnak, sőt egy külön vezérlőnek látszik. A töréspont a
   `--bp-md` (768 px, itt vált a bal menü drawerré): alatta a kártya a teljes szélesség. */
@media (max-width: 767.98px) {
    .recommendation__fact--platforms[b-73hq5rvq3r] {
        margin-inline-start: 0;
    }
}

.recommendation__platforms[b-73hq5rvq3r] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.recommendation__platform[b-73hq5rvq3r] {
    font: var(--text-xs);
    color: var(--color-text-muted);
    padding: var(--space-1) var(--space-2);
    background-color: var(--color-surface-muted);
    border-radius: var(--radius-pill);
}

.recommendation__open[b-73hq5rvq3r] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font: var(--text-sm);
    color: var(--color-primary-text);
}

@media (pointer: coarse) {
    .recommendation__open[b-73hq5rvq3r] {
        min-height: var(--size-touch-target);
    }
}
/* /Components/Content/RecommendationHistoryRow.razor.rz.scp.css */
/* Egy „Előzmények"-sor.

   ⚠️ SOR, nem kártya-rács — ugyanaz a döntés, mint a „Terveim"-nél, és ugyanabból az okból: itt a
   felhasználó SCANNEL (mikor kérte · mire · mi lett belőle). Rácsban ugyanez a négy adat
   háromszor annyi képernyőt foglalna, és a legfrissebb kérés kicsúszna a hajtás alá.

   ⚠️ Reszponzív az elejétől: mobilon az akció a saját sorába kerül és teljes szélességű lesz —
   egy jobbra igazított gomb 360 px-en a helyzet nevét két karakterre nyomná össze.

   ⚠️ NINCS ITT `pointer: coarse` szabály a tapintási célméretre, és ez nem kimaradás: a sor
   egyetlen vezérlője a `Button`, aminek a SAJÁT stíluslapja a 44 px-es célméretet feltétel
   nélkül előírja. Ide másolva a szabály `::deep` nélkül a gyerekkomponens gyökerére nem is
   illeszkedne — néma, hatástalan sor lenne. */

.history-row[b-bypf2cdcdp] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "top     top"
        "title   action"
        "topic   action"
        "outcome action";
    gap: var(--space-2) var(--space-4);
    align-items: start;
    padding: var(--space-card);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.history-row__top[b-bypf2cdcdp] {
    grid-area: top;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.history-row__time[b-bypf2cdcdp] {
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.history-row__title[b-bypf2cdcdp] {
    grid-area: title;
    margin: 0;
    font: var(--text-h3);
}

.history-row__title a[b-bypf2cdcdp] {
    color: var(--color-text);
    text-decoration: none;
}

.history-row__title a:hover[b-bypf2cdcdp],
.history-row__title a:focus-visible[b-bypf2cdcdp] {
    text-decoration: underline;
}

.history-row__topic[b-bypf2cdcdp] {
    grid-area: topic;
    margin: 0;
    font: var(--text-body);
    color: var(--color-text-muted);
}

/* ⚠️ „Mi lett belőle" — a sor egyetlen kimenet-állítása, ezért kap saját, erősebb szövegszínt a
   témánál. A színe NEM hordoz jelentést: az állapotot a jelvény mondja meg, felirattal. */
.history-row__outcome[b-bypf2cdcdp] {
    grid-area: outcome;
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text);
}

.history-row__action[b-bypf2cdcdp] {
    grid-area: action;
    align-self: center;
}

@media (max-width: 640px) {
    .history-row[b-bypf2cdcdp] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "top"
            "title"
            "topic"
            "outcome"
            "action";
    }

    .history-row__action[b-bypf2cdcdp] {
        justify-self: stretch;
    }
}
/* /Components/Content/RecommendationReasoningPanel.razor.rz.scp.css */
.reasoning__summary[b-fefd4vn8co] {
    margin: 0 0 var(--space-4);
    font: var(--text-body);
    color: var(--color-text);
}

.reasoning__heading[b-fefd4vn8co] {
    margin: 0 0 var(--space-2);
    font: var(--text-h3);
    color: var(--color-text);
}

.reasoning__points[b-fefd4vn8co] {
    margin: 0;
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font: var(--text-sm);
    color: var(--color-text-muted);
}

/* ⚠️ AZ ELSŐ SOR KIEMELVE, mert az mondja ki a megszorítást (a helyzet nem szűkítette a
   jelöltek körét). A kiemelés a SÚLY és a szövegszín — nem szín-kód, tehát a jelentés nem
   veszik el se monokróm nyomtatásban, se színvakság mellett. */
.reasoning__points > li:first-child[b-fefd4vn8co] {
    font-weight: 600;
    color: var(--color-text);
}
/* /Components/Content/SaveIdeaButton.razor.rz.scp.css */
/* A mentés-gomb. A könyvjelző-ikon dekoratív pink kitöltést kap — a FELIRAT sosem pink. */

.save-idea[b-84i8qw8c7u] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-inline-size: 0;
}

.save-idea__button[b-84i8qw8c7u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    /* WCAG 2.5.5 — a pill-formájú akciók a leggyakoribb sértők. */
    min-block-size: var(--size-touch-target);
    padding: var(--space-2) var(--space-4);

    font: var(--text-sm);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    cursor: pointer;
}

.save-idea__button:hover[b-84i8qw8c7u] {
    background-color: var(--color-surface-muted);
}

/* Bekapcsolt állapot: halvány pink FELÜLET, sötét felirattal. A #FF3EAA csak az ikonon jelenik
   meg — feliratot hordozó pink felület kizárólag a --color-primary-strong lehetne. */
.save-idea__button--on[b-84i8qw8c7u] {
    background-color: var(--color-primary-subtle);
    border-color: var(--color-primary-strong);
}

.save-idea__icon[b-84i8qw8c7u] {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/*
 * ⚠️ SZÁNDÉKOSAN `color:`, NEM `stroke:`. Az ikon `stroke="currentColor"`-t visz, tehát a
 * színt a SZÜLŐ szövegszínéből veszi — és a Blazor scoped CSS a lap SAJÁT jelöléséhez tapad:
 * egy `.save-idea__icon svg { stroke: … }` szabályból `svg[b-hash]` lenne, ami a gyerek
 * komponens SVG-jére nem illeszkedik. A `--color-primary-text` amúgy is a SZÖVEG-token
 * (#B01268), nem a dekoratív #FF3EAA, tehát a `DesignSurfaceContrastGate` szabályát nem sérti.
 */
.save-idea__button--on .save-idea__icon[b-84i8qw8c7u] {
    color: var(--color-primary-text);
}

.save-idea__label[b-84i8qw8c7u] {
    white-space: nowrap;
}

.save-idea__button[aria-busy="true"][b-84i8qw8c7u] {
    cursor: progress;
}
/* /Components/Content/SituationChoiceGroup.razor.rz.scp.css */
/* Az üzleti helyzet kártyás választója.

   ⚠️ Saját `.situation*` névtér, NEM a `.choice-card`. A `ChoiceCardGroup` stíluslapja a SAJÁT
   jelöléséhez tapad (`[b-hash]`), tehát az osztálynevét innen újrahasználva a szabályok
   `::deep` nélkül SOHA nem illeszkednének — se fordítási hiba, se futásidejű jel. */

.situations[b-34ka4mhudv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-3);
}

.situation[b-34ka4mhudv] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    cursor: pointer;
}

/* ⚠️ A tapintási célméret a MUTATÓRA van kötve, nem a viewportra: egy touch-képes laptop
   szélesen is ujjal kap kattintást. A kártya rendesen ennél magasabb — a szabály a szűk
   szöveges sorra (rövid név + rövid leírás) tartalék. */
@media (pointer: coarse) {
    .situation[b-34ka4mhudv] {
        min-height: var(--size-touch-target);
    }
}

.situation:hover[b-34ka4mhudv] {
    border-color: var(--color-text-muted);
}

.situation.is-selected[b-34ka4mhudv] {
    /* ⚠️ A pink itt KERET és HÁTTÉR — dekoratív felület, nem felirat. A kártya szövege
       a normál `--color-text`-en marad. */
    border-color: var(--color-primary-strong);
    background-color: var(--cat-brand-subtle);
}

/* A natív rádiógomb marad a fókusz- és a billentyűzet-kezelés hordozója; csak a rajzát vesszük
   ki, a méretét és a fókuszgyűrűjét nem. */
.situation__input[b-34ka4mhudv] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.situation:has(.situation__input:focus-visible)[b-34ka4mhudv] {
    box-shadow: 0 0 0 2px var(--focus-ring-inner);
    outline: 2px solid var(--focus-ring-outer);
    outline-offset: 2px;
}

.situation__body[b-34ka4mhudv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1 1 auto;
}

.situation__name[b-34ka4mhudv] {
    font: var(--text-h3);
    color: var(--color-text);
}

.situation__description[b-34ka4mhudv] {
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.situation__check[b-34ka4mhudv] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-icon-md);
    height: var(--size-icon-md);

    /* ⚠️⚠️ SZÁNDÉKOSAN `color:`, NEM `stroke:` — és ez MÉRT különbség, nem ízlés. Az `Icon`
       `stroke="currentColor"` PREZENTÁCIÓS ATTRIBÚTUMOT visel a saját `svg`-jén; egy szülőről
       öröklődő `stroke` ennél gyengébb, tehát hatástalan volna. A scoped CSS ráadásul egy
       `.situation__check svg { stroke: … }` szabályból `svg[b-hash]`-t csinálna, ami a GYEREK
       komponens jelölésére `::deep` nélkül soha nem illeszkedik. A `color:` viszont öröklődik,
       és a `currentColor`-on át talál célba. Ugyanaz a döntés, amit a `SaveIdeaButton` már
       kimond. */
    color: var(--color-primary-strong);
}
/* /Components/Dashboard/HowItWorksPanel.razor.rz.scp.css */
/* „Így működik" — négy lépés, vízszintesen, mobilon egymás alá.

   A kategória-szín KIZÁRÓLAG a dekoratív körön és a lépés szegélyén jelenik meg; a feliratok a
   `-text` tokenből kapnak színt, mert a `-solid` a világosszürkén 3:1 alatt van (l. tokens.css). */

.how-it-works[b-xnx4brmgqx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.how-it-works__step[b-xnx4brmgqx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-inline-start: var(--space-4);
    border-inline-start: 2px solid var(--color-border);
}

.how-it-works__title[b-xnx4brmgqx] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    font: var(--text-h3);
}

.how-it-works__mark[b-xnx4brmgqx] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 36px;
    block-size: 36px;
    border-radius: var(--radius-pill);
    background-color: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.how-it-works__step--brand[b-xnx4brmgqx] {
    border-inline-start-color: var(--cat-brand-solid);
}

.how-it-works__step--brand .how-it-works__mark[b-xnx4brmgqx] {
    background-color: var(--cat-brand-subtle);
    color: var(--cat-brand-text);
}

.how-it-works__step--brand .how-it-works__title[b-xnx4brmgqx] {
    color: var(--cat-brand-text);
}

.how-it-works__step--content[b-xnx4brmgqx] {
    border-inline-start-color: var(--cat-content-solid);
}

.how-it-works__step--content .how-it-works__mark[b-xnx4brmgqx] {
    background-color: var(--cat-content-subtle);
    color: var(--cat-content-text);
}

.how-it-works__step--content .how-it-works__title[b-xnx4brmgqx] {
    color: var(--cat-content-text);
}

.how-it-works__step--academy[b-xnx4brmgqx] {
    border-inline-start-color: var(--cat-academy-solid);
}

.how-it-works__step--academy .how-it-works__mark[b-xnx4brmgqx] {
    background-color: var(--cat-academy-subtle);
    color: var(--cat-academy-text);
}

.how-it-works__step--academy .how-it-works__title[b-xnx4brmgqx] {
    color: var(--cat-academy-text);
}

.how-it-works__step--community[b-xnx4brmgqx] {
    border-inline-start-color: var(--cat-community-solid);
}

.how-it-works__step--community .how-it-works__mark[b-xnx4brmgqx] {
    background-color: var(--cat-community-subtle);
    color: var(--cat-community-text);
}

.how-it-works__step--community .how-it-works__title[b-xnx4brmgqx] {
    color: var(--cat-community-text);
}

.how-it-works__lead[b-xnx4brmgqx] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.how-it-works__items[b-xnx4brmgqx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0 0 auto;
    padding-inline-start: var(--space-4);
    font: var(--text-sm);
}

.how-it-works__soon[b-xnx4brmgqx] {
    display: inline-flex;
}

/* A magyarázatot viselő elem: a NÉV a horgony, a fél mondat halkabb.
   ⚠️ A halkítás a --color-text-muted (#666666), ami a fehéren 5,74 és a világosszürkén 5,26 —
   mindkét alapfelületen megfelel. A `DesignSurfaceContrastGate` ezt kiszámolja, nem a token nevéből hiszi el. */
.how-it-works__item-name[b-xnx4brmgqx] {
    font-weight: 600;
}

.how-it-works__item-note[b-xnx4brmgqx] {
    color: var(--color-text-muted);
}
/* /Components/Dashboard/TodayTaskCard.razor.rz.scp.css */
/* „A mai feladat" — kör + törzs, mobilon egymás alá. */

.today-task[b-lksdashzhw] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
}

.today-task__body[b-lksdashzhw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-inline-size: 0;
}

/* ⚠️ A cím FLEX-sor, mert a 7. sorban („Ma megcsináltad") ikon áll a szöveg mellett — a pipa
   IKON, nem glifa, és így igazodik a betűképhez. */
.today-task__title[b-lksdashzhw] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font: var(--text-h3);
}

/* ── A sor-specifikus törzs-elemek ─────────────────────────────────────────── */

.today-task__idea-label[b-lksdashzhw] {
    margin: var(--space-3) 0 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.today-task__idea[b-lksdashzhw] {
    margin: var(--space-1) 0 0;
    font: var(--text-h3);
    color: var(--color-text);
}

.today-task__justification[b-lksdashzhw] {
    margin: var(--space-2) 0 0;
    max-inline-size: 60ch;
    font: var(--text-body);
    color: var(--color-text-muted);
}

/* Az ár és a kimondott hiány: halkabb, de NEM rejtett — mindkettő a döntéshez kell. */
.today-task__price[b-lksdashzhw],
.today-task__note[b-lksdashzhw] {
    margin: var(--space-3) 0 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.today-task__stories[b-lksdashzhw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

.today-task__story-title[b-lksdashzhw] {
    display: block;
    font: var(--text-h3);
    color: var(--color-text);
}

.today-task__story-body[b-lksdashzhw] {
    display: block;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.today-task__lead[b-lksdashzhw] {
    margin: 0;
    max-inline-size: 60ch;
    font: var(--text-body);
    color: var(--color-text-muted);
}

.today-task__missing[b-lksdashzhw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    font: var(--text-sm);
}

.today-task__actions[b-lksdashzhw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Mobilon a kör a törzs FÖLÉ kerül: 96 px kör mellett a szövegre ~180 px maradna. */
@media (max-width: 767.98px) {
    .today-task[b-lksdashzhw] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Dashboard/UserStatsPanel.razor.rz.scp.css */
.user-stats[b-t0ti60k0ah] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* auto-fit: két csempe egymás mellett, mobilon egymás alá — töréspont nélkül. */
.user-stats__tiles[b-t0ti60k0ah] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
}

.user-stats__meta[b-t0ti60k0ah] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.user-stats__as-of[b-t0ti60k0ah] {
    display: block;
}
/* /Components/Forms/CharacterCounter.razor.rz.scp.css */
/*
   A számláló a mező JOBB alsó sarkában áll — a képernyőterv így rajzolja
   (`docs/input/2 márka/6szolgáltatások/szolgáltatás-bemutatása.png`: „34 / 100", „139 / 500").

   ⚠️ Az `align-self` a SZÜLŐ flex-oszlopára támaszkodik (a hívó `.counted-text` burka). Az a
   szabály a hívónál marad: a burok a hívó jelölése, ez az elem az enyém.
*/

.char-counter[b-tse0211wnw] {
    margin: 0;
    align-self: flex-end;
    font: var(--text-xs);
    color: var(--color-text-muted);
}

/* ⚠️ A túllépés nem csak SZÍNNEL van kódolva: a felirat mellé „így nem menthető, rövidítsd"
   szöveg kerül. Szín-vak felhasználónak a piros önmagában semmit nem mondana. */
.char-counter.is-limit[b-tse0211wnw] {
    color: var(--color-danger-text);
}
/* /Components/Forms/ChoiceCardGroup.razor.rz.scp.css */
.choice-group[b-18h06e6b6h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.choice-group__cards[b-18h06e6b6h] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
}

.choice-card[b-18h06e6b6h] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: var(--size-touch-target);
    padding: var(--space-3);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    cursor: pointer;
}

/* Kiválasztva: pink szegély + halvány pink háttér + pipa. A pipa nem elhagyható — az
   információ soha nem lehet kizárólag színnel kódolva. */
.choice-card.is-selected[b-18h06e6b6h] {
    border-color: var(--color-primary-strong);
    background-color: var(--color-primary-subtle);
}

/* A natív kontroll a helyén marad (fókusz, billentyűzet, képernyőolvasó), csak kicsi. */
.choice-card__input[b-18h06e6b6h] {
    flex: 0 0 auto;
    inline-size: 18px;
    block-size: 18px;
    accent-color: var(--color-primary-strong);
}

.choice-card:has(.choice-card__input:focus-visible)[b-18h06e6b6h] {
    outline: var(--focus-ring-width) solid var(--focus-ring-outer);
    outline-offset: var(--focus-ring-offset);
    box-shadow: 0 0 0 calc(var(--focus-ring-width) * 2) var(--focus-ring-inner);
}

.choice-card__body[b-18h06e6b6h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: 0;
}

.choice-card__label[b-18h06e6b6h] {
    font: var(--text-body);
}

.choice-card__description[b-18h06e6b6h] {
    font: var(--text-xs);
    color: var(--color-text-muted);
}

.choice-card__check[b-18h06e6b6h] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin-inline-start: auto;
    color: var(--cat-brand-text);
}

.choice-group__meta[b-18h06e6b6h] {
    margin: 0;
    font: var(--text-xs);
    color: var(--color-text-muted);
}

.choice-group__meta .is-limit[b-18h06e6b6h] {
    color: var(--color-danger-text);
}

.choice-group__notice[b-18h06e6b6h] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-danger-text);
}
/* /Components/Forms/FormField.razor.rz.scp.css */
.form-field[b-31t8aicf27] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-field__label[b-31t8aicf27] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    font: var(--text-h3);
}

/* A csillag jelentése „az AI-tervhez kell" — a látható szín piros, de a kísérő
   képernyőolvasó-szöveg pontosít, mert a mentést semmi nem blokkolja. */
.form-field__gate[b-31t8aicf27] {
    color: var(--color-danger-text);
}

.form-field__help[b-31t8aicf27] {
    margin: 0;
    max-inline-size: 68ch;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

/* A benne ülő kontrollok közös alakja — enélkül minden oldal újra leírná. */
.form-field[b-31t8aicf27]  input[type="text"],
.form-field[b-31t8aicf27]  input[type="email"],
.form-field[b-31t8aicf27]  input[type="url"],
.form-field[b-31t8aicf27]  input[type="number"],
.form-field[b-31t8aicf27]  select,
.form-field[b-31t8aicf27]  textarea {
    inline-size: 100%;
    min-block-size: var(--size-touch-target);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--text-body);
}

.form-field[b-31t8aicf27]  textarea {
    resize: vertical;
}

.form-field[b-31t8aicf27]  [aria-invalid="true"] {
    border-color: var(--color-danger);
}
/* /Components/Forms/OneTimeCodeInput.razor.rz.scp.css */
/*
    A kódmező. Monospace és ritkított: a kód számjegyenkénti ellenőrzése (a telefon képernyőjével
    összevetve) a leggyakoribb mozdulat ezen a mezőn.
*/

.otc[b-jyprgoc4ni] {
    inline-size: min(240px, 100%);
    min-block-size: var(--size-touch-target);
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.125rem;
    letter-spacing: 0.15em;
}

/* A helyreállító kód hosszabb (`XXXXX-XXXXX`), és betűt is tartalmaz. */
.otc--recovery[b-jyprgoc4ni] {
    inline-size: min(320px, 100%);
    letter-spacing: 0.08em;
}

.otc[aria-invalid="true"][b-jyprgoc4ni] {
    border-color: var(--color-danger-text);
}
/* /Components/Forms/PasswordInput.razor.rz.scp.css */
.password-input[b-8hu8ky8wij] {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
}

.password-input input[b-8hu8ky8wij] {
    flex: 1 1 auto;
    /* A jelszó minimum 44px magas: a mobil érintés-célpont mérete nem opcionális. */
    min-block-size: var(--size-touch-target);
    min-inline-size: 0;
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    font: var(--text-body);
}

.password-input__toggle[b-8hu8ky8wij] {
    flex: 0 0 auto;
    min-inline-size: var(--size-touch-target);
    min-block-size: var(--size-touch-target);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    cursor: pointer;
    font: var(--text-body);
}

.password-input__toggle[aria-pressed="true"][b-8hu8ky8wij] {
    background-color: var(--color-primary-subtle);
    border-color: var(--color-primary-strong);
}
/* /Components/Forms/SearchableMultiSelect.razor.rz.scp.css */
/*
    SearchableMultiSelect — a Márka alapok „Iparág" és a Tartalompreferenciák „Kedvenc
    tartalompillérek" mezője (docs/input/2 márka/2márka alapok/alapadatok.png).

    ⚠️ A pill FELIRATA --cat-brand-text (#B01268) a --cat-brand-subtle (#FFEBF5) hátteren:
    5.84:1. A #FF3EAA itt sehol nem szöveg és nem hordoz feliratot — ugyanaz a szabály, mint a
    TagInputnál.
*/

.multi-select[b-yvnbu16sfo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font: var(--text-body);
    color: var(--color-text);
}

.multi-select__pills[b-yvnbu16sfo] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.multi-select__pill[b-yvnbu16sfo] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding-block: var(--space-1);
    padding-inline: var(--space-3) var(--space-2);
    background-color: var(--cat-brand-subtle);
    color: var(--cat-brand-text);
    border-radius: var(--radius-pill);
    font: var(--text-sm);
    max-inline-size: 100%;
}

.multi-select__pill-text[b-yvnbu16sfo] {
    overflow-wrap: anywhere;
}

/* A visszavont sor NEM tűnik el és nem is halványul olvashatatlanra: a szürke felület jelzi,
   hogy már nem választható, a felirat viszont teljes kontrasztú marad. */
.multi-select__pill--revoked[b-yvnbu16sfo] {
    background-color: var(--color-surface-muted);
    color: var(--color-text);
}

.multi-select__revoked[b-yvnbu16sfo] {
    font: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: lowercase;
}

.multi-select__remove[b-yvnbu16sfo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--size-icon-lg);
    block-size: var(--size-icon-lg);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: inherit;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.multi-select__remove:hover[b-yvnbu16sfo] {
    background-color: rgb(17 17 17 / .08);
}

.multi-select__search[b-yvnbu16sfo] {
    min-block-size: var(--size-touch-target);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-surface);
    /* Nem --color-border: az #EAEAEA fehéren 1.20, és egy interaktív kontroll egyetlen
       határaként az WCAG 1.4.11 sértés. */
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    font: var(--text-body);
    color: var(--color-text);
}

.multi-select__search[b-yvnbu16sfo]::placeholder {
    color: var(--color-text-muted);
}

.multi-select__meta[b-yvnbu16sfo] {
    display: flex;
    gap: var(--space-3);
    margin: 0;
    font: var(--text-xs);
    color: var(--color-text-muted);
}

.multi-select__meta .is-limit[b-yvnbu16sfo] {
    color: var(--color-danger-text);
}

.multi-select__notice[b-yvnbu16sfo] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-danger-text);
}

.multi-select__empty[b-yvnbu16sfo] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

/* A találati lista görgethető: néhány tucat sor teljes hosszban kitolná az űrlap többi mezőjét
   a képernyőről, és a felhasználó nem látná, hogy hol tart. */
.multi-select__options[b-yvnbu16sfo] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    max-block-size: 18rem;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
}

.multi-select__option[b-yvnbu16sfo] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    /* Érintési célméret: a teljes sor kattintható, nem csak a jelölőnégyzet. */
    min-block-size: var(--size-touch-target);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-control);
    cursor: pointer;
}

.multi-select__option:hover[b-yvnbu16sfo] {
    background-color: var(--color-surface-muted);
}

.multi-select__option.is-selected[b-yvnbu16sfo] {
    background-color: var(--cat-brand-subtle);
}

.multi-select__option:focus-within[b-yvnbu16sfo] {
    outline: 2px solid var(--color-primary-strong);
    outline-offset: -2px;
}

.multi-select__checkbox[b-yvnbu16sfo] {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    flex: none;
    accent-color: var(--color-primary-strong);
}

.multi-select__option-body[b-yvnbu16sfo] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
}

.multi-select__option-label[b-yvnbu16sfo] {
    font: var(--text-body);
}

.multi-select__option-description[b-yvnbu16sfo] {
    flex-basis: 100%;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

@media (pointer: coarse) {
    .multi-select__pill[b-yvnbu16sfo] {
        min-block-size: var(--size-touch-target);
    }

    .multi-select__remove[b-yvnbu16sfo] {
        inline-size: var(--size-touch-target);
        block-size: var(--size-touch-target);
    }
}
/* /Components/Forms/TagInput.razor.rz.scp.css */
/*
    TagInput — a képernyőterv szerint (docs/input/2 márka/…/kerülendő-kifejezések.png,
    …/fájdalmak és motivációk.png): halvány pink pill-ek ✕ gombbal, a mező végén beúszó
    placeholderrel.

    ⚠️ A pill FELIRATA --cat-brand-text (#B01268) a --cat-brand-subtle (#FFEBF5) hátteren:
    5.84:1. A #FF3EAA itt sehol nem szöveg és nem hordoz feliratot.
*/

.tag-input[b-x37s9j8va0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font: var(--text-body);
    color: var(--color-text);
}

.tag-input__label[b-x37s9j8va0] {
    font: var(--text-h3);
}

.tag-input__required[b-x37s9j8va0] {
    color: var(--color-danger-text);
    margin-inline-start: var(--space-1);
}

.tag-input__help[b-x37s9j8va0] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.tag-input__box[b-x37s9j8va0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--size-touch-target);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-surface);
    /* Nem --color-border: az #EAEAEA fehéren 1.20, és egy interaktív kontroll egyetlen
       határaként az WCAG 1.4.11 sértés. */
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    cursor: text;
}

.tag-input__box:focus-within[b-x37s9j8va0] {
    border-color: var(--color-primary-strong);
}

/*
   ⚠️⚠️ A mező gyűrűjét a DOBOZ viseli — a globális `:focus-visible` gyűrűvel AZONOS tokenekből
   (tokens.css → Fókuszgyűrű: fehér belül, sötét kívül). MÉRT HIBA volt: a mezőről levett gyűrű
   helyett a doboz csak a keret színét váltotta (#767676 → #C2186F, 1,27:1), tehát billentyűzettel
   a 8 Márka-mezőn nem látszott, hol gépel a felhasználó (WCAG 2.4.7 bukás,
   docs/a11y-fokusz-2026-09-25.md, 3. lelet).
   `:has(… :focus-visible)`, nem `:focus-within`: a pill ✕ gombja a saját globális gyűrűjét kapja,
   a dobozé mellette dupla gyűrű lenne.
*/
.tag-input__box:has(.tag-input__field:focus-visible)[b-x37s9j8va0] {
    outline: var(--focus-ring-width) solid var(--focus-ring-outer);
    outline-offset: var(--focus-ring-offset);
    box-shadow: 0 0 0 calc(var(--focus-ring-width) * 2) var(--focus-ring-inner);
}

.tag-input__list[b-x37s9j8va0] {
    display: contents;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tag-input__pill[b-x37s9j8va0] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding-block: var(--space-1);
    padding-inline: var(--space-3) var(--space-2);
    background-color: var(--cat-brand-subtle);
    color: var(--cat-brand-text);
    border-radius: var(--radius-pill);
    font: var(--text-sm);
    max-inline-size: 100%;
}

.tag-input__pill-text[b-x37s9j8va0] {
    overflow-wrap: anywhere;
}

.tag-input__remove[b-x37s9j8va0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--size-icon-lg);
    block-size: var(--size-icon-lg);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--cat-brand-text);
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.tag-input__remove:hover[b-x37s9j8va0] {
    background-color: rgb(176 18 104 / .12);
}

.tag-input__field[b-x37s9j8va0] {
    flex: 1 1 12ch;
    min-inline-size: 12ch;
    border: 0;
    padding: var(--space-1) 0;
    font: var(--text-body);
    color: var(--color-text);
    background: transparent;
}

.tag-input__field:focus-visible[b-x37s9j8va0] {
    /* A gyűrűt a doboz kapja meg (:has(… :focus-visible), fent), különben két gyűrű ülne egymásban. */
    outline: none;
    box-shadow: none;
}

.tag-input__field[b-x37s9j8va0]::placeholder {
    color: var(--color-text-muted);
}

.tag-input__meta[b-x37s9j8va0] {
    display: flex;
    gap: var(--space-3);
    margin: 0;
    font: var(--text-xs);
    color: var(--color-text-muted);
}

.tag-input__meta .is-limit[b-x37s9j8va0] {
    color: var(--color-danger-text);
}

.tag-input__notice[b-x37s9j8va0] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-danger-text);
}

.tag-input--disabled[b-x37s9j8va0] {
    opacity: .4;
}

/* Érintős eszközön a pill törlés-gombja teljes értékű célpont (44×44). Egérrel ez
   aránytalanul nagy lenne, ezért csak durva mutatónál kapcsol be. */
@media (pointer: coarse) {
    .tag-input__pill[b-x37s9j8va0] {
        min-block-size: var(--size-touch-target);
    }

    .tag-input__remove[b-x37s9j8va0] {
        inline-size: var(--size-touch-target);
        block-size: var(--size-touch-target);
    }
}
/* /Components/Forms/TextAreaWithCounter.razor.rz.scp.css */
.counted-text[b-e0323sxjx0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* ⚠️ A `.counted-text__counter` szabályai 2026-08-29-én ÁTKERÜLTEK a `CharacterCounter.razor.css`-be.
   Nem takarítás volt: a számláló azóta GYEREKKOMPONENS jelölése, amit a scoped CSS `[b-hash]`
   attribútuma innen már nem ér el — itt hagyva a felirat stílus nélkül maradt volna. */
/* /Components/Forms/TextInputWithCounter.razor.rz.scp.css */
/*
   ⚠️ A burok szabálya SZÁNDÉKOSAN a hívó komponensben ismétlődik (l. `TextAreaWithCounter`), és
   nem közös osztályba került: a scoped CSS a KOMPONENS saját jelöléséhez tapad, tehát egy közös
   `.counted-text` szabály valamelyik hívónál úgysem illeszkedne. Amit közösíteni ÉRDEMES, az a
   számláló SZÖVEGE — az a `CharacterCounter`-ben egyetlen példányban él.
*/

.counted-text[b-z7kvwkzt10] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
/* /Components/Help/HelpTopicView.razor.rz.scp.css */
.help-topic[b-tenbq75s32] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-block: var(--space-4);
    border-block-start: 1px solid var(--color-border);
}

.help-topic:first-child[b-tenbq75s32] {
    border-block-start: none;
    padding-block-start: 0;
}

.help-topic__question[b-tenbq75s32] {
    margin: 0;
    font: var(--text-h3);
}

.help-topic__paragraph[b-tenbq75s32],
.help-topic__link[b-tenbq75s32] {
    margin: 0;
    max-inline-size: 68ch;
    font: var(--text-body);
}

.help-topic__paragraph[b-tenbq75s32] {
    color: var(--color-text-muted);
}

/*
    ⚠️ A link SZÖVEG, tehát --color-primary-text (#B01268, fehéren 6.70) — a dekoratív #FF3EAA
    fehéren 3.22, ami a 4.5:1 alatt van. A képernyőterv pink linkeket rajzol; ezt nem követjük.
*/
.help-topic__link a[b-tenbq75s32] {
    color: var(--color-primary-text);
}
/* /Components/Help/PageGuide.razor.rz.scp.css */
/*
    A fejléc „Útmutató" gombja.

    ⚠️ A minta a `Button` NEUTRÁLIS variánsáé (fehér felület, `--color-border-input` keret, sötét
    felirat) — betűre az, amit a megrendelői fejléc-tervek rajzolnak. Azért nem a `Button`
    komponens rendereli, mert a panel fókusz-visszaadásához `ElementReference` kell, és azt csak
    az a komponens rögzítheti, amelyik az elemet kiírja.

    ⚠️ Pink szöveg NINCS rajta: fehér háttéren a `#FF3EAA` 3.22:1, ami normál méretű felirathoz
    kevés. A könyv-ikon a `currentColor`-t örökli, tehát ugyanazt a sötét szöveg-színt viszi.
*/

.page-guide__open[b-bkaqm9ij7d] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--size-touch-target);
    padding-inline: var(--space-4);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text);
    font: var(--text-body);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.page-guide__open:hover[b-bkaqm9ij7d] {
    background: var(--color-surface-muted);
}

.page-guide__lead[b-bkaqm9ij7d] {
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.page-guide__lead a[b-bkaqm9ij7d] {
    color: var(--color-primary-text);
}
/* /Components/Legal/ConsentStatusPanel.razor.rz.scp.css */
/* ConsentStatusPanel — dokumentumonként egy sor: név, mit fogadtál el, mi következik ebből. */

.consent-status[b-21qfgzjgeu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.consent-status__row[b-21qfgzjgeu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.consent-status__title[b-21qfgzjgeu] {
    margin: 0;
    font: var(--text-h3);
}

/* A meta-sor két állítása mobilon egymás alá kerül: a dátum és a verzió külön mondat. */
.consent-status__meta[b-21qfgzjgeu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    font: var(--text-sm);
}

/* ⚠️ A --color-text-muted (#666666) a fehéren 5,74 és a világosszürkén 5,26 — mindkét
   alapfelületen megfelel. A `DesignSurfaceContrastGate` ezt kiszámolja, nem a token nevéből hiszi el. */
.consent-status__current[b-21qfgzjgeu] {
    color: var(--color-text-muted);
}
/* /Components/Legal/LegalDocumentView.razor.rz.scp.css */
/*
    A jogi dokumentum olvasó-tipográfiája.

    ⚠️ A törzs `MarkupString`-ként kerül be, tehát a benne lévő elemekre NEM kerül scope-attribútum
    — ezért `::deep` a `.legal__body` alatti minden szabály. Enélkül a 180 soros jogi szöveg a
    böngésző alapértelmezett stílusával jelenne meg: 100 karakteres sorok, olvashatatlanul.

    ⚠️ A sorhossz-korlát nem díszítés (WCAG 1.4.8 ~80 karakter): ez a projekt leghosszabb
    összefüggő szövege, és a hozzájárulás akkor ér valamit, ha a felhasználó tényleg elolvassa.
*/

.legal[b-op7uzgex5t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-inline-size: 74ch;
}

.legal h1[b-op7uzgex5t] {
    margin: 0;
    font: var(--text-h1);
}

/* ── Tartalomjegyzék ─────────────────────────────────────────────────── */

.legal__toc[b-op7uzgex5t] {
    margin: 0;
    padding: var(--space-card);
    background-color: var(--color-surface-muted);
    border-radius: var(--radius-card);
}

.legal__toc h2[b-op7uzgex5t] {
    margin: 0 0 var(--space-3);
    font: var(--text-h3);
}

.legal__toc ol[b-op7uzgex5t] {
    margin: 0;
    padding-inline-start: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font: var(--text-body);
}

/* ── A dokumentum törzse ─────────────────────────────────────────────── */

.legal__body[b-op7uzgex5t] {
    font: var(--text-body);
    color: var(--color-text);
}

.legal__body[b-op7uzgex5t]  h2 {
    margin: var(--space-6) 0 var(--space-3);
    font: var(--text-h2);
}

.legal__body[b-op7uzgex5t]  h3 {
    margin: var(--space-5) 0 var(--space-2);
    font: var(--text-h3);
}

.legal__body[b-op7uzgex5t]  p,
.legal__body[b-op7uzgex5t]  ul {
    margin: 0 0 var(--space-4);
}

.legal__body[b-op7uzgex5t]  ul {
    padding-inline-start: var(--space-5);
}

.legal__body[b-op7uzgex5t]  li {
    margin-block-end: var(--space-2);
}

.legal__body[b-op7uzgex5t]  hr {
    margin: var(--space-6) 0;
    border: 0;
    border-block-start: 1px solid var(--color-border);
}

.legal__body[b-op7uzgex5t]  code {
    padding: 0 var(--space-1);
    background-color: var(--color-surface-muted);
    border-radius: var(--radius-control);
    font-size: .875em;
}

.legal__body[b-op7uzgex5t]  a {
    color: var(--color-primary-text);
}

/*
    Kiemelt blokk (a markdown `>` idézete). A jogi szövegben ezek figyelmeztetések és nyitott
    tételek — a szürke háttér és a bal szegély a lapozó szemnek is megmutatja őket.
*/
.legal__body[b-op7uzgex5t]  blockquote {
    margin: 0 0 var(--space-4);
    padding: var(--space-4);
    background-color: var(--color-surface-muted);
    border-inline-start: 3px solid var(--color-border-input);
    border-radius: var(--radius-control);
}

.legal__body[b-op7uzgex5t]  blockquote > :last-child {
    margin-block-end: 0;
}

.legal__body[b-op7uzgex5t]  blockquote h2,
.legal__body[b-op7uzgex5t]  blockquote h3 {
    margin: 0 0 var(--space-2);
    font: var(--text-h3);
}

/*
    ⚠️ A táblázat SAJÁT vízszintes görgetőt kap. A négyoszlopos jogalap- és alfeldolgozói táblák
    mobilon nem férnek ki: keret nélkül a LAP görgetne vízszintesen, és a felhasználó a jogi
    szöveg többi részét is elcsúsztatva látná.
*/
.legal__body[b-op7uzgex5t]  .legal__table-scroll {
    margin: 0 0 var(--space-4);
    overflow-x: auto;
}

.legal__body[b-op7uzgex5t]  table {
    inline-size: 100%;
    min-inline-size: 32ch;
    border-collapse: collapse;
    font: var(--text-sm);
}

.legal__body[b-op7uzgex5t]  th,
.legal__body[b-op7uzgex5t]  td {
    padding: var(--space-2) var(--space-3);
    text-align: start;
    vertical-align: top;
    border-block-end: 1px solid var(--color-border);
}

.legal__body[b-op7uzgex5t]  thead th {
    background-color: var(--color-surface-muted);
    font-weight: 600;
}

/* ── Verzió-kötés a lap tetején ───────────────────────────────────────── */

.legal__meta[b-op7uzgex5t] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface-muted);
    border-radius: var(--radius-card);
    font: var(--text-sm);
}

.legal__meta dt[b-op7uzgex5t] {
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.legal__meta dd[b-op7uzgex5t] {
    margin: 0;
    font: var(--text-body);
}

.legal__meta code[b-op7uzgex5t] {
    padding: 0 var(--space-1);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
}

/* ── Verzió-előzmény és ujjlenyomat ──────────────────────────────────── */

.legal__history[b-op7uzgex5t] {
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border);
}

.legal__history h2[b-op7uzgex5t] {
    margin: 0 0 var(--space-3);
    font: var(--text-h3);
}

.legal__history ul[b-op7uzgex5t] {
    margin: 0 0 var(--space-3);
    padding-inline-start: var(--space-5);
    font: var(--text-body);
}

.legal__history-gap[b-op7uzgex5t] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.legal__hash[b-op7uzgex5t] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
    /* A 64 karakteres ujjlenyomat mobilon máshol vízszintes görgetést okozna. */
    overflow-wrap: anywhere;
}

.legal--unavailable[b-op7uzgex5t] {
    gap: var(--space-4);
}

.legal--unavailable h1[b-op7uzgex5t] {
    margin: 0;
    font: var(--text-h1);
}

/*
    Nyomtatásban a nyomtatás-gomb önmagára mutatna, az ugró-linkek pedig papíron nem működnek —
    de a szakaszcímek maradnak, tehát a tájékozódás nem veszik el.
*/
@media print {
    .legal__print[b-op7uzgex5t],
    .legal__toc[b-op7uzgex5t] {
        display: none;
    }

    .legal[b-op7uzgex5t] {
        max-inline-size: none;
        gap: var(--space-4);
    }
}
/* /Components/State/AsyncView.razor.rz.scp.css */
/*
    AsyncView — a négy állapot közös vizuális nyelve.

    Az „üres” itt nem szürke doboz egy szomorú ikonnal, hanem egy ajánlat: cím, egy mondat
    magyarázat, és EGY konkrét következő lépés.
*/

.async-view__success[b-2dtttoqpgf] {
    /* A burok nem törheti meg a szülő rácsát — a sikeres tartalom közvetlenül a szülőben ül. */
    display: contents;
}

.async-view__loading[b-2dtttoqpgf],
.async-view__empty[b-2dtttoqpgf],
.async-view__error[b-2dtttoqpgf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-card);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    font: var(--text-body);
    color: var(--color-text);
}

.async-view__loading[b-2dtttoqpgf] {
    flex-direction: row;
    align-items: center;
    color: var(--color-text-muted);
}

.async-view__spinner[b-2dtttoqpgf] {
    inline-size: var(--size-icon-md);
    block-size: var(--size-icon-md);
    border: 2px solid var(--color-border);
    /* Dekoratív pink — nem hordoz feliratot, a szöveges jelzés a spinner mellett áll. */
    border-block-start-color: var(--color-primary);
    border-radius: var(--radius-pill);
    animation: async-view-spin-b-2dtttoqpgf 800ms linear infinite;
}

@keyframes async-view-spin-b-2dtttoqpgf {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .async-view__spinner[b-2dtttoqpgf] {
        animation: none;
    }
}

.async-view__empty[b-2dtttoqpgf] {
    align-items: flex-start;
    text-align: start;
    padding-block: var(--space-6);
}

.async-view__empty-title[b-2dtttoqpgf] {
    margin: 0;
    font: var(--text-h2);
}

.async-view__empty-body[b-2dtttoqpgf],
.async-view__error-body[b-2dtttoqpgf] {
    margin: 0;
    max-inline-size: 52ch;
    color: var(--color-text-muted);
}

.async-view__error-title[b-2dtttoqpgf] {
    margin: 0;
    font: var(--text-h3);
    color: var(--color-danger-text);
}

.async-view__error-detail[b-2dtttoqpgf] {
    margin: 0;
    font: var(--text-xs);
    color: var(--color-text-muted);
}

/* Elsődleges CTA: feliratot HORDOZÓ pink felület, tehát --color-primary-strong (5.75:1).
   A #FF3EAA-n a fehér felirat 3.22:1 lenne — bukna. */
.async-view__action[b-2dtttoqpgf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--size-touch-target);
    padding-inline: var(--space-5);
    border: 0;
    border-radius: var(--radius-control);
    background-color: var(--color-primary-strong);
    color: var(--color-text-inverse);
    font: var(--text-body);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: filter var(--duration-fast) var(--ease-out);
}

.async-view__action:hover[b-2dtttoqpgf] {
    filter: brightness(.92);
}

.async-view__action:active[b-2dtttoqpgf] {
    filter: brightness(.88);
}
/* /Components/State/PageErrorBoundary.razor.rz.scp.css */
/*
    PageErrorBoundary — a végső háló panelje.

    Szándékosan ugyanaz a kártya-nyelv, mint az `AsyncView` hibaágáé: a felhasználónak nem kell
    új vizuális alakot megtanulnia egy olyan képernyőn, amit remélhetőleg soha nem lát.
*/

.page-error[b-j8x64wfd15] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-card);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    font: var(--text-body);
    color: var(--color-text);
}

.page-error__title[b-j8x64wfd15] {
    margin: 0;
    font: var(--text-h2);
    color: var(--color-danger-text);
}

.page-error__body[b-j8x64wfd15] {
    margin: 0;
    max-inline-size: 52ch;
    color: var(--color-text-muted);
}

.page-error__detail[b-j8x64wfd15] {
    margin: 0;
    font: var(--text-xs);
    color: var(--color-text-muted);
    /* Egy hosszú kivétel-üzenet nem tolhatja szét a lapot mobilon. */
    overflow-wrap: anywhere;
}

/* Feliratot HORDOZÓ pink felület → --color-primary-strong (5.75:1). A #FF3EAA-n a fehér
   felirat 3.22:1 lenne, tehát bukna. */
.page-error__action[b-j8x64wfd15] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--size-touch-target);
    padding-inline: var(--space-5);
    border: 0;
    border-radius: var(--radius-control);
    background-color: var(--color-primary-strong);
    color: var(--color-text-inverse);
    font: var(--text-body);
    font-weight: 600;
    cursor: pointer;
    transition: filter var(--duration-fast) var(--ease-out);
}

.page-error__action:hover[b-j8x64wfd15] {
    filter: brightness(.92);
}

.page-error__action:active[b-j8x64wfd15] {
    filter: brightness(.88);
}
/* /Components/Ui/AppShell.razor.rz.scp.css */
.shell[b-piwuclv9ar] {
    display: grid;
    grid-template-columns: var(--size-sidebar) minmax(0, 1fr);
    min-block-size: 100dvh;
    background-color: var(--color-surface-muted);
}

/* A skip-link csak fókuszban látszik — de akkor jól. */
.shell__skip[b-piwuclv9ar] {
    position: absolute;
    inset-inline-start: var(--space-4);
    inset-block-start: -100px;
    z-index: calc(var(--z-drawer) + 1);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-overlay);
    color: var(--color-text);
    /* Gomb, nem link (l. AppShell.razor fejléc): a böngésző gomb-alapstílusa nem kell. */
    border: 0;
    font: inherit;
    cursor: pointer;
    transition: inset-block-start var(--duration-fast) var(--ease-out);
}

.shell__skip:focus-visible[b-piwuclv9ar] {
    inset-block-start: var(--space-4);
}

.shell__sidebar[b-piwuclv9ar] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-5);
    /*
       ⚠️ A vízszintes padding --space-5 (24 px), nem --space-4. A terven az aktív pill oldal-inzete
       a sidebar szélességének 7.9%-a (20/252 px) — a 264 px-es --size-sidebar-on ez ~21 px, tehát
       a 4-es rácson a 24 az illeszkedő érték, nem a 16. A 16 px-es változatban a pill a menü
       széléhez tapadt, és ez húzta magával az ikonokat is 4 px-szel balra.
    */
    padding: var(--space-5);
    background-color: var(--color-sidebar);
    color: var(--color-text-inverse);
    overflow-y: auto;
}

.shell__sidebar-footer[b-piwuclv9ar] {
    border-block-start: 1px solid rgb(255 255 255 / .12);
    padding-block-start: var(--space-4);
    /* Sötét felületen a --color-text-muted (#666) 3.29 lenne — BUKIK. */
    color: var(--color-text-muted-inverse);
    font: var(--text-xs);
}

.shell__main[b-piwuclv9ar] {
    min-inline-size: 0;
    padding: var(--space-6) var(--space-5);
}

.shell__content[b-piwuclv9ar] {
    display: flex;
    flex-direction: column;
    gap: var(--space-section);
    max-inline-size: var(--size-content-max);
    margin-inline: auto;
}

.shell__hamburger[b-piwuclv9ar] {
    display: none;
}

.shell__backdrop[b-piwuclv9ar] {
    display: none;
}

/*
   ⚠️ A drawer SAJÁT záró gombja csak mobilon létezik vizuálisan. A komponens csak nyitott drawernél
   rendereli, drawer pedig csak mobilon nyitható — ez a szabály a második zár: asztalon (ahol a
   menü nem modális) akkor sem jelenhet meg, ha a nézet nyitott drawer mellett szélesedik ki.
*/
.shell__drawer-close[b-piwuclv9ar] {
    display: none;
}

/* A fókusz-csapda őrszemei — láthatatlanok, de fókuszálhatók (nem `display: none`/`visibility`,
   különben a böngésző kihagyná őket a Tab-sorrendből). Ugyanaz, mint a SlideOverPanelé. */
.shell__sentinel[b-piwuclv9ar] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
}

/* ── Mobil: a bal menü drawerré válik (a --bp-md töréspont) ───────────────── */
@media (max-width: 767.98px) {
    .shell[b-piwuclv9ar] {
        grid-template-columns: minmax(0, 1fr);
    }

    .shell__hamburger[b-piwuclv9ar] {
        position: fixed;
        inset-block-start: var(--space-3);
        inset-inline-start: var(--space-3);
        z-index: calc(var(--z-drawer) + 1);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: var(--size-touch-target);
        block-size: var(--size-touch-target);
        border: 1px solid var(--color-border-input);
        border-radius: var(--radius-control);
        background-color: var(--color-surface);
        color: var(--color-text);
        cursor: pointer;
    }

    .shell__sidebar[b-piwuclv9ar] {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: var(--z-drawer);
        inline-size: var(--size-drawer);
        max-inline-size: 88vw;
        transform: translateX(-100%);
        /*
           ⚠️ A ZÁRT drawer NEM fókuszálható — a `transform` csak elmozdítja, a Tab-sorrendben
           hagyná (mérve: 7 menüpont x = -264-en, docs/a11y-fokusz-2026-09-25.md, 4. lelet).
           A `visibility: hidden` kiveszi a Tab-sorrendből és az akadálymentességi fából is.
           Záráskor a csúszás VÉGÉN vált (késleltetett `visibility`), nyitáskor azonnal.
        */
        visibility: hidden;
        transition: transform var(--duration-base) var(--ease-out),
                    visibility 0s linear var(--duration-base);
    }

    .shell--drawer-open .shell__sidebar[b-piwuclv9ar] {
        transform: translateX(0);
        visibility: visible;
        transition: transform var(--duration-base) var(--ease-out),
                    visibility 0s linear 0s;
    }

    /*
       ⚠️ Nyitott drawernél a hamburger a dialóguson KÍVÜL áll (inert), tehát nem is látszhat: a
       drawer saját záró gombja veszi át a szerepét. Láthatóan hagyva a drawer bal felső sarkában,
       a logó fölött egy nem működő gomb ülne. Záráskor azonnal visszatér — a fókusz oda kerül.
    */
    .shell--drawer-open .shell__hamburger[b-piwuclv9ar] {
        visibility: hidden;
    }

    .shell__drawer-close[b-piwuclv9ar] {
        position: absolute;
        inset-block-start: var(--space-3);
        inset-inline-end: var(--space-3);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: var(--size-touch-target);
        block-size: var(--size-touch-target);
        padding: 0;
        /* Sötét felületen: a határ halvány, a JELZŐ maga az ikon (fehér a navyn, 19.47:1). */
        border: 1px solid rgb(255 255 255 / .24);
        border-radius: var(--radius-control);
        background: transparent;
        color: var(--color-text-inverse);
        cursor: pointer;
    }

    .shell--drawer-open .shell__backdrop[b-piwuclv9ar] {
        position: fixed;
        inset: 0;
        z-index: calc(var(--z-drawer) - 1);
        display: block;
        background-color: var(--overlay-backdrop);
    }

    .shell__main[b-piwuclv9ar] {
        padding: calc(var(--size-touch-target) + var(--space-5)) var(--space-4) var(--space-6);
    }
}

/* Nyomtatás: a váz kromja nem hordoz információt papíron. */
@media print {
    .shell[b-piwuclv9ar] {
        display: block;
    }

    .shell__sidebar[b-piwuclv9ar],
    .shell__hamburger[b-piwuclv9ar],
    .shell__skip[b-piwuclv9ar],
    .shell__backdrop[b-piwuclv9ar] {
        display: none;
    }

    .shell__main[b-piwuclv9ar] {
        padding: 0;
    }
}
/* /Components/Ui/Badge.razor.rz.scp.css */
.badge[b-zavdwnpb13] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    border-radius: var(--radius-pill);
    font: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
}

.badge__dot[b-zavdwnpb13] {
    inline-size: 8px;
    block-size: 8px;
    border-radius: var(--radius-pill);
    background-color: currentColor;
}

/* A felirat mindig a kategória `-text` tokenje a `-subtle` hátterén — ez a pár méretett
   ≥ 4.5:1-re. A `-solid` badge-háttérként sehol nem szerepel. */
.badge--neutral[b-zavdwnpb13] {
    background-color: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.badge--brand[b-zavdwnpb13] {
    background-color: var(--cat-brand-subtle);
    color: var(--cat-brand-text);
}

.badge--content[b-zavdwnpb13] {
    background-color: var(--cat-content-subtle);
    color: var(--cat-content-text);
}

.badge--academy[b-zavdwnpb13] {
    background-color: var(--cat-academy-subtle);
    color: var(--cat-academy-text);
}

.badge--community[b-zavdwnpb13] {
    background-color: var(--cat-community-subtle);
    color: var(--cat-community-text);
}

.badge--success[b-zavdwnpb13] {
    background-color: var(--cat-success-subtle);
    color: var(--cat-success-text);
}

.badge--warning[b-zavdwnpb13] {
    background-color: var(--cat-warning-subtle);
    color: var(--cat-warning-text);
}

.badge--danger[b-zavdwnpb13] {
    background-color: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
    color: var(--color-danger-text);
}
/* /Components/Ui/Button.razor.rz.scp.css */
/*
    ⚠️ Az elsődleges gomb kitöltése --color-primary-strong (#C2186F), NEM #FF3EAA: fehér
    felirattal az előbbi 5.75:1, az utóbbi 3.22:1 — bukna. A #FF3EAA-t a projektben csak
    felirat NÉLKÜLI felület kapja.

    A hover/active nem külön szín, hanem derivációs szabály: 8 % / 12 % sötétebb, elmozdulás
    nélkül (`transform: none`) — a mozgó gomb érintőképernyőn célt téveszt.

    ⚠️⚠️ MINDEN VÁLTOZAT KÉTSZER MONDJA KI A SZÍNEIT: tulajdonságként (`background-color`, `color`,
    `border-color`) ÉS változóként (`--button-bg`, `--button-fg`, `--button-border`). Nem
    véletlen ismétlés, két külön olvasója van:
    - a tulajdonságot a `DesignSurfaceContrastGate` olvassa — a feloldott felirat/kitöltés párokat
      méri, és egy változóból számolt értéket nem tud feloldani (a lefedettség elveszne);
    - a változót a TILTOTT állapot olvassa (l. lent).
    A kettő egyezését a `FocusIndicatorStylesheetTests` a build scope-bundle-jén köti le.
*/

.button[b-wekl97kj7w] {
    --button-bg: transparent;
    --button-border: transparent;
    --button-fg: var(--color-text);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--size-touch-target);
    padding-inline: var(--space-5);
    border-radius: var(--radius-control);
    border: 1px solid transparent;
    font: var(--text-body);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.button--full[b-wekl97kj7w] {
    inline-size: 100%;
}

.button--primary[b-wekl97kj7w] {
    --button-bg: var(--color-primary-strong);
    --button-fg: var(--color-text-inverse);

    background-color: var(--color-primary-strong);
    color: var(--color-text-inverse);
}

.button--primary:hover[b-wekl97kj7w] {
    background-color: color-mix(in srgb, var(--color-primary-strong) 92%, #000);
}

.button--primary:active[b-wekl97kj7w] {
    background-color: color-mix(in srgb, var(--color-primary-strong) 88%, #000);
    transform: none;
}

.button--secondary[b-wekl97kj7w] {
    --button-bg: var(--color-surface);
    --button-border: var(--color-primary-strong);
    --button-fg: var(--color-primary-text);

    background-color: var(--color-surface);
    border-color: var(--color-primary-strong);
    color: var(--color-primary-text);
}

.button--secondary:hover[b-wekl97kj7w] {
    background-color: var(--color-primary-subtle);
}

.button--neutral[b-wekl97kj7w] {
    --button-bg: var(--color-surface);
    --button-border: var(--color-border-input);
    --button-fg: var(--color-text);

    background-color: var(--color-surface);
    border-color: var(--color-border-input);
    color: var(--color-text);
}

.button--neutral:hover[b-wekl97kj7w] {
    background-color: var(--color-surface-muted);
}

.button--danger[b-wekl97kj7w] {
    --button-bg: var(--color-surface);
    --button-border: var(--color-danger);
    --button-fg: var(--color-danger-text);

    background-color: var(--color-surface);
    border-color: var(--color-danger);
    color: var(--color-danger-text);
}

.button--danger:hover[b-wekl97kj7w] {
    background-color: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface));
}

/*
    Tiltott: 40 %-os megjelenés, FÓKUSZÁLHATÓ marad (nincs `disabled` attribútum).

    ⚠️⚠️ NEM `opacity`. Az opacitás az ELEM MINDEN pixelére hat, a fókuszgyűrűre is: a fókuszban
    álló tiltott gomb gyűrűje 2,65:1-re halványult, ≥ 3:1-es pixel egy sem maradt (fókusz-audit,
    7. lelet). A design-system a tiltott gombot szándékosan fókuszálhatónak tartja („kattintásra
    magyarázatot ad"), tehát látszania kell, hogy a felhasználó rajta áll. Ezért a halványítás a
    gomb SAJÁT színeire hat — a gyűrű (a globális `:focus-visible`) teljes erejű marad.

    A három szín úgy keveredik, hogy a régi `opacity: .4` képét adja:
    - kitöltés és keret: 40 % a saját színből, a többi ÁTLÁTSZÓ — pontosan az, amit az opacitás a
      kitöltéssel tett (a mögötte álló felület 60 %-ban átlátszik);
    - felirat: 40 % a saját színből, a többi a FELÜLET színe — az opacitás a feliratot a mögötte
      álló felülettel keverte, nem a gomb kitöltésével. Átlátszóval keverve a felirat a halvány
      kitöltésen át MÁSODSZOR is halványulna: a tiltott elsődleges gomb fehér felirata a
      rózsaszín kitöltésbe olvadna.
    ⚠️ A hover itt nem hat (ez a szabály a változatok hover-szabályai UTÁN áll, azonos
    specificitással) — a tiltott gomb nem jelez kattinthatóságot.
*/
.button.is-disabled[b-wekl97kj7w] {
    background-color: color-mix(in srgb, var(--button-bg) 40%, transparent);
    border-color: color-mix(in srgb, var(--button-border) 40%, transparent);
    color: color-mix(in srgb, var(--button-fg) 40%, var(--color-surface));
    cursor: not-allowed;
}

/* A felirat a helyén marad, csak láthatatlan — így a gomb mérete nem ugrik. */
.button__label.is-hidden[b-wekl97kj7w] {
    visibility: hidden;
}

.button__busy[b-wekl97kj7w] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--space-3);
}
/* /Components/Ui/Card.razor.rz.scp.css */
.card[b-qt7lbht32o] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-card);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    /* ⚠️ SZÁNDÉKOSAN nincs `overflow: hidden` — a 2 px offsetes fókuszgyűrű levágódna.
       Ahol a levágás kell (thumbnail), a belső elem kapja. */
}

.card--muted[b-qt7lbht32o] {
    background-color: var(--color-surface-muted);
    box-shadow: none;
}

.card__header[b-qt7lbht32o] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.card__title[b-qt7lbht32o] {
    margin: 0;
    font: var(--text-h2);
}

/* A lépésváltáskor fókuszt kapó cím (`TitleFocusable`) — ugyanaz, mint a `.setup__heading`-é. */
.card__title:focus-visible[b-qt7lbht32o] {
    border-radius: var(--radius-control);
}

.card__description[b-qt7lbht32o] {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--text-sm);
    max-inline-size: 68ch;
}

.card__body[b-qt7lbht32o] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
/* /Components/Ui/ConfirmDialog.razor.rz.scp.css */
.confirm[b-qj3i9djart] {
    position: fixed;
    inset: 0;
    z-index: var(--z-dialog);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.confirm__backdrop[b-qj3i9djart] {
    position: absolute;
    inset: 0;
    background-color: var(--overlay-backdrop);
}

.confirm__panel[b-qj3i9djart] {
    position: relative;
    inline-size: min(480px, 100%);
    max-block-size: calc(100dvh - (2 * var(--space-4)));
    overflow-y: auto;
    padding: var(--space-5);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-overlay);
}

/* Az őrszem fókuszálható, de nem látszik és nem foglal helyet. */
.confirm__sentinel[b-qj3i9djart] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.confirm__title[b-qj3i9djart] {
    font: var(--text-h2);
}

.confirm__body[b-qj3i9djart] {
    margin-block-start: var(--space-3);
    color: var(--color-text);
    font: var(--text-body);
}

.confirm__body p[b-qj3i9djart] {
    margin: 0 0 var(--space-2);
}

.confirm__body p:last-child[b-qj3i9djart] {
    margin-block-end: 0;
}

.confirm__actions[b-qj3i9djart] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
}

.confirm__button[b-qj3i9djart] {
    min-block-size: var(--size-touch-target);
    padding-inline: var(--space-4);
    border-radius: var(--radius-control);
    font: var(--text-body);
    cursor: pointer;
}

/*
   A BIZTONSÁGOS válasz a hangsúlyos: tömör, sötét felület fehér felirattal (18.88:1).
   A destruktív gomb szándékosan halkabb — körvonalas, piros SZÖVEGGEL (a --color-danger-text
   fehéren 6.47:1; a #DC2626 szövegként a halvány felületeken bukna).
*/
.confirm__button--safe[b-qj3i9djart] {
    border: 1px solid var(--color-text);
    background-color: var(--color-text);
    color: var(--color-text-inverse);
    font-weight: 600;
}

.confirm__button--confirm[b-qj3i9djart] {
    border: 1px solid var(--color-border-input);
    background-color: var(--color-surface);
    color: var(--color-text);
}

.confirm__button--danger[b-qj3i9djart] {
    border: 1px solid var(--color-danger-text);
    background-color: var(--color-surface);
    color: var(--color-danger-text);
}

.confirm__button--danger:hover[b-qj3i9djart] {
    background-color: #FEF2F2;
}

.confirm__button[aria-busy="true"][b-qj3i9djart] {
    cursor: progress;
}

@media (max-width: 479.98px) {
    .confirm__actions[b-qj3i9djart] {
        flex-direction: column-reverse;
    }

    .confirm__button[b-qj3i9djart] {
        inline-size: 100%;
    }
}
/* /Components/Ui/DangerZoneCard.razor.rz.scp.css */
/*
    A veszély-zóna.

    ⚠️ A cím `--color-danger-text` (#B91C1C, fehéren 6.47), NEM a `--color-danger` kitöltés-szín:
    az fehéren 4.83 — épp átmenne, de a projekt szabálya szerint a szöveg-token a szövegé.
*/

.danger-zone[b-10wlsrlxyr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block-start: var(--space-section);
    padding: var(--space-card);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-card);
    background: var(--color-surface);
}

.danger-zone__title[b-10wlsrlxyr] {
    margin: 0;
    color: var(--color-danger-text);
    font: var(--text-h2);
}

.danger-zone__description[b-10wlsrlxyr] {
    margin: 0;
    max-inline-size: 68ch;
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.danger-zone__body[b-10wlsrlxyr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-inline-size: 68ch;
}

.danger-zone__body[b-10wlsrlxyr]  p {
    margin: 0;
}
/* /Components/Ui/Icon.razor.rz.scp.css */
/*
    ⚠️ `flex: 0 0 auto` — az ikon SOHA nem zsugorodik. Flex-sorban (menüpont, gomb, badge) a
    böngésző alapból az svg-t is összenyomná hosszú felirat mellett, és a 24 px-es ikon 11 px-en
    olvashatatlan piktogrammá esik szét.

    ⚠️ `display: block` — inline svg alatt a sor-alapvonal miatt keletkezne néhány pixel „alsó
    levegő", ami a menüpontban az ikont a felirathoz képest optikailag feljebb tolja.
*/
.icon[b-76v5oym6bi] {
    display: block;
    flex: 0 0 auto;
}
/* /Components/Ui/ImageUpload.razor.rz.scp.css */
/*
    ImageUpload — négyzetes (logó) és kör (profilkép) alak.

    ⚠️ A pink ceruza-gomb háttere `--color-primary-strong`, NEM a dekoratív `--color-primary`.
    A megrendelői terv a világos pinket rajzolja, de ez a felület FEHÉR IKONT hordoz, és a
    #FF3EAA fehérrel 3,22:1 — bukik. A `DesignSurfaceContrastGate` ezt a párt
    kiszámolja, nem szín-érték szerint tiltja.
*/

.image-upload[b-seij3gm5rm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.image-upload__row[b-seij3gm5rm] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* ── A keret ─────────────────────────────────────────────────────────────
   ⚠️ `position: relative`, mert a ceruza-gomb rá van ültetve. És `overflow: hidden`
   a KERETEN, nem a kártyán: a kép sarkait a kerethez kell vágni, a kártya
   fókuszgyűrűjét viszont nem szabad levágni (l. tokens.css). */
.image-upload__frame[b-seij3gm5rm] {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background-color: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    flex: none;
}

.image-upload--square .image-upload__frame[b-seij3gm5rm] {
    inline-size: 180px;
    block-size: 180px;
    border-radius: var(--radius-card);
}

.image-upload--circle .image-upload__frame[b-seij3gm5rm] {
    inline-size: 72px;
    block-size: 72px;
    border-radius: var(--radius-pill);
}

.image-upload__preview[b-seij3gm5rm] {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

.image-upload__placeholder[b-seij3gm5rm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    text-align: center;
    color: var(--color-text-muted);
    font: var(--text-xs);
}

/* ⚠️ A kör alakú előnézet (72 px) nem bír el szöveget: ott az ikon marad, a magyarázat
   pedig a segédszöveg alatt, a lap folyásában. Elrejtve `display:none`-nal, hogy a
   képernyőolvasó se olvassa fel kétszer — a szöveg a `missing`/`unknown` állapotnál
   amúgy is megjelenik a sáv alatt. */
.image-upload--circle .image-upload__placeholder-text[b-seij3gm5rm] {
    display: none;
}

/* ── A ceruza-gomb (négyzetes alak) ─────────────────────────────────────── */
.image-upload__pencil[b-seij3gm5rm] {
    position: absolute;
    inset-block-end: var(--space-2);
    inset-inline-end: var(--space-2);
    inline-size: 36px;
    block-size: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary-strong);
    color: var(--color-text-inverse);
    cursor: pointer;
    box-shadow: var(--shadow-card);
}

/* ── A feliratos gomb (kör alak) ─────────────────────────────────────────
   ⚠️ SAJÁT szabály, nem a `Button.razor.css` osztályai. Az izolált CSS a Button
   komponens elemeire kapott `[b-…]` attribútumra illeszkedik — egy másik
   komponensben leírt `class="button"` semmit nem örökölne belőle.

   A geometria a `Button` alapjaival azonos (44 px tapintási cél, --radius-control),
   a színek pedig a `--secondary` variánsé: pink KONTÚR (--color-primary-strong) és
   pink FELIRAT (--color-primary-text, fehéren 6,70). A #FF3EAA itt nem jelenhet
   meg — feliratot hordoz. */
.image-upload__button[b-seij3gm5rm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--size-touch-target);
    padding-inline: var(--space-5);
    border: 1px solid var(--color-primary-strong);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: var(--color-primary-text);
    font: var(--text-body);
    font-weight: 600;
    cursor: pointer;
}

.image-upload__button:hover[b-seij3gm5rm] {
    background-color: var(--color-primary-subtle);
}

.image-upload__actions[b-seij3gm5rm] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

/* ── A törlő gomb ───────────────────────────────────────────────────────
   ⚠️ Aláhúzott, ikonos SZÖVEG-gomb, nem `Danger` variáns. A törlés itt
   visszafordítható (a felhasználó bármikor tölt fel újat), és a design-system
   a veszély-színt a visszafordíthatatlan műveleteknek tartja fenn. */
.image-upload__remove[b-seij3gm5rm] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    min-block-size: var(--size-touch-target);
    background: none;
    border: 0;
    color: var(--color-text);
    font: var(--text-sm);
    text-decoration: underline;
    cursor: pointer;
}

.image-upload__help[b-seij3gm5rm],
.image-upload__busy[b-seij3gm5rm] {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--text-sm);
}

/* ── Fókusz ─────────────────────────────────────────────────────────────
   ⚠️⚠️ A beviteli mező LÁTHATATLAN, de FÓKUSZÁLHATÓ — a gyűrűt ezért a
   FELIRATRA kell tenni, különben a billentyűzetes felhasználó fókuszba veszi a
   feltöltőt, és semmi nem látszik. A `:has()` azért kell, mert a mező és a
   felirat nem testvér (a felirat a kereten belül ül).

   A rétegsorrend a tokens.css szabálya: fehér BELÜL, sötét KÍVÜL. */
.image-upload:has(.image-upload__input:focus-visible) .image-upload__pencil[b-seij3gm5rm],
.image-upload:has(.image-upload__input:focus-visible) .image-upload__button[b-seij3gm5rm],
.image-upload__remove:focus-visible[b-seij3gm5rm] {
    outline: var(--focus-ring-width) solid var(--focus-ring-outer);
    outline-offset: var(--focus-ring-offset);
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-inner);
}

@media (max-width: 767.98px) {
    /* A 180 px-es csempe mobilon a kártya fél szélessége — a gombok alá kerülnek. */
    .image-upload__row[b-seij3gm5rm] {
        gap: var(--space-3);
    }

    .image-upload--square .image-upload__frame[b-seij3gm5rm] {
        inline-size: 140px;
        block-size: 140px;
    }
}

/* ── Érintős eszköz: a ceruza teljes értékű célpont ───────────────────────
   ⚠️ MÉRT HIÁNY VOLT: a ceruza 36×36 (kézzel írt érték, a tokent kihagyva), és a NÉGYZETES
   alaknak ez az EGYETLEN feltöltés-indítója — a kör alak feliratos gombja már 44-es. A 36
   a `design-system.md` 44×44-es minimuma alatt van.

   ⚠️ Miért `pointer: coarse`, és miért nem a bázis-szabályban 44: a 44 px a MOBILON 140 px-re
   zsugorodó csempe ~31%-át fedné le, ami a kép fölött aránytalan. Durva mutatónál viszont az
   elvétés ára nagyobb, mint a lefedett terület — ott a célméret nyer. */
@media (pointer: coarse) {
    .image-upload__pencil[b-seij3gm5rm] {
        inline-size: var(--size-touch-target);
        block-size: var(--size-touch-target);
    }
}
/* /Components/Ui/InlineNotice.razor.rz.scp.css */
.notice[b-1883c1bai3] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-control);
    font: var(--text-sm);
}

/*
 * ⚠️⚠️ AMI ITT VOLT: `background-color: currentColor` + `font-size: 0` + egy `::before` pötty —
 * vagyis a jel MIND A NÉGY tónuson UGYANAZ a telt kör volt, és a `Symbol` karaktere a `font-size:
 * 0` miatt láthatatlan. A tónusok tehát KIZÁRÓLAG a szín alapján váltak el. Ma az ikon maga a jel:
 * a `--size-icon-md` a keret, a szín pedig a `.notice--*` szabályból ÖRÖKLŐDIK az ikon
 * `stroke="currentColor"`-ján át — ezért nincs itt sem `color:`, sem `stroke:` deklaráció.
 */
.notice__icon[b-1883c1bai3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: var(--size-icon-md);
    block-size: var(--size-icon-md);
}

.notice__body[b-1883c1bai3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.notice__title[b-1883c1bai3] {
    margin: 0;
    font: var(--text-h3);
}

.notice__text[b-1883c1bai3] {
    max-inline-size: 68ch;
}

.notice--info[b-1883c1bai3] {
    background-color: var(--cat-content-subtle);
    color: var(--cat-content-text);
}

.notice--warning[b-1883c1bai3] {
    background-color: var(--cat-warning-subtle);
    color: var(--cat-warning-text);
}

.notice--success[b-1883c1bai3] {
    background-color: var(--cat-success-subtle);
    color: var(--cat-success-text);
}

.notice--danger[b-1883c1bai3] {
    background-color: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
    color: var(--color-danger-text);
}
/* /Components/Ui/PageHeader.razor.rz.scp.css */
.page-header[b-nv825mcufj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-block-end: var(--space-5);
    border-block-end: 1px solid var(--color-border);
}

.page-header__breadcrumb ol[b-nv825mcufj] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.page-header__breadcrumb li + li[b-nv825mcufj]::before {
    content: "›";
    margin-inline-end: var(--space-2);
}

/* A morzsamenü első eleme pink SZÖVEG — tehát --color-primary-text, nem #FF3EAA. */
.page-header__breadcrumb li:first-child a[b-nv825mcufj] {
    color: var(--color-primary-text);
}

.page-header__row[b-nv825mcufj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.page-header__titles[b-nv825mcufj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-inline-size: 0;
}

/*
    A H1 és a mellette álló `(i)` EGY sorban.

    ⚠️ A `baseline` igazítás szándékos a `center` helyett: a H1 26/34 px, az ikon 20 px — középre
    igazítva az ikon optikailag a betűtest fölé csúszna. A `gap` a `--space-3`, hogy az ikon a
    címhez tartozzon, ne külön elemnek látsszon.

    ⚠️ A `flex-wrap` azért kell, mert a H1 mobilon tördelhet: enélkül az ikon kiszorítaná a
    címet a saját sorából.
*/
.page-header__heading[b-nv825mcufj] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.page-header__title[b-nv825mcufj] {
    margin: 0;
    font: var(--text-h1);
}

/*
    A H1 melletti `(i)` — ugyanazt a súgó-panelt nyitja, mint az „Útmutató" gomb.

    ⚠️ A SZÍN `color:`, NEM `stroke:`. Az `Icon` `stroke="currentColor"`-t visel, tehát a SZÜLŐ
    szövegszínéből veszi. Egy `svg { stroke: … }` szabály ráadásul scoped CSS-ben `svg[b-hash]`-re
    fordulna, ami a gyerekkomponens elemére nem illeszkedik — némán hatástalan volna.

    ⚠️ A `--color-text-muted` (fehéren 5.74) a másodlagos súly. Pink NEM jöhet ide: a `#FF3EAA`
    fehéren 3.22, és bár ez ikon, a `color:` deklarációt a kontraszt-kapu SZÖVEGSZÍNKÉNT méri —
    joggal, mert ugyanez a szabály örökölhetne feliratra.

    ⚠️ A TAPINTÁSI CÉLMÉRET `pointer: coarse`-on 44 px, nem `max-width`-en: a célméretet a mutató
    dönti el, nem a viewport szélessége — táblagépen ujjal megy.
*/
.page-header__info[b-nv825mcufj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--size-icon-lg);
    block-size: var(--size-icon-lg);
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out);
}

.page-header__info:hover[b-nv825mcufj] {
    color: var(--color-text);
}

@media (pointer: coarse) {
    .page-header__info[b-nv825mcufj] {
        inline-size: var(--size-touch-target);
        block-size: var(--size-touch-target);
    }
}

.page-header__title:focus[b-nv825mcufj] {
    /* Programozott fókusz navigáció után — gyűrű nélkül, mert nem billentyűzetes interakció. */
    outline: none;
}

.page-header__description[b-nv825mcufj] {
    margin: 0;
    max-inline-size: 68ch;
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.page-header__actions[b-nv825mcufj] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

@media (max-width: 767.98px) {
    .page-header__actions[b-nv825mcufj] {
        inline-size: 100%;
    }
}

/*
    A fejléc alatti tájékoztató sor.

    ⚠️ A terv a JOBB SZÉLRE rajzolja, a leírás sorának magasságában. Rácsban odarakva a hosszú
    leírás mellett elcsúszna; saját sorként jobbra igazítva ugyanaz az optikai eredmény, és
    mobilon magától a bal szélre kerül a szöveg alá — ott a jobb szél a legrosszabb hely, mert
    a szem a bekezdés végétől ugrana vissza.

    ⚠️ A `color:` itt SZÖVEGSZÍN: `--color-text-muted` (fehéren 5.74). Az ikon ugyanezt örökli az
    SVG `stroke="currentColor"`-ján keresztül — nem kap külön, halványabb tokent.
*/

.page-header__note[b-nv825mcufj] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-end;
    margin: 0;
    text-align: end;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.page-header__note-mark[b-nv825mcufj] {
    display: inline-flex;
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    .page-header__note[b-nv825mcufj] {
        align-self: flex-start;
        text-align: start;
    }
}
/* /Components/Ui/ProgressRing.razor.rz.scp.css */
/* ProgressRing — kör alakú haladás-jelző.

   A kitöltés DEKORATÍV (`-solid` tokenek): a jelentést az aria-* párok és a látható szám
   viszik. Ezért nincs egyetlen `color: var(--cat-*-solid)` deklaráció sem ebben a fájlban. */

.progress-ring[b-jsdnsaeoyi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.progress-ring__dial[b-jsdnsaeoyi] {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 96px;
    block-size: 96px;
}

.progress-ring__gauge[b-jsdnsaeoyi] {
    inline-size: 100%;
    block-size: 100%;
}

.progress-ring__svg[b-jsdnsaeoyi] {
    inline-size: 100%;
    block-size: 100%;
    /* A stroke-dasharray a 3 óra pozícióból indul; a haladás-jelzők felül kezdődnek. */
    transform: rotate(-90deg);
}

.progress-ring__track[b-jsdnsaeoyi],
.progress-ring__fill[b-jsdnsaeoyi] {
    fill: none;
    stroke-width: 4;
}

.progress-ring__track[b-jsdnsaeoyi] {
    stroke: var(--color-border);
}

.progress-ring__fill[b-jsdnsaeoyi] {
    stroke: var(--cat-brand-solid);
    stroke-linecap: round;
    transition: stroke-dasharray var(--duration-base) var(--ease-out);
}

.progress-ring__gauge--content .progress-ring__fill[b-jsdnsaeoyi] {
    stroke: var(--cat-content-solid);
}

.progress-ring__gauge--academy .progress-ring__fill[b-jsdnsaeoyi] {
    stroke: var(--cat-academy-solid);
}

.progress-ring__gauge--community .progress-ring__fill[b-jsdnsaeoyi] {
    stroke: var(--cat-community-solid);
}

.progress-ring__gauge--success .progress-ring__fill[b-jsdnsaeoyi] {
    stroke: var(--cat-success-solid);
}

.progress-ring__gauge--warning .progress-ring__fill[b-jsdnsaeoyi] {
    stroke: var(--cat-warning-solid);
}

.progress-ring__gauge--neutral .progress-ring__fill[b-jsdnsaeoyi],
.progress-ring__gauge--danger .progress-ring__fill[b-jsdnsaeoyi] {
    stroke: var(--color-text-muted);
}

/* A szám a kör közepén, de a progressbar elemen KÍVÜL — l. a komponens megjegyzését. */
.progress-ring__value[b-jsdnsaeoyi] {
    position: absolute;
    font: var(--text-h2);
    color: var(--color-text);
}

.progress-ring__caption[b-jsdnsaeoyi] {
    margin: 0;
    max-inline-size: 24ch;
    text-align: center;
    font: var(--text-sm);
    color: var(--color-text-muted);
}
/* /Components/Ui/SaveStatus.razor.rz.scp.css */
.save-status[b-1mdyujzo4f] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: var(--size-touch-target);
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.save-status--saved[b-1mdyujzo4f] {
    color: var(--cat-success-text);
}

.save-status--invalid[b-1mdyujzo4f],
.save-status__failure[b-1mdyujzo4f] {
    color: var(--color-danger-text);
}
/* /Components/Ui/SlideOverPanel.razor.rz.scp.css */
/*
    A becsúszó panel.

    ⚠️ Mobilon (<768 px) ALULRÓL csúszik fel, teljes szélességben — a design-system
    Reszponzivitás szakasza ezt kimondja. Nem esztétika: 480 px-es oldalpanel egy 360 px-es
    képernyőn a tartalmat egy karakter szélességűre nyomná.
*/

.slide-over[b-ourfnrluhc] {
    position: fixed;
    inset: 0;
    z-index: var(--z-panel);
    display: flex;
    justify-content: flex-end;
    overscroll-behavior: contain;
}

.slide-over__backdrop[b-ourfnrluhc] {
    position: absolute;
    inset: 0;
    background: var(--overlay-backdrop);
}

.slide-over__panel[b-ourfnrluhc] {
    position: relative;
    display: flex;
    flex-direction: column;
    inline-size: min(var(--size-panel), 100%);
    max-inline-size: 100%;
    background: var(--color-surface);
    box-shadow: var(--shadow-overlay);
    border-start-start-radius: var(--radius-card);
    border-end-start-radius: var(--radius-card);
}

.slide-over__header[b-ourfnrluhc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-card);
    border-block-end: 1px solid var(--color-border);
}

.slide-over__title[b-ourfnrluhc] {
    margin: 0;
    font: var(--text-h2);
}

.slide-over__close[b-ourfnrluhc] {
    flex-shrink: 0;
    inline-size: var(--size-touch-target);
    block-size: var(--size-touch-target);
    padding: 0;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.slide-over__body[b-ourfnrluhc] {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-card);
    scroll-padding: var(--space-2);
}

.slide-over__footer[b-ourfnrluhc] {
    padding: var(--space-card);
    border-block-start: 1px solid var(--color-border);
}

.slide-over__done[b-ourfnrluhc] {
    min-block-size: var(--size-touch-target);
    padding-inline: var(--space-5);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text);
    font: var(--text-body);
    cursor: pointer;
}

/* Az őrszem nem látszik és nem foglal helyet, de FÓKUSZÁLHATÓ marad — ez a csapda lényege. */
.slide-over__sentinel[b-ourfnrluhc] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
}

@media (max-width: 767.98px) {
    .slide-over[b-ourfnrluhc] {
        align-items: flex-end;
        justify-content: stretch;
    }

    .slide-over__panel[b-ourfnrluhc] {
        inline-size: 100%;
        max-block-size: 88vh;
        border-radius: var(--radius-card) var(--radius-card) 0 0;
    }
}
/* /Components/Ui/StatTile.razor.rz.scp.css */
/* StatTile — kör ikon + nagy szám + felirat + delta.

   Az ikon-kör a kategória `-subtle` háttere; a benne álló ikon a `-text` tokenből kap színt, mert
   a `-solid` a világosszürkén már 3:1 alatt van (l. tokens.css). A `color:` deklaráció itt az
   SVG `stroke="currentColor"`-jára hat — az ikon a szülő szövegszínét veszi fel. */

.stat-tile[b-zwnphn1yvo] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-inline-size: 0;
}

.stat-tile__icon[b-zwnphn1yvo] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--radius-pill);
    background-color: var(--cat-success-subtle);
    color: var(--cat-success-text);
}

.stat-tile--brand .stat-tile__icon[b-zwnphn1yvo] {
    background-color: var(--cat-brand-subtle);
    color: var(--cat-brand-text);
}

.stat-tile--content .stat-tile__icon[b-zwnphn1yvo] {
    background-color: var(--cat-content-subtle);
    color: var(--cat-content-text);
}

.stat-tile--academy .stat-tile__icon[b-zwnphn1yvo] {
    background-color: var(--cat-academy-subtle);
    color: var(--cat-academy-text);
}

.stat-tile--community .stat-tile__icon[b-zwnphn1yvo] {
    background-color: var(--cat-community-subtle);
    color: var(--cat-community-text);
}

.stat-tile--warning .stat-tile__icon[b-zwnphn1yvo] {
    background-color: var(--cat-warning-subtle);
    color: var(--cat-warning-text);
}

.stat-tile--neutral .stat-tile__icon[b-zwnphn1yvo] {
    background-color: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.stat-tile--danger .stat-tile__icon[b-zwnphn1yvo] {
    background-color: var(--color-surface-muted);
    color: var(--color-danger-text);
}

.stat-tile__body[b-zwnphn1yvo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: 0;
}

.stat-tile__value[b-zwnphn1yvo] {
    margin: 0;
    font: var(--text-display);
}

.stat-tile__label[b-zwnphn1yvo] {
    margin: 0;
    font: var(--text-body);
    font-weight: 600;
}

.stat-tile__delta[b-zwnphn1yvo] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}
/* /Components/Wizard/WizardProgress.razor.rz.scp.css */
.wizard-progress[b-cf2mfi472k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-block-end: var(--space-5);
}

/* Dekoratív kitöltés: felirat nincs rajta, a százalék az aria-valuenow-ban utazik. */
.wizard-progress__bar[b-cf2mfi472k] {
    block-size: 8px;
    border-radius: var(--radius-pill);
    background-color: var(--color-border);
    overflow: hidden;
}

.wizard-progress__fill[b-cf2mfi472k] {
    display: block;
    block-size: 100%;
    background-color: var(--color-primary);
    transition: inline-size var(--duration-base) var(--ease-out);
}

.wizard-progress__steps[b-cf2mfi472k] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wizard-progress__step[b-cf2mfi472k] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.wizard-progress__number[b-cf2mfi472k] {
    display: grid;
    place-items: center;
    inline-size: 24px;
    block-size: 24px;
    border-radius: var(--radius-pill);
    background-color: var(--color-surface-muted);
    font: var(--text-xs);
}

/* Feliratot HORDOZÓ pink felület — ezért a -strong token, fehér szöveggel (5.75:1). */
.wizard-progress__step.is-current .wizard-progress__number[b-cf2mfi472k],
.wizard-progress__step.is-done .wizard-progress__number[b-cf2mfi472k] {
    background-color: var(--color-primary-strong);
    color: var(--color-text-inverse);
}

.wizard-progress__step.is-current .wizard-progress__label[b-cf2mfi472k] {
    color: var(--color-text);
    font-weight: 600;
}

/* Mobilon a négy címke egymás alá törne; ott csak az aktív lépés neve marad. */
@media (max-width: 767.98px) {
    .wizard-progress__step:not(.is-current) .wizard-progress__label[b-cf2mfi472k] {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}
/* /Components/Wizard/WizardStep.razor.rz.scp.css */
.wizard-step[b-i4m6xmyl5y] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.wizard-step__title[b-i4m6xmyl5y] {
    margin: 0;
    font: var(--text-h2);
}

/* A fókusz a címsorra kerül lépésváltáskor — a gyűrűnek látszania kell. */
.wizard-step__title:focus-visible[b-i4m6xmyl5y] {
    border-radius: var(--radius-control);
}

.wizard-step__lead[b-i4m6xmyl5y] {
    margin: 0;
    max-inline-size: 60ch;
    font: var(--text-body);
    color: var(--color-text-muted);
}

.wizard-step__body[b-i4m6xmyl5y] {
    display: flex;
    flex-direction: column;
    gap: var(--space-grid-gap);
}

.wizard-step__nav[b-i4m6xmyl5y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding-block-start: var(--space-2);
}

/* A „Később folytatom" a sor végére kerül, elkülönítve a léptetéstől. */
.wizard-step__nav > :last-child[b-i4m6xmyl5y] {
    margin-inline-start: auto;
}

@media (max-width: 767.98px) {
    .wizard-step__nav > *[b-i4m6xmyl5y] {
        flex: 1 1 100%;
    }

    .wizard-step__nav > :last-child[b-i4m6xmyl5y] {
        margin-inline-start: 0;
    }
}
/* /Layout/AdminLayout.razor.rz.scp.css */
.admin[b-pr0o4x8dzw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-section);
}

/*
   A sárga sáv az egyetlen olyan felület, ami MINDEN admin-képernyőn ott van — ez tartja
   ébren, hogy a szerkesztés nem a saját márkát érinti.

   A --cat-warning-text (#92400E) a --cat-warning-subtle (#FEF3E2) hátteren 6.24:1.
*/
.admin__band[b-pr0o4x8dzw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-inline-start: 4px solid var(--cat-warning-solid);
    border-radius: var(--radius-control);
    background-color: var(--cat-warning-subtle);
    color: var(--cat-warning-text);
    font: var(--text-sm);
}

.admin__band-tag[b-pr0o4x8dzw] {
    font: var(--text-xs);
    font-weight: 700;
    letter-spacing: .12em;
}
/* /Layout/AdminNavMenu.razor.rz.scp.css */
.admin-nav[b-1y0hk92gly] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.admin-nav__brand[b-1y0hk92gly] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block-end: var(--space-4);
    /*
        ⚠️ A sárga csík az admin-felület legolcsóbb „hol vagyok" jelzése, és ez a menü egyetlen
        pontja, ahol eltér a fő menütől — a törzsadat véletlen szerkesztésének magas ára van.
    */
    border-block-end: 2px solid var(--cat-warning-solid);
}

/*
   ⚠️ A jel SZÖVEG (glifa), tehát nem kaphatja a --cat-warning-solid tokent: a `-solid`
   kizárólag kitöltés. A sárgát itt a fenti szegély viszi, a glifa fehér (18.88:1).
*/
/* A `font-size` a glifa mérete volt; az ikon a saját `Size`-át viszi. A `color:` MARAD — az
 * ikon `stroke="currentColor"`-t használ, tehát a sötét felületen ez adja a fehér vonalat. */
.admin-nav__mark[b-1y0hk92gly] {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-inverse);
}

.admin-nav__title[b-1y0hk92gly] {
    display: block;
    color: var(--color-text-inverse);
    font: var(--text-h3);
    letter-spacing: .08em;
}

.admin-nav__sub[b-1y0hk92gly] {
    display: block;
    color: var(--color-text-muted-inverse);
    font: var(--text-xs);
    letter-spacing: .12em;
}

.admin-nav__exit[b-1y0hk92gly] {
    display: flex;
    align-items: center;
    min-block-size: var(--size-touch-target);
    padding-inline: var(--space-3);
    border-radius: var(--radius-pill);
    background-color: rgb(255 255 255 / .08);
    color: var(--color-text-inverse);
    font: var(--text-sm);
    text-decoration: none;
}

.admin-nav__exit:hover[b-1y0hk92gly] {
    background-color: rgb(255 255 255 / .16);
}

.admin-nav__list[b-1y0hk92gly],
.admin-nav__sublist[b-1y0hk92gly] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-nav__sublist[b-1y0hk92gly] {
    margin-block-start: var(--space-1);
    margin-inline-start: var(--space-4);
}

.admin-nav__group[b-1y0hk92gly] {
    display: block;
    padding: var(--space-3) var(--space-3) var(--space-1);
    color: var(--color-text-muted-inverse);
    font: var(--text-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
}

/*
   ⚠️⚠️ `::deep` — ugyanaz a mért hiba, mint a NavMenu.razor.css-ben (a11y audit, 1. lelet): a
   pontokat a `NavLink` gyerek-komponens rendereli, ennek a fájlnak a scope-attribútuma nélkül.
   A `::deep` nélküli szabály helyett az app.css `a` sora nyert (2,90:1 a sötét sávon). A kilépő
   link (`.admin-nav__exit`) literál <a>, ott a sima szabály helyes volt és marad.
*/
.admin-nav[b-1y0hk92gly]  .admin-nav__link,
.admin-nav[b-1y0hk92gly]  .admin-nav__sublink {
    display: flex;
    align-items: center;
    min-block-size: var(--size-touch-target);
    padding-inline: var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--color-text-inverse);
    font: var(--text-body);
    text-decoration: none;
}

.admin-nav[b-1y0hk92gly]  .admin-nav__sublink {
    min-block-size: 36px;
    color: var(--color-text-muted-inverse);
    font: var(--text-sm);
}

.admin-nav[b-1y0hk92gly]  .admin-nav__link:hover,
.admin-nav[b-1y0hk92gly]  .admin-nav__sublink:hover {
    background-color: rgb(255 255 255 / .08);
}

/*
   ⚠️ Az aktív admin-menüpont NEM pink: a pink az alkalmazás elsődleges színe, és az admin
   felületnek meg kell különböztethetőnek maradnia. A sárga -solid kitöltésen a felirat SÖTÉT
   (#D97706-on a #111111 5.93:1) — fehér felirattal 3.19 lenne, ami bukik (normál szöveghez 4.5
   kell). ⚠️ A két számot 2026-09-25-ig hamisan írta ez a sor (8.16, ill. 2.57); a böngészőben
   mérve és a tokenekből számolva is 5.93 — fókusz-audit, 12. lelet.
*/
.admin-nav[b-1y0hk92gly]  .admin-nav__link.active,
.admin-nav[b-1y0hk92gly]  .admin-nav__sublink.active {
    background-color: var(--cat-warning-solid);
    color: var(--color-text);
    font-weight: 600;
}
/* /Layout/AuthLayout.razor.rz.scp.css */
.auth[b-fqkm6bhlk9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    min-block-size: 100dvh;
    padding: var(--space-7) var(--space-4);
}

.auth__card[b-fqkm6bhlk9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    inline-size: 100%;
    max-inline-size: 420px;
    padding: var(--space-card);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.auth__logo[b-fqkm6bhlk9] {
    margin: 0;
    font: var(--text-h2);
    letter-spacing: .04em;
}

/* Világos háttéren a pink SZÖVEG a --color-primary-text (6.65:1), nem a #FF3EAA (3.10). */
.auth__logo-accent[b-fqkm6bhlk9] {
    color: var(--color-primary-text);
}

.auth__legal[b-fqkm6bhlk9] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

/*
    Az auth-képernyők közös űrlap-alakja.

    ⚠️ ITT él, nem oldalanként: hat képernyő használja ugyanezt (bejelentkezés, regisztráció,
    „elküldtük", megerősítés, visszaállítás kérése, új jelszó). Oldalankénti scoped CSS-sel
    hatszor kellene leírni ugyanazt, és egy hetediknél elfelejtődne. A `::deep` azért kell, mert a
    kártya tartalma a `@Body`-ból jön, tehát MÁS komponens scope-jában áll.
*/

.auth__card[b-fqkm6bhlk9]  .auth-form__title {
    font: var(--text-h1);
}

.auth__card[b-fqkm6bhlk9]  .auth-form__lead {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--text-body);
}

.auth__card[b-fqkm6bhlk9]  .auth-form,
.auth__card[b-fqkm6bhlk9]  .auth-form__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.auth__card[b-fqkm6bhlk9]  .auth-form__secondary {
    margin: 0;
    font: var(--text-sm);
    text-align: center;
}

/* ── Hozzájárulások ─────────────────────────────────────────────────────── */

.auth__card[b-fqkm6bhlk9]  .auth-form__consents {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    border: 0;
}

.auth__card[b-fqkm6bhlk9]  .auth-form__consent {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    font: var(--text-sm);
}

/* A jelölőnégyzet a 24 px-es érintési célt kapja: a 13 px-es alapérték mobilon eltalálhatatlan. */
.auth__card[b-fqkm6bhlk9]  .auth-form__consent input[type="checkbox"] {
    flex: none;
    inline-size: var(--space-5);
    block-size: var(--space-5);
    margin: 0;
}

/* „Kötelező" / „nem kötelező" — halkabb, mint a mondat, de nem olvashatatlan. */
.auth__card[b-fqkm6bhlk9]  .auth-form__consent-required,
.auth__card[b-fqkm6bhlk9]  .auth-form__consent-optional {
    display: block;
    color: var(--color-text-muted);
}
/* /Layout/LegalLayout.razor.rz.scp.css */
.legal-page[b-lbhborinhb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-block-size: 100dvh;
    padding: var(--space-6) var(--space-4);
}

.legal-page__head[b-lbhborinhb],
.legal-page__main[b-lbhborinhb],
.legal-page__foot[b-lbhborinhb] {
    inline-size: 100%;
    /* A tartalom-szélességet a lap tartja, hogy a fejléc és a szöveg egy vonalban induljon. */
    max-inline-size: 74ch;
    margin-inline: auto;
}

.legal-page__logo[b-lbhborinhb] {
    margin: 0;
    font: var(--text-h2);
    letter-spacing: .04em;
}

/* Világos háttéren a pink SZÖVEG a --color-primary-text (6.65:1), nem a #FF3EAA (3.10). */
.legal-page__logo-accent[b-lbhborinhb] {
    color: var(--color-primary-text);
}

.legal-page__product[b-lbhborinhb] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.legal-page__foot[b-lbhborinhb] {
    margin-block-start: auto;
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border);
    font: var(--text-sm);
    color: var(--color-text-muted);
}

/*
    Nyomtatásban a fejléc és a lábléc csak papírt fogyaszt: a linkek nem kattinthatók, a logó
    pedig minden lapra rákerülne. A jogi szöveg maga a nyomtatvány.
*/
@media print {
    .legal-page[b-lbhborinhb] {
        gap: var(--space-4);
        padding: 0;
    }

    .legal-page__head[b-lbhborinhb],
    .legal-page__foot[b-lbhborinhb] {
        display: none;
    }

    .legal-page__main[b-lbhborinhb] {
        max-inline-size: none;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/*
    A vázat az AppShell viszi — ez a fájl szándékosan üres marad, hogy ne keletkezzen második,
    versengő layout-forrás. Ha egy oldalnak más váz kell (AuthLayout, „Telefonbarát nézet"),
    az külön layout-komponens, nem felülírás.

    Az egyetlen kivétel az admin belépési pontja: a láblécben él, tehát az AppShell nem tud róla.
*/

/*
   ⚠️ A link a sötét sidebaron áll: a felirat a --color-text-inverse (18.88:1), NEM a
   --color-text-muted-inverse — a belépési pontnak kattinthatónak kell LÁTSZANIA. A sárga jel a
   sáv színe az admin felületen: ugyanaz a jelzés a két oldalon.
*/
.layout__admin[b-74tqumoffi] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--size-touch-target);
    margin-block-end: var(--space-2);
    padding-inline: var(--space-3);
    border: 1px solid rgb(255 255 255 / .24);
    border-radius: var(--radius-pill);
    color: var(--color-text-inverse);
    font: var(--text-sm);
    text-decoration: none;
}

.layout__admin:hover[b-74tqumoffi] {
    background-color: rgb(255 255 255 / .08);
}

/*
   A kijelentkezés — a lábléc utolsó művelete.

   ⚠️ HALVÁNYABB, MINT AZ ADMIN-LINK, ÉS EZ SZÁNDÉKOS: a --color-text-muted-inverse (#9A9A9A) a
   sidebaron 6.92:1 — AA fölött, tehát olvasható marad, de nem versenyez a napi navigációval. A
   kilépés nem cél, hanem kijárat: a menü egyetlen eleme, aminek NEM szabad magához vonzania a
   tekintetet. (A hover a --color-text-inverse-re vált, 19.47:1.)

   ⚠️ Nincs veszély-szín: a kilépés visszafordítható, a visszaút egy belépés. A `danger` piros
   itt a törlések súlyát hazudná.
*/
.layout__logout[b-74tqumoffi] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    inline-size: 100%;
    min-block-size: var(--size-touch-target);
    margin-block-end: var(--space-2);
    padding-inline: var(--space-3);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-muted-inverse);
    font: var(--text-sm);
    text-align: start;
    cursor: pointer;
}

.layout__logout:hover[b-74tqumoffi] {
    background-color: rgb(255 255 255 / .08);
    color: var(--color-text-inverse);
}

/*
   ⚠️⚠️ A `:disabled` ÁG MEGSZŰNT (2026-09-04), MERT A GOMBRÓL LEKERÜLT A `disabled`. A `Button`
   primitív doktrínája szerint a tiltott gomb sosem kap `disabled` attribútumot: nem
   fókuszálható, és a képernyőolvasónak láthatatlan — vagyis a „Kijelentkezés…" el sem hangzott
   volna. A kettős beküldést a `LogoutAsync` első sora zárja, nem a böngésző.

   ⚠️ ÉS EZZEL A HALVÁNYÍTÁS IS ELTŰNT, SZÁNDÉKOSAN. A régi `opacity: .6` a `#9A9A9A` feliratot a
   `#000D20` sávon 6.92:1-ről 3.15:1-re vitte le (a kompozit szín 92, 98, 105) — AA alá, egy
   olyan állapotban, amit a felhasználó épp a leginkább olvasni akar. A „dolgozom" jelzést a
   SZÖVEG viszi („Kijelentkezés…") és az `aria-busy`, nem a kontraszt elvétele.

   ⚠️ A jelölő az `aria-busy`, nem osztály: ugyanaz az attribútum vezeti a mutatót, ami a
   képernyőolvasónak is szól — így a kettő nem tud szétcsúszni.
*/
.layout__logout[aria-busy="true"][b-74tqumoffi] {
    cursor: progress;
}
/* /Layout/NavMenu.razor.rz.scp.css */
.nav[b-656s02bfvw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.nav__logo[b-656s02bfvw] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-inverse);
    text-decoration: none;
}

/*
   A logó jele RAKÉTA, nem glifa — a szöveg-pink inverz tokenjével (a sidebaron 6.05).

   ⚠️ A terv illusztrációja (rakéta + ív + csillagok) NEM ez: az egy rajzolt asset
   (`docs/input/gps logo.png`), nem vonalas ikon. Amíg az asset nincs a wwwroot alatt, a Lucide
   `rocket` a helyőrző — de olyan helyőrző, ami a terv MOTÍVUMÁT viszi, nem egy találomra
   választott ◎ glifát (ami ráadásul a Márka ikonjával is azonos volt).
*/
.nav__logo-mark[b-656s02bfvw] {
    color: var(--color-primary-text-inverse);
}

.nav__logo-text[b-656s02bfvw] {
    display: block;
    font: var(--text-h3);
    letter-spacing: .04em;
}

/*
   ⚠️ A „FEL" pink SZÖVEG a sötét sidebaron. Itt NEM a --color-primary-text (#B01268) a helyes:
   az a --color-sidebaron (#000D20) 2.90 — bukja a 4,5:1-et. A sötét felület saját szöveg-tokent
   kap (--color-primary-text-inverse, #FF3EAA, 6.05).
*/
.nav__logo-accent[b-656s02bfvw] {
    color: var(--color-primary-text-inverse);
}

.nav__logo-sub[b-656s02bfvw] {
    display: block;
    font: var(--text-xs);
    color: var(--color-text-muted-inverse);
    letter-spacing: .12em;
}

/*
   ⚠️ A rés --space-2, nem --space-1. Mérve a `docs/input/1 irányítópult/menü.png`-ből: a
   menüpontok osztásköze 66–68 px, a pill maga 59 px — tehát ~8 px rés. A 4 px-es rés a tervhez
   képest ~40%-kal tömörebb sávot adott, és ez az a fajta eltérés, amit a szem „nem ez az" néven
   érzékel, de nem tud megnevezni.
*/
.nav__list[b-656s02bfvw],
.nav__sublist[b-656s02bfvw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav__sublist[b-656s02bfvw] {
    margin-block-start: var(--space-1);
    margin-inline-start: var(--space-6);
}

/*
   ⚠️⚠️ `::deep`, ÉS EZ MÉRT HIBA VOLT, nem ízlés (docs/a11y-audit-2026-09-24.md, 1. lelet).
   A menüpontokat a `NavLink` GYEREK-KOMPONENS rendereli, és az ő <a>-ja nem kapja meg ennek a
   fájlnak a scope-attribútumát. A `::deep` nélküli `.nav__link` ezért SOSEM illeszkedett: a
   helyes `-inverse` szín helyett az app.css `a { color: var(--color-primary-text) }` sora nyert,
   ami a sötét sávon 2,90:1 — minden bejelentkezés utáni oldalon. A scope így a SAJÁT <nav>-on
   ül, a link szabadon illeszkedik.
   Őrök: DesignSurfaceContrastGate (4. szabály — forrás) és NavigationCascadeContrastTests
   (a lefordított scope-bundle-ön számolt kaszkád-győztes).

   ⚠️ A `.nav__link.active .nav__chevron` NEM kap `::deep`-et, és nem is kell: a chevron a
   NavLink ChildContent-jében áll, tehát EZ a komponens rendereli — a scope rajta van.
*/
.nav[b-656s02bfvw]  .nav__link,
.nav[b-656s02bfvw]  .nav__sublink {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-inline: var(--space-3);
    color: var(--color-text-inverse);
    text-decoration: none;
    font: var(--text-body);
}

/*
   A FŐ menüpont geometriája mérésből, nem érzésből — `docs/input/1 irányítópult/menü.png`:

   | Mit          | Terven (252 px sidebar) | Aránnyal a 264 px-ünkön |
   |--------------|-------------------------|-------------------------|
   | pill magasság| 59 px (23.4%)           | ~62 px → 60 px a 4-es rácson |
   | sarokrádiusz | ~10 px                  | --radius-control (10 px) |
   | ikon–felirat | ~16 px                  | --space-4               |

   ⚠️ NEM `--radius-pill`. A 999 px egy 60 px magas elemen 30 px-es rádiuszt jelent — a terven
   mért ~10 px LEKEREKÍTETT TÉGLALAP. Ez a legfeltűnőbb formai eltérés a régi felületen: a
   teljesen kerek végű sáv „chip"-nek látszott, nem menüpontnak.

   ⚠️ A `--size-touch-target` (44 px) ELÉRÉSI minimum, nem tervezési méret. 60 px felette van,
   tehát a szabály továbbra is teljesül — a 44-es érték csak azt tiltja, hogy ez alá menjünk.
*/
.nav[b-656s02bfvw]  .nav__link {
    min-block-size: 60px;
    border-radius: var(--radius-control);
}

.nav[b-656s02bfvw]  .nav__sublink {
    min-block-size: 36px;
    border-radius: var(--radius-pill);
}

/* ⚠️ ÉRINTŐS ESZKÖZÖN 44, ÉS EZ MÉRT HIÁNY VOLT. A fenti 36 px a tervből származik és
   ASZTALON helyes — de mobilon (<768 px) ez a lista a drawer, vagyis a termék TELJES
   navigációja, és a 17 sorból 11 almenüpont. A `--size-touch-target` a design-system szerint
   „elérési MINIMUM, nem tervezési méret" (a fő menüpont 60 px-es indoklása szó szerint erre
   hivatkozik) — az almenüpont viszont csendben ez ALATT állt, és ez a fájl a
   `prefers-reduced-motion`-on kívül egyetlen `@media` blokkot sem vitt.

   ⚠️ `pointer: coarse`, nem `max-width`: a célméretet a MUTATÓ dönti el, nem a viewport —
   egy 1024 px-es táblagépen ugyanígy ujjal megy, és ott nincs drawer. */
@media (pointer: coarse) {
    .nav[b-656s02bfvw]  .nav__sublink {
        min-block-size: var(--size-touch-target);
    }
}

.nav[b-656s02bfvw]  .nav__sublink {
    font: var(--text-sm);
    color: var(--color-text-muted-inverse);
}

.nav[b-656s02bfvw]  .nav__link:hover,
.nav[b-656s02bfvw]  .nav__sublink:hover {
    background-color: rgb(255 255 255 / .08);
}

/*
    ⚠️ Az aktív menüpont kitöltése --color-primary-strong (#C2186F) fehér felirattal = 5.75:1.

    ⚠️⚠️ ÉS A TERV PILLJE NEM #FF3EAA — ezt 2026-08-26-ig rossz forrás-színnel indokoltuk. A
    `menü.png`-ből pipettázva az aktív sáv VÍZSZINTES GRADIENS: #FA246C (bal) → #FB0357 (jobb).
    A fehér felirat ezeken 3.79 és 4.00 — vagyis a terv színe is BUKIK, csak kevesebbel, mint a
    #FF3EAA (3.22). A #C2186F tehát helyes döntés marad, de az indoklás forrása most már mért.

    ⚠️ A GRADIENS SEM ÉPÜL MEG, és ez ugyanaz az ok, nem külön döntés: mindkét végpontja AA alatt
    van, tehát nem az van, hogy „a gradiens szép lenne, de nehéz" — nincs olyan gradiens a terv két
    színéből, amin a fehér felirat megfelel. Ha valaha kell, két ÚJ token kell hozzá, mindkettő
    ≥ 4.5-tel, és akkor a DesignTokenTests mindkettőt méri.
*/
.nav[b-656s02bfvw]  .nav__link.active {
    background-color: var(--color-primary-strong);
    color: var(--color-text-inverse);
    font-weight: 600;
}

.nav[b-656s02bfvw]  .nav__sublink.active {
    color: var(--color-text-inverse);
    font-weight: 600;
}

.nav[b-656s02bfvw]  .nav__sublink.active::before {
    content: "";
    inline-size: 6px;
    block-size: 6px;
    margin-inline-end: var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--color-primary);
}

.nav__link--soon[b-656s02bfvw] {
    opacity: .55;
    cursor: not-allowed;
}

/*
   A meg nem épült ALMENÜPONT — és ez NEM a fej szabályának a másolata.

   ⚠️⚠️ AZ `opacity: .55` ITT SZÁNDÉKOSAN NINCS. A fej fehér feliratot visz
   (--color-text-inverse), amit a .55 a sidebaron ~#8C8C8C-re halványít: 5,79 — még megfelel. Az
   almenüpont viszont már eleve tompított (--color-text-muted-inverse, #9A9A9A, 6,92), és ugyanaz
   a .55 abból ~#555555-öt csinál: a #000D20-on 2,61 — BUKJA a 4,5:1-et. Vagyis a „legyen egységes,
   másoljuk át az opacityt" lépés pont ezen a soron rontaná el az a11y-t. A jelölés hordozója
   marad a tompított szín, a „Hamarosan" badge és a kurzor.
*/
.nav__sublink--soon[b-656s02bfvw] {
    cursor: not-allowed;
}

/*
   Az elválasztó a Közösség és a Fiókom között — a terven halvány 1 px vonal
   (`docs/input/1 irányítópult/menü.png`, a Közösség és a Fiókom sora KÖZÖTT).

   ⚠️ A vonal a LISTAELEMEN él, nem külön <li>-ben és nem <hr>-ben. Egy dekoratív listaelem a
   képernyőolvasónak plusz tételként jelenne meg (a „6 elemből 6." helyett 7), és a
   `role="presentation"` ráadásra a böngészők nem egyformán reagálnak. Az ::before határ
   semmilyen szemantikát nem visz.

   ⚠️ A térköz a HATÁR két oldalán fele-fele, mert a lista `gap: var(--space-2)`-je már ad 8 px-et
   a vonal fölé is: így a Fiókom nem esik ki optikailag a sávból.
*/
.nav__item--divided[b-656s02bfvw] {
    margin-block-start: var(--space-3);
    border-block-start: 1px solid rgb(255 255 255 / .12);
    padding-block-start: var(--space-3);
}

/*
   A szekció-fej jobb szélén álló chevron — a terven a Fiókom sorában.

   ⚠️ `margin-inline-start: auto` és NEM `justify-content: space-between`: az utóbbi az ikon és a
   felirat közötti --space-4-et is szétfeszítené, tehát a piktogram elszakadna a szövegétől.

   ⚠️ A chevron DEKORATÍV (az Icon alapból aria-hidden): a nyitott/zárt állapotot maga a látható
   almenü és a NavLink aria-current-je közli. Egy „Almenü kinyitása" aria-label azt ígérné, hogy a
   chevron külön kattintható — nem az, a teljes sor a link.
*/
.nav__chevron[b-656s02bfvw] {
    margin-inline-start: auto;
    color: var(--color-text-muted-inverse);
    transition: transform var(--duration-fast) var(--ease-out);
}

.nav__chevron--open[b-656s02bfvw] {
    transform: rotate(90deg);
}

/* Az aktív pillen a chevron is fehér — a #9A9A9A a #C2186F-en 2.04 lenne. */
.nav__link.active .nav__chevron[b-656s02bfvw] {
    color: var(--color-text-inverse);
}

@media (prefers-reduced-motion: reduce) {
    .nav__chevron[b-656s02bfvw] {
        transition: none;
    }
}
/* /Layout/ScriptLayout.razor.rz.scp.css */
/*
    A forgatási nézet váza — kizárólag geometria.

    ⚠️ SZÍNT EZ A FÁJL NEM DEKLARÁL, szándékosan. A nézet felülete KÉT médiumon él (képernyőn
    sötét, papíron fehér), és a helyességét egy szűkített teszt méri végig
    (`PlanScriptContrastTests`). Ahhoz, hogy a teszt ne legyen vak, minden szín EGY fájlban kell
    álljon: a `PlanScriptPage.razor.css`-ben. Ugyanez a szabály a `PlanScript.razor.css`-re is —
    ott a fájl fejléce hosszabban indokolja.

    ⚠️ A hordozó felület FESTÉSE is a lapé, nem a vázé: a váz csak a magasságot adja át, hogy a
    lap sötét háttere a betöltés-állapot alatt is a teljes kijelzőt kitöltse. Enélkül az
    `AsyncView` „A terv betöltése…" pillanata világos hátteret villantana egy sötét nézet előtt —
    ring light előtt, éjjel, forgatás előtt.
*/

.script-page[b-2drads0gl5] {
    display: flex;
    flex-direction: column;
    min-block-size: 100dvh;
}

@media print {
    .script-page[b-2drads0gl5] {
        /* Papíron nincs kijelző-magasság; a 100dvh egy üres első oldalt tudna szülni. */
        display: block;
        min-block-size: 0;
    }
}
/* /Pages/Academy/AcademyCategoryPage.razor.rz.scp.css */
/* A kategória-oldal — modul-kártyák rácsa. */

.academy-category__grid[b-bfuej9626q] {
    display: grid;
    /* A rajz három kártyát tesz egy sorba; az `auto-fit` teszi mobilon eggyé, asztalon néggyé —
       a modulok száma admin-döntés, tehát oszlopszámot beégetni találgatás lenne. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-grid-gap);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.academy-category__item[b-bfuej9626q] {
    display: flex;
    min-inline-size: 0;
}

/* ⚠️ `::deep`: a `.card` a Card komponens SAJÁT gyökere — nélküle a szabályból `.card[b-hash]`
   lenne, ami arra sosem illeszkedik, és a kártyák nem töltenék ki a rács-cellát. */
.academy-category__item[b-bfuej9626q]  .card {
    inline-size: 100%;
    display: flex;
    flex-direction: column;
}

.academy-category__description[b-bfuej9626q] {
    margin: 0 0 var(--space-3);
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.academy-category__facts[b-bfuej9626q] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
}

/* A zárolt modul CTA-ja: lakat + felirat egy sorban. ⚠️ Szín NINCS itt: az ikon a tiltott gomb
   saját szövegszínét örökli (`stroke="currentColor"`), tehát a két jel mindig ugyanazt a
   kontrasztot hordja. */
.academy-category__locked-cta[b-bfuej9626q] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* A SORRENDI zár a CTA helyén: lakat + „Előbb fejezd be: {előd}” link. ⚠️ A sor színe a
   szöveg-token (az ikon ezt örökli, `stroke="currentColor"`), a link a pink SZÖVEG-tokenje
   (`--color-primary-text`, fehéren 4.5 fölött) — a `#FF3EAA` itt felirat volna, és fehéren
   csak 3.22:1. A link aláhúzott marad: a kártyán ez az egyetlen interaktív elem, és nem csak a
   színe különbözteti meg a környező szövegtől. */
.academy-category__sequence-lock[b-bfuej9626q] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text);
}

.academy-category__sequence-lock a[b-bfuej9626q] {
    color: var(--color-primary-text);
    text-decoration: underline;
}

@media (pointer: coarse) {
    .academy-category__sequence-lock a[b-bfuej9626q] {
        display: inline-flex;
        align-items: center;
        min-height: var(--size-touch-target);
    }
}

.academy-category__progress-note[b-bfuej9626q] {
    margin: var(--space-2) 0 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

/* A szerkesztő előnézeti linkje a tiltott CTA ALATT. ⚠️ Szöveg-link, nem második gomb: a kártya
   fő feladata a felhasználóé (a tiltott CTA), ez egy mellék-út egyetlen szerepkörnek. A szín a
   szöveg-token (`--color-primary-text`, fehéren 4.5 fölött) — a `#FF3EAA` itt felirat volna. */
.academy-category__preview[b-bfuej9626q] {
    align-self: flex-start;
    margin-block-start: var(--space-2);
    font: var(--text-sm);
    color: var(--color-primary-text);
}

.academy-category__preview-audience[b-bfuej9626q] {
    color: var(--color-text-muted);
}

@media (pointer: coarse) {
    .academy-category__preview[b-bfuej9626q] {
        display: inline-flex;
        align-items: center;
        min-height: var(--size-touch-target);
    }
}

/* A haladás-sáv: bal oldalt a sáv, jobb szélén a „Folytatás” gomb (`3social-média/_Social-Média.png`).
   ⚠️ `flex-wrap`: keskeny kijelzőn a gomb a sáv ALÁ törik, nem nyomja össze — a sáv felirata
   („3 / 5 modul kész”) különben szavanként tördelődne. */
.academy-category__progress[b-bfuej9626q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
}

.academy-category__progress-bar[b-bfuej9626q] {
    flex: 1 1 280px;
    min-inline-size: 0;
}

.academy-category__continue-label[b-bfuej9626q] {
    margin-inline-end: var(--space-2);
}

/* „Minden modul kész” — a gomb helyén. ⚠️ Szöveg-token, nem a zöld kitöltés: ez felirat, és a
   pipa ikon a szöveg színét örökli (`stroke="currentColor"`), tehát a jel nem csak szín. */
.academy-category__all-done[b-bfuej9626q] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text);
}
/* /Pages/Academy/AcademyHome.razor.rz.scp.css */
/* Az Akadémia kezdőlapja — kategória-kártyák. */

.academy-home__lead[b-86rjab4iug] {
    margin: var(--space-5) 0 var(--space-4);
    font: var(--text-body);
    color: var(--color-text-muted);
}

.academy-home__grid[b-86rjab4iug] {
    display: grid;
    /* A rajz két kártyát mutat egymás mellett; az `auto-fit` a HARMADIK kategóriát is elbírja,
       amikor a megrendelő felveszi — beégetett `1fr 1fr` mellett az szétesne. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-grid-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.academy-home__item[b-86rjab4iug] {
    display: flex;
    min-inline-size: 0;
}

/* ⚠️ `::deep`, mert a `.card` a Card komponens SAJÁT jelölése: nélküle a szabályból
   `.card[b-ezenalap]` lenne, ami a gyerek gyökerére sosem illeszkedik — a kártya nem nyúlna ki. */
.academy-home__item[b-86rjab4iug]  .card {
    inline-size: 100%;
}

.academy-home__description[b-86rjab4iug] {
    margin: 0 0 var(--space-4);
    font: var(--text-body);
    color: var(--color-text);
}

.academy-home__count[b-86rjab4iug] {
    margin: 0 0 var(--space-4);
}
/* /Pages/Academy/AcademyModulePage.razor.rz.scp.css */
/* A kurzus-oldal — fő oszlop + oldalsáv, a rajz szerinti arányban. */

.academy-module[b-2awscqaciq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: var(--space-grid-gap);
    align-items: start;
    margin-block-start: var(--space-5);
}

.academy-module__main[b-2awscqaciq],
.academy-module__side[b-2awscqaciq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-grid-gap);
    min-inline-size: 0;
}

/* A haladás-sáv és a „Folytatás” gomb egy sorban; a sáv nyúlik, a gomb nem. */
.academy-module__progress[b-2awscqaciq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.academy-module__progress[b-2awscqaciq]  .academy-progress {
    flex: 1 1 240px;
}

.academy-module__lessons[b-2awscqaciq] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.academy-module__facts[b-2awscqaciq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

/* ── A zárolt modul — az ÖTÖDIK ág (l. `AcademyModuleLoad`) ────────────────────────────────
   Az `AsyncView` üres állapotának kártya-alakját követi, mert a felhasználónak ugyanaz a
   helyzete: itt most nincs mit megnyitni, és egy gomb visszavisz. A lakat a különbség. */
.academy-module__locked[b-2awscqaciq] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
    padding: var(--space-card);
    padding-block: var(--space-6);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* ⚠️ Az ikon színe `color:`, NEM `stroke:` — az `Icon` saját `svg`-je `stroke="currentColor"`
   prezentációs attribútumot visel, tehát a szülő `color`-ját örökli; egy örökölt `stroke`
   hatástalan lenne. ⚠️ És a kategória SZÖVEG-tokenje, nem a dekoratív kitöltés: a
   kontraszt-kapu minden `color:`-t szövegszínként mér, itt a helyi háttérrel párban. */
.academy-module__locked-icon[b-2awscqaciq] {
    display: inline-flex;
    padding: var(--space-3);
    border-radius: 50%;
    background-color: var(--cat-academy-subtle);
    color: var(--cat-academy-text);
}

.academy-module__locked-title[b-2awscqaciq] {
    margin: 0;
    font: var(--text-h2);
}

.academy-module__locked-body[b-2awscqaciq] {
    margin: 0;
    max-inline-size: 52ch;
    color: var(--color-text-muted);
}

/* A sorrendi ág másodlagos visszaútja a fő CTA („Tovább: {előd}”) alatt. ⚠️ Szöveg-link, nem
   második gomb: a következő lépés EGY, a témakör csak kitérő. A szín a pink SZÖVEG-tokenje
   (`--color-primary-text`) — a `#FF3EAA` itt felirat volna, fehéren csak 3.22:1. */
.academy-module__locked-secondary[b-2awscqaciq] {
    font: var(--text-sm);
    color: var(--color-primary-text);
}

/* A „Modul kész! Megnyílt: …” sáv tárolója — a fókusz célpontja (`tabindex="-1"`). ⚠️ A
   programozott fókusz körvonala MARAD (nincs `outline: none`): a billentyűzetes felhasználónak ez
   mutatja meg, hová került a fókusz a jelölés után. */
.academy-module__unlocked[b-2awscqaciq] {
    border-radius: var(--radius-card);
}

@media (pointer: coarse) {
    .academy-module__locked-secondary[b-2awscqaciq] {
        display: inline-flex;
        align-items: center;
        min-height: var(--size-touch-target);
    }
}

/* Az oldalsáv a fő oszlop ALÁ kerül — mobilon a 320 px-es sáv mellett a leckesorok
   három oszlopa használhatatlanul összenyomódna. */
@media (max-width: 1023.98px) {
    .academy-module[b-2awscqaciq] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Pages/Account/AccountPrivacy.razor.rz.scp.css */
/*
    Fiókom → Adatvédelem.

    ⚠️ A lap NEM a terv három-oszlopos negyedik blokkját követi: a kártyák egymás alatt állnak, a
    veszély-zóna pedig legalul, külön. Az indoklás a .razor fejlécében.
*/

/* Az „Útmutató" gomb — nyers <button>, mert az ElementReference miatt nem lehet a Button komponens. */
.privacy__guide-open[b-fem3i0p79t] {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--size-touch-target);
    padding-inline: var(--space-4);
    border: 1px solid var(--color-primary-strong);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    /* Pink SZÖVEG → --color-primary-text (#B01268, fehéren 6.70). A #FF3EAA itt 3.22 lenne. */
    color: var(--color-primary-text);
    font: var(--text-body);
    cursor: pointer;
}

.privacy__guide-lead[b-fem3i0p79t] {
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.privacy__guide-lead a[b-fem3i0p79t] {
    color: var(--color-primary-text);
}

.privacy__facts[b-fem3i0p79t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
    padding-inline-start: var(--space-5);
    max-inline-size: 72ch;
}

.privacy__documents[b-fem3i0p79t] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.privacy__document[b-fem3i0p79t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-block: var(--space-4);
    border-block-start: 1px solid var(--color-border);
}

.privacy__document:first-child[b-fem3i0p79t] {
    border-block-start: none;
    padding-block-start: 0;
}

.privacy__document-title[b-fem3i0p79t] {
    margin: 0;
    font: var(--text-h3);
}

.privacy__document-meta[b-fem3i0p79t] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.privacy__document a[b-fem3i0p79t],
.privacy__facts a[b-fem3i0p79t] {
    color: var(--color-primary-text);
}
/* /Pages/Account/AccountProfile.razor.rz.scp.css */
/*
    Fiókom → Fiók adatok.

    A kártya sorait az `InfoRow` viszi (saját stíluslapja van); itt csak a lap-szintű elrendezés áll.
*/

.account-profile__list[b-1tsdw7ckba] {
    margin: 0;
}

.account-profile__email[b-1tsdw7ckba] {
    margin-right: var(--space-2);
}

.account-profile__sections[b-1tsdw7ckba] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.account-profile__sections li[b-1tsdw7ckba] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.account-profile__sections a[b-1tsdw7ckba] {
    font: var(--text-body);
    color: var(--color-primary-text);
}

.account-profile__sections span[b-1tsdw7ckba] {
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.account-profile__empty[b-1tsdw7ckba] {
    padding: var(--space-6);
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

.account-profile__empty h2[b-1tsdw7ckba] {
    margin: 0 0 var(--space-2);
    font: var(--text-h2);
    color: var(--color-text);
}

.account-profile__empty p[b-1tsdw7ckba] {
    max-width: 52ch;
    margin: 0 auto var(--space-4);
    font: var(--text-body);
    color: var(--color-text-muted);
}
/* /Pages/Account/AccountSecurity.razor.rz.scp.css */
/*
    Fiókom → Biztonság.

    ⚠️⚠️ RESZPONZÍV DÖNTÉS — a `design-system.md` Reszponzivitás szakasza EGYIK itteni felületet
    sem nevesíti (csak a naptárat, a master-detailt és a kártyarácsokat), ezért ez tervezés, nem
    foltozás. A lapon két sor-alapú felület van, és SZÁNDÉKOSAN kétféle megoldást kapnak, mert nem
    ugyanaz a műfajuk:

    1. AKTÍV MUNKAMENETEK — `<ul>`, nem tábla. A sor egy OBJEKTUM egy művelettel („ez a telefonom,
       jelentkeztesd ki"), nem összehasonlítható cellák sorozata. Táblába téve kellene egy
       „Művelet" oszlop, aminek a cellájában egy gomb ül — és pont ez az, ami keskeny képernyőn
       szétesik (a gomb vagy kilóg, vagy a szövegoszlopokat nyomja össze olvashatatlanná). Listaként
       a mobil nézet nem külön szabály: ugyanaz a kártya keskenyebben, a benne lévő `InfoRow`-k
       pedig egymás alá esnek. Ez az a felület, ahol a görgetés VÉGE fontos (a lista rövid, 1–5
       elem), tehát a magasság nem probléma.

    2. BEJELENTKEZÉSI ELŐZMÉNYEK — `<table>`, ami ≤ 720 px-en KÁRTYÁKKÁ alakul (`data-label`
       fejlécekkel, rejtett `<thead>`-del). A sorok itt tényleg összehasonlíthatók: a felhasználó
       azt keresi, melyik időpont / eszköz / IP lóg ki a sorból, és ehhez az oszlop-szerkezet
       széles képernyőn érték. Vízszintes görgetés viszont ROSSZ válasz lenne: négy oszlopból
       kettő — köztük a Kimenet, amiért a listát nézik — a képernyőn kívülre kerülne. Ugyanaz a
       minta, mint az audit-naplóban.

    ⚠️ Ami MINDKETTŐRE áll: az oldal törzse sosem görög vízszintesen. A tábla saját
    `overflow-x: auto` dobozban ül a köztes szélességekre (720–1000 px), ahol a kártyás alak már
    pazarló, az oszlopok viszont még szűkek.
*/

.security__list[b-pc0gh0yl8a] {
    margin: 0 0 var(--space-4);
}

/* ── Aktív munkamenetek ─────────────────────────────────────────────────── */

.security__sessions[b-pc0gh0yl8a] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.security__session[b-pc0gh0yl8a] {
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

.security__session-head[b-pc0gh0yl8a] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-2);
}

.security__session-device[b-pc0gh0yl8a] {
    font: var(--text-body);
    color: var(--color-text);
}

.security__session-facts[b-pc0gh0yl8a] {
    margin: 0 0 var(--space-3);
}

.security__session-note[b-pc0gh0yl8a] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.security__sessions-actions[b-pc0gh0yl8a] {
    display: flex;
    justify-content: flex-start;
    margin-top: var(--space-4);
}

/* ── Bejelentkezési előzmények ──────────────────────────────────────────── */

.security__scroll[b-pc0gh0yl8a] {
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

.security__table[b-pc0gh0yl8a] {
    width: 100%;
    border-collapse: collapse;
    font: var(--text-sm);
}

.security__table th[b-pc0gh0yl8a],
.security__table td[b-pc0gh0yl8a] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}

.security__table th[b-pc0gh0yl8a] {
    font: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    background: var(--color-surface-muted);
}

.security__table tbody tr:last-child td[b-pc0gh0yl8a] {
    border-bottom: none;
}

.security__more[b-pc0gh0yl8a] {
    display: flex;
    justify-content: center;
    margin-top: var(--space-4);
}

.security__end[b-pc0gh0yl8a] {
    margin: var(--space-4) 0 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
}

/* ── Üres állapotok ─────────────────────────────────────────────────────── */

.security__empty[b-pc0gh0yl8a] {
    padding: var(--space-6);
    text-align: center;
    background: var(--color-surface-muted);
    border-radius: var(--radius-card);
}

.security__empty h3[b-pc0gh0yl8a] {
    margin: 0 0 var(--space-2);
    font: var(--text-h3);
    color: var(--color-text);
}

.security__empty p[b-pc0gh0yl8a] {
    max-width: 52ch;
    margin: 0 auto var(--space-4);
    font: var(--text-sm);
    color: var(--color-text-muted);
}

@media (max-width: 720px) {
    .security__scroll[b-pc0gh0yl8a] {
        overflow-x: visible;
        background: none;
        border: none;
    }

    .security__table thead[b-pc0gh0yl8a] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .security__table[b-pc0gh0yl8a],
    .security__table tbody[b-pc0gh0yl8a],
    .security__table tr[b-pc0gh0yl8a],
    .security__table td[b-pc0gh0yl8a] {
        display: block;
        width: 100%;
    }

    .security__table tr[b-pc0gh0yl8a] {
        margin-bottom: var(--space-3);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
    }

    .security__table td[b-pc0gh0yl8a] {
        display: grid;
        grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
        gap: var(--space-3);
        border-bottom: 1px solid var(--color-border);
    }

    .security__table td[b-pc0gh0yl8a]::before {
        content: attr(data-label);
        font: var(--text-xs);
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .security__table td:last-child[b-pc0gh0yl8a] {
        border-bottom: none;
    }
}
/* /Pages/Account/AccountSubscription.razor.rz.scp.css */
/*
    A felhasználó saját előfizetés-lapjának stílusa.

    ⚠️ A CSS SZÁNDÉKOSAN átfed az admin fiók-nézetével (`AdminSubscriptionDetail.razor.css`): a
    Blazor CSS-izolációja KOMPONENSENKÉNTI, tehát egy megosztott osztálynév nem működne át. Az
    átfedés itt kicsi és tudatos (adat-lista + gombsor); a MEGOSZTHATÓ dolgok — a feliratok, a
    dátum-formázás és az „élő-e" predikátum — nem itt, hanem a `SubscriptionLabels`-ben élnek egy
    példányban.

    ⚠️ Pink NEM szerepel ezen a lapon. A `#FF3EAA` kizárólag dekoratív kitöltés lehetne, feliratot
    viszont itt minden felület hordoz — a kiemelést ezért a kategória-tokenek és a szürke-skála adja.

    ⚠️ A fókuszgyűrűt a globális `:focus-visible` szabály adja (`tokens.css`), itt csak a lekerekítés
    illeszkedik hozzá. Egy saját `:focus { outline: none }` NAGYOBB specificitású lenne, mint a
    globális szabály, és a billentyűzetes fókuszt is eltüntetné — pontosan a programozottan
    fókuszált elemeken, ahol a legfontosabb.
*/

.subscription__facts[b-xwxjq3lmo3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--space-4);
    margin: 0;
}

.subscription__facts dt[b-xwxjq3lmo3] {
    color: var(--color-text-muted);
    font: var(--text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.subscription__facts dd[b-xwxjq3lmo3] {
    margin: var(--space-1) 0 0;
    font: var(--text-body);

    /* A csomagkulcs nyers azonosító: tördelés nélkül kilógna a rácsból mobilon. */
    overflow-wrap: anywhere;
}

.subscription__outcome[b-xwxjq3lmo3] {
    margin-block-end: var(--space-5);
}

/* A felmondás után az oldal ERRE a panelre teszi a fókuszt — a gyűrűnek illeszkednie kell. */
.subscription__outcome:focus-visible[b-xwxjq3lmo3] {
    border-radius: var(--radius-card);
}

/*
    ⚠️ A gombsor MOBILON egymás alá kerül. Egymás mellett a hüvelykujj-szélességnél kisebb rés esne
    két gomb közé — és ezen a lapon az egyik szomszéd egy visszafordíthatatlan művelet.
*/
.subscription__actions[b-xwxjq3lmo3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
}

.subscription__actions:focus-visible[b-xwxjq3lmo3] {
    border-radius: var(--radius-control);
}

@media (max-width: 40rem) {
    .subscription__actions[b-xwxjq3lmo3] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Pages/Account/AccountTwoFactorSetup.razor.rz.scp.css */
/*
    A 2FA bekapcsoló lapja.

    ⚠️ A kulcs monospace-ben, csoportosítva: kézi bevitelnél az elgépelés a leggyakoribb hibaforrás.
    A „Megnyitás…" link színe a globális `a` szabályból jön (`--color-primary-text`), nem a
    dekoratív pinkből.
*/

.setup__heading[b-1n812j56tg] {
    margin: 0 0 var(--space-3);
    font: var(--text-h2);
}

.setup__heading:focus-visible[b-1n812j56tg] {
    border-radius: var(--radius-control);
}

.setup__lead[b-1n812j56tg] {
    margin: 0 0 var(--space-4);
    max-inline-size: 60ch;
    font: var(--text-body);
    color: var(--color-text-muted);
}

.setup__key[b-1n812j56tg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block: var(--space-4);
}

.setup__key-label[b-1n812j56tg] {
    margin: 0;
    font: var(--text-body);
    font-weight: 600;
}

.setup__key-value[b-1n812j56tg] {
    margin: 0;
}

.setup__key-value code[b-1n812j56tg] {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-control);
    background-color: var(--color-surface-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.125rem;
    letter-spacing: 0.12em;
    overflow-wrap: anywhere;
    user-select: all;
}

.setup__key-tools[b-1n812j56tg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.setup__uri[b-1n812j56tg] {
    font: var(--text-sm);
}

.setup__feedback[b-1n812j56tg] {
    min-block-size: 1.25em;
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.setup__form[b-1n812j56tg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-block-end: var(--space-4);
}

.setup__actions[b-1n812j56tg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

@media (max-width: 479.98px) {
    .setup__actions > *[b-1n812j56tg] {
        inline-size: 100%;
    }
}

/* A QR betöltése alatt: a kép helyén, hogy a kulcs ne ugorjon kétszer. */
.setup__qr-loading[b-1n812j56tg] {
    display: flex;
    align-items: center;
    inline-size: min(100%, 12rem);
    min-block-size: 3rem;
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}
/* /Pages/Account/ChangePassword.razor.rz.scp.css */
.pwchange__title[b-yi03jm9u21] {
    margin: 0;
    font: var(--text-h1);
}

.pwchange[b-yi03jm9u21] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.pwchange__lead[b-yi03jm9u21] {
    margin: 0;
    font: var(--text-body);
    color: var(--color-text-muted);
}

.pwchange__actions[b-yi03jm9u21],
.pwchange__back[b-yi03jm9u21] {
    margin: 0;
}

.pwchange__back[b-yi03jm9u21] {
    font: var(--text-sm);
    text-align: center;
}
/* /Pages/Admin/AdminAcademy.razor.rz.scp.css */
/*
    ⚠️ A táblázat és az űrlap szabályai SZÁNDÉKOSAN a katalógus-szerkesztőkéi (AdminContentPillars
    .razor.css): a Blazor CSS-izolációja komponensenkénti, egy közös, izolálatlan stíluslap pedig
    második, versengő stílusforrást nyitna. Ugyanaz a döntés, mint a testvér-képernyőkön.
*/
.catalog[b-vsyfvjcvxk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-grid-gap);
}

/* A táblázat SAJÁT görgetősávot kap — a lap törzse vízszintesen soha nem görög. */
.catalog__table-scroll[b-vsyfvjcvxk] {
    overflow-x: auto;
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.catalog__table[b-vsyfvjcvxk] {
    inline-size: 100%;
    border-collapse: collapse;
    font: var(--text-body);
}

.catalog__table th[b-vsyfvjcvxk],
.catalog__table td[b-vsyfvjcvxk] {
    padding: var(--space-3) var(--space-4);
    text-align: start;
    vertical-align: middle;
    border-block-end: 1px solid var(--color-border);
    white-space: nowrap;
}

.catalog__table th[b-vsyfvjcvxk] {
    color: var(--color-text-muted);
    font: var(--text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.catalog__table tbody tr:last-child td[b-vsyfvjcvxk] {
    border-block-end: 0;
}

.catalog__table tbody tr[aria-current="true"][b-vsyfvjcvxk] {
    background-color: var(--color-surface-muted);
}

/*
   ⚠️ A rejtett sor NEM csak halványabb: a jelentést a „Rejtett" badge SZÖVEGE viszi.
   Az opacitás önmagában színnel (pontosabban kontraszttal) kódolt információ lenne.
*/
.catalog__table tbody tr.is-retired td:first-child[b-vsyfvjcvxk] {
    color: var(--color-text-muted);
}

.catalog__form[b-vsyfvjcvxk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.catalog__field[b-vsyfvjcvxk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.catalog__field label[b-vsyfvjcvxk] {
    font: var(--text-sm);
    font-weight: 600;
}

.catalog__field input[b-vsyfvjcvxk],
.catalog__field select[b-vsyfvjcvxk],
.catalog__field textarea[b-vsyfvjcvxk] {
    min-block-size: var(--size-touch-target);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--text-body);
}

.catalog__field textarea[b-vsyfvjcvxk] {
    min-block-size: 96px;
    resize: vertical;
}

.catalog__hint[b-vsyfvjcvxk],
.catalog__slug[b-vsyfvjcvxk] {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.catalog__actions[b-vsyfvjcvxk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* A fókuszgyűrű a programozottan fókuszált akció-sávon is kell — oda tér vissza a dialógus. */
.catalog__actions:focus-visible[b-vsyfvjcvxk] {
    border-radius: var(--radius-control);
}

.catalog__saved[b-vsyfvjcvxk] {
    color: var(--cat-success-text);
    font: var(--text-sm);
    font-weight: 600;
}

/* A kategória-csoport: fejléc + a csoport saját táblázata. */
.academy-admin__group[b-vsyfvjcvxk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.academy-admin__group-title[b-vsyfvjcvxk] {
    margin: 0;
    font: var(--text-h2);
}

.academy-admin__badges[b-vsyfvjcvxk] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/*
   A „haladó" rész (sorrendi érték) — összecsukva. A <summary> teljes érintési célterület, és a
   jelentését a SZÖVEGE viszi, nem a nyíl vagy a szín.
*/
.academy-admin__advanced[b-vsyfvjcvxk] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    padding: 0 var(--space-3);
}

.academy-admin__advanced > summary[b-vsyfvjcvxk] {
    display: flex;
    align-items: center;
    min-block-size: var(--size-touch-target);
    cursor: pointer;
    font: var(--text-sm);
    font-weight: 600;
}

.academy-admin__advanced[open][b-vsyfvjcvxk] {
    padding-block-end: var(--space-3);
}
/* /Pages/Admin/AdminAcademyModule.razor.rz.scp.css */
/*
    ⚠️ A táblázat és az űrlap szabályai SZÁNDÉKOSAN a katalógus-szerkesztőkéi (AdminContentPillars
    .razor.css): a Blazor CSS-izolációja komponensenkénti, egy közös, izolálatlan stíluslap pedig
    második, versengő stílusforrást nyitna. Ugyanaz a döntés, mint a testvér-képernyőkön.
*/
.catalog[b-vp9zoovq5m] {
    display: flex;
    flex-direction: column;
    gap: var(--space-grid-gap);
}

/* A táblázat SAJÁT görgetősávot kap — a lap törzse vízszintesen soha nem görög. */
.catalog__table-scroll[b-vp9zoovq5m] {
    overflow-x: auto;
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.catalog__table[b-vp9zoovq5m] {
    inline-size: 100%;
    border-collapse: collapse;
    font: var(--text-body);
}

.catalog__table th[b-vp9zoovq5m],
.catalog__table td[b-vp9zoovq5m] {
    padding: var(--space-3) var(--space-4);
    text-align: start;
    vertical-align: middle;
    border-block-end: 1px solid var(--color-border);
    white-space: nowrap;
}

.catalog__table th[b-vp9zoovq5m] {
    color: var(--color-text-muted);
    font: var(--text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.catalog__table tbody tr:last-child td[b-vp9zoovq5m] {
    border-block-end: 0;
}

.catalog__table tbody tr[aria-current="true"][b-vp9zoovq5m] {
    background-color: var(--color-surface-muted);
}

/*
   ⚠️ A rejtett sor NEM csak halványabb: a jelentést a „Rejtett" badge SZÖVEGE viszi.
   Az opacitás önmagában színnel (pontosabban kontraszttal) kódolt információ lenne.
*/
.catalog__table tbody tr.is-retired td:first-child[b-vp9zoovq5m] {
    color: var(--color-text-muted);
}

.catalog__form[b-vp9zoovq5m] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.catalog__field[b-vp9zoovq5m] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.catalog__field label[b-vp9zoovq5m] {
    font: var(--text-sm);
    font-weight: 600;
}

.catalog__field input[b-vp9zoovq5m],
.catalog__field select[b-vp9zoovq5m],
.catalog__field textarea[b-vp9zoovq5m] {
    min-block-size: var(--size-touch-target);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--text-body);
}

.catalog__field textarea[b-vp9zoovq5m] {
    min-block-size: 96px;
    resize: vertical;
}

.catalog__hint[b-vp9zoovq5m],
.catalog__slug[b-vp9zoovq5m] {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.catalog__actions[b-vp9zoovq5m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* A fókuszgyűrű a programozottan fókuszált akció-sávon is kell — oda tér vissza a dialógus. */
.catalog__actions:focus-visible[b-vp9zoovq5m] {
    border-radius: var(--radius-control);
}

.catalog__saved[b-vp9zoovq5m] {
    color: var(--cat-success-text);
    font: var(--text-sm);
    font-weight: 600;
}

.academy-admin__badges[b-vp9zoovq5m] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* A hosszú rövid-ismertető a táblázatban nem tördelődik — a cím elég a sor azonosításához. */
.catalog__table td.academy-admin__wrap[b-vp9zoovq5m] {
    white-space: normal;
    min-inline-size: 12rem;
}

/*
   A „haladó" rész (sorrendi érték) — összecsukva. A <summary> teljes érintési célterület, és a
   jelentését a SZÖVEGE viszi, nem a nyíl vagy a szín.
*/
.academy-admin__advanced[b-vp9zoovq5m] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    padding: 0 var(--space-3);
}

.academy-admin__advanced > summary[b-vp9zoovq5m] {
    display: flex;
    align-items: center;
    min-block-size: var(--size-touch-target);
    cursor: pointer;
    font: var(--text-sm);
    font-weight: 600;
}

.academy-admin__advanced[open][b-vp9zoovq5m] {
    padding-block-end: var(--space-3);
}
/* /Pages/Admin/AdminAuditLog.razor.rz.scp.css */
/*
    Az audit-napló táblája.

    ⚠️ A tábla MOBILON kártyákká alakul, nem vízszintesen görgethető marad. Hat oszloppal a
    telefonos görgetés azt jelentené, hogy a „Kimenet” és a „Mely mezők változtak” oszlop a
    képernyőn kívülre kerül — vagyis pont az, amiért a naplót nézik. A `data-label` attribútum
    adja a fejlécet, mert a `<thead>` ilyenkor rejtett.
*/

.audit-log__count[b-zh566qgbsj] {
    margin: 0 0 var(--space-3);
    font: var(--text-sm);
    color: var(--color-text-muted);
}

/* Széles tábla SAJÁT görgetőjében — az oldal törzse sosem görög vízszintesen. */
.audit-log__scroll[b-zh566qgbsj] {
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

.audit-log__table[b-zh566qgbsj] {
    width: 100%;
    border-collapse: collapse;
    font: var(--text-sm);
}

.audit-log__table th[b-zh566qgbsj],
.audit-log__table td[b-zh566qgbsj] {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}

.audit-log__table th[b-zh566qgbsj] {
    font: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    background: var(--color-surface-muted);
}

.audit-log__table tbody tr:last-child td[b-zh566qgbsj] {
    border-bottom: none;
}

.audit-log__action[b-zh566qgbsj] {
    display: block;
    font: var(--text-sm);
    color: var(--color-text);
}

/* A nyers azonosítók és nevek egyértelműen GÉPI szövegek — nem emberi címkék. */
.audit-log__raw[b-zh566qgbsj] {
    display: block;
    margin-top: 2px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .6875rem;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.audit-log__ip[b-zh566qgbsj] {
    display: block;
    margin-top: 2px;
    font: var(--text-xs);
    color: var(--color-text-muted);
}

.audit-log__none[b-zh566qgbsj] {
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.audit-log__fields[b-zh566qgbsj] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.audit-log__fields code[b-zh566qgbsj] {
    display: inline-block;
    padding: 1px var(--space-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .6875rem;
    color: var(--color-text);
    background: var(--color-surface-muted);
    border-radius: var(--radius-pill);
}

.audit-log__more[b-zh566qgbsj] {
    display: flex;
    justify-content: center;
    margin-top: var(--space-4);
}

.audit-log__end[b-zh566qgbsj] {
    margin: var(--space-4) 0 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
}

.audit-log__rejected-note[b-zh566qgbsj] {
    font: var(--text-sm);
}

.audit-log__empty[b-zh566qgbsj] {
    padding: var(--space-6);
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

.audit-log__empty-title[b-zh566qgbsj] {
    margin: 0 0 var(--space-2);
    font: var(--text-h2);
    color: var(--color-text);
}

.audit-log__empty p[b-zh566qgbsj] {
    max-width: 52ch;
    margin: 0 auto var(--space-4);
    font: var(--text-body);
    color: var(--color-text-muted);
}

@media (max-width: 720px) {
    .audit-log__scroll[b-zh566qgbsj] {
        overflow-x: visible;
        background: none;
        border: none;
    }

    .audit-log__table thead[b-zh566qgbsj] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .audit-log__table[b-zh566qgbsj],
    .audit-log__table tbody[b-zh566qgbsj],
    .audit-log__table tr[b-zh566qgbsj],
    .audit-log__table td[b-zh566qgbsj] {
        display: block;
        width: 100%;
    }

    .audit-log__table tr[b-zh566qgbsj] {
        margin-bottom: var(--space-3);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
    }

    .audit-log__table td[b-zh566qgbsj] {
        display: grid;
        grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
        gap: var(--space-3);
        border-bottom: 1px solid var(--color-border);
    }

    .audit-log__table td[b-zh566qgbsj]::before {
        content: attr(data-label);
        font: var(--text-xs);
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .audit-log__table td:last-child[b-zh566qgbsj] {
        border-bottom: none;
    }
}
/* /Pages/Admin/AdminBlueprints.razor.rz.scp.css */
/*
   A Blueprint-szerkesztő elrendezése.

   ⚠️ A CSS szándékosan rokon a katalógus-oldalakéval, de KÜLÖN fájl: a Blazor CSS-izolációja
   komponensenként hatókörözi a szabályokat, tehát megosztani csak globális stíluslapon lehetne —
   ott viszont az admin-táblázat neve minden más képernyőre is elérhető lenne.
*/
.blueprints[b-869np5rvqb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-grid-gap);
}

/* A táblázat SAJÁT görgetősávot kap — a lap törzse vízszintesen soha nem görög. */
.blueprints__table-scroll[b-869np5rvqb] {
    overflow-x: auto;
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.blueprints__table[b-869np5rvqb] {
    inline-size: 100%;
    border-collapse: collapse;
    font: var(--text-body);
}

.blueprints__table th[b-869np5rvqb],
.blueprints__table td[b-869np5rvqb] {
    padding: var(--space-3) var(--space-4);
    text-align: start;
    vertical-align: middle;
    border-block-end: 1px solid var(--color-border);
    white-space: nowrap;
}

.blueprints__table th[b-869np5rvqb] {
    color: var(--color-text-muted);
    font: var(--text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.blueprints__table tbody tr:last-child td[b-869np5rvqb] {
    border-block-end: 0;
}

.blueprints__table tbody tr[aria-current="true"][b-869np5rvqb] {
    background-color: var(--color-surface-muted);
}

/* ⚠️ A rejtett sor NEM csak halványabb: a jelentést a „Rejtett" badge SZÖVEGE viszi. */
.blueprints__table tbody tr.is-retired td:first-child[b-869np5rvqb] {
    color: var(--color-text-muted);
}

.blueprints__form[b-869np5rvqb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.blueprints__field[b-869np5rvqb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.blueprints__field label[b-869np5rvqb] {
    font: var(--text-sm);
    font-weight: 600;
}

.blueprints__field input[b-869np5rvqb] {
    min-block-size: var(--size-touch-target);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--text-body);
}

.blueprints__hint[b-869np5rvqb],
.blueprints__slug[b-869np5rvqb] {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.blueprints__formats[b-869np5rvqb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
}

.blueprints__formats legend[b-869np5rvqb] {
    font: var(--text-sm);
    font-weight: 600;
}

.blueprints__check[b-869np5rvqb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--text-body);
}

.blueprints__actions[b-869np5rvqb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.blueprints__actions:focus-visible[b-869np5rvqb] {
    border-radius: var(--radius-control);
}

.blueprints__saved[b-869np5rvqb] {
    color: var(--cat-success-text);
    font: var(--text-sm);
    font-weight: 600;
}

/*
   ⚠️ A verzió-történet OLVASHATÓ lista, nem űrlap. A halvány háttér és a keret is ezt üzeni:
   itt nincs mit átírni — a szerkesztés a piszkozat-kártyában történik.
*/
.blueprints__versions[b-869np5rvqb] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.blueprints__version[b-869np5rvqb] {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface-muted);
}

.blueprints__version-head[b-869np5rvqb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.blueprints__version-head h3[b-869np5rvqb] {
    margin: 0;
    font: var(--text-body);
    font-weight: 700;
}

.blueprints__version-date[b-869np5rvqb] {
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.blueprints__blocks[b-869np5rvqb] {
    margin: var(--space-3) 0 0;
    padding-inline-start: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font: var(--text-body);
}

.blueprints__block-kind[b-869np5rvqb] {
    display: inline-block;
    margin-inline-end: var(--space-2);
    color: var(--color-text-muted);
    font: var(--text-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.blueprints__block-position[b-869np5rvqb] {
    margin-inline-start: var(--space-2);
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.blueprints__block-guidance[b-869np5rvqb] {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
    font: var(--text-sm);
}
/* /Pages/Admin/AdminContentPillars.razor.rz.scp.css */
/*
    ⚠️ A táblázat és az űrlap szabályai SZÁNDÉKOSAN ismétlődnek az AdminIndustries.razor.css-ből.
    A Blazor CSS-izolációja komponensenkénti: a másik oldal scope-jával megjelölt szabály erre az
    oldalra nem érvényes, egy közös, izolálatlan stíluslap pedig második, versengő stílusforrást
    nyitna (pontosan azt, amit a Bootstrap kihagyásával elkerültünk). A megosztás akkor éri meg,
    ha a két képernyő EGY komponensbe kerül — az külön kör, mert a mezőik eltérnek.
*/

.catalog[b-483jbonzd5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-grid-gap);
}

/* A táblázat SAJÁT görgetősávot kap — a lap törzse vízszintesen soha nem görög. */
.catalog__table-scroll[b-483jbonzd5] {
    overflow-x: auto;
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.catalog__table[b-483jbonzd5] {
    inline-size: 100%;
    border-collapse: collapse;
    font: var(--text-body);
}

.catalog__table th[b-483jbonzd5],
.catalog__table td[b-483jbonzd5] {
    padding: var(--space-3) var(--space-4);
    text-align: start;
    vertical-align: middle;
    border-block-end: 1px solid var(--color-border);
    white-space: nowrap;
}

.catalog__table th[b-483jbonzd5] {
    color: var(--color-text-muted);
    font: var(--text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/*
   ⚠️⚠️ A NÉV TÖRHET — MÉRT javítás (fókusz-audit, 10. lelet). Minden cella `nowrap`-pel a
   táblázat 1280 px-en 20 px-rel szélesebb volt a görgetőjénél (böngészőben: scrollWidth 988,
   clientWidth 968), tehát a sor végén álló „Szerkesztés" gomb jobb széle — fókusz NÉLKÜL is — a
   görgető szélén túl állt, a fókuszgyűrű jobb oldala pedig levágódott (683/779 px — WEAK).
   A böngésző a RÉSZBEN látszó elemet Tab-ra NEM görgeti be vízszintesen (mérve: scrollLeft 0),
   tehát a globális `scroll-padding` itt nem segít: a táblázatnak bele kell férnie. A név az
   egyetlen szabad szöveg a sorban; az azonosító (`code`), a chip és a gomb egyben marad.
*/
.catalog__table td:first-child[b-483jbonzd5] {
    white-space: normal;
}

.catalog__table tbody tr:last-child td[b-483jbonzd5] {
    border-block-end: 0;
}

.catalog__table tbody tr[aria-current="true"][b-483jbonzd5] {
    background-color: var(--color-surface-muted);
}

/*
   ⚠️ A rejtett sor NEM csak halványabb: a jelentést a „Rejtett" badge SZÖVEGE viszi.
   Az opacitás önmagában színnel (pontosabban kontraszttal) kódolt információ lenne.
*/
.catalog__table tbody tr.is-retired td:first-child[b-483jbonzd5] {
    color: var(--color-text-muted);
}

.catalog__form[b-483jbonzd5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.catalog__field[b-483jbonzd5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.catalog__field label[b-483jbonzd5] {
    font: var(--text-sm);
    font-weight: 600;
}

.catalog__field input[b-483jbonzd5],
.catalog__field select[b-483jbonzd5],
.catalog__field textarea[b-483jbonzd5] {
    min-block-size: var(--size-touch-target);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--text-body);
}

.catalog__field textarea[b-483jbonzd5] {
    min-block-size: 96px;
    resize: vertical;
}

.catalog__hint[b-483jbonzd5],
.catalog__slug[b-483jbonzd5] {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.catalog__actions[b-483jbonzd5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* A fókuszgyűrű a programozottan fókuszált akció-sávon is kell — oda tér vissza a dialógus. */
.catalog__actions:focus-visible[b-483jbonzd5] {
    border-radius: var(--radius-control);
}

.catalog__saved[b-483jbonzd5] {
    color: var(--cat-success-text);
    font: var(--text-sm);
    font-weight: 600;
}

/*
   A szín-token előnézete.

   ⚠️ A háttér a kategória `-subtle`, a felirat a `-text` tokenje (≥ 4.5:1) — a `-solid` SOHA
   nem hordoz feliratot. És a jelentést itt is a SZÖVEG viszi: a chip kiírja a kategória nevét,
   nem csak a színét mutatja.
*/
.catalog__chip[b-483jbonzd5] {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font: var(--text-xs);
    white-space: nowrap;
}

.catalog__chip--brand[b-483jbonzd5] {
    background-color: var(--cat-brand-subtle);
    color: var(--cat-brand-text);
}

.catalog__chip--content[b-483jbonzd5] {
    background-color: var(--cat-content-subtle);
    color: var(--cat-content-text);
}

.catalog__chip--academy[b-483jbonzd5] {
    background-color: var(--cat-academy-subtle);
    color: var(--cat-academy-text);
}

.catalog__chip--community[b-483jbonzd5] {
    background-color: var(--cat-community-subtle);
    color: var(--cat-community-text);
}

.catalog__chip--success[b-483jbonzd5] {
    background-color: var(--cat-success-subtle);
    color: var(--cat-success-text);
}

.catalog__chip--warning[b-483jbonzd5] {
    background-color: var(--cat-warning-subtle);
    color: var(--cat-warning-text);
}
/* /Pages/Admin/AdminHome.razor.rz.scp.css */
.admin-home[b-a4wllxvxyq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-grid-gap);
}
/* /Pages/Admin/AdminIdeas.razor.rz.scp.css */
/*
   Az Ötlettár admin szerkesztője. A CSS rokon a Blueprint-oldaléval, de KÜLÖN fájl: a Blazor
   CSS-izolációja komponensenként hatókörözi a szabályokat.
*/
.ideas[b-vbmolc8s2h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-grid-gap);
}

.ideas__search[b-vbmolc8s2h] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
    margin-block-end: var(--space-4);
}

.ideas__search label[b-vbmolc8s2h] {
    flex-basis: 100%;
    font: var(--text-sm);
    font-weight: 600;
}

.ideas__search input[b-vbmolc8s2h] {
    flex: 1 1 240px;
    min-block-size: var(--size-touch-target);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    font: var(--text-body);
}

.ideas__count[b-vbmolc8s2h],
.ideas__meta[b-vbmolc8s2h],
.ideas__hint[b-vbmolc8s2h] {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.ideas__meta[b-vbmolc8s2h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.ideas__table-scroll[b-vbmolc8s2h] {
    overflow-x: auto;
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.ideas__table[b-vbmolc8s2h] {
    inline-size: 100%;
    border-collapse: collapse;
    font: var(--text-body);
}

.ideas__table th[b-vbmolc8s2h],
.ideas__table td[b-vbmolc8s2h] {
    padding: var(--space-3) var(--space-4);
    text-align: start;
    vertical-align: middle;
    border-block-end: 1px solid var(--color-border);
    white-space: nowrap;
}

.ideas__table th[b-vbmolc8s2h] {
    color: var(--color-text-muted);
    font: var(--text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ideas__table tbody tr:last-child td[b-vbmolc8s2h] {
    border-block-end: 0;
}

.ideas__table tbody tr[aria-current="true"][b-vbmolc8s2h] {
    background-color: var(--color-surface-muted);
}

.ideas__more[b-vbmolc8s2h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: start;
}

.ideas__form[b-vbmolc8s2h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ideas__row[b-vbmolc8s2h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
}

.ideas__field[b-vbmolc8s2h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-inline-size: 0;
}

.ideas__field label[b-vbmolc8s2h] {
    font: var(--text-sm);
    font-weight: 600;
}

.ideas__field input[b-vbmolc8s2h],
.ideas__field select[b-vbmolc8s2h],
.ideas__field textarea[b-vbmolc8s2h] {
    inline-size: 100%;
    min-block-size: var(--size-touch-target);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--text-body);
}

.ideas__field textarea[b-vbmolc8s2h] {
    resize: vertical;
}

.ideas__checks[b-vbmolc8s2h] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
}

.ideas__checks legend[b-vbmolc8s2h] {
    font: var(--text-sm);
    font-weight: 600;
}

.ideas__checks .ideas__hint[b-vbmolc8s2h] {
    flex-basis: 100%;
}

.ideas__check[b-vbmolc8s2h] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--text-body);
}

.ideas__actions[b-vbmolc8s2h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.ideas__actions:focus-visible[b-vbmolc8s2h] {
    border-radius: var(--radius-control);
}

.ideas__saved[b-vbmolc8s2h] {
    color: var(--cat-success-text);
    font: var(--text-sm);
    font-weight: 600;
}

@media (max-width: 640px) {
    .ideas__row[b-vbmolc8s2h] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Admin/AdminIndustries.razor.rz.scp.css */
.catalog[b-enef6vvb0c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-grid-gap);
}

/* A táblázat SAJÁT görgetősávot kap — a lap törzse vízszintesen soha nem görög. */
.catalog__table-scroll[b-enef6vvb0c] {
    overflow-x: auto;
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.catalog__table[b-enef6vvb0c] {
    inline-size: 100%;
    border-collapse: collapse;
    font: var(--text-body);
}

.catalog__table th[b-enef6vvb0c],
.catalog__table td[b-enef6vvb0c] {
    padding: var(--space-3) var(--space-4);
    text-align: start;
    vertical-align: middle;
    border-block-end: 1px solid var(--color-border);
    white-space: nowrap;
}

.catalog__table th[b-enef6vvb0c] {
    color: var(--color-text-muted);
    font: var(--text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.catalog__table tbody tr:last-child td[b-enef6vvb0c] {
    border-block-end: 0;
}

.catalog__table tbody tr[aria-current="true"][b-enef6vvb0c] {
    background-color: var(--color-surface-muted);
}

/*
   ⚠️ A rejtett sor NEM csak halványabb: a jelentést a „Rejtett" badge SZÖVEGE viszi.
   Az opacitás önmagában színnel (pontosabban kontraszttal) kódolt információ lenne.
*/
.catalog__table tbody tr.is-retired td:first-child[b-enef6vvb0c] {
    color: var(--color-text-muted);
}

.catalog__form[b-enef6vvb0c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.catalog__field[b-enef6vvb0c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.catalog__field label[b-enef6vvb0c] {
    font: var(--text-sm);
    font-weight: 600;
}

.catalog__field input[b-enef6vvb0c],
.catalog__field select[b-enef6vvb0c],
.catalog__field textarea[b-enef6vvb0c] {
    min-block-size: var(--size-touch-target);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--text-body);
}

.catalog__field textarea[b-enef6vvb0c] {
    min-block-size: 96px;
    resize: vertical;
}

.catalog__hint[b-enef6vvb0c],
.catalog__slug[b-enef6vvb0c] {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.catalog__actions[b-enef6vvb0c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* A fókuszgyűrű a programozottan fókuszált akció-sávon is kell — oda tér vissza a dialógus. */
.catalog__actions:focus-visible[b-enef6vvb0c] {
    border-radius: var(--radius-control);
}

.catalog__saved[b-enef6vvb0c] {
    color: var(--cat-success-text);
    font: var(--text-sm);
    font-weight: 600;
}
/* /Pages/Admin/AdminSituations.razor.rz.scp.css */
/*
    ⚠️ A táblázat szabályai SZÁNDÉKOSAN ismétlődnek az AdminIndustries / AdminContentPillars
    stíluslapjából. A Blazor CSS-izolációja komponensenkénti: a másik oldal scope-jával megjelölt
    szabály erre az oldalra nem érvényes, egy közös, izolálatlan stíluslap pedig második,
    versengő stílusforrást nyitna (pontosan azt, amit a Bootstrap kihagyásával elkerültünk). A
    megosztás akkor éri meg, ha a három képernyő EGY komponensbe kerül — az külön kör, mert a
    mezőik eltérnek.

    ⚠️ AMI ITT NINCS, ÉS EZ A LÉNYEG: nincs `.catalog__field input / select / textarea` szabály.
    Az űrlap-mezők a közös `FormField` komponensben ülnek, ami a saját `.razor.css`-ében adja a
    geometriát (`inline-size: 100%`, `min-block-size: var(--size-touch-target)`) ÉS az
    `[aria-invalid="true"]` keretszínt. A helyi másolat pont ezt a két dolgot vesztette el máshol:
    a `BrandServices`-en két `<select>` KÉT MÉRETTEL állt egy lapon, mert a helyi alakból hiányzott
    az `inline-size: 100%` — és az `aria-invalid` szabályt a helyi alak soha nem tudta
    megszólítani.
*/

.catalog[b-0r5j0niln8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-grid-gap);
}

/* A táblázat SAJÁT görgetősávot kap — a lap törzse vízszintesen soha nem görög. */
.catalog__table-scroll[b-0r5j0niln8] {
    overflow-x: auto;
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.catalog__table[b-0r5j0niln8] {
    inline-size: 100%;
    border-collapse: collapse;
    font: var(--text-body);
}

.catalog__table th[b-0r5j0niln8],
.catalog__table td[b-0r5j0niln8] {
    padding: var(--space-3) var(--space-4);
    text-align: start;
    vertical-align: middle;
    border-block-end: 1px solid var(--color-border);
    white-space: nowrap;
}

/*
   ⚠️ A LEÍRÁS-oszlop az EGYETLEN, ami tördelhet. Ez a kártya második sora, tehát teljes mondat —
   `white-space: nowrap`-pal a táblázat a nyolc mondat összegére nyúlna, és a vízszintes
   görgetősáv gyakorlatilag használhatatlanná tenné a listát. A szélesség-korlát karakterben van
   megadva, hogy a sor olvasható hosszú maradjon.
*/
.catalog__cell-wrap[b-0r5j0niln8] {
    white-space: normal;
    min-inline-size: 22ch;
    max-inline-size: 44ch;
    color: var(--color-text-muted);
}

.catalog__table th[b-0r5j0niln8] {
    color: var(--color-text-muted);
    font: var(--text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.catalog__table tbody tr:last-child td[b-0r5j0niln8] {
    border-block-end: 0;
}

.catalog__table tbody tr[aria-current="true"][b-0r5j0niln8] {
    background-color: var(--color-surface-muted);
}

/*
   ⚠️ A rejtett sor NEM csak halványabb: a jelentést a „Rejtett" badge SZÖVEGE viszi.
   Az opacitás önmagában színnel (pontosabban kontraszttal) kódolt információ lenne.
*/
.catalog__table tbody tr.is-retired td:first-child[b-0r5j0niln8] {
    color: var(--color-text-muted);
}

.catalog__form[b-0r5j0niln8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.catalog__slug[b-0r5j0niln8] {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.catalog__actions[b-0r5j0niln8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* A fókuszgyűrű a programozottan fókuszált akció-sávon is kell — oda tér vissza a dialógus. */
.catalog__actions:focus-visible[b-0r5j0niln8] {
    border-radius: var(--radius-control);
}

.catalog__saved[b-0r5j0niln8] {
    color: var(--cat-success-text);
    font: var(--text-sm);
    font-weight: 600;
}

/*
   A szín-token előnézete.

   ⚠️ A háttér a kategória `-subtle`, a felirat a `-text` tokenje (≥ 4.5:1) — a `-solid` SOHA
   nem hordoz feliratot. És a jelentést itt is a SZÖVEG viszi: a chip kiírja a kategória nevét,
   nem csak a színét mutatja.

   ⚠️ A chip a lap SAJÁT jelölésében áll (`<span>` a `.razor`-ban), NEM `RenderTreeBuilder`-rel
   épül. Ez teherhordó: a Razor fordító a hatókör-attribútumot (`[b-hash]`) kizárólag a markup
   elemeire teszi rá, tehát egy kódból épített `<span>`-re ez a szabály SOHA nem illeszkedne —
   se fordítási hiba, se futásidejű jel, csak egy stílus nélküli chip.
*/
.catalog__chip[b-0r5j0niln8] {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font: var(--text-xs);
    white-space: nowrap;
}

.catalog__chip--brand[b-0r5j0niln8] {
    background-color: var(--cat-brand-subtle);
    color: var(--cat-brand-text);
}

.catalog__chip--content[b-0r5j0niln8] {
    background-color: var(--cat-content-subtle);
    color: var(--cat-content-text);
}

.catalog__chip--academy[b-0r5j0niln8] {
    background-color: var(--cat-academy-subtle);
    color: var(--cat-academy-text);
}

.catalog__chip--community[b-0r5j0niln8] {
    background-color: var(--cat-community-subtle);
    color: var(--cat-community-text);
}

.catalog__chip--success[b-0r5j0niln8] {
    background-color: var(--cat-success-subtle);
    color: var(--cat-success-text);
}

.catalog__chip--warning[b-0r5j0niln8] {
    background-color: var(--cat-warning-subtle);
    color: var(--cat-warning-text);
}

/*
   ⚠️ TAPINTÁSI CÉLMÉRET. Érintős beviteli eszközön a „Szerkesztés" gomb és a chip melletti
   sorok is legalább 44 px magasak. A `pointer: coarse` alak azért kell, hogy egérrel a
   táblázat kompakt maradjon — a magasított sor asztalon fél képernyőt vinne el nyolc sorra.
   A gomb maga a `Button` komponens saját scope-jában él, ezért `::deep`: enélkül a szabály a
   `.catalog__table [b-ezenalap]` alakot kapná, a gomb pedig a Button horgonyát viseli, és a
   szabály SOHA nem illeszkedne.
*/
@media (pointer: coarse) {
    .catalog__table td[b-0r5j0niln8],
    .catalog__table th[b-0r5j0niln8] {
        padding-block: var(--space-4);
    }

    .catalog__table[b-0r5j0niln8]  .button {
        min-block-size: var(--size-touch-target);
    }
}
/* /Pages/Admin/AdminSubscriptionDetail.razor.rz.scp.css */
/*
    A fiók-nézet stílusa.

    ⚠️ A CSS SZÁNDÉKOSAN duplikálódik a listáéval (`AdminSubscriptions.razor.css`): a Blazor
    CSS-izolációja KOMPONENSENKÉNTI. L. az ottani fejlécet.

    ⚠️ Pink itt sem hordoz feliratot, és nem is szerepel.
*/

.subs-detail__facts[b-pc7r3s43n2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-4);
    margin: 0;
}

.subs-detail__facts dt[b-pc7r3s43n2] {
    color: var(--color-text-muted);
    font: var(--text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.subs-detail__facts dd[b-pc7r3s43n2] {
    margin: var(--space-1) 0 0;
    font: var(--text-body);
    overflow-wrap: anywhere;
}

.subs-detail__credits[b-pc7r3s43n2] {
    margin-block-start: var(--space-5);
    padding: var(--space-4);
    border-radius: var(--radius-control);
    background-color: var(--color-surface-muted);
}

.subs-detail__credit-state[b-pc7r3s43n2] {
    margin: 0;
    font: var(--text-h3);
}

.subs-detail__credit-body[b-pc7r3s43n2] {
    margin: var(--space-2) 0 0;
    font: var(--text-body);
}

.subs-detail__form[b-pc7r3s43n2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-block-start: var(--space-4);
    max-inline-size: 34rem;
}

.subs-detail__field[b-pc7r3s43n2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.subs-detail__field label[b-pc7r3s43n2] {
    font: var(--text-sm);
    font-weight: 600;
}

.subs-detail__field input[b-pc7r3s43n2] {
    min-block-size: var(--size-touch-target);
    padding: var(--space-2) var(--space-3);

    /* ⚠️ --color-border-input, nem --color-border: az utóbbi fehéren 1.20, dekoratív elválasztó. */
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--text-body);
}

.subs-detail__hint[b-pc7r3s43n2] {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--text-sm);
}

/* ⚠️ SÖTÉT vörös szöveg (fehéren 6.47) — normál méretű felirat, tehát AA kell. */
.subs-detail__error[b-pc7r3s43n2] {
    margin: 0;
    color: var(--color-danger-text);
    font: var(--text-sm);
    font-weight: 600;
}

.subs-detail__actions[b-pc7r3s43n2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* A fókuszgyűrű a programozottan fókuszált akció-sávon is kell — oda tér vissza a dialógus. */
.subs-detail__actions:focus-visible[b-pc7r3s43n2] {
    border-radius: var(--radius-control);
}

.subs-detail__saved[b-pc7r3s43n2] {
    color: var(--cat-success-text);
    font: var(--text-sm);
    font-weight: 600;
}

.subs-detail__muted[b-pc7r3s43n2] {
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.subs-detail__empty[b-pc7r3s43n2] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-6);
    border-radius: var(--radius-card);
    background-color: var(--color-surface-muted);
}

.subs-detail__empty-title[b-pc7r3s43n2] {
    margin: 0;
    font: var(--text-h2);
}

/* ⚠️ A táblázat MAGA görög, nem a lap. */
.subs-detail__scroll[b-pc7r3s43n2] {
    overflow-x: auto;
}

.subs-detail__table[b-pc7r3s43n2] {
    inline-size: 100%;
    border-collapse: collapse;
    font: var(--text-body);
}

.subs-detail__table th[b-pc7r3s43n2],
.subs-detail__table td[b-pc7r3s43n2] {
    padding: var(--space-3) var(--space-4);
    text-align: start;
    vertical-align: top;
    border-block-end: 1px solid var(--color-border);
}

.subs-detail__table th[b-pc7r3s43n2] {
    color: var(--color-text-muted);
    font: var(--text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.subs-detail__table tbody tr:last-child td[b-pc7r3s43n2] {
    border-block-end: 0;
}

/*
    ⚠️ Mobilon az előzmény-táblázat is kártyákra esik szét. Ez a nézet a támogatás munkaeszköze,
    és a telefonos használat itt a valószínűbb — vízszintes görgetéssel az „Állapot" oszlop
    (vagyis a válasz a „miért nincs kerete?" kérdésre) a képernyőn túl lenne.
*/
@media (max-width: 48rem) {
    .subs-detail__table thead[b-pc7r3s43n2] {
        display: none;
    }

    .subs-detail__table tr[b-pc7r3s43n2] {
        display: block;
        padding: var(--space-3) var(--space-4);
        border-block-end: 1px solid var(--color-border);
    }

    .subs-detail__table td[b-pc7r3s43n2] {
        display: grid;
        grid-template-columns: 8rem 1fr;
        gap: var(--space-2);
        padding: var(--space-1) 0;
        border: 0;
    }

    .subs-detail__table td[b-pc7r3s43n2]::before {
        content: attr(data-label);
        color: var(--color-text-muted);
        font: var(--text-sm);
    }
}
/* /Pages/Admin/AdminSubscriptions.razor.rz.scp.css */
/*
    Az előfizetés-lista stílusa.

    ⚠️ A CSS SZÁNDÉKOSAN duplikálódik a fiók-nézettel (`AdminSubscriptionDetail.razor.css`): a
    Blazor CSS-izolációja KOMPONENSENKÉNTI, tehát egy közös osztálynév a másik komponensben nem
    érvényesül. A megosztás útja egy globális, nem izolált fájl lenne — az viszont minden más
    képernyőre is visszahatna. Ugyanez az indoklás áll a két katalógus-képernyő CSS-én.

    ⚠️ Pink SEHOL nem hordoz feliratot ezen a képernyőn — sőt, egyáltalán nem szerepel. A pénzügyi
    következményű állapotokat a Badge (szöveg + árnyalat) és a --color-danger-text viszi, mert egy
    táblázatos ops-felületen a dekoratív kitöltésnek sincs helye.
*/

.subs__form[b-2r93mrweg0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-inline-size: 34rem;
}

.subs__field[b-2r93mrweg0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.subs__field label[b-2r93mrweg0] {
    font: var(--text-sm);
    font-weight: 600;
}

.subs__field input[b-2r93mrweg0],
.subs__field select[b-2r93mrweg0] {
    min-block-size: var(--size-touch-target);
    padding: var(--space-2) var(--space-3);

    /* ⚠️ --color-border-input, nem --color-border: az utóbbi fehéren 1.20, dekoratív elválasztó. */
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--text-body);
}

.subs__hint[b-2r93mrweg0] {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--text-sm);
}

/* ⚠️ SÖTÉT vörös szöveg (fehéren 6.47), nem pink és nem világos: normál méretű felirat. */
.subs__error[b-2r93mrweg0] {
    margin: 0;
    color: var(--color-danger-text);
    font: var(--text-sm);
    font-weight: 600;
}

.subs__actions[b-2r93mrweg0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* A fókuszgyűrű a programozottan fókuszált akció-sávon is kell — oda tér vissza a dialógus. */
.subs__actions:focus-visible[b-2r93mrweg0] {
    border-radius: var(--radius-control);
}

.subs__count[b-2r93mrweg0] {
    margin: var(--space-4) 0 var(--space-2);
    color: var(--color-text-muted);
    font: var(--text-sm);
}

/* ⚠️ A táblázat MAGA görög, nem a lap. Az oldal vízszintesen sosem csúszhat el. */
.subs__scroll[b-2r93mrweg0] {
    overflow-x: auto;
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.subs__table[b-2r93mrweg0] {
    inline-size: 100%;
    border-collapse: collapse;
    font: var(--text-body);
}

.subs__table th[b-2r93mrweg0],
.subs__table td[b-2r93mrweg0] {
    padding: var(--space-3) var(--space-4);
    text-align: start;
    vertical-align: top;
    border-block-end: 1px solid var(--color-border);
}

.subs__table th[b-2r93mrweg0] {
    color: var(--color-text-muted);
    font: var(--text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.subs__table tbody tr:last-child td[b-2r93mrweg0] {
    border-block-end: 0;
}

.subs__email[b-2r93mrweg0] {
    display: block;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/*
   ⚠️ A törölt fiók sora NEM tűnik el és NEM halványul el: fizető előfizetés futhat fiók nélkül
   (a számviteli nyom nem törölhető a felhasználó kérésére), és ezt az üzemeltetőnek látnia kell.
*/
.subs__deleted[b-2r93mrweg0] {
    display: block;
    color: var(--color-danger-text);
    font-weight: 600;
}

.subs__raw[b-2r93mrweg0] {
    display: block;
    color: var(--color-text-muted);
    font: var(--text-xs);
    overflow-wrap: anywhere;
}

.subs__muted[b-2r93mrweg0] {
    display: block;
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.subs__misconfigured[b-2r93mrweg0] {
    color: var(--color-danger-text);
    font-weight: 600;
}

.subs__empty[b-2r93mrweg0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-6);
    border-radius: var(--radius-card);
    background-color: var(--color-surface-muted);
}

.subs__empty-title[b-2r93mrweg0] {
    margin: 0;
    font: var(--text-h2);
}

.subs__more[b-2r93mrweg0] {
    margin-block-start: var(--space-4);
}

.subs__end[b-2r93mrweg0] {
    margin-block-start: var(--space-4);
    color: var(--color-text-muted);
    font: var(--text-sm);
}

/*
    ⚠️ Mobilon a táblázat KÁRTYÁKRA esik szét, nem vízszintesen görög. Hét oszlopot 375 px-en
    görgetve a „Megnyitom" gomb a képernyő szélén túl lenne — egy pénzügyi művelet belépési pontja
    nem lehet oldalirányú keresés mögé rejtve.
*/
@media (max-width: 48rem) {
    .subs__table thead[b-2r93mrweg0] {
        display: none;
    }

    .subs__table tr[b-2r93mrweg0] {
        display: block;
        padding: var(--space-3) var(--space-4);
        border-block-end: 1px solid var(--color-border);
    }

    .subs__table td[b-2r93mrweg0] {
        display: grid;
        grid-template-columns: 8rem 1fr;
        gap: var(--space-2);
        padding: var(--space-1) 0;
        border: 0;
    }

    .subs__table td[b-2r93mrweg0]::before {
        content: attr(data-label);
        color: var(--color-text-muted);
        font: var(--text-sm);
    }
}
/* /Pages/Admin/AdminTwoFactor.razor.rz.scp.css */
/*
   A másodfaktor-képernyő. A CSS-izoláció komponensenkénti, ezért a katalógus-oldalak
   `.catalog__*` szabályai ide nem érnek el — a hasonlóság szándékos duplikáció, nem hiba.
*/

.twofa__steps[b-easglzp0nj] {
    margin: var(--space-4) 0 0;
    padding-inline-start: var(--space-5);
    display: grid;
    gap: var(--space-4);
    font: var(--text-body);
}

/* A titok tördelve, monospace-ben: kézi bevitelnél az elgépelés a leggyakoribb hibaforrás. */
.twofa__secret code[b-easglzp0nj] {
    display: inline-block;
    margin-block-start: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-control);
    background-color: var(--color-surface-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.125rem;
    letter-spacing: 0.12em;
    overflow-wrap: anywhere;
}

.twofa__uri[b-easglzp0nj] {
    margin-block-start: var(--space-2);
}

.twofa__hint[b-easglzp0nj] {
    margin-block-start: var(--space-1);
    color: var(--color-text-muted);
    font: var(--text-sm);
}

/*
   A kódmező a `FormField` + `OneTimeCodeInput` párosa (a felhasználói úttal közös): a címke és a
   mező stílusa a SAJÁT komponensükben él — a lap scoped CSS-e a gyerek-komponens elemeit amúgy
   sem érné el.
*/
.twofa__field[b-easglzp0nj] {
    margin-block-start: var(--space-2);
}

/*
   A kódok RÁCSBAN, nagy betűvel: papírra írásnál a szem soronként ugrik, és két hasonló
   karakter (0/O) összekeverése egy elveszett helyreállítási lehetőség.
*/
.twofa__codes[b-easglzp0nj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-2) var(--space-4);
    margin: var(--space-4) 0 0;
    padding-inline-start: var(--space-5);
}

.twofa__codes code[b-easglzp0nj] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1rem;
    letter-spacing: 0.08em;
}

.twofa__download[b-easglzp0nj] {
    margin-block-start: var(--space-4);
    font: var(--text-sm);
}

.twofa__ack[b-easglzp0nj] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-block-start: var(--space-4);
    font: var(--text-body);
    cursor: pointer;
}

.twofa__ack input[b-easglzp0nj] {
    inline-size: 20px;
    block-size: 20px;
    margin-block-start: 2px;
    flex: none;
}

.twofa__row[b-easglzp0nj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    font: var(--text-body);
}

.twofa__actions[b-easglzp0nj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-block: var(--space-4);
}

@media (max-width: 479.98px) {
    .twofa__actions > *[b-easglzp0nj] {
        inline-size: 100%;
    }
}

/*
   A beállítás jelszó- és kód-űrlapja — ugyanaz a függőleges ritmus, mint a felhasználói út `.setup__form`-ja
   (AccountTwoFactorSetup.razor.css). Nélküle a hibás jelszónál megjelenő hibasáv a mezőhöz
   tapadt (sem a `FormField`, sem az `InlineNotice` nem hoz külső margót), a gombsor alsó margója
   pedig a kártya belső térköze fölé még 16 px-t tett. A kártyán belüli helyét a `.card__body`
   `gap`-je adja, ezért itt nincs felső margó.
*/
.twofa__password[b-easglzp0nj],
.twofa__verify[b-easglzp0nj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* A távolságot itt a `gap` adja — a gombsor saját margója duplázná. */
.twofa__password > .twofa__actions[b-easglzp0nj],
.twofa__verify > .twofa__actions[b-easglzp0nj] {
    margin-block: 0;
}
/* /Pages/Admin/AdminTwoFactorResets.razor.rz.scp.css */
/*
    A támogatói 2FA-visszaállítás (2FA-D5) admin-lapja.

    ⚠️ A táblázat-stílus SZÁNDÉKOSAN az előfizetés-lista (`AdminSubscriptions.razor.css`) mintáját
    ismétli: a Blazor CSS-izolációja komponensenkénti, egy közös osztály a másik komponensben nem
    érvényesülne.

    ⚠️ Pink SEHOL nem hordoz feliratot ezen a képernyőn. A figyelmeztetést az InlineNotice
    (Warning) és a --color-danger-text viszi; az egyetlen pink felület a Primary gomb, ami
    `--color-primary-strong` (fehér szöveggel 5.75:1).
*/

.resets__form[b-4bvwzy6esd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-inline-size: 40rem;
}

.resets__input[b-4bvwzy6esd] {
    inline-size: 100%;
    min-block-size: var(--size-touch-target);
    padding: var(--space-2) var(--space-3);

    /* ⚠️ --color-border-input, nem --color-border: az utóbbi fehéren 1.20, dekoratív elválasztó. */
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--text-body);
}

.resets__hint[b-4bvwzy6esd] {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.resets__verify[b-4bvwzy6esd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface-muted);
}

.resets__verify-title[b-4bvwzy6esd] {
    margin: 0;
    font: var(--text-h3);
}

.resets__facts[b-4bvwzy6esd] {
    display: grid;
    gap: var(--space-2);
    margin: 0;
}

.resets__facts > div[b-4bvwzy6esd] {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: var(--space-2);
}

.resets__facts dt[b-4bvwzy6esd] {
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.resets__facts dd[b-4bvwzy6esd] {
    margin: 0;
    color: var(--color-text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.resets__actions[b-4bvwzy6esd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.resets__actions:focus-visible[b-4bvwzy6esd] {
    border-radius: var(--radius-control);
}

.resets__list[b-4bvwzy6esd] {
    margin-block-start: var(--space-6);
}

.resets__list-title[b-4bvwzy6esd] {
    margin: 0 0 var(--space-3);
    font: var(--text-h2);
}

/* ⚠️ A táblázat MAGA görög, nem a lap. Az oldal vízszintesen sosem csúszhat el. */
.resets__scroll[b-4bvwzy6esd] {
    overflow-x: auto;
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.resets__table[b-4bvwzy6esd] {
    inline-size: 100%;
    border-collapse: collapse;
    font: var(--text-body);
}

.resets__table th[b-4bvwzy6esd],
.resets__table td[b-4bvwzy6esd] {
    padding: var(--space-3) var(--space-4);
    text-align: start;
    vertical-align: top;
    border-block-end: 1px solid var(--color-border);
}

.resets__table th[b-4bvwzy6esd] {
    color: var(--color-text-muted);
    font: var(--text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.resets__table tbody tr:last-child td[b-4bvwzy6esd] {
    border-block-end: 0;
}

.resets__email[b-4bvwzy6esd] {
    display: block;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.resets__raw[b-4bvwzy6esd] {
    display: block;
    color: var(--color-text-muted);
    font: var(--text-xs);
    overflow-wrap: anywhere;
}

.resets__muted[b-4bvwzy6esd] {
    display: block;
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.resets__reason[b-4bvwzy6esd] {
    display: block;
    max-inline-size: 28rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.resets__empty[b-4bvwzy6esd] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-6);
    border-radius: var(--radius-card);
    background-color: var(--color-surface-muted);
}

.resets__empty-title[b-4bvwzy6esd] {
    margin: 0;
    font: var(--text-h3);
}

.resets__empty p[b-4bvwzy6esd] {
    margin: 0;
}

/*
    ⚠️ Mobilon a táblázat KÁRTYÁKRA esik szét (az előfizetés-lista mintája): hat oszlopot 375 px-en
    görgetve a „Visszavonás" gomb a képernyő szélén túl lenne.
*/
@media (max-width: 48rem) {
    .resets__table thead[b-4bvwzy6esd] {
        display: none;
    }

    .resets__table tr[b-4bvwzy6esd] {
        display: block;
        padding: var(--space-3) var(--space-4);
        border-block-end: 1px solid var(--color-border);
    }

    .resets__table td[b-4bvwzy6esd] {
        display: grid;
        grid-template-columns: 8rem 1fr;
        gap: var(--space-2);
        padding: var(--space-1) 0;
        border: 0;
    }

    .resets__table td[b-4bvwzy6esd]::before {
        content: attr(data-label);
        color: var(--color-text-muted);
        font: var(--text-sm);
    }

    .resets__facts > div[b-4bvwzy6esd] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Brand/BrandAudience.razor.rz.scp.css */
/*
    Az életkor két mezője egymás mellett — mobilon egymás alatt.

    A `max-inline-size` nem esztétika: egy 0–120 közötti szám mezője a kártya teljes szélességében
    azt sugallná, hogy hosszú szöveget várunk bele.
*/
.audience__age[b-j14j2ta06m] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    max-inline-size: 24rem;
}

@media (max-width: 767.98px) {
    .audience__age[b-j14j2ta06m] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Pages/Brand/BrandBasics.razor.rz.scp.css */
/* Ország és Város egy sorban — mobilon egymás alatt. */
.basics__location[b-znpc0bdk5r] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (max-width: 767.98px) {
    .basics__location[b-znpc0bdk5r] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A szekció bevezetője — az „opcionális" kimondása, a terv kötelező-sávja HELYETT. */
.basics__social-lead[b-znpc0bdk5r] {
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
    font: var(--text-sm);
}

/*
    Öt profil-URL. A terv EGY sorban rajzolja őket; öt teljes szélességű URL-mező egy sorban
    viszont ~150 px-es inputokat adna, amiben egy `https://instagram.com/…` cím elolvashatatlan.
    Ezért a rács a rendelkezésre álló helyhez igazodik: `auto-fit` + 220 px minimum — nagy
    képernyőn öt oszlop, tableten kettő-három, mobilon egy.
*/
.basics__social[b-znpc0bdk5r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

/*
    Logó / Profilkép — az „1. Alapadatok" blokk utolsó eleme.

    ⚠️ A felső elválasztó nem dekoráció: a fölötte álló mezők autosave-esek („Mentve" jelzéssel),
    ez a blokk viszont KÜLÖN végponton ment, saját visszajelzéssel. A vizuális szünet az, ami
    megmondja, hogy a kettő nem ugyanaz a mentés.
*/
.basics__logo[b-znpc0bdk5r] {
    margin-block-start: var(--space-5);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border);
}

.basics__logo-label[b-znpc0bdk5r] {
    margin: 0 0 var(--space-1);
    font: var(--text-h3);
    color: var(--color-text);
}

.basics__logo-lead[b-znpc0bdk5r] {
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
    font: var(--text-sm);
}
/* /Pages/Brand/BrandGoals.razor.rz.scp.css */
/*
    Célok és kampányok.

    ⚠️ A pink itt SEHOL nem hordoz feliratot: a kiválasztott kampánysor pink KERETET és halvány
    pink hátteret kap, a szöveg marad a normál szövegszínen. A „most fut" badge színét a Badge
    komponens tokenjei adják (`-subtle` háttér + `-text` felirat), nem ez a fájl.
*/
.goals[b-ocpchp8dwb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-grid-gap);
}

/* ── Kampánylista ─────────────────────────────────────────────────────────── */

.goals__list[b-ocpchp8dwb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.goals__item[b-ocpchp8dwb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    inline-size: 100%;
    min-block-size: var(--size-touch-target);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    font: var(--text-body);
    color: var(--color-text);
    text-align: start;
    cursor: pointer;
}

.goals__item.is-selected[b-ocpchp8dwb] {
    border-color: var(--color-primary-strong);
    background-color: var(--color-primary-subtle);
}

.goals__item-name[b-ocpchp8dwb] {
    font: var(--text-h3);
    overflow-wrap: anywhere;
}

.goals__item-period[b-ocpchp8dwb] {
    /* A dátum nem tördelhető el: egy fél időszak félrevezetőbb, mint a vízszintes szűkülés. */
    white-space: nowrap;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

/* ── Üres állapot ─────────────────────────────────────────────────────────── */

.goals__empty[b-ocpchp8dwb] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface-muted);
}

.goals__empty h3[b-ocpchp8dwb] {
    margin: 0;
    font: var(--text-h3);
}

.goals__empty p[b-ocpchp8dwb] {
    margin: 0;
    max-inline-size: 60ch;
    font: var(--text-body);
    color: var(--color-text-muted);
}

/* ── Szerkesztő ───────────────────────────────────────────────────────────── */

.goals__editor[b-ocpchp8dwb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border);
}

.goals__editor-head[b-ocpchp8dwb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.goals__editor-head h3[b-ocpchp8dwb] {
    margin: 0;
    font: var(--text-h3);
}

.goals__editor-hint[b-ocpchp8dwb],
.goals__hint[b-ocpchp8dwb] {
    margin: 0;
    max-inline-size: 70ch;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.goals__input[b-ocpchp8dwb] {
    inline-size: 100%;
    min-block-size: var(--size-touch-target);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    font: var(--text-body);
    background-color: var(--color-surface);
    color: var(--color-text);
}

/*
    A két dátum egymás mellett — mert EGY döntés két fele. Mobilon egymás alá kerül: két
    egymás melletti dátum-input a legszűkebb kijelzőn olvashatatlanul összenyomódna.
*/
.goals__dates[b-ocpchp8dwb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.goals__toggle[b-ocpchp8dwb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.goals__toggle label[b-ocpchp8dwb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--size-touch-target);
    font: var(--text-h3);
    cursor: pointer;
}

.goals__actions[b-ocpchp8dwb],
.goals__confirm[b-ocpchp8dwb] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
}

.goals__confirm[b-ocpchp8dwb] {
    margin-block-start: var(--space-3);
}

@media (max-width: 767.98px) {
    .goals__dates[b-ocpchp8dwb] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* A kampánysor mobilon két sorba tördel: a név, alatta az időszak és az állapot. */
    .goals__item[b-ocpchp8dwb] {
        flex-wrap: wrap;
    }
}
/* /Pages/Brand/BrandOverviewPage.razor.rz.scp.css */
/*
    A lap három sávja: a felső (felkészültség + teendők + AI-helytartó), az összefoglaló kártyák
    sora, és a teljes szélességű Tartalompreferenciák blokk.

    ⚠️ A sávok FLEX oszlopban ülnek, a kártyák pedig soronként `auto-fit` rácsban. Egyetlen közös
    rácsba téve a teljes szélességű blokk vagy egy oszlopba szorulna, vagy `grid-column: 1 / -1`
    trükköt igényelne — a mobil nézetben pedig a két sáv sorrendje csúszna el.
*/
.brand-overview[b-bh225yburl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-grid-gap);
}

.brand-overview__row[b-bh225yburl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-grid-gap);
    align-items: start;
}

/* A haladás-jelző a közös ProgressRing komponens — a saját stílusát ő hordozza. */

.brand-overview__next[b-bh225yburl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    list-style: none;
    padding-inline-start: 0;
}

.brand-overview__next li[b-bh225yburl] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.brand-overview__label[b-bh225yburl] {
    font: var(--text-h3);
}

.brand-overview__input[b-bh225yburl] {
    min-block-size: var(--size-touch-target);
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    font: var(--text-body);
    max-inline-size: 32rem;
}

/*
    A kész szekciók listája. ⚠️ A pipa `aria-hidden`, a jelentést a „kész" szó viszi — színnel
    vagy ikonnal kódolt állapot képernyőolvasóval és színtévesztéssel is olvashatatlan lenne.
*/
/* A pipa DEKORATÍV — a jelentést a „kész" SZÓ viszi. A `color:` marad: az ikon
 * `stroke="currentColor"`-t visz, és a scoped CSS a gyerek SVG-jére nem tud illeszkedni. */
.brand-overview__check[b-bh225yburl] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--cat-success-text);
}
/* /Pages/Brand/BrandServices.razor.rz.scp.css */
/* Master-detail: bal keskeny lista + jobb széles szerkesztő. */
.services[b-qgrq6kje5l] {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: var(--space-grid-gap);
    align-items: start;
}

.services__list ul[b-qgrq6kje5l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.services__item[b-qgrq6kje5l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    inline-size: 100%;
    min-block-size: var(--size-touch-target);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    font: var(--text-body);
    text-align: start;
    cursor: pointer;
}

.services__item.is-selected[b-qgrq6kje5l] {
    border-color: var(--color-primary-strong);
    background-color: var(--color-primary-subtle);
}

.services__item-name[b-qgrq6kje5l] {
    overflow-wrap: anywhere;
}

/* ⚠️ A `.services__field` SZABÁLYCSALÁD 2026-09-02-ÉN MEGSZŰNT, és a törlés a JELÖLÉS
   következménye, nem takarítási ötlet. A lap két utolsó blokkja („Kapcsolódó célcsoport
   szegmensek”, „Állapot”) saját `<label>`-lel és saját geometriával élt, `FormField` nélkül —
   emiatt azon a két blokkon NEM működött sem az `aria-describedby` lánc, sem az `aria-invalid`.
   Mindkettő `FormField`-re került, tehát a címke-tipográfiát és a kontroll-geometriát innentől a
   közös `form-field` / `.field-*` réteg adja, egy helyen a Márka mind a hat aloldalára.

   ⚠️ Az `input`/`textarea`/`select` geometriát is ez a szabály adta, ÉS EZ VOLT A CSENDES
   ELTÉRÉS: a lap két `<select>`-je közül az „Állapot” ezt a helyi alakot viselte, a „Kategória”
   már a közös `.form-field ::deep select`-et — ugyanaz a vezérlő KÉT MÉRETTEL állt egy lapon,
   mert a helyi alakból hiányzott az `inline-size: 100%`. A közös réteg ráadásul ad egy
   `[aria-invalid="true"] { border-color: … }` szabályt is, amit a helyi soha nem tudott
   megszólítani: ezen a két blokkon `aria-invalid` sem volt. */

/*
   A négy címke-mező párban áll — így a szerkesztő nem nyúlik el egyetlen hosszú oszloppá.
   A `services__field` szabályait SZÁNDÉKOSAN nem örökli: az `label { font: h3 }` a TagInput
   saját címkéjét is átméretezné, és a Márka többi aloldalán ugyanaz a mező máshogy nézne ki.
*/
.services__pair[b-qgrq6kje5l] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-grid-gap);
    align-items: start;
}

.services__pair-cell[b-qgrq6kje5l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-inline-size: 0;
}

/* ⚠️ A `.services__required` szabály 2026-08-29-én MEGSZŰNT. Kézzel írt csillag volt EGYETLEN
   mezőn (a Néven), miközben a lap öt további kötelező mezője jelöletlen maradt. A jelölést azóta
   a közös `FormField` adja — és az KÉT szintet tud (kapu-csillag / „az AI-nak segít" chip), amit
   egy `color`-szabály sosem tudott volna. */

.services__hint[b-qgrq6kje5l] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.services__confirm[b-qgrq6kje5l] {
    display: flex;
    gap: var(--space-3);
    margin-block-start: var(--space-3);
    flex-wrap: wrap;
}

/* A „Vissza a listához" gomb csak mobilon kell — asztalon a lista végig látszik. */
/*
   ⚠⚠ A `::deep` NEM elhagyható, és a hiánya MÉRT hiba volt. A gombot a `Button`
   komponens rendereli, tehát a `<button class="button">` a `Button` SAJÁT scope-horgonyát
   viszi, nem a lapét — `::deep` nélkül a Blazor a LAP horgonyát írta a `.button`-ra
   (`.services__detail .button[...][b-<lap>]`), ami SOHA nem illeszkedett. Következmény: a
   `display: none` sem érvényesült, tehát a mobil-only „Vissza" gomb ASZTALON IS ott állt —
   pont az ellenkezője annak, amit a fölötte álló sor ígér. Kapu: `ServicesBackButtonScopeTests`.
*/
.services__detail[b-qgrq6kje5l]  .button[data-testid="services-back"] {
    display: none;
}

@media (max-width: 767.98px) {
    .services[b-qgrq6kje5l] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Mobilon két képernyő: a részlet megnyitása elrejti a listát. */
    .services.is-detail-open .services__list[b-qgrq6kje5l] {
        display: none;
    }

    .services__detail[b-qgrq6kje5l]  .button[data-testid="services-back"] {
        display: inline-flex;
    }

    /* Mobilon a két hasáb egymás alá kerül — a címke-mezők amúgy is sorokba tördelődnek. */
    .services__pair[b-qgrq6kje5l] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Pages/Content/ContentCalendarPage.razor.rz.scp.css */
/* Tartalomnaptár — a heti rács és a lap-szintű elemek.

   ⚠️⚠️ A NAP-KÁRTYA BELSEJÉT NEM EZ A FÁJL STÍLUSOZZA. A Blazor scoped CSS (`[b-hash]`) a lap
   SAJÁT jelöléséhez tapad; a `<div role="gridcell" class="calendar-day">` a `CalendarDayCard`
   komponensben keletkezik, tehát innen írt `.calendar-day` szabály nem illeszkedne rá. Ami a
   lapé: a `role="grid"` keret és a `role="row"` rács maga (itt keletkeznek), és a rács-elrendezés
   a gyerekekre a szülőn keresztül hat. */

.calendar__week[b-hh1116yn79] {
    display: flex;
    flex-direction: column;
    gap: var(--space-section);
}

.calendar__week-range[b-hh1116yn79] {
    margin: 0 0 var(--space-4);
    font: var(--text-sm);
    color: var(--color-text-muted);
}

/* ── A hét oszlop ─────────────────────────────────────────────────────────
   A `design-system.md` „Rácsok” szakasza: „Tartalomnaptár: 7 oszlopos napi rács.”
   ⚠️ A CSS-rács a `role="row"` elemen él (a `role="grid"` csak a keret): a hét egyetlen ARIA-sor,
   a vizuális elrendezés pedig ettől függetlenül töri a napokat oszlopokba. */
.calendar__grid[b-hh1116yn79] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── A rács billentyűzetes útmutatója ──────────────────────────────────────
   ⚠️ Alapból csak a képernyőolvasónak szól (a rács `aria-describedby`-ja), és akkor válik
   LÁTHATÓVÁ, amikor a fókusz a rácsban van — a látó billentyűzet-használónak is ki kell mondani,
   hogy a nap gombjaihoz Enter kell, az egérrel dolgozónak viszont ez zaj. A rács ALATT áll, hogy
   a megjelenése ne tolja el a fókuszált kártyát. A rejtett alak a `.u-visually-hidden` mása: a
   globális osztály nem kapcsolható ki `:focus-within`-re scoped CSS-ből. */
.calendar__grid-hint[b-hh1116yn79] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.calendar__grid-frame:focus-within + .calendar__grid-hint[b-hh1116yn79] {
    position: static;
    width: auto;
    height: auto;
    margin: var(--space-3) 0 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    font: var(--text-xs);
    color: var(--color-text-muted);
}

/* ⚠️⚠️ HÉT OSZLOP CSAK `--bp-2xl` (1440 px) FÖLÖTT — tulajdonosi döntés, 2026-09-26
   (`docs/DECISIONS.md` → F15). Alatta a rács folyó (`auto-fill`, ≥ 220 px-es oszlopok), a napok
   sorrendje változatlan; 1280–1439 px között ez négy + három cella két sorban.
   A mért ok (1280×800, a régi 1279,98-as határral): 7 × 120,8 px-es oszlop, 87 px-es szövegdoboz —
   szavak lógtak ki a kártyából (`overflow-wrap: normal`), és a rács sor-nyújtása minden cellát a
   legmagasabb napra, 905 px-re húzott, tehát a mai cella fókuszgyűrűje nem fért a látómezőbe.
   A @media custom property-t nem tud kiértékelni: a literál a token MÁSOLATA, és a
   `ContentCalendarBreakpointTests` köti a tokenhez — a szám egy helyen él. */
@media (max-width: 1439.98px) {
    .calendar__grid[b-hh1116yn79] {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

/* ⚠️ MOBIL: NAP-LISTÁS NÉZET. A `design-system.md` reszponzivitás-szakasza kimondja: „A 7
   oszlopos tartalomnaptár mobilon nem működik → nap-listás nézet.” Egyetlen oszlop, a kártyák
   pedig fekvő elrendezésre váltanak (l. `CalendarDayCard.razor.css`) — így a hét görgethető
   lista lesz, nem hét teljes képernyő. */
@media (max-width: 767.98px) {
    .calendar__grid[b-hh1116yn79] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
    }
}

/* ── Üres állapot ─────────────────────────────────────────────────────── */

.calendar__empty-title[b-hh1116yn79] {
    margin: 0 0 var(--space-2);
    font: var(--text-h2);
    color: var(--color-text);
}

.calendar__empty-body[b-hh1116yn79] {
    margin: 0 0 var(--space-4);
    max-inline-size: 60ch;
    font: var(--text-body);
    color: var(--color-text-muted);
}

/* ── „Másik út a tartalomhoz” — diszkrét záró sáv ─────────────────────── */

.calendar__other-ways[b-hh1116yn79] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: baseline;
    padding: var(--space-4);
    font: var(--text-sm);
    color: var(--color-text-muted);
    background-color: var(--color-surface-muted);
    border-radius: var(--radius-card);
}

.calendar__other-ways a[b-hh1116yn79] {
    color: var(--color-text);
}
/* /Pages/Content/ContentPlanList.razor.rz.scp.css */
/* Terveim — lista. */

.plan-list__views[b-idu5ej4cpt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-end: var(--space-5);
    border-block-end: 1px solid var(--color-border);
}

.plan-list__view[b-idu5ej4cpt] {
    padding: var(--space-3) var(--space-4);
    font: var(--text-body);
    color: var(--color-text-muted);
    text-decoration: none;
    border-block-end: 2px solid transparent;
}

.plan-list__view:hover[b-idu5ej4cpt],
.plan-list__view:focus-visible[b-idu5ej4cpt] {
    color: var(--color-text);
}

/* ⚠️ Az aktív nézetet NEM csak a szín jelöli: az alsó vonal és az `aria-current` is. Színnel
   egyedül jelölve a jelzés színvakoknál elveszik. A vonal a `--color-primary` dekoratív
   kitöltője, a FELIRAT viszont a szöveg-tokent kapja — a pink normál méretű szöveghez nem elég
   kontrasztos. */
.plan-list__view.is-current[b-idu5ej4cpt] {
    color: var(--color-primary-text);
    border-block-end-color: var(--color-primary);
    font-weight: 600;
}

.plan-list__filter[b-idu5ej4cpt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-block-end: var(--space-5);
}

.plan-list__filter label[b-idu5ej4cpt] {
    font: var(--text-sm);
    font-weight: 500;
}

.plan-list__count[b-idu5ej4cpt] {
    margin: 0 0 var(--space-4);
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.plan-list__rows[b-idu5ej4cpt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.plan-list__more[b-idu5ej4cpt] {
    display: flex;
    justify-content: center;
    margin-block-start: var(--space-5);
}

.plan-list__end[b-idu5ej4cpt] {
    margin-block-start: var(--space-5);
    font: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
}

.plan-list__empty[b-idu5ej4cpt] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    max-inline-size: 46rem;
    padding: var(--space-card);
    background-color: var(--color-surface-muted);
    border-radius: var(--radius-card);
}

.plan-list__empty-title[b-idu5ej4cpt] {
    margin: 0;
    font: var(--text-h2);
}

.plan-list__empty p[b-idu5ej4cpt] {
    margin: 0;
    font: var(--text-body);
    color: var(--color-text-muted);
}
/* /Pages/Content/ContentPlanPage.razor.rz.scp.css */
/* ContentPlanPage — a generált terv képernyője.

   ⚠️ EGYOSZLOPOS, szándékosan. A képernyőterv a kimenetet fülekre (Script / Posztleírás / CTA /
   Hashtagek) osztja; itt egymás alatti kártyák állnak. A terv egy FORGATÓKÖNYV: a felhasználó
   felvétel közben olvassa, és a fülek pont azt a részt rejtenék el, ami épp kell. Egymás alatt
   mobilon is végigolvasható, és nyomtatásban/másolásban is egyben marad. */

.plan[b-zapaual5ll] {
    display: flex;
    flex-direction: column;
    gap: var(--space-grid-gap);
}

.plan__result[b-zapaual5ll] {
    display: flex;
    flex-direction: column;
    gap: var(--space-grid-gap);
}

.plan__facts[b-zapaual5ll] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin: 0 0 var(--space-4);
}

.plan__facts dt[b-zapaual5ll] {
    font: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.plan__facts dd[b-zapaual5ll] {
    margin: var(--space-1) 0 0;
    font: var(--text-body);
    color: var(--color-text);
}

.plan__working[b-zapaual5ll] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin: 0 0 var(--space-3);
    font: var(--text-body);
    color: var(--color-text);
}

/* Dekoratív pörgő: a jelentést a mellette álló szöveg hordozza. */
.plan__spinner[b-zapaual5ll] {
    flex: 0 0 auto;
    inline-size: var(--size-icon-md);
    block-size: var(--size-icon-md);
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-pill);
    animation: plan-spin-b-zapaual5ll 900ms linear infinite;
}

@keyframes plan-spin-b-zapaual5ll {
    to { transform: rotate(360deg); }
}

/* Csökkentett mozgásnál nem forog — a szöveg akkor is elmondja, hogy dolgozunk. */
@media (prefers-reduced-motion: reduce) {
    .plan__spinner[b-zapaual5ll] {
        animation: none;
    }
}

.plan__note[b-zapaual5ll] {
    margin: 0 0 var(--space-3);
    font: var(--text-sm);
    color: var(--color-text-muted);
}

/* A generált szöveg sortöréseit megtartjuk: az AI bekezdéseket ad, nem egy hosszú sort. */
.plan__text[b-zapaual5ll] {
    margin: 0;
    font: var(--text-body);
    color: var(--color-text);
    white-space: pre-wrap;
}

.plan__tags[b-zapaual5ll] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.plan__tags li[b-zapaual5ll] {
    padding: var(--space-1) var(--space-3);
    font: var(--text-sm);
    color: var(--color-primary-text);
    background-color: var(--color-primary-subtle);
    border-radius: var(--radius-pill);
}

/* Az indoklás-kártya alcíme („Mit vett figyelembe"). A címsor-szint h3, mert a kártya címe h2. */
.plan__subhead[b-zapaual5ll] {
    margin: var(--space-4) 0 var(--space-1);
    font: var(--text-h3);
    color: var(--color-text);
}

/* ── A lezárás („Kész, elkészítettem") ──────────────────────────────────────

   ⚠️ A gomb a --color-primary-strong felületet kapja (a `button--primary`-n keresztül), NEM a
   dekoratív #FF3EAA-t: fehér felirattal az 5.75:1, míg a dekoratív pinken 3.22:1 lenne. Egy
   visszavonhatatlan műveletet hordozó feliratnál ez nem esztétikai kérdés. */

.plan__done-actions[b-zapaual5ll] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
}

/*
    Az export két útja. `flex-wrap`, mert mobilon a két felirat egymás alá kerül — és mindkettő
    teljes szélességű marad, nem fél gombokra tördelve.
*/
.plan__export[b-zapaual5ll] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-end: var(--space-3);
}

/*
    ── Nyomtatás ────────────────────────────────────────────────────────────────

    ⚠️ EZ NEM AZ EXPORT ÚTJA, hanem a legkézenfekvőbb TÉVEDÉS elrendezése. A terv nyomtatható
    alakja a forgatási nézet (`/tartalom/tervezo/{id}/forgatas`) — ott áll a `PlanScript` és a
    két médium stíluslapja. De a felhasználó ezen a lapon is megnyomhatja a Ctrl+P-t, és akkor a
    papírra a KÉT tisztán műveleti kártya is rákerülne. A `design-system.md` nyomtatási táblája
    ezt így írja: „minden CTA — egyik sem hordoz információt papíron".

    ⚠️ SZÍNT EZ AZ ÁG NEM ÁLLÍT, és nem is kell: ez a lap MINDKÉT médiumon világos felületen áll,
    tehát a szövegszínei papíron ugyanúgy helyesek. A forgatási nézetnél ez pont fordítva van —
    ott a nyomtatási ág a nézet fele, l. `PlanScriptPage.razor.css`.
*/
@media print {
    .plan__export[b-zapaual5ll],
    .plan__done-actions[b-zapaual5ll] {
        display: none;
    }

    /* Egy kártya ne törjön ketté két oldal között. */
    .plan > *[b-zapaual5ll] {
        break-inside: avoid;
    }
}

/* A visszaigazolás zöld — de a jelentést a SZÖVEG hordozza, nem a szín. */
.plan__done[b-zapaual5ll] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin: 0 0 var(--space-3);
    font: var(--text-body);
    color: var(--cat-success-text);
}

/* A pipa dekoratív (aria-hidden), ezért a halvány felület + sötét zöld a helyes párosítás: a
   --cat-success-solid fehér felirattal 3.26:1 lenne, ami szöveg-glifánál bukik. */
.plan__done-mark[b-zapaual5ll] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--size-icon-md);
    block-size: var(--size-icon-md);
    border-radius: var(--radius-pill);
    background-color: var(--cat-success-subtle);
    color: var(--cat-success-text);
    font: var(--text-sm);
}
/* /Pages/Content/ContentPlanSetup.razor.rz.scp.css */
/* ContentPlanSetup — a tervező beállítás-képernyője.

   ⚠️ Az „Indítás" oldalsáv MOBILON a beállítások ALÁ kerül, nem melléjük: a gomb csak a három
   lépés kitöltése után értelmes, tehát a kis képernyőn is utánuk következik. Az egyoszlopos
   sorrend így megegyezik az olvasási sorrenddel — a `grid-template-areas` átrendezés itt
   pontosan azt törné el. */

.plan-setup[b-kw4d5t5szg] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-grid-gap);
    align-items: start;
}

.plan-setup__main[b-kw4d5t5szg],
.plan-setup__side[b-kw4d5t5szg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-grid-gap);
    min-width: 0;
}

/* A jobb oszlop az oldal görgetésével együtt mozog — az indítás mindig kéznél van. */
.plan-setup__side[b-kw4d5t5szg] {
    position: sticky;
    top: var(--space-5);
}

.plan-setup__select[b-kw4d5t5szg] {
    inline-size: 100%;
    min-height: var(--size-touch-target);
    padding: 0 var(--space-3);
    font: var(--text-body);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
}

.plan-setup__gate[b-kw4d5t5szg] {
    margin: 0;
    padding-inline-start: var(--space-5);
    font: var(--text-sm);
    color: var(--color-text);
}

.plan-setup__gate li + li[b-kw4d5t5szg] {
    margin-top: var(--space-1);
}

.plan-setup__note[b-kw4d5t5szg] {
    margin: 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

@media (max-width: 1023.98px) {
    .plan-setup[b-kw4d5t5szg] {
        grid-template-columns: minmax(0, 1fr);
    }

    .plan-setup__side[b-kw4d5t5szg] {
        position: static;
    }
}
/* /Pages/Content/ContentRecommenderPage.razor.rz.scp.css */
/* ⚠️ Master-detail helyett KÉT HASÁB, és mobilon egy. A jobb hasáb (Indítás) az, ami az árat és
   a kapu-hiányt mondja ki — mobilon ezért a beállítások ALÁ kerül, nem föléjük: az ár a
   kattintás előtt kell, és a gomb ott van. */
.recommender[b-kh1zw9kvak] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: var(--space-grid-gap);
    align-items: start;
}

.recommender__main[b-kh1zw9kvak],
.recommender__side[b-kh1zw9kvak] {
    display: flex;
    flex-direction: column;
    gap: var(--space-grid-gap);
}

@media (max-width: 767.98px) {
    .recommender[b-kh1zw9kvak] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.recommender__select[b-kh1zw9kvak] {
    width: 100%;
    min-height: var(--size-touch-target);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    font: var(--text-body);
    color: var(--color-text);
}

.recommender__price[b-kh1zw9kvak] {
    margin: var(--space-4) 0 0;
    font: var(--text-sm);
    color: var(--color-text);
}

.recommender__gate[b-kh1zw9kvak] {
    margin: var(--space-3) 0 0;
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font: var(--text-sm);
}

.recommender__note[b-kh1zw9kvak] {
    margin: var(--space-3) 0 0;
    font: var(--text-sm);
    color: var(--color-text-muted);
}
/* /Pages/Content/ContentRecommenderRunPage.razor.rz.scp.css */
.run[b-kmqvc25vyw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-grid-gap);
}

.run__facts[b-kmqvc25vyw] {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.run__facts dt[b-kmqvc25vyw] {
    margin: 0 0 var(--space-1);
    font: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.run__facts dd[b-kmqvc25vyw] {
    margin: 0;
    font: var(--text-body);
    color: var(--color-text);
}

.run__price[b-kmqvc25vyw] {
    margin: var(--space-4) 0 0;
    font: var(--text-sm);
    color: var(--color-text);
}

.run__working[b-kmqvc25vyw] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font: var(--text-body);
    color: var(--color-text);
}

/* A várakozás-jelző DEKORATÍV: a jelentést a mellette álló mondat viszi (`role="status"`). */
.run__spinner[b-kmqvc25vyw] {
    flex: 0 0 auto;
    width: var(--size-icon-md);
    height: var(--size-icon-md);
    border: 2px solid var(--color-border);
    border-top-color: var(--cat-brand-solid);
    border-radius: var(--radius-pill);
    animation: run-spin-b-kmqvc25vyw 900ms linear infinite;
}

/* ⚠️ A mozgásra érzékeny felhasználónál a pörgés áll — a jelzés a keret-szín marad. */
@media (prefers-reduced-motion: reduce) {
    .run__spinner[b-kmqvc25vyw] {
        animation: none;
    }
}

@keyframes run-spin-b-kmqvc25vyw {
    to {
        transform: rotate(360deg);
    }
}

.run__recommendations[b-kmqvc25vyw] {
    margin: 0;
    padding: 0;
    /* ⚠️ A sorszámot a kártya SAJÁT „rank" jelvénye viszi (a szerver helyezéséből), ezért a
       listajelölő el van kapcsolva: két, egymástól függetlenül számolt sorszám mellett egy
       kiszűrt vagy átrendezett sor csendben eltérő számokat adna. */
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

@media (max-width: 767.98px) {
    .run__facts[b-kmqvc25vyw] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Pages/Content/IdeaDetailPage.razor.rz.scp.css */
/* Ötlet részletoldal. Két oszlop asztali szélességen, egy oszlop mobilon — a képernyőterv
   harmadik oszlopa (AI személyre szabás) a Fázis 4-ben érkezik. */

.idea-detail[b-iclazt3n6j] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--space-grid-gap);
    align-items: start;
    margin-block-start: var(--space-5);
}

.idea-detail__column[b-iclazt3n6j] {
    display: flex;
    flex-direction: column;
    gap: var(--space-grid-gap);
    min-inline-size: 0;
}

.idea-detail__facts[b-iclazt3n6j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
}

.idea-detail__facts dt[b-iclazt3n6j] {
    font: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.idea-detail__facts dd[b-iclazt3n6j] {
    margin: 0;
    font: var(--text-body);
    color: var(--color-text);
}

.idea-detail__hint[b-iclazt3n6j] {
    display: block;
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.idea-detail__two[b-iclazt3n6j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
}

.idea-detail__subhead[b-iclazt3n6j] {
    margin: 0 0 var(--space-2);
    font: var(--text-h3);
}

.idea-detail__list[b-iclazt3n6j],
.idea-detail__check[b-iclazt3n6j],
.idea-detail__assets[b-iclazt3n6j] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font: var(--text-body);
}

.idea-detail__list li[b-iclazt3n6j] {
    padding-inline-start: var(--space-3);
    border-inline-start: 2px solid var(--color-border);
}

.idea-detail__check li[b-iclazt3n6j] {
    display: flex;
    gap: var(--space-2);
}

/* A pipa DEKORATÍV (aria-hidden) — a jelentést a mellette álló szöveg hordozza. */
.idea-detail__tick[b-iclazt3n6j] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    block-size: var(--size-icon-lg);
    color: var(--cat-success-text);
}

.idea-detail__assets li[b-iclazt3n6j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

@media (max-width: 1023.98px) {
    .idea-detail[b-iclazt3n6j] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Pages/Content/IdeaLibrary.razor.rz.scp.css */
/* Ötlettár — lista. A rács `auto-fill`-lel: a töréspontok helyett a kártya minimális szélessége
   dönt, tehát a bal menü drawerré válásakor sem kell külön szabály. */

.idea-library__count[b-4s96pbycb3] {
    margin: var(--space-4) 0 var(--space-3);
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.idea-library__grid[b-4s96pbycb3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-grid-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.idea-library__more[b-4s96pbycb3] {
    display: flex;
    justify-content: center;
    margin-block-start: var(--space-6);
}

.idea-library__end[b-4s96pbycb3] {
    margin-block-start: var(--space-5);
    font: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
}

.idea-library__empty[b-4s96pbycb3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    max-inline-size: 52ch;
    margin-block-start: var(--space-5);
    padding: var(--space-6);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

.idea-library__empty-title[b-4s96pbycb3] {
    margin: 0;
    font: var(--text-h2);
}

.idea-library__empty p[b-4s96pbycb3] {
    margin: 0;
    font: var(--text-body);
    color: var(--color-text-muted);
}
/* /Pages/Content/PlanScriptPage.razor.rz.scp.css */
/*
    A forgatási nézet KÉT STÍLUSLAPJA — egy fájlban, két médiumra.

    ⚠️⚠️ EZ A NÉZET MINDEN SZÍNÉNEK EGYETLEN HELYE. A `PlanScript.razor.css` és a
    `ScriptLayout.razor.css` szándékosan színtelen. Az ok a `DesignSurfaceContrastGate`
    saját bevallású rése: egy szövegszín olyan szabályban, ami maga nem deklarál hátteret, CSS-ből
    nem mérhető a hordozó felületéhez. Ennek a nézetnek KÉT hordozó felülete van — képernyőn a
    sötét `--color-sidebar`, papíron a FEHÉR `--color-surface` —, tehát itt a rés nem elméleti.
    Egy fájlba fogva a `PlanScriptContrastTests` mindkét médiumon végig tudja mérni: minden
    képernyő-`color:` vagy megfelel a PAPÍR hátterén is, vagy van rá `@media print` felülírás.

    ⚠️ Miért nem elég a képernyő-kontraszt. A `--color-text-inverse` (#FFFFFF) a sötét sávon
    18.88:1 — papíron 1.00. A `--color-text-muted-inverse` (#9A9A9A) a sötéten 6.71 — papíron
    2.81. Vagyis a HELYES telefonbarát nézet nyomtatva pontosan olvashatatlan; a nyomtatási ág nem
    finomítás, hanem a nézet fele.

    ⚠️ A SÖTÉT FELÜLET CSAK A SIKERES ÁGON. A `.script-pending` (nincs még kimenet) és az
    `AsyncView` betöltés/üres/hiba állapota a projekt VILÁGOS felületén marad, a szokásos
    komponensekkel — l. a `PlanScriptPage.razor` fejlécét.
*/

/* ── Képernyő: a forgatási felület ───────────────────────────────────────── */

.script-shell[b-yj7hy0sqji] {
    /*
        ⚠️ A GÖRGETŐ ITT VAN, nem a `PlanScript`-ben: a művelet-sávnak is bele kell esnie,
        különben a lap kétszer görögne. A `scroll-snap-align` a blokkokon a legközelebbi görgető
        ősre hat — az ez az elem.

        ⚠️ `proximity`, NEM `mandatory`. Kötelező illesztéssel a görgetés a felhasználó ellen
        dolgozik: forgatás közben egy hüvelykujj-mozdulat átugorna egy egész blokkot, és a
        visszatalálás újabb mozdulatot kér — pont amikor a kamera megy.
    */
    block-size: 100dvh;
    overflow-y: auto;
    scroll-snap-type: y proximity;

    /*
        ⚠️ A SÖTÉT HÁTTÉR NEM STÍLUS-ÍZLÉS: a `design-system.md` indoklása szerint „ring light
        előtt olvasható". A nézetet a felhasználó forgatás közben, erős szembe-világításban
        olvassa; világos háttéren a kijelző tükröz.
    */
    background-color: var(--color-sidebar);
    color: var(--color-text-inverse);
}

.script-shell__actions[b-yj7hy0sqji] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-block-end: 1px solid rgb(255 255 255 / .12);
}

/*
    ⚠️ A GLOBÁLIS LINKSZÍN FELÜLÍRÁSA KÖTELEZŐ, NEM DÍSZÍTÉS. Az `app.css` minden `<a>`-nak
    `--color-primary-text`-et (#B01268) ad; az a sötét sávon 2.82:1 — bukik. Ez a sor tehát nem
    esztétikai döntés: nélküle a nézet EGYETLEN kiútja olvashatatlan.
*/
.script-shell__back[b-yj7hy0sqji] {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--size-touch-target);
    color: var(--color-text-inverse);
    font: var(--text-body);
    text-decoration: underline;
}

.script-shell__print[b-yj7hy0sqji] {
    min-block-size: var(--size-touch-target);
    padding-inline: var(--space-4);
    border: 1px solid rgb(255 255 255 / .40);
    border-radius: var(--radius-control);
    background-color: transparent;
    color: var(--color-text-inverse);
    font: var(--text-body);
    cursor: pointer;
}

/*
    A `PlanScript` belső elemei — `::deep`, mert gyerek-komponens rendereli őket. Csak azok
    kapnak színt, amik a törzsszövegtől ELTÉRNEK; a többi örököl.
*/
.script-shell[b-yj7hy0sqji]  .script__meta,
.script-shell[b-yj7hy0sqji]  .script__ordinal,
.script-shell[b-yj7hy0sqji]  .script__position,
.script-shell[b-yj7hy0sqji]  .script__tail-title {
    /* A sötéten 6.71:1 — a #666666 ott 3.29 lenne, tehát a NEM-inverz halvány token bukna. */
    color: var(--color-text-muted-inverse);
}

.script-shell[b-yj7hy0sqji]  .script__missing {
    /*
        ⚠️ A hiányzó szöveg NEM halvány. Ez az egyetlen sor, amit a felhasználónak a felvétel
        közben ténylegesen meg kell látnia — halványítva pont azt tanítanánk neki, hogy át lehet
        lapozni.
    */
    color: var(--color-text-inverse);
    font-style: italic;
}

.script-shell[b-yj7hy0sqji]  .script__tail {
    border-block-start: 1px solid rgb(255 255 255 / .12);
}

/* ── A „még nincs kimenet" ág — VILÁGOS felület, szokásos tokenek ─────────── */

.script-pending[b-yj7hy0sqji] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    inline-size: min(100%, 36rem);
    margin: var(--space-7) auto;
    padding-inline: var(--space-5);
}

.script-pending__title[b-yj7hy0sqji] {
    color: var(--color-text);
    font: var(--text-h1);
}

.script-pending__actions[b-yj7hy0sqji] {
    margin: 0;
}

/*
    ── Nyomtatás: ugyanaz az adat, PAPÍRON ─────────────────────────────────────

    ⚠️⚠️ MINDEN `-inverse` SZÍNT VISSZA KELL FORDÍTANI. A böngésző a háttérszíneket nyomtatáskor
    alapból elhagyja, a SZÖVEGSZÍNEKET viszont NEM: felülírás nélkül a fehér felirat fehér papírra
    kerülne, és a felhasználó egy üres lapot húzna ki a nyomtatóból. A design-system nyomtatási
    táblája ezt a sort így írja: „`color-scheme` felülírva világosra, a szövegszín #111111 — a
    sötét »Telefonbarát nézet« nyomtatva olvashatatlan és tonerpazarló".
*/
@media print {
    .script-shell[b-yj7hy0sqji] {
        /* A görgető feloldása: enélkül a böngésző EGYETLEN kijelzőnyi részt tenne papírra. */
        block-size: auto;
        overflow: visible;
        scroll-snap-type: none;

        background-color: var(--color-surface);
        color: var(--color-text);
    }

    /*
        Sem a kiút, sem a nyomtatás-gomb nem hordoz információt papíron.

        ⚠️ A KÉT GYEREK-VÁLASZTÓ KÜLÖN IS FEL VAN SOROLVA, pedig a szülő elrejtése elég lenne. Ez
        a `PlanScriptContrastTests` mechanikus követelménye, és szándékos: a kapu minden képernyőn
        használt szövegszínt megkeres, és a PAPÍR hátterén is megmér. Ami ott bukik, annak vagy
        nyomtatási szín-felülírása kell, vagy saját `display: none`-ja — az „a szülőm rejtve van"
        érvet CSS-ből nem lehet megbízhatóan levezetni, és pont az ilyen heurisztikák teszik
        vakká a kaput. A redundancia itt tehát a mérhetőség ára.
    */
    .script-shell__actions[b-yj7hy0sqji],
    .script-shell__back[b-yj7hy0sqji],
    .script-shell__print[b-yj7hy0sqji] {
        display: none;
    }

    .script-shell[b-yj7hy0sqji]  .script__meta,
    .script-shell[b-yj7hy0sqji]  .script__ordinal,
    .script-shell[b-yj7hy0sqji]  .script__position,
    .script-shell[b-yj7hy0sqji]  .script__tail-title {
        /* Fehéren 5.74:1 — a #9A9A9A itt 2.81 lenne. */
        color: var(--color-text-muted);
    }

    .script-shell[b-yj7hy0sqji]  .script__missing {
        color: var(--color-text);
    }

    .script-shell[b-yj7hy0sqji]  .script__tail {
        border-block-start: 1px solid var(--color-border);
    }
}
/* /Pages/Content/RecommendationHistoryPage.razor.rz.scp.css */
/* Előzmények — lista.

   ⚠️ NINCS szűrő-sáv és nincs kereső-mező, tehát nincs is stílusuk: amit a forrás nem dönt el, azt
   a felület nem találja ki. A lap három rétegből áll — darabszám, sorok, lapozó. */

.history__count[b-7zrmw37mm2] {
    margin: 0 0 var(--space-4);
    font: var(--text-sm);
    color: var(--color-text-muted);
}

.history__rows[b-7zrmw37mm2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.history__more[b-7zrmw37mm2] {
    display: flex;
    justify-content: center;
    margin-block-start: var(--space-5);
}

.history__end[b-7zrmw37mm2] {
    margin-block-start: var(--space-5);
    font: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
}

.history__empty[b-7zrmw37mm2] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    max-inline-size: 46rem;
    padding: var(--space-card);
    background-color: var(--color-surface-muted);
    border-radius: var(--radius-card);
}

.history__empty-title[b-7zrmw37mm2] {
    margin: 0;
    font: var(--text-h2);
}

.history__empty p[b-7zrmw37mm2] {
    margin: 0;
    font: var(--text-body);
    color: var(--color-text-muted);
}
/* /Pages/Help/HelpAndSupport.razor.rz.scp.css */
.help__topics[b-foe88xsar3] {
    display: flex;
    flex-direction: column;
}

.help__note[b-foe88xsar3] {
    margin: var(--space-4) 0 0;
    max-inline-size: 68ch;
    color: var(--color-text-muted);
    font: var(--text-sm);
}

.help__gaps[b-foe88xsar3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    max-inline-size: 68ch;
}

.help__gap[b-foe88xsar3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.help__gap dt[b-foe88xsar3] {
    font: var(--text-h3);
}

.help__gap dd[b-foe88xsar3] {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--text-body);
}
/* /Pages/Home.razor.rz.scp.css */
/* Irányítópult.

   ⚠️ A két kártya `auto-fit`-tel áll egymás mellé, nem fix két hasábbal: a „mai feladat" kör +
   szöveg együtt ~360 px alatt olvashatatlan, tehát a törés a TARTALOMTÓL függ, nem egy
   találomra választott töréspontól. */

.dashboard[b-yaw5bmr2aj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--space-grid-gap);
    margin-block: var(--space-5);
}

.dashboard__first-task[b-yaw5bmr2aj] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

.dashboard__first-task-title[b-yaw5bmr2aj] {
    margin: 0;
    font: var(--text-h3);
}

.dashboard__first-task-lead[b-yaw5bmr2aj] {
    margin: 0;
    max-inline-size: 60ch;
    font: var(--text-body);
    color: var(--color-text-muted);
}

/* ── A köszöntés ─────────────────────────────────────────────────────────────

   ⚠️ A H1 FÖLÖTT áll, és nem HELYETTE. A terv a köszöntést teszi a lap címévé; egy „Szia!"
   feliratú H1 viszont sem a fókusz-átadásnak (App.razor FocusOnNavigate), sem a
   képernyőolvasós lapváltásnak nem mondaná meg, hova érkezett a felhasználó. A modul neve
   marad a cím, a köszöntés fölé kerül szemöldök-sorként — a terv függőleges sorrendje
   (köszöntés, majd mottó-sáv) így is teljesül. */

.dashboard__greeting[b-yaw5bmr2aj] {
    margin: 0 0 var(--space-2);
    font: var(--text-sm);
    color: var(--color-text-muted);
}

/* ── A mottó-sáv ─────────────────────────────────────────────────────────────

   A terv pink kiemelt sávja. A felület halvány pink, a felirat sötét — a #FF3EAA csak az
   ikonban és a kör kitöltésében él, tehát feliratot nem hordoz. */

.dashboard__mission[b-yaw5bmr2aj] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-block: var(--space-5);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-primary-subtle);
    border-radius: var(--radius-card);
    background-color: var(--color-primary-subtle);
    color: var(--color-text);
}

.dashboard__mission-mark[b-yaw5bmr2aj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: 50%;
    background-color: var(--color-surface);
    color: var(--color-primary-text);
}

/* ⚠️ AZ IKON VONALA A DEKORATÍV PINK — ÉS EZ AZ EGYETLEN SZABÁLYOS ALAKJA.

   A `DesignSurfaceContrastGate` 1. szabálya MINDEN előtér-szín deklarációt szövegszínként mér, és
   forrásból nem tudja megkülönböztetni a feliratot az ikontól: a dekoratív pinket előtérnek kérő
   deklaráció ezért 3,22 / 2,95-tel piros lenne — jogosan, mert ugyanaz a deklaráció egy felirat
   alatt is megállna. A vektor-alak VONALA viszont `stroke:`, amit egyik kapu sem mér, mert az nem
   szöveg. Ugyanez a minta rajzolja az `app.css`-ben a WASM betöltés-jelzőjét.

   ⚠️ A tiltott alak SZÓ SZERINT sem idézhető ide: a `DesignTokenTests` ikertesztje a nyers
   CSS-szövegen fut, megjegyzés-eltávolítás NÉLKÜL — egy magyarázó idézet ott valódi sértésnek
   látszana. Mérve: pontosan ez bukott el, mielőtt ez a bekezdés így lett megfogalmazva.

   ⚠️ A `::deep` NEM elhagyható: a Blazor scoped CSS a lap SAJÁT jelöléséhez tapad, az `<svg>`-t
   viszont az `Icon` GYEREKKOMPONENS rendereli — nélküle ez a szabály sosem illeszkedne.

   ⚠️ A fenti örökített előtér így nem felesleges: ha a scope-attribútum egyszer elmarad, az ikon a
   #B01268-at ÖRÖKLI (`stroke="currentColor"`), nem egy olvashatatlan alapértelmezést. */
.dashboard__mission-mark[b-yaw5bmr2aj]  .icon {
    stroke: var(--color-primary);
}

.dashboard__mission-text[b-yaw5bmr2aj] {
    margin: 0;
    font: var(--text-body);
}

/* A kiemelt tagmondat. Külön szabály, saját háttér NÉLKÜL: a kapu 1. szabálya így a világos
   alapfelülethez méri, és a #B01268 ott 6,7 / 6,1 — megfelel. */
.dashboard__mission-accent[b-yaw5bmr2aj] {
    color: var(--color-primary-text);
}

/* ⚠️ Mobilon a kör a szöveg FÖLÉ kerül: 3 rem ikon + 16 px térköz mellett a mondatnak 320 px-es
   képernyőn ~200 px maradna, és a mottó négy sorra törne. */
@media (max-width: 560px) {
    .dashboard__mission[b-yaw5bmr2aj] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
}
/* /Pages/Login.razor.rz.scp.css */
.login__title[b-g1cardq1r0] {
    margin: 0;
    font: var(--text-h1);
}

.login[b-g1cardq1r0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.login__field[b-g1cardq1r0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.login__field label[b-g1cardq1r0] {
    font: var(--text-h3);
}

.login__field input[b-g1cardq1r0] {
    min-block-size: var(--size-touch-target);
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    font: var(--text-body);
}

.login__secondary[b-g1cardq1r0] {
    margin: 0;
    font: var(--text-sm);
    text-align: center;
}

/* A fókusz lépésváltáskor a címsorra kerül — a gyűrűnek látszania kell (a globális szabályból). */
.login__title:focus-visible[b-g1cardq1r0] {
    border-radius: var(--radius-control);
}

.login__lead[b-g1cardq1r0] {
    margin: 0;
    font: var(--text-body);
    color: var(--color-text-muted);
}

/*
    Szöveges gomb: nem navigál (módot vált, vagy visszalép), ezért <button>, de a képernyő
    másodlagos útjaiként linknek néz ki — egy képernyőn egy elsődleges akció van.
    A szín a --color-primary-text (fehéren ≥ 4.5:1), NEM a dekoratív pink.
*/
.login__link-button[b-g1cardq1r0] {
    min-block-size: var(--size-touch-target);
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary-text);
    font: var(--text-sm);
    text-decoration: underline;
    cursor: pointer;
}
/* /Pages/NotFound.razor.rz.scp.css */
.status-page[b-5hyo3bdnq2] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    max-inline-size: 60ch;
}

.status-page__text[b-5hyo3bdnq2] {
    margin: 0;
    color: var(--color-text-muted);
}
/* /Pages/QuickSetup.razor.rz.scp.css */
.quick-setup__next[b-3z2fyj32w8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding-inline-start: 0;
    list-style: none;
}

.quick-setup__next li[b-3z2fyj32w8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}