/* Golden Gates Tudás Teszt — a kalkulátor design-tokenjeire épülő kiegészítés.
   A style.css :root változóit használja (navy, gold, radius, shadow), így a két
   oldal egy rendszerben marad. Itt csak a tesztre jellemző elemek vannak. */

/* --- Bal panel: haladás --- */

.progress-block {
    margin-top: 18px;
}

.progress-bar {
    height: 8px;
    background: #e6e8ee;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-gold-light), var(--color-gold));
    width: 0;
    transition: width 0.35s ease;
}

.progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 6px;
}

.score-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}

.score-box {
    background: #fff;
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-sm);
    padding: 10px 8px;
    text-align: center;
}

.score-box .score-num {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
}

.score-box .score-lbl {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}

.score-ok .score-num { color: var(--color-positive); }
.score-bad .score-num { color: var(--color-negative); }

/* --- Modul-lista a bal panelen --- */

.module-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.module-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--color-card-border);
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    color: var(--color-text);
    transition: border-color 0.15s, background 0.15s;
}

.module-item:hover { border-color: var(--color-gold); }

/* Vizsga alatt a modulválasztás zárolva — a teljes anyagot kell végigcsinálni. */
.module-item[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    background: #f4f5f8;
}

.module-item[disabled]:hover { border-color: var(--color-card-border); }

.exam-lock-note {
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--color-navy);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 0.78rem;
    line-height: 1.4;
    margin-top: 8px;
}

body.exam-locked .exam-lock-note { display: flex; }

#btnWrongOnly[disabled] { opacity: 0.4; cursor: not-allowed; }

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

.module-count {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-muted);
    background: #f1f2f6;
    border-radius: 999px;
    padding: 2px 8px;
}

.module-item.is-active .module-count {
    background: rgba(32, 26, 5, 0.15);
    color: #201a05;
}

/* --- Kérdés --- */

.q-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.q-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef1f7;
    color: #4a5570;
}

.q-badge-gold { background: rgba(201, 162, 39, 0.16); color: #7a6110; }
.q-badge-navy { background: var(--color-navy); color: #fff; }

.q-text {
    margin: 0 0 6px;
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.35;
}

.q-hint {
    margin: 0 0 18px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.q-flag {
    background: #fff8e6;
    border: 1px solid #f0dfae;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 0.82rem;
    color: #6d5a12;
    margin: 0 0 16px;
}

/* --- Válaszlehetőségek --- */

.opt-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.opt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--color-card-border);
    background: #fff;
    border-radius: var(--radius-md);
    padding: 14px 16px;
    cursor: pointer;
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--color-text);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    width: 100%;
    font-family: inherit;
}

.opt:hover:not(.is-locked) {
    border-color: var(--color-gold);
    background: #fffdf6;
}

.opt-key {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--color-card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-muted);
    background: #fff;
}

.opt-multi .opt-key { border-radius: 6px; }

.opt.is-picked {
    border-color: var(--color-navy);
    background: #f6f8fd;
}

.opt.is-picked .opt-key {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: #fff;
}

/* kiértékelés utáni állapotok */

.opt.is-locked { cursor: default; }

.opt.is-correct {
    border-color: #7fc79b;
    background: #f0faf3;
}

.opt.is-correct .opt-key {
    background: var(--color-positive);
    border-color: var(--color-positive);
    color: #fff;
}

.opt.is-wrong {
    border-color: #e9a9a3;
    background: #fdf3f2;
}

.opt.is-wrong .opt-key {
    background: var(--color-negative);
    border-color: var(--color-negative);
    color: #fff;
}

.opt.is-missed {
    border-color: #7fc79b;
    border-style: dashed;
    background: #f7fcf9;
}

.opt-body { flex: 1; min-width: 0; }

.opt-why {
    display: none;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0, 0, 0, 0.12);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.opt.is-locked .opt-why:not(:empty) { display: block; }

.opt-verdict {
    display: none;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 6px;
}

.opt.is-locked .opt-verdict { display: block; }
.opt.is-correct .opt-verdict { color: var(--color-positive); }
.opt.is-wrong .opt-verdict { color: var(--color-negative); }
.opt.is-missed .opt-verdict { color: #3f8c5f; }

/* --- Visszajelzés / magyarázat --- */

.feedback {
    margin-top: 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-card-border);
    overflow: hidden;
}

.feedback-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    font-weight: 700;
    font-size: 1rem;
}

.feedback-ok .feedback-head { background: #e9f7ee; color: var(--color-positive); }
.feedback-bad .feedback-head { background: #fdecea; color: var(--color-negative); }

.feedback-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85rem;
    flex: 0 0 24px;
}

.feedback-ok .feedback-icon { background: var(--color-positive); }
.feedback-bad .feedback-icon { background: var(--color-negative); }

.feedback-body {
    padding: 16px 18px 18px;
    background: #fff;
}

.explain-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    font-weight: 700;
    margin: 0 0 6px;
}

.explain-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.manko {
    margin-top: 16px;
    background: linear-gradient(135deg, rgba(224, 189, 79, 0.16), rgba(201, 162, 39, 0.1));
    border: 1px solid rgba(201, 162, 39, 0.35);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}

.manko .explain-title { color: #7a6110; }

.manko-text {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.5;
}

.source-line {
    margin: 14px 0 0;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    border-top: 1px dashed var(--color-card-border);
    padding-top: 10px;
}

/* --- Navigáció --- */

.q-nav {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.btn-ghost {
    background: #fff;
    border: 1px solid var(--color-card-border);
    color: var(--color-text-muted);
}

.btn-ghost:hover { border-color: var(--color-gold); color: var(--color-text); }

.btn-sm { padding: 10px 16px; font-size: 0.88rem; }

/* Halvány, nem kattintható gomb — pl. amíg nincs kiválasztva válasz. */
.btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    filter: none;
}

.btn[disabled]:hover { filter: none; }

.nav-lock-note {
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-align: right;
}

/* Az egyirányú vizsgán a "← Előző" gomb helyén álló zárolás-jelzés. */
.nav-locked {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    line-height: 1.3;
}

/* Figyelmeztetés arról, hogy a válasz a továbblépéssel véglegesedik. */
.nav-final-note {
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-align: right;
}

.q-nav .spacer { flex: 1; }

.kbd-hint {
    margin-top: 14px;
    font-size: 0.76rem;
    color: var(--color-text-muted);
}

.kbd {
    display: inline-block;
    border: 1px solid var(--color-card-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.72rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #fff;
}

/* --- Kérdés-térkép (pöttyök) --- */

.qmap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 10px;
}

/* A kör mérete rem-ben van, hogy együtt nőjön a betűvel: különben nagyobb
   alapméretnél a kétjegyű szám kifeszítené a fix méretű kört. 1.625rem a
   korábbi 26px megfelelője a 16px-es alapon. */
.qmap-dot {
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    border: 1px solid var(--color-card-border);
    background: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}

/* Érintőképernyőn (telefon, tablet) nagyobb pontok: 26px-et ujjal könnyű
   mellétalálni, főleg mert szorosan egymás mellett vannak. A 44px az Apple
   és a Google által is ajánlott legkisebb érintőfelület. Egérrel marad a
   kisebb méret — ott pontos a mutató, és 36 nagy pont sok helyet vinne el.
   A (pointer: coarse) épp azt kérdezi, hogy ujjal vagy egérrel kezelik-e. */
@media (pointer: coarse) {
    .qmap { gap: 8px; }
    .qmap-dot {
        width: 44px;
        height: 44px;
        font-size: 0.85rem;
    }
    /* A modulgombok teljes szélességűek, de a magasságuk is érje el a 44-et. */
    .module-item { min-height: 44px; }

    /* A kis gombok (Előző / Ellenőrzés / Csak a hibás kérdések) 38px-esek
       voltak — épp ezeket nyomkodja legtöbbet a vizsgázó. */
    .btn-sm { min-height: 44px; }
}

.qmap-dot:hover { border-color: var(--color-gold); }
.qmap-dot[disabled] { opacity: 0.4; cursor: not-allowed; }
.qmap-dot[disabled]:hover { border-color: var(--color-card-border); }
.qmap-dot.is-current { outline: 2px solid var(--color-navy); outline-offset: 1px; }
.qmap-dot.is-ok { background: var(--color-positive); border-color: var(--color-positive); color: #fff; }
.qmap-dot.is-bad { background: var(--color-negative); border-color: var(--color-negative); color: #fff; }

/* Vizsga mód: a megválaszolt kérdés jelölt, de semleges — nem árulja el,
   hogy jó volt-e a válasz. Csak a lezárás után vált zöldre/pirosra. */
.qmap-dot.is-picked { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }

/* --- Eredmény képernyő --- */

.result-hero {
    text-align: center;
    padding: 10px 0 6px;
}

.result-ring {
    width: 150px;
    height: 150px;
    margin: 0 auto 16px;
    display: block;
}

.result-ring-bg { fill: none; stroke: #e6e8ee; stroke-width: 12; }
.result-ring-fg {
    fill: none;
    stroke: var(--color-gold);
    stroke-width: 12;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 0.8s ease;
}
.result-ring-fg.is-pass { stroke: var(--color-positive); }

.result-pct {
    font-size: 2rem;
    font-weight: 700;
    fill: var(--color-text);
}

.result-title { margin: 0 0 6px; font-size: 1.4rem; }
.result-sub { margin: 0 0 20px; color: var(--color-text-muted); }

.review-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

.review-item {
    border: 1px solid var(--color-card-border);
    border-left: 3px solid var(--color-negative);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
}

.review-item:hover { border-color: var(--color-gold); border-left-color: var(--color-negative); }
.review-item.ok { border-left-color: var(--color-positive); }

.review-q { font-size: 0.92rem; font-weight: 600; margin: 0 0 4px; }
.review-meta { font-size: 0.76rem; color: var(--color-text-muted); margin: 0; }

/* --- Mód-magyarázat --- */

.mode-note {
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

@media (max-width: 640px) {
    .q-text { font-size: 1.12rem; }
    .score-strip { grid-template-columns: repeat(3, 1fr); }

    /* Telefonon a kérdés kerül felülre — a beállításokon nem kell minden
       kérdésnél végiggörgetni, hogy a következő kérdéshez érj. */
    .layout { display: flex; flex-direction: column; }
    .layout .results-panel { order: 1; }
    .layout .form-panel { order: 2; }

    .q-nav .btn { flex: 1; }
    .kbd-hint { display: none; }
}


/* ============================================================
   EREDMÉNYSÁV — zöld / sárga / piros visszajelzés a teszt végén
   ============================================================ */

.verdict-band {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 22px;
    border: 1px solid transparent;
}

.verdict-band.is-pass { background: #e8f5ee; border-color: #b7e0c8; color: #0f6b39; }
.verdict-band.is-near { background: #fdf4e3; border-color: #f0dcae; color: #8a6414; }
.verdict-band.is-fail { background: #fdecea; border-color: #f3c8c4; color: #97231c; }

.verdict-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.verdict-band.is-pass .verdict-icon { background: var(--color-positive); }
.verdict-band.is-near .verdict-icon { background: #c98a1b; }
.verdict-band.is-fail .verdict-icon { background: var(--color-negative); }

.verdict-text {
    font-weight: 700;
    letter-spacing: 0.06em;
    font-size: 0.95rem;
}

.verdict-pct {
    margin-left: auto;
    font-size: 1.35rem;
    font-weight: 700;
}

/* ============================================================
   LETÖLTÉS KÁRTYA — csak sikeres vizsga után
   ============================================================ */

.download-card {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid #b7e0c8;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #f2faf5 0%, #ffffff 100%);
}

.download-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.download-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-positive);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.download-title {
    margin: 0 0 2px;
    font-weight: 700;
    font-size: 0.98rem;
}

.download-sub {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* ============================================================
   LETÖLTHETŐ EREDMÉNYLAP — képernyőn rejtve, nyomtatáskor látszik
   ============================================================ */

.cert-sheet { display: none; }

@media print {

    /* Nyomtatáskor csak az eredménylap látszik. */
    body.printing > *:not(.cert-sheet) { display: none !important; }

    body.printing {
        background: #fff;
        margin: 0;
    }

    body.printing .cert-sheet {
        display: block;
        padding: 0;
        color: var(--color-text);
    }

    @page {
        size: A4 portrait;
        margin: 14mm 14mm 12mm;
    }

    /* A színes elemek nyomtatásban is megtartják a színüket. */
    .cert-sheet, .cert-sheet * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cert-mod { break-inside: avoid; page-break-inside: avoid; }
}

/* Az eredménylap kinézete (a @media print blokkon kívül, hogy
   fejlesztés közben képernyőn is meg lehessen nézni). */

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

.cert-brand {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-navy);
    letter-spacing: -0.01em;
}

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

.cert-kicker {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    font-weight: 600;
}

/* --- fejléc a nagy eredménnyel --- */

.cert-hero {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 16px 0 20px;
    padding: 18px 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, #101c3d 0%, #1c2f5e 100%);
    color: #fff;
}

.cert-seal {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--color-positive);
    border: 3px solid rgba(255, 255, 255, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cert-seal-check {
    color: #fff;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
}

.cert-hero-text { flex: 1; }

.cert-verdict {
    margin: 0 0 2px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-gold-light);
}

.cert-score {
    margin: 0;
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.cert-score span {
    font-size: 1.3rem;
    margin-left: 2px;
    opacity: 0.75;
}

.cert-detail {
    margin: 6px 0 0;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.75);
}

.cert-date {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
}

.cert-date-lbl {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(255, 255, 255, 0.6);
}

.cert-date-val {
    font-size: 0.95rem;
    font-weight: 600;
}

/* --- modulonkénti bontás --- */

.cert-section {
    margin: 0 0 10px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}

.cert-mod {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-card-border);
}

.cert-mod:last-child { border-bottom: none; }

.cert-mod-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 7px;
}

.cert-mod-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-navy);
}

.cert-mod-pct {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.cert-mod-pct.is-good { color: var(--color-positive); }

.cert-mod-bar {
    height: 5px;
    border-radius: 3px;
    background: #eceef3;
    overflow: hidden;
    margin-bottom: 7px;
}

.cert-mod-bar span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--color-gold);
}

.cert-mod-bar span.is-good { background: var(--color-positive); }

/* --- kérdésjelölők --- */

/* A pöttyök és a találati arány egy sorban, a szám jobbra igazítva —
   ez váltja ki a korábbi külön sort, helyet spórolva a nyomtatott lapon. */
.cert-dots-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cert-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.cert-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.66rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.cert-dot.is-ok  { background: var(--color-positive); }
.cert-dot.is-bad { background: var(--color-negative); }

.cert-mod-count {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.76rem;
    color: var(--color-text-muted);
}

/* --- jelmagyarázat és lábléc --- */

.cert-legend {
    display: flex;
    gap: 20px;
    margin-top: 13px;
    padding-top: 10px;
    border-top: 1px solid var(--color-card-border);
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.cert-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cert-legend i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.cert-foot {
    margin: 10px 0 0;
    font-size: 0.7rem;
    line-height: 1.5;
    color: #9aa1ad;
}

.download-hint {
    margin-top: 22px;
    padding: 13px 16px;
    border: 1px dashed var(--color-card-border);
    border-radius: var(--radius-md);
    background: #fafbfc;
    font-size: 0.84rem;
    color: var(--color-text-muted);
}

/* Kérdéssorrend zárolása: az első vizsga-válasz után a sorrend nem módosítható. */
.toggle-option:has(input:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
}

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

.order-lock-note {
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--color-navy);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 0.78rem;
    line-height: 1.4;
    margin-top: 8px;
}

/* ============================================================
   ÁTNÉZÉS UTÁNI JAVÍTÁSOK
   ============================================================ */

/* Megszakadt vizsga magyarázó sávja (újratöltés / lapbezárás után). */
.abort-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fdf4e3;
    border: 1px solid #f0dcae;
    color: #8a6414;
    border-radius: var(--radius-md);
    padding: 13px 14px;
    font-size: 0.86rem;
    line-height: 1.45;
    margin-bottom: 18px;
}

.abort-icon { font-size: 1rem; line-height: 1.3; flex-shrink: 0; }

.abort-close {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    opacity: 0.6;
    flex-shrink: 0;
}

.abort-close:hover { opacity: 1; }

/* Gyakorló kör (nem teljes vizsga): semleges, nem ígér vizsgaeredményt. */
.verdict-band.is-practice {
    background: #f1f3f7;
    border-color: var(--color-card-border);
    color: #414d68;
}

.verdict-band.is-practice .verdict-icon { background: #7b869e; }

/* Hogyan mentsd PDF-be — a letöltés gomb alatt. */
.download-howto {
    margin: 12px 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* Billentyűzetes fókusz: a rejtett rádiógomb fókuszát a kapcsolón mutatjuk meg,
   különben Tab-bal navigálva nem látszik, hol állsz. */
.toggle-option:has(input:focus-visible) {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

.module-item:focus-visible,
.opt:focus-visible,
.qmap-dot:focus-visible,
.btn:focus-visible,
.review-item:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    /* A három rövid szám elfér egy sorban — így nem kell háromszor görgetni. */
    .stat-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .stat-card { padding: 12px 8px; text-align: center; }
    .stat-card .stat-label { font-size: 0.66rem; }
    .stat-card .stat-value { font-size: 1.15rem; }
}