/*
 * eTesty  etest.css  —  ETest stránka
 * Patří do projektu Shared.ETest.
 * Non-ETest styly (Login/Intro/Sema/Result) jsou v Shared/wwwroot/etest.css.
 */

:root {
    /* eTesty sémantické aliasy — mapovány přesně na Figma paletu */
    --et-bg:            var(--color-neutral-50);
    --et-surface:       var(--color-neutral-0);
    --et-border:        var(--color-neutral-100);
    --et-border-mid:    var(--color-neutral-200);
    --et-text:          var(--color-neutral-950);
    --et-text-medium:   var(--color-neutral-900);
    --et-text-sub:      var(--color-neutral-700);
    --et-muted:         var(--color-neutral-500);
    --et-disabled:      var(--color-neutral-300);
    --et-accent:        var(--color-primary-700);
    --et-accent-h:      var(--color-primary-800);
    --et-accent-d:      var(--color-primary-800);
    --et-accent-bg:     var(--color-primary-100);
    --et-accent-subtle: var(--color-primary-50);
    --et-secondary:     var(--color-secondary-600);
    --et-secondary-bg:  var(--color-secondary-50);
    --et-error:         var(--color-error-600);
    --et-error-bg:      var(--color-error-50);
    --et-success:       var(--color-success-600);
    --et-media-bg:      var(--color-neutral-1000);
    --et-sidebar:       368px;
    --et-focus:         var(--status-focus);
}

/* ============ LOADER — sjednocený vzhled (WASM boot i „Načítám test“) ============ */
/* Karta je bez závislosti na Blazoru / gov web komponentách (JS ještě nemusí běžet),
   proto jde o čisté HTML + CSS — používá se jak v index.html, tak v ETestPage.razor. */
.et-loading-shell {
    font-family: var(--font-family, Roboto, sans-serif);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--et-bg);
}

.et-loading-card {
    background: var(--et-surface);
    border-radius: var(--corner-radius-s, 8px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
    padding: 32px 40px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.et-loading-card__title {
    color: var(--color-primary-700);
    font-size: var(--font-size-heading-s, 1.25rem);
    font-weight: 500;
    margin: 0;
}

.et-loading-card__text {
    color: var(--et-text-sub);
    font-size: 14px;
    text-align: center;
    margin: 0;
}

/* Kruhový ukazatel — stejná rodina jako WASM boot loader v index.html.
   Deterministický: --et-progress (0-100) je nastaveno inline stylem podle skutečných dat.
   Indeterminate (bez reálných dat o průběhu): třída --spin otáčí celým SVG dokola. */
.et-loading-spinner {
    width: 6rem;
    height: 6rem;
    --et-progress: 0;
}

    .et-loading-spinner circle {
        fill: none;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
    }

    .et-loading-spinner circle:first-child {
        stroke: var(--et-border-mid);
    }

    .et-loading-spinner circle:last-child {
        stroke: var(--et-accent);
        transform: rotate(-90deg);
        stroke-dasharray: calc(3.141 * var(--et-progress, 0) * 0.8), 500%;
        transition: stroke-dasharray 0.2s ease-in-out;
    }

.et-loading-spinner--spin {
    animation: et-loading-spin 1s linear infinite;
}

    .et-loading-spinner--spin circle:last-child {
        stroke-dasharray: 70, 500%;
        transition: none;
    }

@keyframes et-loading-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/*  Shell  */
.etest-shell {
    font-family: var(--font-family, Roboto, sans-serif);
    background: var(--et-bg);
    color: var(--et-text);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: var(--font-size-body-s);
}

.etest-main {
    display: flex;
    flex: 1;
    overflow: hidden;
}


/*  Question strip  */
.q-strip-wrap {
    background: var(--et-bg);
    padding: var(--spacing-s-nudge) var(--spacing-xl);
    padding-top: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: 14px;
}

.q-strip {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
    flex: 1;
    /* Pojistka, aby se flex položka na úzkém viewportu smrštila a přetečení řešil scroll
       uvnitř lišty, ne ořez v .etest-shell { overflow: hidden }. Samotné overflow-x: auto
       níž nastavuje automatické minimum na nulu už samo (CSS Flexbox §4.5), takže je to
       explicitní záloha, ne oprava. */
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    /* Horizontální gesto zůstane na liště, neuteče do historie prohlížeče ani na stránku. */
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--et-border-mid) transparent;
    padding-top: 10px;
}

    /* Krátká lenta (cvičný test) na střed. Auto margins se při přetečení složí na 0,
       takže levý okraj zůstane dosažitelný scrollem. */
    .q-strip > :first-child {
        margin-left: auto;
    }

    .q-strip > :last-child {
        margin-right: auto;
    }

    .q-strip::-webkit-scrollbar {
        height: 3px;
    }

    .q-strip::-webkit-scrollbar-thumb {
        background: var(--et-border-mid);
        border-radius: var(--corner-radius-2xs);
    }

/*  Badge prostředí a verze — vpravo ve strip liště, mimo produkci  */
.etest-env-badge {
    flex-shrink: 0;
    align-self: center;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.q-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    background: var(--et-surface);
    border-radius: 8px;
    padding: 6px;
    flex-shrink: 0;
}

.q-btn-wrap {
    position: relative;
    flex-shrink: 0;
}

.q-btn-wrap.is-current::before {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid var(--color-primary-700);
    pointer-events: none;
}

.q-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    border: none;
    background: var(--et-surface);
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
    color: var(--et-muted);
    position: relative;
}

    .q-btn:hover:not(.current):not(.flagged) {
        background: var(--color-primary-50);
        color: var(--color-primary-700);
    }

    .q-btn.answered {
        background: var(--color-primary-100);
        color: var(--color-primary-700);
    }

    .q-btn.current {
        background: var(--color-primary-700);
        color: #fff;
        box-shadow: none;
    }

    .q-btn.current.answered,
    .q-btn.current.flagged {
        background: var(--color-primary-700);
        color: #fff;
    }

    .q-btn.flagged {
        background: #fab413;
        color: #000;
    }

    .q-btn.flagged::after {
        display: none;
    }

/*  Sidebar — bílý panel, border-right, šířka 368px dle Figma  */
.etest-sidebar {
    width: var(--et-sidebar);
    background: var(--et-bg);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    gap: 8px;
    padding: 12px;
}

.flag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 40px;
    padding: 0 12px;
    font-size: var(--font-size-body-m, 16px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.2px;
    color: var(--et-text);
    background: var(--et-surface);
    border: 1px solid var(--et-border-mid);
    border-radius: var(--corner-radius-s, 8px);
    cursor: pointer;
    font-family: inherit;
    transition: background .14s, border-color .14s, color .14s;
    white-space: nowrap;
    flex-shrink: 0;
}

.flag-btn-icon {
    width: 16px;
    height: 16px;
    color: currentColor;
}

.flag-btn:hover:not(.active) {
    border-color: var(--et-border-mid);
    background: var(--et-bg);
}

.flag-btn.active {
    background: var(--et-secondary, #fab413);
    border-color: var(--et-secondary, #fab413);
    color: #000;
}

/* Uchazeč + časomíra v sidebaru */
.sidebar-user-block {
    flex-shrink: 0;
    padding: var(--spacing-m);
    background: var(--et-surface);
    border-radius: 8px;
    border: 1px solid var(--et-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sidebar-user-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    font-size: var(--font-size-body-s);
    font-weight: 600;
    color: var(--et-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-icon {
    width: 24px;
    height: 24px;
    color: var(--color-primary-700);
}

.sidebar-user-title {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--color-primary-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-timer {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-timer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sidebar-timer-label {
    font-size: var(--font-size-body-m, 16px);
    color: var(--et-muted);
    font-weight: 400;
    letter-spacing: 0.2px;
}

.sidebar-timer-value {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.sidebar-timer-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.sidebar-time {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--et-text);
}

.sidebar-bar {
    height: 6px;
    background: var(--et-border);
    border-radius: var(--corner-radius-2xs);
    overflow: hidden;
}

.sidebar-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 1s linear;
}

/* Basket list */
.baskets-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background: var(--et-surface);
    border-radius: 8px;
    border: 1px solid var(--et-border);
}

.baskets-heading {
    font-size: var(--font-size-body-m, 16px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.2px;
    color: var(--et-text);
    margin-bottom: 8px;
}

.basket-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 7px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all .13s;
    margin-bottom: 4px;
}

    .basket-item:hover {
        background: var(--et-bg);
    }

    .basket-item.active {
        background: var(--et-accent-bg);
        border-color: var(--et-accent);
    }

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

.basket-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 5px;
}

.basket-name {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-primary-700);
    overflow-wrap: break-word;
    word-break: break-word;
}

.basket-item.active .basket-name {
    color: var(--et-accent);
}

.basket-prog-bar {
    height: 4px;
    background: var(--et-border);
    border-radius: 2px;
    overflow: hidden;
}

.basket-prog-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--color-primary-700);
    transition: width .3s;
}

.basket-prog-txt {
    font-size: 10px;
    color: var(--et-muted);
    font-family: 'Roboto Mono', monospace;
    white-space: nowrap;
    flex-shrink: 0;
}


.sidebar-end-wrap {
    flex-shrink: 0;
    padding: 0;
    width: 100%;
    margin-top: auto;
}

.sidebar-end-btn {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
}

/*  Content area  */
.etest-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.answers-panel-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
    width: 100%;
    padding: 12px 16px 12px;
    background: var(--et-bg);
}

.etest-content-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    background: var(--et-bg);
}

.media-area {
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 12px 22px;
    background: var(--et-bg);
    overflow: hidden;
}

.media-frame {
    background: var(--et-surface);
    border-radius: var(--corner-radius-s, 8px);
    border: 1px solid var(--et-border);
    overflow: hidden;
    width: 100%;
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.media-frame.flagged {
    border-top: 8px solid var(--et-secondary, #fab413);
}

.media-question-body {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 24px;
}

.media-question-body--image-answers {
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
}

.question {
    width: 100%;
    max-width: 960px;
}

.question--text-only,
.question--text-image,
.question--image-answers,
.question--fullscreen-image,
.question--fullscreen-video,
.question--text-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 16px;
}

/* Celoobrazovkové video: text otázky je nad videem, takže při nízkém okně blok
   přeteče rámec. Auto margin centruje stejně jako align-items: center, ale při
   přetečení se zmenší na 0, takže text zůstane doscrollovatelný. */
.question--fullscreen-video {
    margin-block: auto;
}

.question__text--overlay {
    margin: 0;
    padding: 12px 18px;
    font-size: var(--font-size-body-s);
    font-weight: 600;
    text-align: center;
    color: var(--et-text);
}

/* Bez explicitního zarovnání závisí vzhled pokynů na délce textu: krátký řádek
   vycentruje align-items: center, zalomený se zarovná vlevo pod centrovaným nadpisem. */
.question__note {
    margin: 0;
    text-align: center;
}

.question__image--fullscreen {
    max-width: 100%;
    max-height: min(55vh, 480px);
    object-fit: contain;
}

/* Obrázek otázky se zvětšuje klikem (nebo klávesou P) – tlačítko je tu kvůli ovládání
   z klávesnice, vizuálně je to pořád jen obrázek. */
.question__image-zoom {
    display: flex;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

/* Vrstva se zvětšeným obrázkem otázky nebo odpovědi. Vytváří ji etest.js mimo DOM spravovaný
   Blazorem, protože obrázek odpovědi je uvnitř tlačítka, které odpověď vybírá. Zobrazuje se
   přes fullscreen, position: fixed je záložní zobrazení, když ho prohlížeč nepovolí. */
.et-image-zoom {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--et-media-bg);
    cursor: zoom-out;
}

.et-image-zoom__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.question__text--prompt {
    text-align: left;
    align-self: stretch;
    margin-bottom: 8px;
}

.question--image-answers {
    align-items: stretch;
    justify-content: flex-start;
    max-width: 100%;
    height: auto;
    flex: 0 1 auto;
}

/* Odpovědi s obrázky — Figma Desktop 3 Images (1×3) / 4 Images (2×2) */
.answer-image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    align-items: start;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.answer-image-grid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.answer-image-card {
    margin: 0;
    padding: 0;
    min-width: 0;
    width: 100%;
}

.answer-image-card__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: auto;
    gap: 12px;
    padding: 6px 6px 12px;
    border: none;
    border-radius: 8px;
    background: var(--et-surface);
    box-shadow: none;
    overflow: hidden;
    cursor: pointer;
    font: inherit;
    transition: background .14s;
}

.answer-image-card--selected .answer-image-card__btn {
    background: var(--et-secondary);
}

.answer-image-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    min-height: 0;
    padding: 8px;
    background: var(--et-surface);
    border: none;
    border-radius: 4px;
    overflow: hidden;
}

.answer-image-card--selected .answer-image-card__media {
    background: var(--et-surface);
}

.answer-image-card__img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    background: transparent;
}

/* Fallback text when Media is missing: keep square, allow scroll instead of silent clip. */
.answer-image-card__media:has(> .answer-image-card__fallback) {
    overflow-y: auto;
}

.answer-image-card__fallback {
    /* Auto margins centrují text, když se vejde; při přetečení se složí na 0,
       takže začátek textu zůstane dosažitelný scrollem (align-items: center by ho odřízl). */
    margin-block: auto;
    padding: 16px;
    color: var(--et-text);
    font-size: var(--font-size-body-s);
    text-align: center;
    overflow-wrap: anywhere;
}

.answer-image-card__letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    margin-top: auto;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--et-accent);
    background: var(--et-accent-bg);
    border: none;
    border-radius: 8px;
    transition: background .14s, color .14s;
}

.answer-image-card--selected .answer-image-card__letter {
    background: var(--color-secondary-100, #fef0d0);
    color: var(--et-text);
}

/*
  Vyhodnocený režim mřížky (zapíná ho parametr CorrectAnswerIds, viz AnswerImageGrid) —
  odznak písmene nese barvu správnosti stejně jako u textových odpovědí. Kombinace
  se --selected je nutná kvůli specificitě: .answer-image-card--selected .answer-image-card__letter
  má dvě třídy a samotné --correct by prohrálo.
*/
.answer-image-card--correct .answer-image-card__letter,
.answer-image-card--selected.answer-image-card--correct .answer-image-card__letter {
    background: var(--color-success-600);
    color: var(--color-neutral-0);
}

.answer-image-card--incorrect .answer-image-card__letter,
.answer-image-card--selected.answer-image-card--incorrect .answer-image-card__letter {
    background: var(--color-error-600);
    color: var(--color-neutral-0);
}

.answer-image-card:not(.answer-image-card--selected):hover .answer-image-card__btn {
    background: var(--et-bg);
}

.question__text {
    margin: 0;
    font-size: var(--font-size-headline-xs, 18px);
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    color: var(--et-text);
}

.question__image {
    max-width: 100%;
    max-height: min(50vh, 420px);
    object-fit: contain;
}

.media-qmeta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    flex-shrink: 0;
    gap: 8px;
}

.media-qmeta-left {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.media-qtitle {
    font-size: var(--font-size-headline-xs);
    font-weight: 700;
    color: var(--et-text);
}

/* Bodové ohodnocení otázky. Modré ve všech hostitelích a na obou místech, kde se odznak
   zobrazuje (průběh testu i detail otázky) — jednotný vzhled je záměr zadavatele.
   Rámeček splývá s pozadím, zůstává jen kvůli zachování rozměru odznaku. */
.media-qbadge {
    font-size: var(--font-size-body-xs);
    font-weight: 600;
    color: var(--et-accent);
    background: var(--color-primary-100);
    border: 1px solid var(--color-primary-100);
    padding: 2px var(--spacing-s-nudge);
    border-radius: var(--corner-radius-l);
    white-space: nowrap;
}

.media-qtext {
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    flex-shrink: 0;
}

.media-img-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: var(--et-surface);
    overflow: hidden;
}

    .media-img-wrap.no-padding {
        padding: 0;
    }

    .media-img-wrap.dark {
        background: #0a0a0a;
    }

    .media-img-wrap svg {
        max-width: 100%;
        max-height: 100%;
    }

/* Placeholder (no media) */
.etest-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
}

.etest-placeholder-emoji {
    font-size: 72px;
    line-height: 1;
}

.etest-placeholder-label {
    font-size: 14px;
    font-weight: 600;
}

/*  Answers (right column)  */
.answers-panel {
    width: 628px;
    flex-shrink: 0;
    background: var(--et-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.answers-panel-spacer {
    flex: 1;
    min-height: 0;
}

.answers-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 16px;
    background: var(--et-bg);
    flex-shrink: 0;
}

.answers-header-score {
    display: flex;
    align-items: center;
    gap: 10px;
}

.answers-header-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-primary-700);
}

.answers-header-label {
    font-size: var(--font-size-body-s, 14px);
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-primary-700);
    white-space: nowrap;
}

.answers-header-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--color-primary-100);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.175px;
    color: var(--color-primary-700);
    white-space: nowrap;
}

.answers-panel-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    padding: 0 12px;
}

.answers-prompt {
    flex-shrink: 0;
    margin: 0;
    padding: 8px 4px 12px;
    font-size: var(--font-size-body-s);
    font-weight: 600;
    color: var(--et-text);
    text-align: left;
    width: 100%;
}

.answers {
    flex: 0 1 auto;
    max-height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 4px 12px;
    width: 100%;
    list-style: none;
    margin: 0;
}

.answer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px 12px 12px;
    min-height: 80px;
    height: auto;
    border-radius: 12px;
    border: 2px solid transparent;
    background: white;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    flex-shrink: 0;
}

.answer-btn {
    all: unset;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 56px;
    height: auto;
    padding: 0;
    cursor: pointer;
    box-sizing: border-box;
}

.answer--disabled,
.answer--disabled .answer-btn {
    cursor: default;
}

.answer--disabled {
    opacity: 0.65;
}

.answer--disabled.answer--correct,
.answer--disabled.answer--incorrect {
    opacity: 1;
}

.answer-btn:disabled {
    cursor: default;
}

    .answer:not(.answer--disabled):hover {
        border-color: #FAB413;
        background: #FFFDF5;
    }

    /* vybraná odpověď PŘED vyhodnocením */
    .answer.selected {
        background: #FAB413;
        border-color: #FAB413;
    }

    /* vyhodnocení – rámeček splývá s pozadím */
    .answer--correct {
        background: var(--color-success-100, #E3F5E1);
        border-color: var(--color-success-100, #E3F5E1);
    }

    .answer--incorrect {
        background: var(--color-error-100, #FDE7E7);
        border-color: var(--color-error-100, #FDE7E7);
    }

    /* vybraná odpověď PO vyhodnocení – pozadí dle správnosti, rámeček žlutý */
    .answer--correct.selected {
        background: var(--color-success-100, #E3F5E1);
        border-color: #FAB413;
    }

    .answer--incorrect.selected {
        background: var(--color-error-100, #FDE7E7);
        border-color: #FAB413;
    }

.answer-key {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: var(--color-primary-100);
    font-family: 'Roboto Mono', monospace;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .14s;
    color: var(--color-primary-800);
}

.answer.selected .answer-key {
    background: var(--color-secondary-200);
    color: var(--color-primary-800);
}

/*
  Vyhodnocené odpovědi (detail otázky ve veřejném webu): odznak písmene nese barvu
  správnosti, ne výchozí modrou. Stav answer--correct/--incorrect nastavuje AnswerList
  jen tehdy, když dostane CorrectAnswerIds – během běžícího testu se tedy neuplatní.
*/
/* Kombinace se .selected je nutná: .answer.selected .answer-key má tři třídy,
   samotné .answer--correct .answer-key by prohrálo na specificitě. */
.answer--correct .answer-key,
.answer--correct.selected .answer-key {
    background: var(--color-success-600);
    color: var(--color-neutral-0, #fff);
}

.answer--incorrect .answer-key,
.answer--incorrect.selected .answer-key {
    background: var(--color-error-600);
    color: var(--color-neutral-0, #fff);
}

.answer-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-primary-800);
    font-weight: 500;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

.etest-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 120px;
    padding: 10px 20px;
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-size-body-m);
    font-weight: 600;
    border-radius: var(--corner-radius-s, 8px);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.etest-nav-btn--outline {
    background: var(--et-surface);
    color: var(--et-accent);
    border: 2px solid var(--et-accent);
}

.etest-nav-btn--outline:hover:not(:disabled) {
    background: var(--et-accent-bg);
}

.etest-nav-btn--primary {
    background: var(--et-accent);
    color: #fff;
    border: 2px solid var(--et-accent);
}

.etest-nav-btn--primary:hover:not(:disabled) {
    background: var(--et-accent-h);
    border-color: var(--et-accent-h);
}

.etest-nav-btn:disabled {
    cursor: not-allowed;
    opacity: 1;
    color: var(--et-muted);
    background: var(--et-surface);
    border-color: var(--et-disabled);
}

.etest-nav-btn--primary:disabled {
    background: var(--et-disabled);
    border-color: var(--et-disabled);
    color: var(--et-surface);
}

.etest-nav-btn--primary .login-btn-icon {
    color: #fff;
}

/*  Status bar  */
.statusbar {
    padding: 6px var(--spacing-xl);
    background: var(--et-accent-d);
    color: var(--et-disabled);
    font-size: var(--font-size-body-xs);
    font-family: 'Roboto Mono', monospace;
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
    flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,.12);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--et-success);
}

/*  Video player  */
.vp-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--et-media-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Inline loop (isFullScreen=false): stays on the question page, no chrome */
.vp-wrap--inline-loop {
    height: auto;
    max-height: min(50vh, 480px);
    background: transparent;
    /* Smyčkové video nejde ovládat – bez pointer-events by ho šlo vybrat klikem
       a pozastavit nativním overlayem prohlížeče. */
    pointer-events: none;
}

.vp-wrap--inline-loop .vp-video {
    height: auto;
    max-height: min(50vh, 480px);
    cursor: default;
}

.question--text-video .vp-wrap {
    width: min(100%, 900px);
}

.vp-wrap:fullscreen .vp-controls,
.vp-wrap:fullscreen .vp-center-play,
.vp-wrap:fullscreen .vp-replay {
  display: none;
}

.vp-video {
    flex: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    cursor: pointer;
}

.vp-center-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background: rgba(0,0,0,.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}

    .vp-center-play.visible {
        opacity: 1;
    }

    .vp-center-play svg {
        width: 24px;
        height: 24px;
        fill: #fff;
    }

.vp-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.82));
    padding: 28px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transition: opacity .25s;
}

.vp-wrap:hover .vp-controls,
.vp-wrap.paused .vp-controls {
    opacity: 1;
}

.vp-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vp-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .14s;
    flex-shrink: 0;
}

    .vp-btn:hover {
        background: rgba(255,255,255,.15);
    }

    .vp-btn svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
    }

.vp-time {
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    color: rgba(255,255,255,.8);
    white-space: nowrap;
    letter-spacing: .03em;
}

.vp-spacer {
    flex: 1;
}

.vp-replay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,.65);
    border-radius: 12px;
    padding: 16px 24px;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}

    .vp-replay.visible {
        display: flex;
    }

.vp-replay-icon {
    width: 32px;
    height: 32px;
    fill: var(--color-neutral-0);
    opacity: .7;
}

.vp-replay-btn {
    background: var(--et-accent);
    border: none;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background .14s;
}

    .vp-replay-btn:hover {
        background: var(--et-accent-h);
    }

/* ============ DIALOG (Figma) ============ */
.et-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1100;
}

.et-dialog {
    width: 100%;
    max-width: 640px;
    background: var(--et-surface);
    border-radius: var(--corner-radius-s, 8px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.30);
    border: 1px solid var(--et-border);
    overflow: hidden;
}

.et-dialog-header-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px 24px 0;
}

.et-dialog-header-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--color-primary-700);
}

.et-dialog-title {
    font-size: 24px;
    line-height: 1.5;
    letter-spacing: 0.75px;
    color: var(--et-text);
    font-weight: 500;
}

/* Dialogy s ikonou (např. Podpis protokolu) mají titul v primární barvě dle Figma;
   dialogy bez ikony (Chyba, potvrzení) zůstávají neutrální. */
.et-dialog-header-content:has(> .et-dialog-header-icon) .et-dialog-title {
    color: var(--color-primary-700);
}

.et-dialog-body {
    padding: 16px 24px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.et-dialog-footer {
    padding: 16px 24px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Dialog probíhající operace nemá tlačítka – bez tohoto pravidla by pod ním zbyl prázdný pruh odsazení. */
.et-dialog-footer:empty {
    display: none;
}

.et-dialog-btn-row {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-left: auto;
}

.et-dialog-btn {
    height: 40px;
    padding: 0 16px;
    border-radius: var(--corner-radius-s, 8px);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.2px;
    cursor: pointer;
    font-family: var(--font-family, Roboto, sans-serif);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 84px;
}

.et-dialog-btn--solid {
    border: 0;
    background: var(--et-accent);
    color: #fff;
}

.et-dialog-btn--solid:hover {
    background: var(--et-accent-h);
}

.et-dialog-btn--outline {
    background: transparent;
    border: 1px solid var(--et-accent);
    color: var(--et-accent);
}

.et-dialog-btn--outline:hover {
    background: var(--et-accent-bg);
}

.et-dialog-strong {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.225px;
    color: var(--et-text);
    margin: 0;
}

.et-dialog-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.2px;
    color: var(--et-text-sub);
    margin: 0;
}

.et-dialog-text b {
    font-weight: 700;
    color: var(--et-text);
}

.et-dialog-btn:focus-visible {
    outline: 2px solid var(--et-focus);
    outline-offset: 2px;
}

/* Dialog probíhající operace (odesílání výsledku) – bez tlačítek, jen indikátor.
   Prázdná patička je skrytá, spodní odsazení dialogu proto nese indikátor (jinak by ho ořízl okraj). */
.et-dialog-busy {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 24px;
}

.et-dialog-busy__spinner {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: 3px solid var(--et-accent-bg);
    border-top-color: var(--et-accent);
    border-radius: 50%;
    animation: et-loading-spin 0.9s linear infinite;
}

/* ---- CSS @property pro animaci oblouku ---- */
@property --value {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

/* ============ ZÁHLAVÍ S LOGEM A VÝBĚREM JAZYKA ============ */
/* Používají ho stránky mimo běžící test (přihlášení, úvod, výsledky) ve všech hostitelích,
   proto styly leží zde a ne v shared.css, který PublicWeb.Client nenačítá. */
.login-topbar {
    height: 80px;
    background: var(--et-surface);
    color: var(--et-text);
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-xl);
    flex-shrink: 0;
    border-bottom: 1px solid var(--et-border);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.login-topbar-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-l);
    flex-shrink: 0;
}

.login-lang-stub {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    border-radius: var(--corner-radius-s, 8px);
    cursor: pointer;
}

.login-lang-flag,
.lang-select-flag {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
    flex-shrink: 0;
}

.login-lang-chevron,
.lang-select-chevron {
    width: 18px;
    height: 18px;
    color: var(--et-muted);
    flex-shrink: 0;
}

.lang-select {
    position: relative;
    display: inline-flex;
}

.lang-select-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.lang-select-trigger--compact {
    gap: 6px;
    height: auto;
    padding: 0;
}

.lang-select-flag--sm {
    width: 14px;
    height: 14px;
}

.lang-select-flag--md {
    width: 24px;
    height: 24px;
}

.lang-select-chevron--compact {
    width: 14px;
    height: 14px;
    color: var(--color-primary-600);
}

.lang-select-backdrop {
    position: fixed;
    inset: 0;
    border: 0;
    background: transparent;
    cursor: default;
    z-index: 1200;
}

.lang-select-menu {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 2px 0;
    background: var(--et-surface, #fff);
    border-radius: var(--corner-radius-s, 8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1201;
    overflow: hidden;
}

.lang-select--topbar .lang-select-menu {
    top: calc(100% + 2px);
}

.lang-select-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--et-text, #262626);
    font-size: var(--font-size-body-s, 14px);
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}

.lang-select-item:hover,
.lang-select-item.is-active {
    background: var(--button-outlined-neutral-active, #e7e7e7);
}

.lang-select-item-label {
    white-space: nowrap;
}

.login-logo {
    height: 64px;
    width: auto;
}

.login-logo-desktop {
    display: block;
}

.login-logo-mobile {
    display: none;
}

/* ============ VÝSLEDKOVÁ STRÁNKA – WRAPPER ============ */
.result-shell {
    font-family: var(--font-family, Roboto, sans-serif);
    background: var(--et-bg);
    color: var(--et-text);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.result-center {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    overflow: auto;
}

.result-card {
    background: var(--et-surface);
    border-radius: var(--corner-radius-s);
    border: 1px solid var(--et-border);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    width: 100%;
    max-width: 492px;
    overflow: hidden;
}

.result-card-header {
    background: var(--et-surface);
    color: var(--color-primary-700);
    font-size: var(--font-size-heading-s, 1.25rem);
    font-weight: 500;
    padding: 16px 20px 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
}

.result-card-header-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--color-primary-700);
}

.result-card-body {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.result-user-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 320px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #f2f6fc;
    margin-bottom: 0;
}

.result-user-chip-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-primary-700);
}

.result-user-name {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-primary-700);
    text-align: center;
    margin: 0;
    letter-spacing: .01em;
}

.result-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 4px;
    width: 100%;
}

.result-error {
    background: #fef2f2;
    color: #c0392b;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    white-space: pre-wrap;
    width: 100%;
}

@media (max-width: 768px) {
    .result-center { padding: 8px 12px; }
    .result-card { max-width: 100%; }
    .result-card-body { padding: 12px 14px 16px; gap: 10px; }
    .result-user-name { font-size: 15px; }
}

.result-gauge-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
}

/* ============ TACHOMETR ============ */
.gauge {
    --size:       260px;
    --thickness:  10px;
    --sweep:      220deg;
    --max:        100;
    --limit:      85;
    --value:      0;
    --arc-inset:  36px;
    --gap:        8deg;
    --track:      #e7eaee;

    --arc-d:  calc(var(--size) - 2 * var(--arc-inset));
    --cx:     calc(var(--size) / 2);
    --cy:     calc(var(--size) / 2);
    --r:      calc(var(--arc-d) / 2 - var(--thickness) / 2);
    --frac:   clamp(0, calc(var(--value) / var(--max)), 1);
    --theta:  calc(var(--frac) * var(--sweep));
    --c0:     calc(360deg - var(--sweep) / 2);
    --c1:     calc(var(--c0) + var(--theta));
    --c-end:  calc(var(--c0) + var(--sweep));
    --limit-a: calc(var(--limit) / var(--max) * var(--sweep));
    --gap0:   calc(var(--limit-a) - var(--gap) / 2);
    --gap1:   calc(var(--limit-a) + var(--gap) / 2);
    --c-gap0: calc(var(--c0) + var(--gap0));
    --c-gap1: calc(var(--c0) + var(--gap1));

    --fill:   #2e8540;
    --fill2:  #5cb35e;

    position: relative;
    width: var(--size);
    /* 220°: konce pod průměrem + řádek „získáno … bodů“ + popisky */
    height: calc(var(--size) / 2 + 40px);
    margin: 0 auto;
    overflow: visible;
    transition: --value 1s cubic-bezier(.22,.61,.36,1);
}

.gauge.is-fail {
    --fill:  #c5283d;
    --fill2: #e0556a;
}

.gauge__arc {
    position: absolute;
    left: var(--arc-inset);
    top:  var(--arc-inset);
    width:  var(--arc-d);
    height: var(--arc-d);
    border-radius: 50%;
    -webkit-mask: radial-gradient(closest-side,
        transparent calc(100% - var(--thickness)),
        #000        calc(100% - var(--thickness)));
    mask: radial-gradient(closest-side,
        transparent calc(100% - var(--thickness)),
        #000        calc(100% - var(--thickness)));
}

/* Šedá dráha s mezerou na limitu (85 %) */
.gauge__arc--track {
    background: conic-gradient(from calc(360deg - var(--sweep) / 2),
        var(--track) 0deg,
        var(--track) var(--gap0),
        transparent  var(--gap0),
        transparent  var(--gap1),
        var(--track) var(--gap1),
        var(--track) var(--sweep),
        transparent  var(--sweep));
}

/* Barevný progress – pod limitem bez překrytí mezery */
.gauge__arc--fill {
    background: conic-gradient(from calc(360deg - var(--sweep) / 2),
        var(--fill2) 0deg,
        var(--fill)  var(--theta),
        transparent  var(--theta));
}

.gauge__cap {
    position: absolute;
    width: var(--thickness);
    height: var(--thickness);
    border-radius: 50%;
    background: var(--fill2);
}

.gauge__cap--start {
    left: calc(var(--cx) + var(--r) * sin(var(--c0)) - var(--thickness) / 2);
    top:  calc(var(--cy) - var(--r) * cos(var(--c0)) - var(--thickness) / 2);
}

.gauge__cap--end {
    background: var(--fill);
    left: calc(var(--cx) + var(--r) * sin(var(--c1)) - var(--thickness) / 2);
    top:  calc(var(--cy) - var(--r) * cos(var(--c1)) - var(--thickness) / 2);
}

/* Zaoblený konec dráhy na 100 % */
.gauge__cap--track-end {
    background: var(--track);
    left: calc(var(--cx) + var(--r) * sin(var(--c-end)) - var(--thickness) / 2);
    top:  calc(var(--cy) - var(--r) * cos(var(--c-end)) - var(--thickness) / 2);
}

/* Zaoblené kraje mezery na limitu (85 %) */
.gauge__cap--gap-start,
.gauge__cap--gap-end {
    background: var(--track);
}

.gauge__cap--gap-start {
    left: calc(var(--cx) + var(--r) * sin(var(--c-gap0)) - var(--thickness) / 2);
    top:  calc(var(--cy) - var(--r) * cos(var(--c-gap0)) - var(--thickness) / 2);
}

.gauge__cap--gap-end {
    left: calc(var(--cx) + var(--r) * sin(var(--c-gap1)) - var(--thickness) / 2);
    top:  calc(var(--cy) - var(--r) * cos(var(--c-gap1)) - var(--thickness) / 2);
}

.gauge__center {
    position: absolute;
    left: 50%;
    /* Figma: 14 % / získáno blíž ke spodku oblouku (úroveň 0 % / 100 %) */
    top: auto;
    bottom: 6px;
    transform: translateX(-50%);
    width: max-content;
    max-width: 90%;
    text-align: center;
    line-height: 1.15;
}

.gauge__pct {
    display: block;
    font-size: 40px;
    font-weight: 700;
    color: var(--fill);
    font-variant-numeric: tabular-nums;
    margin: 0 0 4px;
}

.gauge__sub {
    display: block;
    margin-top: 0;
    font-size: 14px;
    color: var(--et-text, #262626);
}

.gauge__sub b {
    color: var(--et-text);
    font-weight: 700;
}

.gauge__scale {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.scale-label {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: var(--et-muted, #6d6d6d);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
    .gauge { transition: none; }
}

/* ============ VÝSLEDKY – verdikt a detail hodnot ============ */
.result-verdict-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    margin: 0;
    width: 100%;
    border: none;
}

.result-verdict-pass {
    background: #edfaf3;
    color: #1a7a4a;
}

.result-verdict-fail {
    background: #fae3de;
    color: #b50817;
}

.result-verdict-score {
    font-size: 14px;
    font-weight: 700;
}

.result-verdict-text {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .02em;
    margin: 0;
    text-align: center;
}

.result-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    width: 100%;
}

.result-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0;
    gap: 16px;
}

.result-row-label {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-body-s, 14px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--et-text, #262626);
}

.result-row-value {
    flex-shrink: 0;
    width: 100px;
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-size-body-s, 14px);
    font-weight: 700;
    line-height: 1.4;
    color: var(--et-text, #262626);
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .result-verdict-text { font-size: 16px; }
    .result-row { gap: 12px; }
    .result-row-label { font-size: 13px; }
    .result-row-value { font-size: 13px; width: auto; min-width: 72px; }
    .gauge { --size: 220px; --arc-inset: 30px; }
}

/* Hamburger  hidden on desktop */
.tb-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--color-neutral-0);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--corner-radius-xs);
    flex-shrink: 0;
}
.tb-menu-btn:hover { background: var(--et-accent-bg); }

/* Sidebar close row  hidden on desktop */
.sidebar-close-row {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-s-nudge) var(--spacing-m);
    background: var(--et-surface);
    border-bottom: 1px solid var(--et-border);
}
.sidebar-close-title {
    font-size: var(--font-size-body-s);
    font-weight: 600;
    color: var(--et-text);
}
.sidebar-close-btn {
    background: none;
    border: none;
    color: var(--et-accent);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--corner-radius-xs);
}
.sidebar-close-btn:hover { background: var(--et-accent-bg); color: var(--et-accent-h); }

.sidebar-close-icon {
    width: 18px;
    height: 18px;
}

/* Overlay backdrop  hidden on desktop */
.sidebar-overlay {
    display: none;
}

/* RESPONSIVE  768px — ETest části */
@media (max-width: 768px) {

    /* Záhlaví s logem a výběrem jazyka */
    .login-topbar {
        height: auto;
        padding: 10px 12px;
        flex-wrap: wrap;
        gap: 4px;
    }
    .login-topbar-end {
        width: 100%;
        justify-content: flex-end;
        gap: 8px;
    }
    .login-brand { gap: 8px; }
    .login-logo-desktop { display: none; }
    .login-logo-mobile { display: block; }
    .login-logo { height: 48px; }

    .login-lang-chevron,
    .lang-select-chevron {
        width: 14px;
        height: 14px;
    }

    .login-lang-flag,
    .lang-select-flag--md,
    .lang-select--topbar .lang-select-flag {
        width: 24px;
        height: 24px;
    }

    /*  Hamburger visible  */
    .tb-menu-btn { display: flex; }

    /*  Question strip: mobile padding dle SVG  */
    .q-strip-wrap { padding: var(--spacing-m) var(--spacing-m); gap: var(--spacing-s); }
    .section-label { display: none; }
    /*  Badge prostředí na mobilu ne — v úzké liště se plete s čísly otázek.  */
    .etest-env-badge { display: none; }
    .q-btn { width: 40px; height: 40px; font-size: var(--font-size-body-xs); border-radius: var(--corner-radius-s); }
    .q-group { padding: 3px; gap: 2px; }

    /*  Sidebar: drawer from left, 300px dle Mobile SVG  */
    .etest-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 300px;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: none;
    }
    .sidebar-open .etest-sidebar {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,.25);
    }

    /* Sidebar close row visible */
    .sidebar-close-row { display: flex; }

    /* Overlay */
    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s;
    }
    .sidebar-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }

    /*  Sidebar obsah: kompaktní. Názvy oblastí jsou dlouhé a dědily line-height 24px
        při písmu 12,5px – každá oblast pak zabírala půl obrazovky.  */
    .sidebar-user-block { padding: var(--spacing-s) var(--spacing-m); }
    /* Bez kandidáta a s vypnutým výběrem jazyka (Public Web) by zůstal prázdný rámeček. */
    .sidebar-user-block:has(> .sidebar-user-row:empty) { display: none; }
    .sidebar-timer { gap: 4px; }
    .sidebar-timer-label { font-size: var(--font-size-body-s); }
    .sidebar-timer-value { gap: 8px; }
    .sidebar-timer-icon { width: 20px; height: 20px; }
    .sidebar-time { font-size: 22px; line-height: 1.3; }
    .baskets-wrap { padding: 8px; }
    .baskets-heading { font-size: var(--font-size-body-s); margin-bottom: 4px; }
    .basket-item { padding: 6px 8px; margin-bottom: 2px; }
    .basket-header-row { align-items: baseline; margin-bottom: 4px; }
    .basket-name {
        font-size: 13px;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }
    /* Aktuální oblast se vypíše celá, ostatní stačí poznat podle začátku názvu. */
    .basket-item.active .basket-name {
        -webkit-line-clamp: unset;
        line-clamp: unset;
    }
    .basket-prog-txt { line-height: 1.35; }

    /*  Content area: otázka a odpovědi jsou pod sebou a scrollují jako jeden celek.
        Dřív měla otázka vlastní scroll ve zbytku výšky nad odpověďmi a obrázek
        se do něj nevešel. Lišta s čísly zůstává nahoře, navigace přilepená dole.  */
    /* 100vh na mobilu zahrnuje i plochu pod lištou prohlížeče – navigace by zapadla. */
    .etest-shell { height: 100dvh; }
    .etest-content-body {
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }
    .media-area {
        flex: 0 0 auto;
        overflow: visible;
    }
    /* Panel vyplní zbytek výšky, aby navigace u krátké otázky nevisela uprostřed obrazovky. */
    .answers-panel {
        flex: 1 0 auto;
        overflow: visible;
    }
    .media-question-body { overflow: visible; }
    .answers-panel-body {
        overflow: visible;
        justify-content: flex-start;
    }
    /* overflow zůstává – ořezává odrážky, které gov styles.css kreslí u <li> vlevo od okraje. */
    .answers { max-height: none; }
    .answers-panel-nav {
        position: sticky;
        bottom: 0;
        z-index: 1;
        margin-top: auto;
        border-top: 1px solid var(--et-border);
    }
    .answers-panel { width: 100%; }

    /*  Hlavička otázky a tělo: menší odsazení  */
    .media-qmeta { padding: var(--spacing-s) var(--spacing-m); }
    .media-qtitle { font-size: var(--font-size-body-m); white-space: nowrap; }
    .flag-btn { height: 36px; gap: 8px; padding: 0 10px; font-size: var(--font-size-body-s); }
    .media-question-body,
    .media-question-body--image-answers { padding: var(--spacing-s) var(--spacing-m) var(--spacing-m); }
    .question__text { font-size: var(--font-size-body-m); }
    .question--text-only,
    .question--text-image,
    .question--image-answers,
    .question--fullscreen-image,
    .question--fullscreen-video,
    .question--text-video { gap: 12px; }
    .answer-image-grid {
        gap: 12px;
        padding-bottom: 4px;
    }
    .answer-image-grid:has(> :nth-child(3):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .answer-image-card__letter {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }
    .answers-panel-nav {
        padding: 10px 12px 12px;
    }
    .etest-nav-btn {
        min-width: 0;
        flex: 1;
    }
    .media-area { padding: 8px; }
    .media-frame {
        max-width: 100%;
        border-radius: var(--corner-radius-s);
    }
    .media-qtext { padding: 8px 12px; font-size: 13px; }
    .media-img-wrap { padding: 8px; }

    /*  Answers: compact  */
    .answers { gap: 6px; padding: 8px; }
    .answers-header { padding: 7px 12px; }
    .answer { min-height: 60px; height: auto; gap: 12px; padding: 8px 12px 8px 8px; }
    .answer-btn { min-height: 44px; }
    .answer-key { width: 44px; height: 44px; font-size: 16px; border-radius: 6px; }
    .answer-text { font-size: var(--font-size-body-s); }

    /*  Statusbar: hidden on mobile  */
    .statusbar { display: none; }
}

/* RESPONSIVE  400px — ETest části */
@media (max-width: 400px) {
    .q-btn { width: 24px; height: 24px; font-size: 9px; }
}

/* ===== Panel neočekávané chyby (EtUnhandledErrorPanel) ===== */
.et-error-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 24px;
    box-sizing: border-box;
}

.et-error-panel__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    max-width: 560px;
    width: 100%;
    padding: 32px;
    background: #fff;
    border: 1px solid var(--color-neutral-300);
    border-top: 4px solid var(--color-error-500);
    border-radius: var(--corner-radius-s-nudge, 4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.et-error-panel__icon {
    width: 48px;
    height: 48px;
    color: var(--color-error-500);
}

.et-error-panel__title {
    margin: 0;
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-size-headline-m, 24px);
    font-weight: 700;
    color: var(--color-neutral-900);
}

.et-error-panel__text {
    margin: 0;
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: var(--font-size-body-m, 16px);
    line-height: 1.5;
    color: var(--color-neutral-700);
}

.et-error-panel__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

/* Odkazy ve tvaru tlačítka — musí vypadat stejně jako <button>. */
.et-error-panel__actions .login-btn-primary {
    text-decoration: none;
}

/* Primární tlačítko používají komponenty ETestu (sidebar, chybový panel, výsledky),
   proto je definováno zde a ne v shared.css. */
.login-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 20px;
    background: var(--color-primary-700);
    color: #fff;
    font-family: var(--font-family, Roboto, sans-serif);
    font-size: 18px;
    font-weight: 700;
    border: none;
    border-radius: var(--corner-radius-s, 8px);
    cursor: pointer;
    transition: background .15s;
}

.login-btn-primary:hover {
    background: var(--color-primary-800);
}

.login-btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.login-btn-primary--ghost {
    background: transparent;
    color: var(--color-primary-600);
    border: 2px solid var(--color-primary-600);
}

.login-btn-primary--ghost:hover {
    background: var(--color-primary-100);
}

@media (max-width: 600px) {
    .et-error-panel__actions {
        flex-direction: column;
        width: 100%;
    }

    .et-error-panel__actions .login-btn-primary {
        width: 100%;
    }
}

/* Záložní chybová lišta Blazoru v TestLayoutu.
   Pravidlo v MainLayout.razor.css je scoped (atribut komponenty), a proto se na
   TestLayout nevztahuje – lišta by pak byla trvale viditelná. Zde je nescoped.
   Blazor ji při skutečné chybě zobrazí přepsáním display na block. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 1000;
    color-scheme: light only;
}